From a003c9725a53e61497ef6acbe1b9643be857e9ac Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 2 Nov 2023 17:23:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9F=A5=E8=AF=A2=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/api/interceptor.ts           |  34 ++-
 orion-ops-ui/src/api/user/mine.ts             |  12 +-
 orion-ops-ui/src/api/user/user.ts             |  14 +
 .../src/components/app/navbar/index.vue       |   4 +-
 .../host-identity/host-identity-selector.vue  |   2 +-
 .../asset/host-key/host-key-selector.vue      |   2 +-
 .../system/dict-key/dict-key-selector.vue     |   9 +-
 .../menu/selector/menu-selector-tree.vue      |   2 +-
 .../user/role/user-role-selector.vue          |   9 +-
 .../components/user/role/user-selector.vue    |  12 +-
 orion-ops-ui/src/store/modules/cache/index.ts |   5 +
 orion-ops-ui/src/store/modules/user/index.ts  |   5 +-
 orion-ops-ui/src/types/form.ts                |   4 +
 orion-ops-ui/src/types/symbol.ts              |   3 +
 .../src/views/authentication/login/index.vue  |  21 +-
 .../components/dict-value-table.vue           |   2 +-
 .../menu/components/menu-tree-selector.vue    |   2 +-
 .../user/info/components/login-history.vue    |  46 ++-
 .../info/components/operator-log-list.vue     | 274 ++++--------------
 .../{user-info.vue => user-base-info.vue}     |  42 ++-
 .../user/info/components/user-session.vue     |  54 +++-
 orion-ops-ui/src/views/user/info/index.vue    |  94 +++++-
 .../components/operator-log-query-header.vue  |   6 +-
 .../components/operator-log-table.vue         |  27 +-
 .../src/views/user/operator-log/index.vue     |   1 -
 .../views/user/user/components/user-table.vue |  16 +
 .../views/user/user/types/table.columns.ts    |   2 +-
 27 files changed, 402 insertions(+), 302 deletions(-)
 create mode 100644 orion-ops-ui/src/types/form.ts
 rename orion-ops-ui/src/views/user/info/components/{user-info.vue => user-base-info.vue} (71%)

diff --git a/orion-ops-ui/src/api/interceptor.ts b/orion-ops-ui/src/api/interceptor.ts
index 55de6807..c4b491eb 100644
--- a/orion-ops-ui/src/api/interceptor.ts
+++ b/orion-ops-ui/src/api/interceptor.ts
@@ -1,8 +1,9 @@
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import axios from 'axios';
-import { Message, Notification } from '@arco-design/web-vue';
+import { Message } from '@arco-design/web-vue';
 import { useUserStore } from '@/store';
 import { getToken } from '@/utils/auth';
