From acb47a17b43a8f597ab40c43d2020a44789d4b22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Sun, 3 Apr 2022 19:45:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=A7=84=E8=8C=83=E5=8C=96?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4.vue=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=8F=8A=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 12 ++--
 src/components/AppProvider/DialogContent.vue  |  4 +-
 src/components/AppProvider/LoadingBar.vue     |  4 +-
 src/components/AppProvider/MessageContent.vue |  4 +-
 src/components/AppProvider/index.vue          | 30 +++++-----
 src/layout/components/header/BreadCrumb.vue   | 16 ++---
 src/layout/components/header/HeaderAction.vue | 18 +++---
 src/layout/components/header/index.vue        | 14 ++---
 src/layout/components/sidebar/SideLogo.vue    | 12 ++--
 src/layout/components/sidebar/SideMenu.vue    | 24 ++++----
 src/layout/components/sidebar/index.vue       |  4 +-
 src/layout/index.vue                          |  6 +-
 src/views/error-page/404.vue                  | 10 ++--
 src/views/examples/table/post/post-create.vue |  2 +-
 src/views/login/index.vue                     | 60 +++++++++----------
 src/views/redirect/index.vue                  |  4 +-
 src/views/test-page/TestDialog.vue            | 12 ++--
 src/views/test-page/TestKeepAlive.vue         | 12 ++--
 src/views/test-page/TestMessage.vue           | 12 ++--
 19 files changed, 130 insertions(+), 130 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f0dc247..7b0f2ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,15 @@
-<script setup>
-import AppProvider from '@/components/AppProvider/index.vue'
-</script>
-
 <template>
-  <app-provider>
+  <AppProvider>
     <router-view v-slot="{ Component }">
       <component :is="Component" />
     </router-view>
-  </app-provider>
+  </AppProvider>
 </template>
 
+<script setup>
+import AppProvider from '@/components/AppProvider/index.vue'
+</script>
+
 <style lang="scss">
 #app {
   height: 100%;
diff --git a/src/components/AppProvider/DialogContent.vue b/src/components/AppProvider/DialogContent.vue
index eacb91c..1f32e83 100644
--- a/src/components/AppProvider/DialogContent.vue
+++ b/src/components/AppProvider/DialogContent.vue
@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { isNullOrUndef } from '@/utils/is'
 import { useDialog } from 'naive-ui'
@@ -48,5 +50,3 @@ Object.defineProperty(window, '$dialog', {
   writable: false,
 })
 </script>
-
-<template></template>
diff --git a/src/components/AppProvider/LoadingBar.vue b/src/components/AppProvider/LoadingBar.vue
index cee9a92..4cbbe31 100644
--- a/src/components/AppProvider/LoadingBar.vue
+++ b/src/components/AppProvider/LoadingBar.vue
@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useLoadingBar } from 'naive-ui'
 window['$loadingBar'] = useLoadingBar()
@@ -6,5 +8,3 @@ Object.defineProperty(window, '$loadingBar', {
   writable: false,
 })
 </script>
-
-<template></template>
diff --git a/src/components/AppProvider/MessageContent.vue b/src/components/AppProvider/MessageContent.vue
index 428c73c..6565982 100644
--- a/src/components/AppProvider/MessageContent.vue
+++ b/src/components/AppProvider/MessageContent.vue
@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useMessage } from 'naive-ui'
 
@@ -68,5 +70,3 @@ Object.defineProperty(window, '$message', {
   writable: false,
 })
 </script>
-
-<template></template>
diff --git a/src/components/AppProvider/index.vue b/src/components/AppProvider/index.vue
index 5763368..aed1882 100644
--- a/src/components/AppProvider/index.vue
+++ b/src/components/AppProvider/index.vue
@@ -1,3 +1,18 @@
+<template>
+  <n-config-provider :theme-overrides="appStore.themeOverrides">
+    <n-loading-bar-provider>
+      <LoadingBar />
+      <n-dialog-provider>
+        <DialogContent />
+        <n-message-provider>
+          <MessageContent />
+          <slot></slot>
+        </n-message-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
 <script setup>
 import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
@@ -6,18 +21,3 @@ import LoadingBar from './LoadingBar.vue'
 import { useAppStore } from '@/store/modules/app'
 const appStore = useAppStore()
 </script>
-
-<template>
-  <n-config-provider :theme-overrides="appStore.themeOverrides">
-    <n-loading-bar-provider>
-      <loading-bar />
-      <n-dialog-provider>
-        <dialog-content />
-        <n-message-provider>
-          <message-content />
-          <slot></slot>
-        </n-message-provider>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
-  </n-config-provider>
-</template>
diff --git a/src/layout/components/header/BreadCrumb.vue b/src/layout/components/header/BreadCrumb.vue
index 7ec9e7b..cc6144d 100644
--- a/src/layout/components/header/BreadCrumb.vue
+++ b/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>
diff --git a/src/layout/components/header/HeaderAction.vue b/src/layout/components/header/HeaderAction.vue
index ff97cf7..86f252e 100644
--- a/src/layout/components/header/HeaderAction.vue
+++ b/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;
diff --git a/src/layout/components/header/index.vue b/src/layout/components/header/index.vue
index ed563fd..3190837 100644
--- a/src/layout/components/header/index.vue
+++ b/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;
diff --git a/src/layout/components/sidebar/SideLogo.vue b/src/layout/components/sidebar/SideLogo.vue
index 75ec684..64f071c 100644
--- a/src/layout/components/sidebar/SideLogo.vue
+++ b/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;
diff --git a/src/layout/components/sidebar/SideMenu.vue b/src/layout/components/sidebar/SideMenu.vue
index b783dda..dac3db6 100644
--- a/src/layout/components/sidebar/SideMenu.vue
+++ b/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;
diff --git a/src/layout/components/sidebar/index.vue b/src/layout/components/sidebar/index.vue
index 9af6e22..8ec4cc0 100644
--- a/src/layout/components/sidebar/index.vue
+++ b/src/layout/components/sidebar/index.vue
@@ -4,6 +4,6 @@ import SideMenu from './SideMenu.vue'
 </script>
 
 <template>
