前端首页的待办卡片中新增基于localStorage的待办添加与删除功能，并优化页面顶部的消息卡片

smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-avatar.vue

@@ -37,7 +37,6 @@
   import { computed, ref, onMounted } from 'vue';
   import { loginApi } from '/src/api/system/login-api';
   import { useUserStore } from '/@/store/modules/system/user';
-  import { localClear } from '/@/utils/local-util';
   import { smartSentry } from '/@/lib/smart-sentry';
   import HeaderResetPassword from './header-reset-password-modal/index.vue';
   import { useRouter } from 'vue-router';
@@ -53,7 +52,6 @@
     } catch (e) {
       smartSentry.captureError(e);
     } finally {
-      localClear();
       useUserStore().logout();
       location.reload();
     }

smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-message.vue

@@ -10,19 +10,21 @@
 
 <template>
   <a-dropdown trigger="click" v-model:open="show">
-    <a-button type="text" @click="queryMessage" style="padding: 4px 5px">
-      <a-badge :count="unreadMessageCount">
-        <div style="width: 26px; height: 26px">
-          <BellOutlined :style="{ fontSize: '16px' }" />
-        </div>
-      </a-badge>
-    </a-button>
+    <a-badge :count="unreadMessageCount + toBeDoneCount">
+      <div style="width: 26px; height: 26px">
+        <BellOutlined :style="{ fontSize: '16px' }" />
+      </div>
+    </a-badge>
 
     <template #overlay>
       <a-card class="message-container" :bodyStyle="{ padding: 0 }">
         <a-spin :spinning="loading">
           <a-tabs class="dropdown-tabs" centered :tabBarStyle="{ textAlign: 'center' }" style="width: 300px">
-            <a-tab-pane tab="未读消息" key="message">
+            <a-tab-pane key="message">
+              <template #tab>
+                未读消息
+                <a-badge :count="unreadMessageCount" showZero :offset="[0, -20]" />
+              </template>
               <a-list class="tab-pane" size="small">
                 <a-list-item v-for="item in messageList" :key="item.messageId">
                   <a-list-item-meta>
@@ -36,16 +38,34 @@
                     </template>
                   </a-list-item-meta>
                 </a-list-item>
+                <a-list-item v-if="unreadMessageCount !== 0">
+                  <a-button type="text" @click="gotoMessage" style="padding: 4px 5px"> ... 查看更多 </a-button>
+                </a-list-item>
               </a-list>
             </a-tab-pane>
-            <a-tab-pane tab="待办工作" key="todo">
-              <a-list class="tab-pane" />
+            <a-tab-pane key="TO_BE_DONE">
+              <template #tab>
+                待办工作
+                <a-badge :count="toBeDoneCount" showZero :offset="[0, -20]" />
+              </template>
+              <a-list class="tab-pane" size="small" :locale="{ emptyText: '暂无待办' }">
+                <a-list-item v-for="(item, index) in toBeDoneList" :key="index">
+                  <a-list-item-meta>
+                    <template #title>
+                      <a-badge status="error" />
+                      <a-tag v-if="item.starFlag" color="red">重要</a-tag>
+                      <span>{{ item.title }}</span>
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </a-list>
             </a-tab-pane>
           </a-tabs>
         </a-spin>
       </a-card>
     </template>
   </a-dropdown>
+  <MessageDetail ref="messageDetailRef" @refresh="queryMessage" />
 </template>
 
 <script setup>
@@ -57,6 +77,9 @@
   import dayjs from 'dayjs';
   import { theme } from 'ant-design-vue';
   import { useRouter } from 'vue-router';
+  import MessageDetail from '/@/views/system/account/components/message/components/message-detail.vue';
+  import localKey from '/@/constants/local-storage-key-const';
+  import { localRead } from '/@/utils/local-util';
 
   const { useToken } = theme;
   const { token } = useToken();
@@ -64,6 +87,8 @@
   defineExpose({ showMessage });
 
   function showMessage() {
+    queryMessage();
+    loadToBeDoneList();
     show.value = true;
   }
 
@@ -90,6 +115,8 @@
         readFlag: false,
       });
       messageList.value = responseModel.data.list;
+      // 若中途有新消息了 打开列表也能及时更新未读数量
+      useUserStore().queryUnreadMessageCount();
     } catch (e) {
       smartSentry.captureError(e);
     } finally {
@@ -103,6 +130,30 @@
     router.push({ path: '/account', query: { menuId: 'message' } });
   }
 
+  // ------------------------- 待办工作  -------------------------
+
+  // 待办工作数
+  const toBeDoneCount = computed(() => {
+    return useUserStore().toBeDoneCount;
+  });
+
+  // 待办工作列表
+  const toBeDoneList = ref([]);
+
+  const loadToBeDoneList = async () => {
+    try {
+      loading.value = true;
+      let localToBeDoneList = localRead(localKey.TO_BE_DONE);
+      if (localToBeDoneList) {
+        toBeDoneList.value = JSON.parse(localToBeDoneList).filter((e) => !e.doneFlag);
+      }
+    } catch (err) {
+      smartSentry.captureError(err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
   // ------------------------- 时间计算  -------------------------
   function timeago(dateStr) {
     let dateTimeStamp = dayjs(dateStr).toDate().getTime();
@@ -189,4 +240,9 @@
     background-color: @base-bg-color;
     border-radius: 4px;
   }
+
+  .tab-pane {
+    height: 250px;
+    overflow-y: auto;
+  }
 </style>

smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/index.vue

@@ -18,7 +18,9 @@
         size="small"
       />
       <!---消息通知--->
-      <HeaderMessage ref="headerMessage" />
+      <a-button type="text" @click="showMessage" style="padding: 4px 5px">
+        <HeaderMessage ref="headerMessage" />
+      </a-button>
       <!---国际化--->
       <!-- <a-button type="text" @click="showSetting" class="operate-icon">
         <template #icon><switcher-outlined /></template>