Scoreboard/web/src/admin/pages/SystemPage.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import PageHeader from '../components/PageHeader.vue'
import UsersPanel from '../components/system/UsersPanel.vue'
import BackupPanel from '../components/system/BackupPanel.vue'
import EventInfoPanel from '../components/system/EventInfoPanel.vue'
import ImageAssetsPanel from '../components/system/ImageAssetsPanel.vue'
import SessionPanel from '../components/system/SessionPanel.vue'
import { useAuthStore } from '../stores/auth'
import { useEventStore } from '../stores/event'

/**
 * 系统页（devdocs/07 第 1 节）。
 *
 * 四块内容互相独立，用页签切换而不是塞进一屏：用户管理需要横向空间，
 * 备份和赛事信息又很少同时改。每个面板各自负责加载态 / 空态 / 错误态。
 */

type TabKey = 'users' | 'session' | 'backup' | 'images' | 'event'

const TABS: ReadonlyArray<{ key: TabKey; label: string }> = [
  { key: 'users', label: '用户管理' },
  // 登录有效期是机器级配置（system.db），与赛事信息那种随赛事包走的配置分开摆。
  { key: 'session', label: '登录有效期' },
  { key: 'backup', label: '备份' },
  // 上传图片的孤儿清理：删文件不可撤销，只有管理员能看，所以挂在系统页而不是赛事信息页。
  { key: 'images', label: '图片资源' },
  { key: 'event', label: '赛事信息' },
]

const auth = useAuthStore()
const data = useEventStore()

const activeTab = ref<TabKey>('users')

const isAdmin = computed(() => auth.user?.role === 'admin')
/** 用户管理 / 备份的后端接口是 admin-only，非 admin 不挂载这两个面板。 */
const visibleTabs = computed(() => (isAdmin.value ? TABS : TABS.filter((tab) => tab.key === 'event')))

watch(
  isAdmin,
  (admin) => {
    if (!admin && activeTab.value !== 'event') activeTab.value = 'event'
  },
  { immediate: true },
)
</script>

<template>
  <div>
    <PageHeader title="系统" subtitle="用户管理 / 登录有效期 / 备份恢复 / 赛事信息（devdocs/08 第 2、6 节）" />

    <div class="system-toolbar">
      <div class="mx-tabs">
        <button
          v-for="tab in visibleTabs"
          :key="tab.key"
          class="mx-tab"
          :class="{ active: activeTab === tab.key }"
          type="button"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
        </button>
      </div>
      <span class="mx-badge" :class="isAdmin ? 'mx-badge-success' : 'mx-badge-neutral'">
        {{ isAdmin ? `当前身份：${auth.displayName}` : `${auth.roleLabel} · ${auth.displayName}` }}
      </span>
    </div>

    <p v-if="!isAdmin" class="role-note">
      系统配置类接口对 Guest 一律 403（devdocs/08 第 2 节），因此这里的写操作按钮全部禁用；
      登录管理员账号后即可操作。
    </p>

    <p v-if="data.error !== null" class="role-note error">数据加载失败：{{ data.error }}</p>

    <UsersPanel v-if="isAdmin && activeTab === 'users'" />
    <SessionPanel v-else-if="isAdmin && activeTab === 'session'" />
    <BackupPanel v-else-if="isAdmin && activeTab === 'backup'" />
    <ImageAssetsPanel v-else-if="isAdmin && activeTab === 'images'" />
    <EventInfoPanel v-else />
  </div>
</template>

<style scoped>
.system-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.role-note {
  font-size: 12px;
  color: var(--mx-t3);
  line-height: 1.7;
  padding: 8px 10px;
  border-radius: var(--mx-r-xs);
  background: var(--mx-s3);
  margin-bottom: 14px;
}
.role-note.error {
  color: var(--mx-error);
  background: rgba(248, 113, 113, 0.1);
}
</style>