wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-21 03:19:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: other view

Browse Source
This commit is contained in:
pany 2022-08-19 17:03:38 +08:00
parent 30694919b8
commit e2f4bb1533
7 changed files with 81 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -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>

17
src/views/error-page/403.vue
View File

@ -1,6 +1,19 @@
<template>
<div>
<p style="text-align: center; font-size: 140px; margin-bottom: 50px">403</p>
<p style="text-align: center; font-size: 40px">你没有权限去该页面</p>
<p class="code">403</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>

17
src/views/error-page/404.vue
View File

@ -1,6 +1,19 @@
<template>
<div>
<p style="text-align: center; font-size: 140px; margin-bottom: 50px">404</p>
<p style="text-align: center; font-size: 40px">未找到你想要的页面</p>
<p class="code">404</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>

24
src/views/permission/components/SwitchRoles.vue
View File

@ -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 currentRole = ref(roles.value[0])
watch(currentRole, async (value) => {
const userStore = useUserStore()
const switchRoles = ref(userStore.roles[0])
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 style="display: flex; align-items: center">
<div>你的权限：{{ userStore.roles }}</div>
<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>

43
src/views/permission/directive.vue
View File

@ -1,26 +1,25 @@
<script lang="ts" setup>
import { reactive } from "vue"
import { checkPermission } from "@/utils/permission" // 权限判断函数
import { ref } from "vue"
import { checkPermission } from "@/utils/permission" // checkPermission 权限判断函数
import SwitchRoles from "./components/SwitchRoles.vue"
const state = reactive({
key: 1,
handleRolesChange: () => {
state.key++
}
})
/** key 是为了能每次切换权限的时候重新初始化指令 */
const key = ref(1)
const handleRolesChange = () => {
key.value++
}
</script>
<template>
<div class="app-container">
<SwitchRoles @change="state.handleRolesChange" />
<div :key="state.key" style="margin-top: 30px">
<SwitchRoles @change="handleRolesChange" />
<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>

13
src/views/permission/page.vue
View File

@ -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) => {
console.warn(err)
})
router.push({ path: "/403" })
}
</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>

6
src/views/redirect/index.vue
View File

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