From d78d2a205345c96183ff5af709d54081cf6f1968 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Tue, 9 Jan 2024 23:53:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E6=9E=84=E5=BB=BA.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../orion-vue-views-components-table.vue.vm   |  4 +-
 .../src/components/app/navbar/index.vue       |  2 +-
 .../components/app/setting/form-wrapper.vue   |  2 +-
 orion-ops-ui/src/components/index.ts          |  4 +-
 .../view/card-list/components/card-header.vue |  2 +-
 .../view/card-list/components/card-item.vue   |  2 +-
 .../src/components/view/editor/core.ts        |  2 +-
 .../src/components/view/editor/index.vue      | 51 +++++++++++++++++--
 .../json-editor-modal.vue}                    |  6 +--
 orion-ops-ui/src/types/form.ts                |  8 +--
 .../asset/grant/components/router-roles.vue   |  2 +-
 .../asset/grant/components/router-users.vue   |  2 +-
 .../components/host-identity-form-modal.vue   |  1 -
 .../components/host-identity-table.vue        |  4 +-
 .../components/host-key-form-drawer.vue       |  1 -
 .../host-key/components/host-key-table.vue    |  4 +-
 .../components/config/host-config-drawer.vue  |  5 +-
 .../components/config/ssh/ssh-config-form.vue | 10 ++--
 .../asset/host-list/components/host-table.vue |  4 +-
 .../src/views/asset/host-list/types/const.ts  |  2 +-
 .../workplace/components/popular-content.vue  |  2 +-
 .../components/connect-log-table.vue          |  4 +-
 .../new-connection/host-list-view.vue         |  2 +-
 .../new-connection/new-connection-view.vue    |  7 +--
 .../new-connection/ssh-extra-modal.vue        |  3 +-
 .../view-setting/terminal-display-block.vue   |  3 +-
 .../view-setting/terminal-theme-block.vue     | 13 ++---
 .../components/dict-key-form-modal.vue        |  2 +-
 .../dict-key/components/dict-key-table.vue    |  4 +-
 .../src/views/system/dict-key/index.vue       |  4 +-
 .../src/views/system/dict-key/types/const.ts  |  4 +-
 .../components/dict-value-table.vue           |  4 +-
 .../info/components/operator-log-list.vue     |  4 +-
 orion-ops-ui/src/views/user/info/index.vue    |  2 +-
 .../components/operator-log-query-header.vue  |  6 +--
 .../src/views/user/operator-log/index.vue     |  4 +-
 .../views/user/role/components/role-table.vue |  4 +-
 .../views/user/user/components/user-table.vue |  4 +-
 38 files changed, 121 insertions(+), 73 deletions(-)
 rename orion-ops-ui/src/components/view/{json/json-view-modal.vue => json-editor/json-editor-modal.vue} (94%)

diff --git a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-table.vue.vm b/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-table.vue.vm
index 0a87a4f9..bf21b10a 100644
--- a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-table.vue.vm
+++ b/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-table.vue.vm
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -32,7 +32,7 @@
         #end
       </a-form-item>
       #end
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/components/app/navbar/index.vue b/orion-ops-ui/src/components/app/navbar/index.vue
index a31ec8f0..9db68746 100644
--- a/orion-ops-ui/src/components/app/navbar/index.vue
+++ b/orion-ops-ui/src/components/app/navbar/index.vue
@@ -47,7 +47,7 @@
             </template>
           </a-button>
         </a-tooltip>
-        <a-dropdown trigger="click" @select="changeLocale">
+        <a-dropdown trigger="click" @select="s => changeLocale(s as string)">
           <div ref="localeRef" class="trigger-btn" />
           <template #content>
             <a-doption v-for="item in locales"
diff --git a/orion-ops-ui/src/components/app/setting/form-wrapper.vue b/orion-ops-ui/src/components/app/setting/form-wrapper.vue
index 717f5b7e..79d37edf 100644
--- a/orion-ops-ui/src/components/app/setting/form-wrapper.vue
+++ b/orion-ops-ui/src/components/app/setting/form-wrapper.vue
@@ -10,7 +10,7 @@
   <!-- 开关 -->
   <a-switch v-else-if="type === 'switch'"
             type="round"
-            :default-checked="defaultValue"
+            :default-checked="defaultValue as boolean"
             size="small"
             @change="handleChange" />
   <!-- 单选按钮 -->
