refactor: 规范化调整.vue文件结构及命名

src/layout/components/header/BreadCrumb.vue

@@ -1,3 +1,11 @@
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
+      {{ item.meta.title }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
 <script setup>
 import { useRouter } from 'vue-router'
 const router = useRouter()
@@ -8,11 +16,3 @@ function handleBreadClick(path) {
   router.push(path)
 }
 </script>
-
-<template>
-  <n-breadcrumb>
-    <n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
-      {{ item.meta.title }}
-    </n-breadcrumb-item>
-  </n-breadcrumb>
-</template>

src/layout/components/header/HeaderAction.vue

@@ -1,3 +1,12 @@
+<template>
+  <n-dropdown :options="options" @select="handleSelect">
+    <div class="avatar">
+      <img :src="userStore.avatar" />
+      <span>{{ userStore.name }}</span>
+    </div>
+  </n-dropdown>
+</template>
+
 <script setup>
 import { useUserStore } from '@/store/modules/user'
 import { useRouter } from 'vue-router'
@@ -71,15 +80,6 @@ function switchRole() {
 }
 </script>
 
-<template>
-  <n-dropdown :options="options" @select="handleSelect">
-    <div class="avatar">
-      <img :src="userStore.avatar" />
-      <span>{{ userStore.name }}</span>
-    </div>
-  </n-dropdown>
-</template>
-
 <style lang="scss" scoped>
 .avatar {
   display: flex;

src/layout/components/header/index.vue

@@ -1,15 +1,15 @@
+<template>
+  <header class="header">
+    <BreadCrumb />
+    <HeaderAction />
+  </header>
+</template>
+
 <script setup>
 import BreadCrumb from './BreadCrumb.vue'
 import HeaderAction from './HeaderAction.vue'
 </script>
 
-<template>
-  <header class="header">
-    <bread-crumb />
-    <header-action />
-  </header>
-</template>
-
 <style lang="scss" scoped>
 .header {
   padding: 0 24px;

src/layout/components/sidebar/SideLogo.vue

@@ -1,12 +1,7 @@
-<script setup>
-import { LastfmSquare } from '@vicons/fa'
-const title = import.meta.env.VITE_APP_TITLE
-</script>
-
 <template>
   <div class="logo">
     <n-icon size="36" color="#316c72">
-      <lastfm-square />
+      <LastfmSquare />
     </n-icon>
     <router-link to="/">
       <n-gradient-text type="primary">{{ title }}</n-gradient-text>
@@ -14,6 +9,11 @@ const title = import.meta.env.VITE_APP_TITLE
   </div>
 </template>
 
+<script setup>
+import { LastfmSquare } from '@vicons/fa'
+const title = import.meta.env.VITE_APP_TITLE
+</script>
+
 <style lang="scss" scoped>
 .logo {
   height: 64px;

src/layout/components/sidebar/SideMenu.vue

@@ -1,3 +1,15 @@
+<template>
+  <n-menu
+    class="side-menu"
+    accordion
+    :indent="12"
+    :root-indent="12"
+    :options="menuOptions"
+    :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
+    @update:value="handleMenuSelect"
+  />
+</template>
+
 <script setup>
 import { useRouter } from 'vue-router'
 import { computed, h } from 'vue'
@@ -82,18 +94,6 @@ function handleMenuSelect(key, item) {
 }
 </script>
 
-<template>
-  <n-menu
-    class="side-menu"
-    accordion
-    :indent="12"
-    :root-indent="12"
-    :options="menuOptions"
-    :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
-    @update:value="handleMenuSelect"
-  />
-</template>
-
 <style lang="scss">
 .n-menu {
   margin-top: 10px;

src/layout/components/sidebar/index.vue

@@ -4,6 +4,6 @@ import SideMenu from './SideMenu.vue'
 </script>
 
 <template>
-  <side-logo />
-  <side-menu />
+  <SideLogo />
+  <SideMenu />
 </template>

src/layout/index.vue

@@ -8,14 +8,14 @@ import AppMain from './components/AppMain.vue'
   <div class="layout">
     <n-layout has-sider position="absolute">
       <n-layout-sider :width="200" :collapsed-width="0" :native-scrollbar="false">
-        <side-menu />
+        <SideMenu />
       </n-layout-sider>
       <n-layout>
         <n-layout-header>
-          <app-header />
+          <AppHeader />
         </n-layout-header>
         <n-layout position="absolute" style="top: 60px; background-color: #f5f6fb" :native-scrollbar="false">
-          <app-main />
+          <AppMain />
         </n-layout>
       </n-layout>
     </n-layout>