perf: 代码优化 统一将 props 运行时声明修改为类型声明

src/components/Notify/NotifyList.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { type PropType } from "vue"
 import { type ListItem } from "./data"
 
-const props = defineProps({
+interface Props {
-  list: {
+  list: ListItem[]
-    type: Object as PropType<ListItem[]>,
+}
-    required: true
+
-  }
+const props = defineProps<Props>()
-})
 </script>
 
 <template>

src/components/Screenfull/index.vue

@@ -3,22 +3,19 @@ import { ref, watchEffect } from "vue"
 import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
-const props = defineProps({
+interface Props {
+  element?: string
+  openTips?: string
+  exitTips?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
   /** 全屏的元素，默认是 html */
-  element: {
+  element: "html",
-    type: String,
-    default: "html"
-  },
   /** 打开全屏提示语 */
-  openTips: {
+  openTips: "全屏",
-    type: String,
-    default: "全屏"
-  },
   /** 关闭全屏提示语 */
-  exitTips: {
+  exitTips: "退出全屏"
-    type: String,
-    default: "退出全屏"
-  }
 })
 
 const tips = ref<string>(props.openTips)

src/components/SvgIcon/index.vue

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-const props = defineProps({
+interface Props {
-  prefix: {
+  prefix?: string
-    type: String,
+  name: string
-    default: "icon"
+}
-  },
+
-  name: {
+const props = withDefaults(defineProps<Props>(), {
-    type: String,
+  prefix: "icon"
-    required: true
-  }
 })
 
 const symbolId = computed(() => `#${props.prefix}-${props.name}`)

src/layout/components/Hamburger/index.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { Expand, Fold } from "@element-plus/icons-vue"
 
-const props = defineProps({
+interface Props {
-  isActive: {
+  isActive?: boolean
-    type: Boolean,
+}
-    default: false
+
-  }
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
 })
 
 /** Vue 3.3+ defineEmits 语法 */

src/layout/components/RightPanel/index.vue

@@ -2,11 +2,12 @@
 import { ref } from "vue"
 import { Setting } from "@element-plus/icons-vue"
 
-const props = defineProps({
+interface Props {
-  buttonTop: {
+  buttonTop?: number
-    type: Number,
+}
-    default: 350
+
-  }
+const props = withDefaults(defineProps<Props>(), {
+  buttonTop: 350
 })
 
 const buttonTopCss = props.buttonTop + "px"

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,27 +1,21 @@
 <script lang="ts" setup>
-import { type PropType, computed } from "vue"
+import { computed } from "vue"
 import { type RouteRecordRaw } from "vue-router"
 import SidebarItemLink from "./SidebarItemLink.vue"
 import { isExternal } from "@/utils/validate"
 import path from "path-browserify"
 
-const props = defineProps({
+interface Props {
-  item: {
+  item: RouteRecordRaw
-    type: Object as PropType<RouteRecordRaw>,
+  isCollapse?: boolean
-    required: true
+  isFirstLevel?: boolean
-  },
+  basePath?: string
-  isCollapse: {
+}
-    type: Boolean,
+
-    default: false
+const props = withDefaults(defineProps<Props>(), {
-  },
+  isCollapse: false,
-  isFirstLevel: {
+  isFirstLevel: true,
-    type: Boolean,
+  basePath: ""
-    default: true
-  },
-  basePath: {
-    type: String,
-    default: ""
-  }
 })
 
 /** 是否始终显示根菜单 */

src/layout/components/Sidebar/SidebarItemLink.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { isExternal } from "@/utils/validate"
 
-const props = defineProps({
+interface Props {
-  to: {
+  to: string
-    type: String,
+}
-    required: true
+
-  }
+const props = defineProps<Props>()
-})
 </script>
 
 <template>

src/layout/components/Sidebar/SidebarLogo.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-const props = defineProps({
+interface Props {
-  collapse: {
+  collapse?: boolean
-    type: Boolean,
+}
-    default: true
+
-  }
+const props = withDefaults(defineProps<Props>(), {
+  collapse: true
 })
 </script>
 

src/layout/components/TagsView/ScrollPane.vue

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
-import { type PropType, ref, watch, nextTick } from "vue"
+import { ref, watch, nextTick } from "vue"
 import { RouterLink, useRoute } from "vue-router"
 import { ElScrollbar } from "element-plus"
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
 import { useSettingsStore } from "@/store/modules/settings"
 import Screenfull from "@/components/Screenfull/index.vue"
 
-const props = defineProps({
+interface Props {
-  tagRefs: {
+  tagRefs: InstanceType<typeof RouterLink>[]
-    type: Object as PropType<InstanceType<typeof RouterLink>[]>,
+}
-    required: true
+
-  }
+const props = defineProps<Props>()
-})
 
 const route = useRoute()
 const settingsStore = useSettingsStore()