feat: 用户操作日志.

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 {

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>

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>

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>