From 535d843036af703c0992b80101c4ef57e56bf74a Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Sun, 22 Feb 2026 14:12:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=85=A8=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jeesite/modules/biz/entity/BizNotes.java  |   19 +-
 web-vue/packages/biz/api/biz/notes.ts         |    6 +
 .../desktop/workbench/components/NoteTodo.vue | 1018 +++++++++++------
 3 files changed, 695 insertions(+), 348 deletions(-)

diff --git a/web-api/src/main/java/com/jeesite/modules/biz/entity/BizNotes.java b/web-api/src/main/java/com/jeesite/modules/biz/entity/BizNotes.java
index 42217f2b..c19a282d 100644
--- a/web-api/src/main/java/com/jeesite/modules/biz/entity/BizNotes.java
+++ b/web-api/src/main/java/com/jeesite/modules/biz/entity/BizNotes.java
@@ -3,13 +3,6 @@ package com.jeesite.modules.biz.entity;
 import java.io.Serializable;
 import java.util.Date;
 
-import com.jeesite.common.mybatis.annotation.JoinTable;
-import com.jeesite.common.mybatis.annotation.JoinTable.Type;
-import com.fasterxml.jackson.annotation.JsonFormat;
-import jakarta.validation.constraints.NotBlank;
-import jakarta.validation.constraints.Size;
-import jakarta.validation.constraints.NotNull;
-
 import com.jeesite.common.entity.DataEntity;
 import com.jeesite.common.mybatis.annotation.Column;
 import com.jeesite.common.mybatis.annotation.Table;
