diff --git a/docs/about/change-log.md b/docs/about/change-log.md
index d47e591f..03c94e33 100644
--- a/docs/about/change-log.md
+++ b/docs/about/change-log.md
@@ -5,9 +5,14 @@
 `2024-04-` `release`
 
 * 🐞 修复 批量执行选择模板后默认参数未自动设置
+* 🐞 修复 主机列表卡片视图重置条件后 tag 消失
+* 🐞 修复 主机分组授权页面刷新不显示 loading
+* 🐞 修复 面包屑组件路径显示不全的问题
+* 🩰 修改 主机终端亮色模式配色
 * 🌈 新增 定时执行模块
 * 🔨 修改 redisson 配置
-* 🔨 规范 orion-ops-framework 配置
+* 🔨 优化 orion-ops-framework 配置规范化
+* 🔨 优化 前端 props 命名规范化
 
 [如何升级](/about/update.md?id=_v103)
 
diff --git a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-sql-menu.sql.vm b/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-sql-menu.sql.vm
index ea55ea5b..23fee85e 100644
--- a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-sql-menu.sql.vm
+++ b/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-sql-menu.sql.vm
@@ -2,9 +2,9 @@
 
 -- 父菜单
 INSERT INTO system_menu
-  (parent_id, name, type, sort, visible, status, cache, creator, updater, deleted)
+  (parent_id, name, type, sort, visible, status, cache, component, creator, updater, deleted)
 VALUES
-  (0, '${table.comment}管理', 1, 10, 1, 1, 1, '1', '1', 0);
+  (0, '${table.comment}管理', 1, 10, 1, 1, 1, '${vue.moduleEntityFirstLower}Module', '1', '1', 0);
 
 -- 设置临时父菜单id
 SELECT @TMP_PARENT_ID:=LAST_INSERT_ID();
diff --git a/orion-ops-ui/src/assets/style/host-terminal-layout.less b/orion-ops-ui/src/assets/style/host-terminal-layout.less
index f190b787..1371612b 100644
--- 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;
diff --git a/orion-ops-ui/src/components/app/breadcrumb/index.vue b/orion-ops-ui/src/components/app/breadcrumb/index.vue
index aabd3fa3..7d7b79b1 100644
--- 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>
diff --git a/orion-ops-ui/src/components/app/setting/block.vue b/orion-ops-ui/src/components/app/setting/block.vue
index 3726ee43..6932b81c 100644
--- 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();
 
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 79d37edf..a4016e04 100644
--- 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,
diff --git a/orion-ops-ui/src/components/app/setting/index.vue b/orion-ops-ui/src/components/app/setting/index.vue
index 549bd52c..f5da977b 100644
--- 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();
diff --git a/orion-ops-ui/src/components/app/tab-bar/tab-item.vue b/orion-ops-ui/src/components/app/tab-bar/tab-item.vue
index 3bbbb556..660fac4b 100644
--- 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();
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 6d0d2743..79dc2210 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
@@ -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']);
 
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 6e92a93d..cb855292 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
@@ -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]);
       });
     }
   };
diff --git a/orion-ops-ui/src/components/asset/host-identity/selector/index.vue b/orion-ops-ui/src/components/asset/host-identity/selector/index.vue
index fddb1dca..9dafbab2 100644
--- 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']);
diff --git a/orion-ops-ui/src/components/asset/host-key/selector/index.vue b/orion-ops-ui/src/components/asset/host-key/selector/index.vue
index 2cc017a8..757523ac 100644
--- 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']);
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 929d5d41..9160ba58 100644
--- 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']);
 
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 db4cd655..f0088c4c 100644
--- 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();
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 18320c93..25f247d0 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
@@ -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']);
diff --git a/orion-ops-ui/src/components/system/dict-key/selector/index.vue b/orion-ops-ui/src/components/system/dict-key/selector/index.vue
index 8661efba..1d50d177 100644
--- 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']);
diff --git a/orion-ops-ui/src/components/system/menu/tree-selector/index.vue b/orion-ops-ui/src/components/system/menu/tree-selector/index.vue
index 0495297a..77adc16b 100644
--- 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']);
 