+import { reLoginTipsKey } from '@/types/symbol';
 
 export interface HttpResponse<T = unknown> {
   msg: string;
@@ -45,25 +46,28 @@ axios.interceptors.response.use(
     if (code === 200) {
       return res;
     }
-    // 非 200 业务异常
-    if (response.config.promptBizErrorMessage) {
+    // 异常判断
+    if ([401, 700, 701, 702, 703].includes(code)) {
+      // 提示
       Message.error({
         content: res.msg || 'Error',
         duration: 5 * 1000,
       });
-    }
-    // 业务判断
-    if ([401, 700, 701, 702].includes(code)) {
-      Notification.error({
-        closable: true,
-        content: res.msg,
+      // 认证异常
+      setTimeout(async () => {
+        // 设置错误信息 登录页面重新提示 (重新加载会刷掉提示)
+        window.sessionStorage.setItem(reLoginTipsKey, res.msg);
+        // 登出
+        await useUserStore().logout();
+        // 重新加载自动跳转登录页面
+        window.location.reload();
       });
-      // 非登录页面跳转登录页面
-      if (response.config.url !== '/infra/auth/login') {
-        setTimeout(async () => {
-          // 登出
-          await useUserStore().logout();
-          window.location.reload();
+    } else {
+      // 其他异常 判断是否弹出错误信息
+      if (response.config.promptBizErrorMessage) {
+        Message.error({
+          content: res.msg || 'Error',
+          duration: 5 * 1000,
         });
       }
     }
diff --git a/orion-ops-ui/src/api/user/mine.ts b/orion-ops-ui/src/api/user/mine.ts
index c232c056..997a848b 100644
--- a/orion-ops-ui/src/api/user/mine.ts
+++ b/orion-ops-ui/src/api/user/mine.ts
@@ -1,5 +1,6 @@
-import type { LoginHistoryQueryResponse } from './operator-log';
-import type { UserQueryResponse, UserSessionQueryResponse, UserSessionOfflineRequest, UserUpdateRequest } from './user';
+import type { DataGrid } from '@/types/global';
+import type { LoginHistoryQueryResponse, OperatorLogQueryRequest, OperatorLogQueryResponse } from './operator-log';
+import type { UserQueryResponse, UserSessionOfflineRequest, UserSessionQueryResponse, UserUpdateRequest } from './user';
 import axios from 'axios';
 
 /**
@@ -51,3 +52,10 @@ export function getCurrentUserSessionList() {
 export function offlineCurrentUserSession(request: UserSessionOfflineRequest) {
   return axios.put('/infra/mine/offline-session', request);
 }
+
+/**
+ * 查询当前用户操作日志
+ */
+export function getCurrentUserOperatorLog(request: OperatorLogQueryRequest) {
+  return axios.post<DataGrid<OperatorLogQueryResponse>>('/infra/mine/query-operator-log', request);
+}
diff --git a/orion-ops-ui/src/api/user/user.ts b/orion-ops-ui/src/api/user/user.ts
index a1bfc611..a9f95358 100644
--- a/orion-ops-ui/src/api/user/user.ts
+++ b/orion-ops-ui/src/api/user/user.ts
@@ -19,6 +19,7 @@ export interface UserCreateRequest {
  */
 export interface UserUpdateRequest extends UserCreateRequest {
   id?: number;
+  status?: number;
   roleIdList?: Array<number>;
   password?: string;
 }
@@ -146,3 +147,16 @@ export function deleteUser(id: number) {
   return axios.delete('/infra/system-user/delete', { params: { id } });
 }
 
+/**
+ * 获取用户会话列表
+ */
+export function getUserSessionList(id: number) {
+  return axios.get<Array<UserSessionQueryResponse>>('/infra/system-user/user-session', { params: { id } });
+}
+
+/**
+ * 下线用户会话
+ */
+export function offlineUserSession(request: UserSessionOfflineRequest) {
+  return axios.put('/infra/system-user/offline-session', request);
+}
diff --git a/orion-ops-ui/src/components/app/navbar/index.vue b/orion-ops-ui/src/components/app/navbar/index.vue
index 77dc8912..4986af5c 100644
--- a/orion-ops-ui/src/components/app/navbar/index.vue
+++ b/orion-ops-ui/src/components/app/navbar/index.vue
@@ -255,8 +255,8 @@
   };
 
   // 退出登录
-  const handleLogout = () => {
-    logout();
+  const handleLogout = async () => {
+    await logout();
   };
 
   // 关闭偏好提示
diff --git a/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue b/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
index dacc6451..a8302287 100644
--- a/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
@@ -47,6 +47,6 @@
   };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>
diff --git a/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue b/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
index c9370868..059dd58b 100644
--- a/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
@@ -47,6 +47,6 @@
   };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>
diff --git a/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue b/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
index 7ba09db3..6b359c33 100644
--- a/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
+++ b/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
@@ -4,7 +4,7 @@
             :allow-search="true"
             :loading="loading"
             :disabled="loading"
-            :filter-option="filterOption"
+            :filter-option="labelFilter"
             :allow-create="allowCreate"
             placeholder="请选择配置项" />
 </template>
@@ -19,6 +19,7 @@
   import type { SelectOptionData } from '@arco-design/web-vue';
   import { computed } from 'vue';
   import { useCacheStore } from '@/store';
+  import { labelFilter } from '@/types/form';
 
   const props = defineProps({
     modelValue: Number,
@@ -65,12 +66,8 @@
     });
   };
 
-  // 搜索
-  const filterOption = (searchValue: string, option: { label: string; }) => {
-    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-  };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>
diff --git a/orion-ops-ui/src/components/system/menu/selector/menu-selector-tree.vue b/orion-ops-ui/src/components/system/menu/selector/menu-selector-tree.vue
index 5131a2ca..4627166f 100644
--- a/orion-ops-ui/src/components/system/menu/selector/menu-selector-tree.vue
+++ b/orion-ops-ui/src/components/system/menu/selector/menu-selector-tree.vue
@@ -143,6 +143,6 @@
 
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>;
diff --git a/orion-ops-ui/src/components/user/role/user-role-selector.vue b/orion-ops-ui/src/components/user/role/user-role-selector.vue
index 78e169ad..dfd1d859 100644
--- a/orion-ops-ui/src/components/user/role/user-role-selector.vue
+++ b/orion-ops-ui/src/components/user/role/user-role-selector.vue
@@ -5,7 +5,7 @@
             :multiple="multiple"
             :loading="loading"
             :disabled="loading"
-            :filter-option="filterOption"
+            :filter-option="labelFilter"
             placeholder="请选择角色" />
 </template>
 
@@ -21,6 +21,7 @@
   import { computed } from 'vue';
   import { useCacheStore } from '@/store';
   import { RoleStatus } from '@/views/user/role/types/const';
+  import { labelFilter } from '@/types/form';
 
   const props = defineProps({
     modelValue: [Number, Array] as PropType<number | Array<number>>,
@@ -51,12 +52,8 @@
     });
   };
 
-  // 搜索
-  const filterOption = (searchValue: string, option: { label: string; }) => {
-    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-  };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>
diff --git a/orion-ops-ui/src/components/user/role/user-selector.vue b/orion-ops-ui/src/components/user/role/user-selector.vue
index 13f47191..ce4c5364 100644
--- a/orion-ops-ui/src/components/user/role/user-selector.vue
+++ b/orion-ops-ui/src/components/user/role/user-selector.vue
@@ -5,7 +5,7 @@
             :multiple="multiple"
             :loading="loading"
             :disabled="loading"
-            :filter-option="filterOption"
+            :filter-option="labelFilter"
             placeholder="请选择用户" />
 </template>
 
@@ -20,7 +20,7 @@
   import type { SelectOptionData } from '@arco-design/web-vue';
   import { computed } from 'vue';
   import { useCacheStore } from '@/store';
-  import { RoleStatus } from '@/views/user/role/types/const';
+  import { labelFilter } from '@/types/form';
 
   const props = defineProps({
     modelValue: [Number, Array] as PropType<number | Array<number>>,
@@ -38,7 +38,6 @@
       emits('update:modelValue', e);
     }
   });
-
   // 选项数据
   const cacheStore = useCacheStore();
   const optionData = (): SelectOptionData[] => {
@@ -49,13 +48,8 @@
       };
     });
   };
-
-  // 搜索
-  const filterOption = (searchValue: string, option: { label: string; }) => {
-    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-  };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>
diff --git a/orion-ops-ui/src/store/modules/cache/index.ts b/orion-ops-ui/src/store/modules/cache/index.ts
index 126a23af..4ebb8be4 100644
--- a/orion-ops-ui/src/store/modules/cache/index.ts
+++ b/orion-ops-ui/src/store/modules/cache/index.ts
@@ -27,6 +27,11 @@ export default defineStore('cache', {
       for (let name of names) {
         this[name] = [];
       }
+    },
+
+    // 清除全部
+    clear() {
+      this.$reset();
     }
   },
 });
