update

frontend/src/views/approvals/ApprovalInstanceView.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { getApprovalInstances, decideApproval, type ApprovalInstance } from '@/api/modules/approval'
+import { getUsers, type SystemUser } from '@/api/modules/system'
+
+const loading = ref(false)
+const instances = ref<ApprovalInstance[]>([])
+const users = ref<SystemUser[]>([])
+const statusFilter = ref<string | undefined>(undefined)
+const showDecide = ref(false)
+const current = ref<ApprovalInstance | null>(null)
+const decision = ref({ step_index: 0, approver_id: '', approved: true, comment: '' })
+
+const statusOptions = [
+  { label: '待审批', value: 'pending' },
+  { label: '已通过', value: 'approved' },
+  { label: '已拒绝', value: 'rejected' },
+]
+
+async function load() {
+  loading.value = true
+  try {
+    instances.value = await getApprovalInstances(statusFilter.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadUsers() {
+  try {
+    users.value = await getUsers()
+  } catch {
+    users.value = []
+  }
+}
+
+function userName(id?: string) {
+  if (!id) return '—'
+  return users.value.find((u) => u.id === id)?.username || id
+}
+
+function openDecide(inst: ApprovalInstance) {
+  current.value = inst
+  const step = inst.steps.find((s) => s.status === 'pending')
+  decision.value = { step_index: step ? step.step_index : 0, approver_id: '', approved: true, comment: '' }
+  showDecide.value = true
+}
+
+async function submitDecision() {
+  if (!current.value) return
+  if (!decision.value.approver_id) {
+    ElMessage.warning('请选择审批人')
+    return
+  }
+  await decideApproval(current.value.id, decision.value.step_index, {
+    approver_id: decision.value.approver_id,
+    approved: decision.value.approved,
+    comment: decision.value.comment,
+  })
+  ElMessage.success('审批已提交')
+  showDecide.value = false
+  load()
+}
+
+onMounted(() => {
+  loadUsers()
+  load()
+})
+</script>
+
+<template>
+  <div class="page">
+    <DataTablePage title="审批实例" :data="instances" :loading="loading" searchable search-fields="resource_type,resource_id">
+      <template #toolbar-extra>
+        <el-select v-model="statusFilter" placeholder="状态" clearable style="width: 140px" @change="load">
+          <el-option v-for="s in statusOptions" :key="s.value" :label="s.label" :value="s.value" />
+        </el-select>
+      </template>
+      <template #columns>
+        <el-table-column prop="resource_type" label="资源类型" min-width="120" />
+        <el-table-column prop="resource_id" label="资源 ID" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="applicant_id" label="申请人" min-width="120">
+          <template #default="{ row }">{{ userName(row.applicant_id) }}</template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" min-width="100" />
+        <el-table-column prop="current_step" label="当前步骤" min-width="100" />
+        <el-table-column prop="create_time" label="创建时间" min-width="180" />
+      </template>
+      <template #actions="{ row }">
+        <el-button v-if="row.status === 'pending'" link type="primary" @click="openDecide(row)">审批</el-button>
+      </template>
+    </DataTablePage>
+    <el-dialog v-model="showDecide" title="审批决策" width="480px">
+      <el-form label-width="80px" v-if="current">
+        <el-form-item label="实例">
+          {{ current.resource_type }} / {{ current.resource_id }}
+        </el-form-item>
+        <el-form-item label="步骤">
+          第 {{ decision.step_index + 1 }} 步
+        </el-form-item>
+        <el-form-item label="审批人" required>
+          <el-select v-model="decision.approver_id" filterable style="width: 100%">
+            <el-option v-for="u in users" :key="u.id" :label="u.username" :value="u.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="结果">
+          <el-radio-group v-model="decision.approved">
+            <el-radio :value="true">通过</el-radio>
+            <el-radio :value="false">拒绝</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="意见">
+          <el-input v-model="decision.comment" type="textarea" :rows="3" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showDecide = false">取消</el-button>
+        <el-button type="primary" @click="submitDecision">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+</style>

frontend/src/views/approvals/ApprovalTemplateView.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { createApprovalTemplate, getApprovalTemplates, type ApprovalTemplate } from '@/api/modules/approval'
+
+const loading = ref(false)
+const templates = ref<ApprovalTemplate[]>([])
+const showCreate = ref(false)
+const form = ref({ name: '', stepsText: '[]' })
+
+async function load() {
+  loading.value = true
+  try {
+    templates.value = await getApprovalTemplates()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function submitCreate() {
+  if (!form.value.name) {
+    ElMessage.warning('请填写模板名称')
+    return
+  }
+  let steps: unknown[] = []
+  try {
+    steps = JSON.parse(form.value.stepsText || '[]')
+  } catch {
+    ElMessage.error('步骤需为合法 JSON 数组')
+    return
+  }
+  await createApprovalTemplate({ name: form.value.name, steps: steps as any })
+  ElMessage.success('模板创建成功')
+  showCreate.value = false
+  form.value = { name: '', stepsText: '[]' }
+  load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page">
+    <DataTablePage title="审批模板" :data="templates" :loading="loading">
+      <template #toolbar-extra>
+        <el-button type="primary" :icon="Plus" @click="showCreate = true">新建模板</el-button>
+      </template>
+      <template #columns>
+        <el-table-column prop="name" label="模板名" min-width="160" />
+        <el-table-column label="步骤数" min-width="100">
+          <template #default="{ row }">{{ (row.steps || []).length }}</template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="创建时间" min-width="180" />
+      </template>
+    </DataTablePage>
+    <el-dialog v-model="showCreate" title="新建审批模板" width="560px">
+      <el-form label-width="90px">
+        <el-form-item label="名称" required>
+          <el-input v-model="form.name" placeholder="模板名" />
+        </el-form-item>
+        <el-form-item label="步骤 JSON">
+          <el-input v-model="form.stepsText" type="textarea" :rows="5" placeholder='[{"approver_id":"u1"},{"approver_id":"u2"}]' />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showCreate = false">取消</el-button>
+        <el-button type="primary" @click="submitCreate">创建</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+</style>

frontend/src/views/audit/AuditLogView.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getAuditLogs, exportAuditLogs, type AuditLog, type AuditQuery } from '@/api/modules/audit'
+
+const loading = ref(false)
+const logs = ref<AuditLog[]>([])
+const total = ref(0)
+const query = reactive<AuditQuery>({
+  tenant_id: '',
+  project_id: '',
+  actor_id: '',
+  action: '',
+  target_type: '',
+  start_time: '',
+  end_time: '',
+  limit: 50,
+  offset: 0,
+})
+
+// 时间范围（el-date-picker 双向绑定数组 [start, end]）
+const timeRange = ref<[string, string] | null>(null)
+
+function applyTimeRange() {
+  if (timeRange.value && timeRange.value.length === 2) {
+    query.start_time = timeRange.value[0]
+    query.end_time = timeRange.value[1]
+  } else {
+    query.start_time = ''
+    query.end_time = ''
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await getAuditLogs({ ...query })
+    logs.value = res.items
+    total.value = res.total
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleExport() {
+  try {
+    const blob = await exportAuditLogs({ ...query, limit: 10000, offset: 0 })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `audit_logs_${Date.now()}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch {
+    ElMessage.error('导出失败')
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-header">
+      <h2 class="page-title">审计日志</h2>
+      <el-button @click="handleExport">导出 CSV</el-button>
+    </div>
+    <el-card class="filter-card">
+      <el-form :inline="true">
+        <el-form-item label="租户">
+          <el-input v-model="query.tenant_id" placeholder="tenant_id" clearable />
+        </el-form-item>
+        <el-form-item label="项目">
+          <el-input v-model="query.project_id" placeholder="project_id" clearable />
+        </el-form-item>
+        <el-form-item label="操作人">
+          <el-input v-model="query.actor_id" placeholder="actor_id" clearable />
+        </el-form-item>
+        <el-form-item label="动作">
+          <el-input v-model="query.action" placeholder="action" clearable />
+        </el-form-item>
+        <el-form-item label="目标类型">
+          <el-input v-model="query.target_type" placeholder="target_type" clearable />
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            clearable
+            style="width: 360px"
+            @change="applyTimeRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="load">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-table :data="logs" v-loading="loading" border stripe class="log-table">
+      <el-table-column prop="time" label="时间" min-width="180" />
+      <el-table-column prop="tenant_id" label="租户" min-width="120" />
+      <el-table-column prop="project_id" label="项目" min-width="120" />
+      <el-table-column prop="actor_id" label="操作人" min-width="120" />
+      <el-table-column prop="action" label="动作" min-width="140" />
+      <el-table-column prop="target_type" label="目标类型" min-width="120" />
+      <el-table-column prop="target_id" label="目标 ID" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="detail" label="详情" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="client_ip" label="IP" min-width="120" />
+    </el-table>
+    <div class="pager">共 {{ total }} 条</div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+.page-title { margin: 0; font-size: 18px; }
+.filter-card { margin-bottom: 16px; }
+.log-table { margin-top: 8px; }
+.pager { margin-top: 12px; text-align: right; color: #909399; }
+</style>

frontend/src/views/dashboard/DashboardView.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import VChart from 'vue-echarts'
 import '@/plugins/echarts'
 import type { EChartsOption } from 'echarts'
+import { getDashboardStats } from '@/api/modules/dashboard'
 
 type ServiceState = 'normal' | 'busy' | 'error'
 type TaskState = 'running' | 'pending' | 'completed' | 'failed'
@@ -16,7 +17,7 @@ interface ServiceStatus {
 }
 
 interface DashboardTask {
-  id: number
+  id: string
   name: string
   state: TaskState
   trainType: string
@@ -43,59 +44,37 @@ interface RecentLoginUser {
 const router = useRouter()
 const period = ref('7d')
 
-const serviceStatuses: ServiceStatus[] = [
-  { name: '模型推理', icon: 'fa-cube', state: 'normal', instances: '6 / 6' },
-  { name: '模型微调', icon: 'fa-sliders', state: 'busy', instances: '4 / 6' },
-  { name: '模型评测', icon: 'fa-bar-chart', state: 'normal', instances: '3 / 3' },
-  { name: '数据处理', icon: 'fa-filter', state: 'error', instances: '1 / 3' },
-]
+const onlineServices = ref(0)
+const runningTasks = ref(0)
+const pendingAlerts = ref(0)
 
-const trainingTasks: DashboardTask[] = [
-  {
-    id: 103942,
-    name: 'finance-sft-003',
-    state: 'running',
-    trainType: 'SFT',
-    trainMethod: 'LoRA',
-    baseModel: 'Qwen2.5-7B-Instruct',
-    progress: 68,
-    accuracy: 89.2,
-    startedAt: '今天 09:18',
-  },
-  {
-    id: 593021,
-    name: 'legal-eval-008',
-    state: 'pending',
-    trainType: 'DPO',
-    trainMethod: 'LoRA',
-    baseModel: 'Qwen2.5-7B-Instruct',
-    progress: 0,
-    accuracy: null,
-    startedAt: '今天 08:55',
-  },
-  {
-    id: 849301,
-    name: 'medical-cpt-002',
-    state: 'completed',
-    trainType: 'CPT',
-    trainMethod: 'Full',
-    baseModel: 'Qwen2.5-14B-Instruct',
-    progress: 100,
-    accuracy: 91.6,
-    startedAt: '07/10 16:20',
-  },
-  {
-    id: 201948,
-    name: 'finance-sft-002',
-    state: 'failed',
-    trainType: 'SFT',
-    trainMethod: 'LoRA',
-    baseModel: 'Qwen2.5-7B-Instruct',
-    progress: 42,
-    accuracy: null,
-    startedAt: '07/10 11:08',
-  },
-]
+const serviceStatuses = ref<ServiceStatus[]>([])
+const trainingTasks = ref<DashboardTask[]>([])
+const loginDurationStats = ref<LoginDurationStat[]>([])
+const recentLoginUsers = ref<RecentLoginUser[]>([])
+const training7d = ref<{ date: string; train: number; gpu: number; accuracy: number | null }[]>([])
+
+const onlineServicesHint = computed(() => {
+  if (onlineServices.value === 0) return '暂无在线服务'
+  const abnormal = serviceStatuses.value.filter(
+    (s) => s.state === 'busy' || s.state === 'error'
+  ).length
+  return abnormal > 0 ? `${abnormal} 个异常` : '全部在线'
+})
+const operationDistribution = ref<{ name: string; value: number }[]>([])
+
+const serviceIcon: Record<string, string> = {
+  '模型推理': 'fa-cube',
+  '模型微调': 'fa-sliders',
+  '模型评测': 'fa-bar-chart',
+  '数据处理': 'fa-filter',
+}
+const roleLabel: Record<string, string> = {
+  admin: '超级管理员',
+  operator: '操作员',
+  observer: '观察员',
+  guest: '访客',
+}
 
 const serviceStateMeta: Record<ServiceState, { label: string; className: string }> = {
   normal: { label: '正常', className: 'is-normal' },
@@ -140,7 +119,7 @@ const chartOption = computed<EChartsOption>(() => ({
   },
   xAxis: {
     type: 'category',
-    data: ['07/05', '07/06', '07/07', '07/08', '07/09', '07/10', '07/11\n今天'],
+    data: training7d.value.map((d) => d.date),
     axisLine: { lineStyle: { color: '#e2e8f0' } },
     axisTick: { show: false },
     axisLabel: { color: '#64748b', fontSize: 11, lineHeight: 16, margin: 12 },
@@ -175,7 +154,7 @@ const chartOption = computed<EChartsOption>(() => ({
     {
       name: '训练次数（次）',
       type: 'bar',
-      data: [8, 12, 10, 15, 13, 18, 11],
+      data: training7d.value.map((d) => d.train),
       barMaxWidth: 16,
       itemStyle: { borderRadius: [3, 3, 0, 0] },
       label: { show: true, position: 'top', color: '#64748b', fontSize: 10 },
@@ -183,7 +162,7 @@ const chartOption = computed<EChartsOption>(() => ({
     {
       name: 'GPU 使用数（个）',
       type: 'bar',
-      data: [3, 4, 4, 6, 5, 7, 5],
+      data: training7d.value.map((d) => d.gpu),
       barMaxWidth: 16,
       itemStyle: { borderRadius: [3, 3, 0, 0] },
       label: { show: true, position: 'top', color: '#64748b', fontSize: 10 },
@@ -192,7 +171,7 @@ const chartOption = computed<EChartsOption>(() => ({
       name: '平均准确率（%）',
       type: 'bar',
       yAxisIndex: 1,
-      data: [82, 85, 84, 88, 87, 91, 89],
+      data: training7d.value.map((d) => d.accuracy ?? null),
       barMaxWidth: 16,
       itemStyle: { borderRadius: [3, 3, 0, 0] },
       label: { show: true, position: 'top', color: '#d97706', fontSize: 10 },
@@ -200,58 +179,61 @@ const chartOption = computed<EChartsOption>(() => ({
   ],
 }))
 
-const operationChartOption = computed<EChartsOption>(() => ({
-  animationDuration: 500,
-  tooltip: { trigger: 'item' },
-  color: ['#4f46e5', '#10b981', '#f59e0b', '#3b82f6', '#ec4899'],
-  series: [
-    {
-      name: '操作分类',
-      type: 'pie',
-      radius: ['40%', '64%'],
-      center: ['50%', '50%'],
-      avoidLabelOverlap: true,
-      itemStyle: {
-        borderRadius: 6,
-        borderColor: '#fff',
-        borderWidth: 2
+// 模块固定配色，保证每个模块颜色不同
+const OPERATION_COLORS = ['#4f46e5', '#10b981', '#f59e0b', '#3b82f6', '#ec4899', '#8b5cf6', '#ef4444', '#14b8a6']
+const operationChartOption = computed<EChartsOption>(() => {
+  const items = operationDistribution.value
+  const total = items.reduce((s, d) => s + (d.value || 0), 0)
+  // 完全没有操作数据时，用等分灰色占位扇区，保证 6 个模块都可见
+  const data =
+    total > 0
+      ? items.map((d) => ({ value: d.value || 0, name: d.name }))
+      : items.map((d) => ({ value: 1, name: d.name, itemStyle: { color: '#e2e8f0' } }))
+  return {
+    animationDuration: 500,
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    color: OPERATION_COLORS,
+    legend: {
+      type: 'scroll',
+      bottom: 0,
+      textStyle: { color: '#64748b', fontSize: 11 },
+      itemWidth: 10,
+      itemHeight: 10,
+    },
+    series: [
+      {
+        name: '操作分类',
+        type: 'pie',
+        radius: ['38%', '60%'],
+        center: ['50%', '42%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 6,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{b}\n{d}%',
+          color: '#475569',
+          fontSize: 11,
+          lineHeight: 15,
+        },
+        emphasis: {
+          label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#1e293b' },
+        },
+        labelLine: {
+          show: true,
+          length: 8,
+          length2: 8,
+          lineStyle: { color: '#94a3b8', width: 1 },
+        },
+        data,
       },
-      label: {
-        show: true,
-        position: 'outside',
-        formatter: '{b}',
-        color: '#475569',
-        fontSize: 11,
-        lineHeight: 16,
-        width: 70,
-        overflow: 'truncate',
-      },
-      emphasis: {
-        label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#1e293b' }
-      },
-      labelLine: {
-        show: true,
-        length: 10,
-        length2: 8,
-        lineStyle: { color: '#94a3b8', width: 1 },
-      },
-      data: [
-        { value: 1048, name: '模型训练' },
-        { value: 735, name: '数据处理' },
-        { value: 580, name: '模型评测' },
-        { value: 484, name: '模型推理' },
-        { value: 300, name: '系统设置' }
-      ]
-    }
-  ]
-}))
-
-const loginDurationStats: LoginDurationStat[] = [
-  { id: 1, username: 'admin', duration: 124 },
-  { id: 2, username: 'zhangsan', duration: 86 },
-  { id: 3, username: 'lisi', duration: 42 },
-  { id: 4, username: 'wangwu', duration: 18 },
-]
+    ],
+  }
+})
 
 const loginDurationChartOption = computed<EChartsOption>(() => ({
   animationDuration: 500,
@@ -263,7 +245,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
   },
   xAxis: {
     type: 'value',
-    max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) * 1.15 / 10) * 10,
+    max: Math.max(10, Math.ceil(Math.max(...loginDurationStats.value.map((user) => user.duration), 0) * 1.15 / 10) * 10),
     splitNumber: 4,
     axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' },
     axisLine: { show: false },
@@ -273,7 +255,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
   yAxis: {
     type: 'category',
     inverse: true,
-    data: loginDurationStats.map((user) => user.username),
+    data: loginDurationStats.value.map((user) => user.username),
     axisLabel: { color: '#475569', fontSize: 12 },
     axisLine: { show: false },
     axisTick: { show: false },
@@ -282,7 +264,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
     {
       name: '登录时长',
       type: 'bar',
-      data: loginDurationStats.map((user) => user.duration),
+      data: loginDurationStats.value.map((user) => user.duration),
       barMaxWidth: 18,
       barCategoryGap: '34%',
       itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] },
@@ -291,19 +273,51 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
   ],
 }))
 
-const recentLoginUsers: RecentLoginUser[] = [
-  { id: 1, username: 'admin', role: '超级管理员', lastLogin: '10 分钟前' },
-  { id: 2, username: 'zhangsan', role: '操作员', lastLogin: '2 小时前' },
-  { id: 5, username: 'zhaoliu', role: '观察员', lastLogin: '5 小时前' },
-  { id: 3, username: 'lisi', role: '操作员', lastLogin: '昨天 15:30' },
-]
-
 const roleTagType: Record<string, 'danger' | 'primary' | 'info'> = {
   '超级管理员': 'danger',
   '操作员': 'primary',
   '观察员': 'info',
 }
 
+async function loadStats() {
+  const stats = await getDashboardStats()
+  onlineServices.value = stats.online_services
+  runningTasks.value = stats.running_tasks
+  pendingAlerts.value = stats.pending_alerts
+  serviceStatuses.value = stats.service_status.map((s) => ({
+    name: s.type,
+    icon: serviceIcon[s.type] || 'fa-cube',
+    state: s.status as ServiceState,
+    instances: String(s.count),
+  }))
+  trainingTasks.value = stats.training_tasks.map((t) => ({
+    id: String(t.id),
+    name: t.name,
+    state: t.status as TaskState,
+    trainType: t.train_type,
+    trainMethod: t.train_method,
+    baseModel: t.base_model,
+    progress: t.progress,
+    accuracy: t.accuracy,
+    startedAt: t.started_at,
+  }))
+  loginDurationStats.value = stats.login_duration_rank.map((u, i) => ({
+    id: i + 1,
+    username: u.user,
+    duration: u.duration,
+  }))
+  recentLoginUsers.value = stats.recent_login_users.map((u, i) => ({
+    id: i + 1,
+    username: u.user,
+    role: roleLabel[u.role] || u.role,
+    lastLogin: u.last_login,
+  }))
+  training7d.value = stats.training_7d
+  operationDistribution.value = stats.operation_distribution
+}
+
+onMounted(loadStats)
+
 function viewAllTasks() {
   router.push('/fine-tune')
 }
@@ -329,17 +343,17 @@ function viewTask(task: DashboardTask) {
         <div class="overview-metrics">
           <div class="overview-metric">
             <span>在线服务</span>
-            <strong>12</strong>
-            <small>全部在线</small>
+          <strong>{{ onlineServices }}</strong>
+          <small>{{ onlineServicesHint }}</small>
           </div>
           <div class="overview-metric">
             <span>运行中任务</span>
-            <strong>5</strong>
+            <strong>{{ runningTasks }}</strong>
             <small>较昨日 +1</small>
           </div>
           <div class="overview-metric is-alert">
             <span>待处理告警</span>
-            <strong>2</strong>
+            <strong>{{ pendingAlerts }}</strong>
             <small>较昨日 -1</small>
           </div>
         </div>
@@ -391,7 +405,10 @@ function viewTask(task: DashboardTask) {
 
       <section class="stat-card" aria-labelledby="login-dur-title">
         <h2 id="login-dur-title" class="section-title">登录时长排行 (本月)</h2>
-        <VChart class="duration-chart" :option="loginDurationChartOption" autoresize />
+        <div v-if="loginDurationStats.length" class="chart-container">
+          <VChart class="duration-chart" :option="loginDurationChartOption" autoresize />
+        </div>
+        <div v-else class="empty-hint">暂无数据</div>
       </section>
 
       <section class="stat-card" aria-labelledby="recent-login-title">
@@ -515,6 +532,15 @@ function viewTask(task: DashboardTask) {
   height: 224px;
 }
 
+.empty-hint {
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  min-height: 224px;
+  color: #94a3b8;
+  font-size: 13px;
+}
+
 .duration-chart {
   width: 100%;
   height: 224px;

frontend/src/views/projects/ProjectDetailView.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import DataTablePage from '@/components/DataTablePage.vue'
+import AclDialog from '@/components/AclDialog.vue'
+import { getProject, getProjectMembers, addProjectMember, removeProjectMember, type Project, type ProjectMember } from '@/api/modules/project'
+import { getUsers, type SystemUser } from '@/api/modules/system'
+
+const route = useRoute()
+const router = useRouter()
+const project = ref<Project | null>(null)
+const members = ref<ProjectMember[]>([])
+const users = ref<SystemUser[]>([])
+const loading = ref(false)
+const aclVisible = ref(false)
+const showAddMember = ref(false)
+const addForm = ref({ user_id: '', role: 'member' })
+
+async function load() {
+  const id = route.params.id as string
+  loading.value = true
+  try {
+    project.value = await getProject(id)
+    members.value = await getProjectMembers(id)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadUsers() {
+  try {
+    users.value = await getUsers()
+  } catch {
+    users.value = []
+  }
+}
+
+async function submitAddMember() {
+  if (!project.value) return
+  if (!addForm.value.user_id) {
+    ElMessage.warning('请选择用户')
+    return
+  }
+  await addProjectMember(project.value.id, { ...addForm.value })
+  ElMessage.success('成员已添加')
+  showAddMember.value = false
+  addForm.value = { user_id: '', role: 'member' }
+  load()
+}
+
+async function removeMember(userId: string) {
+  if (!project.value) return
+  await removeProjectMember(project.value.id, userId)
+  ElMessage.success('已移除成员')
+  load()
+}
+
+onMounted(() => {
+  loadUsers()
+  load()
+})
+</script>
+
+<template>
+  <div class="page">
+    <el-page-header title="返回" @back="router.back()">
+      <template #content>
+        <span class="page-title">项目详情：{{ project?.name }}</span>
+      </template>
+    </el-page-header>
+    <el-card class="section" v-loading="loading">
+      <template #header>基本信息</template>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="名称">{{ project?.name }}</el-descriptions-item>
+        <el-descriptions-item label="编码">{{ project?.code }}</el-descriptions-item>
+        <el-descriptions-item label="状态">{{ project?.status }}</el-descriptions-item>
+        <el-descriptions-item label="租户">{{ project?.tenant_id }}</el-descriptions-item>
+        <el-descriptions-item label="描述" :span="2">{{ project?.description }}</el-descriptions-item>
+      </el-descriptions>
+      <el-divider />
+      <el-button @click="aclVisible = true">资源授权 (ACL)</el-button>
+    </el-card>
+    <el-card class="section">
+      <template #header>
+        项目成员
+        <el-button type="primary" size="small" style="float: right" @click="showAddMember = true">添加成员</el-button>
+      </template>
+      <DataTablePage title="项目成员" :data="members">
+        <template #columns>
+          <el-table-column prop="username" label="用户名" min-width="140" />
+          <el-table-column prop="display_name" label="显示名" min-width="120" />
+          <el-table-column prop="role" label="角色" min-width="100" />
+          <el-table-column prop="create_time" label="加入时间" min-width="180" />
+        </template>
+        <template #actions="{ row }">
+          <el-button link type="danger" @click="removeMember(row.user_id)">移除</el-button>
+        </template>
+      </DataTablePage>
+    </el-card>
+    <AclDialog v-model="aclVisible" resource-type="project" :resource-id="(route.params.id as string)" />
+    <el-dialog v-model="showAddMember" title="添加成员" width="420px">
+      <el-form label-width="80px">
+        <el-form-item label="用户" required>
+          <el-select v-model="addForm.user_id" filterable style="width: 100%">
+            <el-option v-for="u in users" :key="u.id" :label="u.username" :value="u.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色">
+          <el-select v-model="addForm.role" style="width: 100%">
+            <el-option label="member" value="member" />
+            <el-option label="admin" value="admin" />
+            <el-option label="viewer" value="viewer" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showAddMember = false">取消</el-button>
+        <el-button type="primary" @click="submitAddMember">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+.section { margin-top: 16px; }
+.page-title { font-size: 16px; font-weight: 600; }
+</style>

frontend/src/views/projects/ProjectListView.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { createProject, getProjects, type Project } from '@/api/modules/project'
+import { getTenants, type Tenant } from '@/api/modules/tenant'
+
+const router = useRouter()
+const loading = ref(false)
+const projects = ref<Project[]>([])
+const tenants = ref<Tenant[]>([])
+const tenantId = ref('default')
+const showCreate = ref(false)
+const form = ref({ name: '', code: '', description: '', tenant_id: 'default' })
+
+const tenantOptions = computed(() => [
+  { label: 'default', value: 'default' },
+  ...tenants.value.map((t) => ({ label: t.name, value: t.id })),
+])
+
+async function load() {
+  loading.value = true
+  try {
+    projects.value = await getProjects(tenantId.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadTenants() {
+  try {
+    tenants.value = await getTenants()
+  } catch {
+    tenants.value = []
+  }
+}
+
+function openDetail(id: string) {
+  router.push(`/projects/${id}`)
+}
+
+async function submitCreate() {
+  if (!form.value.name || !form.value.code) {
+    ElMessage.warning('请填写项目名与编码')
+    return
+  }
+  await createProject({ ...form.value })
+  ElMessage.success('项目创建成功')
+  showCreate.value = false
+  form.value = { name: '', code: '', description: '', tenant_id: 'default' }
+  load()
+}
+
+onMounted(() => {
+  loadTenants()
+  load()
+})
+</script>
+
+<template>
+  <div class="page">
+    <DataTablePage title="项目空间" :data="projects" :loading="loading" searchable search-fields="name,code">
+      <template #toolbar-extra>
+        <el-select v-model="tenantId" placeholder="租户" style="width: 160px" @change="load">
+          <el-option v-for="t in tenantOptions" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+        <el-button type="primary" :icon="Plus" @click="showCreate = true">新建项目</el-button>
+      </template>
+      <template #columns>
+        <el-table-column prop="name" label="项目名" min-width="140" />
+        <el-table-column prop="code" label="编码" min-width="100" />
+        <el-table-column prop="status" label="状态" min-width="100" />
+        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="create_time" label="创建时间" min-width="180" />
+      </template>
+      <template #actions="{ row }">
+        <el-button link type="primary" @click="openDetail(row.id)">详情</el-button>
+      </template>
+    </DataTablePage>
+    <el-dialog v-model="showCreate" title="新建项目" width="520px">
+      <el-form label-width="90px">
+        <el-form-item label="名称" required>
+          <el-input v-model="form.name" placeholder="项目名" />
+        </el-form-item>
+        <el-form-item label="编码" required>
+          <el-input v-model="form.code" placeholder="project code" />
+        </el-form-item>
+        <el-form-item label="租户">
+          <el-select v-model="form.tenant_id" style="width: 100%">
+            <el-option v-for="t in tenantOptions" :key="t.value" :label="t.label" :value="t.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="form.description" type="textarea" :rows="3" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showCreate = false">取消</el-button>
+        <el-button type="primary" @click="submitCreate">创建</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+</style>

frontend/src/views/system/LogsView.vue

@@ -26,6 +26,7 @@ const trainContent = ref('')
 
 // 搜索
 const keyword = ref('')
+const level = ref('') // 日志级别筛选：INFO/WARN/ERROR/空=全部
 const fullContent = ref('')
 
 // 自动刷新
@@ -33,11 +34,16 @@ const refreshInterval = ref(10)
 const { remaining, start: startCountdown, stop: stopCountdown } = useCountdown(10)
 
 const filteredLog = computed(() => {
-  if (!keyword.value.trim()) return { content: fullContent.value, count: 0 }
-  const kw = keyword.value.toLowerCase().trim()
-  const lines = fullContent.value
-    .split('\n')
-    .filter((line) => line.toLowerCase().includes(kw))
+  let lines = fullContent.value.split('\n')
+  // 级别筛选
+  if (level.value) {
+    lines = lines.filter((line) => line.toUpperCase().includes(level.value.toUpperCase()))
+  }
+  // 关键词筛选
+  if (keyword.value.trim()) {
+    const kw = keyword.value.toLowerCase().trim()
+    lines = lines.filter((line) => line.toLowerCase().includes(kw))
+  }
   return { content: lines.join('\n'), count: lines.length }
 })
 
@@ -176,12 +182,19 @@ onMounted(() => {
 
     <!-- 日志内容 -->
     <div class="log-content-box">
-      <div class="log-toolbar">
-        <el-input v-model="keyword" placeholder="搜索日志..." size="small" clearable style="width: 240px">
-          <template #prefix><i class="fa fa-search" /></template>
-        </el-input>
-        <span v-if="keyword" class="match-count">{{ matchCount }} 条匹配</span>
-      </div>
+    <div class="log-toolbar">
+      <el-input v-model="keyword" placeholder="搜索日志..." size="small" clearable style="width: 240px">
+        <template #prefix><i class="fa fa-search" /></template>
+      </el-input>
+      <el-select v-model="level" placeholder="日志级别" size="small" clearable style="width: 120px">
+        <el-option value="" label="全部级别" />
+        <el-option value="INFO" label="INFO" />
+        <el-option value="WARN" label="WARN" />
+        <el-option value="ERROR" label="ERROR" />
+        <el-option value="DEBUG" label="DEBUG" />
+      </el-select>
+      <span v-if="keyword || level" class="match-count">{{ matchCount }} 条匹配</span>
+    </div>
       <pre class="log-pre">{{ filteredContent || (activeTab === 'system' ? sysContent : trainContent) || '日志内容将在这里显示...' }}</pre>
     </div>
   </PageCard>

frontend/src/views/system/UserSettingsView.vue

@@ -1,12 +1,36 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { getUsers } from '@/api/modules/system'
-import type { SystemUser } from '@/types'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  deleteUser,
+  getUsers,
+  resetUserPassword,
+  updateUserAccess,
+} from '@/api/modules/system'
+import type { PermissionCode, SystemUser, UserStatus } from '@/types'
 import { statusLabel, statusTagType } from '@/utils/status'
 
 const loading = ref(false)
 const users = ref<SystemUser[]>([])
 
+// 权限码 -> 中文名（与路由模块一一对应）
+const PERMISSION_LABELS: Record<PermissionCode, string> = {
+  dashboard: '服务看板',
+  'fine-tune': '模型训练',
+  'model-eval': '模型评测',
+  'model-inference': '模型推理',
+  'model-manage': '模型管理',
+  dataset: '数据集管理',
+  'data-process': '数据处理',
+  'data-convert': '数据转换',
+  compute: '计算资源',
+  hardware: '硬件监控',
+  logs: '日志中心',
+  'user-settings': '用户与权限',
+}
+
+const ALL_PERMISSIONS = Object.keys(PERMISSION_LABELS) as PermissionCode[]
+
 async function loadUsers() {
   loading.value = true
   try {
@@ -17,6 +41,109 @@ async function loadUsers() {
 }
 
 onMounted(loadUsers)
+
+// 当前登录用户，用于禁止操作自身（避免误锁自己）
+const currentUsername = ref<string>('')
+try {
+  currentUsername.value = JSON.parse(localStorage.getItem('currentUser') || '{}').username || ''
+} catch {
+  currentUsername.value = ''
+}
+
+function isSelf(row: SystemUser) {
+  return row.username === currentUsername.value
+}
+
+// ---------- 启停 ----------
+async function toggleStatus(row: SystemUser, next: boolean) {
+  const nextStatus: UserStatus = next ? 'active' : 'disabled'
+  const prev = row.status
+  row.status = nextStatus
+  try {
+    await updateUserAccess(row.id, { status: nextStatus })
+    ElMessage.success(`${row.display_name} 已${next ? '启用' : '停用'}`)
+    await loadUsers()
+  } catch {
+    row.status = prev
+    ElMessage.error('状态更新失败')
+  }
+}
+
+// ---------- 重置密码 ----------
+const pwdDialog = reactive({ visible: false, id: '', name: '', password: '', saving: false })
+function openResetPwd(row: SystemUser) {
+  pwdDialog.id = row.id
+  pwdDialog.name = row.display_name
+  pwdDialog.password = 'Platform@123'
+  pwdDialog.visible = true
+}
+async function confirmResetPwd() {
+  if (!pwdDialog.password.trim()) {
+    ElMessage.warning('请输入新密码')
+    return
+  }
+  pwdDialog.saving = true
+  try {
+    await resetUserPassword(pwdDialog.id, pwdDialog.password.trim())
+    ElMessage.success(`已重置 ${pwdDialog.name} 的密码`)
+    pwdDialog.visible = false
+  } catch {
+    ElMessage.error('重置密码失败')
+  } finally {
+    pwdDialog.saving = false
+  }
+}
+
+// ---------- 页面权限 ----------
+const permDialog = reactive({
+  visible: false,
+  id: '',
+  name: '',
+  checked: [] as PermissionCode[],
+  saving: false,
+})
+function openPerms(row: SystemUser) {
+  permDialog.id = row.id
+  permDialog.name = row.display_name
+  permDialog.checked = [...(row.permissions || [])]
+  permDialog.visible = true
+}
+async function confirmPerms() {
+  permDialog.saving = true
+  try {
+    await updateUserAccess(permDialog.id, { permissions: permDialog.checked })
+    ElMessage.success(`已更新 ${permDialog.name} 的页面权限`)
+    permDialog.visible = false
+    await loadUsers()
+  } catch {
+    ElMessage.error('权限更新失败')
+  } finally {
+    permDialog.saving = false
+  }
+}
+
+const permColumns = computed(() => ALL_PERMISSIONS)
+
+// ---------- 删除 ----------
+async function removeUser(row: SystemUser) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除用户 “${row.display_name}（${row.username}）” 吗？该操作不可恢复。`,
+      '删除用户',
+      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
+    )
+  } catch {
+    return
+  }
+  try {
+    await deleteUser(row.id)
+    ElMessage.success(`已删除 ${row.display_name}`)
+    await loadUsers()
+  } catch (err: any) {
+    const msg = err?.response?.data?.message || '删除失败'
+    ElMessage.error(msg)
+  }
+}
 </script>
 
 <template>
@@ -24,25 +151,93 @@ onMounted(loadUsers)
     <header class="page-header">
       <div>
         <h1>用户设置</h1>
-        <p>管理平台账号、角色状态和页面权限。</p>
+        <p>管理平台账号、角色状态、登录密码与页面权限。</p>
       </div>
       <el-button type="primary" @click="$router.push('/user-settings/create')">创建用户</el-button>
     </header>
 
-    <el-table :data="users">
+    <el-table :data="users" border>
       <el-table-column prop="username" label="账号" min-width="140" />
       <el-table-column prop="display_name" label="显示名称" min-width="160" />
       <el-table-column prop="role" label="角色" width="120" />
-      <el-table-column label="状态" width="120">
+      <el-table-column label="状态" width="130">
         <template #default="{ row }">
           <el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="权限数" width="120">
-        <template #default="{ row }">{{ row.permissions?.length || 0 }}</template>
+      <el-table-column label="页面权限" min-width="160">
+        <template #default="{ row }">
+          <el-tag
+            v-for="p in (row.permissions || []).slice(0, 3)"
+            :key="p"
+            size="small"
+            type="info"
+            class="perm-tag"
+          >{{ PERMISSION_LABELS[p] || p }}</el-tag>
+          <span v-if="(row.permissions || []).length > 3" class="perm-more">
+            +{{ (row.permissions || []).length - 3 }}
+          </span>
+          <span v-if="!(row.permissions || []).length" class="perm-more">无</span>
+        </template>
       </el-table-column>
       <el-table-column prop="create_time" label="创建时间" min-width="180" />
+      <el-table-column label="操作" width="260" fixed="right">
+        <template #default="{ row }">
+          <el-switch
+            :model-value="row.status === 'active'"
+            :disabled="row.protected || isSelf(row)"
+            @change="(v: any) => toggleStatus(row, v)"
+            inline-prompt
+            active-text="启用"
+            inactive-text="停用"
+          />
+          <el-button
+            link
+            type="primary"
+            :disabled="row.protected"
+            @click="openResetPwd(row)"
+          >重置密码</el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openPerms(row)"
+          >页面权限</el-button>
+          <el-button
+            link
+            type="danger"
+            :disabled="row.protected || isSelf(row)"
+            @click="removeUser(row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
     </el-table>
+
+    <!-- 重置密码 -->
+    <el-dialog v-model="pwdDialog.visible" title="重置密码" width="420px">
+      <p class="dlg-tip">为 <b>{{ pwdDialog.name }}</b> 设置新密码：</p>
+      <el-input v-model="pwdDialog.password" placeholder="请输入新密码" show-password />
+      <template #footer>
+        <el-button @click="pwdDialog.visible = false">取消</el-button>
+        <el-button type="primary" :loading="pwdDialog.saving" @click="confirmResetPwd">确定重置</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 页面权限 -->
+    <el-dialog v-model="permDialog.visible" title="页面权限" width="540px">
+      <p class="dlg-tip">为 <b>{{ permDialog.name }}</b> 分配可访问的页面模块：</p>
+      <el-checkbox-group v-model="permDialog.checked" class="perm-group">
+        <el-checkbox
+          v-for="code in permColumns"
+          :key="code"
+          :value="code"
+          :label="PERMISSION_LABELS[code]"
+        />
+      </el-checkbox-group>
+      <template #footer>
+        <el-button @click="permDialog.visible = false">取消</el-button>
+        <el-button type="primary" :loading="permDialog.saving" @click="confirmPerms">保存</el-button>
+      </template>
+    </el-dialog>
   </section>
 </template>
 
@@ -67,4 +262,25 @@ onMounted(loadUsers)
   margin: 8px 0 0;
   color: #64748b;
 }
+
+.perm-tag {
+  margin-right: 4px;
+  margin-bottom: 2px;
+}
+
+.perm-more {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.dlg-tip {
+  margin: 0 0 12px;
+  color: #475569;
+}
+
+.perm-group {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px 12px;
+}
 </style>

frontend/src/views/tenants/TenantDetailView.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { getTenant, setTenantQuota, type Tenant } from '@/api/modules/tenant'
+import { getProjects, type Project } from '@/api/modules/project'
+
+const route = useRoute()
+const router = useRouter()
+const tenant = ref<Tenant | null>(null)
+const projects = ref<Project[]>([])
+const loading = ref(false)
+const quotaText = ref('')
+
+async function load() {
+  const id = route.params.id as string
+  loading.value = true
+  try {
+    tenant.value = await getTenant(id)
+    projects.value = await getProjects(id)
+    quotaText.value = JSON.stringify(tenant.value?.quota || {})
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveQuota() {
+  if (!tenant.value) return
+  try {
+    const q = JSON.parse(quotaText.value || '{}')
+    await setTenantQuota(tenant.value.id, q)
+    ElMessage.success('配额已保存')
+    load()
+  } catch {
+    ElMessage.error('配额需为合法 JSON')
+  }
+}
+
+function openProject(id: string) {
+  router.push(`/projects/${id}`)
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page">
+    <el-page-header title="返回" @back="router.back()">
+      <template #content>
+        <span class="page-title">租户详情：{{ tenant?.name }}</span>
+      </template>
+    </el-page-header>
+    <el-card class="section" v-loading="loading">
+      <template #header>基本信息</template>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="名称">{{ tenant?.name }}</el-descriptions-item>
+        <el-descriptions-item label="编码">{{ tenant?.code }}</el-descriptions-item>
+        <el-descriptions-item label="状态">{{ tenant?.status }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ tenant?.create_time }}</el-descriptions-item>
+      </el-descriptions>
+      <el-divider />
+      <div class="quota-edit">
+        <span class="label">配额 JSON</span>
+        <el-input v-model="quotaText" type="textarea" :rows="3" />
+        <el-button type="primary" @click="saveQuota">保存配额</el-button>
+      </div>
+    </el-card>
+    <el-card class="section">
+      <template #header>项目空间</template>
+      <DataTablePage title="项目空间" :data="projects">
+        <template #columns>
+          <el-table-column prop="name" label="项目名" min-width="140" />
+          <el-table-column prop="code" label="编码" min-width="100" />
+          <el-table-column prop="status" label="状态" min-width="100" />
+          <el-table-column prop="create_time" label="创建时间" min-width="180" />
+        </template>
+        <template #actions="{ row }">
+          <el-button link type="primary" @click="openProject(row.id)">打开</el-button>
+        </template>
+      </DataTablePage>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+.section { margin-top: 16px; }
+.page-title { font-size: 16px; font-weight: 600; }
+.quota-edit { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
+.label { font-size: 13px; color: #606266; }
+</style>

frontend/src/views/tenants/TenantListView.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { createTenant, getTenants, setTenantQuota, type Tenant } from '@/api/modules/tenant'
+
+const router = useRouter()
+const loading = ref(false)
+const tenants = ref<Tenant[]>([])
+const showCreate = ref(false)
+const form = ref({ name: '', code: '', quota: '' as string })
+
+async function load() {
+  loading.value = true
+  try {
+    tenants.value = await getTenants()
+  } finally {
+    loading.value = false
+  }
+}
+
+function openDetail(id: string) {
+  router.push(`/tenants/${id}`)
+}
+
+async function submitCreate() {
+  if (!form.value.name) {
+    ElMessage.warning('请填写租户名称')
+    return
+  }
+  let quota: Record<string, unknown> = {}
+  if (form.value.quota) {
+    try {
+      quota = JSON.parse(form.value.quota)
+    } catch {
+      ElMessage.error('配额需为合法 JSON')
+      return
+    }
+  }
+  await createTenant({ name: form.value.name, code: form.value.code, quota })
+  ElMessage.success('租户创建成功')
+  showCreate.value = false
+  form.value = { name: '', code: '', quota: '' }
+  load()
+}
+
+async function setQuota(row: Tenant) {
+  const input = await ElMessageBox.prompt('输入租户配额 JSON', '设置配额', {
+    inputValue: JSON.stringify(row.quota || {}),
+  }).catch(() => null)
+  if (!input) return
+  try {
+    const q = JSON.parse(input.value)
+    await setTenantQuota(row.id, q)
+    ElMessage.success('配额已更新')
+    load()
+  } catch {
+    ElMessage.error('无效的 JSON')
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page">
+    <DataTablePage title="租户管理" :data="tenants" :loading="loading">
+      <template #toolbar-extra>
+        <el-button type="primary" :icon="Plus" @click="showCreate = true">新建租户</el-button>
+      </template>
+      <template #columns>
+        <el-table-column prop="name" label="租户名称" min-width="140" />
+        <el-table-column prop="code" label="编码" min-width="100" />
+        <el-table-column label="配额" min-width="160">
+          <template #default="{ row }">
+            {{ Object.keys(row.quota || {}).length ? JSON.stringify(row.quota) : '—' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" min-width="100" />
+        <el-table-column prop="create_time" label="创建时间" min-width="180" />
+      </template>
+      <template #actions="{ row }">
+        <el-button link type="primary" @click="openDetail(row.id)">详情</el-button>
+        <el-button link type="primary" @click="setQuota(row)">配额</el-button>
+      </template>
+    </DataTablePage>
+    <el-dialog v-model="showCreate" title="新建租户" width="520px">
+      <el-form label-width="90px">
+        <el-form-item label="名称" required>
+          <el-input v-model="form.name" placeholder="租户名称" />
+        </el-form-item>
+        <el-form-item label="编码">
+          <el-input v-model="form.code" placeholder="tenant code" />
+        </el-form-item>
+        <el-form-item label="配额 JSON">
+          <el-input v-model="form.quota" type="textarea" :rows="3" placeholder='{"gpu": 8}' />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showCreate = false">取消</el-button>
+        <el-button type="primary" @click="submitCreate">创建</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page { padding: 16px; }
+</style>