From fab790bbe64a404d3d9e2b75ed8e8b3bc749d20c Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Fri, 3 Mar 2023 18:17:06 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E5=8F=B3=E4=B8=8A=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AIcon/index.tsx                |   4 +
 src/components/Layout/components/Notice.vue   |  62 +++++++--
 .../Layout/components/NoticeInfo.vue          | 119 ++++++++++++------
 src/components/Layout/components/UserInfo.vue |  12 +-
 src/store/userInfo.ts                         |   5 +
 .../account/NotificationRecord/index.vue      |  22 ++--
 yarn.lock                                     |  43 ++++++-
 7 files changed, 199 insertions(+), 68 deletions(-)

diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 6f2e9734..dd5e389f 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -70,6 +70,10 @@ const iconKeys = [
     'CaretDownOutlined',
     'MinusOutlined',
     'AudioOutlined',
+    'BellOutlined',
+    'UserOutlined',
+    'LogoutOutlined',
+    'ReadIconOutlined'
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/components/Layout/components/Notice.vue b/src/components/Layout/components/Notice.vue
index c65d275f..509c502a 100644
--- a/src/components/Layout/components/Notice.vue
+++ b/src/components/Layout/components/Notice.vue
@@ -1,8 +1,13 @@
 <template>
-    <div>
-        <a-dropdown :trigger="['click']">
-            <div style="height: 48px; display: flex; display: flex">
-                <AIcon type="BellOutlined" @click.prevent />
+    <div class="notice-container">
+        <a-dropdown :trigger="['click']" @visible-change="visibleChange">
+            <div class="icon-content">
+                <AIcon
+                    type="BellOutlined"
+                    @click.prevent
+                    style="font-size: 16px"
+                />
+                <span class="unread" v-show="total > 0">{{ total }}</span>
             </div>
             <template #overlay>
                 <div>
@@ -17,6 +22,11 @@
 import { getList_api } from '@/api/account/notificationRecord';
 import NoticeInfo from './NoticeInfo.vue';
 import { getWebSocket } from '@/utils/websocket';
+import { notification } from 'ant-design-vue';
+import { changeStatus_api } from '@/api/account/notificationRecord';
+import { useUserInfo } from '@/store/userInfo';
+
+const updateCount = computed(()=>useUserInfo().$state.alarmUpdateCount);
 
 const total = ref(0);
 const list = ref<any[]>([]);
@@ -26,7 +36,15 @@ const subscribeNotice = () => {
     getWebSocket('notification', '/notifications', {})
         ?.pipe()
         .subscribe((resp: any) => {
-            total.value += 1
+            total.value += 1;
+            notification.open({
+                message: 'Notification Title',
+                description:
+                    'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+                onClick: () => {
+                    changeStatus_api('_read', [resp.id]);
+                },
+            });
         });
 };
 const getList = () => {
@@ -44,8 +62,38 @@ const getList = () => {
         })
         .finally(() => (loading.value = false));
 };
-
+subscribeNotice();
 getList();
