refactor: other view

src/App.vue

@@ -2,8 +2,10 @@
 import { useAppStore } from "@/store/modules/app"
 import zhCn from "element-plus/lib/locale/lang/zh-cn"
 
-useAppStore().initTheme() // 初始化主题
+/** 初始化主题 */
-const locale = zhCn // 将 Element-Plus 的语言设置为中文
+useAppStore().initTheme()
+/** 将 Element-Plus 的语言设置为中文 */
+const locale = zhCn
 </script>
 
 <template>

src/views/error-page/403.vue

@@ -1,6 +1,19 @@
 <template>
   <div>
-    <p style="text-align: center; font-size: 140px; margin-bottom: 50px">403</p>
+    <p class="code">403</p>
-    <p style="text-align: center; font-size: 40px">你没有权限去该页面</p>
+    <p class="describe">你没有权限去该页面</p>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.code {
+  text-align: center;
+  font-size: 140px;
+  margin-bottom: 50px;
+}
+
+.describe {
+  text-align: center;
+  font-size: 40px;
+}
+</style>

src/views/error-page/404.vue

@@ -1,6 +1,19 @@
 <template>
   <div>
-    <p style="text-align: center; font-size: 140px; margin-bottom: 50px">404</p>
+    <p class="code">404</p>
-    <p style="text-align: center; font-size: 40px">未找到你想要的页面</p>
+    <p class="describe">未找到你想要的页面</p>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.code {
+  text-align: center;
+  font-size: 140px;
+  margin-bottom: 50px;
+}
+
+.describe {
+  text-align: center;
+  font-size: 40px;
+}
+</style>

src/views/permission/components/SwitchRoles.vue

@@ -1,14 +1,12 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue"
+import { ref, watch } from "vue"
 import { useUserStore } from "@/store/modules/user"
 
-const userStore = useUserStore()
-
 const emit = defineEmits(["change"])
 