diff --git a/orion-ops-ui/src/components/index.ts b/orion-ops-ui/src/components/index.ts
index b23143c5..3ddb06ba 100644
--- a/orion-ops-ui/src/components/index.ts
+++ b/orion-ops-ui/src/components/index.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import { use } from 'echarts/core';
-import AQueryHeader from '@dangojs/a-query-header';
+import QueryHeader from '@dangojs/a-query-header';
 import { CanvasRenderer } from 'echarts/renderers';
 import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
 import {
@@ -33,7 +33,7 @@ export default {
   install(Vue: App) {
     Vue.component('chart', Chart);
     Vue.component('breadcrumb', Breadcrumb);
-    Vue.component('a-query-header', AQueryHeader);
+    Vue.component('query-header', QueryHeader);
     Vue.component('card-list', CardList);
     Vue.component('editor', Editor);
     Vue.component('tab-router', TabRouter);
diff --git a/orion-ops-ui/src/components/view/card-list/components/card-header.vue b/orion-ops-ui/src/components/view/card-list/components/card-header.vue
index 7f2a51db..7afee800 100644
--- a/orion-ops-ui/src/components/view/card-list/components/card-header.vue
+++ b/orion-ops-ui/src/components/view/card-list/components/card-header.vue
@@ -12,7 +12,7 @@
                         size="mini"
                         v-model:current="(pagination as PaginationProps).current"
                         v-model:page-size="(pagination as PaginationProps).pageSize"
-                        v-bind="pagination"
+                        v-bind="pagination as any"
                         :auto-adjust="false"
                         @change="page => bubblesEmitter(HeaderEmitter.PAGE_CHANGE, page, (pagination as PaginationProps).pageSize)"
                         @page-size-change="limit => bubblesEmitter(HeaderEmitter.PAGE_CHANGE, 1, limit)" />
diff --git a/orion-ops-ui/src/components/view/card-list/components/card-item.vue b/orion-ops-ui/src/components/view/card-list/components/card-item.vue
index dc5b4a0d..88831318 100644
--- a/orion-ops-ui/src/components/view/card-list/components/card-item.vue
+++ b/orion-ops-ui/src/components/view/card-list/components/card-item.vue
@@ -49,7 +49,7 @@
                      'field-value',
                      field.ellipsis ? 'field-value-ellipsis' : ''
                    ]">
-              <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
+              <slot :name="field.slotName" :record="item" :index="index" :key="item[key as string]">
                 <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
                   <span v-if="field.render" v-html="field.render({ record: item, index })" />
                   <span v-else>{{ item[field.dataIndex] }}</span>
diff --git a/orion-ops-ui/src/components/view/editor/core.ts b/orion-ops-ui/src/components/view/editor/core.ts
index b3adc7e5..a0cf4861 100644
--- a/orion-ops-ui/src/components/view/editor/core.ts
+++ b/orion-ops-ui/src/components/view/editor/core.ts
@@ -98,6 +98,6 @@ self.MonacoEnvironment = {
     if (label === 'json') {
       return new JsonWorker();
     }
-    return new EditorWorker();
+    return new EditorWorker(label);
   },
 };
diff --git a/orion-ops-ui/src/components/view/editor/index.vue b/orion-ops-ui/src/components/view/editor/index.vue
index 57dab476..95ab6218 100644
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/orion-ops-ui/src/components/view/editor/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div ref="editorContainer"
-       :class="{
-         'editor-wrapper': true,
-         [containerClass]: !!containerClass
-       }"
+       class="editor-wrapper"
+       :class="[
+         !!containerClass ? containerClass : ''
+       ]"
        :style="{
           ...containerStyle
        }" />
@@ -22,6 +22,7 @@
   import { createDefaultOptions } from './core';
   import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { useAppStore } from '@/store';
+  import { language as shellLanguage } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
 
   const appStore = useAppStore();
 
@@ -82,6 +83,48 @@
       emits('update:modelValue', value);
       emits('change', value);
     });
