🔨 修改 defineProps 规范.

2024-04-06 23:11:30 +08:00
parent 812286a2e7
commit 3623e6bd4a
50 changed files with 300 additions and 394 deletions
--- a/orion-ops-ui/src/assets/style/host-terminal-layout.less
+++ b/orion-ops-ui/src/assets/style/host-terminal-layout.less
@@ -1,7 +1,7 @@
 // 亮色主题配色常量
 body {
  --color-bg-header: #232323;
-  --color-bg-sidebar: #E3E3E3;
+  --color-bg-sidebar: #EBEBEB;
  --color-bg-panel: var(--color-bg-sidebar);
  --color-bg-content: #FEFEFE;
  --color-sidebar-icon: #737070;
--- a/orion-ops-ui/src/components/app/breadcrumb/index.vue
+++ b/orion-ops-ui/src/components/app/breadcrumb/index.vue
@@ -10,17 +10,15 @@
 </template>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import { useRoute } from 'vue-router';

-  defineProps({
-    items: {
-      type: Array as PropType<string[]>,
-      default() {
-        return useRoute().matched
-          .map(s => s.meta?.locale)
-          .filter(Boolean) || [];
-      },
+  const props = withDefaults(defineProps<{
+    items?: Array<string>;
+  }>(), {
+    items: () => {
+      return useRoute().matched
+        .map(s => s.meta?.locale as string)
+        .filter(Boolean) || [];
    },
  });
 </script>
--- a/orion-ops-ui/src/components/app/setting/block.vue
+++ b/orion-ops-ui/src/components/app/setting/block.vue
@@ -19,12 +19,11 @@
 </template>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
  import type { SelectOption } from '@arco-design/web-vue/es/select/interface';
  import { useAppStore } from '@/store';
-  import FormWrapper from './form-wrapper.vue';
  import { updatePreference } from '@/api/user/preference';
+  import FormWrapper from './form-wrapper.vue';

  interface OptionsProps {
    name: string;
@@ -36,13 +35,10 @@
    margin?: string;
  }

-  defineProps({
-    title: String,
-    options: {
-      type: Array as PropType<OptionsProps[]>,
-      default: () => []
-    },
-  });
+  defineProps<Partial<{
+    title: string;
+    options: Array<OptionsProps>;
+  }>>();

  const appStore = useAppStore();

--- a/orion-ops-ui/src/components/app/setting/form-wrapper.vue
+++ b/orion-ops-ui/src/components/app/setting/form-wrapper.vue
@@ -30,29 +30,22 @@
 </template>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
  import type { SelectOption } from '@arco-design/web-vue/es/select/interface';

-  const props = defineProps({
-    type: {
-      type: String,
-      default: 'switch',
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    defaultValue: {
-      type: [String, Boolean, Number],
-      default: '',
-    },
-    options: {
-      type: Array as PropType<Array<RadioOption | SelectOption>>,
-      default: () => []
-    }
+  const props = withDefaults(defineProps<Partial<{
+    type: string;
+    name: string;
+    defaultValue: string | boolean | number;
+    options: Array<RadioOption | SelectOption>;
+  }>>(), {
+    type: 'switch',
+    name: '',
+    defaultValue: '',
+    options: () => []
  });
  const emit = defineEmits(['inputChange']);
+
  const handleChange = (value: unknown) => {
    emit('inputChange', {
      value,
--- a/orion-ops-ui/src/components/app/setting/index.vue
+++ b/orion-ops-ui/src/components/app/setting/index.vue
@@ -16,11 +16,11 @@
            @cancel="() => setVisible(false)">
    <div class="preference-containers">
      <!-- 布局设置 -->
-      <Block :options="layoutOpts" title="布局设置" />
+      <block :options="layoutOpts" title="布局设置" />
      <!-- 数据设置 -->
-      <Block :options="dataOpts" title="数据设置" />
+      <block :options="dataOpts" title="数据设置" />
      <!-- 页面视图 -->
-      <Block :options="viewsOpts" title="页面视图" />
+      <block :options="viewsOpts" title="页面视图" />
    </div>
  </a-drawer>
 </template>
@@ -28,9 +28,9 @@
 <script lang="ts" setup>
  import { computed } from 'vue';
  import { useAppStore } from '@/store';
-  import Block from './block.vue';
  import useVisible from '@/hooks/visible';
  import { CardPageSizeOptions, TablePageSizeOptions } from '@/types/const';
+  import Block from './block.vue';

  const appStore = useAppStore();
  const { visible, setVisible } = useVisible();
--- a/orion-ops-ui/src/components/app/tab-bar/tab-item.vue
+++ b/orion-ops-ui/src/components/app/tab-bar/tab-item.vue
@@ -50,9 +50,8 @@

 <script lang="ts" setup>
  import type { TagProps } from '@/store/modules/tab-bar/types';
-  import type { PropType } from 'vue';
  import { computed } from 'vue';
-  import { useRouter, useRoute } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
  import { useTabBarStore } from '@/store';
  import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';

@@ -65,18 +64,10 @@
    all = 'all',
  }

-  const props = defineProps({
-    itemData: {
-      type: Object as PropType<TagProps>,
-      default: () => {
-        return {};
-      }
-    },
-    index: {
-      type: Number,
-      default: 0,
-    },
-  });
+  const props = defineProps<{
+    index: number;
+    itemData: TagProps;
+  }>();

  const router = useRouter();
  const route = useRoute();
--- 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
@@ -17,14 +17,13 @@

 <script lang="ts" setup>
  import type { TreeNodeData } from '@arco-design/web-vue';
-  import type { PropType } from 'vue';
  import { computed, onBeforeMount, ref } from 'vue';
  import { useCacheStore } from '@/store';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Array as PropType<Array<Number>>,
-  });
+  const props = defineProps<Partial<{
+    modelValue: Array<number>;
+  }>>();

  const emits = defineEmits(['update:modelValue']);

--- a/orion-ops-ui/src/components/asset/host-group/tree/index.vue
+++ b/orion-ops-ui/src/components/asset/host-group/tree/index.vue
@@ -4,11 +4,11 @@
    <a-tree v-if="treeData.length"
            ref="tree"
            class="tree-container block-tree"
+            v-model:checked-keys="checkedKeys"
            :blockNode="true"
            :draggable="editable"
            :data="treeData"
            :checkable="checkable"
-            v-model:checked-keys="checkedKeys"
            :check-strictly="true"
            @drop="moveGroup">
      <!-- 标题 -->
@@ -39,7 +39,7 @@
        <!-- 名称 -->
        <span v-else
              class="node-title-wrapper"
-              @click="() => emits('selectNode', node)">
+              @click="() => emits('selectedNode', node)">
        {{ node.title }}
      </span>
      </template>
@@ -97,22 +97,13 @@
  import { isString } from '@/utils/is';
  import { useCacheStore } from '@/store';

-  const props = defineProps({
-    loading: Boolean,
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    checkable: {
-      type: Boolean,
-      default: false
-    },
-    checkedKeys: {
-      type: Array<Number>,
-      default: () => []
-    }
-  });
-  const emits = defineEmits(['loading', 'selectNode', 'update:checkedKeys']);
+  const props = defineProps<Partial<{
+    loading: boolean;
+    editable: boolean;
+    checkable: boolean;
+    checkedKeys: Array<number>;
+  }>>();
+  const emits = defineEmits(['setLoading', 'selectedNode', 'update:checkedKeys']);

  const cacheStore = useCacheStore();

@@ -148,7 +139,7 @@
  // 删除节点
  const deleteNode = async (key: number) => {
    try {
-      emits('loading', true);
+      emits('setLoading', true);
      // 删除
      await deleteHostGroup(key);
      // 页面删除
@@ -168,7 +159,7 @@
      }
    } catch (e) {
    } finally {
-      emits('loading', false);
+      emits('setLoading', false);
    }
  };

@@ -287,7 +278,7 @@
      dropPosition: number
    }) => {
    try {
-      emits('loading', true);
+      emits('setLoading', true);
      // 移动
      await moveHostGroup({
        id: dragNode.key as number,
@@ -298,25 +289,25 @@
      moveNode(treeData.value, dragNode, dropNode, dropPosition);
    } catch (e) {
    } finally {
-      emits('loading', false);
+      emits('setLoading', false);
    }
  };

  // 加载数据
  const fetchTreeData = async (force = false) => {
    try {
+      emits('setLoading', true);
      const groups = await cacheStore.loadHostGroups(force);
-      emits('loading', true);
      treeData.value = groups || [];
    } catch (e) {
    } finally {
-      emits('loading', false);
+      emits('setLoading', false);
    }
    // 未选择则选择首个
    if (!tree.value?.getSelectedNodes()?.length && treeData.value.length) {
      await nextTick(() => {
        tree.value?.selectNode(treeData.value[0].key);
-        emits('selectNode', treeData.value[0]);
+        emits('selectedNode', treeData.value[0]);
      });
    }
  };
--- a/orion-ops-ui/src/components/asset/host-identity/selector/index.vue
+++ b/orion-ops-ui/src/components/asset/host-identity/selector/index.vue
@@ -18,9 +18,11 @@
  import { useCacheStore } from '@/store';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number,
-    authorized: Boolean
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: number;
+    authorized: boolean;
+  }>>(), {
+    authorized: false
  });

  const emits = defineEmits(['update:modelValue']);
--- a/orion-ops-ui/src/components/asset/host-key/selector/index.vue
+++ b/orion-ops-ui/src/components/asset/host-key/selector/index.vue
@@ -18,9 +18,11 @@
  import { useCacheStore } from '@/store';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number,
-    authorized: Boolean
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: number;
+    authorized: boolean;
+  }>>(), {
+    authorized: false
  });

  const emits = defineEmits(['update:modelValue']);
--- a/orion-ops-ui/src/components/asset/host/selector/index.vue
+++ b/orion-ops-ui/src/components/asset/host/selector/index.vue
@@ -18,9 +18,9 @@
  import { useCacheStore } from '@/store';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number
-  });
+  const props = defineProps<Partial<{
+    modelValue: number
+  }>>();

  const emits = defineEmits(['update:modelValue']);