@@ -29,8 +22,14 @@ import java.io.Serial;
 @Table(name = "biz_notes", alias = "a", label = "便签管理表信息", columns = {
         @Column(name = "create_time", attrName = "createTime", label = "创建时间", isUpdate = false, isQuery = false, isUpdateForce = true),
         @Column(name = "id", attrName = "id", label = "便签唯一标识", isPK = true),
+        @Column(name = "title", attrName = "title", label = "便签主题", queryType = QueryType.LIKE),
         @Column(name = "content", attrName = "content", label = "便签内容", queryType = QueryType.LIKE),
+        @Column(name = "priority", attrName = "priority", label = "便签级别"),
         @Column(name = "ustatus", attrName = "ustatus", label = "便签状态"),
+        @Column(name = "start_time", attrName = "startTime", label = "开始时间"),
+        @Column(name = "end_time", attrName = "endTime", label = "结束时间"),
+        @Column(name = "type", attrName = "type", label = "便签类型"),
+        @Column(name = "deadline", attrName = "deadline", label = "截至时间"),
         @Column(name = "update_time", attrName = "updateTime", label = "更新时间"),
         @Column(name = "create_user", attrName = "createUser", label = "创建用户", isUpdate = false, isUpdateForce = true),
 }, orderBy = "a.create_time DESC"
@@ -41,8 +40,14 @@ public class BizNotes extends DataEntity<BizNotes> implements Serializable {
     @Serial
     private static final long serialVersionUID = 1L;
     private Date createTime;        // 创建时间
+    private String title;
     private String content;        // 便签内容
+    private String priority;
     private String ustatus;        // 便签状态
+    private Date startTime;
+    private Date endTime;
+    private String type;
+    private Date deadline;
     private Date updateTime;        // 更新时间
     private String createUser;        // 创建用户
 
diff --git a/web-vue/packages/biz/api/biz/notes.ts b/web-vue/packages/biz/api/biz/notes.ts
index 879973b0..75eec8d2 100644
--- a/web-vue/packages/biz/api/biz/notes.ts
+++ b/web-vue/packages/biz/api/biz/notes.ts
@@ -11,8 +11,14 @@ const { adminPath } = useGlobSetting();
 
 export interface BizNotes extends BasicModel<BizNotes> {
   createTime?: string; // 创建时间
+  title: string;
   content: string; // 便签内容
+  priority: string;
   ustatus: string; // 便签状态
+  startTime: string;
+  endTime: string;
+  type: string;
+  deadline?: string;
   updateTime: string; // 更新时间
   createUser?: string; // 创建用户
 }
diff --git a/web-vue/packages/core/layouts/views/desktop/workbench/components/NoteTodo.vue b/web-vue/packages/core/layouts/views/desktop/workbench/components/NoteTodo.vue
index 1b81f182..90d5b01e 100644
--- a/web-vue/packages/core/layouts/views/desktop/workbench/components/NoteTodo.vue
+++ b/web-vue/packages/core/layouts/views/desktop/workbench/components/NoteTodo.vue
@@ -1,219 +1,361 @@
 <template>
   <div class="note-manager">
-    <div class="tabs-sidebar">
-      <div class="tab-item" @click="activeTab = 'todo'" :class="{ active: activeTab === 'todo' }">待开始 ({{ todoList.length }})</div>
-      <div class="tab-item" @click="activeTab = 'doing'" :class="{ active: activeTab === 'doing' }">进行中 ({{ doingList.length }})</div>
-      <div class="tab-item" @click="activeTab = 'done'" :class="{ active: activeTab === 'done' }">已完成 ({{ doneList.length }})</div>
-    </div>
-
-    <div class="content-container">
-      <div class="create-note" v-if="activeTab === 'todo'">
-        <textarea v-model="newNoteText" placeholder="请输入便签内容..." class="note-input"></textarea>
+    <div class="left-panel">
+      <div class="create-note">
+        <h4 class="create-title">添加便签</h4>
+        <div class="title-divider"></div>
+        <a-input 
+          v-model:value="newNoteTitle" 
+          placeholder="请输入便签主题..."
+          class="note-title-input"
+        ></a-input>
+        <a-textarea 
+          v-model:value="newNoteText" 
+          placeholder="请输入便签内容..." 
+          class="note-input"
+          :rows="3"
+        ></a-textarea>
+        <div class="selector-row">
+          <ASelect
+            v-model:value="newNotePriority"
+            placeholder="请输入便签级别"
+            class="tag-select"
+          >
+            <ASelectOption value="low">低</ASelectOption>
+            <ASelectOption value="medium">中</ASelectOption>
+            <ASelectOption value="high">高</ASelectOption>
+          </ASelect>
+          <ADatePicker 
+            v-model:value="newNoteDeadline"
+            show-time 
+            placeholder="请输入截至时间" 
+            class="date-picker"
+          />
+        </div>
+        <div class="radio-full-row">
+          <ARadioGroup v-model:value="newNoteType">
+            <ARadioButton value="work">工作</ARadioButton>
+            <ARadioButton value="life">生活</ARadioButton>
+            <ARadioButton value="study">学习</ARadioButton>
+            <ARadioButton value="other">其他</ARadioButton>
+          </ARadioGroup>
+        </div>
         <button @click="addNote" class="add-btn">添加便签</button>
       </div>
-      <div class="note-grid" v-if="activeTab === 'todo'">
-        <div class="note-card" v-for="note in todoList" :key="`todo-${note.id}`">
-          <ATooltip :title="note.content" placement="bottom" class="tooltip-custom">
-            <div class="note-card-body">
-              <div class="note-card-content-box">
-                <p class="ellipsis-3rows">{{ note.content }}</p>
-              </div>
-              <div class="note-card-time-row">
-                <span class="time-left">{{ note.createTime }}</span>
-                <span class="time-split"></span>
-              </div>
-            </div>
-          </ATooltip>
-          <div class="note-card-divider"></div>
-          <div class="note-card-actions">
-            <button class="start-btn" @click.stop="changeStatus(note, 'todo', 'doing')">开始</button>
-            <button class="delete-btn" @click.stop="deleteNote(note, 'todo')">删除</button>
+
+      <div class="statistics-box">
+        <h4 class="stat-title">状态统计</h4>
+        <div class="title-divider"></div>
+        <div class="stat-item">
+          <span class="stat-label">待开始：</span>
+          <span class="stat-value todo-count">{{ todoList.length }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">进行中：</span>
+          <span class="stat-value doing-count">{{ doingList.length }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">已完成：</span>
+          <span class="stat-value done-count">{{ doneList.length }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">完成率：</span>
+          <span class="stat-value rate-count">{{ completionRate }}%</span>
+        </div>
+        <div class="stat-progress">
+          <div class="progress-bar">
+            <div class="progress-todo" :style="{ width: todoRate + '%' }"></div>
+            <div class="progress-doing" :style="{ width: doingRate + '%' }"></div>
+            <div class="progress-done" :style="{ width: doneRate + '%' }"></div>
+          </div>
+        </div>
+        
+        <div class="priority-stat-container">
+          <h5 class="priority-stat-title">级别统计</h5>
+          <div class="priority-cards">
+            <div class="priority-card priority-low-card">
+              <div class="priority-card-inner">
+                <span class="priority-name">低优先级</span>
+                <span class="priority-count">{{ lowPriorityDoneCount }}/{{ lowPriorityTotalCount }}</span>
+              </div>
+            </div>
+            <div class="priority-card priority-medium-card">
+              <div class="priority-card-inner">
+                <span class="priority-name">中优先级</span>
+                <span class="priority-count">{{ mediumPriorityDoneCount }}/{{ mediumPriorityTotalCount }}</span>
+              </div>
+            </div>
+            <div class="priority-card priority-high-card">
+              <div class="priority-card-inner">
+                <span class="priority-name">高优先级</span>
+                <span class="priority-count">{{ highPriorityDoneCount }}/{{ highPriorityTotalCount }}</span>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="empty-tip" v-if="todoList.length === 0">暂无待开始便签</div>
       </div>
+    </div>
 
-      <div class="search-note" v-if="activeTab === 'doing'">
+    <div class="right-panel">
+      <div class="search-note">
         <a-input-search
-          v-model:value="doingSearchText"
+          v-model:value="searchText"
           placeholder="请输入关键词搜索便签"
           enter-button
-          @search="onSearchDoing()"
+          @search="onSearch"
         />
       </div>
-      <div class="note-grid" v-if="activeTab === 'doing'">
-        <div class="note-card" v-for="note in doingList" :key="`doing-${note.id}`">
-          <ATooltip :title="note.content" placement="bottom" class="tooltip-custom">
-            <div class="note-card-body">
-              <div class="note-card-content-box">
-                <p class="ellipsis-3rows">{{ note.content }}</p>
+      <div class="tab-switch-row">
+        <div class="tab-item" @click="switchTab('todo')" :class="{active:activeTab==='todo'}">
+          待开始
+        </div>
+        <div class="tab-item" @click="switchTab('doing')" :class="{active:activeTab==='doing'}">
+          进行中
+        </div>
+        <div class="tab-item" @click="switchTab('done')" :class="{active:activeTab==='done'}">
+          已完成
+        </div>
+      </div>
+      <div class="note-grid">
+        <div class="note-card" v-for="note in currentList" :key="note.id">
+          <ATooltip 
+            :title="note.content" 
+            placement="bottom" 
+            class="tooltip-custom"
+          >
+            <div class="note-card-content">
+              <div class="card-row card-title-row">
+                <span class="card-title">{{ note.title }}</span>
               </div>
-              <div class="note-card-time-row">
-                <span class="time-left">{{ note.createTime }}</span>
-                <span class="time-split"></span>
-                <span class="time-right">{{ note.updateTime }}</span>
+              <div class="card-divider"></div>
+              
+              <div class="card-row card-meta-row">
+                <span class="card-priority" :class="`priority-${note.priority}`">
+                  级别：{{ getPriorityText(note.priority) }}
+                </span>
+                <span class="card-type" :class="`type-${note.type}`">
+                  类型：{{ getTypeText(note.type) }}
+                </span>
+              </div>
+              <div class="card-divider"></div>
+              <div class="card-row card-content-row">
+                <p class="content-text">{{ note.content }}</p>
+              </div>
+              <div class="card-divider"></div>
+              <div class="card-row card-time-row">
+                <span class="create-time">创建：{{ formatSimpleTime(note.createTime) }}</span>
+                <span class="update-time">修改：{{ formatSimpleTime(note.updateTime) }}</span>
+              </div>
+              <div class="card-divider"></div>
+              <div class="card-row card-actions-row">
+                <span class="deadline-time">
+                  截至：{{ note.deadline ? formatSimpleTime(note.deadline) : '无' }}
+                </span>
+                <div class="action-buttons">
+                  <button class="start-btn" @click.stop="changeStatus(note, 'todo', 'doing')" v-if="activeTab==='todo'">开始</button>
+                  <button class="complete-btn" @click.stop="changeStatus(note, 'doing', 'done')" v-if="activeTab==='doing'">完成</button>
+                  <button class="back-btn" @click.stop="changeStatus(note, 'done', 'doing')" v-if="activeTab==='done'">回退</button>
+                  <button class="back-btn" @click.stop="changeStatus(note, 'doing', 'todo')" v-if="activeTab==='doing'">回退</button>
+                  <button class="delete-btn" @click.stop="deleteNote(note,activeTab)">删除</button>
+                </div>
               </div>
             </div>
           </ATooltip>
-          <div class="note-card-divider"></div>
-          <div class="note-card-actions">
-            <button class="complete-btn" @click.stop="changeStatus(note, 'doing', 'done')">完成</button>
-            <button class="back-btn" @click.stop="changeStatus(note, 'doing', 'todo')">回退</button>
-          </div>
         </div>
-        <div class="empty-tip" v-if="doingList.length === 0">暂无进行中便签</div>
-      </div>
-
-      <div class="search-note" v-if="activeTab === 'done'">
-        <a-input-search
-          v-model:value="doneSearchText"
-          placeholder="请输入关键词搜索便签"
-          enter-button
-          @search="onSearchDone()"
-        />
-      </div>
-      <div class="note-grid" v-if="activeTab === 'done'">
-        <div class="note-card" v-for="note in doneList" :key="`done-${note.id}`">
-          <ATooltip :title="note.content" placement="bottom" class="tooltip-custom">
-            <div class="note-card-body">
-              <div class="note-card-content-box">
-                <p class="ellipsis-3rows">{{ note.content }}</p>
-              </div>
-              <div class="note-card-time-row">
-                <span class="time-left">{{ note.createTime }}</span>
-                <span class="time-split"></span>
-                <span class="time-right">{{ note.updateTime }}</span>
-              </div>
-            </div>
-          </ATooltip>
-          <div class="note-card-divider"></div>
-          <div class="note-card-actions">
-            <button class="back-btn" @click.stop="changeStatus(note, 'done', 'doing')">回退</button>
-            <button class="delete-btn" @click.stop="deleteNote(note, 'done')">删除</button>
-          </div>
-        </div>
-        <div class="empty-tip" v-if="doneList.length === 0">暂无已完成便签</div>
+        <div class="empty-tip" v-if="currentList.length===0">暂无数据</div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import { ref, onMounted, computed, watch } from 'vue'
-import { Tooltip as ATooltip, message, Modal } from 'ant-design-vue'
-import { useUserStore } from '@jeesite/core/store/modules/user';
-import { bizNotesListAll, bizNotesSave, bizNotesDelete } from '@jeesite/biz/api/biz/notes';
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue'
+import {
+  Tooltip as ATooltip,
+  Input as AInput,
+  InputSearch as AInputSearch,
+  Textarea as ATextarea,
+  Select as ASelect,
+  SelectOption as ASelectOption,
+  DatePicker as ADatePicker,
+  Radio as ARadio,
+  RadioGroup as ARadioGroup,
+  RadioButton as ARadioButton,
+  message, Modal
+} from 'ant-design-vue'
+import { useUserStore } from '@jeesite/core/store/modules/user'
+import { bizNotesListAll, bizNotesSave, bizNotesDelete } from '@jeesite/biz/api/biz/notes'
+import dayjs from 'dayjs'
 
-const userStore = useUserStore();
-const userinfo = computed(() => userStore.getUserInfo);
+const userStore = useUserStore()
+const userinfo = computed(() => userStore.getUserInfo)
 
-const activeTab = ref('todo');
-const newNoteText = ref('');
-const doingSearchText = ref('');
-const doneSearchText = ref('');
+const activeTab = ref('todo')
+const searchText = ref('')
 
-const todoList = ref([]);
-const doingList = ref([]);
-const doneList = ref([]);
+const newNoteTitle = ref('')
+const newNoteText = ref('')
+const newNotePriority = ref('low')
+const newNoteType = ref('work')
+const newNoteDeadline = ref('')
 
-watch(activeTab, (newTab) => {
-  if (newTab === 'doing') {
-    doingSearchText.value = '';
-    fetchDataList({ ustatus: 'doing' });
-  } else if (newTab === 'done') {
-    doneSearchText.value = '';
-    fetchDataList({ ustatus: 'done' });
-  } else if (newTab === 'todo') {
-    fetchDataList({ ustatus: 'todo' });
+const todoList = ref<any[]>([])
+const doingList = ref<any[]>([])
+const doneList = ref<any[]>([])
+
+const currentList = computed(() => {
+  if (activeTab.value === 'todo') return todoList.value
+  if (activeTab.value === 'doing') return doingList.value
+  if (activeTab.value === 'done') return doneList.value
+  return []
+})
+
+const totalCount = computed(() => todoList.value.length + doingList.value.length + doneList.value.length)
+const completionRate = computed(() => {
+  if (totalCount.value === 0) return 0
+  const rate = (doneList.value.length / totalCount.value) * 100
+  return rate.toFixed(1)
+})
+
+const todoRate = computed(() => {
+  if (totalCount.value === 0) return 0
+  return (todoList.value.length / totalCount.value) * 100
+})
+const doingRate = computed(() => {
+  if (totalCount.value === 0) return 0
+  return (doingList.value.length / totalCount.value) * 100
+})
+const doneRate = computed(() => {
+  if (totalCount.value === 0) return 0
+  return (doneList.value.length / totalCount.value) * 100
+})
+
+const allNotes = computed(() => [
+  ...todoList.value,
+  ...doingList.value,
+  ...doneList.value
+])
+
+const lowPriorityTotalCount = computed(() => allNotes.value.filter(note => note.priority === 'low').length)
+const lowPriorityDoneCount = computed(() => allNotes.value.filter(note => note.priority === 'low' && note.ustatus === 'done').length)
+
+const mediumPriorityTotalCount = computed(() => allNotes.value.filter(note => note.priority === 'medium').length)
+const mediumPriorityDoneCount = computed(() => allNotes.value.filter(note => note.priority === 'medium' && note.ustatus === 'done').length)
+
+const highPriorityTotalCount = computed(() => allNotes.value.filter(note => note.priority === 'high').length)
+const highPriorityDoneCount = computed(() => allNotes.value.filter(note => note.priority === 'high' && note.ustatus === 'done').length)
+
+const formatToYmdHms = (date: any) => {
+  if (!date) return ''
+  const dayjsDate = dayjs.isDayjs(date) ? date : dayjs(date)
+  return dayjsDate.format('YYYY-MM-DD HH:mm:ss')
+}
+
+const formatSimpleTime = (timeStr: string) => {
+  if (!timeStr) return ''
+  return timeStr.substring(0, 19).replace('T', ' ')
+}
+
+const getPriorityText = (priority: string) => {
+  const map = {
+    low: '低',
+    medium: '中',
+    high: '高'
   }
-});
+  return map[priority] || '未知'
+}
 
-const onSearchDoing = () => {
-  fetchDataList({
-    content: doingSearchText.value,
-    ustatus: 'doing',
-  });
-};
+const getTypeText = (type: string) => {
+  const map = {
+    work: '工作',
+    life: '生活',
+    study: '学习',
+    other: '其他'
+  }
+  return map[type] || '未知'
+}
 
-const onSearchDone = () => {
-  fetchDataList({
-    content: doneSearchText.value,
-    ustatus: 'done',
-  });
-};
+const switchTab = (tab: string) => {
+  activeTab.value = tab
+  searchText.value = ''
+  fetchDataList({})
+}
 
-const fetchDataList = async (customParams = {}) => {
+const onSearch = () => {
+  fetchDataList({ 
+    title: searchText.value,
+	ustatus: activeTab.value,
+	createUser: userinfo.value.loginCode,
+  })
+}
+
+async function fetchDataList(params: any = {}) {
+  if (!userinfo.value?.loginCode) return
   try {
-    const reqParams = {
-      ...customParams,
-      createUser: userinfo.value?.loginCode,
-    }
-    
-    const result = await bizNotesListAll(reqParams);
-    
-    if (reqParams.ustatus === 'todo') {
-      todoList.value = result ? result.filter(item => item.ustatus === 'todo') : [];
-    } else if (reqParams.ustatus === 'doing') {
-      doingList.value = result ? result.filter(item => item.ustatus === 'doing') : [];
-    } else if (reqParams.ustatus === 'done') {
-      doneList.value = result ? result.filter(item => item.ustatus === 'done') : [];
-    } else {
-      todoList.value = result ? result.filter(item => item.ustatus === 'todo') : [];
-      doingList.value = result ? result.filter(item => item.ustatus === 'doing') : [];
-      doneList.value = result ? result.filter(item => item.ustatus === 'done') : [];
-    }
-  } catch (error) {
-    console.error('获取便签列表失败：', error);
-    if (customParams.ustatus === 'doing') {
-      doingList.value = [];
-    } else if (customParams.ustatus === 'done') {
-      doneList.value = [];
-    } else if (customParams.ustatus === 'todo') {
-      todoList.value = [];
+    const baseParams = {
+      ...params,
+      createUser: userinfo.value.loginCode
     }
+    const allRes = await bizNotesListAll(baseParams)
+    const allData = allRes || []
+    todoList.value = allData.filter((d: any) => d.ustatus === 'todo')
+    doingList.value = allData.filter((d: any) => d.ustatus === 'doing')
+    doneList.value = allData.filter((d: any) => d.ustatus === 'done')
+  } catch (err) {
+    console.error('加载失败：', err)
   }
-};
-
-const addNote = async () => {
-  const text = newNoteText.value.trim()
-  if (!text) {
-    message.warning("请输入便签内容后继续...");
-    return
-  }
+}
 
+async function addNote() {
+  const title = newNoteTitle.value.trim()
+  const content = newNoteText.value.trim()
+  if (!title || !content) return message.warning('请填写完整的标题和内容')
+  
   try {
-    const newNote = {
-      content: text,
+    const formattedDeadline = formatToYmdHms(newNoteDeadline.value)
+    const res = await bizNotesSave({
+      title, 
+      content,
       ustatus: 'todo',
+      type: newNoteType.value,
+      priority: newNotePriority.value,
+      deadline: formattedDeadline,
       createUser: userinfo.value.loginCode,
-    };
-    const res = await bizNotesSave(newNote);
-    message.success(res?.message || '添加便签成功');
-    fetchDataList({ ustatus: 'todo' });
-    newNoteText.value = '';
-  } catch (error) {
-    console.error('添加便签失败：', error);
+      createTime: formatToYmdHms(new Date()),
+      updateTime: formatToYmdHms(new Date())
+    });
+    message.success(res.message);
+    newNoteTitle.value = ''
+    newNoteText.value = ''
+    newNotePriority.value = 'low'
+    newNoteType.value = 'work'
+    newNoteDeadline.value = ''
+    fetchDataList({})
+  } catch (err) {
+    console.error('添加失败：', err)
   }
-};
+}
 
-const changeStatus = async (note, fromStatus, toStatus) => {
+async function changeStatus(note: any, from: string, to: string) {
   try {
-    const updateData = {
+    const res = await bizNotesSave({
       id: note.id,
+      title: note.title,
       content: note.content,
-      ustatus: toStatus,
-      updateTime: new Date().toISOString()
-    };
-    const res = await bizNotesSave(updateData);
-    message.success(res?.message || '状态更新成功');
-    fetchDataList({ ustatus: fromStatus });
-    fetchDataList({ ustatus: toStatus });
-  } catch (error) {
-    console.error('更新便签状态失败：', error);
+      ustatus: to,
+      priority: note.priority,
+      type: note.type,
+      deadline: note.deadline,
+      updateTime: formatToYmdHms(new Date())
+    });
+	message.success(res.message);
+    fetchDataList({})
+  } catch (err) {
+    console.error('状态更新失败：', err)
   }
-};
+}
 
-const deleteNote = async (note, fromStatus) => {
+function deleteNote(note: any, from: string) {
   Modal.confirm({
     title: '温馨提示',
     content: '您确定要删除当前便签吗?',
@@ -224,21 +366,19 @@ const deleteNote = async (note, fromStatus) => {
     onOk: async () => {
       try {
         const res = await bizNotesDelete({ id: note.id });
-        message.success(res?.message || '删除便签成功');
-        fetchDataList({ ustatus: fromStatus });
-      } catch (error) {
-        console.error('删除便签失败：', error);
+		message.success(res.message);
+        fetchDataList({})
+      } catch (err) {
+        console.error('删除失败：', err)
       }
     },
     onCancel: () => {
-      message.info('已取消删除操作');
+      message.info('已取消删除操作')
     }
-  });
-};
+  })
+}
 
-onMounted(() => {
-  fetchDataList({});
-});
+fetchDataList({})
 </script>
 
 <style scoped>
@@ -247,32 +387,64 @@ onMounted(() => {
   padding: 0;
   box-sizing: border-box;
 }
-html,body,#app {
-  width: 100%;
-  height: 100%;
-}
 
 .note-manager {
   width: 100%;
   height: calc(100vh - 445px);
-  padding: 2px;
-  background: #fafafa;
   display: flex;
   gap: 4px;
+  background: #fafafa;
 }
-
-.tabs-sidebar {
-  width: 120px;
-  height: 100%;
+.left-panel {
+  width: 30%;
+  background: #fff;
   border: 1px solid #cce5ff;
   border-radius: 4px;
-  background: #fff;
+  padding: 10px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 8px 0;
+  gap: 15px;
+  height: 100%;
+}
+.create-note {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid #e8f4ff;
+  border-radius: 8px;
+  padding: 12px;
+  background: #f0f8ff;
+}
+.statistics-box {
+  flex: 1;
+  border: 1px solid #e8f4ff;
+  border-radius: 8px;
+  padding: 12px;
+  background: #f0f8ff;
+}
+.right-panel {
+  width: 70%;
+  background: #fff;
+  border: 1px solid #cce5ff;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.search-note {
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
+.tab-switch-row {
+  display: flex;
+  gap: 4px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eee;
+  background: #fff;
+  justify-content: flex-start;
+}
 .tab-item {
   padding: 8px 6px;
   font-size: 12px;
@@ -281,82 +453,237 @@ html,body,#app {
   text-align: center;
   position: relative;
   transition: all 0.2s ease;
+  flex: unset;
+  border-radius: 4px;
 }
 .tab-item:hover {
-  background: #f0f9ff;
+  background: transparent;
+  color: #409eff;
 }
 .tab-item.active {
   color: #409eff;
   font-weight: 500;
-  background: #e6f7ff;
+  background: transparent;
 }
 .tab-item.active::before {
   content: '';
   position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 3px;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  height: 2px;
+  width: 60%;
   background: #409eff;
+  border-radius: 2px;
 }
 
-.content-container {
-  flex: 1;
-  height: 100%;
-  border: 1px solid #cce5ff;
-  border-radius: 4px;
-  background: #fff;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.create-note, .search-note {
-  padding: 10px;
-  border-bottom: 1px solid #f0f0f0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.note-input, .search-input {
-  height: 70px;
+.radio-full-row {
   width: 100%;
-  padding: 4px 10px;
+}
+.radio-full-row :deep(.ant-radio-group) {
+  width: 100%;
+  display: flex;
+}
+.radio-full-row :deep(.ant-radio-button-wrapper) {
+  flex: 1;
+  text-align: center;
+}
+.radio-full-row :deep(.ant-radio-button-wrapper-checked) {
+  background: #e6f7ff !important;
+  border-color: #91d5ff !important;
+  color: #409eff !important;
+}
+
+.create-title {
+  font-size: 15px;
+  color: #409eff;
+  margin: 0 0 5px 0;
+  font-weight: 600;
+}
+.stat-title {
+  font-size: 15px;
+  color: #409eff;
+  margin: 0 0 5px 0;
+  font-weight: 600;
+}
+
+.title-divider {
+  height: 2px;
+  width: 100%;
+  background: linear-gradient(90deg, #409eff, #87ceeb, transparent);
+  border-radius: 1px;
+  margin-bottom: 10px;
+}
+
+.note-title-input {
+  height: 36px;
   border: 1px solid #ddd;
   border-radius: 8px;
+  padding: 0 10px;
+  font-size: 13px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+.note-input {
+  height: 70px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 4px 10px;
   resize: vertical;
   font-size: 13px;
   line-height: 1.5;
   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
-.search-input {
-  height: 40px;
-  resize: none;
+.selector-row {
+  display: flex;
+  gap: 8px;
+}
+.tag-select, .date-picker {
+  flex: 1;
 }
 .add-btn {
   height: 36px;
-  width: 100%;
   background: #409eff;
   color: #fff;
   border: none;
   border-radius: 6px;
-  font-size: 14px;
   cursor: pointer;
   transition: background-color 0.2s;
+  font-size: 14px;
 }
 .add-btn:hover {
   background: #66b1ff;
 }
 
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+.stat-label {
+  color: #666;
+}
+.stat-value {
+  font-weight: 600;
+}
+.todo-count { color: #e6a23c; }
+.doing-count { color: #409eff; }
+.done-count { color: #67c23a; }
+.rate-count { color: #1989fa; }
+.stat-progress { margin-top: 10px; margin-bottom: 15px; }
+.progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  background: #eee;
+  display: flex;
+  overflow: hidden;
+}
+.progress-todo { background: #e6a23c; }
+.progress-doing { background: #409eff; }
+.progress-done { background: #67c23a; }
+
+.priority-stat-container {
+  margin-top: 15px;
+  border-top: 1px solid #e8f4ff;
+  padding-top: 10px;
+}
+.priority-stat-title {
+  font-size: 14px;
+  color: #409eff;
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+.priority-cards {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+.priority-card {
+  flex: 1;
+  border-radius: 6px;
+  padding: 8px 6px;
+  text-align: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  cursor: default;
+}
+.priority-card-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.priority-low-card {
+  background-color: #f0f9ff;
+  border: 1px solid #67c23a;
+}
+.priority-medium-card {
+  background-color: #f5faff;
+  border: 1px solid #409eff;
+}
+.priority-high-card {
+  background-color: #fff2f0;
+  border: 1px solid #ff4d4f;
+}
+.priority-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+.priority-name {
+  font-size: 12px;
+  color: #666;
+}
+.priority-count {
+  font-size: 14px;
+  font-weight: 600;
+}
+.priority-low-card .priority-count {
+  color: #67c23a;
+}
+.priority-medium-card .priority-count {
+  color: #409eff;
+}
+.priority-high-card .priority-count {
+  color: #ff4d4f;
+}
+
 .note-grid {
   flex: 1;
   width: 100%;
-  padding: 10px;
-  overflow-y: auto;
+  padding: 4px;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+  position: relative;
   align-content: flex-start;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  min-height: 0;
+  padding-right: 6px;
+}
+
+.note-grid::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+
+.note-grid::-webkit-scrollbar-track {
+  background: #f5f5f5;
+  border-radius: 3px;
+  margin: 10px 0;
+}
+
+.note-grid::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+.note-grid::-webkit-scrollbar-thumb:hover {
+  background: #b3b3b3;
 }
 
 .note-card {
@@ -367,123 +694,147 @@ html,body,#app {
   height: 100%;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  box-sizing: border-box;
   transition: all 0.3s ease;
   cursor: default;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 .note-card:hover {
-  transform: translateY(-3px);
+  transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0,0,0,0.1);
   border-color: #409eff;
 }
 
-.note-card-body {
-  flex: 1;
+.note-card-content {
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  margin-bottom: 8px;
 }
 
-.note-card-content-box {
-  flex: 1;
-  min-height: 3.6em;
-  max-height: 3.6em;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  padding: 6px 8px;
-  margin-bottom: 6px;
+.card-row {
+  width: 100%;
+  padding: 4px 6px;
   display: flex;
   align-items: center;
-  background: #fdfdfd;
+  font-size: 12px;
+  min-height: 24px;
 }
 
-.ellipsis-3rows {
+.card-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #f0f0f0;
+  margin: 2px 0;
+}
+
+.card-title-row {
+  justify-content: flex-start;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+.card-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-align: left;
+}
+
+.card-meta-row {
+  justify-content: space-between;
+}
+.card-priority {
+  color: #666;
+}
+.priority-low { color: #67c23a; }
+.priority-medium { color: #409eff; }
+.priority-high { color: #ff4d4f; }
+.card-type {
+  color: #666;
+}
+.type-work { color: #1890ff; }
+.type-life { color: #52c41a; }
+.type-study { color: #fa8c16; }
+.type-other { color: #722ed1; }
+
+.card-content-row {
+  flex: 1;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 2px;
+  background-color: #fafafa;
+  min-height: 72px;
+}
+.content-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 13px;
-  line-height: 1.4;
-  width: 100%;
-}
-
-.note-card-time-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 16px;
-  font-size: 11px;
-  color: #999;
-}
-.time-left,
-.time-right {
-  white-space: nowrap;
-}
-.time-split {
-  flex: 1;
-  height: 1px;
-  background: #eee;
-  margin: 0 6px;
-}
-
-.note-card-divider {
-  height: 1px;
-  width: 100%;
-  background: #f0f0f0;
-  margin: 0 0 8px 0;
-}
-
-.note-card-actions {
-  display: flex;
-  gap: 4px;
-  justify-content: flex-end;
-  height: 24px;
-  flex-shrink: 0;
-  padding-right: 2px;
-}
-
-.start-btn, .complete-btn, .back-btn, .delete-btn {
-  padding: 0 6px;
-  font-size: 11px;
-  border-radius: 3px;
-  width: auto;
-  min-width: 38px;
-  cursor: pointer;
-  border: none;
-  transition: background-color 0.2s;
+  line-height: 1.5;
+  margin: 0;
+  color: #333;
   height: 100%;
 }
 
-.start-btn { background: #409eff; color: #fff; }
-.start-btn:hover { background: #66b1ff; }
+.card-time-row {
+  justify-content: space-between;
+  color: #999;
+  font-size: 11px;
+}
+.create-time, .update-time {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 45%;
+}
 
-.complete-btn { background: #67c23a; color: #fff; }
-.complete-btn:hover { background: #85ce61; }
-
-.back-btn { background: #e6a23c; color: #fff; }
-.back-btn:hover { background: #ebb563; }
-
-.delete-btn { background: #ff4d4f; color: #fff; }
-.delete-btn:hover { background: #ff7875; }
+.card-actions-row {
+  justify-content: space-between;
+  align-items: center;
+}
+.deadline-time {
+  color: #666;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+}
+.action-buttons {
+  display: flex;
+  gap: 3px;
+}
+.start-btn, .complete-btn, .back-btn, .delete-btn {
+  padding: 0 4px;
+  font-size: 10px;
+  border-radius: 3px;
+  border: none;
+  height: 20px;
+  white-space: nowrap;
+  cursor: pointer;
+  min-width: 30px;
+  transition: background-color 0.2s;
+}
+.start-btn {background: #409eff; color: #fff;}
+.start-btn:hover {background: #66b1ff;}
+.complete-btn {background: #67c23a; color: #fff;}
+.complete-btn:hover {background: #85ce61;}
+.back-btn {background: #e6a23c; color: #fff;}
+.back-btn:hover {background: #ebb563;}
+.delete-btn {background: #ff4d4f; color: #fff;}
+.delete-btn:hover {background: #ff7875;}
 
 .empty-tip {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 14px;
   color: #999;
-  grid-column: 1 / -1;
-}
-
-.note-grid::-webkit-scrollbar {
-  width: 6px;
-  background: transparent;
-}
-.note-grid::-webkit-scrollbar-thumb {
-  background: #ddd;
-  border-radius: 3px;
+  grid-column: 1/-1;
+  font-size: 14px;
 }
 
 .tooltip-custom :deep(.ant-tooltip-inner) {
@@ -496,36 +847,21 @@ html,body,#app {
   line-height: 1.5;
 }
 
-.tooltip-custom :deep(.ant-tooltip-placement-bottom) {
-  margin-top: 8px;
+@media (max-width: 1200px) {
+  .note-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
-@media (max-width: 1400px) {
-  .note-grid { grid-template-columns: repeat(4, 1fr); }
-}
-@media (max-width: 1000px) {
-  .note-grid { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 992px) {
+  .note-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
+
 @media (max-width: 768px) {
-  .note-grid { grid-template-columns: repeat(2, 1fr); }
-  .tabs-sidebar { width: 100px; }
-}
-@media (max-width: 480px) {
-  .note-manager { flex-direction: column; }
-  .tabs-sidebar {
-    width: 100%;
-    height: auto;
-    flex-direction: row;
-    justify-content: space-around;
+  .note-grid {
+    grid-template-columns: 1fr;
   }
-  .tab-item.active::before {
-    width: 100%;
-    height: 3px;
-    top: auto;
-    bottom: 0;
-  }
-  .note-grid { grid-template-columns: 1fr; }
-  .note-input { height: 60px; }
-  .search-input { height: 36px; }
 }
 </style>
\ No newline at end of file