+watch(updateCount, () => getList());
+const visibleChange = (bool: boolean) => {
+    bool && getList();
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.notice-container {
+    .icon-content {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .unread {
+            position: absolute;
+            top: 0;
+            right: -12px;
+            min-width: 20px;
+            height: 20px;
+            padding: 0 6px;
+            color: #fff;
+            font-weight: normal;
+            font-size: 12px;
+            line-height: 20px;
+            white-space: nowrap;
+            text-align: center;
+            background: #ff4d4f;
+            border-radius: 10px;
+        }
+    }
+}
+</style>
diff --git a/src/components/Layout/components/NoticeInfo.vue b/src/components/Layout/components/NoticeInfo.vue
index d9257652..1ea0b308 100644
--- a/src/components/Layout/components/NoticeInfo.vue
+++ b/src/components/Layout/components/NoticeInfo.vue
@@ -1,18 +1,29 @@
 <template>
     <div class="notice-info-container">
-        <img v-if="props.data.length" :src="NoData" alt="" />
-        <a-tabs v-else :activeKey="'default'">
-            <a-tab-pane key="default" tab="未读消息"> 
-                <ul class="list">
-                    <li class="list-item" v-for="item in props.data" @click="read(item.id)">
-                        <h5>{{ item.topicName }}</h5>
-                        <p>{{ item.message }}</p>
-                    </li>
-                </ul>   
-                <div class="btns">
-                    <span @click="read()">当前标记为已读</span>
-                    <span @click="jumpPage('account/NotificationRecord')">查看更多</span>
-                </div> 
+        <a-tabs :activeKey="'default'">
+            <a-tab-pane key="default" tab="未读消息">
+                <div class="no-data" v-if="props.data.length === 0">
+                    <img src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" alt="" />
+                </div>
+
+                <div v-else class="content">
+                    <ul class="list">
+                        <li
+                            class="list-item"
+                            v-for="item in props.data"
+                            @click="read(item.id)"
+                        >
+                            <h5>{{ item.topicName }}</h5>
+                            <p>{{ item.message }}</p>
+                        </li>
+                    </ul>
+                    <div class="btns">
+                        <span @click="read()">当前标记为已读</span>
+                        <span @click="jumpPage('account/NotificationRecord')"
+                            >查看更多</span
+                        >
+                    </div>
+                </div>
             </a-tab-pane>
         </a-tabs>
     </div>
@@ -21,22 +32,19 @@
 <script setup lang="ts">
 import { changeStatus_api } from '@/api/account/notificationRecord';
 import { useMenuStore } from '@/store/menu';
-import NoData from './nodata.svg';
 
-const emits = defineEmits(['onAction'])
+const emits = defineEmits(['onAction']);
 const props = defineProps<{
     data: any[];
 }>();
 const { jumpPage } = useMenuStore();
 
-const read = (id?:string)=>{
-    const ids = id ? [id]: props.data.map(item=>item.id)
-    changeStatus_api('_read',ids).then(resp=>{
-        if(resp.status === 200) emits('onAction')
-    })
-}
-
-
+const read = (id?: string) => {
+    const ids = id ? [id] : props.data.map((item) => item.id);
+    changeStatus_api('_read', ids).then((resp:any) => {
+        if (resp.status === 200) emits('onAction');
+    });
+};
 </script>
 
 <style lang="less" scoped>
@@ -52,22 +60,61 @@ const read = (id?:string)=>{
         justify-content: center;
     }
 
-    .list {
-        .list-item {
-            border-bottom: 1px solid #f0f0f0;
-            padding: 24px;
+    .no-data {
+        width: 100%;
+        padding: 73px 0 88px;
+        color: rgba(0, 0, 0, 0.45);
+        text-align: center;
+
+        img {
+            height: 76px;
         }
     }
-    .btns {
-        display: flex;
-        span {
-            display: block;
-            width: 50%;
-            text-align: center;
-            cursor: pointer;
 
-            &:first-child{
-                border-right: 1px solid #f0f0f0;
+    .content {
+        .list {
+            max-height: 400px;
+            overflow: auto;
+            padding: 0;
+            margin: 0;
+            &::-webkit-scrollbar {
+                //隐藏或取消滚动条
+                display: none;
+            }
+
+            .list-item {
+                padding: 12px 24px;
+                list-style: none;
+                border-bottom: 1px solid #f0f0f0;
+                cursor: pointer;
+                h5 {
+                    color: rgba(0, 0, 0, 0.85);
+                    font-size: 14px;
+                    font-weight: normal;
+                }
+                p {
+                    font-size: 12px;
+                    color: rgba(0, 0, 0, 0.45);
+                }
+
+                &:hover{
+                    background: #f0f5ff;
+                }
+            }
+        }
+        .btns {
+            display: flex;
+            height: 46px;
+            line-height: 46px;
+            span {
+                display: block;
+                width: 50%;
+                text-align: center;
+                cursor: pointer;
+
+                &:first-child {
+                    border-right: 1px solid #f0f0f0;
+                }
             }
         }
     }
diff --git a/src/components/Layout/components/UserInfo.vue b/src/components/Layout/components/UserInfo.vue
index d1a920df..e0a2b4dc 100644
--- a/src/components/Layout/components/UserInfo.vue
+++ b/src/components/Layout/components/UserInfo.vue
@@ -11,12 +11,12 @@
             </div>
             <template #overlay>
                 <a-menu>
-                    <a-menu-item @click="jumpPage('account/center')" style="width: 160px;">
-                        <AIcon type="UserOutlined" />
+                    <a-menu-item @click="push('/account/center')" style="width: 160px;">
+                        <AIcon type="UserOutlined" style="margin-right: 8px;" />
                         <span>个人中心</span>
                     </a-menu-item>
                     <a-menu-item @click="logOut">
-                        <AIcon type="LogoutOutlined" />
+                        <AIcon type="LogoutOutlined" style="margin-right: 8px;" />
                         <span>退出登录</span>
                     </a-menu-item>
                 </a-menu>
@@ -27,17 +27,17 @@
 
 <script setup lang="ts">
 import { loginout_api } from '@/api/login';
-import { useMenuStore } from '@/store/menu';
 import { useUserInfo } from '@/store/userInfo';
 
+const {push} = useRouter();
+
 const userInfo = useUserInfo().$state.userInfos as any;
 
-const { jumpPage } = useMenuStore();
 
 const logOut = () => {
     loginout_api().then(() => {
         localStorage.clear();
-        jumpPage('user/login');
+        push('/user/login');
     });
 };
 </script>
diff --git a/src/store/userInfo.ts b/src/store/userInfo.ts
index 3a6de12e..6fe3c602 100644
--- a/src/store/userInfo.ts
+++ b/src/store/userInfo.ts
@@ -20,7 +20,9 @@ export const useUserInfo = defineStore('userInfo', {
             token: '',
             user: {},
         },
+        alarmUpdateCount: 0
     }),
+    
     actions: {
         login(userInfo: any) {
             const username = userInfo.userName.trim();
@@ -49,6 +51,9 @@ export const useUserInfo = defineStore('userInfo', {
                     }
                 }).catch(() => rej())
             })
+        },
+        updateAlarm(){
+            this.alarmUpdateCount += 1
         }
     },
 });
