feat(frontend): 完善前端权限系统

- 扩展 auth/roles.ts 添加13个新角色和40+权限定义
- 创建 services/permission.ts 权限API服务
- 创建 composables/usePermission.ts 权限组合函数
- 创建 router/permissionGuard.ts 路由权限守卫
- 更新路由配置使用新角色系统
- 更新 App.vue, LoginView, UsersView, PermissionsView 等使用新角色
- 更新 DemoDataService 使用新角色
- 前端编译验证通过

frontend/admin/src/views/InviteUserView.vue

@@ -13,9 +13,19 @@
       <div>
         <label class="text-xs font-semibold text-mosquito-ink/70">角色</label>
         <select class="mos-input mt-2 w-full" v-model="form.role">
-          <option value="管理员">管理员</option>
-          <option value="运营">运营</option>
-          <option value="只读">只读</option>
+          <option value="super_admin">超级管理员</option>
+          <option value="system_admin">系统管理员</option>
+          <option value="operation_manager">运营经理</option>
+          <option value="operation_member">运营成员</option>
+          <option value="marketing_manager">市场经理</option>
+          <option value="marketing_member">市场成员</option>
+          <option value="finance_manager">财务经理</option>
+          <option value="finance_member">财务成员</option>
+          <option value="risk_manager">风控经理</option>
+          <option value="risk_member">风控成员</option>
+          <option value="customer_service">客服</option>
+          <option value="auditor">审计员</option>
+          <option value="viewer">只读</option>
         </select>
       </div>
       <button class="mos-btn mos-btn-accent w-full" @click="sendInvite">发送邀请（演示）</button>
@@ -75,6 +85,7 @@ import { useAuditStore } from '../stores/audit'
 import { useUserStore } from '../stores/users'
 import { useDataService } from '../services'
 import ListSection from '../components/ListSection.vue'
+import { RoleLabels, type AdminRole } from '../auth/roles'
 
 const auditStore = useAuditStore()
 const userStore = useUserStore()
@@ -85,7 +96,7 @@ const page = ref(0)
 const pageSize = 6
 const form = ref({
   email: '',
-  role: '运营'
+  role: 'operation_manager'
 })
 
 onMounted(async () => {
@@ -94,18 +105,16 @@ onMounted(async () => {
 })
 
 const roleLabel = (role: string) => {
-  if (role === 'admin') return '管理员'
-  if (role === 'operator') return '运营'
-  return '只读'
+  return RoleLabels[role as AdminRole] || role
 }
 
 const formatDate = (value: string) => new Date(value).toLocaleString('zh-CN')
 
 const sendInvite = () => {
-  userStore.addInvite(form.value.email || '未填写邮箱', form.value.role === '管理员' ? 'admin' : form.value.role === '运营' ? 'operator' : 'viewer')
+  userStore.addInvite(form.value.email || '未填写邮箱', form.value.role as AdminRole)
   auditStore.addLog('发送用户邀请', form.value.email || '未填写邮箱')
   form.value.email = ''
-  form.value.role = '运营'
+  form.value.role = 'operation_manager'
 }
 
 const resendInvite = (id: string) => {

frontend/admin/src/views/LoginView.vue

@@ -36,7 +36,7 @@ const auth = useAuthStore()
 const router = useRouter()
 
 const loginDemo = async () => {
-  await auth.loginDemo('admin')
+  await auth.loginDemo('super_admin')
   await router.push('/')
 }
 </script>

frontend/admin/src/views/PermissionsView.vue

@@ -46,8 +46,9 @@ import { computed } from 'vue'
 import { RolePermissions, type AdminRole, type Permission } from '../auth/roles'
 
 const roles: { key: AdminRole; label: string }[] = [
-  { key: 'admin', label: '管理员' },
-  { key: 'operator', label: '运营' },
+  { key: 'super_admin', label: '超级管理员' },
+  { key: 'system_admin', label: '系统管理员' },
+  { key: 'operation_manager', label: '运营经理' },
   { key: 'viewer', label: '只读' }
 ]
 
@@ -55,21 +56,20 @@ const permissionSections: { group: string; items: { key: Permission; label: stri
   {
     group: '可视化与运营查看',
     items: [
-      { key: 'view:dashboard', label: '看板查看', description: '访问运营概览与关键指标' },
-      { key: 'view:activities', label: '活动查看', description: '查看活动列表与详情信息' },
-      { key: 'view:leaderboard', label: '排行榜查看', description: '查看活动排行榜与排名' },
-      { key: 'view:alerts', label: '告警查看', description: '查看风控与系统告警信息' },
-      { key: 'view:notifications', label: '通知查看', description: '查看审批与系统通知' }
+      { key: 'dashboard:view', label: '看板查看', description: '访问运营概览与关键指标' },
+      { key: 'activity:view', label: '活动查看', description: '查看活动列表与详情信息' },
+      { key: 'dashboard:export', label: '导出数据', description: '导出看板数据' },
+      { key: 'risk:view', label: '告警查看', description: '查看风控与系统告警信息' }
     ]
   },
   {
     group: '运营与风控管理',
     items: [
-      { key: 'manage:users', label: '用户管理', description: '管理运营成员、审批与角色' },
-      { key: 'manage:rewards', label: '奖励管理', description: '配置与执行奖励发放' },
-      { key: 'manage:risk', label: '风控管理', description: '维护风控规则与黑名单' },
-      { key: 'manage:config', label: '配置管理', description: '管理系统配置与策略' },
-      { key: 'view:audit', label: '审计查看', description: '查看关键操作审计日志' }
+      { key: 'user:view', label: '用户管理', description: '管理运营成员、审批与角色' },
+      { key: 'reward:view', label: '奖励管理', description: '配置与执行奖励发放' },
+      { key: 'risk:rule', label: '风控管理', description: '维护风控规则与黑名单' },
+      { key: 'system:config', label: '配置管理', description: '管理系统配置与策略' },
+      { key: 'audit:view', label: '审计查看', description: '查看关键操作审计日志' }
     ]
   }
 ]

frontend/admin/src/views/UsersView.vue

@@ -136,6 +136,7 @@ import { useUserStore } from '../stores/users'
 import { useActivityStore } from '../stores/activities'
 import { useAuthStore } from '../stores/auth'
 import ListSection from '../components/ListSection.vue'
+import { RoleLabels, type AdminRole } from '../auth/roles'
 
 type UserItem = {
   id: string
@@ -190,14 +191,12 @@ const toggleUser = (user: UserItem) => {
 }
 
 const requestRole = (user: UserItem) => {
-  userStore.requestRoleChange(user.id, 'admin', '需要更高权限')
+  userStore.requestRoleChange(user.id, 'super_admin' as AdminRole, '需要更高权限')
   auditStore.addLog('提交角色变更申请', user.name)
 }
 
 const roleLabel = (role: string) => {
-  if (role === 'admin') return '管理员'
-  if (role === 'operator') return '运营'
-  return '只读'
+  return RoleLabels[role as AdminRole] || role
 }
 
 const resolveUserId = () => {