+
+    // FIXME test containerClass
+    // TODO
+    // 代码提示
+    monaco.languages.registerCompletionItemProvider('shell', {
+      provideCompletionItems() {
+        const suggestions: any = [];
+        // 这个keywords就是java.java文件中有的
+        shellLanguage.keywords?.forEach((item: any) => {
+          suggestions.push({
+            label: item,
+            kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: item,
+          });
+        });
+        shellLanguage.operators?.forEach((item: any) => {
+          suggestions.push({
+            label: item,
+            kind: monaco.languages.CompletionItemKind.Operator,
+            insertText: item,
+          });
+        });
+        shellLanguage.builtinFunctions?.forEach((item: any) => {
+          suggestions.push({
+            label: item,
+            kind: monaco.languages.CompletionItemKind.Function,
+            insertText: item,
+          });
+        });
+        shellLanguage.builtinVariables?.forEach((item: any) => {
+          suggestions.push({
+            label: item,
+            kind: monaco.languages.CompletionItemKind.Variable,
+            insertText: item,
+          });
+        });
+        return {
+          suggestions,
+        };
+      },
+    });
+
     emits('editor-mounted', editor);
   };
 
diff --git a/orion-ops-ui/src/components/view/json/json-view-modal.vue b/orion-ops-ui/src/components/view/json-editor/json-editor-modal.vue
similarity index 94%
rename from orion-ops-ui/src/components/view/json/json-view-modal.vue
rename to orion-ops-ui/src/components/view/json-editor/json-editor-modal.vue
index d954417d..c26abb8f 100644
--- a/orion-ops-ui/src/components/view/json/json-view-modal.vue
+++ b/orion-ops-ui/src/components/view/json-editor/json-editor-modal.vue
@@ -11,7 +11,7 @@
            :unmount-on-close="true"
            :footer="false"
            @close="handleClose">
-    <div :style="{width: '100%', 'height': height}">
+    <div :style="{ width: '100%', 'height': height }">
       <editor v-model="value" readonly />
     </div>
   </a-modal>
@@ -19,7 +19,7 @@
 
 <script lang="ts">
   export default {
-    name: 'jsonViewModal'
+    name: 'jsonEditorModal'
   };
 </script>
 
@@ -44,7 +44,6 @@
   const title = ref<string>();
   const value = ref<string | any>();
 
