feat: 管理端 RBAC 权限体系与员工管理

新增多角色权限控制（赛事/财务/客服管理员），支持员工 CRUD、路由菜单按权限显隐、审计日志范围过滤；登录返回角色与权限列表。玩家端赛事列表增加静默刷新避免图片闪烁。Seed 补充演示员工账号与充值相关权限。附带 RBAC/审计范围单元测试及 UAT 文档更新。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-15 17:52:39 +08:00
parent be5b4a4921
commit 567ec9ec8a
44 changed files with 1717 additions and 125 deletions
--- a/apps/admin/src/components/AdminPlayerRowActions.vue
+++ b/apps/admin/src/components/AdminPlayerRowActions.vue
@@ -13,10 +13,20 @@ withDefaults(
    row: PlayerActionRow;
    showDetail?: boolean;
    showLedger?: boolean;
+    showEdit?: boolean;
+    showDeposit?: boolean;
+    showWithdraw?: boolean;
+    showFreeze?: boolean;
+    showDelete?: boolean;
  }>(),
  {
    showDetail: true,
    showLedger: true,
+    showEdit: true,
+    showDeposit: true,
+    showWithdraw: true,
+    showFreeze: true,
+    showDelete: true,
  },
 );

@@ -42,13 +52,13 @@ const { t } = useAdminLocale();
      <el-button v-if="showLedger" link type="primary" size="small" @click="emit('ledger')">
        {{ t('user.action.ledger_short') }}
      </el-button>
-      <el-button link type="primary" size="small" @click="emit('edit')">{{ t('common.edit') }}</el-button>
-      <el-button link type="success" size="small" @click="emit('deposit')">{{ t('common.topup') }}</el-button>
-      <el-button link type="warning" size="small" @click="emit('withdraw')">
+      <el-button v-if="showEdit" link type="primary" size="small" @click="emit('edit')">{{ t('common.edit') }}</el-button>
+      <el-button v-if="showDeposit" link type="success" size="small" @click="emit('deposit')">{{ t('common.topup') }}</el-button>
+      <el-button v-if="showWithdraw" link type="warning" size="small" @click="emit('withdraw')">
        {{ t('agent_portal.withdraw_btn_label') }}
      </el-button>
      <el-button
-        v-if="row.status === 'ACTIVE'"
+        v-if="showFreeze && row.status === 'ACTIVE'"
        link
        type="warning"
        size="small"
@@ -56,26 +66,26 @@ const { t } = useAdminLocale();
      >
        {{ t('common.freeze') }}
      </el-button>
-      <el-button v-else link type="primary" size="small" @click="emit('freeze')">
+      <el-button v-else-if="showFreeze" link type="primary" size="small" @click="emit('freeze')">
        {{ t('common.unfreeze') }}
      </el-button>
-      <el-button link type="danger" size="small" @click="emit('delete')">
+      <el-button v-if="showDelete" link type="danger" size="small" @click="emit('delete')">
        {{ t('common.delete') }}
      </el-button>
    </template>
    <template #menu>
      <el-dropdown-item v-if="showDetail" @click="emit('detail')">{{ t('common.detail') }}</el-dropdown-item>
      <el-dropdown-item v-if="showLedger" @click="emit('ledger')">{{ t('user.action.view_wallet_ledger') }}</el-dropdown-item>
-      <el-dropdown-item @click="emit('edit')">{{ t('common.edit') }}</el-dropdown-item>
-      <el-dropdown-item divided @click="emit('deposit')">{{ t('common.topup') }}</el-dropdown-item>
-      <el-dropdown-item @click="emit('withdraw')">
+      <el-dropdown-item v-if="showEdit" @click="emit('edit')">{{ t('common.edit') }}</el-dropdown-item>
+      <el-dropdown-item v-if="showDeposit" divided @click="emit('deposit')">{{ t('common.topup') }}</el-dropdown-item>
+      <el-dropdown-item v-if="showWithdraw" @click="emit('withdraw')">
        <span class="action-warning">{{ t('agent_portal.withdraw_btn_label') }}</span>
      </el-dropdown-item>
-      <el-dropdown-item v-if="row.status === 'ACTIVE'" @click="emit('freeze')">
+      <el-dropdown-item v-if="showFreeze && row.status === 'ACTIVE'" @click="emit('freeze')">
        <span class="action-warning">{{ t('common.freeze') }}</span>
      </el-dropdown-item>
-      <el-dropdown-item v-else @click="emit('freeze')">{{ t('common.unfreeze') }}</el-dropdown-item>
-      <el-dropdown-item divided @click="emit('delete')">
+      <el-dropdown-item v-else-if="showFreeze" @click="emit('freeze')">{{ t('common.unfreeze') }}</el-dropdown-item>
+      <el-dropdown-item v-if="showDelete" divided @click="emit('delete')">
        <span class="action-danger">{{ t('common.delete') }}</span>
      </el-dropdown-item>
    </template>
--- a/apps/admin/src/components/DashboardSubNav.vue
+++ b/apps/admin/src/components/DashboardSubNav.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';

 const { t } = useAdminLocale();
 const route = useRoute();
