pref: 待办事项样式优化

blossom-backend/backend/src/main/java/com/blossom/backend/server/todo/TodoService.java

@@ -43,8 +43,11 @@ public class TodoService extends ServiceImpl<TodoMapper, TodoEntity> {
         TodoGroupRes res = TodoGroupRes.build();
 
         Map<String, List<TodoEntity>> map = todos.stream().collect(Collectors.groupingBy(TodoEntity::getTodoId));
+
+        // 遍历每个待办事项的所有任务
         map.forEach((todoId, data) -> {
             TodoGroupRes.TodoGroup group = data.get(0).to(TodoGroupRes.TodoGroup.class);
+            // 根据状态分组
             Map<String, List<TodoEntity>> taskStatusMap = data.stream().collect(Collectors.groupingBy(TodoEntity::getTaskStatus));
             int w = 0, p = 0, c = 0;
             if (CollUtil.isNotEmpty(taskStatusMap.get(TaskStatusEnum.WAITING.name()))) {
@@ -56,7 +59,8 @@ public class TodoService extends ServiceImpl<TodoMapper, TodoEntity> {
             if (CollUtil.isNotEmpty(taskStatusMap.get(TaskStatusEnum.COMPLETED.name()))) {
                 c = taskStatusMap.get(TaskStatusEnum.COMPLETED.name()).get(0).getTaskCount();
             }
-            group.setTaskCountStat(String.format("%d|%d|%d", w, p, c));
+            group.setTaskCountStat(String.format("%d/%d/%d", w, p, c));
+            group.setTaskCount(w + p + c);
 
             if (TodoTypeEnum.DAY.getType().equals(data.get(0).getTodoType())) {
                 res.getTodoDays().put(group.getTodoId(), group);

blossom-editor/src/renderer/src/views/todo/TaskProgress.vue

@@ -654,10 +654,7 @@ const dragStart = (doms: any, e: DragEvent) => {
     e.preventDefault()
     return
   }
-  console.log('drag start')
-
   e.dataTransfer!.setDragImage(img, 0, 0)
-
   let ele = e!.target as Element
   let cloneNode = ele.cloneNode(true) as HTMLElement
   const targetRect = ele.getBoundingClientRect()
@@ -673,7 +670,6 @@ const dragStart = (doms: any, e: DragEvent) => {
 
   // 拖拽事件
   const onDrag = (e: any) => {
-    console.log('onDrag')
     if (cloneNode) {
       cloneNode.style.transform = `translate(${e.clientX - distLeft - targetRect.left}px, ${e.clientY - distTop - targetRect.top}px)`
     }

blossom-editor/src/renderer/src/views/todo/TodoIndex.vue

@@ -2,7 +2,7 @@
   <div class="todo-root">
     <div class="todo-aside">
       <div class="setting doc-workbench-root">
-        <div class="iconbl bl-a-cloudrefresh-line" @click="getTodos()"></div>
+        <div class="iconbl bl-refresh-line" @click="getTodos()"></div>
       </div>
       <div class="task-collapse">
         <el-collapse v-model="activeName" accordion>
@@ -29,10 +29,8 @@
             </el-calendar>
           </el-collapse-item>
 
-          <!--  -->
           <el-collapse-item title="阶段性事项" name="2">
             <div v-for="phased in todoPhased" class="task-phased" @click="toTask(phased.todoId, phased.todoName, phased.todoType)">
-              <!-- update name -->
               <el-input
                 v-if="phased.updTodoName"
                 v-model="phased.todoName"
@@ -40,26 +38,26 @@
                 :id="'phased-name-input-' + phased.todoId"
                 :rows="3"
                 @blur="blurPhasedUpdHandle(phased.todoId!)"></el-input>
-              <div v-else @dblclick="showPhasedUpdHandle(phased.todoId!)">{{ phased.todoName }}</div>
+
-              <bl-tag>{{ phased.taskCountStat }}</bl-tag>
+              <div v-else class="phase-name" @dblclick="showPhasedUpdHandle(phased.todoId!)">
+                {{ phased.todoName }}
+              </div>
+              <div class="phased-stat">{{ phased.taskCountStat }}</div>
             </div>
 
-            <!-- add phased -->
             <el-input
               v-if="showPhasedAdd"
               ref="phasedAddInputRef"
               v-model="phasedAddName"
               @keyup.enter="blurPhasedAddHandle"
-              @blur="blurPhasedAddHandle"
+              @blur="blurPhasedAddHandle"></el-input>
-              style="margin-top: 10px"></el-input>
             <div v-else class="task-phased-add" @click="showPhasedAddHandle">新增计划</div>
           </el-collapse-item>
 
-          <!--  -->
           <el-collapse-item title="阶段性事项 已完成" name="3">
             <div v-for="phased in todoPhasedClose" class="task-phased" @click="toTask(phased.todoId, phased.todoName, phased.todoType)">
-              {{ phased.todoName }}
+              <div class="phased-stat">{{ phased.taskCountStat }}</div>
-              <bl-tag>{{ phased.taskCountStat }}</bl-tag>
+              <div class="phase-name">{{ phased.todoName }}</div>
             </div>
           </el-collapse-item>
         </el-collapse>
@@ -114,6 +112,7 @@ const selectDate = (val: CalendarDateType) => {
 const TaskProgressRef = ref()
 const TodoStatRef = ref()
 const activeName = ref('1')
+// key:日期; value:当日的待办统计
 const todoDayMaps = ref<Map<string, TodoList>>(new Map())
 const getTodos = () => {
   todosApi().then((resp) => {
@@ -269,8 +268,9 @@ const blurPhasedUpdHandle = (todoId: string) => {
             inset -1px 3px 5px #dfdfdf,
             inset -1px -3px 5px #dfdfdf;
           height: calc(100% - #{$item-height});
-          overflow-y: auto;
+          padding: 0 5px 0 15px;
-          padding: 0 10px 0 20px;
+          overflow-x: hidden;
+          overflow-y: scroll;
 
           [class='dark'] & {
             box-shadow:
@@ -333,33 +333,54 @@ const blurPhasedUpdHandle = (todoId: string) => {
       }
     }
 
-    .task-day,
     .task-phased {
-      @include flex(row, flex-start, center);
+      @include box(220px, auto);
+      @include flex(row, flex-start, flex-start);
       @include font(13px, 300);
+      border: 1px solid var(--el-border-color);
+      min-height: 40px;
       flex-wrap: wrap;
-      padding: 1px 3px;
+      padding: 3px 5px;
-      border-radius: 4px;
+      margin-bottom: 10px;
       color: var(--bl-text-color);
+      border-radius: 3px;
+      position: relative;
+      overflow: hidden;
+      transition:
+        box-shadow 0.3s,
+        border-color 0.3s;
       cursor: pointer;
 
       &:hover {
-        background-color: var(--el-color-info-light-9);
+        @include themeShadow(0 0 9px #c0c0c0, 0 0 10px #000000);
+        border-color: var(--el-color-primary);
+
+        .phased-stat {
+          background-color: var(--el-color-primary-light-8);
+        }
       }
 
       &:first-child {
-        margin-top: 5px;
+        margin-top: 15px;
+      }
+
+      .phase-name {
+        line-height: 14px;
         word-break: break-all;
       }
 
-      &:last-child {
+      .phased-stat {
-        margin-bottom: 5px;
+        font-size: 11px;
+        line-height: 15px;
+        padding: 2px 10px 0 10px;
+        color: var(--bl-text-color-light);
+        background-color: var(--bl-bg-color);
+        border-top-left-radius: 3px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        transition: background-color 0.1s;
       }
-    }
-
-    .task-phased {
-      padding: 5px 3px;
-      @include flex(row, flex-start, flex-start);
 
       .task-count {
         padding: 0 5px;
@@ -368,11 +389,12 @@ const blurPhasedUpdHandle = (todoId: string) => {
     }
 
     .task-phased-add {
-      @include themeBorder(1px, #b4b4b4, #515151, 'around', 6px, dashed);
+      @include themeBorder(1px, #b4b4b4, #515151, 'around', 3px, dashed);
+      width: 220px;
       padding: 1px 5px;
       margin: 10px 0;
       color: var(--bl-text-color-light);
-      transition: 0.3s;
+      transition: box-shadow 0.3s;
       text-align: center;
       cursor: pointer;