feat(projects): 系统消息组件代码优化

soybeanjs · Jun 17, 2022 · 9518372 · 9518372
1 parent afa0134
commit 9518372
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/src/layouts/common/GlobalHeader/components/MessageList.vue b/src/layouts/common/GlobalHeader/components/MessageList.vue
@@ -2,10 +2,10 @@
   <n-scrollbar class="max-h-360px">
     <n-list>
       <n-list-item
-        v-for="item in list"
+        v-for="(item, index) in list"
         :key="item.id"
         class="cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-dark"
-        @click="handleRead(item)"
+        @click="handleRead(index)"
       >
         <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">
           <template #avatar>
@@ -44,14 +44,19 @@ interface Props {
   descRows?: number;
 }
 
+interface Emits {
+  (e: 'read', val: number): void;
+}
+
 withDefaults(defineProps<Props>(), {
   list: () => [],
   titleRows: 1,
   descRows: 2
 });
 
-function handleRead(item: Message.List) {
-  // eslint-disable-next-line no-param-reassign
-  item.isRead = true;
+const emit = defineEmits<Emits>();
+
+function handleRead(index: number) {
+  emit('read', index);
 }
 </script>
diff --git a/src/layouts/common/GlobalHeader/components/SystemMessage.vue b/src/layouts/common/GlobalHeader/components/SystemMessage.vue
@@ -31,18 +31,14 @@
           :empty="item.list.length === 0"
           placeholder-class="bg-$n-color transition-background-color duration-300 ease-in-out"
         >
-          <message-list :list="item.list" />
+          <message-list :list="item.list" @read="handleRead" />
         </loading-empty-wrapper>
       </n-tab-pane>
     </n-tabs>
-    <div v-if="tabData[currentTab].list.length > 0" class="flex cursor-pointer border-t border-$n-divider-color">
-      <div class="py-10px text-center flex-1" @click="handleClear(currentTab)">清空</div>
-      <div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleAllRead(currentTab)">
-        全部已读
-      </div>
-      <div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleLoadMore(currentTab)">
-        查看更多
-      </div>
+    <div v-if="showAction" class="flex cursor-pointer border-t border-$n-divider-color">
+      <div class="py-10px text-center flex-1" @click="handleClear">清空</div>
+      <div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleAllRead">全部已读</div>
+      <div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleLoadMore">查看更多</div>
     </div>
   </n-popover>
 </template>
@@ -53,9 +49,9 @@ import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import MessageList from './MessageList.vue';
 
-const currentTab = ref(0);
 const theme = useThemeStore();
 const { bool: loading, setBool: setLoading } = useBoolean();
+const currentTab = ref(0);
 const tabData = ref<Message.Tab[]>([
   {
     key: 1,
@@ -185,19 +181,25 @@ const count = computed(() => {
   }, 0);
 });
 
-function handleClear(index: number) {
-  tabData.value[index].list = [];
+const showAction = computed(() => tabData.value[currentTab.value].list.length > 0);
+
+function handleRead(index: number) {
+  tabData.value[currentTab.value].list[index].isRead = true;
+}
+
+function handleAllRead() {
+  tabData.value[currentTab.value].list.map(item => Object.assign(item, { isRead: true }));
 }
 
-function handleAllRead(index: number) {
-  tabData.value[index].list.map(item => Object.assign(item, { isRead: true }));
+function handleClear() {
+  tabData.value[currentTab.value].list = [];
 }
 
-function handleLoadMore(index: number) {
-  const { list } = tabData.value[index];
+function handleLoadMore() {
+  const { list } = tabData.value[currentTab.value];
   setLoading(true);
   setTimeout(() => {
-    list.push(...tabData.value[index].list);
+    list.push(...tabData.value[currentTab.value].list);
     setLoading(false);
   }, 1000);
 }