aa

src/views/index.vue

@@ -370,35 +370,84 @@
               </article>
 
               <div class="quick-todo-bar">
-                <div
-                  @click="router.push('/todo-list?type=oa')"
-                  class="flex flex-col items-start justify-center gap-2 cursor-pointer"
+                <el-dropdown
+                  trigger="click"
+                  popper-class="quick-access-dropdown"
+                  @command="handleQuickAccessCommand"
                 >
-                  <div class="number">{{ todo }}</div>
-                  <div class="flex gap-2 items-center">
-                    <div class="!text-[10px] text-white/60">我的待办</div>
-                    <Icon
-                      icon="mdi:clipboard-text-outline"
-                      color="#7f2c33"
-                      class="icon"
-                    />
-                  </div>
-                </div>
-
-                <div
-                  class="flex flex-col items-center justify-center gap-2 cursor-pointer"
-                  @click="router.push('/oa-done-list?type=oa')"
+                  <button type="button" class="quick-todo-btn">
+                    <div class="number">{{ todo }}</div>
+                    <div class="flex gap-2 items-center">
+                      <div class="!text-[10px] text-white/60">我的待办</div>
+                      <Icon
+                        icon="mdi:clipboard-text-outline"
+                        color="#7f2c33"
+                        class="icon"
+                      />
+                    </div>
+                  </button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="todo-oa">
+                        <div
+                          class="p-2 flex items-center gap-3 text-[#f56c6c]!"
+                        >
+                          <span>OA</span>
+                          <span>{{ oatodo }}</span>
+                        </div>
+                      </el-dropdown-item>
+                      <el-dropdown-item command="todo-crm">
+                        <div
+                          class="p-2 flex items-center gap-3 text-[#f56c6c]!"
+                        >
+                          <span>CRM</span>
+                          <span>{{ crmtodo }}</span>
+                        </div>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+
+                <el-dropdown
+                  trigger="click"
+                  popper-class="quick-access-dropdown"
+                  @command="handleQuickAccessCommand"
                 >
-                  <div class="number text-white!">{{ done }}</div>
-                  <div class="flex gap-2 items-center pl-2">
-                    <div class="!text-[10px] text-white/60">已完成</div>
-                    <Icon
-                      icon="mdi:check-circle-outline"
-                      color="#2d8767"
-                      class="icon"
-                    />
-                  </div>
-                </div>
+                  <button
+                    type="button"
+                    class="quick-todo-btn quick-todo-btn--center"
+                  >
+                    <div class="number text-white!">{{ done }}</div>
+                    <div class="flex gap-2 items-center pl-2">
+                      <div class="!text-[10px] text-white/60">已完成</div>
+                      <Icon
+                        icon="mdi:check-circle-outline"
+                        color="#2d8767"
+                        class="icon"
+                      />
+                    </div>
+                  </button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="done-oa">
+                        <div
+                          class="p-2 flex items-center gap-3 text-[#2d8767]!"
+                        >
+                          <span>OA</span>
+                          <span>{{ oadone }}</span>
+                        </div>
+                      </el-dropdown-item>
+                      <el-dropdown-item command="done-crm">
+                        <div
+                          class="p-2 flex items-center gap-3 text-[#2d8767]!"
+                        >
+                          <span>CRM</span>
+                          <span>{{ crmdone }}</span>
+                        </div>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>
             </div>
           </section>
@@ -1947,6 +1996,29 @@ onUnmounted(() => {
   /* margin-bottom: 16px; */
 }
 
+.quick-todo-btn {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.quick-todo-btn--center {
+  align-items: center;
+}
+
+.quick-todo-btn:hover {
+  transform: translateY(-1px);
+}
+
 .todo-item {
   display: flex;
   align-items: center;