feat(projects): 新增在线用户页面

src/locales/langs/en-us.ts

@@ -284,6 +284,7 @@ const local: App.I18n.Schema = {
     monitor_logininfor: 'Login Log',
     monitor_operlog: 'Operate Log',
     monitor_cache: 'Cache Monitor',
+    monitor_online: 'Online User',
     'user-center': 'User Center',
     'social-callback': 'Social Callback',
     demo: 'Demo',

src/locales/langs/zh-cn.ts

@@ -281,6 +281,7 @@ const local: App.I18n.Schema = {
     monitor_cache: '缓存监控',
     monitor_logininfor: '登录日志',
     monitor_operlog: '操作日志',
+    monitor_online: '在线用户',
     'social-callback': '单点登录回调',
     'user-center': '个人中心',
     demo: '测试',

src/router/elegant/imports.ts

@@ -27,6 +27,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   home: () => import("@/views/home/index.vue"),
   monitor_cache: () => import("@/views/monitor/cache/index.vue"),
   monitor_logininfor: () => import("@/views/monitor/logininfor/index.vue"),
+  monitor_online: () => import("@/views/monitor/online/index.vue"),
   monitor_operlog: () => import("@/views/monitor/operlog/index.vue"),
   system_client: () => import("@/views/system/client/index.vue"),
   system_config: () => import("@/views/system/config/index.vue"),

src/router/elegant/routes.ts

@@ -131,6 +131,15 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.monitor_logininfor'
         }
       },
+      {
+        name: 'monitor_online',
+        path: '/monitor/online',
+        component: 'view.monitor_online',
+        meta: {
+          title: 'monitor_online',
+          i18nKey: 'route.monitor_online'
+        }
+      },
       {
         name: 'monitor_operlog',
         path: '/monitor/operlog',

src/router/elegant/transform.ts

@@ -179,6 +179,7 @@ const routeMap: RouteMap = {
   "monitor": "/monitor",
   "monitor_cache": "/monitor/cache",
   "monitor_logininfor": "/monitor/logininfor",
+  "monitor_online": "/monitor/online",
   "monitor_operlog": "/monitor/operlog",
   "social-callback": "/social-callback",
   "system": "/system",

src/typings/elegant-router.d.ts

@@ -33,6 +33,7 @@ declare module "@elegant-router/types" {
     "monitor": "/monitor";
     "monitor_cache": "/monitor/cache";
     "monitor_logininfor": "/monitor/logininfor";
+    "monitor_online": "/monitor/online";
     "monitor_operlog": "/monitor/operlog";
     "social-callback": "/social-callback";
     "system": "/system";
@@ -126,6 +127,7 @@ declare module "@elegant-router/types" {
     | "home"
     | "monitor_cache"
     | "monitor_logininfor"
+    | "monitor_online"
     | "monitor_operlog"
     | "system_client"
     | "system_config"

src/views/monitor/online/index.vue

@@ -0,0 +1,172 @@
+<script setup lang="tsx">
+import { ref } from 'vue';
+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 { defaultTransform, useNaivePaginatedTable } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import { getBrowserIcon, getOsIcon } from '@/utils/icon-tag-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 searchParams = ref<Api.Monitor.OnlineUserSearchParams>({
+  userName: null,
+  ipaddr: null,
+  params: {}
+});
+
+const { columns, columnChecks, data, getData, loading, scrollX } = useNaivePaginatedTable({
+  api: () => fetchGetOnlineUserList(searchParams.value),
+  transform: response => defaultTransform(response),
+  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:delete-outline"
+              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" @search="getData" />
+    <NCard title="在线用户列表" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+      <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="scrollX"
+        :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,74 @@
+<script setup lang="ts">
+import { toRaw } from 'vue';
+import { jsonClone } from '@sa/utils';
+import { useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LoginInforSearch'
+});
+
+interface Emits {
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.Monitor.OnlineUserSearchParams>('model', { required: true });
+
+const defaultModel = jsonClone(toRaw(model.value));
+
+function resetModel() {
+  Object.assign(model.value, defaultModel);
+}
+
+async function reset() {
+  await restoreValidation();
+  resetModel();
+  emit('search');
+}
+
+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:8" label="IP地址" path="ipaddr" class="pr-24px">
+              <NInput v-model:value="model.ipaddr" placeholder="请输入IP地址" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:8" label="用户账号" path="userName" class="pr-24px">
+              <NInput v-model:value="model.userName" placeholder="请输入用户账号" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:24 m:8" 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>