+const { hasPermission, role } = usePermissions();

 withDefaults(
  defineProps<{
@@ -12,10 +16,21 @@ withDefaults(
  { embedded: false },
 );

-const tabs = [
-  { path: '/', labelKey: 'nav.dashboard.matches' },
-  { path: '/dashboard/players', labelKey: 'nav.dashboard.players' },
-];
+const tabs = computed(() => {
+  const list: { path: string; labelKey: string }[] = [];
+  const code = role.value;
+  if (code === 'SUPPORT') return list;
+  if (hasPermission(AdminPerm.matches)) {
+    list.push({ path: '/', labelKey: 'nav.dashboard.matches' });
+  }
+  if (
+    hasPermission(AdminPerm.reports) &&
+    (code === 'FINANCE_ADMIN' || code === 'SUPER_ADMIN' || list.length === 0)
+  ) {
+    list.push({ path: '/dashboard/players', labelKey: 'nav.dashboard.players' });
+  }
+  return list;
+});

 function isActive(path: string) {
  if (path === '/dashboard/players') {
@@ -27,6 +42,7 @@ function isActive(path: string) {

 <template>
  <nav
+    v-if="tabs.length > 1"
    class="dashboard-subnav"
    :class="{ 'dashboard-subnav--embedded': embedded }"
    aria-label="Dashboard sections"
--- a/apps/admin/src/composables/usePermissions.ts
+++ b/apps/admin/src/composables/usePermissions.ts
@@ -0,0 +1,43 @@
+import { computed } from 'vue';
+import { useAuthStore } from '../stores/auth';
+import { effectivePermissions } from '../utils/admin-access';
+
+export function usePermissions() {
+  const auth = useAuthStore();
+
+  const role = computed(() => auth.user.value?.role ?? null);
+  const permissions = computed(() =>
+    effectivePermissions(auth.user.value?.role, auth.user.value?.permissions),
+  );
+  const isSuperAdmin = computed(() => role.value === 'SUPER_ADMIN');
+
+  function hasPermission(...codes: string[]): boolean {
+    if (!auth.isAdmin.value) return false;
+    if (isSuperAdmin.value) return true;
+    const set = permissions.value;
+    return codes.some((c) => set.includes(c));
+  }
+
+  function hasAllPermissions(...codes: string[]): boolean {
+    if (!auth.isAdmin.value) return false;
+    if (isSuperAdmin.value) return true;
+    const set = permissions.value;
+    return codes.every((c) => set.includes(c));
+  }
+
+  function firstAllowedPath(candidates: { path: string; permissions: string[] }[]): string | null {
+    for (const item of candidates) {
+      if (hasPermission(...item.permissions)) return item.path;
+    }
+    return null;
+  }
+
+  return {
+    role,
+    permissions,
+    isSuperAdmin,
+    hasPermission,
+    hasAllPermissions,
+    firstAllowedPath,
+  };
+}
--- a/apps/admin/src/constants/permissions.ts
+++ b/apps/admin/src/constants/permissions.ts
@@ -0,0 +1,24 @@
+/** 与 API seed / admin-permissions 一致 */
+export const AdminPerm = {
+  reports: 'reports.view',
+  usersView: 'users.view',
+  usersCreate: 'users.create',
+  usersResetPassword: 'users.reset_password',
+  settings: 'settings.manage',
+  agentsView: 'agents.view',
+  agentsCreate: 'agents.create',
+  agentsCredit: 'agents.credit',
+  walletDeposit: 'wallet.deposit',
+  walletWithdraw: 'wallet.withdraw',
+  matches: 'matches.manage',
+  settlement: 'settlement.confirm',
+  resettle: 'settlement.resettle',
+  bets: 'bets.view',
+  cashback: 'cashback.confirm',
+  content: 'content.manage',
+  audit: 'audit.view',
+  depositManage: 'deposit.manage',
+  depositReview: 'deposit.review',
+} as const;
+
+export type AdminPermission = (typeof AdminPerm)[keyof typeof AdminPerm];
--- a/apps/admin/src/i18n/admin-messages.ts
+++ b/apps/admin/src/i18n/admin-messages.ts
@@ -27,6 +27,14 @@ const zh: Record<string, string> = {
  'login.quick_admin': '管理员',
  'login.quick_agent': '一级代理',
  'login.quick_agent2': '二级代理',
+  'login.quick_match_admin': '赛事管理员',
+  'login.quick_finance_admin': '财务管理员',
+  'login.quick_support': '客服查询员',
+  'staff.create_btn': '创建后台账号',
+  'staff.col.role': '角色',
+  'staff.col.last_login': '最近登录',
+  'staff.dialog.create': '创建后台账号',
+  'staff.dialog.edit': '编辑后台账号',
  'login.captcha_ph': '验证码',
  'login.captcha_refresh': '点击刷新',

@@ -50,6 +58,7 @@ const zh: Record<string, string> = {
  'nav.payment_methods': '收款方式',
  'nav.deposit_orders': '充值审核',
  'nav.deposit_manage': '充值管理',
+  'nav.staff': '后台账号',
  'nav.players': '直属玩家',

  'deposit.payment_methods_title': '收款方式管理',
@@ -132,6 +141,10 @@ const zh: Record<string, string> = {
  'breadcrumb.match_markets': '盘口管理',
  'breadcrumb.outright_edit': '编辑优胜冠军',
  'role.admin': '系统管理员',
+  'role.super_admin': '超级管理员',
+  'role.match_admin': '赛事管理员',
+  'role.finance_admin': '财务管理员',
+  'role.support': '客服查询员',
  'role.agent': '代理账号',
  'role.tier1_agent': '一级代理',
  'role.tier2_agent': '二级代理',
@@ -209,6 +222,8 @@ const zh: Record<string, string> = {
  'dash.user_direct': '直属',
  'dash.user_agents': '代理',
  'dash.section_matches_hint': '投注经营与赛事状态分布',
+  'dash.section_match_ops_hint': '赛事状态与待办',
+  'dash.trend_bet_count_caption': '近 7 日注单量趋势',
  'dash.section_players_hint': '玩家、代理与资金概况',
  'dash.kpi_match_total': '赛事总数',
  'dash.kpi_match_total_sub': '草稿 {draft} · 已发布 {published}',
@@ -308,6 +323,14 @@ const en: Record<string, string> = {
  'login.quick_admin': 'Admin',
  'login.quick_agent': 'Tier-1 agent',
  'login.quick_agent2': 'Tier-2 agent',
+  'login.quick_match_admin': 'Match admin',
+  'login.quick_finance_admin': 'Finance admin',
+  'login.quick_support': 'Support',
+  'staff.create_btn': 'Create staff account',
+  'staff.col.role': 'Role',
+  'staff.col.last_login': 'Last login',
+  'staff.dialog.create': 'Create staff account',
+  'staff.dialog.edit': 'Edit staff account',
  'login.captcha_ph': 'Captcha',
  'login.captcha_refresh': 'Click to refresh',

@@ -331,6 +354,7 @@ const en: Record<string, string> = {
  'nav.payment_methods': 'Payment Methods',
  'nav.deposit_orders': 'Deposit Review',
  'nav.deposit_manage': 'Deposit Mgmt',
+  'nav.staff': 'Staff accounts',
  'nav.players': 'My Players',
  'nav.subAgents': 'Tier-2 agents',
  'nav.myBets': 'Bet Search',
@@ -413,6 +437,10 @@ const en: Record<string, string> = {
  'breadcrumb.match_markets': 'Markets',
  'breadcrumb.outright_edit': 'Edit outright',
  'role.admin': 'Administrator',
+  'role.super_admin': 'Super admin',
+  'role.match_admin': 'Match admin',
+  'role.finance_admin': 'Finance admin',
+  'role.support': 'Support',
  'role.agent': 'Agent',
  'role.tier1_agent': 'Tier-1 Agent',
  'role.tier2_agent': 'Tier-2 Agent',
@@ -490,6 +518,8 @@ const en: Record<string, string> = {
  'dash.user_direct': 'Direct',
  'dash.user_agents': 'Agents',
  'dash.section_matches_hint': 'Betting performance and match distribution',
+  'dash.section_match_ops_hint': 'Match status and pending work',
+  'dash.trend_bet_count_caption': '7-day bet volume trend',
  'dash.section_players_hint': 'Players, agents, and wallet summary',
  'dash.kpi_match_total': 'Total matches',
  'dash.kpi_match_total_sub': 'Draft {draft} · Published {published}',
@@ -589,6 +619,14 @@ const ms: Record<string, string> = {
  'login.quick_admin': 'Admin',
  'login.quick_agent': 'Ejen peringkat 1',
  'login.quick_agent2': 'Ejen peringkat 2',
+  'login.quick_match_admin': 'Pentadbir perlawanan',
+  'login.quick_finance_admin': 'Pentadbir kewangan',
+  'login.quick_support': 'Sokongan',
+  'staff.create_btn': 'Cipta akaun kakitangan',
+  'staff.col.role': 'Peranan',
+  'staff.col.last_login': 'Log masuk terakhir',
+  'staff.dialog.create': 'Cipta akaun kakitangan',
+  'staff.dialog.edit': 'Edit akaun kakitangan',
  'login.captcha_ph': 'Captcha',
  'login.captcha_refresh': 'Klik untuk muat semula',

@@ -612,6 +650,7 @@ const ms: Record<string, string> = {
  'nav.payment_methods': 'Kaedah Pembayaran',
  'nav.deposit_orders': 'Semakan Deposit',
  'nav.deposit_manage': 'Urus Deposit',
+  'nav.staff': 'Akaun kakitangan',
  'nav.players': 'Pemain saya',
  'nav.subAgents': 'Ejen peringkat 2',
  'nav.myBets': 'Carian pertaruhan',
@@ -694,6 +733,10 @@ const ms: Record<string, string> = {
  'breadcrumb.match_markets': 'Pasaran',
  'breadcrumb.outright_edit': 'Edit juara',
  'role.admin': 'Pentadbir',
+  'role.super_admin': 'Super pentadbir',
+  'role.match_admin': 'Pentadbir perlawanan',
+  'role.finance_admin': 'Pentadbir kewangan',
+  'role.support': 'Sokongan',
  'role.agent': 'Ejen',
  'role.tier1_agent': 'Ejen Peringkat 1',
  'role.tier2_agent': 'Ejen Peringkat 2',
@@ -771,6 +814,8 @@ const ms: Record<string, string> = {
  'dash.user_direct': 'Terus',
  'dash.user_agents': 'Ejen',
  'dash.section_matches_hint': 'Prestasi pertaruhan dan taburan perlawanan',
+  'dash.section_match_ops_hint': 'Status perlawanan dan tugasan',
+  'dash.trend_bet_count_caption': 'Trend bilangan pertaruhan 7 hari',
  'dash.section_players_hint': 'Pemain, ejen, dan ringkasan dana',
  'dash.kpi_match_total': 'Jumlah perlawanan',
  'dash.kpi_match_total_sub': 'Draf {draft} · Diterbitkan {published}',
--- a/apps/admin/src/i18n/admin-pages-ms.ts
+++ b/apps/admin/src/i18n/admin-pages-ms.ts
@@ -333,28 +333,42 @@ export const adminPagesMs: Record<string, string> = {
  'bet.col.result': 'Keputusan',

  'audit.module_ph': 'cth. USERS, AGENTS',
+  'audit.col.time': 'Masa',
+  'audit.col.operator': 'Pengendali',
  'audit.col.action': 'Tindakan',
  'audit.col.module': 'Modul',
  'audit.col.target_id': 'ID sasaran',
-  'audit.col.time': 'Masa',
+  'audit.col.ip': 'IP',
+  'audit.operator_system': 'Sistem',
+  'audit.operator_player': 'Pemain',
  'audit.action.CREATE_PLAYER': 'Cipta pemain',
  'audit.action.UPDATE_PLAYER': 'Kemas kini pemain',
+  'audit.action.DELETE_PLAYER': 'Padam pemain',
+  'audit.action.RESET_PLAYER_PASSWORD': 'Set semula kata laluan pemain',
  'audit.action.RESET_DATABASE': 'Set semula pangkalan data',
  'audit.action.CREATE_AGENT': 'Cipta ejen',
  'audit.action.UPDATE_AGENT': 'Kemas kini ejen',
  'audit.action.UPDATE_PLAYER_ACCOUNT_SETTINGS': 'Kemas kini tetapan akaun pemain',
  'audit.action.UPDATE_AGENT_SUSPEND_SETTINGS': 'Kemas kini tetapan penggantungan ejen',
+  'audit.action.UPDATE_AGENT_HIERARCHY_SETTINGS': 'Kemas kini tetapan hierarki ejen',
  'audit.action.UPDATE_BETTING_LIMITS': 'Kemas kini had pertaruhan',
  'audit.action.CONFIRM_SETTLEMENT': 'Sahkan penyelesaian',
  'audit.action.CONFIRM_RESETTLE': 'Sahkan penyelesaian semula',
  'audit.action.CONFIRM_CASHBACK': 'Sahkan bayaran rebat',
  'audit.action.CANCEL_CASHBACK': 'Batalkan kelompok rebat',
+  'audit.action.CREATE_STAFF': 'Cipta kakitangan',
+  'audit.action.UPDATE_STAFF': 'Kemas kini kakitangan',
+  'audit.action.PURGE_UNUSED_FILES': 'Padam media tidak digunakan',
+  'audit.action.FORGOT_PASSWORD_RESET': 'Pemain set semula kata laluan',
  'audit.module.USERS': 'Pemain',
  'audit.module.AGENTS': 'Ejen',
  'audit.module.SYSTEM': 'Sistem',
  'audit.module.SETTINGS': 'Tetapan',
  'audit.module.SETTLEMENT': 'Penyelesaian',
  'audit.module.CASHBACK': 'Rebat',
+  'audit.module.STAFF': 'Kakitangan',
+  'audit.module.MEDIA': 'Media',
+  'audit.module.identity': 'Identiti',

  'cashback.start_date': 'Tarikh mula',
  'cashback.end_date': 'Tarikh tamat',
--- a/apps/admin/src/i18n/admin-pages.ts
+++ b/apps/admin/src/i18n/admin-pages.ts
@@ -355,28 +355,42 @@ export const adminPagesZh: Record<string, string> = {
  'bet.col.result': '赛果',

  'audit.module_ph': '如 USERS、AGENTS',
+  'audit.col.time': '时间',
+  'audit.col.operator': '操作人',
  'audit.col.action': '操作',
  'audit.col.module': '模块',
  'audit.col.target_id': '目标 ID',
-  'audit.col.time': '时间',
+  'audit.col.ip': 'IP',
+  'audit.operator_system': '系统',
+  'audit.operator_player': '玩家',
  'audit.action.CREATE_PLAYER': '新建玩家',
  'audit.action.UPDATE_PLAYER': '更新玩家',
+  'audit.action.DELETE_PLAYER': '删除玩家',
+  'audit.action.RESET_PLAYER_PASSWORD': '重置玩家密码',
  'audit.action.RESET_DATABASE': '重置数据库',
  'audit.action.CREATE_AGENT': '新建代理',
  'audit.action.UPDATE_AGENT': '更新代理',
  'audit.action.UPDATE_PLAYER_ACCOUNT_SETTINGS': '更新玩家账号设置',
  'audit.action.UPDATE_AGENT_SUSPEND_SETTINGS': '更新代理停押设置',
+  'audit.action.UPDATE_AGENT_HIERARCHY_SETTINGS': '更新代理层级设置',
  'audit.action.UPDATE_BETTING_LIMITS': '更新投注限额',
  'audit.action.CONFIRM_SETTLEMENT': '确认结算',
  'audit.action.CONFIRM_RESETTLE': '确认重结算',
  'audit.action.CONFIRM_CASHBACK': '确认发放返水',
  'audit.action.CANCEL_CASHBACK': '作废返水批次',
+  'audit.action.CREATE_STAFF': '新建后台员工',
+  'audit.action.UPDATE_STAFF': '更新后台员工',
+  'audit.action.PURGE_UNUSED_FILES': '清理未引用媒体',
+  'audit.action.FORGOT_PASSWORD_RESET': '玩家找回密码',
  'audit.module.USERS': '玩家',
  'audit.module.AGENTS': '代理',
  'audit.module.SYSTEM': '系统',
  'audit.module.SETTINGS': '系统设置',
  'audit.module.SETTLEMENT': '结算',
  'audit.module.CASHBACK': '返水',
+  'audit.module.STAFF': '员工管理',
+  'audit.module.MEDIA': '媒体库',
+  'audit.module.identity': '身份认证',

  'cashback.start_date': '开始日期',
  'cashback.end_date': '结束日期',
@@ -1380,28 +1394,42 @@ export const adminPagesEn: Record<string, string> = {
  'bet.col.result': 'Result',

  'audit.module_ph': 'e.g. USERS, AGENTS',
+  'audit.col.time': 'Time',
+  'audit.col.operator': 'Operator',
  'audit.col.action': 'Action',
  'audit.col.module': 'Module',
  'audit.col.target_id': 'Target ID',
-  'audit.col.time': 'Time',
+  'audit.col.ip': 'IP',
+  'audit.operator_system': 'System',
+  'audit.operator_player': 'Player',
  'audit.action.CREATE_PLAYER': 'Create player',
  'audit.action.UPDATE_PLAYER': 'Update player',
+  'audit.action.DELETE_PLAYER': 'Delete player',
+  'audit.action.RESET_PLAYER_PASSWORD': 'Reset player password',
  'audit.action.RESET_DATABASE': 'Reset database',
  'audit.action.CREATE_AGENT': 'Create agent',
  'audit.action.UPDATE_AGENT': 'Update agent',
  'audit.action.UPDATE_PLAYER_ACCOUNT_SETTINGS': 'Update player account settings',
  'audit.action.UPDATE_AGENT_SUSPEND_SETTINGS': 'Update agent suspend settings',
+  'audit.action.UPDATE_AGENT_HIERARCHY_SETTINGS': 'Update agent hierarchy settings',
  'audit.action.UPDATE_BETTING_LIMITS': 'Update betting limits',
  'audit.action.CONFIRM_SETTLEMENT': 'Confirm settlement',
  'audit.action.CONFIRM_RESETTLE': 'Confirm resettlement',
  'audit.action.CONFIRM_CASHBACK': 'Confirm cashback payout',
  'audit.action.CANCEL_CASHBACK': 'Cancel cashback batch',
+  'audit.action.CREATE_STAFF': 'Create staff account',
+  'audit.action.UPDATE_STAFF': 'Update staff account',
+  'audit.action.PURGE_UNUSED_FILES': 'Purge unused media',
+  'audit.action.FORGOT_PASSWORD_RESET': 'Player forgot-password reset',
  'audit.module.USERS': 'Players',
  'audit.module.AGENTS': 'Agents',
  'audit.module.SYSTEM': 'System',
  'audit.module.SETTINGS': 'Settings',
  'audit.module.SETTLEMENT': 'Settlement',
  'audit.module.CASHBACK': 'Cashback',
+  'audit.module.STAFF': 'Staff',
+  'audit.module.MEDIA': 'Media',
+  'audit.module.identity': 'Identity',

  'cashback.start_date': 'Start date',
  'cashback.end_date': 'End date',
--- a/apps/admin/src/layouts/ManageLayout.vue
+++ b/apps/admin/src/layouts/ManageLayout.vue
@@ -4,6 +4,8 @@ import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '../stores/auth';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import { useSmokeTestsAllowed } from '../composables/useSmokeTestsAllowed';
+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';
 import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';
 import AdminNavIcon from '../components/AdminNavIcon.vue';
 import { resolveAdminBreadcrumb } from '../utils/admin-breadcrumb';
@@ -13,28 +15,44 @@ const router = useRouter();
 const auth = useAuthStore();
 const { t } = useAdminLocale();
 const { allowed: smokeTestsAllowed, ensureLoaded: ensureSmokeTestsAllowed } = useSmokeTestsAllowed();
+const { hasPermission, role: adminRole } = usePermissions();

 const sidebarOpen = ref(false);
 const isMobileNav = ref(false);

+type AdminMenuItem = {
+  path: string;
+  label: string;
+  icon: string;
+  matchPrefix?: boolean;
+  permissions: string[];
+  /** Hide for these admin role codes (SUPER_ADMIN is never excluded). */
+  excludeRoles?: string[];
+};
+
+function menuVisible(item: AdminMenuItem): boolean {
+  const code = adminRole.value;
+  if (item.path === '/smoke-tests' && smokeTestsAllowed.value === false) return false;
+  if (code && code !== 'SUPER_ADMIN' && item.excludeRoles?.includes(code)) return false;
+  return hasPermission(...item.permissions);
+}
+
 const adminMenus = computed(() => {
-  const items = [
-    { path: '/', label: t('nav.dashboard'), icon: 'dashboard', matchPrefix: true },
-    { path: '/matches', label: t('nav.matches'), icon: 'matches', matchPrefix: true },
-    { path: '/users', label: t('nav.agents_players'), icon: 'users' },
-    { path: '/finance-logs', label: t('nav.finance_logs'), icon: 'finance' },
-    { path: '/deposit', label: t('nav.deposit_manage'), icon: 'deposit', matchPrefix: true },
-    { path: '/cashback', label: t('nav.cashback'), icon: 'cashback' },
-    { path: '/bets', label: t('nav.bets'), icon: 'bets' },
-    { path: '/contents', label: t('nav.contents'), icon: 'contents' },
-    { path: '/media', label: t('nav.media'), icon: 'media' },
-    { path: '/audit', label: t('nav.audit'), icon: 'audit' },
-    { path: '/smoke-tests', label: t('nav.smoke_tests'), icon: 'smoke-tests' },
+  const items: AdminMenuItem[] = [
+    { path: '/', label: t('nav.dashboard'), icon: 'dashboard', matchPrefix: true, permissions: [AdminPerm.reports], excludeRoles: ['SUPPORT'] },
+    { path: '/matches', label: t('nav.matches'), icon: 'matches', matchPrefix: true, permissions: [AdminPerm.matches] },
+    { path: '/users', label: t('nav.agents_players'), icon: 'users', permissions: [AdminPerm.usersView, AdminPerm.agentsView] },
+    { path: '/finance-logs', label: t('nav.finance_logs'), icon: 'finance', permissions: [AdminPerm.reports], excludeRoles: ['MATCH_ADMIN'] },
+    { path: '/deposit', label: t('nav.deposit_manage'), icon: 'deposit', matchPrefix: true, permissions: [AdminPerm.depositManage, AdminPerm.depositReview] },
+    { path: '/cashback', label: t('nav.cashback'), icon: 'cashback', permissions: [AdminPerm.cashback], excludeRoles: ['MATCH_ADMIN', 'SUPPORT'] },
+    { path: '/bets', label: t('nav.bets'), icon: 'bets', permissions: [AdminPerm.bets] },
+    { path: '/contents', label: t('nav.contents'), icon: 'contents', permissions: [AdminPerm.content] },
+    { path: '/media', label: t('nav.media'), icon: 'media', permissions: [AdminPerm.content, AdminPerm.matches] },
+    { path: '/audit', label: t('nav.audit'), icon: 'audit', permissions: [AdminPerm.audit] },
+    { path: '/staff', label: t('nav.staff'), icon: 'users', permissions: [AdminPerm.settings] },
+    { path: '/smoke-tests', label: t('nav.smoke_tests'), icon: 'smoke-tests', permissions: [AdminPerm.settings] },
  ];
-  if (smokeTestsAllowed.value === false) {
-    return items.filter((item) => item.path !== '/smoke-tests');
-  }
-  return items;
+  return items.filter(menuVisible);
 });

 const agentMenus = computed(() => [
@@ -78,7 +96,14 @@ const currentLabel = computed(() => {
 const topbarCrumbs = computed(() => resolveAdminBreadcrumb(route.path, t));

 const roleLabel = computed(() => {
-  if (auth.isAdmin.value) return t('role.admin');
+  if (auth.isAdmin.value) {
+    const code = adminRole.value;
+    if (code === 'MATCH_ADMIN') return t('role.match_admin');
+    if (code === 'FINANCE_ADMIN') return t('role.finance_admin');
+    if (code === 'SUPPORT') return t('role.support');
+    if (code === 'SUPER_ADMIN') return t('role.super_admin');
+    return t('role.admin');
+  }
  const level = auth.user.value?.agentLevel;
  if (auth.isAgent.value && level != null && level > 0) {
    return t('role.agent_level', { n: level });
--- a/apps/admin/src/router/index.ts
+++ b/apps/admin/src/router/index.ts
@@ -2,6 +2,25 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { useAuthStore } from '../stores/auth';
 import { useSmokeTestsAllowed } from '../composables/useSmokeTestsAllowed';
 import { ensureStaffSession } from '../utils/session-hydrate';
+import { AdminPerm } from '../constants/permissions';
+import { adminCanAccess, firstAdminFallback } from '../utils/admin-access';
+
+/** Paths denied for specific admin roles (SUPER_ADMIN bypasses). */
+const ROLE_ROUTE_DENY: Record<string, string[]> = {
+  '/finance-logs': ['MATCH_ADMIN'],
+  '/cashback': ['MATCH_ADMIN', 'SUPPORT'],
+};
+
+function pathDeniedForRole(path: string, role?: string): boolean {
+  if (!role || role === 'SUPER_ADMIN') return false;
+  const base = path.split('?')[0];
+  for (const [prefix, roles] of Object.entries(ROLE_ROUTE_DENY)) {
+    if ((base === prefix || base.startsWith(`${prefix}/`)) && roles.includes(role)) {
+      return true;
+    }
+  }
+  return false;
+}

 const router = createRouter({
  history: createWebHistory(),
@@ -15,6 +34,7 @@ const router = createRouter({
        {
          path: '',
          component: () => import('../views/HomeEntry.vue'),
+          meta: { permissions: [AdminPerm.reports] },
          children: [
            {
              path: '',
@@ -33,11 +53,12 @@ const router = createRouter({
        {
          path: 'users',
          component: () => import('../views/AgentManager.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.usersView, AdminPerm.agentsView] },
        },
        {
          path: 'finance-logs',
          component: () => import('../views/FinanceLogs.vue'),
+          meta: { permissions: [AdminPerm.reports] },
        },
        {
          path: 'agent-credit-transactions',
@@ -53,72 +74,72 @@ const router = createRouter({
        {
          path: 'matches',
          component: () => import('../views/Matches.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
        },
        {
          path: 'matches/outrights',
          component: () => import('../views/MatchesOutrights.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
        },
        {
          path: 'matches/market-templates',
          component: () => import('../views/MarketTemplates.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
        },
        {
          path: 'matches/:matchId/edit',
          name: 'admin-match-edit',
          component: () => import('../views/matches/MatchEventEditor.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
        },
        {
          path: 'matches/:matchId/markets',
          name: 'admin-match-markets',
          component: () => import('../views/matches/MatchMarketsPage.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
        },
        { path: 'outrights', redirect: '/matches/outrights' },
        {
          path: 'outrights/:matchId/edit',
          name: 'admin-outright-edit',
          component: () => import('../views/outrights/OutrightEditRedirect.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
        },
        { path: 'world-cup-outright', redirect: '/matches/outrights' },
        {
          path: 'bets',
          component: () => import('../views/Bets.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.bets] },
        },
        {
          path: 'settlement/:id',
          component: () => import('../views/Settlement.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.settlement, AdminPerm.matches] },
        },
        {
          path: 'cashback',
          component: () => import('../views/Cashback.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.cashback] },
        },
        {
          path: 'contents',
          component: () => import('../views/Contents.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.content] },
        },
        {
          path: 'audit',
          component: () => import('../views/Audit.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.audit] },
        },
        {
          path: 'smoke-tests',
          component: () => import('../views/SmokeTests.vue'),
-          meta: { adminOnly: true, smokeTestsOnly: true },
+          meta: { adminOnly: true, smokeTestsOnly: true, permissions: [AdminPerm.settings] },
        },
        {
          path: 'media',
          component: () => import('../views/MediaLibrary.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.content, AdminPerm.matches] },
        },
        {
          path: 'payment-methods',
@@ -134,7 +155,12 @@ const router = createRouter({
        {
          path: 'deposit',
          component: () => import('../views/DepositManage.vue'),
-          meta: { adminOnly: true },
+          meta: { adminOnly: true, permissions: [AdminPerm.depositManage, AdminPerm.depositReview] },
+        },
+        {
+          path: 'staff',
+          component: () => import('../views/StaffManage.vue'),
+          meta: { adminOnly: true, permissions: [AdminPerm.settings] },
        },
        {
          path: 'my-players',
@@ -179,6 +205,23 @@ router.beforeEach(async (to) => {
    return '/';
  }

+  if (auth.isAdmin.value && to.meta.permissions) {
+    const required = to.meta.permissions as string[];
+    const role = auth.user.value?.role;
+    const permissions = auth.user.value?.permissions;
+    if (pathDeniedForRole(to.path, role)) {
+      const fallback = firstAdminFallback(role, permissions);
+      if (fallback && to.path !== fallback) return fallback;
+    }
+    if (!adminCanAccess(role, permissions, required)) {
+      const fallback = firstAdminFallback(role, permissions);
+      if (!fallback) {
+        return true;
+      }
+      if (to.path !== fallback) return fallback;
+    }
+  }
+
  if (to.path.startsWith('/dashboard/') && !auth.isAdmin.value) {
    return '/';
  }
--- a/apps/admin/src/stores/auth.ts
+++ b/apps/admin/src/stores/auth.ts
@@ -8,6 +8,7 @@ export interface StaffUser {
  userType: StaffUserType;
  locale?: string;
  role?: string;
+  permissions?: string[];
  agentLevel?: number | null;
  maxAgentLevel?: number | null;
  canManageSubAgents?: boolean;
@@ -95,6 +96,7 @@ export function reconcileStaffSessionFromToken(): boolean {
    userType: claims.userType,
    locale: user.value?.locale,
    role: claims.role ?? user.value?.role,
+    permissions: user.value?.permissions,
    inviteCode: user.value?.inviteCode,
  };
  user.value = next;
--- a/apps/admin/src/utils/admin-access.ts
+++ b/apps/admin/src/utils/admin-access.ts
@@ -0,0 +1,80 @@
+import { AdminPerm } from '../constants/permissions';
+
+/** Mirrors API seed role assignments — used when /me has not yet returned permissions. */
+export const ROLE_PERMISSIONS: Record<string, string[]> = {
+  MATCH_ADMIN: [
+    AdminPerm.matches,
+    AdminPerm.settlement,
+    AdminPerm.content,
+    AdminPerm.bets,
+    AdminPerm.reports,
+    AdminPerm.audit,
+  ],
+  FINANCE_ADMIN: [
+    AdminPerm.walletDeposit,
+    AdminPerm.walletWithdraw,
+    AdminPerm.cashback,
+    AdminPerm.agentsView,
+    AdminPerm.agentsCredit,
+    AdminPerm.usersView,
+    AdminPerm.usersCreate,
+    AdminPerm.depositManage,
+    AdminPerm.depositReview,
+    AdminPerm.reports,
+    AdminPerm.bets,
+    AdminPerm.audit,
+  ],
+  SUPPORT: [
+    AdminPerm.usersView,
+    AdminPerm.usersResetPassword,
+    AdminPerm.bets,
+    AdminPerm.reports,
+    AdminPerm.audit,
+  ],
+};
+
+export function effectivePermissions(
+  role: string | undefined,
+  permissions: string[] | undefined,
+): string[] {
+  if (permissions?.length) return permissions;
+  if (role && ROLE_PERMISSIONS[role]) return ROLE_PERMISSIONS[role];
+  return [];
+}
+
+export function adminCanAccess(
+  role: string | undefined,
+  permissions: string[] | undefined,
+  required: string[] | undefined,
+): boolean {
+  if (!required?.length) return true;
+  if (role === 'SUPER_ADMIN') return true;
+  const perms = effectivePermissions(role, permissions);
+  return required.some((p) => perms.includes(p));
+}
+
+export const ADMIN_ROUTE_FALLBACKS: { path: string; permissions: string[]; roles?: string[] }[] = [
+  { path: '/', permissions: [AdminPerm.reports], roles: ['MATCH_ADMIN'] },
+  { path: '/dashboard/players', permissions: [AdminPerm.reports], roles: ['FINANCE_ADMIN'] },
+  { path: '/users', permissions: [AdminPerm.usersView, AdminPerm.agentsView], roles: ['SUPPORT'] },
+  { path: '/finance-logs', permissions: [AdminPerm.reports], roles: ['SUPPORT'] },
+  { path: '/', permissions: [AdminPerm.reports] },
+  { path: '/matches', permissions: [AdminPerm.matches] },
+  { path: '/bets', permissions: [AdminPerm.bets] },
+  { path: '/audit', permissions: [AdminPerm.audit] },
+];
+
+export function firstAdminFallback(role?: string, permissions?: string[]) {
+  if (role) {
+    for (const item of ADMIN_ROUTE_FALLBACKS) {
+      if (item.roles?.includes(role) && adminCanAccess(role, permissions, item.permissions)) {
+        return item.path;
+      }
+    }
+  }
+  for (const item of ADMIN_ROUTE_FALLBACKS) {
+    if (item.roles) continue;
+    if (adminCanAccess(role, permissions, item.permissions)) return item.path;
+  }
+  return null;
+}
--- a/apps/admin/src/utils/session-hydrate.ts
+++ b/apps/admin/src/utils/session-hydrate.ts
@@ -58,6 +58,7 @@ export async function hydrateStaffSession(): Promise<boolean> {
        userType: raw.userType,
        locale: raw.locale,
        role: raw.role,
+        permissions: Array.isArray(raw.permissions) ? raw.permissions : auth.user.value?.permissions,
        agentLevel: typeof raw.agentLevel === 'number' ? raw.agentLevel : null,
        maxAgentLevel: typeof raw.maxAgentLevel === 'number' ? raw.maxAgentLevel : null,
        canManageSubAgents: raw.canManageSubAgents === true,
--- a/apps/admin/src/views/AgentManager.vue
+++ b/apps/admin/src/views/AgentManager.vue
@@ -7,8 +7,33 @@ import { resolveFormError, resolveApiError } from '../i18n/form-validation';
 import api from '../api';
 import { clearStaffSession } from '../stores/auth';

+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';
+
 const { t, localeTag } = useAdminLocale();
 const router = useRouter();
+const { hasPermission, role: staffRole } = usePermissions();
+
+const canViewAgents = computed(() => hasPermission(AdminPerm.agentsView));
+const canViewUsers = computed(() => hasPermission(AdminPerm.usersView));
+const canCreateUsers = computed(() => hasPermission(AdminPerm.usersCreate));
+const canCreateAgents = computed(() => hasPermission(AdminPerm.agentsCreate));
+const canResetPassword = computed(() => hasPermission(AdminPerm.usersResetPassword));
+const canDeposit = computed(() => hasPermission(AdminPerm.walletDeposit));
+const canWithdraw = computed(() => hasPermission(AdminPerm.walletWithdraw));
+const canAdjustCredit = computed(() => hasPermission(AdminPerm.agentsCredit));
+const canManageSettings = computed(() => hasPermission(AdminPerm.settings));
+const canEditPlayerProfile = computed(() => canCreateUsers.value);
+const playerActionsReadOnly = computed(
+  () => canViewUsers.value && !canCreateUsers.value && !canDeposit.value && !canWithdraw.value,
+);
+const playerActionFlags = computed(() => ({
+  showEdit: canViewUsers.value && (canEditPlayerProfile.value || canResetPassword.value),
+  showDeposit: canDeposit.value,
+  showWithdraw: canWithdraw.value,
+  showFreeze: canEditPlayerProfile.value,
+  showDelete: canEditPlayerProfile.value,
+}));

 import {
  emptyPlayerCreateForm,
@@ -387,9 +412,15 @@ function resolveCreateParentLabel(agentId: string) {

 /* ─── Init ─── */
 onMounted(() => {
-  void loadUsersPageInit();
-  loadAllPlayers();
-  loadTier1Agents();
+  if (canManageSettings.value) {
+    void loadUsersPageInit();
+  }
+  if (canViewUsers.value) {
+    loadAllPlayers();
+  }
+  if (canViewAgents.value) {
+    loadTier1Agents();
+  }
 });

 async function loadUsersPageInit() {
@@ -980,6 +1011,37 @@ async function submitEditPlayer() {
    ElMessage.warning(t('err.password_min'));
    return;
  }
+  const newPwd = editPlayerForm.value.newPassword.trim();
+  const passwordOnly =
+    newPwd &&
+    !canEditPlayerProfile.value &&
+    canResetPassword.value &&
+    !editPlayerForm.value.useCustomCashback;
+
+  if (passwordOnly) {
+    editPlayerLoading.value = true;
+    try {
+      const { data } = await api.post(`/admin/users/${editingId.value}/reset-password`, {
+        password: newPwd,
+      });
+      const plain = data.data?.password ?? newPwd;
+      editPlayerForm.value.managedPassword = plain;
+      editPlayerForm.value.newPassword = '';
+      ElMessage.success(t('user.msg.password_saved', { password: plain }));
+    } catch (e: unknown) {
+      const err = e as { response?: { data?: { error?: string } } };
+      ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+    } finally {
+      editPlayerLoading.value = false;
+    }
+    return;
+  }
+
+  if (!canEditPlayerProfile.value) {
+    ElMessage.warning(t('msg.save_failed'));
+    return;
+  }
+
  try {
    assertPlayerUsername(editPlayerForm.value.username);
  } catch (e) {
@@ -988,7 +1050,6 @@ async function submitEditPlayer() {
  }
  editPlayerLoading.value = true;
  try {
-    const newPwd = editPlayerForm.value.newPassword.trim();
    const payload: Record<string, unknown> = {
      username: editPlayerForm.value.username.trim(),
      phone: editPlayerForm.value.phone.trim() || undefined,
@@ -1346,7 +1407,7 @@ function creditTypeLabel(type: string) {
 <template>
  <div class="admin-list-page agent-mgr-page">
    <!-- ─── Global settings collapse ─── -->
-    <el-collapse v-model="settingsCollapseOpen" class="list-settings">
+    <el-collapse v-if="canManageSettings" v-model="settingsCollapseOpen" class="list-settings">
      <el-collapse-item :title="t('user.page_settings')" name="settings">
        <div class="list-settings-block">
          <p class="list-settings-title">{{ t('user.global_settings') }}</p>
@@ -1438,12 +1499,12 @@ function creditTypeLabel(type: string) {
    <InviteManageDialog v-model="inviteDialogOpen" />

    <div class="mgr-tabs-shell">
-      <el-button type="primary" class="invite-prominent-btn" @click="inviteDialogOpen = true">
+      <el-button v-if="canManageSettings" type="primary" class="invite-prominent-btn" @click="inviteDialogOpen = true">
        {{ t('invite.menu_btn') }}
      </el-button>
-      <el-tabs v-model="activeViewTab" class="mgr-top-tabs mgr-top-tabs--with-invite">
+      <el-tabs v-model="activeViewTab" class="mgr-top-tabs" :class="{ 'mgr-top-tabs--with-invite': canManageSettings }">
      <!-- ─── Tab: 全部玩家（默认） ─── -->
-      <el-tab-pane :label="`${t('user.type.player')} (${playerTotal})`" name="players">
+      <el-tab-pane v-if="canViewUsers" :label="`${t('user.type.player')} (${playerTotal})`" name="players">
        <section class="list-panel player-list-panel">
          <div class="list-panel-toolbar">
            <el-form inline class="list-chrome__grow">
@@ -1456,7 +1517,7 @@ function creditTypeLabel(type: string) {
                  @keyup.enter="searchPlayers"
                />
              </el-form-item>
-              <el-form-item :label="t('user.filter.agent')">
+              <el-form-item v-if="canViewAgents" :label="t('user.filter.agent')">
                <el-select
                  v-model="playerFilterAgent"
                  :placeholder="t('user.filter.agent_ph')"
@@ -1487,7 +1548,7 @@ function creditTypeLabel(type: string) {
                <el-button type="primary" @click="searchPlayers">{{ t('common.search') }}</el-button>
              </el-form-item>
            </el-form>
-            <div class="list-chrome__actions">
+            <div v-if="canCreateUsers" class="list-chrome__actions">
              <el-button type="primary" @click="openCreateAccount">{{ t('user.create_btn') }}</el-button>
            </div>
          </div>
@@ -1530,6 +1591,7 @@ function creditTypeLabel(type: string) {
              <el-table-column :label="t('common.actions')" min-width="340" align="center">
                <template #default="{ row }">
                  <AdminPlayerRowActions
+                    v-bind="playerActionFlags"
                    :row="row"
                    @detail="openDetailPlayer(row.id)"
                    @ledger="openPlayerWalletLedger(row.id, row.username)"
@@ -1559,7 +1621,7 @@ function creditTypeLabel(type: string) {
      </el-tab-pane>

      <!-- ─── Tab: 一级代理 ─── -->
-      <el-tab-pane :label="`${agentTierName(1)} (${tier1Total})`" name="tier1Agents">
+      <el-tab-pane v-if="canViewAgents" :label="`${agentTierName(1)} (${tier1Total})`" name="tier1Agents">
    <section class="list-panel agent-list-panel">
      <div class="list-panel-toolbar">
        <el-form inline class="list-chrome__grow">
@@ -1576,7 +1638,7 @@ function creditTypeLabel(type: string) {
            <el-button type="primary" @click="searchTier1Agents">{{ t('common.search') }}</el-button>
          </el-form-item>
        </el-form>
-        <div class="list-chrome__actions">
+        <div v-if="canCreateAgents" class="list-chrome__actions">
          <el-button type="primary" @click="openCreateTier1Agent">{{ t('agent.create_btn') }}</el-button>
        </div>
      </div>
@@ -1638,6 +1700,7 @@ function creditTypeLabel(type: string) {
                        <el-table-column :label="t('common.actions')" min-width="320" align="center">
                          <template #default="{ row: player }">
                            <AdminPlayerRowActions
+                              v-bind="playerActionFlags"
                              :row="player"
                              @detail="openDetailPlayer(player.id)"
                              @ledger="openPlayerWalletLedger(player.id, player.username)"
@@ -1709,6 +1772,7 @@ function creditTypeLabel(type: string) {
      </el-tab-pane>

      <!-- ─── Tab: L2+ 各级代理 ─── -->
+      <template v-if="canViewAgents">
      <el-tab-pane
        v-for="agentLevel in visibleSubAgentTabLevels"
        :key="agentLevel"
@@ -1794,6 +1858,7 @@ function creditTypeLabel(type: string) {
                        <el-table-column :label="t('common.actions')" min-width="280" align="center">
                          <template #default="{ row: player }">
                            <AdminPlayerRowActions
+                              v-bind="playerActionFlags"
                              :row="player"
                              @detail="openDetailPlayer(player.id)"
                              @ledger="openPlayerWalletLedger(player.id, player.username)"
@@ -1858,6 +1923,7 @@ function creditTypeLabel(type: string) {
          </div>
        </section>
      </el-tab-pane>
+      </template>
    </el-tabs>
    </div>

@@ -2068,7 +2134,13 @@ function creditTypeLabel(type: string) {
    </el-dialog>

    <!-- ── Edit Player ── -->
-    <el-dialog v-model="editPlayerVisible" :title="t('user.dialog.edit')" width="560px" destroy-on-close class="user-edit-dialog">
+    <el-dialog
+      v-model="editPlayerVisible"
+      :title="canEditPlayerProfile ? t('user.dialog.edit') : t('user.field.reset_password')"
+      width="560px"
+      destroy-on-close
+      class="user-edit-dialog"
+    >
      <el-form label-width="84px" size="small" class="compact-edit-form">
        <div class="edit-meta">
          <span>ID {{ editPlayerForm.id }}</span>
@@ -2078,11 +2150,20 @@ function creditTypeLabel(type: string) {
        <div class="edit-form-section">
          <div class="section-title">{{ t('user.section.basic_info') }}</div>
          <el-form-item :label="t('user.col.username')">
-            <el-input v-model="editPlayerForm.username" :placeholder="t('user.ph.username_player')" />
+            <el-input
+              v-model="editPlayerForm.username"
+              :readonly="!canEditPlayerProfile"
+              :placeholder="t('user.ph.username_player')"
+            />
            <div class="field-hint">{{ t('user.hint.username_player') }}</div>
          </el-form-item>
        </div>

+        <div v-if="!canEditPlayerProfile" class="edit-form-section">
+          <div class="section-title">{{ t('user.section.affiliation') }}</div>
+          <el-tag size="small" type="info" class="affiliation-tag">{{ affiliationLabel(editPlayerForm) }}</el-tag>
+        </div>
+
        <div class="edit-form-section">
          <div class="password-mgmt-block">
            <div class="block-title">{{ t('user.section.password_mgmt') }}</div>
@@ -2099,7 +2180,7 @@ function creditTypeLabel(type: string) {
          </div>
        </div>

-        <div class="edit-form-section">
+        <div v-if="canEditPlayerProfile" class="edit-form-section">
          <div class="section-title">{{ t('user.section.affiliation') }}</div>
          <el-form-item :label="t('user.col.agent')">
            <el-tag size="small" type="info" class="affiliation-tag">{{ affiliationLabel(editPlayerForm) }}</el-tag>
@@ -2121,7 +2202,7 @@ function creditTypeLabel(type: string) {
          </el-form-item>
        </div>

-        <div class="edit-form-section">
+        <div v-if="canEditPlayerProfile" class="edit-form-section">
          <div class="section-title">{{ t('user.section.contact') }}</div>
          <el-row :gutter="12" class="contact-row">
            <el-col :span="12">
@@ -2155,7 +2236,9 @@ function creditTypeLabel(type: string) {
      </el-form>
      <template #footer>
        <el-button size="small" @click="editPlayerVisible = false">{{ t('common.cancel') }}</el-button>
-        <el-button size="small" type="primary" :loading="editPlayerLoading" @click="submitEditPlayer">{{ t('user.btn.save_profile') }}</el-button>
+        <el-button size="small" type="primary" :loading="editPlayerLoading" @click="submitEditPlayer">
+          {{ canEditPlayerProfile ? t('user.btn.save_profile') : t('user.field.reset_password') }}
+        </el-button>
      </template>
    </el-dialog>

--- a/apps/admin/src/views/Audit.vue
+++ b/apps/admin/src/views/Audit.vue
@@ -12,13 +12,19 @@ interface AuditRow {
  action: string;
  module: string;
  targetId: string | null;
+  operatorId: string | null;
+  operatorUsername: string | null;
+  operatorRole: string | null;
+  operatorUserType: string | null;
+  operatorType: string;
+  ipAddress: string | null;
  createdAt: string;
 }

 const logs = ref<AuditRow[]>([]);
 const total = ref(0);
 const page = ref(1);
-const pageSize = ref(10);
+const pageSize = ref(20);
 const filterModule = ref('');

 onMounted(load);
@@ -56,6 +62,24 @@ function formatTime(v: string) {
    second: '2-digit',
  });
 }
+
+function operatorRoleLabel(row: AuditRow): string | null {
+  const code = row.operatorRole;
+  if (code === 'SUPER_ADMIN') return t('role.super_admin');
+  if (code === 'MATCH_ADMIN') return t('role.match_admin');
+  if (code === 'FINANCE_ADMIN') return t('role.finance_admin');
+  if (code === 'SUPPORT') return t('role.support');
+  if (row.operatorUserType === 'ADMIN' || row.operatorType === 'ADMIN') return t('role.admin');
+  if (row.operatorUserType === 'AGENT' || row.operatorType === 'AGENT') return t('role.agent');
+  if (row.operatorUserType === 'PLAYER' || row.operatorType === 'PLAYER') return t('audit.operator_player');
+  return null;
+}
+
+function operatorDisplay(row: AuditRow): string {
+  if (row.operatorUsername) return row.operatorUsername;
+  if (row.operatorType === 'SYSTEM') return t('audit.operator_system');
+  return '—';
+}
 </script>

 <template>
@@ -79,19 +103,30 @@ function formatTime(v: string) {

    <el-card class="data-card" shadow="never">
      <div class="table-wrap">
-        <el-table :data="logs" stripe>
+        <el-table :key="locale" :data="logs" stripe>
          <template #empty>
            <AdminTableEmpty />
          </template>
+          <el-table-column :label="t('audit.col.time')" min-width="168" fixed="left">
+            <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+          </el-table-column>
+          <el-table-column :label="t('audit.col.operator')" min-width="160">
+            <template #default="{ row }">
+              <div class="operator-cell">
+                <span class="operator-name">{{ operatorDisplay(row) }}</span>
+                <span v-if="operatorRoleLabel(row)" class="operator-role">{{ operatorRoleLabel(row) }}</span>
+              </div>
+            </template>
+          </el-table-column>
          <el-table-column :label="t('audit.col.action')" min-width="140">
            <template #default="{ row }">{{ auditActionLabel(row.action) }}</template>
          </el-table-column>
          <el-table-column :label="t('audit.col.module')" width="120">
            <template #default="{ row }">{{ auditModuleLabel(row.module) }}</template>
          </el-table-column>
-          <el-table-column prop="targetId" :label="t('audit.col.target_id')" min-width="100" />
-          <el-table-column :label="t('audit.col.time')" min-width="160">
-            <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+          <el-table-column prop="targetId" :label="t('audit.col.target_id')" min-width="100" show-overflow-tooltip />
+          <el-table-column :label="t('audit.col.ip')" min-width="120" show-overflow-tooltip>
+            <template #default="{ row }">{{ row.ipAddress ?? '—' }}</template>
          </el-table-column>
        </el-table>
      </div>
@@ -114,4 +149,21 @@ function formatTime(v: string) {
 <style scoped>
 .filter-card { border-radius: 12px; }
 .data-card   { border-radius: 12px; }
+
+.operator-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.35;
+}
+
+.operator-name {
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+
+.operator-role {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
 </style>
--- a/apps/admin/src/views/Cashback.vue
+++ b/apps/admin/src/views/Cashback.vue
@@ -3,6 +3,8 @@ import { computed, onMounted, ref } from 'vue';
 import type { TableColumnCtx } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';
 import { formatAmount, formatAmountFull } from '../utils/format-amount';
 import { formatRatePercent } from '../utils/rate-percent';
 import AdminTableEmpty from '../components/AdminTableEmpty.vue';
@@ -46,6 +48,8 @@ interface CashbackPreview {
 }

 const { t, localeTag } = useAdminLocale();
+const { hasPermission } = usePermissions();
+const canConfirmCashback = computed(() => hasPermission(AdminPerm.cashback));

 const preview = ref<CashbackPreview | null>(null);
 const rulesVisible = ref(false);
@@ -418,7 +422,7 @@ onMounted(loadHistory);
          </el-table>
        </div>

-        <div v-if="preview.batch.status === 'PREVIEW'" class="preview-actions">
+        <div v-if="preview.batch.status === 'PREVIEW' && canConfirmCashback" class="preview-actions">
          <el-button type="success" :disabled="previewItems.length === 0" @click="confirm">
            {{ t('cashback.confirm_issue') }}
          </el-button>
@@ -484,7 +488,7 @@ onMounted(loadHistory);
              <el-button link type="primary" @click="openDetail(row.id)">
                {{ t('cashback.view_detail') }}
              </el-button>
-              <template v-if="row.status === 'PREVIEW'">
+              <template v-if="row.status === 'PREVIEW' && canConfirmCashback">
                <el-button link type="success" @click="confirmBatchId(row.id)">
                  {{ t('cashback.confirm_issue') }}
                </el-button>
@@ -577,7 +581,7 @@ onMounted(loadHistory);
              </el-table-column>
            </el-table>
          </div>
-          <div v-if="detail?.batch.status === 'PREVIEW'" class="detail-actions">
+          <div v-if="detail?.batch.status === 'PREVIEW' && canConfirmCashback" class="detail-actions">
            <el-button type="success" :disabled="detailItems.length === 0" @click="confirmBatchId(detail.batch.id)">
              {{ t('cashback.confirm_issue') }}
            </el-button>
--- a/apps/admin/src/views/Contents.vue
+++ b/apps/admin/src/views/Contents.vue
@@ -3,6 +3,8 @@ import { ref, computed, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import type { TableInstance } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';
 import api from '../api';
 import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 import {
@@ -11,6 +13,8 @@ import {
 } from './match-form';

 const { t, localeTag } = useAdminLocale();
+const { hasPermission } = usePermissions();
+const canManageContent = computed(() => hasPermission(AdminPerm.content));

 /* ── Image upload helpers ── */
 const IMAGE_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml';
@@ -470,9 +474,10 @@ void load();
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="load">{{ t('common.search') }}</el-button>
-          <el-button type="primary" plain size="small" @click="openCreate">
+          <el-button v-if="canManageContent" type="primary" plain size="small" @click="openCreate">
            {{ t('content.btn.create') }}
          </el-button>
+          <template v-if="canManageContent">
          <span v-if="hasSelection" class="batch-hint">
            {{ t('content.batch.selected', { n: selectedRows.length }) }}
          </span>
@@ -499,6 +504,7 @@ void load();
          >
            {{ t('content.batch.delete') }}
          </el-button>
+          </template>
        </el-form-item>
      </el-form>
    </el-card>
--- a/apps/admin/src/views/HomeEntry.vue
+++ b/apps/admin/src/views/HomeEntry.vue
@@ -1,17 +1,40 @@
 <script setup lang="ts">
 import { shallowRef, onBeforeMount, type Component } from 'vue';
-import { RouterView } from 'vue-router';
+import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
+import { useAdminLocale } from '../composables/useAdminLocale';
 import { useAuthStore } from '../stores/auth';
 import { ensureStaffSession } from '../utils/session-hydrate';
 import DashboardSubNav from '../components/DashboardSubNav.vue';
+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';

 const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useAdminLocale();
+const { hasPermission, role } = usePermissions();
 const agentDashboard = shallowRef<Component | null>(null);
 const booting = shallowRef(true);

+const showSupportShortcuts = shallowRef(false);
+
 onBeforeMount(async () => {
  await ensureStaffSession();
-  if (!auth.isAdmin.value) {
+  if (auth.isAdmin.value) {
+    const code = role.value;
+    if (code === 'FINANCE_ADMIN' && route.path === '/') {
+      await router.replace('/dashboard/players');
+    } else if (code === 'SUPPORT') {
+      showSupportShortcuts.value = true;
+      if (route.path === '/' || route.path === '/dashboard/players') {
+        if (hasPermission(AdminPerm.usersView, AdminPerm.agentsView)) {
+          await router.replace('/users');
+        } else if (hasPermission(AdminPerm.bets)) {
+          await router.replace('/bets');
+        }
+      }
+    }
+  } else {
    agentDashboard.value = (await import('./agent/Dashboard.vue')).default;
  }
  booting.value = false;
@@ -21,6 +44,17 @@ onBeforeMount(async () => {
 <template>
  <div v-if="booting" v-loading="true" class="home-boot" />
  <template v-else-if="auth.isAdmin.value">
+    <div v-if="showSupportShortcuts" class="support-shortcuts">
+      <RouterLink v-if="hasPermission(AdminPerm.usersView, AdminPerm.agentsView)" to="/users" class="support-link">
+        {{ t('nav.agents_players') }}
+      </RouterLink>
+      <RouterLink v-if="hasPermission(AdminPerm.bets)" to="/bets" class="support-link">
+        {{ t('nav.bets') }}
+      </RouterLink>
+      <RouterLink v-if="hasPermission(AdminPerm.reports)" to="/finance-logs" class="support-link">
+        {{ t('nav.finance_logs') }}
+      </RouterLink>
+    </div>
    <div class="dashboard-shell">
      <div class="list-chrome">
        <div class="list-chrome__row">
@@ -40,6 +74,28 @@ onBeforeMount(async () => {
  min-height: 240px;
 }

+.support-shortcuts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.support-link {
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: #fff;
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--text);
+}
+
+.support-link:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
 .dashboard-shell :deep(.list-chrome) {
  margin-bottom: 4px;
 }
--- a/apps/admin/src/views/Login.vue
+++ b/apps/admin/src/views/Login.vue
@@ -7,6 +7,8 @@ import { useAuthStore, type StaffUser } from '../stores/auth';
 import RobotVerify from '../components/RobotVerify.vue';
 import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import { ensureStaffSession } from '../utils/session-hydrate';
+import { effectivePermissions, firstAdminFallback } from '../utils/admin-access';
 import bgImage from '../assets/images/bg.webp';

 const router = useRouter();
@@ -19,13 +21,25 @@ const loading = ref(false);
 const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
 const isDev = import.meta.env.DEV;

+async function finishLogin(payload: { token: string; user: StaffUser }) {
+  auth.setSession(payload.token, payload.user);
+  await ensureStaffSession();
+  const redirectQuery = route.query.redirect as string | undefined;
+  const role = auth.user.value?.role;
+  const permissions = effectivePermissions(role, auth.user.value?.permissions);
+  const target =
+    redirectQuery ||
+    firstAdminFallback(role, permissions) ||
+    '/';
+  await router.push(target);
+}
+
 async function quickLogin(username: string, password: string) {
  loading.value = true;
  try {
    const { data } = await api.post('/manage/auth/login', { username, password });
    const payload = data.data as { token: string; user: StaffUser };
-    auth.setSession(payload.token, payload.user);
-    router.push((route.query.redirect as string) || '/');
+    await finishLogin(payload);
  } catch {
    ElMessage.error(t('login.err_quick'));
  } finally {
@@ -43,8 +57,7 @@ async function login() {
  try {
    const { data } = await api.post('/manage/auth/login', form.value);
    const payload = data.data as { token: string; user: StaffUser };
-    auth.setSession(payload.token, payload.user);
-    router.push((route.query.redirect as string) || '/');
+    await finishLogin(payload);
  } catch {
    ElMessage.error(t('login.err_failed'));
    captchaRef.value?.refresh();
@@ -97,6 +110,18 @@ async function login() {
                  <span class="quick-role">{{ t('login.quick_agent2') }}</span>
                  <span class="quick-acc">agent2</span>
                </button>
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('matchadmin', 'MatchAdmin@123')">
+                  <span class="quick-role">{{ t('login.quick_match_admin') }}</span>
+                  <span class="quick-acc">matchadmin</span>
+                </button>
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('financeadmin', 'FinanceAdmin@123')">
+                  <span class="quick-role">{{ t('login.quick_finance_admin') }}</span>
+                  <span class="quick-acc">financeadmin</span>
+                </button>
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('support1', 'Support@123')">
+                  <span class="quick-role">{{ t('login.quick_support') }}</span>
+                  <span class="quick-acc">support1</span>
+                </button>
              </div>
            </template>
          </div>
--- a/apps/admin/src/views/Settlement.vue
+++ b/apps/admin/src/views/Settlement.vue
@@ -5,6 +5,8 @@ import { formatApiErrorMessage, isApiErrorCode } from '@thebet365/shared';
 import api from '../api';
 import { ElMessage } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import { usePermissions } from '../composables/usePermissions';
+import { AdminPerm } from '../constants/permissions';

 const VChart = defineAsyncComponent(() =>
  import('../components/dashboard/echarts-setup').then((m) => m.VChart),
@@ -69,6 +71,8 @@ interface SettlementBetStats {
 }

 const { t, locale, localeTag } = useAdminLocale();
+const { hasPermission } = usePermissions();
+const canResettle = computed(() => hasPermission(AdminPerm.resettle));
 const route = useRoute();
 const router = useRouter();
 const STAT_FACT_LABELS = {
@@ -770,7 +774,7 @@ onMounted(() => {
              isOutright ? t('settlement.outright.preview_hint') : t('settlement.preview_hint')
            }}</span>
          </template>
-          <template v-else>
+          <template v-else-if="canResettle">
            <el-input
              v-model="resettleReason"
              size="small"
@@ -787,7 +791,7 @@ onMounted(() => {

    <!-- 智能比分弹窗已关闭（见 Settlement.vue git 历史） -->

-    <el-card v-if="resettlePreview" class="preview-card" shadow="never">
+    <el-card v-if="canResettle && resettlePreview" class="preview-card" shadow="never">
      <div class="preview-title">{{ t('settlement.resettle_preview_title') }}</div>
      <el-row :gutter="20">
        <el-col :span="8">
--- a/apps/admin/src/views/StaffManage.vue
+++ b/apps/admin/src/views/StaffManage.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import api from '../api';
+import { useAdminLocale } from '../composables/useAdminLocale';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';
+import AdminTableWrap from '../components/AdminTableWrap.vue';
+
+interface StaffRow {
+  id: string;
+  username: string;
+  status: string;
+  role: string | null;
+  roleName: string | null;
+  lastLoginAt: string | null;
+  createdAt: string;
+}
+
+interface RoleOption {
+  id: string;
+  code: string;
+  name: string;
+}
+
+const { t, localeTag } = useAdminLocale();
+
+const loading = ref(false);
+const rows = ref<StaffRow[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+const keyword = ref('');
+const roles = ref<RoleOption[]>([]);
+
+const createVisible = ref(false);
+const createLoading = ref(false);
+const createForm = ref({ username: '', password: '', confirmPassword: '', roleCode: 'MATCH_ADMIN' });
+
+const editVisible = ref(false);
+const editLoading = ref(false);
+const editForm = ref({ id: '', username: '', status: 'ACTIVE', roleCode: 'MATCH_ADMIN', password: '' });
+
+const roleLabel = computed(() => {
+  const map: Record<string, string> = {
+    SUPER_ADMIN: t('role.super_admin'),
+    MATCH_ADMIN: t('role.match_admin'),
+    FINANCE_ADMIN: t('role.finance_admin'),
+    SUPPORT: t('role.support'),
+  };
+  return (code: string | null) => (code ? map[code] ?? code : '—');
+});
+
+function formatTime(value: string | null) {
+  if (!value) return '—';
+  return new Date(value).toLocaleString(localeTag.value);
+}
+
+async function loadRoles() {
+  const { data } = await api.get('/admin/staff/roles');
+  roles.value = (data.data ?? []) as RoleOption[];
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/admin/staff', {
+      params: {
+        page: page.value,
+        pageSize: pageSize.value,
+        keyword: keyword.value.trim() || undefined,
+      },
+    });
+    rows.value = data.data.items as StaffRow[];
+    total.value = data.data.total;
+  } catch {
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  createForm.value = { username: '', password: '', confirmPassword: '', roleCode: 'MATCH_ADMIN' };
+  createVisible.value = true;
+}
+
+async function submitCreate() {
+  const f = createForm.value;
+  if (!f.username.trim()) {
+    ElMessage.warning(t('err.username_required'));
+    return;
+  }
+  if (f.password.length < 8) {
+    ElMessage.warning(t('err.password_min'));
+    return;
+  }
+  if (f.password !== f.confirmPassword) {
+    ElMessage.warning(t('err.password_mismatch'));
+    return;
+  }
+  createLoading.value = true;
+  try {
+    await api.post('/admin/staff', {
+      username: f.username.trim(),
+      password: f.password,
+      roleCode: f.roleCode,
+    });
+    ElMessage.success(t('msg.saved'));
+    createVisible.value = false;
+    await load();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    createLoading.value = false;
+  }
+}
+
+function openEdit(row: StaffRow) {
+  editForm.value = {
+    id: row.id,
+    username: row.username,
+    status: row.status,
+    roleCode: row.role ?? 'MATCH_ADMIN',
+    password: '',
+  };
+  editVisible.value = true;
+}
+
+async function submitEdit() {
+  const f = editForm.value;
+  if (f.password && f.password.length < 8) {
+    ElMessage.warning(t('err.password_min'));
+    return;
+  }
+  editLoading.value = true;
+  try {
+    const payload: Record<string, string> = {
+      status: f.status,
+      roleCode: f.roleCode,
+    };
+    if (f.password.trim()) payload.password = f.password.trim();
+    const { data } = await api.patch(`/admin/staff/${f.id}`, payload);
+    if (data.data?.password) {
+      ElMessage.success(t('user.msg.password_saved', { password: data.data.password }));
+    } else {
+      ElMessage.success(t('msg.saved'));
+    }
+    editVisible.value = false;
+    await load();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    editLoading.value = false;
+  }
+}
+
+onMounted(async () => {
+  await loadRoles();
+  await load();
+});
+</script>
+
+<template>
+  <div class="admin-list-page staff-page">
+    <section class="list-panel">
+      <div class="list-panel-toolbar">
+        <el-form inline class="list-chrome__grow">
+          <el-form-item :label="t('common.keyword')">
+            <el-input
+              v-model="keyword"
+              :placeholder="t('login.username_ph')"
+              clearable
+              style="width: 180px"
+              @keyup.enter="load"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="list-chrome__actions">
+          <el-button type="primary" @click="openCreate">{{ t('staff.create_btn') }}</el-button>
+        </div>
+      </div>
+
+      <AdminTableWrap>
+        <el-table v-loading="loading" :data="rows" stripe>
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
+          <el-table-column prop="username" :label="t('login.username')" min-width="120" />
+          <el-table-column :label="t('staff.col.role')" min-width="140">
+            <template #default="{ row }">{{ roleLabel(row.role) }}</template>
+          </el-table-column>
+          <el-table-column :label="t('common.status')" width="100">
+            <template #default="{ row }">{{ row.status }}</template>
+          </el-table-column>
+          <el-table-column :label="t('staff.col.last_login')" min-width="160">
+            <template #default="{ row }">{{ formatTime(row.lastLoginAt) }}</template>
+          </el-table-column>
+          <el-table-column :label="t('common.actions')" width="100" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="openEdit(row)">{{ t('common.edit') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </AdminTableWrap>
+
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next"
+          background
+          @current-change="load"
+          @size-change="load"
+        />
+      </div>
+    </section>
+
+    <el-dialog v-model="createVisible" :title="t('staff.dialog.create')" width="480px" destroy-on-close>
+      <el-form label-width="120px">
+        <el-form-item :label="t('login.username')" required>
+          <el-input v-model="createForm.username" autocomplete="off" />
+        </el-form-item>
+        <el-form-item :label="t('staff.col.role')" required>
+          <el-select v-model="createForm.roleCode" style="width: 100%">
+            <el-option
+              v-for="r in roles.filter((x) => x.code !== 'SUPER_ADMIN')"
+              :key="r.code"
+              :label="roleLabel(r.code)"
+              :value="r.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('login.password')" required>
+          <el-input v-model="createForm.password" type="password" autocomplete="new-password" />
+        </el-form-item>
+        <el-form-item :label="t('user.field.confirm_password')" required>
+          <el-input v-model="createForm.confirmPassword" type="password" autocomplete="new-password" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="createVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="createLoading" @click="submitCreate">{{ t('common.confirm') }}</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="editVisible" :title="t('staff.dialog.edit')" width="480px" destroy-on-close>
+      <el-form label-width="120px">
+        <el-form-item :label="t('login.username')">
+          <el-input :model-value="editForm.username" disabled />
+        </el-form-item>
+        <el-form-item :label="t('staff.col.role')">
+          <el-select v-model="editForm.roleCode" style="width: 100%" :disabled="editForm.roleCode === 'SUPER_ADMIN'">
+            <el-option
+              v-for="r in roles"
+              :key="r.code"
+              :label="roleLabel(r.code)"
+              :value="r.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('common.status')">
+          <el-select v-model="editForm.status" style="width: 100%">
+            <el-option label="ACTIVE" value="ACTIVE" />
+            <el-option label="SUSPENDED" value="SUSPENDED" />
+            <el-option label="DISABLED" value="DISABLED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('user.field.reset_password')">
+          <el-input v-model="editForm.password" type="password" autocomplete="new-password" :placeholder="t('user.ph.reset_password_short')" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="editLoading" @click="submitEdit">{{ t('common.confirm') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.staff-page .pager {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
--- a/apps/admin/src/views/dashboard/DashboardMatches.vue
+++ b/apps/admin/src/views/dashboard/DashboardMatches.vue
@@ -3,11 +3,14 @@ import { computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAdminDashboard } from '../../composables/useAdminDashboard';
 import EChartPanel from '../../components/dashboard/EChartPanel.vue';
-import { buildCombinedTrendOption, buildTriplePieOption } from '../../utils/dashboard-charts';
+import { buildCombinedTrendOption, buildTriplePieOption, buildBarChartOption } from '../../utils/dashboard-charts';
 import { betStatusLabel } from '../../utils/bet-labels';
 import { useAdminLocale } from '../../composables/useAdminLocale';
+import { usePermissions } from '../../composables/usePermissions';

 const { t } = useAdminLocale();
+const { role } = usePermissions();
+const isMatchOperatorView = computed(() => role.value === 'MATCH_ADMIN');
 const router = useRouter();
 const {
  s,
@@ -32,8 +35,16 @@ function goKpiLink(link: KpiLink) {
  router.push(link.query ? { path: link.path, query: link.query } : link.path);
 }

-const mainTrendOption = computed(() =>
-  buildCombinedTrendOption(
+const mainTrendOption = computed(() => {
+  const counts = s.value?.trend7d?.map((d) => d.betCount) ?? [];
+  if (isMatchOperatorView.value) {
+    return buildBarChartOption(
+      trendLabels.value,
+      [{ name: t('dash.chart_bet_count'), color: '#956400', values: counts }],
+      { amountAxis: false },
+    );
+  }
+  return buildCombinedTrendOption(
    trendLabels.value,
    [
      {
@@ -52,10 +63,10 @@ const mainTrendOption = computed(() =>
        values: s.value?.trend7d?.map((d) => toNum(d.ggr)) ?? [],
      },
    ],
-    s.value?.trend7d?.map((d) => d.betCount) ?? [],
+    counts,
    chartI18n.value,
-  ),
-);
+  );
+});

 const distributionOption = computed(() => {
  const m = s.value?.matches;
@@ -146,13 +157,15 @@ const kpiMatch = computed(() => {
    <template v-else-if="s">
      <el-card class="overview-board" shadow="never">
        <div v-if="s.generatedAt" class="board-head">
-          <span class="board-hint">{{ t('dash.section_matches_hint') }}</span>
+          <span class="board-hint">{{
+            isMatchOperatorView ? t('dash.section_match_ops_hint') : t('dash.section_matches_hint')
+          }}</span>
          <span class="dash-updated">
            {{ t('common.updated_at') }} {{ formatTime(s.generatedAt) }}
          </span>
        </div>

-        <div class="kpi-grid kpi-primary">
+        <div v-if="!isMatchOperatorView" class="kpi-grid kpi-primary">
          <div v-for="item in kpiPrimary" :key="item.label" class="kpi-cell">
            <span class="kpi-label">{{ item.label }}</span>
            <span class="kpi-value">{{ item.value }}</span>
@@ -166,7 +179,7 @@ const kpiMatch = computed(() => {
          </div>
        </div>

-        <div class="kpi-grid kpi-secondary">
+        <div class="kpi-grid" :class="isMatchOperatorView ? 'kpi-primary' : 'kpi-secondary'">
          <div
            v-for="item in kpiMatch"
            :key="item.label"
@@ -185,7 +198,9 @@ const kpiMatch = computed(() => {

        <div class="charts-stack">
          <EChartPanel title="" :option="mainTrendOption" height="300px" class="chart-main" />
-          <div class="chart-main-caption">{{ t('dash.trend_caption') }}</div>
+          <div class="chart-main-caption">{{
+            isMatchOperatorView ? t('dash.trend_bet_count_caption') : t('dash.trend_caption')
+          }}</div>
          <EChartPanel title="" :option="distributionOption" height="200px" class="chart-dist" />
        </div>
      </el-card>