--- a/orion-ops-ui/src/components/meta/history/modal/index.vue
+++ b/orion-ops-ui/src/components/meta/history/modal/index.vue
@@ -90,10 +90,10 @@
  import columns from './table.columns';
  import { Message } from '@arco-design/web-vue';

-  const props = defineProps({
-    type: String,
-    rollback: Function
-  });
+  const props = defineProps<{
+    type: string;
+    rollback: Function;
+  }>();
  const emits = defineEmits(['updated']);

  const pagination = usePagination();
--- a/orion-ops-ui/src/components/meta/tag/multi-selector/index.vue
+++ b/orion-ops-ui/src/components/meta/tag/multi-selector/index.vue
@@ -23,7 +23,6 @@
 </script>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import type { SelectOptionData } from '@arco-design/web-vue';
  import type { TagCreateRequest } from '@/api/meta/tag';
  import { ref, computed, onBeforeMount } from 'vue';
@@ -32,16 +31,15 @@
  import { createTag } from '@/api/meta/tag';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Array as PropType<Array<number>>,
-    placeholder: String,
-    limit: Number,
-    type: String,
-    allowCreate: Boolean,
-    tagColor: {
-      type: Array as PropType<Array<string>>,
-      default: () => []
-    },
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: Array<number>;
+    placeholder: string;
+    limit: number;
+    type: string;
+    allowCreate: boolean;
+    tagColor: Array<string>;
+  }>>(), {
+    tagColor: () => []
  });

  const emits = defineEmits(['update:modelValue', 'onLimited']);
