From fe4b87927eb05a554ff8b8da0f0444bb47b78f63 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 18 Apr 2024 11:31:05 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=20=E4=BC=98=E5=8C=96=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E6=8E=88=E6=9D=83=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../asset/host-group/tree-selector/index.vue  |  3 +-
 .../asset/host-group/tree/index.vue           | 69 +++++++++++--------
 .../components/asset/host/selector/index.vue  |  2 +-
 .../components/meta/history/modal/index.vue   |  2 +-
 .../meta/tag/multi-selector/index.vue         |  3 +-
 .../src/components/view/editor/index.vue      |  8 +--
 .../asset/grant/components/grant-layout.vue   | 40 +++++++----
 .../grant/components/host-group-grant.vue     | 43 +++++++++++-
 .../grant/components/host-identity-grant.vue  | 19 ++++-
 .../asset/grant/components/host-key-grant.vue | 15 +++-
 .../components/group/host-group-drawer.vue    |  1 +
 .../host-list/components/host-card-list.vue   |  1 -
 .../asset/host-list/components/host-table.vue |  1 -
 .../components/command-snippet-list-group.vue |  2 +-
 .../components/command-snippet-list-item.vue  |  2 +-
 .../components/layout/icon-actions.vue        |  2 +-
 .../new-connection/host-group-view.vue        |  4 +-
 .../components/new-connection/hosts-view.vue  | 10 +--
 .../setting/extra/ssh-setting-form.vue        |  3 +-
 .../shortcut/terminal-shortcut-keys-block.vue |  2 +-
 .../components/setting/terminal-example.vue   |  4 +-
 .../terminal/components/sftp/sftp-view.vue    |  2 +-
 .../host/terminal/components/ssh/ssh-view.vue |  2 +-
 .../user/info/components/login-history.vue    |  2 +-
 .../user/info/components/user-base-info.vue   |  2 +-
 .../user/info/components/user-session.vue     |  6 +-
 26 files changed, 166 insertions(+), 84 deletions(-)

diff --git a/orion-ops-ui/src/components/asset/host-group/tree-selector/index.vue b/orion-ops-ui/src/components/asset/host-group/tree-selector/index.vue
index 79dc2210..f7506c09 100644
--- a/orion-ops-ui/src/components/asset/host-group/tree-selector/index.vue
+++ b/orion-ops-ui/src/components/asset/host-group/tree-selector/index.vue
@@ -5,8 +5,7 @@
                  :loading="loading"
                  placeholder="请选择主机分组"
                  :allow-clear="true"
-                 :allow-search="true">
-  </a-tree-select>
+                 :allow-search="true" />
 </template>
 
 <script lang="ts">
diff --git a/orion-ops-ui/src/components/asset/host-group/tree/index.vue b/orion-ops-ui/src/components/asset/host-group/tree/index.vue
index cb855292..199eb528 100644
--- a/orion-ops-ui/src/components/asset/host-group/tree/index.vue
+++ b/orion-ops-ui/src/components/asset/host-group/tree/index.vue
@@ -2,15 +2,17 @@
   <a-scrollbar>
     <!-- 分组树 -->
     <a-tree v-if="treeData.length"
+            v-model:checked-keys="checkedKeys"
             ref="tree"
             class="tree-container block-tree"
-            v-model:checked-keys="checkedKeys"
+            :class="[ editable ? 'editable-tree' : '' ]"
             :blockNode="true"
-            :draggable="editable"
             :data="treeData"
+            :draggable="editable"
             :checkable="checkable"
             :check-strictly="true"
-            @drop="moveGroup">
+            @drop="moveGroup"
+            @select="(s) => emits('onSelected', s)">
       <!-- 标题 -->
       <template #title="node">
         <!-- 修改名称输入框 -->
@@ -40,8 +42,8 @@
         <span v-else
               class="node-title-wrapper"
               @click="() => emits('selectedNode', node)">
-        {{ node.title }}
-      </span>
+          {{ node.title }}
+        </span>
       </template>
       <!-- 操作图标 -->
       <template #drag-icon="{ node }">
@@ -51,8 +53,8 @@
                 class="tree-icon"
                 title="重命名"
                 @click="rename(node.title, node.key)">