diff --git a/src/views/account/NotificationRecord/index.vue b/src/views/account/NotificationRecord/index.vue
index 70b27377..ec4167a6 100644
--- a/src/views/account/NotificationRecord/index.vue
+++ b/src/views/account/NotificationRecord/index.vue
@@ -54,18 +54,6 @@
                             }"
                         >
                             <AIcon type="ReadIconOutlined" />
-                            <!-- <svg
-                                width="1em"
-                                height="1em"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="M12 18H6L2 22V2C2 2 2.9 2 4 2H20C21.1 2 22 2 22 2V11H20V4H4V16H12V18ZM23 14.34L21.59 12.93L17.35 17.17L15.23 15.05L13.82 16.46L17.34 20L23 14.34Z"
-                                    fill="currentColor"
-                                />
-                            </svg> -->
                         </PermissionButton>
                         <PermissionButton
                             type="link"
@@ -80,7 +68,11 @@
                 </template>
             </j-pro-table>
 
-            <ViewDialog v-if="viewVisible" v-model:visible="viewVisible" :data="viewItem" />
+            <ViewDialog
+                v-if="viewVisible"
+                v-model:visible="viewVisible"
+                :data="viewItem"
+            />
         </div>
     </page-container>
 </template>
@@ -97,7 +89,10 @@ import { optionItem } from '@/views/rule-engine/Scene/typings';
 import { dictItemType } from '@/views/system/DataSource/typing';
 import moment from 'moment';
 import { message } from 'ant-design-vue';
+import NoticeCp from '@/components/Layout/components/Notice.vue';
+import { useUserInfo } from '@/store/userInfo';
 
+const { updateAlarm } = useUserInfo();
 const columns = [
     {
         title: '类型',
@@ -181,6 +176,7 @@ const table = {
             if (resp.status === 200) {
                 message.success('操作成功！');
                 table.refresh();
+                updateAlarm();
             }
         });
     },
diff --git a/yarn.lock b/yarn.lock
index a0311d69..e006eebb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2146,7 +2146,7 @@ cli-width@^3.0.0:
   resolved "https://registry.npmmirror.com/cli-width/-/cli-width-3.0.0.tgz"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-clipboard@^2.0.4:
+clipboard@^2.0.10, clipboard@^2.0.4:
   version "2.0.11"
   resolved "https://registry.jetlinks.cn/clipboard/-/clipboard-2.0.11.tgz"
   integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
