refactor: 重构为更推荐的 vue3 代码组织方式

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,4 +1,68 @@
-<!-- 侧边栏 Item -->
+<script lang="ts" setup>
+import { computed, PropType } from "vue"
+import { RouteRecordRaw } from "vue-router"
+import { isExternal } from "@/utils/validate"
+import path from "path-browserify"
+import SidebarItemLink from "./SidebarItemLink.vue"
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<RouteRecordRaw>,
+    required: true
+  },
+  isCollapse: {
+    type: Boolean,
+    required: false
+  },
+  isFirstLevel: {
+    type: Boolean,
+    default: true
+  },
+  basePath: {
+    type: String,
+    required: true
+  }
+})
+
+const alwaysShowRootMenu = computed(() => {
+  return !!(props.item.meta && props.item.meta.alwaysShow)
+})
+const showingChildNumber = computed(() => {
+  if (props.item.children) {
+    const showingChildren = props.item.children.filter((item) => {
+      return !(item.meta && item.meta.hidden)
+    })
+    return showingChildren.length
+  }
+  return 0
+})
+const theOnlyOneChild = computed(() => {
+  if (showingChildNumber.value > 1) {
+    return null
+  }
+  if (props.item.children) {
+    for (const child of props.item.children) {
+      if (!child.meta || !child.meta.hidden) {
+        return child
+      }
+    }
+  }
+  // If there is no children, return itself with path removed,
+  // because this.basePath already contains item's path information
+  return { ...props.item, path: "" }
+})
+
+const resolvePath = (routePath: string) => {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  return path.resolve(props.basePath, routePath)
+}
+</script>
+
 <template>
   <div v-if="!item.meta || !item.meta.hidden" :class="{ 'simple-mode': isCollapse, 'first-level': isFirstLevel }">
     <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
@@ -30,72 +94,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import path from "path-browserify"
-import { computed, PropType } from "vue"
-import { RouteRecordRaw } from "vue-router"
-import { isExternal } from "@/utils/validate"
-import SidebarItemLink from "./SidebarItemLink.vue"
-
-const props = defineProps({
-  item: {
-    type: Object as PropType<RouteRecordRaw>,
-    required: true
-  },
-  isCollapse: {
-    type: Boolean,
-    required: false
-  },
-  isFirstLevel: {
-    type: Boolean,
-    default: true
-  },
-  basePath: {
-    type: String,
-    required: true
-  }
-})
-const alwaysShowRootMenu = computed(() => {
-  return !!(props.item.meta && props.item.meta.alwaysShow)
-})
-
-const showingChildNumber = computed(() => {
-  if (props.item.children) {
-    const showingChildren = props.item.children.filter((item) => {
-      return !(item.meta && item.meta.hidden)
-    })
-    return showingChildren.length
-  }
-  return 0
-})
-
-const theOnlyOneChild = computed(() => {
-  if (showingChildNumber.value > 1) {
-    return null
-  }
-  if (props.item.children) {
-    for (const child of props.item.children) {
-      if (!child.meta || !child.meta.hidden) {
-        return child
-      }
-    }
-  }
-  // If there is no children, return itself with path removed,
-  // because this.basePath already contains item's path information
-  return { ...props.item, path: "" }
-})
-
-const resolvePath = (routePath: string) => {
-  if (isExternal(routePath)) {
-    return routePath
-  }
-  if (isExternal(props.basePath)) {
-    return props.basePath
-  }
-  return path.resolve(props.basePath, routePath)
-}
-</script>
-
 <style lang="scss" scoped>
 .svg-icon {
   margin-right: 20px;