diff --git a/orion-ops-ui/src/store/modules/user/index.ts b/orion-ops-ui/src/store/modules/user/index.ts
index 81fe4c11..11853c24 100644
--- a/orion-ops-ui/src/store/modules/user/index.ts
+++ b/orion-ops-ui/src/store/modules/user/index.ts
@@ -5,7 +5,7 @@ import { getUserPermission, login as userLogin, logout as userLogout } from '@/a
 import { clearToken, setToken } from '@/utils/auth';
 import { md5 } from '@/utils';
 import { removeRouteListener } from '@/utils/route-listener';
-import { useAppStore, useMenuStore, useTabBarStore, useTipsStore } from '@/store';
+import { useAppStore, useCacheStore, useMenuStore, useTabBarStore, useTipsStore } from '@/store';
 
 export default defineStore('user', {
   state: (): UserState => ({
@@ -89,6 +89,9 @@ export default defineStore('user', {
       // 清除 tabs
       const tabBarStore = useTabBarStore();
       tabBarStore.resetTabList();
+      // 清除缓存
+      const cacheStore = useCacheStore();
+      cacheStore.clear();
     },
   },
 });
diff --git a/orion-ops-ui/src/types/form.ts b/orion-ops-ui/src/types/form.ts
new file mode 100644
index 00000000..336256de
--- /dev/null
+++ b/orion-ops-ui/src/types/form.ts
@@ -0,0 +1,4 @@
+// 通过 label 进行过滤
+export const labelFilter = (searchValue: string, option: { label: string; }) => {
+  return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+};
diff --git a/orion-ops-ui/src/types/symbol.ts b/orion-ops-ui/src/types/symbol.ts
index b56626b2..db61d91d 100644
--- a/orion-ops-ui/src/types/symbol.ts
+++ b/orion-ops-ui/src/types/symbol.ts
@@ -3,3 +3,6 @@ export const toggleDrawerMenuKey = Symbol();
 
 // 打开偏好设置
 export const openAppSettingKey = Symbol();
+
+// 重新登录的提示
+export const reLoginTipsKey = 're-login-tips';
diff --git a/orion-ops-ui/src/views/authentication/login/index.vue b/orion-ops-ui/src/views/authentication/login/index.vue
index b77cde59..b5ece70b 100644
--- a/orion-ops-ui/src/views/authentication/login/index.vue
+++ b/orion-ops-ui/src/views/authentication/login/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="container">
+    <!-- 顶部 logo -->
     <div class="logo">
-      <img
-        alt="logo"
-        src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
-      />
+      <img alt="logo"
+           src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" />
       <div class="logo-text">Orion Ops Pro</div>
     </div>
     <!-- 左侧 banner -->
     <LoginBanner />
+    <!-- 主体部分 -->
     <div class="content">
       <div class="content-inner">
         <!-- 登录表单 -->
@@ -26,6 +26,19 @@
   import Footer from '@/components/app/footer/index.vue';
   import LoginBanner from './components/banner.vue';
   import LoginForm from './components/login-form.vue';
+  import { Notification } from '@arco-design/web-vue';
+  import { reLoginTipsKey } from '@/types/symbol';
+
+  // 登录提示
+  const tips = window.sessionStorage.getItem(reLoginTipsKey);
+  window.sessionStorage.removeItem(reLoginTipsKey);
+  if (tips) {
+    Notification.error({
+      closable: true,
+      content: tips,
+      duration: 5 * 1000,
+    });
+  }
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
index 81113e6a..91a16461 100644
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
@@ -10,7 +10,7 @@
       <a-form-item field="keyId" label="配置项" label-col-flex="50px">
         <dict-key-selector v-model="formModel.keyId"
                            @change="changeKey"
-                           allow-create />
+                           allow-clear />
       </a-form-item>
       <!-- 配置值 -->
       <a-form-item field="value" label="配置值" label-col-flex="50px">
diff --git a/orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue b/orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue
index 1dedeeda..2c99d540 100644
--- a/orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue
+++ b/orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue
@@ -71,6 +71,6 @@
 
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>;
diff --git a/orion-ops-ui/src/views/user/info/components/login-history.vue b/orion-ops-ui/src/views/user/info/components/login-history.vue
index 29bf76a5..0a262174 100644
--- a/orion-ops-ui/src/views/user/info/components/login-history.vue
+++ b/orion-ops-ui/src/views/user/info/components/login-history.vue
@@ -1,7 +1,15 @@
 <template>
   <a-spin :loading="loading" class="main-container">
-    <span class="extra-message">只展示最近登录的 30 条历史记录</span>
-    <a-timeline>
+    <span class="extra-message">
+      <template v-if="user">
+        只展示用户 <span class="user-info">{{ user.nickname }}({{ user.username }})</span> 最近登录的 30 条历史记录
+      </template>
+      <template v-else>
+        只展示最近登录的 30 条历史记录
+      </template>
+    </span>
+    <!-- 登录历史时间线 -->
+    <a-timeline v-if="list.length">
       <a-timeline-item v-for="item in list"
                        :key="item.id">
         <!-- 图标 -->
@@ -33,6 +41,15 @@
         </div>
       </a-timeline-item>
     </a-timeline>
+    <!-- 加载中 -->
+    <a-space direction="vertical"
+             v-else-if="loading"
+             :style="{width: '70%'}"
+             size="large">
+      <a-skeleton-line :rows="4" />
+    </a-space>
+    <!-- 空 -->
+    <a-empty v-else />
   </a-spin>
 </template>
 
@@ -43,14 +60,21 @@
 </script>
 
 <script lang="ts" setup>
+  import type { UserQueryResponse } from '@/api/user/user';
   import type { LoginHistoryQueryResponse } from '@/api/user/operator-log';
+  import type { PropType } from 'vue';
   import useLoading from '@/hooks/loading';
   import { ref, onMounted } from 'vue';
   import { ResultStatus } from '../types/const';
   import { getCurrentLoginHistory } from '@/api/user/mine';
+  import { getLoginHistory } from '@/api/user/operator-log';
   import { dateFormat } from '@/utils';
   import { isMobile } from '@/utils/is';
 
+  const props = defineProps({
+    user: Object as PropType<UserQueryResponse>,
+  });
+
   const list = ref<LoginHistoryQueryResponse[]>([]);
 
   const { loading, setLoading } = useLoading();
@@ -59,8 +83,15 @@
   onMounted(async () => {
     try {
       setLoading(true);
-      const { data } = await getCurrentLoginHistory();
-      list.value = data;
+      if (props.user) {
+        // 查询其他用户
+        const { data } = await getLoginHistory(props.user.username);
+        list.value = data;
+      } else {
+        // 查询当前用户
+        const { data } = await getCurrentLoginHistory();
+        list.value = data;
+      }
     } catch (e) {
     } finally {
       setLoading(false);
@@ -77,11 +108,16 @@
   }
 
   .extra-message {
-    margin-bottom: 38px;
+    margin-bottom: 42px;
     margin-left: -24px;
     display: block;
     color: var(--color-text-3);
     user-select: none;
+
+    .user-info {
+      color: rgb(var(--primary-6));
+      font-weight: 600;
+    }
   }
 
   .icon-container {
diff --git a/orion-ops-ui/src/views/user/info/components/operator-log-list.vue b/orion-ops-ui/src/views/user/info/components/operator-log-list.vue
index 6eee6d3a..aabb598f 100644
--- a/orion-ops-ui/src/views/user/info/components/operator-log-list.vue
+++ b/orion-ops-ui/src/views/user/info/components/operator-log-list.vue
@@ -1,124 +1,32 @@
 <template>
-  <!-- 搜索 -->
-  <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
-                    label-align="left"
-                    @submit="fetchTableData"
-                    @reset="fetchTableData"
-                    @keyup.enter="() => fetchTableData()">
-      <!-- 角色名称 -->
-      <a-form-item field="name" label="角色名称" label-col-flex="50px">
-        <a-input v-model="formModel.name" placeholder="请输入角色名称" allow-clear />
-      </a-form-item>
-      <!-- 角色编码 -->
-      <a-form-item field="code" label="角色编码" label-col-flex="50px">
-        <a-input v-model="formModel.code" placeholder="请输入角色编码" allow-clear />
-      </a-form-item>
-      <!-- 角色状态 -->
-      <a-form-item field="status" label="角色状态" label-col-flex="50px">
-        <a-select v-model="formModel.status"
-                  placeholder="请选择角色状态"
-                  :options="toOptions(roleStatusKey)"
-                  allow-clear />
-      </a-form-item>
-    </a-query-header>
-  </a-card>
-  <!-- 表格 -->
-  <a-card class="general-card table-card">
-    <template #title>
-      <!-- 左侧操作 -->
-      <div class="table-left-bar-handle">
-        <!-- 标题 -->
-        <div class="table-title">
-          角色列表
-        </div>
-      </div>
-      <!-- 右侧操作 -->
-      <div class="table-right-bar-handle">
-        <a-space>
-          <!-- 新增 -->
-          <a-button type="primary"
-                    v-permission="['infra:system-role:create']"
-                    @click="emits('openAdd')">
-            新增
-            <template #icon>
-              <icon-plus />
-            </template>
-          </a-button>
-        </a-space>
-      </div>
-    </template>
-    <!-- table -->
-    <a-table row-key="id"
-             class="table-wrapper-8"
-             ref="tableRef"
-             label-align="left"
-             :loading="loading"
-             :columns="columns"
-             :data="tableRenderData"
-             :pagination="pagination"
-             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
-             @page-size-change="(size) => fetchTableData(1, size)"
-             :bordered="false">
-      <!-- 编码 -->
-      <template #code="{ record }">
-        <a-tag>{{ record.code }}</a-tag>
-      </template>
-      <!-- 状态 -->
-      <template #status="{ record }">
-        <span class="circle" :style="{
-          background: getDictValue(roleStatusKey, record.status, 'color')
-        }" />
-        {{ getDictValue(roleStatusKey, record.status) }}
-      </template>
-      <!-- 操作 -->
-      <template #handle="{ record }">
-        <div class="table-handle-wrapper">
-          <!-- 修改状态 -->
-          <a-popconfirm :content="`确定要${toggleDictValue(roleStatusKey, record.status, 'label')}当前角色吗?`"
-                        position="left"
-                        type="warning"
-                        @ok="toggleRoleStatus(record)">
-            <a-button v-permission="['infra:system-role:delete']"
-                      :disabled="record.code === 'admin'"
-                      :status="toggleDictValue(roleStatusKey, record.status, 'status')"
-                      type="text"
-                      size="mini">
-              {{ toggleDictValue(roleStatusKey, record.status, 'label') }}
-            </a-button>
-          </a-popconfirm>
-          <!-- 分配菜单 -->
-          <a-button v-permission="['infra:system-role:grant-menu']"
-                    :disabled="record.code === 'admin'"
-                    type="text"
-                    size="mini"
-                    @click="emits('openGrant', record)">
-            分配菜单
-          </a-button>
-          <!-- 修改 -->
-          <a-button v-permission="['infra:system-role:update']"
-                    type="text"
-                    size="mini"
-                    @click="emits('openUpdate', record)">
-            修改
-          </a-button>
-          <!-- 删除 -->
-          <a-popconfirm content="确认删除这条记录吗?"
-                        position="left"
-                        type="warning"
-                        @ok="deleteRow(record)">
-            <a-button v-permission="['infra:system-role:delete']"
-                      :disabled="record.code === 'admin'"
-                      type="text"
-                      size="mini"
-                      status="danger">
-              删除
-            </a-button>
-          </a-popconfirm>
+  <div class="main-container" v-if="render">
+    <!-- 查询头 -->
+    <a-card class="general-card table-search-card">
+      <!-- 查询头组件 -->
+      <operator-log-query-header :visible-user="false"
+                                 @submit="(e) => table.fetchTableData(undefined, undefined, e)" />
+    </a-card>
+    <!-- 表格 -->
+    <a-card class="general-card table-card">
+      <template #title>
+        <!-- 左侧操作 -->
+        <div class="table-left-bar-handle">
+          <!-- 标题 -->
+          <div class="table-title">
+            操作日志 <span class="user-info" v-if="user">{{ user.nickname }}({{ user.username }})</span>
+          </div>
         </div>
       </template>
-    </a-table>
-  </a-card>
+      <!-- 表格组件 -->
+      <operator-log-table ref="table"
+                          :visible-user="false"
+                          :current="!user"
+                          :base-params="{userId: user?.id}"
+                          @viewDetail="(e) => view.open(e)" />
+    </a-card>
+    <!-- json 查看器模态框 -->
+    <json-view-modal ref="view" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -128,107 +36,53 @@
 </script>
 
 <script lang="ts" setup>
-  import type { RoleQueryRequest, RoleQueryResponse } from '@/api/user/role';
-  import { reactive, ref, onMounted } from 'vue';
-  import { deleteRole, getRolePage, updateRoleStatus } from '@/api/user/role';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import columns from '../../role/types/table.columns';
-  import { roleStatusKey } from '../../role/types/const';
-  import { usePagination } from '@/types/table';
-  import { useDictStore } from '@/store';
+  import type { UserQueryResponse } from '@/api/user/user';
+  import type { PropType } from 'vue';
+  import { ref, onBeforeMount } from 'vue';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from '../../operator-log/types/const';
+  import OperatorLogQueryHeader from '../../operator-log/components/operator-log-query-header.vue';
+  import OperatorLogTable from '../../operator-log/components/operator-log-table.vue';
+  import JsonViewModal from '@/components/view/json/json-view-modal.vue';
 
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);
-
-  const tableRenderData = ref<RoleQueryResponse[]>([]);
-
-  const pagination = usePagination();
-  const { loading, setLoading } = useLoading();
-  const { toOptions, getDictValue, toggleDictValue, toggleDict } = useDictStore();
-
-  const formModel = reactive<RoleQueryRequest>({
-    id: undefined,
-    name: undefined,
-    code: undefined,
-    status: undefined,
+  const props = defineProps({
+    user: Object as PropType<UserQueryResponse>,
   });
 
-  // 修改状态
-  const toggleRoleStatus = async (record: any) => {
-    try {
-      setLoading(true);
-      const toggleStatus = toggleDict(roleStatusKey, record.status);
-      // 调用修改接口
-      await updateRoleStatus({
-        id: record.id,
-        status: toggleStatus.value as number
-      });
-      Message.success(`${toggleStatus.label}成功`);
-      // 修改行状态
-      record.status = toggleStatus.value;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
+  const cacheStore = useCacheStore();
 
-  // 删除当前行
-  const deleteRow = async ({ id }: {
-    id: number
-  }) => {
-    try {
-      setLoading(true);
-      // 调用删除接口
-      await deleteRole(id);
-      Message.success('删除成功');
-      // 重新加载数据
-      fetchTableData();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
+  const render = ref();
+  const table = ref();
+  const view = ref();
 
-  // 添加后回调
-  const addedCallback = () => {
-    fetchTableData();
-  };
-
-  // 更新后回调
-  const updatedCallback = () => {
-    fetchTableData();
-  };
-
-  defineExpose({
-    addedCallback, updatedCallback
-  });
-
-  // 加载数据
-  const doFetchTableData = async (request: RoleQueryRequest) => {
-    try {
-      setLoading(true);
-      const { data } = await getRolePage(request);
-      tableRenderData.value = data.rows;
-      pagination.total = data.total;
-      pagination.current = request.page;
-      pagination.pageSize = request.limit;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 切换页码
-  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchTableData({ page, limit, ...form });
-  };
-
-  onMounted(() => {
-    fetchTableData();
+  onBeforeMount(async () => {
+    // 加载字典值
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
   });
 
 </script>
 
 <style lang="less" scoped>
+  .main-container {
+    padding-left: 16px;
 
+    .table-search-card {
+      padding-top: 8px;
+      margin-bottom: 0;
+    }
+
+    .table-card {
+      :deep(.arco-card-body) {
+        padding-bottom: 8px;
+      }
+    }
+
+    .user-info {
+      display: inline-block;
+      margin-left: 6px;
+      color: rgb(var(--primary-6));
+    }
+  }
 </style>
diff --git a/orion-ops-ui/src/views/user/info/components/user-info.vue b/orion-ops-ui/src/views/user/info/components/user-base-info.vue
similarity index 71%
rename from orion-ops-ui/src/views/user/info/components/user-info.vue
rename to orion-ops-ui/src/views/user/info/components/user-base-info.vue
index 67378dd7..3c7e65e6 100644
--- a/orion-ops-ui/src/views/user/info/components/user-info.vue
+++ b/orion-ops-ui/src/views/user/info/components/user-base-info.vue
@@ -43,35 +43,46 @@
 
 <script lang="ts">
   export default {
-    name: 'user-info'
+    name: 'user-base-info'
   };
 </script>
 
 <script lang="ts" setup>
-  import type { UserUpdateRequest } from '@/api/user/user';
+  import type { UserUpdateRequest, UserQueryResponse } from '@/api/user/user';
+  import type { PropType } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { computed, ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
   import formRules from '../../user/types/form.rules';
   import { useUserStore } from '@/store';
   import { getCurrentUser, updateCurrentUser } from '@/api/user/mine';
   import { pick } from 'lodash';
   import { Message } from '@arco-design/web-vue';
+  import { updateUser } from '@/api/user/user';
+
+  const props = defineProps({
+    user: Object as PropType<UserQueryResponse>,
+  });
 
   const userStore = useUserStore();
   const { loading, setLoading } = useLoading();
 
+  const nickname = ref('');
   const formRef = ref();
   const formModel = ref<UserUpdateRequest>({});
 
-  // 用户名
-  const nickname = computed(() => userStore.nickname?.substring(0, 1));
-
-  // 保存
+  // 修改用户信息
   const save = async () => {
     setLoading(true);
     try {
-      await updateCurrentUser(formModel.value);
-      userStore.nickname = formModel.value.nickname;
+      if (props.user) {
+        // 更新用户
+        await updateUser(formModel.value);
+      } else {
+        // 更新自己
+        await updateCurrentUser(formModel.value);
+        userStore.nickname = formModel.value.nickname;
+        nickname.value = formModel.value.nickname?.substring(0, 1) as string;
+      }
       Message.success('保存成功');
     } catch (e) {
     } finally {
@@ -83,8 +94,17 @@
   onMounted(async () => {
     setLoading(true);
     try {
-      const { data } = await getCurrentUser();
-      formModel.value = pick(data, 'username', 'nickname', 'mobile', 'email');
+      let u: UserQueryResponse;
+      if (props.user) {
+        // 从参数中获取
+        u = props.user;
+      } else {
+        // 查询个人信息
+        const { data } = await getCurrentUser();
+        u = data;
+      }
+      formModel.value = pick(u, 'id', 'username', 'nickname', 'mobile', 'email');
+      nickname.value = u.nickname?.substring(0, 1);
     } catch (e) {
     } finally {
       setLoading(false);
diff --git a/orion-ops-ui/src/views/user/info/components/user-session.vue b/orion-ops-ui/src/views/user/info/components/user-session.vue
index fdddc68c..8592fcd2 100644
--- a/orion-ops-ui/src/views/user/info/components/user-session.vue
+++ b/orion-ops-ui/src/views/user/info/components/user-session.vue
@@ -1,7 +1,15 @@
 <template>
   <a-spin :loading="loading" class="main-container">
-    <span class="extra-message">所有登录设备的会话列表</span>
-    <a-timeline>
+    <span class="extra-message">
+      <template v-if="user">
+        用户 <span class="user-info">{{ user.nickname }}({{ user.username }})</span> 所有登录设备的会话列表
+      </template>
+      <template v-else>
+        所有登录设备的会话列表
+      </template>
+    </span>
+    <!-- 登录会话时间线 -->
+    <a-timeline v-if="list.length">
       <template v-for="item in list"
                 :key="item.loginTime">
         <a-timeline-item v-if="item.visible">
@@ -19,7 +27,7 @@
               <span>{{ item.address }}</span>
               <span>{{ item.location }}</span>
               <a-tag v-if="item.current" color="arcoblue">当前会话</a-tag>
-              <a-button v-else
+              <a-button v-else-if="hasPermission('infra:system-user:offline-session')"
                         style="font-weight: 600;"
                         type="text"
                         size="mini"
@@ -40,6 +48,15 @@
         </a-timeline-item>
       </template>
     </a-timeline>
+    <!-- 加载中 -->
+    <a-space direction="vertical"
+             v-else-if="loading"
+             :style="{width: '70%'}"
+             size="large">
+      <a-skeleton-line :rows="4" />
+    </a-space>
+    <!-- 空 -->
+    <a-empty v-else />
   </a-spin>
 </template>
 
@@ -50,17 +67,26 @@
 </script>
 
 <script lang="ts" setup>
+  import type { UserQueryResponse } from '@/api/user/user';
   import type { UserSessionQueryResponse } from '@/api/user/user';
+  import type { PropType } from 'vue';
   import useLoading from '@/hooks/loading';
   import { ref, onMounted } from 'vue';
   import { getCurrentUserSessionList, offlineCurrentUserSession } from '@/api/user/mine';
   import { dateFormat } from '@/utils';
   import { isMobile } from '@/utils/is';
   import { Message } from '@arco-design/web-vue';
+  import usePermission from '@/hooks/permission';
+  import { getUserSessionList } from '@/api/user/user';
+
+  const props = defineProps({
+    user: Object as PropType<UserQueryResponse>,
+  });
 
   const list = ref<UserSessionQueryResponse[]>([]);
 
   const { loading, setLoading } = useLoading();
+  const { hasPermission } = usePermission();
 
   // 下线
   const offline = async (item: UserSessionQueryResponse) => {
@@ -81,9 +107,18 @@
   onMounted(async () => {
     try {
       setLoading(true);
-      const { data } = await getCurrentUserSessionList();
-      data.forEach(s => s.visible = true);
-      list.value = data;
+      let sessions: UserSessionQueryResponse[];
+      if (props.user) {
+        // 查询其他用户
+        const { data } = await getUserSessionList(props.user.id);
+        sessions = data;
+      } else {
+        // 查询当前用户
+        const { data } = await getCurrentUserSessionList();
+        sessions = data;
+      }
+      sessions.forEach(s => s.visible = true);
+      list.value = sessions;
     } catch (e) {
     } finally {
       setLoading(false);
@@ -100,11 +135,16 @@
   }
 
   .extra-message {
-    margin-bottom: 38px;
+    margin-bottom: 42px;
     margin-left: -24px;
     display: block;
     color: var(--color-text-3);
     user-select: none;
+
+    .user-info {
+      color: rgb(var(--primary-6));
+      font-weight: 600;
+    }
   }
 
   .icon-container {
diff --git a/orion-ops-ui/src/views/user/info/index.vue b/orion-ops-ui/src/views/user/info/index.vue
index 0766e868..437e5ab8 100644
--- a/orion-ops-ui/src/views/user/info/index.vue
+++ b/orion-ops-ui/src/views/user/info/index.vue
@@ -1,25 +1,41 @@
 <template>
-  <div class="tabs-container">
+  <div class="tabs-container" v-if="render">
     <a-tabs type="rounded"
             size="medium"
             position="left"
             :lazy-load="true"
-            :destroy-on-hide="true">
+            :destroy-on-hide="true"
+            @tab-click="clickTab">
       <!-- 个人信息 -->
-      <a-tab-pane key="1" title="个人信息">
-        <user-info />
+      <a-tab-pane key="mineInfo"
+                  v-if="!user || hasPermission('infra:system-user:update')"
+                  :title="user ? '用户信息' : '个人信息'">
+        <user-base-info :user="user" />
       </a-tab-pane>
       <!-- 登录日志 -->
-      <a-tab-pane key="2" title="登录日志">
-        <login-history />
+      <a-tab-pane key="loginHistory"
+                  v-if="!user || hasPermission('infra:operator-log:query')"
+                  title="登录日志">
+        <login-history :user="user" />
       </a-tab-pane>
       <!-- 登录设备 -->
-      <a-tab-pane key="3" title="登录设备">
-        <user-session />
+      <a-tab-pane key="userSession"
+                  v-if="!user || hasPermission('infra:system-user:query-session')"
+                  title="登录设备">
+        <user-session :user="user" />
       </a-tab-pane>
       <!-- 操作日志 -->
-      <a-tab-pane key="4" title="操作日志">
-        <operator-log-list />
+      <a-tab-pane key="operatorLog"
+                  v-if="!user || hasPermission('infra:operator-log:query')"
+                  title="操作日志">
+        <operator-log-list :user="user" />
+      </a-tab-pane>
+      <!-- 返回 -->
+      <a-tab-pane key="back" v-if="userId">
+        <template #title>
+          <icon-arrow-left style="font-size: 16px" />
+          返回
+        </template>
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -32,10 +48,56 @@
 </script>
 
 <script lang="ts" setup>
-  import UserInfo from './components/user-info.vue';
+  import UserBaseInfo from './components/user-base-info.vue';
   import LoginHistory from './components/login-history.vue';
   import UserSession from './components/user-session.vue';
   import OperatorLogList from './components/operator-log-list.vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { onBeforeMount, ref } from 'vue';
+  import usePermission from '@/hooks/permission';
+  import { useUserStore } from '@/store';
+  import { getUser, UserQueryResponse } from '@/api/user/user';
+
+  const route = useRoute();
+  const router = useRouter();
+  const userStore = useUserStore();
+  const { hasPermission } = usePermission();
+
+  const render = ref<boolean>(false);
+  const userId = ref<number>();
+  const user = ref<UserQueryResponse>();
+
+  // 点击 tab
+  const clickTab = (key: string) => {
+    if (key === 'back') {
+      router.back();
+    }
+  };
+
+  // 初始化
+  const init = async () => {
+    // 获取 userId
+    const queryUserId = route.query.id as string;
+    if (!queryUserId) {
+      return;
+    }
+    const id = parseInt(queryUserId);
+    userId.value = id;
+    // 当前用户 直接返回
+    if (userStore.id === id) {
+      return;
+    }
+    // 查询用户信息
+    const { data } = await getUser(id);
+    user.value = data;
+  };
+
+  onBeforeMount(async () => {
+    // 初始化
+    await init();
+    render.value = true;
+  });
+
 </script>
 
 <style lang="less" scoped>
@@ -48,11 +110,19 @@
     border-radius: 4px;
   }
 
+  :deep(.arco-tabs-nav-tab-list) {
+    width: 88px;
+  }
+
   :deep(.arco-tabs-pane) {
     border-left: 1px var(--color-neutral-3) solid;
   }
 
-  :deep(.arco-tabs-tab-title) {
+  :deep(.arco-tabs-tab) {
     user-select: none;
+    white-space: nowrap;
+    display: flex;
+    justify-content: flex-end;
   }
+
 </style>
diff --git a/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue b/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
index 32b547da..fe008ad7 100644
--- a/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
+++ b/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
@@ -17,6 +17,8 @@
     <a-form-item field="module" label="操作模块" label-col-flex="50px">
       <a-select v-model="formModel.module"
                 :options="toOptions(operatorLogModuleKey)"
+                :allow-search="true"
+                :filter-option="labelFilter"
                 placeholder="请选择操作模块"
                 @change="selectedModule"
                 allow-clear />
@@ -25,6 +27,8 @@
     <a-form-item field="type" label="操作类型" label-col-flex="50px">
       <a-select v-model="formModel.type"
                 :options="typeOptions"
+                :allow-search="true"
+                :filter-option="labelFilter"
                 placeholder="请选择操作类型"
                 allow-clear />
     </a-form-item>
@@ -67,6 +71,7 @@
   import { useDictStore } from '@/store';
   import UserSelector from '@/components/user/role/user-selector.vue';
   import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
+  import { labelFilter } from '@/types/form';
 
   const emits = defineEmits(['submit']);
   const props = defineProps({
@@ -82,7 +87,6 @@
   const timeRange = ref<string[]>([]);
   const typeOptions = ref<SelectOptionData[]>(toOptions(operatorLogTypeKey));
   const formModel = reactive<OperatorLogQueryRequest>({
-    userId: undefined,
     module: undefined,
     type: undefined,
     riskLevel: undefined,
diff --git a/orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue b/orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue
index fe18d778..7a181140 100644
--- a/orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue
+++ b/orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue
@@ -63,13 +63,23 @@
   import { getOperatorLogPage } from '@/api/user/operator-log';
   import { replaceHtmlTag, clearHtmlTag, dateFormat } from '@/utils';
   import { pick } from 'lodash';
-
+  import { getCurrentUserOperatorLog } from '@/api/user/mine';
 
   const emits = defineEmits(['viewDetail']);
   const props = defineProps({
     visibleUser: {
       type: Boolean,
       default: true
+    },
+    current: {
+      type: Boolean,
+      default: false
+    },
+    baseParams: {
+      type: Object,
+      default: () => {
+        return {};
+      }
     }
   });
 
@@ -101,11 +111,20 @@
   const doFetchTableData = async (request: OperatorLogQueryRequest) => {
     try {
       setLoading(true);
-      const { data } = await getOperatorLogPage(request);
-      tableRenderData.value = data.rows.map(s => {
+      let rows;
+      if (props.current) {
+        // 查询当前用户
+        const { data } = await getCurrentUserOperatorLog(request);
+        rows = data;
+      } else {
+        // 查询所有
+        const { data } = await getOperatorLogPage({ ...request, ...props.baseParams });
+        rows = data;
+      }
+      tableRenderData.value = rows.rows.map(s => {
         return { ...s, originLogInfo: clearHtmlTag(s.logInfo) };
       });
-      pagination.total = data.total;
+      pagination.total = rows.total;
       pagination.current = request.page;
       pagination.pageSize = request.limit;
     } catch (e) {
diff --git a/orion-ops-ui/src/views/user/operator-log/index.vue b/orion-ops-ui/src/views/user/operator-log/index.vue
index dddfbdc3..96aa8b76 100644
--- a/orion-ops-ui/src/views/user/operator-log/index.vue
+++ b/orion-ops-ui/src/views/user/operator-log/index.vue
@@ -64,7 +64,6 @@
   onUnmounted(() => {
     cacheStore.reset('users');
   });
-
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/views/user/user/components/user-table.vue b/orion-ops-ui/src/views/user/user/components/user-table.vue
index a0ab8427..02e5d9a3 100644
--- a/orion-ops-ui/src/views/user/user/components/user-table.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -110,6 +110,12 @@
                     @click="emits('openUpdate', record)">
             修改
           </a-button>
+          <!-- 详情 -->
+          <a-button type="text"
+                    size="mini"
+                    @click="openUserDetail(record.id)">
+            详情
+          </a-button>
           <!-- 重置密码 -->
           <a-button type="text"
                     size="mini"
@@ -159,6 +165,7 @@
   import { userStatusKey, UserStatus } from '../types/const';
   import { usePagination } from '@/types/table';
   import { useDictStore, useUserStore } from '@/store';
+  import { useRouter } from 'vue-router';
 
   const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
 
@@ -180,6 +187,7 @@
     lastLoginTime: undefined,
   });
 
+  const router = useRouter();
   const userStore = useUserStore();
 
   // 删除当前行
@@ -219,6 +227,14 @@
     }
   };
 
+  // 打开详情
+  const openUserDetail = (id: number) => {
+    router.push({
+      name: 'userInfo',
+      query: { id }
+    });
+  };
+
   // 添加后回调
   const addedCallback = () => {
     fetchTableData();
diff --git a/orion-ops-ui/src/views/user/user/types/table.columns.ts b/orion-ops-ui/src/views/user/user/types/table.columns.ts
index 0c83d426..7ac2a540 100644
--- a/orion-ops-ui/src/views/user/user/types/table.columns.ts
+++ b/orion-ops-ui/src/views/user/user/types/table.columns.ts
@@ -51,7 +51,7 @@ const columns = [
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 290,
+    width: 330,
     align: 'center',
     fixed: 'right',
   },