@@ -3416,6 +3416,11 @@ highlight.js@^11.3.1:
   resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.7.0.tgz"
   integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
 
+hls.js@^1.0.10:
+  version "1.3.4"
+  resolved "https://registry.jetlinks.cn/hls.js/-/hls.js-1.3.4.tgz#8212a3f95c3321f64a586f20e67876f3a9d09488"
+  integrity sha512-iFEwVqtEDk6sKotcTwtJ5OMo/nuDTk9PrpB8FI2J2WYf8EriTVfR4FaK0aNyYtwbYeRSWCXJKlz23xeREdlNYg==
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz"
@@ -3896,10 +3901,10 @@ jetlinks-store@^0.0.3:
   resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
   integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==
 
-jetlinks-ui-components@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.2.tgz#753507e4a84dee966c65d4ae33943507bd60cc9d"
-  integrity sha512-LXKetf75/uqzWP4XOobm+iUWTVEeMJNnwEk+GrNftQdcDzGvUxBaoFCoS+HBH06FnE2VBbh6rEwrpDhkLSNEow==
+jetlinks-ui-components@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.3.tgz#08a35ebfa016574affcfd11204359cdccf8e139f"
+  integrity sha512-kA/AxzdfNy+Sl8En8raMwIh3stofgElkUuJ+oRJMpQVTGbrOk29DifRsHJJFNvtEvclmLdKZkOkthOuEdG2mnw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"
@@ -6554,6 +6559,11 @@ three@0.143.0:
   resolved "https://registry.npmjs.org/three/-/three-0.143.0.tgz"
   integrity sha512-oKcAGYHhJ46TGEuHjodo2n6TY2R6lbvrkp+feKZxqsUL/WkH7GKKaeu6RHeyb2Xjfk2dPLRKLsOP0KM2VgT8Zg==
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.jetlinks.cn/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 through2@^4.0.0:
   version "4.0.2"
   resolved "https://registry.npmmirror.com/through2/-/through2-4.0.2.tgz"
@@ -6940,6 +6950,11 @@ uuid@^3.3.2:
   resolved "https://registry.jetlinks.cn/uuid/-/uuid-3.4.0.tgz"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v-clipboard3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.jetlinks.cn/v-clipboard3/-/v-clipboard3-0.1.4.tgz#13bdd12ce9728190d70f6ebf8b71de59d88b550e"
+  integrity sha512-iGIXgluf2WLbT+/Z1de9kKzoK9c9aPpy+zcPlY8/fneO+NHK95QEmFx2Q9LoxeUPRemD+nOfEv1J20Ki7W0v7Q==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmmirror.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"
@@ -7072,6 +7087,13 @@ vue-types@^3.0.0:
   dependencies:
     is-plain-object "3.0.1"
 
+vue3-json-viewer@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.jetlinks.cn/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz#43a512f378c602bb6b7f2a72adeaf7d15b443885"
+  integrity sha512-56l3XDGggnpwEqZieXsSMhNT4NhtO6d7zuSAxHo4i0UVxymyY2jRb7UMQOU1ztChKALZCAzX7DlgrsnEhxu77A==
+  dependencies:
+    clipboard "^2.0.10"
+
 vue3-markdown-it@^1.0.10:
   version "1.0.10"
   resolved "https://registry.npmmirror.com/vue3-markdown-it/-/vue3-markdown-it-1.0.10.tgz"
@@ -7099,7 +7121,16 @@ vue3-ts-jsoneditor@^2.7.1:
     vanilla-jsoneditor "^0.7.9"
     vue "^3.2.37"
 
-vue@^3.2.25:
+vue3-video-play@^1.3.1-beta.6:
+  version "1.3.1-beta.6"
+  resolved "https://registry.jetlinks.cn/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz#bca3f55a11053eaa37053835e4610c04d9cc509e"
+  integrity sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==
+  dependencies:
+    hls.js "^1.0.10"
+    throttle-debounce "^3.0.1"
+    vue "^3.2.2"
+
+vue@^3.2.2, vue@^3.2.25:
   version "3.2.47"
   resolved "https://registry.jetlinks.cn/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
   integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==