-          <icon-edit />
-        </span>
+            <icon-edit />
+          </span>
           <!-- 删除 -->
           <a-popconfirm content="确认删除这条记录吗?"
                         position="left"
@@ -69,8 +71,8 @@
                 class="tree-icon"
                 title="新增"
                 @click="addChildren(node)">
-          <icon-plus />
-        </span>
+            <icon-plus />
+          </span>
         </a-space>
       </template>
     </a-tree>
@@ -97,13 +99,16 @@
   import { isString } from '@/utils/is';
   import { useCacheStore } from '@/store';
 
-  const props = defineProps<Partial<{
+  const props = withDefaults(defineProps<Partial<{
     loading: boolean;
     editable: boolean;
     checkable: boolean;
     checkedKeys: Array<number>;
-  }>>();
-  const emits = defineEmits(['setLoading', 'selectedNode', 'update:checkedKeys']);
+  }>>(), {
+    editable: false,
+    checkable: false,
+  });
+  const emits = defineEmits(['setLoading', 'onSelected', 'selectedNode', 'update:checkedKeys']);
 
   const cacheStore = useCacheStore();
 
@@ -331,6 +336,29 @@
     width: max-content;
     user-select: none;
     overflow: hidden;
+
+    :deep(.arco-tree-node-title) {
+      padding: 0;
+    }
+
+    .node-title-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+    }
+
+    .tree-icon {
+      font-size: 12px;
+      color: rgb(var(--primary-6));
+    }
+  }
+
+  .editable-tree {
+    :deep(.arco-tree-node-title) {
+      padding: 0 80px 0 0;
+    }
   }
 
   .empty-container {
@@ -342,21 +370,4 @@
     color: var(--color-text-3);
   }
 
-  :deep(.arco-tree-node-title) {
-    padding: 0 80px 0 0;
-  }
-
-  .node-title-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-  }
-
-  .tree-icon {
-    font-size: 12px;
-    color: rgb(var(--primary-6));
-  }
-
 </style>
diff --git a/orion-ops-ui/src/components/asset/host/selector/index.vue b/orion-ops-ui/src/components/asset/host/selector/index.vue
index 9160ba58..32f02271 100644
--- a/orion-ops-ui/src/components/asset/host/selector/index.vue
+++ b/orion-ops-ui/src/components/asset/host/selector/index.vue
@@ -19,7 +19,7 @@
   import useLoading from '@/hooks/loading';
 
   const props = defineProps<Partial<{
-    modelValue: number
+    modelValue: number;
   }>>();
 
   const emits = defineEmits(['update:modelValue']);
diff --git a/orion-ops-ui/src/components/meta/history/modal/index.vue b/orion-ops-ui/src/components/meta/history/modal/index.vue
index f0088c4c..3e9e73d1 100644
--- a/orion-ops-ui/src/components/meta/history/modal/index.vue
+++ b/orion-ops-ui/src/components/meta/history/modal/index.vue
@@ -4,7 +4,7 @@
            :title="title"
            :width="960"
            :top="80"
-           :body-style="{padding: '0 8px'}"
+           :body-style="{ padding: '0 8px' }"
            :align-center="false"
            :draggable="true"
            :mask-closable="false"
diff --git a/orion-ops-ui/src/components/meta/tag/multi-selector/index.vue b/orion-ops-ui/src/components/meta/tag/multi-selector/index.vue
index 25f247d0..ae3f2b11 100644
--- a/orion-ops-ui/src/components/meta/tag/multi-selector/index.vue
+++ b/orion-ops-ui/src/components/meta/tag/multi-selector/index.vue
@@ -39,7 +39,8 @@
     allowCreate: boolean;
     tagColor: Array<string>;
   }>>(), {
-    tagColor: () => []
+    allowCreate: false,
+    tagColor: () => [],
   });
 
   const emits = defineEmits(['update:modelValue', 'onLimited']);
diff --git a/orion-ops-ui/src/components/view/editor/index.vue b/orion-ops-ui/src/components/view/editor/index.vue
index 2736e5cb..579fd84a 100644
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/orion-ops-ui/src/components/view/editor/index.vue
@@ -1,12 +1,8 @@
 <template>
   <div ref="editorContainer"
        class="editor-wrapper"