-const roles = computed(() => userStore.roles)
+const userStore = useUserStore()
-const currentRole = ref(roles.value[0])
+const switchRoles = ref(userStore.roles[0])
-watch(currentRole, async (value) => {
+watch(switchRoles, async (value) => {
   await userStore.changeRoles(value)
   emit("change")
 })
@@ -16,13 +14,21 @@ watch(currentRole, async (value) => {
 
 <template>
   <div>
-    <div style="margin-bottom: 15px">你的权限：{{ roles }}</div>
+    <div>你的权限：{{ userStore.roles }}</div>
-    <div style="display: flex; align-items: center">
+    <div class="switch-roles">
       <span>切换权限：</span>
-      <el-radio-group v-model="currentRole">
+      <el-radio-group v-model="switchRoles">
         <el-radio-button label="editor" />
         <el-radio-button label="admin" />
       </el-radio-group>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.switch-roles {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+}
+</style>

src/views/permission/directive.vue

@@ -1,26 +1,25 @@
 <script lang="ts" setup>
-import { reactive } from "vue"
+import { ref } from "vue"
-import { checkPermission } from "@/utils/permission" // 权限判断函数
+import { checkPermission } from "@/utils/permission" // checkPermission 权限判断函数
 import SwitchRoles from "./components/SwitchRoles.vue"
 
-const state = reactive({
+/** key 是为了能每次切换权限的时候重新初始化指令 */
-  key: 1,
+const key = ref(1)
-  handleRolesChange: () => {
+const handleRolesChange = () => {
-    state.key++
+  key.value++
-  }
+}
-})
 </script>
 
 <template>
   <div class="app-container">
-    <SwitchRoles @change="state.handleRolesChange" />
+    <SwitchRoles @change="handleRolesChange" />
-    <div :key="state.key" style="margin-top: 30px">
+    <div :key="key" class="margin-top">
       <div>
         <span v-permission="['admin']" class="permission-alert">
           只有
           <el-tag>admin</el-tag>可以看见这个
         </span>
-        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info" size="large">
+        <el-tag v-permission="['admin']" class="permission-code" type="info" size="large">
           v-permission="['admin']"
         </el-tag>
       </div>
@@ -29,7 +28,7 @@ const state = reactive({
           只有
           <el-tag>editor</el-tag>可以看见这个
         </span>
-        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info" size="large">
+        <el-tag v-permission="['editor']" class="permission-code" type="info" size="large">
           v-permission="['editor']"
         </el-tag>
       </div>
@@ -38,28 +37,28 @@ const state = reactive({
           两者
           <el-tag>admin</el-tag>和 <el-tag>editor</el-tag>都可以看见这个
         </span>
-        <el-tag v-permission="['admin', 'editor']" class="permission-sourceCode" type="info" size="large">
+        <el-tag v-permission="['admin', 'editor']" class="permission-code" type="info" size="large">
           v-permission="['admin', 'editor']"
         </el-tag>
       </div>
     </div>
-    <div :key="'checkPermission' + state.key" style="margin-top: 60px">
+    <div :key="'checkPermission' + key" class="margin-top">
       <el-tag type="info" size="large">
-        在某些情况下，不适合使用 v-permission。例如: Element-Plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom
+        在某些情况下，不适合使用 v-permission。例如: Element-Plus 的 el-tab-pane 或 el-table-column 以及其它动态渲染 Dom
         的场景。你只能通过手动设置 v-if 来实现。
       </el-tag>
-      <el-tabs type="border-card" style="width: 550px; margin-top: 60px">
+      <el-tabs type="border-card" class="margin-top">
         <el-tab-pane v-if="checkPermission(['admin'])" label="admin">
           admin 可以看见这个
-          <el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['admin'])" </el-tag>
+          <el-tag class="permission-code" type="info"> v-if="checkPermission(['admin'])" </el-tag>
         </el-tab-pane>
         <el-tab-pane v-if="checkPermission(['editor'])" label="editor">
           editor 可以看见这个
-          <el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['editor'])" </el-tag>
+          <el-tag class="permission-code" type="info"> v-if="checkPermission(['editor'])" </el-tag>
         </el-tab-pane>
         <el-tab-pane v-if="checkPermission(['admin', 'editor'])" label="admin 和 editor">
           两者 admin 和 editor 都可以看见这个
-          <el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['admin', 'editor'])" </el-tag>
+          <el-tag class="permission-code" type="info"> v-if="checkPermission(['admin', 'editor'])" </el-tag>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -77,7 +76,11 @@ const state = reactive({
   display: inline-block;
 }
 
-.permission-sourceCode {
+.permission-code {
   margin-left: 15px;
 }
+
+.margin-top {
+  margin-top: 30px;
+}
 </style>

src/views/permission/page.vue

@@ -3,17 +3,20 @@ import { useRouter } from "vue-router"
 import SwitchRoles from "./components/SwitchRoles.vue"
 
 const router = useRouter()
-
 const handleRolesChange = () => {
-  router.push({ path: "/403" }).catch((err) => {
+  router.push({ path: "/403" })
-    console.warn(err)
-  })
 }
 </script>
 
 <template>
   <div class="app-container">
-    <el-tag type="success" size="large" style="margin-bottom: 15px"> 当前页面只有 admin 权限可见 </el-tag>
+    <el-tag type="success" size="large"> 当前页面只有 admin 权限可见 </el-tag>
     <SwitchRoles @change="handleRolesChange" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.el-tag {
+  margin-bottom: 15px;
+}
+</style>

src/views/redirect/index.vue

@@ -4,11 +4,7 @@ import { useRoute, useRouter } from "vue-router"
 const { params, query } = useRoute()
 const { path } = params
 
-useRouter()
+useRouter().replace({ path: "/" + path, query })
-  .replace({ path: "/" + path, query })
-  .catch((err) => {
-    console.warn(err)
-  })
 </script>
 
 <template>