--- a/orion-ops-ui/src/components/system/dict-key/selector/index.vue
+++ b/orion-ops-ui/src/components/system/dict-key/selector/index.vue
@@ -22,12 +22,11 @@
  import { labelFilter } from '@/types/form';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number,
-    allowCreate: {
-      type: Boolean,
-      default: false
-    }
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: number;
+    allowCreate: boolean;
+  }>>(), {
+    allowCreate: false,
  });

  const emits = defineEmits(['update:modelValue', 'change']);
--- a/orion-ops-ui/src/components/system/menu/tree-selector/index.vue
+++ b/orion-ops-ui/src/components/system/menu/tree-selector/index.vue
@@ -22,10 +22,10 @@
  import { titleFilter } from '@/types/form';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number,
-    disabled: Boolean,
-  });
+  const props = defineProps<{
+    modelValue: number;
+    disabled: boolean;
+  }>();

  const emits = defineEmits(['update:modelValue']);

--- a/orion-ops-ui/src/components/system/message-box/index.vue
+++ b/orion-ops-ui/src/components/system/message-box/index.vue
@@ -8,7 +8,7 @@
        <a-result v-if="!renderList.length" status="404">
          <template #subtitle>暂无内容</template>
        </a-result>
-        <List :render-list="renderList"
+        <list :render-list="renderList"
              :unread-count="unreadCount"
              @item-click="handleItemClick" />
      </a-tab-pane>
@@ -35,6 +35,7 @@
  }

  const { loading, setLoading } = useLoading(true);
+
  const messageType = ref('message');
  const messageData = reactive<{
    renderList: MessageRecord[];
--- a/orion-ops-ui/src/components/system/message-box/list.vue
+++ b/orion-ops-ui/src/components/system/message-box/list.vue
@@ -1,13 +1,11 @@
 <template>
  <a-list :bordered="false">
-    <a-list-item
-      v-for="item in renderList"
-      :key="item.id"
-      action-layout="vertical"
-      :style="{
-        opacity: item.status ? 0.5 : 1,
-      }"
-    >
+    <a-list-item v-for="item in renderList"
+                 :key="item.id"
+                 action-layout="vertical"
+                 :style="{
+                   opacity: item.status ? 0.5 : 1,
+                 }">
      <template #extra>
        <a-tag v-if="item.messageType === 0" color="gray">未开始</a-tag>
        <a-tag v-else-if="item.messageType === 1" color="green">已开通</a-tag>
@@ -65,19 +63,15 @@
 </template>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
-  import type { MessageRecord, MessageListType } from '@/api/system/message';
+  import type { MessageListType, MessageRecord } from '@/api/system/message';