-       :class="[
-         !!containerClass ? containerClass : ''
-       ]"
-       :style="{
-          ...containerStyle
-       }" />
+       :class="[ !!containerClass ? containerClass : '' ]"
+       :style="{ ...containerStyle }" />
 </template>
 
 <script lang="ts">
diff --git a/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue b/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
index 109a36e4..4ddcf6e3 100644
--- a/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
@@ -27,15 +27,30 @@
             </template>
           </span>
         </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
+        <!-- 操作按钮 -->
+        <a-space>
+          <!-- 全选 -->
+          <a-button @click="emits('selectAll')">
+            全选
+            <template #icon>
+              <icon-select-all />
+            </template>
+          </a-button>
+          <!-- 反选 -->
+          <a-button @click="emits('reverse')">
+            反选
+            <template #icon>
+              <icon-list />
+            </template>
+          </a-button>
+          <!-- 授权 -->
+          <a-button type="primary" @click="doGrant">
+            授权
+            <template #icon>
+              <icon-safe />
+            </template>
+          </a-button>
+        </a-space>
       </div>
       <!-- 主体部分 -->
       <div class="data-main">
@@ -63,7 +78,7 @@
     type: string;
     loading: boolean;
   }>();
-  const emits = defineEmits(['fetch', 'grant']);
+  const emits = defineEmits(['fetch', 'grant', 'selectAll', 'reverse']);
 
   const subjectId = ref();
   const currentSubject = ref();
@@ -115,16 +130,13 @@
 
         .alert-wrapper {
           padding: 4px 16px;
+          margin-right: 12px;
 
           .alert-message {
             display: block;
             height: 22px;
           }
         }
-
-        .grant-button {
-          margin-left: 16px;
-        }
       }
 
       .data-main {
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue
index 2e5a346e..10cf2476 100644
--- a/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue
@@ -2,15 +2,19 @@
   <grant-layout :type="type"
                 :loading="loading"
                 @fetch="fetchAuthorizedData"
-                @grant="doGrant">
+                @grant="doGrant"
+                @select-all="selectAll"
+                @reverse="reverseSelect">
     <!-- 分组 -->
     <host-group-tree v-model:checked-keys="checkedGroups"
+                     ref="tree"
                      outer-class="group-main-tree"
                      :checkable="true"
                      :editable="false"
                      :loading="loading"
                      @set-loading="setLoading"
-                     @selected-node="(e) => selectedGroup = e" />
+                     @selected-node="(e) => selectedGroup = e"
+                     @on-selected="clickGroup" />
     <!-- 主机列表 -->
     <host-list class="group-main-hosts sticky-list" :group="selectedGroup" />
   </grant-layout>
@@ -28,6 +32,8 @@
   import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
+  import { useCacheStore } from '@/store';
+  import { flatNodeKeys } from '@/utils/tree';
   import { Message } from '@arco-design/web-vue';
   import HostGroupTree from '@/components/asset/host-group/tree/index.vue';
   import HostList from './host-list.vue';
@@ -37,12 +43,27 @@
     type: string;
   }>();
 
+  const cacheStore = useCacheStore();
   const { loading, setLoading } = useLoading();
 
+  const tree = ref();
   const authorizedGroups = ref<Array<number>>([]);
   const checkedGroups = ref<Array<number>>([]);
   const selectedGroup = ref<TreeNodeData>({});
 
+  // 点击分组
+  const clickGroup = (groups: Array<number>) => {
+    if (groups && groups.length) {
+      const group = groups[0];
+      const index = checkedGroups.value.findIndex((s) => s === group);
+      if (index === -1) {
+        checkedGroups.value.push(group);
+      } else {
+        checkedGroups.value.splice(index, 1);
+      }
+    }
+  };
+
   // 获取授权列表
   const fetchAuthorizedData = async (request: AssetAuthorizedDataQueryRequest) => {
     setLoading(true);
@@ -74,6 +95,24 @@
     await fetchAuthorizedData(request);
   };
 