-  <side-logo />
-  <side-menu />
+  <SideLogo />
+  <SideMenu />
 </template>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 8bf4274..4cb961a 100644
--- a/src/layout/index.vue
+++ b/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>
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 4a20113..67a3938 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -1,8 +1,3 @@
-<script setup>
-import { useRouter } from 'vue-router'
-const { replace } = useRouter()
-</script>
-
 <template>
   <div class="page-404">
     <n-result status="404" description="抱歉，您访问的页面不存在。">
@@ -16,6 +11,11 @@ const { replace } = useRouter()
   </div>
 </template>
 
+<script setup>
+import { useRouter } from 'vue-router'
+const { replace } = useRouter()
+</script>
+
 <style lang="scss" scoped>
 .page-404 {
   height: 100%;
diff --git a/src/views/examples/table/post/post-create.vue b/src/views/examples/table/post/post-create.vue
index ace38a3..83611c8 100644
--- a/src/views/examples/table/post/post-create.vue
+++ b/src/views/examples/table/post/post-create.vue
@@ -4,7 +4,7 @@
       <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
-    <md-editor v-model="post.content" style="height: calc(100vh - 140px)" />
+    <MdEditor v-model="post.content" style="height: calc(100vh - 140px)" />
   </div>
 </template>
 
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 62af478..bb6f2d7 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,3 +1,33 @@
+<template>
+  <div class="login-page">
+    <div class="form-wrapper">
+      <h2 class="title">{{ title }}</h2>
+      <div class="form-item" mt-20>
+        <input
+          v-model="loginInfo.name"
+          autofocus
+          type="text"
+          class="input"
+          placeholder="username"
+          @keydown.enter="handleLogin"
+        />
+      </div>
+      <div class="form-item" mt-20>
+        <input
+          v-model="loginInfo.password"
+          type="password"
+          class="input"
+          placeholder="password"
+          @keydown.enter="handleLogin"
+        />
+      </div>
+      <div class="form-item" mt-20>
+        <button class="submit-btn" @click="handleLogin">登录</button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
 import { ref, unref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -53,36 +83,6 @@ async function handleLogin() {
 }
 </script>
 
-<template>
-  <div class="login-page">
-    <div class="form-wrapper">
-      <h2 class="title">{{ title }}</h2>
-      <div class="form-item" mt-20>
-        <input
-          v-model="loginInfo.name"
-          autofocus
-          type="text"
-          class="input"
-          placeholder="username"
-          @keydown.enter="handleLogin"
-        />
-      </div>
-      <div class="form-item" mt-20>
-        <input
-          v-model="loginInfo.password"
-          type="password"
-          class="input"
-          placeholder="password"
-          @keydown.enter="handleLogin"
-        />
-      </div>
-      <div class="form-item" mt-20>
-        <button class="submit-btn" @click="handleLogin">登录</button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 @property --perA {
   syntax: '<percentage>';
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index 0eed637..f36b1d2 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useRouter } from 'vue-router'
 
@@ -19,5 +21,3 @@ replace({
   query,
 })
 </script>
-
-<template></template>
diff --git a/src/views/test-page/TestDialog.vue b/src/views/test-page/TestDialog.vue
index a00da2c..8441688 100644
--- a/src/views/test-page/TestDialog.vue
+++ b/src/views/test-page/TestDialog.vue
@@ -1,3 +1,9 @@
+<template>
+  <div p24>
+    <n-button type="error" @click="handleDelete">删除</n-button>
+  </div>
+</template>
+
 <script setup name="TestDialog">
 const handleDelete = function () {
   $dialog.confirm({
@@ -11,9 +17,3 @@ const handleDelete = function () {
   })
 }
 </script>
-
-<template>
-  <div p24>
-    <n-button type="error" @click="handleDelete">删除</n-button>
-  </div>
-</template>
diff --git a/src/views/test-page/TestKeepAlive.vue b/src/views/test-page/TestKeepAlive.vue
index 514f4cb..12f888e 100644
--- a/src/views/test-page/TestKeepAlive.vue
+++ b/src/views/test-page/TestKeepAlive.vue
@@ -1,3 +1,9 @@
+<template>
+  <div p24>
+    <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
+  </div>
+</template>
+
 <!--使用keep-alive须设置name，注意请与对应的路由的name保持一致，方便统一处理-->
 <script setup name="TEST-KEEP-ALIVE">
 import { onMounted, onActivated, onDeactivated } from 'vue'
@@ -14,9 +20,3 @@ onDeactivated(() => {
   $message.success('触发onDeactivated')
 })
 </script>
-
-<template>
-  <div p24>
-    <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
-  </div>
-</template>
diff --git a/src/views/test-page/TestMessage.vue b/src/views/test-page/TestMessage.vue
index 5ef2db8..a042e84 100644
--- a/src/views/test-page/TestMessage.vue
+++ b/src/views/test-page/TestMessage.vue
@@ -1,3 +1,9 @@
+<template>
+  <div p24>
+    <n-button type="primary" @click="handleLogin">点击登陆</n-button>
+  </div>
+</template>
+
 <script setup>
 function handleLogin() {
   $message.loading('登陆中...')
@@ -10,9 +16,3 @@ function handleLogin() {
   }, 2000)
 }
 </script>
-
-<template>
-  <div p24>
-    <n-button type="primary" @click="handleLogin">点击登陆</n-button>
-  </div>
-</template>