-  const props = defineProps({
-    renderList: {
-      type: Array as PropType<MessageListType>,
-      required: true,
-    },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
+  const props = withDefaults(defineProps<{
+    renderList: MessageListType;
+    unreadCount?: number;
+  }>(), {
+    unreadCount: 0,
  });
+
  const emit = defineEmits(['itemClick']);
  const allRead = () => {
    emit('itemClick', [...props.renderList]);
--- a/orion-ops-ui/src/components/user/role/selector/index.vue
+++ b/orion-ops-ui/src/components/user/role/selector/index.vue
@@ -16,7 +16,6 @@
 </script>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import type { SelectOptionData } from '@arco-design/web-vue';
  import { computed, onBeforeMount, ref } from 'vue';
  import { useCacheStore } from '@/store';
@@ -24,9 +23,11 @@
  import { labelFilter } from '@/types/form';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: [Number, Array] as PropType<number | Array<number>>,
-    multiple: Boolean,
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: number | Array<number>;
+    multiple: boolean;
+  }>>(), {
+    multiple: false,
  });

  const emits = defineEmits(['update:modelValue']);
--- a/orion-ops-ui/src/components/user/user/selector/index.vue
+++ b/orion-ops-ui/src/components/user/user/selector/index.vue
@@ -16,16 +16,17 @@
 </script>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import type { SelectOptionData } from '@arco-design/web-vue';
  import { computed, ref, onMounted } from 'vue';
  import { useCacheStore } from '@/store';
  import { labelFilter } from '@/types/form';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: [Number, Array] as PropType<number | Array<number>>,
-    multiple: Boolean,
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: number | Array<number>;
+    multiple: boolean;
+  }>>(), {
+    multiple: false,
  });

  const emits = defineEmits(['update:modelValue']);
--- a/orion-ops-ui/src/components/view/chart/index.vue
+++ b/orion-ops-ui/src/components/view/chart/index.vue
@@ -1,47 +1,44 @@
 <template>
-  <VCharts
-    v-if="renderChart"
-    :option="options"
-    :autoresize="autoResize"
-    :style="{ width, height }"
-  />
+  <v-charts v-if="renderChart"
+            :option="options"
+            :autoresize="autoResize"
+            :style="{ width, height }" />
 </template>

 <script lang="ts" setup>
-  import { ref, nextTick } from 'vue';
+  import type { ECBasicOption } from 'echarts/types/src/util/types';
+  import { computed, nextTick, ref } from 'vue';
+  import { useAppStore } from '@/store';
  import VCharts from 'vue-echarts';
-  // import { useAppStore } from '@/store';