+  // 全选
+  const selectAll = async () => {
+    // 从缓存中查询全部分组
+    const groups = await cacheStore.loadHostGroups();
+    const groupKeys: number[] = [];
+    flatNodeKeys(groups, groupKeys);
+    checkedGroups.value = groupKeys;
+  };
+
+  // 反选
+  const reverseSelect = async () => {
+    // 从缓存中查询全部分组
+    const groups = await cacheStore.loadHostGroups();
+    const groupKeys: number[] = [];
+    flatNodeKeys(groups, groupKeys);
+    checkedGroups.value = groupKeys.filter(s => !checkedGroups.value.includes(s));
+  };
+
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue
index 554be344..4240bbbe 100644
--- a/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue
@@ -2,7 +2,9 @@
   <grant-layout :type="type"
                 :loading="loading"
                 @fetch="fetchAuthorizedData"
-                @grant="doGrant">
+                @grant="doGrant"
+                @select-all="selectAll"
+                @reverse="reverseSelect">
     <!-- 主机身份表格 -->
     <a-table row-key="id"
              class="host-identity-main-table"
@@ -102,6 +104,17 @@
     await fetchAuthorizedData(request);
   };
 
+  // 全选
+  const selectAll = () => {
+    selectedKeys.value = hostIdentities.value.map(s => s.id);
+  };
+
+  // 反选
+  const reverseSelect = () => {
+    selectedKeys.value = hostIdentities.value.map(s => s.id)
+      .filter(s => !selectedKeys.value.includes(s));
+  };
+
   // 点击行
   const clickRow = ({ id }: TableData) => {
     const index = selectedKeys.value.indexOf(id);
@@ -112,7 +125,7 @@
     }
   };
 
-  // 初始化数据
+  // 初始化身份数据
   onMounted(async () => {
     setLoading(true);
     try {
@@ -124,7 +137,7 @@
     }
   });
 
