🔨 修改 defineProps 规范.

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>

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();
 

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,

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();

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();

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']);
 

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]);
       });
     }
   };

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']);

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']);

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']);
 

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();

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']);

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']);

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']);
 

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[];

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]);

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']);

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']);

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>

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();

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();

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();

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);
     }
   }