From 14127580fe78ea868f813b26dd36716bf4421235 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Sun, 22 Feb 2026 15:49:44 +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

---
 .../desktop/workbench/components/NoteTodo.vue | 193 ++++++++++--------
 1 file changed, 108 insertions(+), 85 deletions(-)

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 90d5b01e..70bc2971 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
@@ -69,27 +69,28 @@
             <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-stat-container">
+        <h5 class="priority-stat-title">级别统计</h5>
+        <div class="title-divider"></div>
+        <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 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-medium-card">
+            <div class="priority-card-inner">
+              <span class="priority-name">中优先级</span>
+              <span class="priority-count">{{ mediumPriorityDoneCount }}/{{ mediumPriorityTotalCount }}</span>
             </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 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>
@@ -169,7 +170,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import {
   Tooltip as ATooltip,
   Input as AInput,
@@ -178,7 +179,6 @@ import {
   Select as ASelect,
   SelectOption as ASelectOption,
   DatePicker as ADatePicker,
-  Radio as ARadio,
   RadioGroup as ARadioGroup,
   RadioButton as ARadioButton,
   message, Modal
@@ -395,34 +395,79 @@ fetchDataList({})
   gap: 4px;
   background: #fafafa;
 }
+
 .left-panel {
   width: 30%;
   background: #fff;
   border: 1px solid #cce5ff;
   border-radius: 4px;
-  padding: 10px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
-  gap: 15px;
   height: 100%;
+  gap: 8px;
+  overflow: hidden;
 }
+
 .create-note {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   border: 1px solid #e8f4ff;
   border-radius: 8px;
-  padding: 12px;
+  padding: 4px;
   background: #f0f8ff;
+  overflow: auto;
 }
+
 .statistics-box {
-  flex: 1;
+  flex: 0 0 35%;
   border: 1px solid #e8f4ff;
   border-radius: 8px;
-  padding: 12px;
+  padding: 4px;
   background: #f0f8ff;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 }
+
+.priority-stat-container {
+  flex: 0 0 20%;
+  border: 1px solid #e8f4ff;
+  border-radius: 8px;
+  padding: 4px;
+  background: #f0f8ff;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.create-note::-webkit-scrollbar,
+.statistics-box::-webkit-scrollbar,
+.priority-stat-container::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+.create-note::-webkit-scrollbar-track,
+.statistics-box::-webkit-scrollbar-track,
+.priority-stat-container::-webkit-scrollbar-track {
+  background: #f5f5f5;
+  border-radius: 3px;
+}
+.create-note::-webkit-scrollbar-thumb,
+.statistics-box::-webkit-scrollbar-thumb,
+.priority-stat-container::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+}
+.create-note::-webkit-scrollbar-thumb:hover,
+.statistics-box::-webkit-scrollbar-thumb:hover,
+.priority-stat-container::-webkit-scrollbar-thumb:hover {
+  background: #b3b3b3;
+}
+
 .right-panel {
   width: 70%;
   background: #fff;
@@ -432,6 +477,7 @@ fetchDataList({})
   flex-direction: column;
   height: 100%;
 }
+
 .search-note {
   padding: 10px;
   border-bottom: 1px solid #f0f0f0;
@@ -494,17 +540,14 @@ fetchDataList({})
   color: #409eff !important;
 }
 
-.create-title {
-  font-size: 15px;
-  color: #409eff;
-  margin: 0 0 5px 0;
-  font-weight: 600;
-}
-.stat-title {
+.create-title,
+.stat-title,
+.priority-stat-title {
   font-size: 15px;
   color: #409eff;
   margin: 0 0 5px 0;
   font-weight: 600;
+  flex-shrink: 0;
 }
 
 .title-divider {
@@ -513,6 +556,7 @@ fetchDataList({})
   background: linear-gradient(90deg, #409eff, #87ceeb, transparent);
   border-radius: 1px;
   margin-bottom: 10px;
+  flex-shrink: 0;
 }
 
 .note-title-input {
@@ -522,6 +566,7 @@ fetchDataList({})
   padding: 0 10px;
   font-size: 13px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  flex-shrink: 0;
 }
 .note-input {
   height: 70px;
@@ -532,10 +577,12 @@ fetchDataList({})
   font-size: 13px;
   line-height: 1.5;
   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  flex-shrink: 0;
 }
 .selector-row {
   display: flex;
   gap: 8px;
+  flex-shrink: 0;
 }
 .tag-select, .date-picker {
   flex: 1;
@@ -549,6 +596,7 @@ fetchDataList({})
   cursor: pointer;
   transition: background-color 0.2s;
   font-size: 14px;
+  flex-shrink: 0;
 }
 .add-btn:hover {
   background: #66b1ff;
@@ -571,7 +619,11 @@ fetchDataList({})
 .doing-count { color: #409eff; }
 .done-count { color: #67c23a; }
 .rate-count { color: #1989fa; }
-.stat-progress { margin-top: 10px; margin-bottom: 15px; }
+.stat-progress {
+  margin-top: 10px;
+  margin-bottom: 0;
+  flex-shrink: 0;
+}
 .progress-bar {
   height: 8px;
   border-radius: 4px;
@@ -583,24 +635,15 @@ fetchDataList({})
 .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%;
+  flex-wrap: wrap;
 }
 .priority-card {
   flex: 1;
+  min-width: 80px;
   border-radius: 6px;
   padding: 8px 6px;
   text-align: center;
@@ -669,19 +712,14 @@ fetchDataList({})
   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;
 }
@@ -720,16 +758,13 @@ fetchDataList({})
   font-size: 12px;
   min-height: 24px;
 }
-
 .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;
@@ -739,26 +774,12 @@ fetchDataList({})
   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-priority { color: #67c23a; }
+.card-type { color: #1890ff; }
 .card-content-row {
   flex: 1;
   border: 1px solid #eee;
@@ -774,11 +795,8 @@ fetchDataList({})
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.5;
-  margin: 0;
   color: #333;
-  height: 100%;
 }
-
 .card-time-row {
   justify-content: space-between;
   color: #999;
@@ -790,7 +808,6 @@ fetchDataList({})
   text-overflow: ellipsis;
   max-width: 45%;
 }
-
 .card-actions-row {
   justify-content: space-between;
   align-items: center;
@@ -798,10 +815,6 @@ fetchDataList({})
 .deadline-time {
   color: #666;
   font-size: 11px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 50%;
 }
 .action-buttons {
   display: flex;
@@ -816,16 +829,11 @@ fetchDataList({})
   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;
@@ -852,14 +860,29 @@ fetchDataList({})
     grid-template-columns: repeat(3, 1fr);
   }
 }
-
 @media (max-width: 992px) {
   .note-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+  .left-panel { width: 35%; }
+  .right-panel { width: 65%; }
 }
-
 @media (max-width: 768px) {
+  .note-manager {
+    flex-direction: column;
+    height: auto;
+  }
+  .left-panel, .right-panel {
+    width: 100%;
+    height: auto;
+  }
+  .create-note,
+  .statistics-box,
+  .priority-stat-container {
+    flex: none;
+    height: auto;
+    margin-bottom: 10px;
+  }
   .note-grid {
     grid-template-columns: 1fr;
   }