-  // 初始化数据
+  // 初始化秘钥数据
   onMounted(async () => {
     // 加载主机秘钥
     hostKeys.value = await cacheStore.loadHostKeys();
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue
index a44209f2..1c5cb355 100644
--- a/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue
@@ -2,7 +2,9 @@
   <grant-layout :type="type"
                 :loading="loading"
                 @fetch="fetchAuthorizedData"
-                @grant="doGrant">
+                @grant="doGrant"
+                @select-all="selectAll"
+                @reverse="reverseSelect">
     <!-- 主机秘钥表格 -->
     <a-table row-key="id"
              class="host-key-main-table"
@@ -78,6 +80,17 @@
     await fetchAuthorizedData(request);
   };
 
+  // 全选
+  const selectAll = () => {
+    selectedKeys.value = hostKeys.value.map(s => s.id);
+  };
+
+  // 反选
+  const reverseSelect = () => {
+    selectedKeys.value = hostKeys.value.map(s => s.id)
+      .filter(s => !selectedKeys.value.includes(s));
+  };
+
   // 点击行
   const clickRow = ({ id }: TableData) => {
     const index = selectedKeys.value.indexOf(id);
diff --git a/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue b/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue
index e85b44bf..03e6bc8d 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue
@@ -42,6 +42,7 @@
           <host-group-tree outer-class="tree-card-main"
                            ref="tree"
                            :loading="loading"
+                           :editable="true"
                            @set-loading="setLoading"
                            @selected-node="selectGroup" />
         </div>
diff --git a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
index 46185381..fc364403 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
@@ -74,7 +74,6 @@
         <!-- 主机标签 -->
         <a-form-item field="tags" label="主机标签">
           <tag-multi-selector v-model="formModel.tags"
-                              :allowCreate="false"
                               :limit="0"
                               type="HOST"
                               :tagColor="tagColor"
diff --git a/orion-ops-ui/src/views/asset/host-list/components/host-table.vue b/orion-ops-ui/src/views/asset/host-list/components/host-table.vue
index 9d8372c2..d439d167 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/host-table.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-table.vue
@@ -29,7 +29,6 @@
       <a-form-item field="tags" label="主机标签">
         <tag-multi-selector v-model="formModel.tags"
                             ref="tagSelector"
-                            :allowCreate="false"
                             :limit="0"
                             type="HOST"
                             :tagColor="tagColor"
diff --git a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-group.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-group.vue
index 0eacbd3d..c7b0cf0f 100644
--- a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-group.vue
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-group.vue
@@ -31,7 +31,7 @@
   import CommandSnippetListItem from './command-snippet-list-item.vue';
 
   defineProps<{
-    snippet: CommandSnippetWrapperResponse
+    snippet: CommandSnippetWrapperResponse;
   }>();
 
   // 计算总量
diff --git a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue
index 5d8d8742..f5e2727a 100644
--- a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue
@@ -121,7 +121,7 @@
   import { openUpdateSnippetKey, removeSnippetKey } from '../types/const';
 
   const props = defineProps<{
-    item: CommandSnippetQueryResponse
+    item: CommandSnippetQueryResponse;
   }>();
 
   const { getAndCheckCurrentSshSession } = useTerminalStore();
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue
index 911bfd9b..0e89bdaa 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue
@@ -10,7 +10,7 @@
                :content="action.content">
       <div v-if="action.visible !== false"
            class="terminal-sidebar-icon-wrapper"
-           :class="[wrapperClass]">
+           :class="[ wrapperClass ]">
         <div class="terminal-sidebar-icon"
              :class="[
                iconClass,
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-group-view.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-group-view.vue
index e3a8cfe2..00c67d0f 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-group-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-group-view.vue
@@ -28,9 +28,9 @@
 </script>
 
 <script lang="ts" setup>
+  import type { HostQueryResponse } from '@/api/asset/host';
+  import type { HostGroupQueryResponse } from '@/api/asset/host-group';
   import { computed } from 'vue';
-  import { HostQueryResponse } from '@/api/asset/host';
-  import { HostGroupQueryResponse } from '@/api/asset/host-group';
   import HostListView from './host-list-view.vue';
 
   const props = defineProps<{
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/hosts-view.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/hosts-view.vue
index d248415e..3b407291 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/hosts-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/hosts-view.vue
@@ -23,18 +23,18 @@
 </script>
 
 <script lang="ts" setup>
+  import type { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
+  import type { HostQueryResponse } from '@/api/asset/host';
   import { computed, onMounted, provide, ref, watch } from 'vue';
   import { NewConnectionType, openSettingModalKey } from '../../types/terminal.const';
-  import { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
-  import { HostQueryResponse } from '@/api/asset/host';
   import HostGroupView from './host-group-view.vue';
   import HostListView from './host-list-view.vue';
   import HostSettingModal from '../setting/extra/host-setting-modal.vue';
 
   const props = defineProps<{
-    hosts: AuthorizedHostQueryResponse,
-    filterValue: string,
-    newConnectionType: string
+    hosts: AuthorizedHostQueryResponse;
+    filterValue: string;
+    newConnectionType: string;
   }>();
 
   const hostList = ref<Array<HostQueryResponse>>([]);
diff --git a/orion-ops-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue b/orion-ops-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue
index bc949a31..668934f5 100644
--- a/orion-ops-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue
@@ -3,8 +3,7 @@
           ref="formRef"
           label-align="right"
           :label-col-props="{ span: 6 }"
-          :wrapper-col-props="{ span: 18 }"
-          :rules="{}">
+          :wrapper-col-props="{ span: 18 }">
     <!-- 验证方式 -->
     <a-form-item field="authType" label="验证方式">
       <a-radio-group type="button"
diff --git a/orion-ops-ui/src/views/host/terminal/components/setting/shortcut/terminal-shortcut-keys-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/shortcut/terminal-shortcut-keys-block.vue
index 68989910..5b6386e0 100644
--- a/orion-ops-ui/src/views/host/terminal/components/setting/shortcut/terminal-shortcut-keys-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/shortcut/terminal-shortcut-keys-block.vue
@@ -80,7 +80,7 @@
   defineProps<{
     title: string;
     type: number;
-    items: Array<TerminalShortcutKeyEditable>
+    items: Array<TerminalShortcutKeyEditable>;
   }>();
 
   const emits = defineEmits(['setEditable', 'clearEditable', 'updateEnabled']);
diff --git a/orion-ops-ui/src/views/host/terminal/components/setting/terminal-example.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-example.vue
index a0fd7241..9444a3f0 100644
--- a/orion-ops-ui/src/views/host/terminal/components/setting/terminal-example.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-example.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="terminal-example" ref="terminal"></div>
+  <div class="terminal-example" ref="terminal"/>
 </template>
 
 <script lang="ts">
@@ -14,7 +14,7 @@
   import { onMounted, onUnmounted, ref } from 'vue';
 
   const props = defineProps<{
-    schema: TerminalThemeSchema | Record<string, any>
+    schema: TerminalThemeSchema | Record<string, any>;
   }>();
 
   const terminal = ref();
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
index 0e195a38..780f9369 100644
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
@@ -79,7 +79,7 @@
   import SftpUploadModal from './sftp-upload-modal.vue';
 
   const props = defineProps<{
-    tab: TerminalTabItem
+    tab: TerminalTabItem;
   }>();
 
   const { preference, sessionManager, transferManager } = useTerminalStore();
diff --git a/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue
index a85534cf..22a80366 100644
--- a/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue
@@ -79,7 +79,7 @@
   import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
 
   const props = defineProps<{
-    tab: TerminalTabItem
+    tab: TerminalTabItem;
   }>();
 
   const { getDictValue } = useDictStore();
diff --git a/orion-ops-ui/src/views/user/info/components/login-history.vue b/orion-ops-ui/src/views/user/info/components/login-history.vue
index aef3d14c..10f1ef85 100644
--- a/orion-ops-ui/src/views/user/info/components/login-history.vue
+++ b/orion-ops-ui/src/views/user/info/components/login-history.vue
@@ -60,8 +60,8 @@
 
 <script lang="ts" setup>
   import type { UserQueryResponse, LoginHistoryQueryResponse } from '@/api/user/user';
-  import useLoading from '@/hooks/loading';
   import { ref, onBeforeMount } from 'vue';
+  import useLoading from '@/hooks/loading';
   import { ResultStatus } from '../types/const';
   import { getCurrentLoginHistory } from '@/api/user/mine';
   import { getLoginHistory } from '@/api/user/user';
diff --git a/orion-ops-ui/src/views/user/info/components/user-base-info.vue b/orion-ops-ui/src/views/user/info/components/user-base-info.vue
index 43d62a50..84a96680 100644
--- a/orion-ops-ui/src/views/user/info/components/user-base-info.vue
+++ b/orion-ops-ui/src/views/user/info/components/user-base-info.vue
@@ -49,8 +49,8 @@
 
 <script lang="ts" setup>
   import type { UserUpdateRequest, UserQueryResponse } from '@/api/user/user';
-  import useLoading from '@/hooks/loading';
   import { ref, onMounted } from 'vue';
+  import useLoading from '@/hooks/loading';
   import formRules from '../../user/types/form.rules';
   import { useUserStore } from '@/store';
   import { getCurrentUser, updateCurrentUser } from '@/api/user/mine';
diff --git a/orion-ops-ui/src/views/user/info/components/user-session.vue b/orion-ops-ui/src/views/user/info/components/user-session.vue
index 37b1bb9d..1aa7f5ee 100644
--- a/orion-ops-ui/src/views/user/info/components/user-session.vue
+++ b/orion-ops-ui/src/views/user/info/components/user-session.vue
@@ -68,14 +68,14 @@
 <script lang="ts" setup>
   import type { UserQueryResponse } from '@/api/user/user';
   import type { UserSessionQueryResponse } from '@/api/user/user';
-  import useLoading from '@/hooks/loading';
   import { ref, onBeforeMount } from 'vue';
+  import { getUserSessionList, offlineUserSession } from '@/api/user/user';
   import { getCurrentUserSessionList, offlineCurrentUserSession } from '@/api/user/mine';
   import { dateFormat } from '@/utils';
   import { isMobile } from '@/utils/is';
-  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
   import usePermission from '@/hooks/permission';
-  import { getUserSessionList, offlineUserSession } from '@/api/user/user';
+  import { Message } from '@arco-design/web-vue';
 
   const props = defineProps<{
     user?: UserQueryResponse;