feat: using Vue 3.5's new "Reactive Props Destructure"

pany-ang · pany-ang · commit ae025731a8d1 · 2025-06-23T17:04:31.000+08:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,9 @@
   // Use workspace TypeScript version
   "typescript.tsdk": "node_modules/typescript/lib",
 
+  // Show inlay hints for destructured props
+  "vue.inlayHints.destructuredProps": true,
+
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
diff --git a/src/common/components/Screenfull/index.vue b/src/common/components/Screenfull/index.vue
@@ -12,12 +12,7 @@ interface Props {
   content?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  element: "html",
-  openTips: "全屏",
-  exitTips: "退出全屏",
-  content: false
-})
+const { element = "html", openTips = "全屏", exitTips = "退出全屏", content = false } = defineProps<Props>()
 
 const CONTENT_LARGE = "content-large"
 
@@ -28,11 +23,11 @@ const classList = document.body.classList
 // #region 全屏
 const isEnabled = screenfull.isEnabled
 const isFullscreen = ref<boolean>(false)
-const fullscreenTips = computed(() => (isFullscreen.value ? props.exitTips : props.openTips))
+const fullscreenTips = computed(() => (isFullscreen.value ? exitTips : openTips))
 const fullscreenSvgName = computed(() => (isFullscreen.value ? "fullscreen-exit" : "fullscreen"))
 
 function handleFullscreenClick() {
-  const dom = document.querySelector(props.element) || undefined
+  const dom = document.querySelector(element) || undefined
   isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
 }
 
@@ -79,7 +74,7 @@ function handleContentFullClick() {
 <template>
   <div>
     <!-- 全屏 -->
-    <el-tooltip v-if="!props.content" effect="dark" :content="fullscreenTips" placement="bottom">
+    <el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
       <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" class="svg-icon" />
     </el-tooltip>
     <!-- 内容区 -->
diff --git a/src/layouts/components/Hamburger/index.vue b/src/layouts/components/Hamburger/index.vue
@@ -5,9 +5,7 @@ interface Props {
   isActive?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  isActive: false
-})
+const { isActive = false } = defineProps<Props>()
 
 const emit = defineEmits<{
   toggleClick: []
@@ -21,7 +19,7 @@ function toggleClick() {
 <template>
   <div @click="toggleClick">
     <el-icon :size="20" class="icon">
-      <Fold v-if="props.isActive" />
+      <Fold v-if="isActive" />
       <Expand v-else />
     </el-icon>
   </div>
diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue
@@ -8,17 +8,15 @@ interface Props {
   collapse?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  collapse: true
-})
+const { collapse = true } = defineProps<Props>()
 
 const { isLeft, isTop } = useLayoutMode()
 </script>
 
 <template>
-  <div class="layout-logo-container" :class="{ 'collapse': props.collapse, 'layout-mode-top': isTop }">
+  <div class="layout-logo-container" :class="{ 'collapse': collapse, 'layout-mode-top': isTop }">
     <transition name="layout-logo-fade">
-      <router-link v-if="props.collapse" key="collapse" to="/">
+      <router-link v-if="collapse" key="collapse" to="/">
         <img :src="logo" class="layout-logo">
       </router-link>
       <router-link v-else key="expand" to="/">
diff --git a/src/layouts/components/Sidebar/Item.vue b/src/layouts/components/Sidebar/Item.vue
@@ -9,15 +9,13 @@ interface Props {
   basePath?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  basePath: ""
-})
+const { item, basePath = "" } = defineProps<Props>()
 
 /** 是否始终显示根菜单 */
-const alwaysShowRootMenu = computed(() => props.item.meta?.alwaysShow)
+const alwaysShowRootMenu = computed(() => item.meta?.alwaysShow)
 
 /** 显示的子菜单 */
-const showingChildren = computed(() => props.item.children?.filter(child => !child.meta?.hidden) ?? [])
+const showingChildren = computed(() => item.children?.filter(child => !child.meta?.hidden) ?? [])
 
 /** 显示的子菜单数量 */
 const showingChildNumber = computed(() => showingChildren.value.length)
@@ -31,7 +29,7 @@ const theOnlyOneChild = computed(() => {
     case number === 1:
       return showingChildren.value[0]
     default:
-      return { ...props.item, path: "" }
+      return { ...item, path: "" }
   }
 })
 
@@ -40,10 +38,10 @@ function resolvePath(routePath: string) {
   switch (true) {
     case isExternal(routePath):
       return routePath
-    case isExternal(props.basePath):
-      return props.basePath
+    case isExternal(basePath):
+      return basePath
     default:
-      return path.resolve(props.basePath, routePath)
+      return path.resolve(basePath, routePath)
   }
 }
 </script>
@@ -60,13 +58,13 @@ function resolvePath(routePath: string) {
       </el-menu-item>
     </Link>
   </template>
-  <el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
+  <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
     <template #title>
-      <SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" class="svg-icon" />
-      <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
-      <span v-if="props.item.meta?.title" class="title">{{ props.item.meta.title }}</span>
+      <SvgIcon v-if="item.meta?.svgIcon" :name="item.meta.svgIcon" class="svg-icon" />
+      <component v-else-if="item.meta?.elIcon" :is="item.meta.elIcon" class="el-icon" />
+      <span v-if="item.meta?.title" class="title">{{ item.meta.title }}</span>
     </template>
-    <template v-if="props.item.children">
+    <template v-if="item.children">
       <Item
         v-for="child in showingChildren"
         :key="child.path"