-
   // 打开
   const open = (editorValue: string | any, editorTitle = 'json') => {
     title.value = editorTitle;
@@ -62,6 +61,7 @@
   const handleClose = () => {
     setVisible(false);
   };
+
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/types/form.ts b/orion-ops-ui/src/types/form.ts
index 04b3293e..d8079d10 100644
--- a/orion-ops-ui/src/types/form.ts
+++ b/orion-ops-ui/src/types/form.ts
@@ -1,9 +1,11 @@
+import type { TreeNodeData } from '@arco-design/web-vue';
+
 // 通过 label 进行过滤
-export const labelFilter = (searchValue: string, option: { label: string; }) => {
+export const labelFilter = (searchValue: string, option: { label: string }) => {
   return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
 };
 
 // 通过 title 进行过滤
-export const titleFilter = (searchValue: string, option: { title: string; }) => {
-  return option.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+export const titleFilter = (searchValue: string, option: TreeNodeData) => {
+  return (option.title as string).toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
 };
diff --git a/orion-ops-ui/src/views/asset/grant/components/router-roles.vue b/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
index 80f1ecf7..2d61c95d 100644
--- a/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
@@ -6,7 +6,7 @@
                   class="role-router"
                   v-model="value"
                   :items="rolesRouter"
-                  @change="(key, item) => emits('change', key, item)" />
+                  @change="(key: number, item: any) => emits('change', key, item)" />
       <!-- 加载中 -->
       <a-skeleton v-else-if="loading"
                   class="skeleton-wrapper"
diff --git a/orion-ops-ui/src/views/asset/grant/components/router-users.vue b/orion-ops-ui/src/views/asset/grant/components/router-users.vue
index e249971d..e35bdf99 100644
--- a/orion-ops-ui/src/views/asset/grant/components/router-users.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/router-users.vue
@@ -6,7 +6,7 @@
                   class="user-router"
                   v-model="value"
                   :items="usersRouter"
-                  @change="(key, item) => emits('change', key, item)" />
+                  @change="(key: number, item: any) => emits('change', key, item)" />
       <!-- 加载中 -->
       <a-skeleton v-else-if="loading"
                   class="skeleton-wrapper"
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
index c0b9e4ef..e8ec76de 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
@@ -41,7 +41,6 @@
                     v-if="!isAddHandle"
                     class="password-switch"
                     type="round"
-                    size="large"
                     checked-text="使用新密码"
                     unchecked-text="使用原密码" />
         </a-form-item>
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
index 827478ea..e762489f 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -25,7 +25,7 @@
       <a-form-item field="keyId" label="主机秘钥" label-col-flex="50px">
         <host-key-selector v-model="formModel.keyId" allow-clear />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
index ef993b06..f0dfa626 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
@@ -72,7 +72,6 @@
                     v-if="!isAddHandle"
                     class="password-switch"
                     type="round"
-                    size="large"
                     checked-text="使用新密码"
                     unchecked-text="使用原密码" />
         </a-form-item>
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
index 80081390..24e062a3 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -17,7 +17,7 @@
       <a-form-item field="name" label="名称" label-col-flex="30px">
         <a-input v-model="formModel.name" placeholder="请输入名称" allow-clear />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue b/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
index d78ab286..7de6cd56 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
@@ -18,7 +18,7 @@
       <!-- SSH 配置 -->
       <ssh-config-form :host-id="record.id"
                        :content="config.ssh"
-                       @submitted="(e) => config.ssh.config = e" />
+                       @submitted="(e) => config.ssh = e" />
     </a-spin>
   </a-drawer>
 </template>
@@ -31,6 +31,7 @@
 
 <script lang="ts" setup>
   import type { HostConfigWrapper } from '../../types/const';
+  import { HostSshConfig } from './ssh/types/const';
   import { ref } from 'vue';
   import useVisible from '@/hooks/visible';
   import useLoading from '@/hooks/loading';
@@ -46,7 +47,7 @@
 
   const record = ref({} as any);
   const config = ref<HostConfigWrapper>({
-    ssh: undefined
+    ssh: {} as HostSshConfig
   });
 
   // 打开
diff --git a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
index 51fd4f0a..2d62bc13 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
@@ -10,7 +10,7 @@
                   type="round"
                   :checked-value="1"
                   :unchecked-value="0"
-                  :beforeChange="updateStatus" />
+                  :beforeChange="s => updateStatus(s as number)" />
       </div>
     </template>
     <a-spin v-show="config.status" :loading="loading" class="config-form-wrapper">
@@ -48,7 +48,7 @@
           <a-radio-group type="button"
                          class="auth-type-group usn"
                          v-model="formModel.authType"
-                         :options="toOptions(sshAuthTypeKey)" />
+                         :options="toOptions(sshAuthTypeKey) as RadioOption[]" />
         </a-form-item>
         <!-- 主机密码 -->
         <a-form-item v-if="SshAuthType.PASSWORD === formModel.authType"
@@ -63,7 +63,6 @@
                     v-model="formModel.useNewPassword"
                     class="password-switch"
                     type="round"
-                    size="large"
                     checked-text="使用新密码"
                     unchecked-text="使用原密码" />
         </a-form-item>
@@ -136,6 +135,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
   import type { FieldRule } from '@arco-design/web-vue';
   import type { HostSshConfig } from './types/const';
   import { reactive, ref, watch } from 'vue';
@@ -145,10 +145,10 @@
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import { useDictStore } from '@/store';
-  import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
-  import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
   import { EnabledStatus } from '@/types/const';
   import { HostConfigType } from '../../../types/const';
+  import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
+  import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
 
   const { loading, setLoading } = useLoading();
   const { toOptions } = useDictStore();
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 1a3dda92..9ab805b4 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
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -35,7 +35,7 @@
                             :tagColor="tagColor"
                             placeholder="请选择主机标签" />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/asset/host-list/types/const.ts b/orion-ops-ui/src/views/asset/host-list/types/const.ts
index c24a4493..2bbb2602 100644
--- a/orion-ops-ui/src/views/asset/host-list/types/const.ts
+++ b/orion-ops-ui/src/views/asset/host-list/types/const.ts
@@ -2,7 +2,7 @@ import type { HostSshConfig } from '../components/config/ssh/types/const';
 
 // 主机所有配置
 export interface HostConfigWrapper {
-  ssh: HostSshConfig | unknown;
+  ssh: HostSshConfig;
 
   [key: string]: unknown;
 }
diff --git a/orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue b/orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue
index 59b771ef..7551a31e 100644
--- a/orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue
+++ b/orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue
@@ -15,7 +15,7 @@
         <a-radio-group
           v-model:model-value="type"
           type="button"
-          @change="typeChange"
+          @change="s => typeChange(s as string)"
         >
           <a-radio value="text">
             {{ $t('workplace.popularContent.text') }}
diff --git a/orion-ops-ui/src/views/host-review/connect-log/components/connect-log-table.vue b/orion-ops-ui/src/views/host-review/connect-log/components/connect-log-table.vue
index ccfbc2a5..55bed335 100644
--- a/orion-ops-ui/src/views/host-review/connect-log/components/connect-log-table.vue
+++ b/orion-ops-ui/src/views/host-review/connect-log/components/connect-log-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     :itemOptions="{ 5: { span: 2 } }"
                     @submit="fetchTableData"
@@ -42,7 +42,7 @@
                         show-time
                         format="YYYY-MM-DD HH:mm:ss" />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
index 2379f770..ef537ae5 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
@@ -235,7 +235,7 @@
   };
 
   // 打开配置
-  const openSetting = inject<(record: HostQueryResponse) => void>(openSshModalKey);
+  const openSetting = inject<(record: HostQueryResponse) => void>(openSshModalKey) as any;
 
   // 设置收藏
   const setFavorite = async (item: HostQueryResponse) => {
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/new-connection-view.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/new-connection-view.vue
index b843ac3c..e39429db 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/new-connection-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/new-connection-view.vue
@@ -9,8 +9,8 @@
         <a-radio-group v-model="newConnectionType"
                        type="button"
                        class="usn"
-                       :options="toOptions(newConnectionTypeKey)"
-                       @change="changeNewConnectionType" />
+                       :options="toOptions(newConnectionTypeKey) as RadioOption[]"
+                       @change="s => changeNewConnectionType(s as string)" />
         <!-- 过滤 -->
         <a-auto-complete v-model="filterValue"
                          class="host-filter"
@@ -75,6 +75,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
   import type { SelectOptionData } from '@arco-design/web-vue';
   import type { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
   import { getCurrentAuthorizedHost } from '@/api/asset/asset-authorized-data';
@@ -84,8 +85,8 @@
   import { useAppStore, useDictStore, useTerminalStore } from '@/store';
   import { dataColor } from '@/utils';
   import { tagColor } from '@/views/asset/host-list/types/const';
-  import HostsView from './hosts-view.vue';
   import { getLatestConnectHostId } from '@/api/asset/host-connect-log';
+  import HostsView from './hosts-view.vue';
 
   const { loading, setLoading } = useLoading();
   const { toOptions } = useDictStore();
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/ssh-extra-modal.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/ssh-extra-modal.vue
index f189c55d..6514da53 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/ssh-extra-modal.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/ssh-extra-modal.vue
@@ -25,7 +25,7 @@
         <a-form-item field="authType" label="验证方式">
           <a-radio-group type="button"
                          v-model="formModel.authType"
-                         :options="toOptions(extraSshAuthTypeKey)" />
+                         :options="toOptions(extraSshAuthTypeKey) as RadioOption[]" />
         </a-form-item>
         <!-- 用户名 -->
         <a-form-item v-if="formModel.authType === ExtraSshAuthType.CUSTOM_KEY"
@@ -61,6 +61,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
   import type { HostQueryResponse } from '@/api/asset/host';
   import type { SshExtraModel } from '../../types/terminal.const';
   import { ref } from 'vue';
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue
index dcbee392..6077390f 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue
@@ -64,7 +64,7 @@
               <a-radio-group type="button"
                              v-model="formModel.cursorStyle"
                              class="form-item form-item-cursor-style usn"
-                             :options="toOptions(cursorStyleKey)" />
+                             :options="toOptions(cursorStyleKey) as RadioOption[]" />
             </a-form-item>
             <!-- 光标闪烁 -->
             <a-form-item field="cursorBlink" label="光标是否闪烁">
@@ -95,6 +95,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
   import type { TerminalDisplaySetting } from '@/store/modules/terminal/types';
   import { ref, watch } from 'vue';
   import { useDictStore, useTerminalStore } from '@/store';
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-block.vue
index a2259105..b6b0a853 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-block.vue
@@ -10,16 +10,16 @@
                      class="usn"
                      size="mini"
                      type="button"
-                     :options="toOptions(darkThemeKey)"
-                     @change="changeDarkTheme">
+                     :options="toOptions(darkThemeKey) as RadioOption[]"
+                     @change="s => changeDarkTheme(s as string)">
       </a-radio-group>
     </div>
     <!-- 内容区域 -->
     <div class="terminal-setting-body terminal-theme-container">
       <div class="theme-row"
-           v-for="index in ThemeSchema.length / 2"
-           :key="index">
-        <a-card v-for="(theme, index) in [ThemeSchema[(index - 1) * 2], ThemeSchema[(index - 1) * 2 + 1]]"
+           v-for="rowIndex in ThemeSchema.length / 2"
+           :key="rowIndex">
+        <a-card v-for="(theme, colIndex) in [ThemeSchema[(rowIndex - 1) * 2], ThemeSchema[(rowIndex - 1) * 2 + 1]]"
                 :key="theme.name"
                 class="terminal-theme-card simple-card"
                 :class="{
@@ -28,7 +28,7 @@
                 :title="theme.name"
                 :style="{
                   background: theme.background,
-                  marginRight: index === 0 ? '16px' : 0
+                  marginRight: colIndex === 0 ? '16px' : 0
                 }"
                 :header-style="{
                   color: theme.dark ? 'rgba(255, 255, 255, .8)' : 'rgba(0, 0, 0, .8)',
@@ -53,6 +53,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
   import { darkThemeKey } from '../../types/terminal.const';
   import ThemeSchema from '../../types/terminal.theme';
   import { useDictStore, useTerminalStore } from '@/store';
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
index f7e63b94..1f841b34 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
@@ -161,7 +161,7 @@
       return;
     }
     extraSchemaArr.value.push({
-      name: name,
+      name: name as string,
       type: type || ValueType.STRING
     });
   };
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
index 3590f284..634a24dc 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -14,7 +14,7 @@
       <a-form-item field="description" label="配置描述" label-col-flex="50px">
         <a-input v-model="formModel.description" placeholder="请输入配置描述" allow-clear />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/system/dict-key/index.vue b/orion-ops-ui/src/views/system/dict-key/index.vue
index 9106f89d..5a8b8dc1 100644
--- a/orion-ops-ui/src/views/system/dict-key/index.vue
+++ b/orion-ops-ui/src/views/system/dict-key/index.vue
@@ -10,7 +10,7 @@
                          @added="modalAddCallback"
                          @updated="modalUpdateCallback" />
     <!-- json 查看器模态框 -->
-    <json-view-modal ref="view" />
+    <json-editor-modal ref="view" />
   </div>
 </template>
 
@@ -24,7 +24,7 @@
   import { ref, onBeforeMount } from 'vue';
   import DictKeyTable from './components/dict-key-table.vue';
   import DictKeyFormModal from './components/dict-key-form-modal.vue';
-  import JsonViewModal from '@/components/view/json/json-view-modal.vue';
+  import JsonEditorModal from '@/components/view/json-editor/json-editor-modal.vue';
   import { useDictStore } from '@/store';
   import { dictKeys } from './types/const';
 
diff --git a/orion-ops-ui/src/views/system/dict-key/types/const.ts b/orion-ops-ui/src/views/system/dict-key/types/const.ts
index 17dcb5cc..9c35aabd 100644
--- a/orion-ops-ui/src/views/system/dict-key/types/const.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/const.ts
@@ -45,6 +45,6 @@ export const dictKeys = [dictValueTypeKey];
  * 额外参数类型
  */
 export interface ExtraParamType {
-  name?: string;
-  type?: string;
+  name: string;
+  type: string;
 }
diff --git a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
index 3132b1d2..62c162e1 100644
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="resetForm"
@@ -21,7 +21,7 @@
       <a-form-item field="label" label="配置描述" label-col-flex="50px">
         <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/user/info/components/operator-log-list.vue b/orion-ops-ui/src/views/user/info/components/operator-log-list.vue
index a8314529..14520324 100644
--- a/orion-ops-ui/src/views/user/info/components/operator-log-list.vue
+++ b/orion-ops-ui/src/views/user/info/components/operator-log-list.vue
@@ -25,7 +25,7 @@
                           @viewDetail="(e) => view.open(e)" />
     </a-card>
     <!-- json 查看器模态框 -->
-    <json-view-modal ref="view" />
+    <json-editor-modal ref="view" />
   </div>
 </template>
 
@@ -43,7 +43,7 @@
   import { dictKeys } from '../../operator-log/types/const';
   import OperatorLogQueryHeader from '../../operator-log/components/operator-log-query-header.vue';
   import OperatorLogTable from '../../operator-log/components/operator-log-table.vue';
-  import JsonViewModal from '@/components/view/json/json-view-modal.vue';
+  import JsonEditorModal from '@/components/view/json-editor/json-editor-modal.vue';
 
   const props = defineProps({
     user: Object as PropType<UserQueryResponse>,
diff --git a/orion-ops-ui/src/views/user/info/index.vue b/orion-ops-ui/src/views/user/info/index.vue
index 52f84165..109a22d5 100644
--- a/orion-ops-ui/src/views/user/info/index.vue
+++ b/orion-ops-ui/src/views/user/info/index.vue
@@ -5,7 +5,7 @@
             position="left"
             :lazy-load="true"
             :destroy-on-hide="true"
-            @tab-click="clickTab">
+            @tab-click="k => clickTab(k as string)">
       <!-- 个人信息 -->
       <a-tab-pane key="mineInfo"
                   v-if="!user || hasPermission('infra:system-user:update')"
diff --git a/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue b/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
index 2026d764..aa46eac7 100644
--- a/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
+++ b/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-query-header :model="formModel"
+  <query-header :model="formModel"
                   label-align="left"
                   :itemOptions="{ [visibleUser ? 5 : 4]: { span: 2 } }"
                   @submit="submit"
@@ -21,7 +21,7 @@
                 :allow-search="true"
                 :filter-option="labelFilter"
                 placeholder="请选择操作模块"
-                @change="selectedModule"
+                @change="m => selectedModule(m as string)"
                 allow-clear />
     </a-form-item>
     <!-- 操作类型 -->
@@ -55,7 +55,7 @@
                       show-time
                       format="YYYY-MM-DD HH:mm:ss" />
     </a-form-item>
-  </a-query-header>
+  </query-header>
 </template>
 
 <script lang="ts">
diff --git a/orion-ops-ui/src/views/user/operator-log/index.vue b/orion-ops-ui/src/views/user/operator-log/index.vue
index 2085fb57..d1063a97 100644
--- a/orion-ops-ui/src/views/user/operator-log/index.vue
+++ b/orion-ops-ui/src/views/user/operator-log/index.vue
@@ -20,7 +20,7 @@
       <operator-log-table ref="table" @viewDetail="(e) => view.open(e)" />
     </a-card>
     <!-- json 查看器模态框 -->
-    <json-view-modal ref="view" />
+    <json-editor-modal ref="view" />
   </div>
 </template>
 
@@ -36,7 +36,7 @@
   import { dictKeys } from './types/const';
   import OperatorLogQueryHeader from './components/operator-log-query-header.vue';
   import OperatorLogTable from './components/operator-log-table.vue';
-  import JsonViewModal from '@/components/view/json/json-view-modal.vue';
+  import JsonEditorModal from '@/components/view/json-editor/json-editor-modal.vue';
 
   const cacheStore = useCacheStore();
 
diff --git a/orion-ops-ui/src/views/user/role/components/role-table.vue b/orion-ops-ui/src/views/user/role/components/role-table.vue
index cf470ddc..fd5fb1d3 100644
--- a/orion-ops-ui/src/views/user/role/components/role-table.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -21,7 +21,7 @@
                   :options="toOptions(roleStatusKey)"
                   allow-clear />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">
diff --git a/orion-ops-ui/src/views/user/user/components/user-table.vue b/orion-ops-ui/src/views/user/user/components/user-table.vue
index 900ace41..c10d6c4e 100644
--- a/orion-ops-ui/src/views/user/user/components/user-table.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-query-header :model="formModel"
+    <query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
                     @reset="fetchTableData"
@@ -36,7 +36,7 @@
       <a-form-item field="email" label="邮箱" label-col-flex="50px">
         <a-input v-model="formModel.email" placeholder="请输入邮箱" allow-clear />
       </a-form-item>
-    </a-query-header>
+    </query-header>
   </a-card>
   <!-- 表格 -->
   <a-card class="general-card table-card">