diff --git a/orion-ops-ui/src/components/system/message-box/index.vue b/orion-ops-ui/src/components/system/message-box/index.vue
index 4d5ffd76..07a8b444 100644
--- 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[];
diff --git a/orion-ops-ui/src/components/system/message-box/list.vue b/orion-ops-ui/src/components/system/message-box/list.vue
index 4742e16f..a661c331 100644
--- 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]);
diff --git a/orion-ops-ui/src/components/user/role/selector/index.vue b/orion-ops-ui/src/components/user/role/selector/index.vue
index 3e25e107..64add1b7 100644
--- 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']);
diff --git a/orion-ops-ui/src/components/user/user/selector/index.vue b/orion-ops-ui/src/components/user/user/selector/index.vue
index b90f8191..fa1aa0fc 100644
--- 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']);
diff --git a/orion-ops-ui/src/components/view/chart/index.vue b/orion-ops-ui/src/components/view/chart/index.vue
index 1a69307e..e8b56628 100644
--- 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>
diff --git a/orion-ops-ui/src/components/view/editor/index.vue b/orion-ops-ui/src/components/view/editor/index.vue
index b279fc3c..2736e5cb 100644
--- 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();
diff --git a/orion-ops-ui/src/components/view/json-editor/modal/index.vue b/orion-ops-ui/src/components/view/json-editor/modal/index.vue
index 5fb224ba..b3184683 100644
--- 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();
diff --git a/orion-ops-ui/src/components/view/shell-editor/modal/index.vue b/orion-ops-ui/src/components/view/shell-editor/modal/index.vue
index f3cd3891..77a33286 100644
--- 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();
diff --git a/orion-ops-ui/src/components/view/tab-router/index.vue b/orion-ops-ui/src/components/view/tab-router/index.vue
index 6deb50b7..66b9c390 100644
--- 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);
     }
   }
 
diff --git 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
index a4678ca3..32b2d278 100644
--- 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 }">
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 99cdd600..c570ad68 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
@@ -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();
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 b261701f..77f6a4be 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
@@ -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);
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 37a2a9e8..24811bff 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
@@ -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();
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 cf52651b..4a774057 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
@@ -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();
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-list.vue b/orion-ops-ui/src/views/asset/grant/components/host-list.vue
index e03d1651..ae0d2418 100644
--- 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();
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 2d61c95d..388ae493 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
@@ -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']);
 
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 e35bdf99..ad76b95d 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
@@ -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']);
 
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 df339321..b154cffd 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
@@ -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 => {
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 5e0b9591..1e0977a9 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
@@ -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']);
 
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 7ad474af..c3181b4d 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,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"
diff --git 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
index bd815ab5..2aa73e8f 100644
--- 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']);
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 6826b9f1..46185381 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
@@ -244,7 +244,7 @@
 
   // 重置条件
   const reset = () => {
-    resetObject(formModel, ['extra']);
+    resetObject(formModel, ['queryTag']);
     fetchCardData();
   };
 
diff --git a/orion-ops-ui/src/views/exec/exec-log/index.vue b/orion-ops-ui/src/views/exec/exec-log/index.vue
index c3f4bcc2..b365c4a5 100644
--- 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();
 
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 94252523..911bfd9b 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
@@ -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>
 
diff --git 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
index 77cd5bb5..2fd3a222 100644
--- 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;
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 86ca6c92..aef3d14c 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,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[]>([]);
 
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 4d7db82d..43d62a50 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,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();
diff --git 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
index aac3dc89..a429df08 100644
--- 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();
 
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 f0f5eca9..37b1bb9d 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,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[]>([]);
 
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 b1fb93b4..66d52ac9 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
@@ -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();
diff --git 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
index a653f7aa..dfc036f5 100644
--- 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();
diff --git 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
index f482887a..074abe93 100644
--- 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();
   };
 
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 a1f4d65b..e80cb612 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
@@ -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']);