feat: 对接在线用户

src/router/elegant/imports.ts

@@ -24,6 +24,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   home: () => import("@/views/home/index.vue"),
   monitor_cache: () => import("@/views/monitor/cache/index.vue"),
   "monitor_login-infor": () => import("@/views/monitor/login-infor/index.vue"),
+  monitor_online: () => import("@/views/monitor/online/index.vue"),
   "monitor_oper-log": () => import("@/views/monitor/oper-log/index.vue"),
   system_client: () => import("@/views/system/client/index.vue"),
   system_config: () => import("@/views/system/config/index.vue"),

src/router/elegant/routes.ts

@@ -102,6 +102,15 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.monitor_login-infor'
         }
       },
+      {
+        name: 'monitor_online',
+        path: '/monitor/online',
+        component: 'view.monitor_online',
+        meta: {
+          title: 'monitor_online',
+          i18nKey: 'route.monitor_online'
+        }
+      },
       {
         name: 'monitor_oper-log',
         path: '/monitor/oper-log',

src/router/elegant/transform.ts

@@ -172,6 +172,7 @@ const routeMap: RouteMap = {
   "monitor": "/monitor",
   "monitor_cache": "/monitor/cache",
   "monitor_login-infor": "/monitor/login-infor",
+  "monitor_online": "/monitor/online",
   "monitor_oper-log": "/monitor/oper-log",
   "social-callback": "/social-callback",
   "system": "/system",

src/service/api/monitor/online.ts

@@ -0,0 +1,22 @@
+import { request } from '@/service/request';
+
+/** 获取在线用户列表 */
+export function fetchGetOnlineUserList(params?: Api.Monitor.OnlineUserSearchParams) {
+  return request<Api.Monitor.OnlineUserList>({
+    url: '/monitor/online/list',
+    method: 'get',
+    params
+  });
+}
+
+/**
+ * 强制下线
+ *
+ * @param tokenId - 令牌ID
+ */
+export function fetchForceLogout(tokenId: string) {
+  return request<boolean>({
+    url: `/monitor/online/${tokenId}`,
+    method: 'delete'
+  });
+}

src/typings/api/monitor.api.d.ts

@@ -134,5 +134,34 @@ declare namespace Api {
         value: number;
       }[];
     }>;
+
+    type OnlineUser = Common.CommonRecord<{
+      /** 用户账号 */
+      userName: string;
+      /** 登录IP地址 */
+      ipaddr: string;
+      /** 登录地点 */
+      loginLocation: string;
+      /** 浏览器类型 */
+      browser: string;
+      /** 操作系统 */
+      os: string;
+      /** 所在部门 */
+      deptName: string;
+      /** 设备类型 */
+      deviceType: string;
+      /** 登录时间 */
+      loginTime: string;
+      /** 令牌ID */
+      tokenId: string;
+    }>;
+
+    /** online user list */
+    type OnlineUserList = Api.Common.PaginatingQueryRecord<OnlineUser>;
+
+    /** online user search params */
+    type OnlineUserSearchParams = CommonType.RecordNullable<
+      Pick<Api.Monitor.OnlineUser, 'userName' | 'ipaddr'> & Api.Common.CommonSearchParams
+    >;
   }
 }

src/typings/elegant-router.d.ts

