feat: 对接在线用户

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;