赵忠林
f9e1286ab1
- 删除应用配置页面及相关组件，重构路由为 /developer/config/[id].vue - 移除开发者文档页面及其导航与样式实现 - 清理开发者侧功能完善工作日志文件 - 删除全局.gitignore配置文件，清理无用忽略规则 - 优化应用配置页面的参数读取和路由结构，解决刷新404问题 - 解决数据库配置唯一键冲突，调整保存逻辑避免重复插入 - 移除对后端配置加密字段的 secret 标记，修正加密异常问题
97 lines
4.1 KiB
Vue
97 lines
4.1 KiB
Vue
<template>
|
|
<div class="roles-page">
|
|
<a-card :bordered="false" title="角色权限管理">
|
|
<template #extra>
|
|
<a-button type="primary" @click="modalVisible = true">
|
|
<template #icon><PlusOutlined /></template>
|
|
新增角色
|
|
</a-button>
|
|
</template>
|
|
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :xs="24" :md="12" :xl="8" v-for="role in roles" :key="role.key">
|
|
<a-card class="role-card" :bordered="false">
|
|
<div class="role-header">
|
|
<span class="role-name">{{ role.label }}</span>
|
|
<a-tag :color="role.color">{{ role.count }} 人</a-tag>
|
|
</div>
|
|
<p class="role-desc">{{ role.desc }}</p>
|
|
<div class="role-perms">
|
|
<a-tag v-for="p in role.permissions" :key="p" size="small">{{ p }}</a-tag>
|
|
</div>
|
|
<div class="role-actions">
|
|
<a-button type="link" size="small" @click="handleEdit(role)">编辑</a-button>
|
|
<a-button type="link" size="small" danger>删除</a-button>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
|
|
<a-modal v-model:open="modalVisible" :title="editingRole ? '编辑角色' : '新增角色'" width="540px" @ok="handleSubmit">
|
|
<a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
|
<a-form-item label="角色名称">
|
|
<a-input v-model:value="form.label" />
|
|
</a-form-item>
|
|
<a-form-item label="角色描述">
|
|
<a-textarea v-model:value="form.desc" :rows="2" />
|
|
</a-form-item>
|
|
<a-form-item label="权限配置">
|
|
<a-checkbox-group v-model:value="form.permissions">
|
|
<a-row>
|
|
<a-col :span="12" v-for="perm in allPermissions" :key="perm.key">
|
|
<a-checkbox :value="perm.key">{{ perm.label }}</a-checkbox>
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PlusOutlined } from '@ant-design/icons-vue'
|
|
import { message } from 'ant-design-vue'
|
|
|
|
definePageMeta({ layout: 'admin' })
|
|
|
|
const modalVisible = ref(false)
|
|
const editingRole = ref<any>(null)
|
|
const form = reactive({ label: '', desc: '', permissions: [] as string[] })
|
|
|
|
const roles = [
|
|
{ key: 'super_admin', label: '超级管理员', desc: '平台最高权限，可管理所有模块', count: 1, color: 'red', permissions: ['全部权限'] },
|
|
{ key: 'admin', label: '企业管理员', desc: '管理本企业内的用户、配置、账单', count: 12, color: 'purple', permissions: ['用户管理', '账单查看', '应用管理'] },
|
|
{ key: 'member', label: '普通成员', desc: '使用平台基础功能，无管理权限', count: 845, color: 'blue', permissions: ['功能使用'] },
|
|
{ key: 'developer', label: '开发者', desc: '拥有开发者权限，可创建和管理应用', count: 342, color: 'green', permissions: ['API调用', '插件开发', '模板发布'] },
|
|
]
|
|
|
|
const allPermissions = [
|
|
{ key: 'user_manage', label: '用户管理' },
|
|
{ key: 'app_manage', label: '应用管理' },
|
|
{ key: 'finance_view', label: '账单查看' },
|
|
{ key: 'finance_pay', label: '充值缴费' },
|
|
{ key: 'developer_api', label: 'API 调用' },
|
|
{ key: 'developer_plugin', label: '插件开发' },
|
|
{ key: 'setting_base', label: '基础配置' },
|
|
{ key: 'setting_advance', label: '高级配置' },
|
|
]
|
|
|
|
const handleEdit = (r: any) => { editingRole.value = r; Object.assign(form, r); modalVisible.value = true }
|
|
const handleSubmit = () => { modalVisible.value = false; message.success(editingRole.value ? '编辑成功' : '新增成功') }
|
|
</script>
|
|
|
|
<style scoped>
|
|
.role-card {
|
|
border-radius: 10px;
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
.role-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
|
|
.role-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
.role-name { font-weight: 600; font-size: 15px; color: #111827; }
|
|
.role-desc { font-size: 13px; color: #6b7280; margin: 0 0 10px; }
|
|
.role-perms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
|
|
.role-actions { display: flex; gap: 4px; }
|
|
</style>
|