@@ -26,6 +26,7 @@ declare module "@elegant-router/types" {
     "monitor": "/monitor";
     "monitor_cache": "/monitor/cache";
     "monitor_login-infor": "/monitor/login-infor";
+    "monitor_online": "/monitor/online";
     "monitor_oper-log": "/monitor/oper-log";
     "social-callback": "/social-callback";
     "system": "/system";
@@ -110,6 +111,7 @@ declare module "@elegant-router/types" {
     | "home"
     | "monitor_cache"
     | "monitor_login-infor"
+    | "monitor_online"
     | "monitor_oper-log"
     | "system_client"
     | "system_config"

src/views/monitor/login-infor/index.vue

@@ -91,7 +91,7 @@ const {
       minWidth: 120,
       render: row => {
         return (
-          <div class="flex items-center gap-2">
+          <div class="flex items-center justify-center gap-2">
             <SvgIcon icon={getBrowserIcon(row.browser)} />
             {row.browser}
           </div>
@@ -109,7 +109,7 @@ const {
       render: row => {
         const osName = row.os?.split(' or ')[0] ?? '';
         return (
-          <div class="flex items-center gap-2">
+          <div class="flex items-center justify-center gap-2">
             <SvgIcon icon={getOsIcon(osName)} />
             {osName}
           </div>

src/views/monitor/login-infor/modules/login-infor-search.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useNaiveForm } from '@/hooks/common/form';
-import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 
 defineOptions({
@@ -18,8 +17,6 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
 
 const model = defineModel<Api.Monitor.LoginInforSearchParams>('model', { required: true });
 
-useDict('sys_common_status');
-
 async function reset() {
   await restoreValidation();
   emit('reset');

src/views/monitor/login-infor/modules/login-infor-view-drawer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useDict } from '@/hooks/business/dict';
 import { getBrowserIcon, getOsIcon } from '@/utils/format';
 import { $t } from '@/locales';
 
@@ -18,9 +17,6 @@ const visible = defineModel<boolean>('visible', {
   default: false
 });
 
-useDict('sys_device_type');
-useDict('sys_common_status');
-
 const title = '登录信息详情';
 
 function closeDrawer() {

src/views/monitor/online/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="tsx">
+import dayjs from 'dayjs';
+import { fetchForceLogout, fetchGetOnlineUserList } from '@/service/api/monitor/online';
+import { useAppStore } from '@/store/modules/app';
+import { useAuth } from '@/hooks/business/auth';
+import { useTable } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import { getBrowserIcon, getOsIcon } from '@/utils/format';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import DictTag from '@/components/custom/dict-tag.vue';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import { $t } from '@/locales';
+import OnlineSearch from './modules/online-search.vue';
+
+defineOptions({
+  name: 'OnlineList'
+});
+
+const appStore = useAppStore();
+const { hasAuth } = useAuth();
+
+useDict('sys_common_status');
+useDict('sys_device_type');
+
+const { columns, columnChecks, data, getData, loading, searchParams, resetSearchParams } = useTable({
+  apiFn: fetchGetOnlineUserList,
+  apiParams: {
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    userName: null,
+    ipaddr: null
+  },
+  columns: () => [
+    {
+      key: 'userName',
+      title: '用户账号',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'deviceType',
+      title: '设备类型',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return <DictTag size="small" value={row.deviceType} dict-code="sys_device_type" />;
+      }
+    },
+    {
+      key: 'ipaddr',
+      title: '登录IP地址',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'loginLocation',
+      title: '登录地点',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'browser',
+      title: '浏览器类型',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return (
+          <div class="flex items-center justify-center gap-2">
+            <SvgIcon icon={getBrowserIcon(row.browser)} />
+            {row.browser}
+          </div>
+        );
+      }
+    },
+    {
+      key: 'os',
+      title: '操作系统',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120,
+      render: row => {
+        const osName = row.os?.split(' or ')[0] ?? '';
+        return (
+          <div class="flex items-center justify-center gap-2">
+            <SvgIcon icon={getOsIcon(osName)} />
+            {osName}
+          </div>
+        );
+      }
+    },
+    {
+      key: 'loginTime',
+      title: '登录时间',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120,
+      render: row => {
+        return dayjs(row.loginTime).format('YYYY-MM-DD HH:mm:ss');
+      }
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => {
+        const forceLogoutBtn = () => {
+          if (!hasAuth('monitor:online:forceLogout')) {
+            return null;
+          }
+          return (
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:person-remove-outline-rounded"
+              class="text-20px"
+              tooltipContent="强制下线"
+              popconfirmContent="确认强制下线吗？"
+              onPositiveClick={() => handleForceLogout(row.tokenId)}
+            />
+          );
+        };
+        return <div>{forceLogoutBtn()}</div>;
+      }
+    }
+  ]
+});
+
+async function handleForceLogout(tokenId: string) {
+  // request
+  const { error } = await fetchForceLogout(tokenId);
+  if (error) return;
+  getData();
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <OnlineSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <NCard title="在线用户列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :loading="loading"
+          :show-add="false"
+          :show-delete="false"
+          :show-export="false"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.tokenId"
+        class="sm:h-full"
+      />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/monitor/online/modules/online-search.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LoginInforSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.Monitor.OnlineUserSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:6" label="IP地址" path="ipaddr" class="pr-24px">
+              <NInput v-model:value="model.ipaddr" placeholder="请输入IP地址" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="用户账号" path="userName" class="pr-24px">
+              <NInput v-model:value="model.userName" placeholder="请输入用户账号" />
+            </NFormItemGi>
+            <NFormItemGi span="24" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>

src/views/monitor/oper-log/modules/oper-log-search.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { useNaiveForm } from '@/hooks/common/form';
-import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 
 defineOptions({
   name: 'OperLogSearch'
 });
 
-useDict('sys_oper_type');
-useDict('sys_common_status');
-
 interface Emits {
   (e: 'reset'): void;
   (e: 'search'): void;