chore: update

pure-admin · Apr 30, 2024 · 43e46c5 · 43e46c5
1 parent cf748e6
commit 43e46c5
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 105 deletions.
diff --git a/locales/en.yaml b/locales/en.yaml
@@ -182,7 +182,12 @@ menus:
   pureChildMenuOverflow: Child Menu Overflow Show Tooltip Text
 status:
   pureLoad: Loading...
+  pureMessage: Message
+  pureNotify: Notify
+  pureTodo: Todo
   pureNoMessage: No Message
+  pureNoNotify: No Notify
+  pureNoTodo: No Todo
 login:
   pureUsername: Username
   purePassword: Password

diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
@@ -182,7 +182,12 @@ menus:
   pureChildMenuOverflow: 菜单超出显示 Tooltip 文字提示
 status:
   pureLoad: 加载中...
+  pureMessage: 消息
+  pureNotify: 通知
+  pureTodo: 待办
   pureNoMessage: 暂无消息
+  pureNoNotify: 暂无通知
+  pureNoTodo: 暂无待办
 login:
   pureUsername: 账号
   purePassword: 密码

diff --git a/src/layout/components/lay-notice/components/NoticeList.vue b/src/layout/components/lay-notice/components/NoticeList.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
 import { PropType } from "vue";
 import { ListItem } from "../data";
-import { useI18n } from "vue-i18n";
 import NoticeItem from "./NoticeItem.vue";
+import { transformI18n } from "@/plugins/i18n";
 
