feat: 用户操作日志.

2023-11-01 18:57:53 +08:00
parent cfcb5cb7a8
commit eafe69ebca
45 changed files with 1255 additions and 157 deletions
--- a/orion-ops-ui/src/api/asset/host-identity.ts
+++ b/orion-ops-ui/src/api/asset/host-identity.ts
@@ -35,11 +35,11 @@ export interface HostIdentityQueryRequest extends Pagination {
 * 主机身份查询响应
 */
 export interface HostIdentityQueryResponse extends TableData {
-  id?: number;
-  name?: string;
-  username?: string;
-  password?: string;
-  keyId?: number;
+  id: number;
+  name: string;
+  username: string;
+  password: string;
+  keyId: number;
  createTime: number;
  updateTime: number;
  creator: string;
--- a/orion-ops-ui/src/api/asset/host-key.ts
+++ b/orion-ops-ui/src/api/asset/host-key.ts
@@ -35,11 +35,11 @@ export interface HostKeyQueryRequest extends Pagination {
 * 主机秘钥查询响应
 */
 export interface HostKeyQueryResponse extends TableData {
-  id?: number;
-  name?: string;
-  publicKey?: string;
-  privateKey?: string;
-  password?: string;
+  id: number;
+  name: string;
+  publicKey: string;
+  privateKey: string;
+  password: string;
  createTime: number;
  updateTime: number;
 }
--- a/orion-ops-ui/src/api/asset/host.ts
+++ b/orion-ops-ui/src/api/asset/host.ts
@@ -38,10 +38,10 @@ export interface HostQueryRequest extends Pagination {
 * 主机查询响应
 */
 export interface HostQueryResponse extends TableData {
-  id?: number;
-  name?: string;
-  code?: string;
-  address?: string;
+  id: number;
+  name: string;
+  code: string;
+  address: string;
  createTime: number;
  updateTime: number;
  creator: string;
--- a/orion-ops-ui/src/api/meta/history-value.ts
+++ b/orion-ops-ui/src/api/meta/history-value.ts
@@ -15,9 +15,9 @@ export interface HistoryValueQueryRequest extends Pagination {
 * 历史归档查询响应
 */
 export interface HistoryValueQueryResponse extends TableData {
-  id?: number;
-  beforeValue?: string;
-  afterValue?: string;
+  id: number;
+  beforeValue: string;
+  afterValue: string;
  createTime: number;
  creator: string;
 }
--- a/orion-ops-ui/src/api/system/dict-key.ts
+++ b/orion-ops-ui/src/api/system/dict-key.ts
@@ -34,11 +34,11 @@ export interface DictKeyQueryRequest extends Pagination {
 * 字典配置项查询响应
 */
 export interface DictKeyQueryResponse extends TableData {
-  id?: number;
-  keyName?: string;
-  valueType?: string;
-  extraSchema?: string;
-  description?: string;
+  id: number;
+  keyName: string;
+  valueType: string;
+  extraSchema: string;
+  description: string;
 }

 /**
--- a/orion-ops-ui/src/api/system/dict-value.ts
+++ b/orion-ops-ui/src/api/system/dict-value.ts
@@ -48,14 +48,14 @@ export interface DictValueQueryRequest extends Pagination {
 * 字典配置值查询响应
 */
 export interface DictValueQueryResponse extends TableData {
-  id?: number;
-  keyId?: number;
-  keyName?: string;
-  keyDescription?: string;
-  value?: string;
-  label?: string;
-  extra?: string;
-  sort?: number;
+  id: number;
+  keyId: number;
+  keyName: string;
+  keyDescription: string;
+  value: string;
+  label: string;
+  extra: string;
+  sort: number;
  createTime: number;
  updateTime: number;
  creator: string;
--- a/orion-ops-ui/src/api/system/menu.ts
+++ b/orion-ops-ui/src/api/system/menu.ts
@@ -37,25 +37,25 @@ export interface MenuQueryRequest {
 * 菜单查询响应
 */
 export interface MenuQueryResponse extends TableData {
-  id?: number;
-  parentId?: number;
-  name?: string;
-  permission?: string;
-  type?: number;
-  sort?: number;
-  visible?: number;
-  status?: number;
-  cache?: number;
-  icon?: string;
-  path?: string;
-  component?: string;
-  children?: Array<MenuQueryResponse>;
+  id: number;
+  parentId: number;
+  name: string;
+  permission: string;
+  type: number;
+  sort: number;
+  visible: number;
+  status: number;
+  cache: number;
+  icon: string;
+  path: string;
+  component: string;
+  children: Array<MenuQueryResponse>;
 }

 /**
 * 查询菜单列表
 */
-export function getMenuList(request?: MenuQueryRequest) {
+export function getMenuList(request: MenuQueryRequest) {
  return axios.post<MenuQueryResponse[]>('/infra/system-menu/list', request);
 }

--- a/orion-ops-ui/src/api/user/mine.ts
+++ b/orion-ops-ui/src/api/user/mine.ts
@@ -1,5 +1,5 @@
 import type { LoginHistoryQueryResponse } from './operator-log';
-import type { UserQueryResponse, UserUpdateRequest } from './user';
+import type { UserQueryResponse, UserSessionQueryResponse, UserSessionOfflineRequest, UserUpdateRequest } from './user';
 import axios from 'axios';

 /**
@@ -38,3 +38,16 @@ export function getCurrentLoginHistory() {
  return axios.get<LoginHistoryQueryResponse[]>('/infra/mine/login-history');
 }

+/**
+ * 获取当前用户会话列表
+ */
+export function getCurrentUserSessionList() {
+  return axios.get<UserSessionQueryResponse[]>('/infra/mine/user-session');
+}
+
+/**
+ * 下线当前用户会话
+ */
+export function offlineCurrentUserSession(request: UserSessionOfflineRequest) {
+  return axios.put('/infra/mine/offline-session', request);
+}
--- a/orion-ops-ui/src/api/user/operator-log.ts
+++ b/orion-ops-ui/src/api/user/operator-log.ts
@@ -30,6 +30,7 @@ export interface OperatorLogQueryResponse {
  module: string;
  type: string;
  logInfo: string;
+  originLogInfo: string;
  extra: string;
  result: number;
  errorMessage: string;
--- a/orion-ops-ui/src/api/user/role.ts
+++ b/orion-ops-ui/src/api/user/role.ts
@@ -40,10 +40,10 @@ export interface RoleQueryRequest extends Pagination {
 * 角色查询响应
 */
 export interface RoleQueryResponse extends TableData {
-  id?: number;
-  name?: string;
-  code?: string;
-  status?: number;
+  id: number;
+  name: string;
+  code: string;
+  status: number;
  createTime: number;
  updateTime: number;
  creator: string;
--- a/orion-ops-ui/src/api/user/user.ts
+++ b/orion-ops-ui/src/api/user/user.ts
@@ -42,13 +42,13 @@ export interface UserQueryRequest extends Pagination {
 * 用户查询响应
 */
 export interface UserQueryResponse extends TableData {
-  id?: number;
-  username?: string;
-  nickname?: string;
-  avatar?: string;
-  mobile?: string;
-  email?: string;
-  status?: number;
+  id: number;
+  username: string;
+  nickname: string;
+  avatar: string;
+  mobile: string;
+  email: string;
+  status: number;
  lastLoginTime?: number;
  createTime: number;
  updateTime: number;
@@ -56,6 +56,26 @@ export interface UserQueryResponse extends TableData {
  updater: string;
 }

+/**
+ * 用户会话查询响应
+ */
+export interface UserSessionQueryResponse {
+  visible: boolean;
+  current: boolean;
+  address: string;
+  location: string;
+  userAgent: string;
+  loginTime: number;
+}
+
+/**
+ * 用户会话下线请求
+ */
+export interface UserSessionOfflineRequest {
+  userId?: number;
+  timestamp: number;
+}
+
 /**
 * 创建用户
 */
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/orion-ops-ui/src/assets/style/layout.less
@@ -122,6 +122,18 @@
  cursor: pointer;
 }

+.mx0 {
+  margin: 0 0;
+}
+
+.mx2 {
+  margin: 0 2px;
+}
+
+.mx4 {
+  margin: 0 4px;
+}
+
 .ml4 {
  margin-left: 4px;
 }
--- a/orion-ops-ui/src/components/user/role/user-selector.vue
+++ b/orion-ops-ui/src/components/user/role/user-selector.vue
@@ -0,0 +1,61 @@
+<template>
+  <a-select v-model:model-value="value as any"
+            :options="optionData()"
+            :allow-search="true"
+            :multiple="multiple"
+            :loading="loading"
+            :disabled="loading"
+            :filter-option="filterOption"
+            placeholder="请选择用户" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'user-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { SelectOptionData } from '@arco-design/web-vue';
+  import { computed } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { RoleStatus } from '@/views/user/role/types/const';
+
+  const props = defineProps({
+    modelValue: [Number, Array] as PropType<number | Array<number>>,
+    loading: Boolean,
+    multiple: Boolean,
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });
+
+  // 选项数据
+  const cacheStore = useCacheStore();
+  const optionData = (): SelectOptionData[] => {
+    return cacheStore.users.map(s => {
+      return {
+        label: `${s.nickname} (${s.username})`,
+        value: s.id,
+      };
+    });
+  };
+
+  // 搜索
+  const filterOption = (searchValue: string, option: { label: string; }) => {
+    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  };
+</script>
+
+<style scoped>
+
+</style>
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
@@ -1,7 +1,7 @@
 <template>
  <a-modal v-model:visible="visible"
           title-align="start"
-           width="60%"
+           :width="width"
           :body-style="{padding: '16px 8px'}"
           :top="80"
           :title="title"
@@ -11,59 +11,57 @@
           :unmount-on-close="true"
           :footer="false"
           @close="handleClose">
-    <a-spin :loading="loading" style="width: 100%; height: calc(100vh - 240px)">
+    <div :style="{width: '100%', 'height': height}">
      <editor v-model="value" readonly />
-    </a-spin>
+    </div>
  </a-modal>
 </template>

 <script lang="ts">
  export default {
-    name: 'dict-key-view-modal'
+    name: 'json-view-modal'
  };
 </script>

 <script lang="ts" setup>
  import { ref } from 'vue';
-  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
-  import { getDictValueList } from '@/api/system/dict-value';
+  import { isString } from '@/utils/is';
+
+  const props = defineProps({
+    width: {
+      type: [String, Number],
+      default: '60%'
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 240px)'
+    }
+  });

  const { visible, setVisible } = useVisible();
-  const { loading, setLoading } = useLoading();

  const title = ref<string>();
-  const value = ref<string>();
+  const value = ref<string | any>();

-  // 打开新增
-  const open = (e: any) => {
-    title.value = e.keyName;
-    value.value = undefined;
-    render(e.keyName);
-    setVisible(true);
-  };

-  // 渲染
-  const render = async (keyName: string) => {
-    try {
-      setLoading(true);
-      // 查看
-      const { data } = await getDictValueList([keyName]);
-      value.value = JSON.stringify(data[keyName], undefined, 4);
-    } catch (e) {
-    } finally {
-      setLoading(false);
+  // 打开
+  const open = (editorValue: string | any, editorTitle = 'json') => {
+    title.value = editorTitle;
+    if (isString(editorValue)) {
+      value.value = editorValue;
+    } else {
+      value.value = JSON.stringify(editorValue, undefined, 4);
    }
+    setVisible(true);
  };

  defineExpose({ open });

  // 关闭
  const handleClose = () => {
-    setLoading(false);
    setVisible(false);
  };
-
 </script>

 <style lang="less" scoped>
--- a/orion-ops-ui/src/router/routes/modules/user.ts
+++ b/orion-ops-ui/src/router/routes/modules/user.ts
@@ -21,6 +21,11 @@ const USER: AppRouteRecordRaw = {
      path: '/user/info',
      component: () => import('@/views/user/info/index.vue'),
    },
+    {
+      name: 'userOperatorLog',
+      path: '/user/operator-log',
+      component: () => import('@/views/user/operator-log/index.vue'),
+    },
  ],
 };

--- a/orion-ops-ui/src/store/modules/cache/index.ts
+++ b/orion-ops-ui/src/store/modules/cache/index.ts
@@ -1,10 +1,11 @@
 import type { CacheState } from './types';
 import { defineStore } from 'pinia';

-export type CacheType = 'menus' | 'roles' | 'hostTags' | 'hostKeys' | 'hostIdentities' | 'dictKeys' | string
+export type CacheType = 'users' | 'menus' | 'roles' | 'hostTags' | 'hostKeys' | 'hostIdentities' | 'dictKeys' | string

 export default defineStore('cache', {
  state: (): CacheState => ({
+    users: [],
    menus: [],
    roles: [],
    hostTags: [],
--- a/orion-ops-ui/src/store/modules/cache/types.ts
+++ b/orion-ops-ui/src/store/modules/cache/types.ts
@@ -1,3 +1,4 @@
+import type { UserQueryResponse } from '@/api/user/user';
 import type { MenuQueryResponse } from '@/api/system/menu';
 import type { RoleQueryResponse } from '@/api/user/role';
 import type { TagQueryResponse } from '@/api/meta/tag';
@@ -6,6 +7,7 @@ import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
 import type { DictKeyQueryResponse } from '@/api/system/dict-key';

 export interface CacheState {
+  users: UserQueryResponse[];
  menus: MenuQueryResponse[];
  roles: RoleQueryResponse[];
  hostTags: TagQueryResponse[];
--- a/orion-ops-ui/src/utils/index.ts
+++ b/orion-ops-ui/src/utils/index.ts
@@ -15,11 +15,11 @@ export const openWindow = (
    url,
    target,
    Object.entries(others)
-    .reduce((preValue: string[], curValue) => {
-      const [key, value] = curValue;
-      return [...preValue, `${key}=${value}`];
-    }, [])
-    .join(',')
+      .reduce((preValue: string[], curValue) => {
+        const [key, value] = curValue;
+        return [...preValue, `${key}=${value}`];
+      }, [])
+      .join(',')
  );
 };

@@ -161,10 +161,10 @@ export function replaceNumber(value: string) {
 */
 export const resetObject = (obj: any, ignore: string[] = []) => {
  Object.keys(obj)
-  .filter(s => !ignore.includes(s))
-  .forEach(k => {
-    obj[k] = undefined;
-  });
+    .filter(s => !ignore.includes(s))
+    .forEach(k => {
+      obj[k] = undefined;
+    });
 };

 /**
@@ -172,11 +172,11 @@ export const resetObject = (obj: any, ignore: string[] = []) => {
 */
 export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
  return Object.keys(obj)
-  .filter(s => !ignore.includes(s))
-  .reduce(function(acc, curr) {
-    const currVal = obj[curr];
-    return acc + ~~(currVal !== undefined && currVal !== null && currVal?.length !== 0 && currVal !== '');
-  }, 0);
+    .filter(s => !ignore.includes(s))
+    .reduce(function(acc, curr) {
+      const currVal = obj[curr];
+      return acc + ~~(currVal !== undefined && currVal !== null && currVal?.length !== 0 && currVal !== '');
+    }, 0);
 };

 /**
@@ -213,4 +213,52 @@ export function getUUID() {
  });
 }

+/**
+ * 清除 xss
+ */
+export function cleanXss(s: string) {
+  return s.replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('\'', '&apos;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('\n', '<br/>')
+    .replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;');
+}
+
+/**
+ * 替换 html 标签
+ */
+export function replaceHtmlTag(message: string) {
+  return cleanXss(message)
+    .replaceAll('&lt;sb 0&gt;', '<span class="span-blue mx0">')
+    .replaceAll('&lt;sb 2&gt;', '<span class="span-blue mx2">')
+    .replaceAll('&lt;sb&gt;', '<span class="span-blue mx4">')
+    .replaceAll('&lt;/sb&gt;', '</span>')
+    .replaceAll('&lt;sr 0&gt;', '<span class="span-red mx0">')
+    .replaceAll('&lt;sr 2&gt;', '<span class="span-red mx2">')
+    .replaceAll('&lt;sr&gt;', '<span class="span-red mx4">')
+    .replaceAll('&lt;/sr&gt;', '</span>')
+    .replaceAll('&lt;b&gt;', '<b>')
+    .replaceAll('&lt;/b&gt;', '</b>');
+}
+
+/**
+ * 清除 html 标签
+ */
+export function clearHtmlTag(message: string) {
+  return cleanXss(message)
+    .replaceAll('&lt;sb 0&gt;', '')
+    .replaceAll('&lt;sb 2&gt;', '')
+    .replaceAll('&lt;sb&gt;', '')
+    .replaceAll('&lt;/sb&gt;', '')
+    .replaceAll('&lt;sr 0&gt;', '')
+    .replaceAll('&lt;sr 2&gt;', '')
+    .replaceAll('&lt;sr&gt;', '')
+    .replaceAll('&lt;/sr&gt;', '')
+    .replaceAll('&lt;b&gt;', '')
+    .replaceAll('&lt;/b&gt;', '')
+    .replaceAll('<br/>', '\n');
+}
+
 export default null;
--- a/orion-ops-ui/src/utils/is.ts
+++ b/orion-ops-ui/src/utils/is.ts
@@ -51,3 +51,10 @@ export function isExist(obj: any): boolean {
 export function isWindow(el: any): el is Window {
  return el === window;
 }
+
+/**
+ * 是否为移动端 ua
+ */
+export function isMobile(userAgent: string) {
+  return /Mobi|Android|iPhone/i.test(userAgent);
+}
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -100,7 +100,7 @@
          <!-- 查看 -->
          <a-button type="text"
                    size="mini"
-                    @click="emits('openView', record)">
+                    @click="openView(record)">
            查看
          </a-button>
          <!-- 修改 -->
@@ -145,6 +145,7 @@
  import { dictValueTypeKey } from '../types/const';
  import useCopy from '@/hooks/copy';
  import { useDictStore } from '@/store';
+  import { getDictValueList } from '@/api/system/dict-value';

  const tableRenderData = ref<DictKeyQueryResponse[]>([]);
  const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
@@ -191,6 +192,19 @@
    addedCallback, updatedCallback
  });

+  // 打开查看视图
+  const openView = async (record: DictKeyQueryResponse) => {
+    try {
+      setLoading(true);
+      // 查看
+      const { data } = await getDictValueList([record.keyName]);
+      emits('openView', data[record.keyName], `${record.keyName} - ${record.description}`);
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
  // 刷新缓存
  const doRefreshCache = async () => {
    try {
--- a/orion-ops-ui/src/views/system/dict-key/index.vue
+++ b/orion-ops-ui/src/views/system/dict-key/index.vue
@@ -4,13 +4,13 @@
    <dict-key-table ref="table"
                    @openAdd="() => modal.openAdd()"
                    @openUpdate="(e) => modal.openUpdate(e)"
-                    @openView="(e) => view.open(e)" />
+                    @openView="(v, t) => view.open(v, t)" />
    <!-- 添加修改模态框 -->
    <dict-key-form-modal ref="modal"
                         @added="modalAddCallback"
                         @updated="modalUpdateCallback" />
    <!-- json 查看器模态框 -->
-    <dict-key-view-modal ref="view" />
+    <json-view-modal ref="view" />
  </div>
 </template>

@@ -24,7 +24,7 @@
  import { ref, onBeforeMount } from 'vue';
  import DictKeyTable from './components/dict-key-table.vue';
  import DictKeyFormModal from './components/dict-key-form-modal.vue';
-  import DictKeyViewModal from './components/dict-key-view-modal.vue';
+  import JsonViewModal from '@/components/view/json/json-view-modal.vue';
  import { useDictStore } from '@/store';
  import { dictKeys } from './types/const';

--- a/orion-ops-ui/src/views/user/info/components/login-history.vue
+++ b/orion-ops-ui/src/views/user/info/components/login-history.vue
@@ -7,16 +7,17 @@
        <!-- 图标 -->
        <template #dot>
          <div class="icon-container">
-            <icon-desktop />
+            <icon-mobile v-if="isMobile(item.userAgent)" />
+            <icon-desktop v-else />
          </div>
        </template>
        <!-- 日志行 -->
        <div class="log-line">
          <!-- 地址行 -->
-          <span class="address-line">
+          <a-space class="address-line">
            <span class="mr8">{{ item.address }}</span>
            <span>{{ item.location }}</span>
-          </span>
+          </a-space>
          <!-- 错误信息行 -->
          <span class="error-line" v-if="item.result === ResultStatus.FAILED">
            登录失败: {{ item.errorMessage }}
@@ -45,14 +46,13 @@
  import type { LoginHistoryQueryResponse } from '@/api/user/operator-log';
  import useLoading from '@/hooks/loading';
  import { ref, onMounted } from 'vue';
-  import { useUserStore } from '@/store';
  import { ResultStatus } from '../types/const';
  import { getCurrentLoginHistory } from '@/api/user/mine';
  import { dateFormat } from '@/utils';
+  import { isMobile } from '@/utils/is';

  const list = ref<LoginHistoryQueryResponse[]>([]);

-  const userStore = useUserStore();
  const { loading, setLoading } = useLoading();

  // 查询操作日志
@@ -78,7 +78,7 @@

  .extra-message {
    margin-bottom: 38px;
-    margin-left: -20px;
+    margin-left: -24px;
    display: block;
    color: var(--color-text-3);
    user-select: none;
@@ -112,8 +112,9 @@

    .address-line {
      color: var(--color-text-1);
-      font-size: 16px;
+      font-size: 15px;
      font-weight: 600;
+      margin-bottom: 2px;
    }

    .time-line, .ua-line, .error-line {
--- 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
@@ -0,0 +1,234 @@
+<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>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'operator-log-list'
+  };
+</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';
+
+  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 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 deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteRole(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  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();
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/views/user/info/components/user-session.vue
+++ b/orion-ops-ui/src/views/user/info/components/user-session.vue
@@ -0,0 +1,150 @@
+<template>
+  <a-spin :loading="loading" class="main-container">
+    <span class="extra-message">所有登录设备的会话列表</span>
+    <a-timeline>
+      <template v-for="item in list"
+                :key="item.loginTime">
+        <a-timeline-item v-if="item.visible">
+          <!-- 图标 -->
+          <template #dot>
+            <div class="icon-container">
+              <icon-mobile v-if="isMobile(item.userAgent)" />
+              <icon-desktop v-else />
+            </div>
+          </template>
+          <!-- 会话行 -->
+          <div class="session-line">
+            <!-- 地址行 -->
+            <a-space class="address-line">
+              <span>{{ item.address }}</span>
+              <span>{{ item.location }}</span>
+              <a-tag v-if="item.current" color="arcoblue">当前会话</a-tag>
+              <a-button v-else
+                        style="font-weight: 600;"
+                        type="text"
+                        size="mini"
+                        status="danger"
+                        @click="offline(item)">
+                下线
+              </a-button>
+            </a-space>
+            <!-- 时间行 -->
+            <span class="time-line">
+            {{ dateFormat(new Date(item.loginTime)) }}
+          </span>
+            <!-- ua -->
+            <span class="ua-line">
+            {{ item.userAgent }}
+          </span>
+          </div>
+        </a-timeline-item>
+      </template>
+    </a-timeline>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'user-session'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { UserSessionQueryResponse } from '@/api/user/user';
+  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';
+
+  const list = ref<UserSessionQueryResponse[]>([]);
+
+  const { loading, setLoading } = useLoading();
+
+  // 下线
+  const offline = async (item: UserSessionQueryResponse) => {
+    try {
+      setLoading(true);
+      await offlineCurrentUserSession({
+        timestamp: item.loginTime
+      });
+      Message.success('操作成功');
+      item.visible = false;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 查询登录会话
+  onMounted(async () => {
+    try {
+      setLoading(true);
+      const { data } = await getCurrentUserSessionList();
+      data.forEach(s => s.visible = true);
+      list.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .main-container {
+    width: 100%;
+    min-height: 200px;
+    padding-left: 48px;
+  }
+
+  .extra-message {
+    margin-bottom: 38px;
+    margin-left: -24px;
+    display: block;
+    color: var(--color-text-3);
+    user-select: none;
+  }
+
+  .icon-container {
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    background: var(--color-fill-4);
+    font-size: 28px;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.arco-timeline-item-content-wrapper) {
+    position: relative;
+    margin-left: 44px;
+    margin-top: -22px;
+  }
+
+  :deep(.arco-timeline-item) {
+    padding-bottom: 36px;
+  }
+
+  .session-line {
+    display: flex;
+    flex-direction: column;
+
+    .address-line {
+      color: var(--color-text-1);
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .time-line, .ua-line {
+      color: var(--color-text-3);
+      font-size: 14px;
+      margin-top: 2px;
+    }
+  }
+
+</style>
--- a/orion-ops-ui/src/views/user/info/index.vue
+++ b/orion-ops-ui/src/views/user/info/index.vue
@@ -15,10 +15,11 @@
      </a-tab-pane>
      <!-- 登录设备 -->
      <a-tab-pane key="3" title="登录设备">
-        <login-history />
+        <user-session />
      </a-tab-pane>
      <!-- 操作日志 -->
      <a-tab-pane key="4" title="操作日志">
+        <operator-log-list />
      </a-tab-pane>
    </a-tabs>
  </div>
@@ -33,6 +34,8 @@
 <script lang="ts" setup>
  import UserInfo from './components/user-info.vue';
  import LoginHistory from './components/login-history.vue';
+  import UserSession from './components/user-session.vue';
+  import OperatorLogList from './components/operator-log-list.vue';
 </script>

 <style lang="less" scoped>
--- 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
@@ -0,0 +1,134 @@
+<template>
+  <a-query-header :model="formModel"
+                  label-align="left"
+                  @submit="submit"
+                  @reset="reset"
+                  @keyup.enter="submit">
+    <!-- 操作用户 -->
+    <a-form-item v-if="visibleUser"
+                 field="userId"
+                 label="操作用户"
+                 label-col-flex="50px">
+      <user-selector v-model="formModel.userId"
+                     placeholder="请选择操作用户"
+                     allow-clear />
+    </a-form-item>
+    <!-- 操作模块 -->
+    <a-form-item field="module" label="操作模块" label-col-flex="50px">
+      <a-select v-model="formModel.module"
+                :options="toOptions(operatorLogModuleKey)"
+                placeholder="请选择操作模块"
+                @change="selectedModule"
+                allow-clear />
+    </a-form-item>
+    <!-- 操作类型 -->
+    <a-form-item field="type" label="操作类型" label-col-flex="50px">
+      <a-select v-model="formModel.type"
+                :options="typeOptions"
+                placeholder="请选择操作类型"
+                allow-clear />
+    </a-form-item>
+    <!-- 风险等级 -->
+    <a-form-item field="riskLevel" label="风险等级" label-col-flex="50px">
+      <a-select v-model="formModel.riskLevel"
+                :options="toOptions(operatorRiskLevelKey)"
+                placeholder="请选择风险等级"
+                allow-clear />
+    </a-form-item>
+    <!-- 执行结果 -->
+    <a-form-item field="result" label="执行结果" label-col-flex="50px">
+      <a-select v-model="formModel.result"
+                :options="toOptions(operatorLogResultKey)"
+                placeholder="请选择执行结果"
+                allow-clear />
+    </a-form-item>
+    <!-- 执行时间 -->
+    <a-form-item field="startTime" label="执行时间" label-col-flex="50px">
+      <a-range-picker v-model="timeRange"
+                      :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                      show-time
+                      format="YYYY-MM-DD HH:mm:ss"
+                      @ok="timeRangePicked" />
+    </a-form-item>
+  </a-query-header>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'operator-log-query-header'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { useDictStore } from '@/store';
+  import UserSelector from '@/components/user/role/user-selector.vue';
+  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
+
+  const emits = defineEmits(['submit']);
+  const props = defineProps({
+    visibleUser: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const { loading, setLoading } = useLoading();
+  const { $state: dictState, toOptions } = useDictStore();
+
+  const timeRange = ref<string[]>([]);
+  const typeOptions = ref<SelectOptionData[]>(toOptions(operatorLogTypeKey));
+  const formModel = reactive<OperatorLogQueryRequest>({
+    userId: undefined,
+    module: undefined,
+    type: undefined,
+    riskLevel: undefined,
+    result: undefined,
+    startTimeStart: undefined,
+    startTimeEnd: undefined,
+  });
+
+  // 选择时间
+  const timeRangePicked = (e: string[]) => {
+    formModel.startTimeStart = e[0];
+    formModel.startTimeEnd = e[1];
+  };
+
+  // 选择类型
+  const selectedModule = (module: string) => {
+    if (!module) {
+      // 不选择则重置 options
+      typeOptions.value = toOptions(operatorLogTypeKey);
+      return;
+    }
+    const moduleArr = module.split(':');
+    const modulePrefix = moduleArr[moduleArr.length - 1] + ':';
+    // 渲染 options
+    typeOptions.value = dictState[operatorLogTypeKey].filter(s => (s.value as string).startsWith(modulePrefix));
+    // 渲染输入框
+    if (formModel.type && !formModel.type.startsWith(modulePrefix)) {
+      formModel.type = undefined;
+    }
+  };
+
+  // 重置
+  const reset = () => {
+    timeRange.value = [];
+    formModel.startTimeStart = undefined;
+    formModel.startTimeEnd = undefined;
+    submit();
+  };
+
+  // 切换页码
+  const submit = () => {
+    emits('submit', { ...formModel });
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- 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
@@ -0,0 +1,139 @@
+<template>
+  <a-table row-key="id"
+           class="table-wrapper-8"
+           ref="tableRef"
+           label-align="left"
+           :loading="loading"
+           :columns="tableColumns"
+           :data="tableRenderData"
+           :pagination="pagination"
+           @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+           @page-size-change="(size) => fetchTableData(1, size)"
+           :bordered="false">
+    <!-- 操作模块 -->
+    <template #module="{ record }">
+      {{ getDictValue(operatorLogModuleKey, record.module) }}
+    </template>
+    <!-- 操作类型 -->
+    <template #type="{ record }">
+      {{ getDictValue(operatorLogTypeKey, record.type) }}
+    </template>
+    <!-- 风险等级 -->
+    <template #riskLevel="{ record }">
+      <a-tag :color="getDictValue(operatorRiskLevelKey, record.riskLevel, 'color')">
+        {{ getDictValue(operatorRiskLevelKey, record.riskLevel) }}
+      </a-tag>
+    </template>
+    <!-- 执行结果 -->
+    <template #result="{ record }">
+      <a-tag :color="getDictValue(operatorLogResultKey, record.result, 'color')">
+        {{ getDictValue(operatorLogResultKey, record.result) }}
+      </a-tag>
+    </template>
+    <!-- 操作日志 -->
+    <template #originLogInfo="{ record }">
+      <span v-html="replaceHtmlTag(record.logInfo)" />
+    </template>
+    <!-- 操作 -->
+    <template #handle="{ record }">
+      <div class="table-handle-wrapper">
+        <!-- 详情 -->
+        <a-button type="text" size="mini" @click="viewDetail(record)">
+          详情
+        </a-button>
+      </div>
+    </template>
+  </a-table>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'operator-log-table'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { OperatorLogQueryRequest, OperatorLogQueryResponse } from '@/api/user/operator-log';
+  import { ref, onMounted } from 'vue';
+  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
+  import columns from '../types/table.columns';
+  import useLoading from '@/hooks/loading';
+  import { usePagination } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import { getOperatorLogPage } from '@/api/user/operator-log';
+  import { replaceHtmlTag, clearHtmlTag, dateFormat } from '@/utils';
+  import { pick } from 'lodash';
+
+
+  const emits = defineEmits(['viewDetail']);
+  const props = defineProps({
+    visibleUser: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const tableColumns = ref();
+  const tableRenderData = ref<OperatorLogQueryResponse[]>([]);
+
+  const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { getDictValue } = useDictStore();
+
+  // 查看详情
+  const viewDetail = (record: OperatorLogQueryResponse) => {
+    try {
+      const detail = Object.assign({} as Record<string, any>,
+        pick(record, 'traceId', 'address', 'location',
+          'userAgent', 'errorMessage'));
+      detail.duration = `${record.duration} ms`;
+      detail.startTime = dateFormat(new Date(record.startTime));
+      detail.endTime = dateFormat(new Date(record.endTime));
+      detail.extra = JSON.parse(record?.extra);
+      detail.returnValue = JSON.parse(record?.returnValue);
+      emits('viewDetail', detail);
+    } catch (e) {
+      emits('viewDetail', record);
+    }
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: OperatorLogQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getOperatorLogPage(request);
+      tableRenderData.value = data.rows.map(s => {
+        return { ...s, originLogInfo: clearHtmlTag(s.logInfo) };
+      });
+      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 = {}) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  onMounted(() => {
+    if (props.visibleUser) {
+      tableColumns.value = columns;
+    } else {
+      tableColumns.value = columns.filter(s => s.dataIndex !== 'username');
+    }
+    fetchTableData();
+  });
+
+  defineExpose({
+    fetchTableData
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/views/user/operator-log/index.vue
+++ b/orion-ops-ui/src/views/user/operator-log/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 查询头 -->
+    <a-card class="general-card table-search-card">
+      <!-- 查询头组件 -->
+      <operator-log-query-header @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">
+            操作日志
+          </div>
+        </div>
+      </template>
+      <!-- 表格组件 -->
+      <operator-log-table ref="table" @viewDetail="(e) => view.open(e)" />
+    </a-card>
+    <!-- json 查看器模态框 -->
+    <json-view-modal ref="view" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'userOperatorLog'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
+  import { getUserList } from '@/api/user/user';
+  import OperatorLogQueryHeader from './components/operator-log-query-header.vue';
+  import OperatorLogTable from './components/operator-log-table.vue';
+  import JsonViewModal from '@/components/view/json/json-view-modal.vue';
+
+  const cacheStore = useCacheStore();
+
+  const render = ref();
+  const table = ref();
+  const view = ref();
+
+  // 加载全部用户列表
+  const fetchUserList = async () => {
+    const { data } = await getUserList();
+    cacheStore.set('users', data);
+  };
+
+  onBeforeMount(async () => {
+    // 加载字典值
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    // 加载用户列表
+    await fetchUserList();
+    render.value = true;
+  });
+
+  // 卸载时清除 cache
+  onUnmounted(() => {
+    cacheStore.reset('users');
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/orion-ops-ui/src/views/user/operator-log/types/const.ts
+++ b/orion-ops-ui/src/views/user/operator-log/types/const.ts
@@ -0,0 +1,24 @@
+// 结果状态
+export const ResultStatus = {
+  // 失败
+  FAILED: 0,
+  // 成功
+  SUCCESS: 1,
+};
+
+// 操作日志模块 字典项
+export const operatorLogModuleKey = 'operatorLogModule';
+
+// 操作日志类型 字典项
+export const operatorLogTypeKey = 'operatorLogType';
+
+// 操作风险等级 字典项
+export const operatorRiskLevelKey = 'operatorRiskLevel';
+
+// 操作日志结果 字典项
+export const operatorLogResultKey = 'operatorLogResult';
+
+// 加载的字典值
+export const dictKeys = [operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey];
+
+
--- a/orion-ops-ui/src/views/user/operator-log/types/table.columns.ts
+++ b/orion-ops-ui/src/views/user/operator-log/types/table.columns.ts
@@ -0,0 +1,69 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '操作用户',
+    dataIndex: 'username',
+    slotName: 'username',
+    width: 120,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '操作模块',
+    dataIndex: 'module',
+    slotName: 'module',
+    width: 120,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '操作类型',
+    dataIndex: 'type',
+    slotName: 'type',
+    width: 150,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '风险等级',
+    dataIndex: 'riskLevel',
+    slotName: 'riskLevel',
+    width: 90,
+    align: 'center',
+  }, {
+    title: '执行结果',
+    dataIndex: 'result',
+    slotName: 'result',
+    width: 90,
+    align: 'center',
+  }, {
+    title: '操作日志',
+    dataIndex: 'originLogInfo',
+    slotName: 'originLogInfo',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.createTime));
+    },
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 90,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;