消息中心

src/layout/components/notice/index.vue

@@ -8,13 +8,17 @@
       <template v-if="newsList.length > 0">
         <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
           <div class="item-conten">
-            <div>{{ v.message }}</div>
-            <div class="content-box-msg"></div>
-            <div class="content-box-time">{{ v.time }}</div>
+            <div class="content-box-title">
+              <div class="content-box-type-and-notification">
+                <span class="content-box-type">{{ v.type }}</span>
+                <span class="content-box-title-right">更新提醒</span>
+              </div>
+              <!-- 已读/未读 -->
+              <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
+              <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
+            </div>
+            <div class="content-box-msg">{{ v.message }}</div>
           </div>
-          <!-- 已读/未读 -->
-          <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
-          <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
         </div>
       </template>
       <el-empty v-else :description="'消息为空'"></el-empty>
@@ -23,9 +27,17 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
-import { storeToRefs } from 'pinia';
+import { storeToRefs, setActivePinia } from 'pinia';
+import { createPinia, defineStore } from 'pinia';
 import useNoticeStore from '@/store/modules/notice';
 
+const pinia = createPinia();
+setActivePinia(pinia);
+const mockNotices = [
+  { id: 1, type: '系统消息', message: '系统将于12月11日02时进行更新维护，给大家带来不便，敬请谅解！', read: false },
+  { id: 2, type: '系统消息', message: '系统将于12月10日02时进行更新维护，给大家带来不便，敬请谅解！', read: false },
+];
+
 const noticeStore = storeToRefs(useNoticeStore());
 const { readAll } = useNoticeStore();
 
@@ -33,17 +45,17 @@ const { readAll } = useNoticeStore();
 const state = reactive({
   loading: false
 });
-const newsList = ref([]) as any;
+const newsList = ref(mockNotices) as any;
 
 /**
  * 初始化数据
  * @returns
  */
-const getTableData = async () => {
-  state.loading = true;
-  newsList.value = noticeStore.state.value.notices;
-  state.loading = false;
-};
+// const getTableData = async () => {
+//   state.loading = true;
+//   newsList.value = noticeStore.state.value.notices;
+//   state.loading = false;
+// };
 
 //点击消息，写入已读
 const onNewsClick = (item: any) => {
@@ -54,7 +66,7 @@ const onNewsClick = (item: any) => {
 
 onMounted(() => {
   nextTick(() => {
-    getTableData();
+    // getTableData();
   });
 });
 </script>
@@ -102,6 +114,34 @@ onMounted(() => {
         display: flex;
         flex-direction: column;
       }
+      .content-box-title {
+        display: flex;
+        //width: 200px;
+        //margin: 10px auto;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .content-box-type-and-notification {
+        display: flex;
+        align-items: center;
+      }
+      .notification-text {
+        font-size: 10px; /* 根据需要调整字体大小 */
+        color: #606266; /* 根据需要调整字体颜色 */
+      }
+      .content-box-type {
+        font-size: 10px;
+        //font-weight: bold;
+        color: white;
+        padding: 5px;
+        background-color: #e6a23c;
+        border-radius: 5px;
+        margin-right: 8px;
+      }
+      .el-tag--mini {
+        padding: 3px 6px;
+        font-size: 10px;
+      }
     }
   }
   .foot-box {

src/types/components.d.ts

@@ -28,17 +28,10 @@ declare module 'vue' {
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -48,31 +41,19 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
-    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -81,10 +62,7 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
@@ -97,9 +75,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']