-  defineProps({
-    options: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    autoResize: {
-      type: Boolean,
-      default: true,
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '100%',
+  const props = withDefaults(defineProps<{
+    options: ECBasicOption,
+    autoResize: boolean,
+    width: string,
+    height: string,
+  }>(), {
+    options: () => {
+      return {};
    },
+    autoResize: true,
+    width: '100%',
+    height: '100%',
  });
-  // const appStore = useAppStore();
-  // const theme = computed(() => {
-  //   if (appStore.theme === 'dark') return 'dark';
-  //   return '';
-  // });
+
+  const appStore = useAppStore();
+
+  // 监听暗色模式
+  const theme = computed(() => {
+    if (appStore.theme === 'dark') return 'dark';
+    return '';
+  });
+
  const renderChart = ref(false);
-  // wait container expand
+
  nextTick(() => {
    renderChart.value = true;
  });
+
 </script>

 <style lang="less" scoped>
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/orion-ops-ui/src/components/view/editor/index.vue
@@ -17,7 +17,7 @@

 <script lang="ts" setup>
  import type { Theme, Options } from './core';
-  import type { CSSProperties, PropType } from 'vue';
+  import type { CSSProperties } from 'vue';
  import * as monaco from 'monaco-editor';
  import { createDefaultOptions } from './core';
  import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
@@ -28,46 +28,29 @@

  const emits = defineEmits(['update:modelValue', 'change', 'editor-mounted']);

-  const props = defineProps({
-    modelValue: {
-      type: String,
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: string;
+    width: string;
+    height: string;
+    readonly: boolean;
+    autoFocus: boolean;
+    language: string;
+    suggestions: boolean;
+    containerClass: string;
+    containerStyle: CSSProperties;
+    theme: Theme | boolean;
+    options: Options;
+  }>>(), {
+    width: '100%',
+    height: '100%',
+    readonly: false,
+    autoFocus: false,
+    language: 'json',
+    suggestions: false,
+    theme: true,
+    options: () => {
+      return {};
    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '100%'
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    autoFocus: {
-      type: Boolean,
-      default: false
-    },
-    language: {
-      type: String,
-      default: 'json',
-    },
-    suggestions: {
-      type: Boolean,
-      default: false,
-    },
-    containerClass: String,
-    containerStyle: Object as PropType<CSSProperties>,
-    theme: {
-      type: [String, Boolean] as PropType<Theme | boolean>,
-      default: true,
-    },
-    options: {
-      type: Object as PropType<Options>,
-      default: () => {
-        return {};
-      }
-    }
  });

  const editorContainer = ref();
--- a/orion-ops-ui/src/components/view/json-editor/modal/index.vue
+++ b/orion-ops-ui/src/components/view/json-editor/modal/index.vue
@@ -28,19 +28,14 @@
  import useVisible from '@/hooks/visible';
  import { isString } from '@/utils/is';

-  const props = defineProps({
-    width: {
-      type: [String, Number],
-      default: '60%'
-    },
-    height: {
-      type: String,
-      default: 'calc(100vh - 240px)'
-    },
-    readonly: {
-      type: Boolean,
-      default: true
-    }
+  const props = withDefaults(defineProps<Partial<{
+    width: string | number;
+    height: string;
+    readonly: boolean;
+  }>>(), {
+    width: '60%',
+    height: 'calc(100vh - 240px)',
+    readonly: true,
  });

  const { visible, setVisible } = useVisible();
--- a/orion-ops-ui/src/components/view/shell-editor/modal/index.vue
+++ b/orion-ops-ui/src/components/view/shell-editor/modal/index.vue
@@ -32,23 +32,16 @@
  import { ref } from 'vue';
  import useVisible from '@/hooks/visible';

-  const props = defineProps({
-    width: {
-      type: [String, Number],
-      default: '60%'
-    },
-    height: {
-      type: String,
-      default: 'calc(100vh - 280px)'
-    },
-    dark: {
-      type: Boolean,
-      default: true
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
+  const props = withDefaults(defineProps<Partial<{
+    width: string | number;
+    height: string;
+    dark: boolean;
+    readonly: boolean;
+  }>>(), {
+    width: '60%',
+    height: 'calc(100vh - 280px)',
+    dark: true,
+    readonly: false,
  });

  const { visible, setVisible } = useVisible();
--- a/orion-ops-ui/src/components/view/tab-router/index.vue
+++ b/orion-ops-ui/src/components/view/tab-router/index.vue
@@ -21,17 +21,16 @@
 </script>

 <script lang="ts" setup>
-  import type { PropType } from 'vue';
  import type { TabRouterItem } from './types';
  import usePermission from '@/hooks/permission';
-  import { onMounted, } from 'vue';
+  import { onMounted } from 'vue';

  const permission = usePermission();

-  const props = defineProps({
-    items: Array as PropType<Array<TabRouterItem>>,
-    modelValue: [String, Number]
-  });
+  const props = defineProps<Partial<{
+    items: Array<TabRouterItem>;
+    modelValue: string | number;
+  }>>();

  const emits = defineEmits(['update:modelValue', 'change']);

@@ -80,7 +79,7 @@
    height: 32px;
    margin: 12px 12px 0 12px;
    align-items: center;
-    padding: 5px 16px;
+    padding: 6px 18px;
    cursor: pointer;
    border-radius: 32px;
    font-size: 14px;
@@ -96,7 +95,7 @@
    }

    &:hover {
-      background: var(--color-fill-3);
+      background: var(--color-fill-2);
    }
  }

--- a/orion-ops-ui/src/views/asset-audit/sftp-log/components/sftp-log-table.vue
+++ b/orion-ops-ui/src/views/asset-audit/sftp-log/components/sftp-log-table.vue
@@ -103,7 +103,9 @@
      </template>
      <!-- 操作类型 -->
      <template #type="{ record }">
-        {{ getDictValue(sftpOperatorTypeKey, record.type) }}
+        <a-tag color="arcoblue">
+          {{ getDictValue(sftpOperatorTypeKey, record.type) }}
+        </a-tag>
      </template>
      <!-- 操作文件 -->
      <template #paths="{ record }">
--- a/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
@@ -1,11 +1,13 @@
 <template>
  <a-spin :loading="loading" class="grant-container">
    <!-- 角色列表 -->
-    <router-roles v-if="type === GrantType.ROLE" outer-class="router-wrapper"
+    <router-roles v-if="type === GrantType.ROLE"
+                  outer-class="router-wrapper"
                  v-model="subjectId"
                  @change="fetchAuthorizedData" />
    <!-- 角色列表 -->
-    <router-users v-else-if="type === GrantType.USER" outer-class="router-wrapper"
+    <router-users v-else-if="type === GrantType.USER"
+                  outer-class="router-wrapper"
                  v-model="subjectId"
                  @change="fetchAuthorizedData" />
    <!-- 数据列表 -->
@@ -60,10 +62,10 @@
  import RouterRoles from './router-roles.vue';
  import RouterUsers from './router-users.vue';

-  const props = defineProps({
-    type: String,
-    loading: Boolean,
-  });
+  const props = defineProps<{
+    type: string;
+    loading: boolean;
+  }>();
  const emits = defineEmits(['fetch', 'grant']);

  const subjectId = ref();
--- 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
@@ -5,13 +5,12 @@
                @grant="doGrant">
    <!-- 分组 -->
    <host-group-tree outer-class="group-main-tree"
+                     v-model:checked-keys="checkedGroups"
                     :checkable="true"
-                     :checked-keys="checkedGroups"
                     :editable="false"
                     :loading="loading"
-                     @loading="setLoading"
-                     @select-node="(e) => selectedGroup = e"
-                     @update:checked-keys="updateCheckedGroups" />
+                     @set-loading="setLoading"
+                     @selected-node="(e) => selectedGroup = e" />
    <!-- 主机列表 -->
    <host-list class="group-main-hosts sticky-list" :group="selectedGroup" />
  </grant-layout>
@@ -34,9 +33,9 @@
  import HostList from './host-list.vue';
  import GrantLayout from './grant-layout.vue';

-  const props = defineProps({
-    type: String,
-  });
+  const props = defineProps<{
+    type: string;
+  }>();

  const { loading, setLoading } = useLoading();

@@ -44,11 +43,6 @@
  const checkedGroups = ref<Array<number>>([]);
  const selectedGroup = ref<TreeNodeData>({});

-  // 选择分组
-  const updateCheckedGroups = (e: Array<number>) => {
-    checkedGroups.value = e;
-  };
-
  // 获取授权列表
  const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
    setLoading(true);
--- 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
@@ -45,9 +45,9 @@
  import { useRowSelection } from '@/types/table';
  import GrantLayout from './grant-layout.vue';

-  const props = defineProps({
-    type: String,
-  });
+  const props = defineProps<{
+    type: string;
+  }>();

  const cacheStore = useCacheStore();
  const rowSelection = useRowSelection();
--- 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
@@ -37,9 +37,10 @@
  import { hostKeyColumns } from '../types/table.columns';
  import GrantLayout from './grant-layout.vue';

-  const props = defineProps({
-    type: String,
-  });
+  const props = defineProps<{
+    type: string;
+  }>();
+
  const cacheStore = useCacheStore();
  const rowSelection = useRowSelection();
  const { loading, setLoading } = useLoading();
--- a/orion-ops-ui/src/views/asset/grant/components/host-list.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-list.vue
@@ -7,7 +7,7 @@
    <!-- 表头 -->
    <template #header>
      <span class="hosts-header-title">组内数据</span>
-      <span class="span-blue">{{ props.group?.title }}</span>
+      <span class="span-blue">{{ group?.title }}</span>
    </template>
    <!-- 空数据 -->
    <template #empty>
@@ -35,20 +35,14 @@
 <script lang="ts" setup>
  import type { TreeNodeData } from '@arco-design/web-vue';
  import type { HostQueryResponse } from '@/api/asset/host';
-  import type { PropType } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useCacheStore } from '@/store';
  import { ref, watch } from 'vue';
  import { getHostGroupRelList } from '@/api/asset/host-group';

-  const props = defineProps({
-    group: {
-      type: Object as PropType<TreeNodeData>,
-      default: () => {
-        return {};
-      }
-    }
-  });
+  const props = defineProps<Partial<{
+    group: TreeNodeData;
+  }>>();

  const cacheStore = useCacheStore();
  const { loading, setLoading } = useLoading();
--- a/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
@@ -36,9 +36,9 @@
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number
-  });
+  const props = defineProps<Partial<{
+    modelValue: number;
+  }>>();

  const emits = defineEmits(['update:modelValue', 'change']);

--- a/orion-ops-ui/src/views/asset/grant/components/router-users.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/router-users.vue
@@ -36,9 +36,9 @@
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';

-  const props = defineProps({
-    modelValue: Number
-  });
+  const props = defineProps<Partial<{
+    modelValue: number;
+  }>>();

  const emits = defineEmits(['update:modelValue', 'change']);

--- 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
@@ -31,14 +31,14 @@

 <script lang="ts" setup>
  import type { HostConfigWrapper } from '../../types/const';
-  import { HostSshConfig } from './ssh/types/const';
+  import type { HostSshConfig } from './ssh/types/const';
  import { ref } from 'vue';
  import useVisible from '@/hooks/visible';
  import useLoading from '@/hooks/loading';
  import { Message } from '@arco-design/web-vue';
  import { getHostConfigList } from '@/api/asset/host-config';
  import { useCacheStore, useDictStore } from '@/store';
-  import { dictKeys as sshDictKeys } from './ssh/types/const';
+  import { dictKeys } from './ssh/types/const';
  import SshConfigForm from './ssh/ssh-config-form.vue';

  const { visible, setVisible } = useVisible();
@@ -58,7 +58,7 @@
      setVisible(true);
      // 加载字典值
      const dictStore = useDictStore();
-      await dictStore.loadKeys(sshDictKeys);
+      await dictStore.loadKeys(dictKeys);
      // 加载配置
      const { data } = await getHostConfigList(record.value.id);
      data.forEach(s => {
--- 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
@@ -159,10 +159,10 @@
  const { loading, setLoading } = useLoading();
  const { toRadioOptions } = useDictStore();

-  const props = defineProps({
-    content: Object,
-    hostId: Number,
-  });
+  const props = defineProps<{
+    content: any;
+    hostId: number;
+  }>();

  const emits = defineEmits(['submitted']);

--- 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,8 +42,8 @@
          <host-group-tree outer-class="tree-card-main"
                           ref="tree"
                           :loading="loading"
-                           @loading="setLoading"
-                           @select-node="selectGroup" />
+                           @set-loading="setLoading"
+                           @selected-node="selectGroup" />
        </div>
        <!-- 身体部分 -->
        <a-spin class="simple-card transfer-body"
--- a/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
@@ -53,22 +53,17 @@
 <script lang="ts" setup>
  import type { TransferItem } from '@arco-design/web-vue/es/transfer/interface';
  import type { TreeNodeData } from '@arco-design/web-vue';
-  import type { PropType } from 'vue';
  import { onMounted, ref, watch, computed } from 'vue';
  import { useCacheStore } from '@/store';
  import { getHostGroupRelList } from '@/api/asset/host-group';

-  const props = defineProps({
-    modelValue: {
-      type: Array<string>,
-      default: () => []
+  const props = withDefaults(defineProps<Partial<{
+    modelValue: Array<string>;
+    group: TreeNodeData;
+  }>>(), {
+    group: () => {
+      return {};
    },
-    group: {
-      type: Object as PropType<TreeNodeData>,
-      default: () => {
-        return {};
-      }
-    }
  });

  const emits = defineEmits(['loading', 'update:modelValue']);
--- 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
@@ -244,7 +244,7 @@

  // 重置条件
  const reset = () => {
-    resetObject(formModel, ['extra']);
+    resetObject(formModel, ['queryTag']);
    fetchCardData();
  };

--- a/orion-ops-ui/src/views/exec/exec-log/index.vue
+++ b/orion-ops-ui/src/views/exec/exec-log/index.vue
@@ -31,13 +31,13 @@
  import { ref, onBeforeMount } from 'vue';
  import { useDictStore } from '@/store';
  import { dictKeys } from './types/const';
+  import { useRouter } from 'vue-router';
+  import { openNewRoute } from '@/router';
  import ExecLogTable from './components/exec-log-table.vue';
  import ExecLogClearModal from './components/exec-log-clear-modal.vue';
  import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';
  import ShellEditorModal from '@/components/view/shell-editor/modal/index.vue';
  import ExecLogPanelModal from '@/components/exec/log/panel-modal/index.vue';
-  import { useRouter } from 'vue-router';
-  import { openNewRoute } from '@/router';

  const router = useRouter();

--- 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
@@ -33,14 +33,13 @@

 <script lang="ts" setup>
  import type { SidebarAction } from '../../types/terminal.type';
-  import type { PropType } from 'vue';

-  defineProps({
-    actions: Array as PropType<Array<SidebarAction>>,
-    position: String,
-    wrapperClass: String,
-    iconClass: String,
-  });
+  defineProps<Partial<{
+    actions: Array<SidebarAction>;
+    position: string;
+    wrapperClass: string;
+    iconClass: string;
+  }>>();

 </script>

--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue
@@ -3,18 +3,19 @@
  <div class="sftp-editor-header">
    <!-- 左侧操作 -->
    <div class="sftp-editor-header-left">
-      <div class="sftp-path-container">
-        <!-- 当前路径 -->
-        <a-tooltip position="top"
-                   :mini="true"
-                   :overlay-inverse="true"
-                   :auto-fix-position="false"
-                   content-class="terminal-tooltip-content"
-                   arrow-class="terminal-tooltip-content"
-                   :content="path">
+      <a-tooltip position="top"
+                 :mini="true"
+                 :overlay-inverse="true"
+                 :auto-fix-position="false"
+                 content-class="terminal-tooltip-content"
+                 arrow-class="terminal-tooltip-content"
+                 content="点击复制">
+        <a-tag class="sftp-path-container pointer"
+               color="green"
+               @click="copy(path, '已复制')">
          <span>{{ name }}</span>
-        </a-tooltip>
-      </div>
+        </a-tag>
+      </a-tooltip>
    </div>
    <!-- 右侧操作 -->
    <a-space class="sftp-editor-header-right">
@@ -56,6 +57,7 @@

 <script lang="ts" setup>
  import type { ISftpSession } from '../../types/terminal.type';
+  import { copy } from '@/hooks/copy';

  const props = defineProps<{
    name: string;
@@ -95,24 +97,6 @@
    }
  }

-  .sftp-path-container {
-    width: 100%;
-    height: @action-size;
-    background: var(--color-fill-2);
-    border-radius: 2px;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    padding: 0 8px;
-
-    span {
-      font-size: 14px;
-      line-height: 1.2;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-
  .header-action-icon {
    font-size: 16px;
    padding: 4px;
--- 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,7 +60,6 @@

 <script lang="ts" setup>
  import type { UserQueryResponse, LoginHistoryQueryResponse } from '@/api/user/user';
-  import type { PropType } from 'vue';
  import useLoading from '@/hooks/loading';
  import { ref, onBeforeMount } from 'vue';
  import { ResultStatus } from '../types/const';
@@ -69,9 +68,9 @@
  import { dateFormat } from '@/utils';
  import { isMobile } from '@/utils/is';

-  const props = defineProps({
-    user: Object as PropType<UserQueryResponse>,
-  });
+  const props = defineProps<{
+    user?: UserQueryResponse;
+  }>();

  const list = ref<LoginHistoryQueryResponse[]>([]);

--- 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,7 +49,6 @@

 <script lang="ts" setup>
  import type { UserUpdateRequest, UserQueryResponse } from '@/api/user/user';
-  import type { PropType } from 'vue';
  import useLoading from '@/hooks/loading';
  import { ref, onMounted } from 'vue';
  import formRules from '../../user/types/form.rules';
@@ -59,9 +58,9 @@
  import { Message } from '@arco-design/web-vue';
  import { updateUser } from '@/api/user/user';

-  const props = defineProps({
-    user: Object as PropType<UserQueryResponse>,
-  });
+  const props = defineProps<{
+    user?: UserQueryResponse;
+  }>();

  const userStore = useUserStore();
  const { loading, setLoading } = useLoading();
--- a/orion-ops-ui/src/views/user/info/components/user-operator-log.vue
+++ b/orion-ops-ui/src/views/user/info/components/user-operator-log.vue
@@ -33,16 +33,15 @@

 <script lang="ts" setup>
  import type { UserQueryResponse } from '@/api/user/user';
-  import type { PropType } from 'vue';
  import { ref, onBeforeMount } from 'vue';
  import { useCacheStore, useDictStore } from '@/store';
  import { dictKeys } from '@/views/user/operator-log/types/const';
  import OperatorLogQueryHeader from '@/views/user/operator-log/components/operator-log-query-header.vue';
  import OperatorLogSimpleTable from '@/views/user/operator-log/components/operator-log-simple-table.vue';

-  const props = defineProps({
-    user: Object as PropType<UserQueryResponse>,
-  });
+  const props = defineProps<{
+    user?: UserQueryResponse;
+  }>();

  const cacheStore = useCacheStore();

--- 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,7 +68,6 @@
 <script lang="ts" setup>
  import type { UserQueryResponse } from '@/api/user/user';
  import type { UserSessionQueryResponse } from '@/api/user/user';
-  import type { PropType } from 'vue';
  import useLoading from '@/hooks/loading';
  import { ref, onBeforeMount } from 'vue';
  import { getCurrentUserSessionList, offlineCurrentUserSession } from '@/api/user/mine';
@@ -78,9 +77,9 @@
  import usePermission from '@/hooks/permission';
  import { getUserSessionList, offlineUserSession } from '@/api/user/user';

-  const props = defineProps({
-    user: Object as PropType<UserQueryResponse>,
-  });
+  const props = defineProps<{
+    user?: UserQueryResponse;
+  }>();

  const list = ref<UserSessionQueryResponse[]>([]);

--- 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
@@ -72,11 +72,10 @@
  import UserSelector from '@/components/user/user/selector/index.vue';

  const emits = defineEmits(['submit']);
-  const props = defineProps({
-    visibleUser: {
-      type: Boolean,
-      default: true
-    }
+  const props = withDefaults(defineProps<Partial<{
+    visibleUser: boolean;
+  }>>(), {
+    visibleUser: true,
  });

  const { loading, setLoading } = useLoading();
--- a/orion-ops-ui/src/views/user/operator-log/components/operator-log-simple-table.vue
+++ b/orion-ops-ui/src/views/user/operator-log/components/operator-log-simple-table.vue
@@ -81,21 +81,14 @@
  import { replaceHtmlTag, clearHtmlTag } from '@/utils';
  import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';

-  const props = defineProps({
-    handleColumn: {
-      type: Boolean,
-      default: true
+  const props = withDefaults(defineProps<Partial<{
+    handleColumn: boolean;
+    current: boolean;
+    baseParams: object;
+  }>>(), {
+    baseParams: () => {
+      return {};
    },
-    current: {
-      type: Boolean,
-      default: false
-    },
-    baseParams: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    }
  });

  const pagination = usePagination();
--- a/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
@@ -64,6 +64,7 @@
  const open = (record: any) => {
    renderForm(record);
    setVisible(true);
+    // 加载用户角色
    loadRoles();
  };

--- a/orion-ops-ui/src/views/user/user/components/user-table.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -73,6 +73,13 @@
             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
             @page-size-change="(size) => fetchTableData(1, size)"
             :bordered="false">
+      <!-- 用户名 -->
+      <template #username="{ record }">
+        <span class="span-blue text-copy"
+              @click="copy(record.username)">
+          {{ record.username }}`
+        </span>
+      </template>
      <!-- 状态 -->
      <template #status="{ record }">
        <span class="circle" :style="{
@@ -166,6 +173,7 @@
  import { usePagination } from '@/types/table';
  import { useDictStore, useUserStore } from '@/store';
  import { useRouter } from 'vue-router';
+  import { copy } from '@/hooks/copy';

  const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);