perf: message

yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue

@@ -1,13 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
+
+const activeName = ref('notice')
+
+const noticeList = ref([
+  { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
+  { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
+  { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
+  { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
+  { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
+])
+const messageList = ref([
+  { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
+  { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
+  { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
+  { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
+  { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
+])
+const needList = ref([
+  { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
+  { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
+  { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
+  { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
+  { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
+])
+</script>
 <template>
   <div class="message">
-    <el-popover placement="bottom" :width="310" trigger="click">
+    <ElPopover placement="bottom" :width="310" trigger="click">
       <template #reference>
-        <el-badge :value="noticeList.length" class="item">
+        <ElBadge :value="noticeList.length" class="item">
           <Icon icon="ep:bell" :size="18" class="cursor-pointer" />
-        </el-badge>
+        </ElBadge>
       </template>
-      <el-tabs v-model="activeName">
+      <ElTabs v-model="activeName">
-        <el-tab-pane label="通知(5)" name="first">
+        <ElTabPane label="通知(5)" name="notice">
           <div class="message-list">
             <template v-for="item in noticeList" :key="item.id">
               <div class="message-item">
@@ -19,8 +47,8 @@
               </div>
             </template>
           </div>
-        </el-tab-pane>
+        </ElTabPane>
-        <el-tab-pane label="消息(0)" name="second">
+        <ElTabPane label="消息(0)" name="message">
           <div class="message-list">
             <template v-for="item in messageList" :key="item.id">
               <div class="message-item">
@@ -32,8 +60,8 @@
               </div>
             </template>
           </div>
-        </el-tab-pane>
+        </ElTabPane>
-        <el-tab-pane label="代办(0)" name="third">
+        <ElTabPane label="代办(0)" name="need">
           <div class="message-list">
             <template v-for="item in needList" :key="item.id">
               <div class="message-item">
@@ -45,41 +73,11 @@
               </div>
             </template>
           </div>
-        </el-tab-pane>
+        </ElTabPane>
-      </el-tabs>
+      </ElTabs>
-    </el-popover>
+    </ElPopover>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
-
-const activeName = ref('first')
-
-const noticeList = ref([
-  { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
-  { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
-  { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
-  { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
-  { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
-])
-const messageList = ref([
-  { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
-  { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
-  { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
-  { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
-  { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
-])
-const needList = ref([
-  { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
-  { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
-  { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
-  { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
-  { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
-])
-</script>
-
 <style scoped lang="scss">
 .message-empty {
   display: flex;