blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复权限验证问题：普通用户无法访问后台管理页面

Browse Source
This commit is contained in:
AIGC Developer
2025-10-23 09:59:54 +08:00
parent a294f61f3c
commit 08b737b1ef
59 changed files with 3586 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

788
demo/frontend/src/views/SystemSettings.vue Normal file
View File

@@ -0,0 +1,788 @@
<template>
<div class="system-settings">
<!-- 左侧导航栏 -->
<aside class="sidebar">
<div class="logo">
<div class="logo-icon"></div>
<span>LOGO</span>
</div>
<nav class="nav-menu">
<div class="nav-item" @click="goToDashboard">
<el-icon><Grid /></el-icon>
<span>数据仪表台</span>
</div>
<div class="nav-item" @click="goToMembers">
<el-icon><User /></el-icon>
<span>会员管理</span>
</div>
<div class="nav-item" @click="goToOrders">
<el-icon><ShoppingCart /></el-icon>
<span>订单管理</span>
</div>
<div class="nav-item" @click="goToAPI">
<el-icon><Document /></el-icon>
<span>API管理</span>
</div>
<div class="nav-item" @click="goToTasks">
<el-icon><Document /></el-icon>
<span>生成任务记录</span>
</div>
<div class="nav-item active">
<el-icon><Setting /></el-icon>
<span>系统设置</span>
</div>
</nav>
<div class="sidebar-footer">
<div class="online-users">
当前在线用户: <span class="highlight">87/500</span>
</div>
<div class="system-uptime">
系统运行时间: <span class="highlight">48小时32分</span>
</div>
</div>
</aside>
<!-- 主内容区域 -->
<main class="main-content">
<!-- 顶部搜索栏 -->
<header class="top-header">
<div class="search-bar">
<el-icon class="search-icon"><User /></el-icon>
<input type="text" placeholder="搜索你想要的内容" class="search-input">
</div>
<div class="header-actions">
<el-icon class="notification-icon"><Bell /></el-icon>
<div class="user-avatar">
<div class="avatar-placeholder"></div>
<el-icon class="dropdown-icon"><ArrowDown /></el-icon>
</div>
</div>
</header>
<!-- 会员收费标准 -->
<section class="content-section">
<h2 class="page-title">会员收费标准</h2>
<div class="membership-cards">
<el-card v-for="level in membershipLevels" :key="level.id" class="membership-card">
<div class="card-header">
<h3>{{ level.name }}</h3>
</div>
<div class="card-body">
<p class="price">${{ level.price }}/月</p>
<p class="description">{{ level.description }}</p>
</div>
<div class="card-footer">
<el-button type="primary" @click="editLevel(level)">编辑</el-button>
</div>
</el-card>
</div>
</section>
</main>
<!-- 编辑会员收费标准对话框 -->
<el-dialog
v-model="editDialogVisible"
width="480px"
:before-close="handleCloseEditDialog"
class="membership-modal"
:show-close="false"
>
<template #header>
<div class="modal-header">
<h2 class="modal-title">会员收费标准</h2>
<button class="close-btn" @click="handleCloseEditDialog">×</button>
</div>
</template>
<div class="modal-content">
<el-form :model="editForm" :rules="editRules" ref="editFormRef">
<div class="form-group">
<label class="form-label">会员等级</label>
<el-select v-model="editForm.level" placeholder="请选择会员等级" style="width: 100%;">
<el-option label="免费版会员" value="free"></el-option>
<el-option label="标准版会员" value="standard"></el-option>
<el-option label="专业版会员" value="professional"></el-option>
</el-select>
</div>
<div class="form-group">
<label class="form-label">会员价格</label>
<div class="price-input">
<span class="price-prefix">$</span>
<input
type="text"
v-model="editForm.price"
placeholder="0.00"
class="form-control"
@input="handlePriceInput"
/>
</div>
</div>
<div class="form-group">
<label class="form-label">资源点数量</label>
<input
type="number"
v-model="editForm.resourcePoints"
placeholder="0"
min="0"
class="form-control"
/>
</div>
<div class="form-group">
<label class="form-label">会员有效期</label>
<div class="radio-group">
<div class="radio-option">
<input
type="radio"
id="monthly"
v-model="editForm.validityPeriod"
value="monthly"
class="radio-input"
>
<label for="monthly" class="radio-label">月付</label>
</div>
<div class="radio-option">
<input
type="radio"
id="quarterly"
v-model="editForm.validityPeriod"
value="quarterly"
class="radio-input"
>
<label for="quarterly" class="radio-label">季付</label>
</div>
<div class="radio-option">
<input
type="radio"
id="yearly"
v-model="editForm.validityPeriod"
value="yearly"
class="radio-input"
>
<label for="yearly" class="radio-label">年付</label>
</div>
</div>
</div>
</el-form>
</div>
<template #footer>
<div class="modal-footer">
<button class="btn btn-cancel" @click="handleCloseEditDialog">取消</button>
<button class="btn btn-save" @click="saveEdit">保存</button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
Grid,
User,
ShoppingCart,
Document,
Setting,
User as Search,
Bell,
User as ArrowDown
} from '@element-plus/icons-vue'
const router = useRouter()
const membershipLevels = ref([
{ id: 1, name: '免费版会员', price: '0', resourcePoints: 200, description: '包含200资源点/月' },
{ id: 2, name: '标准版会员', price: '50', resourcePoints: 500, description: '包含500资源点/月' },
{ id: 3, name: '专业版会员', price: '250', resourcePoints: 2000, description: '包含2000资源点/月' }
])
const editDialogVisible = ref(false)
const editFormRef = ref(null)
const editForm = reactive({
id: null,
level: '',
price: '',
resourcePoints: 0,
validityPeriod: 'quarterly'
})
const editRules = reactive({
level: [{ required: true, message: '请选择会员等级', trigger: 'change' }],
price: [
{ required: true, message: '请输入价格', trigger: 'blur' },
{ pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
],
resourcePoints: [{ required: true, message: '请输入资源点数量', trigger: 'blur' }],
validityPeriod: [{ required: true, message: '请选择有效期', trigger: 'change' }]
})
const goToDashboard = () => {
router.push('/home')
}
const goToMembers = () => {
router.push('/member-management')
}
const goToOrders = () => {
router.push('/orders')
}
const goToAPI = () => {
router.push('/api-management')
}
const goToTasks = () => {
router.push('/generate-task-record')
}
const goToSettings = () => {
router.push('/system-settings')
}
const editLevel = (level) => {
Object.assign(editForm, level)
editDialogVisible.value = true
}
const handleCloseEditDialog = () => {
editDialogVisible.value = false
if (editFormRef.value) {
editFormRef.value.resetFields()
}
}
const handlePriceInput = (value) => {
// 确保只输入数字
editForm.price = value.replace(/[^\d.]/g, '')
}
const saveEdit = async () => {
const valid = await editFormRef.value.validate()
if (valid) {
const index = membershipLevels.value.findIndex(level => level.id === editForm.id)
if (index !== -1) {
Object.assign(membershipLevels.value[index], editForm)
ElMessage.success('会员等级更新成功')
editDialogVisible.value = false
}
}
}
</script>
<style scoped>
.system-settings {
display: flex;
height: 100vh;
background-color: #f5f7fa;
font-family: 'Arial', sans-serif;
}
/* 左侧导航栏 */
.sidebar {
width: 320px;
background: white;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
padding: 24px 0;
}
.logo {
display: flex;
align-items: center;
padding: 0 28px;
margin-bottom: 32px;
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.nav-menu {
flex: 1;
padding: 0 24px;
}
.nav-item {
display: flex;
align-items: center;
padding: 18px 24px;
margin-bottom: 6px;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
color: #64748b;
font-size: 16px;
}
.nav-item:hover {
background: #f1f5f9;
color: #334155;
}
.nav-item.active {
background: #eff6ff;
color: #3b82f6;
}
.nav-item .el-icon {
margin-right: 16px;
font-size: 22px;
}
.nav-item span {
font-size: 16px;
font-weight: 500;
}
.sidebar-footer {
padding: 0 32px 20px;
margin-top: auto;
}
.online-users,
.system-uptime {
font-size: 14px;
color: #64748b;
margin-bottom: 10px;
line-height: 1.5;
}
.online-users,
.system-uptime {
margin-bottom: 5px;
}
.highlight {
color: #333;
font-weight: bold;
}
.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
z-index: 100;
}
.search-bar {
display: flex;
align-items: center;
background-color: #f0f2f5;
border-radius: 20px;
padding: 8px 15px;
width: 300px;
}
.search-icon {
color: #909399;
margin-right: 8px;
}
.search-input {
border: none;
background: transparent;
outline: none;
flex-grow: 1;
font-size: 14px;
color: #333;
}
.header-actions {
display: flex;
align-items: center;
}
.notification-icon {
font-size: 20px;
color: #606266;
margin-right: 20px;
cursor: pointer;
}
.user-avatar {
display: flex;
align-items: center;
cursor: pointer;
}
.avatar-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: bold;
}
.dropdown-icon {
font-size: 12px;
color: #909399;
}
.content-section {
flex-grow: 1;
padding: 30px;
background-color: #f5f7fa;
}
.page-title {
font-size: 24px;
color: #333;
margin-bottom: 25px;
font-weight: bold;
}
.membership-cards {
display: flex;
gap: 25px;
flex-wrap: wrap;
}
.membership-card {
flex: 1;
min-width: 280px;
max-width: 350px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.membership-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.card-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
}
.card-header h3 {
font-size: 22px;
color: #333;
margin: 0;
}
.card-body {
padding: 25px 20px;
text-align: center;
flex-grow: 1;
}
.card-body .price {
font-size: 36px;
font-weight: bold;
color: #409eff;
margin-bottom: 10px;
}
.card-body .description {
font-size: 15px;
color: #606266;
line-height: 1.6;
}
.card-footer {
padding: 20px;
text-align: center;
border-top: 1px solid #eee;
}
.el-button {
width: 80%;
padding: 12px 0;
font-size: 16px;
border-radius: 8px;
}
/* 会员收费标准模态框样式 - 完全匹配HTML代码 */
.membership-modal {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e5eb;
overflow: hidden;
}
.membership-modal .el-dialog__body {
padding: 0;
}
/* 弹窗头部 */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #f0f2f5;
}
.modal-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0;
}
.close-btn {
width: 32px;
height: 32px;
border: none;
background: #f5f7fa;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #666;
transition: all 0.2s;
}
.close-btn:hover {
background: #e6f3ff;
color: #1890ff;
}
/* 表单内容区域 */
.modal-content {
padding: 24px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #333;
font-weight: 500;
}
/* 输入框和下拉框样式 */
.form-control {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
color: #333;
transition: all 0.2s;
background-color: white;
}
.form-control:focus {
outline: none;
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.form-control::placeholder {
color: #bfbfbf;
}
/* 价格输入框特殊样式 */
.price-input {
position: relative;
}
.price-prefix {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #666;
z-index: 10;
}
.price-input .form-control {
padding-left: 30px;
}
/* 单选按钮组 */
.radio-group {
display: flex;
gap: 16px;
}
.radio-option {
display: flex;
align-items: center;
}
.radio-input {
display: none;
}
.radio-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
color: #666;
padding: 8px 16px;
border: 1px solid #d9d9d9;
border-radius: 6px;
transition: all 0.2s;
}
.radio-input:checked + .radio-label {
border-color: #1890ff;
background-color: #e6f7ff;
color: #1890ff;
}
/* 按钮区域 */
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 20px 24px;
border-top: 1px solid #f0f2f5;
}
.btn {
padding: 0 20px;
height: 36px;
border: 1px solid;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancel {
background: white;
border-color: #d9d9d9;
color: #666;
}
.btn-cancel:hover {
border-color: #1890ff;
color: #1890ff;
}
.btn-save {
background: #1890ff;
border-color: #1890ff;
color: white;
}
.btn-save:hover {
background: #40a9ff;
border-color: #40a9ff;
}
/* 响应式调整 */
@media (max-width: 480px) {
.membership-modal {
border-radius: 0;
}
.modal-content {
padding: 16px;
}
.radio-group {
flex-direction: column;
gap: 8px;
}
}
/* Responsive adjustments */
@media (max-width: 1200px) {
.membership-card {
max-width: none;
}
}
@media (max-width: 768px) {
.sidebar {
width: 60px;
padding: 15px 0;
}
.sidebar .logo span,
.sidebar .nav-item span,
.sidebar-footer {
display: none;
}
.sidebar .logo {
padding: 0 10px 20px;
}
.sidebar .logo-icon {
margin-right: 0;
}
.nav-menu {
padding: 0 10px;
}
.nav-item {
justify-content: center;
padding: 10px;
}
.nav-item .el-icon {
margin-right: 0;
}
.top-header {
padding: 10px 20px;
}
.search-bar {
width: 200px;
padding: 6px 10px;
}
.content-section {
padding: 20px;
}
.page-title {
font-size: 20px;
margin-bottom: 20px;
}
.membership-cards {
flex-direction: column;
align-items: center;
}
.membership-card {
width: 90%;
max-width: 400px;
}
}
</style>