删除多个空页面组件，包括仪表盘、错误处理测试、权限测试、游戏管理、订单管理和报表分析，简化项目结构。
This commit is contained in:
zyh
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="hover">
|
||||
<template #header>仪表盘</template>
|
||||
<p>这里是仪表盘空页面，你可以放置卡片、统计与图表。</p>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<div class="error-test-page">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<h3>错误处理测试</h3>
|
||||
</template>
|
||||
|
||||
<el-space direction="vertical" size="large" style="width: 100%">
|
||||
<el-alert
|
||||
title="错误处理功能说明"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<p>1. 全局HTTP拦截器会自动显示错误消息</p>
|
||||
<p>2. 支持显示后端返回的具体错误信息</p>
|
||||
<p>3. 支持字段级验证错误显示</p>
|
||||
<p>4. 根据HTTP状态码提供友好提示</p>
|
||||
</el-alert>
|
||||
|
||||
<el-divider>测试不同类型的错误</el-divider>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-button type="danger" @click="test400Error">测试 400 错误</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="danger" @click="test401Error">测试 401 错误</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="danger" @click="test403Error">测试 403 错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-button type="danger" @click="test404Error">测试 404 错误</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="danger" @click="test409Error">测试 409 错误</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="danger" @click="test500Error">测试 500 错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-button type="warning" @click="testValidationError">测试字段验证错误</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="warning" @click="testNetworkError">测试网络错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider>手动显示消息</el-divider>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="6">
|
||||
<el-button type="success" @click="showSuccess">成功消息</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="warning" @click="showWarning">警告消息</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="info" @click="showInfo">信息消息</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="danger" @click="showError">错误消息</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { showErrorMessage, showSuccessMessage, showWarningMessage, showInfoMessage } from '@/utils/error'
|
||||
import http from '@/plugins/http'
|
||||
|
||||
// 测试不同类型的HTTP错误
|
||||
async function test400Error() {
|
||||
try {
|
||||
await http.get('/api/test/400')
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
async function test401Error() {
|
||||
try {
|
||||
await http.get('/api/test/401')
|
||||
} catch (error) {
|
||||
// 401错误不会被全局拦截器显示，需要手动处理
|
||||
showErrorMessage(error, '认证失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function test403Error() {
|
||||
try {
|
||||
await http.get('/api/test/403')
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
async function test404Error() {
|
||||
try {
|
||||
await http.get('/api/test/404')
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
async function test409Error() {
|
||||
try {
|
||||
await http.get('/api/test/409')
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
async function test500Error() {
|
||||
try {
|
||||
await http.get('/api/test/500')
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
// 测试字段验证错误
|
||||
async function testValidationError() {
|
||||
try {
|
||||
await http.post('/api/test/validation', {
|
||||
username: 'a', // 太短
|
||||
password: '123' // 太短
|
||||
})
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理，显示字段级错误
|
||||
}
|
||||
}
|
||||
|
||||
// 测试网络错误
|
||||
async function testNetworkError() {
|
||||
try {
|
||||
await http.get('http://invalid-url-that-does-not-exist.com/api/test')
|
||||
} catch (error) {
|
||||
// 错误会被全局拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
// 手动显示消息
|
||||
function showSuccess() {
|
||||
showSuccessMessage('这是一个成功消息')
|
||||
}
|
||||
|
||||
function showWarning() {
|
||||
showWarningMessage('这是一个警告消息')
|
||||
}
|
||||
|
||||
function showInfo() {
|
||||
showInfoMessage('这是一个信息消息')
|
||||
}
|
||||
|
||||
function showError() {
|
||||
showErrorMessage(new Error('这是一个手动触发的错误消息'))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error-test-page {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<div class="permission-test">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<h3>权限测试页面</h3>
|
||||
</template>
|
||||
|
||||
<el-descriptions title="当前用户信息" :column="2" border>
|
||||
<el-descriptions-item label="用户类型">
|
||||
<el-tag :type="userType === 'ADMIN' ? 'danger' : 'success'">
|
||||
{{ getUserTypeDisplayName(userType) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户名">
|
||||
{{ currentUser?.username || '未知' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<h4>权限检查结果</h4>
|
||||
<el-table :data="permissionResults" border>
|
||||
<el-table-column prop="permission" label="权限" width="200" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="result" label="结果" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.result ? 'success' : 'danger'">
|
||||
{{ row.result ? '有权限' : '无权限' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<h4>功能测试</h4>
|
||||
<el-space wrap>
|
||||
<el-button v-permission="'user:view'" type="primary">
|
||||
查看用户列表
|
||||
</el-button>
|
||||
<el-button v-permission="'user:create'" type="success">
|
||||
创建用户
|
||||
</el-button>
|
||||
<el-button v-permission="'user:update'" type="warning">
|
||||
编辑用户
|
||||
</el-button>
|
||||
<el-button v-permission="'user:delete'" type="danger">
|
||||
删除用户
|
||||
</el-button>
|
||||
<el-button v-permission="'game:view'" type="info">
|
||||
查看游戏
|
||||
</el-button>
|
||||
<el-button v-permission="'setting:manage'" type="primary">
|
||||
系统设置
|
||||
</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<h4>路由访问测试</h4>
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
v-for="route in testRoutes"
|
||||
:key="route.name"
|
||||
:type="route.canAccess ? 'primary' : 'info'"
|
||||
:disabled="!route.canAccess"
|
||||
@click="testRouteAccess(route)"
|
||||
>
|
||||
{{ route.title }}
|
||||
</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<h4>权限指令测试</h4>
|
||||
<el-space wrap>
|
||||
<el-button v-permission="'user:create'" type="success">
|
||||
单个权限测试
|
||||
</el-button>
|
||||
<el-button v-permission="['user:create', 'user:update']" type="warning">
|
||||
多权限OR测试
|
||||
</el-button>
|
||||
<el-button v-permission="['user:create', 'user:update', 'AND']" type="danger">
|
||||
多权限AND测试
|
||||
</el-button>
|
||||
<el-button v-permission="{ permission: ['user:create', 'user:update'], logic: 'OR' }" type="info">
|
||||
对象格式测试
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
getCurrentUser,
|
||||
getCurrentUserType,
|
||||
hasPermission,
|
||||
canAccessRoute,
|
||||
PERMISSIONS
|
||||
} from '@/utils/permission'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const currentUser = ref(null)
|
||||
const userType = ref(null)
|
||||
|
||||
// 用户类型显示名称映射
|
||||
const userTypeDisplayMap = {
|
||||
'ADMIN': '管理员',
|
||||
'AGENT': '代理商'
|
||||
}
|
||||
|
||||
function getUserTypeDisplayName(userType) {
|
||||
return userTypeDisplayMap[userType] || userType
|
||||
}
|
||||
|
||||
// 权限检查结果
|
||||
const permissionResults = computed(() => [
|
||||
{ permission: 'user:view', description: '查看用户列表', result: hasPermission(PERMISSIONS.USER_VIEW) },
|
||||
{ permission: 'user:create', description: '创建用户', result: hasPermission(PERMISSIONS.USER_CREATE) },
|
||||
{ permission: 'user:update', description: '编辑用户', result: hasPermission(PERMISSIONS.USER_UPDATE) },
|
||||
{ permission: 'user:delete', description: '删除用户', result: hasPermission(PERMISSIONS.USER_DELETE) },
|
||||
{ permission: 'game:view', description: '查看游戏', result: hasPermission(PERMISSIONS.GAME_VIEW) },
|
||||
{ permission: 'game:create', description: '创建游戏', result: hasPermission(PERMISSIONS.GAME_CREATE) },
|
||||
{ permission: 'order:view', description: '查看订单', result: hasPermission(PERMISSIONS.ORDER_VIEW) },
|
||||
{ permission: 'report:view', description: '查看报表', result: hasPermission(PERMISSIONS.REPORT_VIEW) },
|
||||
{ permission: 'setting:manage', description: '系统设置', result: hasPermission(PERMISSIONS.SETTING_MANAGE) },
|
||||
])
|
||||
|
||||
// 路由访问测试
|
||||
const testRoutes = computed(() => [
|
||||
{ name: 'Users', title: '用户管理', canAccess: canAccessRoute('Users') },
|
||||
{ name: 'Games', title: '游戏管理', canAccess: canAccessRoute('Games') },
|
||||
{ name: 'Orders', title: '订单管理', canAccess: canAccessRoute('Orders') },
|
||||
{ name: 'Reports', title: '报表分析', canAccess: canAccessRoute('Reports') },
|
||||
{ name: 'Settings', title: '系统设置', canAccess: canAccessRoute('Settings') },
|
||||
])
|
||||
|
||||
function testRouteAccess(route) {
|
||||
if (route.canAccess) {
|
||||
router.push({ name: route.name })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
currentUser.value = getCurrentUser()
|
||||
userType.value = getCurrentUserType()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.permission-test {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 16px 0 12px 0;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="hover">
|
||||
<template #header>游戏管理</template>
|
||||
<p>游戏列表空页面（表格、搜索、上下架）。</p>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="hover">
|
||||
<template #header>订单管理</template>
|
||||
<p>订单管理空页面（订单列表、状态筛选、导出）。</p>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="hover">
|
||||
<template #header>报表分析</template>
|
||||
<p>报表分析空页面（趋势图、维度筛选、下载）。</p>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user