-const props = defineProps({
+defineProps({
   list: {
     type: Array as PropType<Array<ListItem>>,
     default: () => []
+  },
+  emptyText: {
+    type: String,
+    default: ""
   }
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
-  <div v-if="props.list.length">
-    <NoticeItem
-      v-for="(item, index) in props.list"
-      :key="index"
-      :noticeItem="item"
-    />
+  <div v-if="list.length">
+    <NoticeItem v-for="(item, index) in list" :key="index" :noticeItem="item" />
   </div>
-  <el-empty v-else :description="t('status.pureNoMessage')" />
+  <el-empty v-else :description="transformI18n(emptyText)" />
 </template>
diff --git a/src/layout/components/lay-notice/data.ts b/src/layout/components/lay-notice/data.ts
@@ -1,3 +1,5 @@
+import { $t } from "@/plugins/i18n";
+
 export interface ListItem {
   avatar: string;
   title: string;
@@ -12,135 +14,86 @@ export interface TabItem {
   key: string;
   name: string;
   list: ListItem[];
+  emptyText: string;
 }
 
 export const noticesData: TabItem[] = [
   {
     key: "1",
-    name: "通知",
-    list: [
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
-        title: "你收到了 12 份新周报",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
-        title: "你推荐的 前端高手 已通过第三轮面试",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
-        title: "这种模板可以区分多种通知类型",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
-        title:
-          "展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
-        title: "左侧图标用于区分不同的类型",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
-        title: "左侧图标用于区分不同的类型",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      }
-    ]
+    name: $t("status.pureNotify"),
+    list: [],
+    emptyText: $t("status.pureNoNotify")
   },
   {
     key: "2",
-    name: "消息",
+    name: $t("status.pureMessage"),
     list: [
       {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
-        title: "李白 评论了你",
-        description: "长风破浪会有时,直挂云帆济沧海",
-        datetime: "一年前",
+        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile1.svg",
+        title: "小铭 评论了你",
+        description: "诚在于心，信在于行，诚信在于心行合一。",
+        datetime: "今天",
         type: "2"
       },
       {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile2.svg",
         title: "李白 回复了你",
-        description: "行路难，行路难，多歧路，今安在。",
-        datetime: "一年前",
+        description: "长风破浪会有时，直挂云帆济沧海。",
+        datetime: "昨天",
         type: "2"
       },
       {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile5.svg",
         title: "标题",
         description:
           "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
-        datetime: "一年前",
+        datetime: "时间",
         type: "2"
       }
-    ]
+    ],
+    emptyText: $t("status.pureNoMessage")
   },
   {
     key: "3",
-    name: "待办",
+    name: $t("status.pureTodo"),
     list: [
-      {
-        avatar: "",
-        title: "任务名称",
-        description: "任务需要在 2022-11-16 20:00 前启动",
-        datetime: "",
-        extra: "未开始",
-        status: "info",
-        type: "3"
-      },
       {
         avatar: "",
         title: "第三方紧急代码变更",
         description:
-          "一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务",
+          "小林提交于 2024-05-10，需在 2024-05-11 前完成代码变更任务",
         datetime: "",
         extra: "马上到期",
         status: "danger",
         type: "3"
       },
       {
         avatar: "",
-        title: "信息安全考试",
-        description: "指派小仙于 2022-12-12 前完成更新并发布",
+        title: "版本发布",
+        description: "指派小铭于 2024-06-18 前完成更新并发布",
         datetime: "",
         extra: "已耗时 8 天",
         status: "warning",
         type: "3"
       },
       {
         avatar: "",
-        title: "vue-pure-admin 版本发布",
-        description: "vue-pure-admin 版本发布",
+        title: "新功能开发",
+        description: "开发多租户管理",
         datetime: "",
         extra: "进行中",
         type: "3"
+      },
+      {
+        avatar: "",
+        title: "任务名称",
+        description: "任务需要在 2030-10-30 10:00 前启动",
+        datetime: "",
+        extra: "未开始",
+        status: "info",
+        type: "3"
       }
-    ]
+    ],
+    emptyText: $t("status.pureNoTodo")
   }
 ];
diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue
@@ -1,22 +1,34 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { ref, computed } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./components/NoticeList.vue";
 import BellIcon from "@iconify-icons/ep/bell";
 
 const { t } = useI18n();
 const noticesNum = ref(0);
 const notices = ref(noticesData);
-const activeKey = ref(noticesData[0].key);
+const activeKey = ref(noticesData[0]?.key);
 
 notices.value.map(v => (noticesNum.value += v.list.length));
+
+const getLabel = computed(
+  () => item =>
+    t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
+);
 </script>
 
 <template>
   <el-dropdown trigger="click" placement="bottom-end">
-    <span class="dropdown-badge navbar-bg-hover select-none">
-      <el-badge :value="noticesNum" :max="99">
+    <span
+      :class="[
+        'dropdown-badge',
+        'navbar-bg-hover',
+        'select-none',
+        Number(noticesNum) !== 0 && 'mr-[10px]'
+      ]"
+    >
+      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
         <span class="header-notice-icon">
           <IconifyIconOffline :icon="BellIcon" />
         </span>
@@ -37,13 +49,10 @@ notices.value.map(v => (noticesNum.value += v.list.length));
           />
           <span v-else>
             <template v-for="item in notices" :key="item.key">
-              <el-tab-pane
-                :label="`${item.name}(${item.list.length})`"
-                :name="`${item.key}`"
-              >
+              <el-tab-pane :label="getLabel(item)" :name="`${item.key}`">
                 <el-scrollbar max-height="330px">
                   <div class="noticeList-container">
-                    <NoticeList :list="item.list" />
+                    <NoticeList :list="item.list" :emptyText="item.emptyText" />
                   </div>
                 </el-scrollbar>
               </el-tab-pane>
@@ -62,7 +71,6 @@ notices.value.map(v => (noticesNum.value += v.list.length));
   justify-content: center;
   width: 40px;
   height: 48px;
-  margin-right: 10px;
   cursor: pointer;
 
   .header-notice-icon {

diff --git a/src/views/account-settings/index.vue b/src/views/account-settings/index.vue
@@ -8,8 +8,8 @@ import Preferences from "./components/Preferences.vue";
 import SecurityLog from "./components/SecurityLog.vue";
 import { useGlobal, deviceDetection } from "@pureadmin/utils";
 import AccountManagement from "./components/AccountManagement.vue";
-import TopCollapse from "@/layout/components/sidebar/topCollapse.vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
 
 import leftLine from "@iconify-icons/ri/arrow-left-s-line";
 import ProfileIcon from "@iconify-icons/ri/user-3-line";
@@ -115,7 +115,7 @@ getMine().then(res => {
       </el-menu>
     </el-aside>
     <el-main>
-      <TopCollapse
+      <LaySidebarTopCollapse
         v-if="deviceDetection()"
         class="px-0"
         :is-active="isOpen"