✨ 在线会话.

orion-ops-ui/src/api/asset/host-connect-log.ts

@@ -55,6 +55,13 @@ export function getHostConnectLogPage(request: HostConnectLogQueryRequest) {
   return axios.post<DataGrid<HostConnectLogQueryResponse>>('/asset/host-connect-log/query', request);
 }
 
+/**
+ * 查询全部主机连接会话
+ */
+export function getHostConnectSessions(request: HostConnectLogQueryRequest) {
+  return axios.post<Array<HostConnectLogQueryResponse>>('/asset/host-connect-log/session', request);
+}
+
 /**
  * 查询用户最近连接的主机
  */

orion-ops-ui/src/router/routes/modules/asset-audit.ts

@@ -11,6 +11,11 @@ const ASSET_AUDIT: AppRouteRecordRaw = {
       path: '/connect-log',
       component: () => import('@/views/asset-audit/connect-log/index.vue'),
     },
+    {
+      name: 'connectSession',
+      path: '/connect-session',
+      component: () => import('@/views/asset-audit/connect-session/index.vue'),
+    },
     {
       name: 'sftpLog',
       path: '/sftp-log',

orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue

@@ -154,7 +154,7 @@
                         position="left"
                         type="warning"
                         @ok="forceOffline(record)">
-            <a-button v-permission="['asset:host-connect-log:management:force-offline']"
+            <a-button v-permission="['asset:host-connect-log:management:force-offline', 'asset:host-connect-session:management:force-offline']"
                       type="text"
                       size="mini"
                       status="danger">

orion-ops-ui/src/views/asset-audit/connect-session/components/connect-session-table.vue

@@ -0,0 +1,180 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <query-header :model="formModel"
+                  label-align="left"
+                  :itemOptions="{ 4: { span: 2 } }"
+                  @submit="fetchTableData"
+                  @reset="fetchTableData"
+                  @keyup.enter="() => fetchTableData()">
+      <!-- 连接用户 -->
+      <a-form-item field="userId" label="连接用户">
+        <user-selector v-model="formModel.userId"
+                       placeholder="请选择用户"
+                       allow-clear />
+      </a-form-item>
+      <!-- 连接主机 -->
+      <a-form-item field="hostId" label="连接主机">
+        <host-selector v-model="formModel.hostId"
+                       placeholder="请选择主机"
+                       allow-clear />
+      </a-form-item>
+      <!-- 主机地址 -->
+      <a-form-item field="hostAddress" label="主机地址">
+        <a-input v-model="formModel.hostAddress" placeholder="请输入主机地址" allow-clear />
+      </a-form-item>
+      <!-- 类型 -->
+      <a-form-item field="type" label="类型">
+        <a-select v-model="formModel.type"
+                  placeholder="请选择类型"
+                  :options="toOptions(connectTypeKey)"
+                  allow-clear />
+      </a-form-item>
+      <!-- 开始时间 -->
+      <a-form-item field="startTimeRange" label="开始时间">
+        <a-range-picker v-model="formModel.startTimeRange"
+                        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                        show-time
+                        format="YYYY-MM-DD HH:mm:ss" />
+      </a-form-item>
+    </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>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             :data="tableRenderData"
+             :pagination="false"
+             :bordered="false">
+      <!-- 连接用户 -->
+      <template #username="{ record }">
+        {{ record.username }}
+      </template>
+      <!-- 连接主机 -->
+      <template #hostName="{ record }">
+        <span class="table-cell-value" :title="record.hostName">
+          {{ record.hostName }}
+        </span>
+        <br>
+        <span class="table-cell-sub-value text-copy"
+              :title="record.hostAddress"
+              @click="copy(record.hostAddress)">
+          {{ record.hostAddress }}
+        </span>
+      </template>
+      <!-- 类型 -->
+      <template #type="{ record }">
+        <a-tag :color="getDictValue(connectTypeKey, record.type, 'color')">
+          {{ getDictValue(connectTypeKey, record.type) }}
+        </a-tag>
+      </template>
+      <!-- 留痕地址 -->
+      <template #address="{ record }">
+        <span class="table-cell-value" :title="record.extra?.location">
+          {{ record.extra?.location }}
+        </span>
+        <br>
+        <span class="table-cell-sub-value text-copy"
+              :title="record.extra?.address"
+              @click="copy(record.extra?.address)">
+          {{ record.extra?.address }}
+        </span>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 下线 -->
+          <a-popconfirm content="确认要强制下线吗?"
+                        position="left"
+                        type="warning"
+                        @ok="forceOffline(record)">
+            <a-button v-permission="['asset:host-connect-log:management:force-offline', 'asset:host-connect-session:management:force-offline']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              下线
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'connectSessionTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { HostConnectLogQueryRequest, HostConnectLogQueryResponse } from '@/api/asset/host-connect-log';
+  import { reactive, ref, onMounted } from 'vue';
+  import { getHostConnectSessions, hostForceOffline } from '@/api/asset/host-connect-log';
+  import { connectTypeKey } from '../types/const';
+  import { useDictStore } from '@/store';
+  import { Message } from '@arco-design/web-vue';
+  import columns from '../types/table.columns';
+  import useLoading from '@/hooks/loading';
+  import { copy } from '@/hooks/copy';
+  import UserSelector from '@/components/user/user/selector/index.vue';
+  import HostSelector from '@/components/asset/host/selector/index.vue';
+
+  const tableRenderData = ref<HostConnectLogQueryResponse[]>([]);
+
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const formModel = reactive<HostConnectLogQueryRequest>({
+    userId: undefined,
+    hostId: undefined,
+    hostAddress: undefined,
+    type: undefined,
+    startTimeRange: undefined,
+  });
+
+  // 加载数据
+  const fetchTableData = async () => {
+    try {
+      setLoading(true);
+      const { data } = await getHostConnectSessions(formModel);
+      tableRenderData.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 强制下线
+  const forceOffline = async (record: HostConnectLogQueryResponse) => {
+    try {
+      setLoading(true);
+      await hostForceOffline({ id: record.id });
+      record.endTime = Date.now();
+      Message.success('已下线');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMounted(() => {
+    fetchTableData();
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>

orion-ops-ui/src/views/asset-audit/connect-session/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <connect-session-table />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'connectSession'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
+  import ConnectSessionTable from './components/connect-session-table.vue';
+
+  const render = ref(false);
+
+  // 加载字典配置
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+  // 重置缓存
+  onUnmounted(() => {
+    const cacheStore = useCacheStore();
+    cacheStore.reset('users', 'hosts');
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/asset-audit/connect-session/types/const.ts

@@ -0,0 +1,5 @@
+// 主机连接类型 字典项
+export const connectTypeKey = 'hostConnectType';
+
+// 加载的字典值
+export const dictKeys = [connectTypeKey];

orion-ops-ui/src/views/asset-audit/connect-session/types/table.columns.ts

@@ -0,0 +1,56 @@
+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: 140,
+    align: 'left',
+    ellipsis: true,
+  }, {
+    title: '连接主机',
+    dataIndex: 'hostName',
+    slotName: 'hostName',
+    align: 'left',
+    ellipsis: true,
+  }, {
+    title: '类型',
+    dataIndex: 'type',
+    slotName: 'type',
+    width: 98,
+    align: 'left',
+  }, {
+    title: '留痕地址',
+    dataIndex: 'address',
+    slotName: 'address',
+    width: 156,
+    align: 'left',
+    ellipsis: true,
+  }, {
+    title: '开始时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'center',
+    width: 188,
+    render: ({ record }) => {
+      return (record.startTime && dateFormat(new Date(record.startTime)));
+    },
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'left',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;

orion-ops-ui/src/views/host/terminal/components/transfer/transfer-drawer.vue

@@ -26,11 +26,11 @@
         <a-space size="small">
           <a-tag v-for="option in toOptions(transferStatusKey)"
                  class="pointer"
-                 :color="option.color"
+                 :color="option.color as string"
                  :title="option.label"
                  :bordered="option.value === filterStatus"
                  :checked="option.value === filterStatus"
-                 @click="checkFilterStatus(option.value)">
+                 @click="checkFilterStatus(option.value as string)">
             <!-- 图标 -->
             <component :is="option.icon" />
             <!-- 数量 -->