feat: 右上角部分

src/api/login.ts

@@ -52,3 +52,8 @@ export const settingDetail = (scopes: string) => server.get(`/system/config/${sc
  * 获取当前登录用户信息
  */
 export const userDetail = () => server.get<any>('/user/detail')
+
+/**
+ * 退出登录
+ */
+export const loginout_api = () => server.get<any>('/user-token/reset')

src/components/Layout/BasicLayoutPage.vue

@@ -1,38 +1,49 @@
 <template>
     <j-pro-layout
-    v-bind='layoutConf'
+        v-bind="layoutConf"
         v-model:openKeys="state.openKeys"
         v-model:collapsed="state.collapsed"
         v-model:selectedKeys="state.selectedKeys"
-    :pure='state.pure'
+        :pure="state.pure"
-    :breadcrumb='{ routes: breadcrumb }'
+        :breadcrumb="{ routes: breadcrumb }"
     >
-    <template #breadcrumbRender='slotProps'>
+        <template #breadcrumbRender="slotProps">
-      <a v-if='slotProps.route.index !== 0'>{{slotProps.route.breadcrumbName}}</a>
+            <a v-if="slotProps.route.index !== 0">{{
-      <span v-else>{{slotProps.route.breadcrumbName}}</span>
+                slotProps.route.breadcrumbName
+            }}</a>
+            <span v-else>{{ slotProps.route.breadcrumbName }}</span>
         </template>
-    <router-view v-slot='{ Component}'>
+        <template #rightContentRender> 
-      <component :is='Component' />
+          <div style="margin-right: 24px;display: flex;align-items: center;">
+            <AIcon type="QuestionCircleOutlined" @click="toDoc" />
+            <Notice style="margin: 0 24px;" />
+            <UserInfo />
+          </div>
+        </template>
+        <router-view v-slot="{ Component }">
+            <component :is="Component" />
         </router-view>
     </j-pro-layout>
 </template>
 
-<script setup lang="ts" name='BasicLayoutPage'>
+<script setup lang="ts" name="BasicLayoutPage">
-import DefaultSetting from '../../../config/config'
+import UserInfo from './components/UserInfo.vue';
-import { useMenuStore } from '@/store/menu'
+import Notice from './components/Notice.vue'
-import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util'
+import DefaultSetting from '../../../config/config';
+import { useMenuStore } from '@/store/menu';
+import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util';
 
 type StateType = {
-  collapsed: boolean
+    collapsed: boolean;
-  openKeys: string[]
+    openKeys: string[];
-  selectedKeys: string[]
+    selectedKeys: string[];
-  pure: boolean
+    pure: boolean;
-}
+};
 
-const router = useRouter()
+const router = useRouter();
-const route = useRoute()
+const route = useRoute();
 
-const menu = useMenuStore()
+const menu = useMenuStore();
 
 const layoutConf = reactive({
     theme: DefaultSetting.layout.theme,
@@ -40,7 +51,7 @@ const layoutConf = reactive({
     logo: DefaultSetting.layout.logo,
     title: DefaultSetting.layout.title,
     menuData: clearMenuItem(menu.siderMenus),
-  splitMenus: true
+    splitMenus: true,
 });
 
 const state = reactive<StateType>({
@@ -55,30 +66,37 @@ const breadcrumb = computed(() =>
         return {
             index,
             path: item.path,
-      breadcrumbName: item.meta.title || ''
+            breadcrumbName: item.meta.title || '',
-    }
+        };
-  })
+    }),
-)
+);
 
 watchEffect(() => {
     if (router.currentRoute) {
-    const matched = router.currentRoute.value.matched.concat()
+        const matched = router.currentRoute.value.matched.concat();
-    state.selectedKeys = matched.map(r => r.path)
+        state.selectedKeys = matched.map((r) => r.path);
-    state.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map(r => r.path)
+        state.openKeys = matched
-    console.log(state.selectedKeys)
+            .filter((r) => r.path !== router.currentRoute.value.path)
+            .map((r) => r.path);
+        console.log(state.selectedKeys);
     }
     // TODO 获取当前路由中参数，用于控制pure
-})
+});
 
 watchEffect(() => {
-  if (route.query && 'layout' in route.query && route.query.layout === 'false') {
+    if (
-    state.pure = true
+        route.query &&
+        'layout' in route.query &&
+        route.query.layout === 'false'
+    ) {
+        state.pure = true;
     } else {
-    state.pure = false
+        state.pure = false;
     }
-})
+});
 
+
+const toDoc = ()=>window.open('http://doc.v2.jetlinks.cn/')
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/Layout/components/Notice.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <a-dropdown :trigger="['click']">
+            <div style="height: 48px; display: flex; display: flex">
+                <AIcon type="BellOutlined" @click.prevent />
+            </div>
+            <template #overlay>
+                <div class="content">
+                    <NoticeInfo />
+                </div>
+            </template>
+        </a-dropdown>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getList_api } from '@/api/account/notificationRecord';
+import NoticeInfo from './NoticeInfo.vue';
+
+const getList = () => {
+    const params = {
+        'terms[0].column': 'state',
+        'terms[0].value': 'unread',
+        'sorts[0].name': 'notifyTime',
+        'sorts[0].order': 'desc',
+    };
+    getList_api(params).then((resp) => {});
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/Layout/components/NoticeInfo.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="notice-info-container">
+        <a-tabs :activeKey="'default'">
+            <a-tab-pane key="default" tab="未读消息"> 111 </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.notice-info-container {
+    width: 336px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 6px 16px -8px rgb(0 0 0 / 8%), 0 9px 28px 0 rgb(0 0 0 / 5%),
+        0 12px 48px 16px rgb(0 0 0 / 3%);
+
+    :deep(.ant-tabs-nav-wrap) {
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

src/components/Layout/components/UserInfo.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <a-dropdown placement="bottomRight">
+            <div style="cursor: pointer;height: 100%;">
+                <img
+                    :src="userInfo.avatar"
+                    alt=""
+                    style="width: 24px; margin-right: 12px"
+                />
+                <span>{{ userInfo.name }}</span>
+            </div>
+            <template #overlay>
+                <a-menu>
+                    <a-menu-item @click="jumpPage('account/center')" style="width: 160px;">
+                        <AIcon type="UserOutlined" />
+                        <span>个人中心</span>
+                    </a-menu-item>
+                    <a-menu-item @click="logOut">
+                        <AIcon type="LogoutOutlined" />
+                        <span>退出登录</span>
+                    </a-menu-item>
+                </a-menu>
+            </template>
+        </a-dropdown>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { loginout_api } from '@/api/login';
+import { useMenuStore } from '@/store/menu';
+import { useUserInfo } from '@/store/userInfo';
+
+const userInfo = useUserInfo().$state.userInfos as any;
+
+const { jumpPage } = useMenuStore();
+
+const logOut = () => {
+    loginout_api().then(() => {
+        localStorage.clear();
+        jumpPage('user/login');
+    });
+};
+</script>
+
+<style scoped></style>

src/views/account/NotificationRecord/components/ViewDialog.vue

@@ -5,50 +5,55 @@
         width="1000px"
         @ok="emits('update:visible', false)"
         @cancel="emits('update:visible', false)"
+        class="view-dialog-container"
     >
         <a-row v-if="data?.targetType === 'device'">
-            <a-col :span="6" class="label">告警设备</a-col>
+            <a-col :span="4" class="label">告警设备</a-col>
-            <a-col :span="6" class="value">
+            <a-col :span="8" class="value">
                 {{ data?.targetName || '' }}
             </a-col>
-            <a-col :span="6" class="label">设备ID</a-col>
+            <a-col :span="4" class="label">设备ID</a-col>
-            <a-col :span="6" class="value">
+            <a-col :span="8" class="value">
                 {{ data?.targetId || '' }}
             </a-col>
         </a-row>
         <a-row>
-            <a-col :span="6" class="label">告警名称</a-col>
+            <a-col :span="4" class="label">告警名称</a-col>
-            <a-col :span="6" class="value">
+            <a-col :span="8" class="value">
                 {{ data?.alarmName || data?.alarmConfigName || '' }}
             </a-col>
-            <a-col :span="6" class="label">告警时间</a-col>
+            <a-col :span="4" class="label">告警时间</a-col>
-            <a-col :span="6" class="value">
+            <a-col :span="8" class="value">
                 {{ moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss') }}
             </a-col>
 
-            <a-col :span="6" class="label">告警级别</a-col>
+            <a-col :span="4" class="label">告警级别</a-col>
-            <a-col :span="6" class="value">
+            <a-col :span="8" class="value">
                 {{ (levelList.length > 0 && getLevelLabel(data.level)) || '' }}
             </a-col>
-            <a-col :span="6" class="label">告警说明</a-col>
+            <a-col :span="4" class="label">告警说明</a-col>
-            <a-col :span="6" class="value">{{ data?.description || '' }}</a-col>
+            <a-col :span="8" class="value">{{ data?.description || '' }}</a-col>
 
-            <a-col :span="6" class="label">告警流水</a-col>
+            <a-col
-            <a-col :span="18" class="value">
+                :span="4"
-                <!-- <MonacoEditor
+                class="label"
-                    style="width: 100%; height: 370px"
+                style="display: flex; height: 440px; align-items: center"
-                    theme="vs"
+                >告警流水</a-col
-                    v-model="jsonData"
+            >
-                /> -->
+            <a-col
-                <JsonViewer :value="jsonData" copyable boxed sort />
+                :span="20"
+                class="value"
+                style="max-height: 440px; overflow: auto"
+            >
+                <JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" />
             </a-col>
         </a-row>
     </a-modal>
 </template>
 
 <script setup lang="ts">
-import MonacoEditor from '@/components/MonacoEditor/index.vue';
+import { JsonViewer } from 'vue3-json-viewer';
-import {JsonViewer} from 'vue3-json-viewer';
+import 'vue3-json-viewer/dist/index.css';
 import { queryLevel as queryLevel_api } from '@/api/rule-engine/config';
 import moment from 'moment';
 
@@ -69,18 +74,25 @@ const getLevel = () => {
     });
 };
 getLevel();
-const getLevelLabel = (id: string) => {
+const getLevelLabel = (id: number) => {
     if (levelList.value.length < 1 || !id) return '';
-    const obj = levelList.value.find((item) => item.id === id);
+    const obj = levelList.value.find((item) => item.level === id);
-    return obj.title;
+    return obj?.title;
 };
-
-const jsonData = JSON.stringify({
-    name: 'qiu', 
-    age: 18, 
-    isMan: false, 
-    arr: [1, 2, 5],
-});
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+.view-dialog-container {
+    .ant-row {
+        .ant-col {
+            padding: 16px 24px;
+            border-right: 1px solid #f0f0f0;
+        }
+        .label {
+            background-color: #fafafa;
+        }
+        .value {
+        }
+    }
+}
+</style>

src/views/account/NotificationRecord/index.vue

@@ -3,7 +3,7 @@
         <div class="notification-record-container">
             <Search :columns="columns" @search="query.search" />
 
-            <JTable
+            <j-pro-table
                 ref="tableRef"
                 :columns="columns"
                 :request="getList_api"
@@ -78,7 +78,7 @@
                         </PermissionButton>
                     </a-space>
                 </template>
-            </JTable>
+            </j-pro-table>
 
             <ViewDialog v-if="viewVisible" v-model:visible="viewVisible" :data="viewItem" />
         </div>

yarn.lock

@@ -1072,6 +1072,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz#3e07c684d74897ac9aa5922c520741f3029267f8"
+  integrity sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.2.45", "@vue/compiler-dom@^3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz"
@@ -1080,6 +1090,14 @@
     "@vue/compiler-core" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-dom@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
+  integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
+  dependencies:
+    "@vue/compiler-core" "3.2.47"
+    "@vue/shared" "3.2.47"
+
 "@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.29", "@vue/compiler-sfc@^3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz"
@@ -1096,6 +1114,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fcompiler-sfc/-/compiler-sfc-3.2.47.tgz#1bdc36f6cdc1643f72e2c397eb1a398f5004ad3d"
+  integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.47"
+    "@vue/compiler-dom" "3.2.47"
+    "@vue/compiler-ssr" "3.2.47"
+    "@vue/reactivity-transform" "3.2.47"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz"
@@ -1104,6 +1138,14 @@
     "@vue/compiler-dom" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-ssr@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
+  integrity sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.47"
+    "@vue/shared" "3.2.47"
+
 "@vue/devtools-api@^6.4.5":
   version "6.4.5"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz"
@@ -1120,6 +1162,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/reactivity-transform@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2freactivity-transform/-/reactivity-transform-3.2.47.tgz#e45df4d06370f8abf29081a16afd25cffba6d84e"
+  integrity sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.47"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
 "@vue/reactivity@3.2.45", "@vue/reactivity@^3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz"
@@ -1127,6 +1180,13 @@
   dependencies:
     "@vue/shared" "3.2.45"
 
+"@vue/reactivity@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2freactivity/-/reactivity-3.2.47.tgz#1d6399074eadfc3ed35c727e2fd707d6881140b6"
+  integrity sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==
+  dependencies:
+    "@vue/shared" "3.2.47"
+
 "@vue/runtime-core@3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz"
@@ -1135,6 +1195,14 @@
     "@vue/reactivity" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/runtime-core@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fruntime-core/-/runtime-core-3.2.47.tgz#406ebade3d5551c00fc6409bbc1eeb10f32e121d"
+  integrity sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==
+  dependencies:
+    "@vue/reactivity" "3.2.47"
+    "@vue/shared" "3.2.47"
+
 "@vue/runtime-dom@3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz"
@@ -1144,6 +1212,15 @@
     "@vue/shared" "3.2.45"
     csstype "^2.6.8"
 
+"@vue/runtime-dom@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fruntime-dom/-/runtime-dom-3.2.47.tgz#93e760eeaeab84dedfb7c3eaf3ed58d776299382"
+  integrity sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==
+  dependencies:
+    "@vue/runtime-core" "3.2.47"
+    "@vue/shared" "3.2.47"
+    csstype "^2.6.8"
+
 "@vue/server-renderer@3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz"
@@ -1152,11 +1229,24 @@
     "@vue/compiler-ssr" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/server-renderer@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fserver-renderer/-/server-renderer-3.2.47.tgz#8aa1d1871fc4eb5a7851aa7f741f8f700e6de3c0"
+  integrity sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.47"
+    "@vue/shared" "3.2.47"
+
 "@vue/shared@3.2.45", "@vue/shared@^3.2.45":
   version "3.2.45"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz"
   integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
 
+"@vue/shared@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/@vue%2fshared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
+  integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
+
 "@vuemap/layer-3dtiles@^0.0.3":
   version "0.0.3"
   resolved "https://registry.npmjs.org/@vuemap/layer-3dtiles/-/layer-3dtiles-0.0.3.tgz"
@@ -3644,8 +3734,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.1.tgz#12fe9a193af14b859e1baf02fbd706a2be5b31cf"
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.1.tgz#d9e6f5bd9b98523fb4708269be9b4e9bba3437b9"
-  integrity sha512-4hdEJUaKNMSIcmbn4qKcG8oK7h6VSYP3X3fCNndBm6WhHh+9ONf8f+3OSrUy1PvxdenmqO0VN2QdWV0KupByKQ==
+  integrity sha512-P8ykIynH6ti9c4KndFfHu/dwewqiWm4Gjki4e+IlCJcwq1at2iokWAITOVm9UsBnEBqWhTQowpK6vlSyTlW+9g==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"