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

src/views/dashboard/admin/index.vue

@@ -1,4 +1,3 @@
-<!-- admin 权限主页 -->
 <template>
   <div class="app-container">Admin 权限可见</div>
 </template>

src/views/dashboard/editor/index.vue

@@ -1,4 +1,3 @@
-<!-- editor 权限主页 -->
 <template>
   <div class="app-container">Editor 权限可见</div>
 </template>

src/views/dashboard/index.vue

@@ -1,10 +1,6 @@
-<template>
-  <component :is="currentRole === 'admin' ? AdminDashboard : EditorDashboard" />
-</template>
-
 <script lang="ts" setup>
-import { useUserStore } from "@/store/modules/user"
 import { computed, onBeforeMount, ref } from "vue"
+import { useUserStore } from "@/store/modules/user"
 import AdminDashboard from "./admin/index.vue"
 import EditorDashboard from "./editor/index.vue"
 
@@ -18,3 +14,7 @@ onBeforeMount(() => {
   }
 })
 </script>
+
+<template>
+  <component :is="currentRole === 'admin' ? AdminDashboard : EditorDashboard" />
+</template>

src/views/login/index.vue

@@ -1,57 +1,7 @@
-<template>
-  <div class="login-container">
-    <ThemeSwitch class="theme-switch" />
-    <div class="login-card">
-      <div class="title">
-        <img src="@/assets/layout/logo-text-2.png" />
-      </div>
-      <div class="content">
-        <el-form ref="loginFormDom" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin">
-          <el-form-item prop="username">
-            <el-input
-              v-model="loginForm.username"
-              placeholder="用户名"
-              type="text"
-              tabindex="1"
-              :prefix-icon="User"
-              size="large"
-            />
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              placeholder="密码"
-              type="password"
-              tabindex="2"
-              :prefix-icon="Lock"
-              size="large"
-            />
-          </el-form-item>
-          <el-form-item prop="code">
-            <el-input
-              v-model="loginForm.code"
-              placeholder="验证码"
-              type="text"
-              tabindex="3"
-              :prefix-icon="Key"
-              maxlength="4"
-              size="large"
-            />
-            <span class="show-code">
-              <img :src="codeUrl" @click="createCode" />
-            </span>
-          </el-form-item>
-          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin"> 登 录 </el-button>
-        </el-form>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { reactive, ref } from "vue"
-import { useUserStore } from "@/store/modules/user"
 import { useRouter } from "vue-router"
+import { useUserStore } from "@/store/modules/user"
 import { User, Lock, Key } from "@element-plus/icons-vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 
@@ -128,6 +78,56 @@ const createCode: () => void = () => {
 // createCode()
 </script>
 
+<template>
+  <div class="login-container">
+    <ThemeSwitch class="theme-switch" />
+    <div class="login-card">
+      <div class="title">
+        <img src="@/assets/layout/logo-text-2.png" />
+      </div>
+      <div class="content">
+        <el-form ref="loginFormDom" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin">
+          <el-form-item prop="username">
+            <el-input
+              v-model="loginForm.username"
+              placeholder="用户名"
+              type="text"
+              tabindex="1"
+              :prefix-icon="User"
+              size="large"
+            />
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              placeholder="密码"
+              type="password"
+              tabindex="2"
+              :prefix-icon="Lock"
+              size="large"
+            />
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
+              v-model="loginForm.code"
+              placeholder="验证码"
+              type="text"
+              tabindex="3"
+              :prefix-icon="Key"
+              maxlength="4"
+              size="large"
+            />
+            <span class="show-code">
+              <img :src="codeUrl" @click="createCode" />
+            </span>
+          </el-form-item>
+          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin"> 登 录 </el-button>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .login-container {
   display: flex;

src/views/permission/components/SwitchRoles.vue

@@ -1,4 +1,19 @@
-<!-- 切换角色 -->
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue"
+import { useUserStore } from "@/store/modules/user"
+
+const userStore = useUserStore()
+
+const emit = defineEmits(["change"])
+
+const roles = computed(() => userStore.roles)
+const currentRole = ref(roles.value[0])
+watch(currentRole, async (value) => {
+  await userStore.changeRoles(value)
+  emit("change")
+})
+</script>
+
 <template>
   <div>
     <div style="margin-bottom: 15px">你的权限：{{ roles }}</div>
@@ -11,17 +26,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts" setup>
-import { useUserStore } from "@/store/modules/user"
-import { computed, ref, watch } from "vue"
-
-const userStore = useUserStore()
-const emit = defineEmits(["change"])
-const roles = computed(() => userStore.roles)
-const currentRole = ref(roles.value[0])
-watch(currentRole, async (value) => {
-  await userStore.changeRoles(value)
-  emit("change")
-})
-</script>

src/views/permission/directive.vue

@@ -1,4 +1,16 @@
-<!-- 指令权限、权限判断函数的使用 -->
+<script lang="ts" setup>
+import { reactive } from "vue"
+import { checkPermission } from "@/utils/permission" // 权限判断函数
+import SwitchRoles from "./components/SwitchRoles.vue"
+
+const state = reactive({
+  key: 1,
+  handleRolesChange: () => {
+    state.key++
+  }
+})
+</script>
+
 <template>
   <div class="app-container">
     <SwitchRoles @change="state.handleRolesChange" />
@@ -56,19 +68,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { reactive } from "vue"
-import { checkPermission } from "@/utils/permission" // 权限判断函数
-import SwitchRoles from "./components/switch-roles.vue"
-
-const state = reactive({
-  key: 1,
-  handleRolesChange: () => {
-    state.key++
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .permission-alert {
   width: 320px;

src/views/permission/page.vue

@@ -1,19 +1,19 @@
-<!-- 页面权限测试页 -->
-<template>
-  <div class="app-container">
-    <el-tag type="success" size="large" style="margin-bottom: 15px"> 当前页面只有 admin 权限可见 </el-tag>
-    <SwitchRoles @change="handleRolesChange" />
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { useRouter } from "vue-router"
-import SwitchRoles from "./components/switch-roles.vue"
+import SwitchRoles from "./components/SwitchRoles.vue"
 
 const router = useRouter()
+
 const handleRolesChange = () => {
   router.push({ path: "/401" }).catch((err) => {
     console.warn(err)
   })
 }
 </script>
+
+<template>
+  <div class="app-container">
+    <el-tag type="success" size="large" style="margin-bottom: 15px"> 当前页面只有 admin 权限可见 </el-tag>
+    <SwitchRoles @change="handleRolesChange" />
+  </div>
+</template>

src/views/redirect/index.vue

@@ -1,16 +1,16 @@
-<!-- 重定向 -->
-<template>
-  <div />
-</template>
-
 <script lang="ts" setup>
 import { useRoute, useRouter } from "vue-router"
 
 const { params, query } = useRoute()
 const { path } = params
+
 useRouter()
   .replace({ path: "/" + path, query })
   .catch((err) => {
     console.warn(err)
   })
 </script>
+
+<template>
+  <div />
+</template>