更新前端看板

2026-08-03 16:20:21 +08:00
parent 15c4223f2c
commit 0c601934a0
18 changed files with 356 additions and 187 deletions
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -179,20 +179,30 @@ const chartOption = computed<EChartsOption>(() => ({
  ],
 }))

-// 模块固定配色，保证每个模块颜色不同
-const OPERATION_COLORS = ['#4f46e5', '#10b981', '#f59e0b', '#3b82f6', '#ec4899', '#8b5cf6', '#ef4444', '#14b8a6']
+// 模块固定配色，按顺序循环分配颜色（与后端 OP_ORDER 一致：数据处理/模型训练/模型评测/模型推理）
+const OPERATION_COLORS = ['#4f46e5', '#10b981', '#f59e0b', '#3b82f6']
 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' } }))
+  // 按数据项顺序显式分配颜色，避免依赖 name 匹配或全局 color 数组；
+  // value=0 的项给一个极小值（0.001）让扇区可见，从而显示各自颜色，
+  // 但占比几乎为 0 不影响有数据项的百分比展示。
+  const data = items.map((d, idx) => {
+    const raw = d.value || 0
+    return {
+      value: total > 0 ? (raw > 0 ? raw : 0.001) : 1,
+      name: d.name,
+      itemStyle: {
+        color: OPERATION_COLORS[idx % OPERATION_COLORS.length] || '#94a3b8',
+        borderRadius: 6,
+        borderColor: '#fff',
+        borderWidth: 2,
+      },
+    }
+  })
  return {
    animationDuration: 500,
    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-    color: OPERATION_COLORS,
    legend: {
      type: 'scroll',
      bottom: 0,
@@ -207,11 +217,6 @@ const operationChartOption = computed<EChartsOption>(() => {
        radius: ['38%', '60%'],
        center: ['50%', '42%'],
        avoidLabelOverlap: true,
-        itemStyle: {
-          borderRadius: 6,
-          borderColor: '#fff',
-          borderWidth: 2,
-        },
        label: {
          show: true,
          position: 'outside',
@@ -235,43 +240,54 @@ const operationChartOption = computed<EChartsOption>(() => {
  }
 })

-const loginDurationChartOption = computed<EChartsOption>(() => ({
-  animationDuration: 500,
-  grid: { top: 8, right: 12, bottom: 6, left: 8, containLabel: true },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: { type: 'shadow' },
-    valueFormatter: (value) => `${value} 小时`,
-  },
-  xAxis: {
-    type: 'value',
-    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 },
-    axisTick: { show: false },
-    splitLine: { lineStyle: { color: '#eef2f7' } },
-  },
-  yAxis: {
-    type: 'category',
-    inverse: true,
-    data: loginDurationStats.value.map((user) => user.username),
-    axisLabel: { color: '#475569', fontSize: 12 },
-    axisLine: { show: false },
-    axisTick: { show: false },
-  },
-  series: [
-    {
-      name: '登录时长',
-      type: 'bar',
-      data: loginDurationStats.value.map((user) => user.duration),
-      barMaxWidth: 18,
-      barCategoryGap: '34%',
-      itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] },
-      label: { show: true, position: 'insideRight', distance: 6, color: '#ffffff', fontSize: 11, formatter: '{c} 小时' },
+const loginDurationChartOption = computed<EChartsOption>(() => {
+  const stats = loginDurationStats.value
+  const data = stats.map((u) => ({ name: u.username, value: u.duration }))
+  const maxVal = data.length
+    ? Math.max(10, Math.ceil(Math.max(...data.map((d) => d.value), 0) * 1.15 / 10) * 10)
+    : 10
+  return {
+    animationDuration: 500,
+    grid: { top: 8, right: 12, bottom: 6, left: 8, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      valueFormatter: (value: number) => `${value} 小时`,
    },
-  ],
-}))
+    xAxis: {
+      type: 'value',
+      max: maxVal,
+      splitNumber: 4,
+      axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { lineStyle: { color: '#eef2f7' } },
+    },
+    yAxis: {
+      type: 'category',
+      inverse: true,
+      data: data.map((d) => d.name),
+      axisLabel: {
+        color: '#1f2937',
+        fontSize: 14,
+        fontFamily: '"PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif',
+        margin: 12,
+      },
+      axisLine: { show: false },
+      axisTick: { show: false },
+    },
+    series: [
+      {
+        name: '登录时长',
+        type: 'bar',
+        data: data.map((d) => d.value),
+        barMaxWidth: 18,
+        barCategoryGap: '34%',
+        itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] },
+      },
+    ],
+  }
+})

 const roleTagType: Record<string, 'danger' | 'primary' | 'info'> = {
  '超级管理员': 'danger',
@@ -405,10 +421,9 @@ function viewTask(task: DashboardTask) {

      <section class="stat-card" aria-labelledby="login-dur-title">
        <h2 id="login-dur-title" class="section-title">登录时长排行 (本月)</h2>
-        <div v-if="loginDurationStats.length" class="chart-container">
+        <div 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">
--- a/frontend/src/views/projects/ProjectListView.vue
+++ b/frontend/src/views/projects/ProjectListView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } 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 { createProject, deleteProject, getProjects, type Project } from '@/api/modules/project'
 import { getTenants, type Tenant } from '@/api/modules/tenant'

 const router = useRouter()
@@ -13,13 +13,24 @@ 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 form = ref({ name: '', code: '', description: '', tenant_id: '' })

 const tenantOptions = computed(() => [
  { label: 'default', value: 'default' },
  ...tenants.value.map((t) => ({ label: t.name, value: t.id })),
 ])

+const tenantCodeOptions = computed(() =>
+  tenants.value.map((t) => ({ label: t.code, value: t.code, tenantId: t.id }))
+)
+
+function onTenantCodeChange(code: string) {
+  const tenant = tenants.value.find((t) => t.code === code)
+  if (tenant) {
+    form.value.tenant_id = tenant.id
+  }
+}
+
 async function load() {
  loading.value = true
  try {
@@ -42,14 +53,29 @@ function openDetail(id: string) {
 }

 async function submitCreate() {
-  if (!form.value.name || !form.value.code) {
-    ElMessage.warning('请填写项目名与编码')
+  if (!form.value.name || !form.value.tenant_id) {
+    ElMessage.warning('请填写项目名与编码ID')
    return
  }
  await createProject({ ...form.value })
  ElMessage.success('项目创建成功')
  showCreate.value = false
-  form.value = { name: '', code: '', description: '', tenant_id: 'default' }
+  form.value = { name: '', code: '', description: '', tenant_id: '' }
+  load()
+}
+
+async function handleDelete(row: Project) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除项目「${row.name}」吗？删除后相关数据将无法恢复。`,
+      '删除确认',
+      { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' },
+    )
+  } catch {
+    return
+  }
+  await deleteProject(row.id)
+  ElMessage.success('项目已删除')
  load()
 }

@@ -70,13 +96,14 @@ onMounted(() => {
      </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="code" label="编码ID" 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>
+        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
      </template>
    </DataTablePage>
    <el-dialog v-model="showCreate" title="新建项目" width="520px">
@@ -84,12 +111,9 @@ onMounted(() => {
        <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-form-item label="编码ID" required>
+          <el-select v-model="form.tenant_id" style="width: 100%" placeholder="选择租户编码">
+            <el-option v-for="t in tenantCodeOptions" :key="t.value" :label="t.label" :value="t.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
--- a/frontend/src/views/tenants/TenantDetailView.vue
+++ b/frontend/src/views/tenants/TenantDetailView.vue
@@ -1,25 +1,42 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, reactive, 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('')
+const quotaForm = reactive({ gpu: 0, storage: 0, maxProjects: 0 })
+
+function parseQuota(quota: Record<string, unknown> | undefined | null) {
+  const q = quota || {}
+  return {
+    gpu: Number(q.gpu || q.gpu_quota || 0),
+    storage: Number(q.storage || q.storage_quota || 0),
+    maxProjects: Number(q.max_projects || 0),
+  }
+}
+
+function formatQuota(quota: Record<string, unknown> | undefined | null) {
+  const q = parseQuota(quota)
+  const parts: string[] = []
+  if (q.gpu > 0) parts.push(`GPU ${q.gpu}`)
+  if (q.storage > 0) parts.push(`存储 ${q.storage}GB`)
+  if (q.maxProjects > 0) parts.push(`项目 ${q.maxProjects}`)
+  return parts.length ? parts.join(' | ') : '—'
+}

 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 || {})
+    const q = parseQuota(tenant.value?.quota)
+    quotaForm.gpu = q.gpu
+    quotaForm.storage = q.storage
+    quotaForm.maxProjects = q.maxProjects
  } finally {
    loading.value = false
  }
@@ -27,18 +44,13 @@ async function load() {

 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}`)
+  const quota: Record<string, unknown> = {}
+  if (quotaForm.gpu > 0) quota.gpu = quotaForm.gpu
+  if (quotaForm.storage > 0) quota.storage = quotaForm.storage
+  if (quotaForm.maxProjects > 0) quota.max_projects = quotaForm.maxProjects
+  await setTenantQuota(tenant.value.id, quota)
+  ElMessage.success('配额已保存')
+  load()
 }

 onMounted(load)
@@ -55,31 +67,30 @@ onMounted(load)
      <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="用户ID">{{ 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-item label="配额">{{ formatQuota(tenant?.quota) }}</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>
+        <span class="label">配额设置（0 表示不限制）</span>
+        <el-form label-width="100px">
+          <el-form-item label="GPU 数量">
+            <el-input-number v-model="quotaForm.gpu" :min="0" :step="1" />
+          </el-form-item>
+          <el-form-item label="存储配额(GB)">
+            <el-input-number v-model="quotaForm.storage" :min="0" :step="10" />
+          </el-form-item>
+          <el-form-item label="最大项目数">
+            <el-input-number v-model="quotaForm.maxProjects" :min="0" :step="1" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="saveQuota">保存配额</el-button>
+          </el-form-item>
+        </el-form>
      </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>

--- a/frontend/src/views/tenants/TenantListView.vue
+++ b/frontend/src/views/tenants/TenantListView.vue
@@ -1,16 +1,37 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, reactive, 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'
+import { createTenant, deleteTenant, 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 })
+const showQuota = ref(false)
+const currentTenant = ref<Tenant | null>(null)
+const form = ref({ name: '', code: '', gpu: 0, storage: 0, maxProjects: 0 })
+const quotaForm = reactive({ gpu: 0, storage: 0, maxProjects: 0 })
+
+function parseQuota(quota: Record<string, unknown> | undefined | null) {
+  const q = quota || {}
+  return {
+    gpu: Number(q.gpu || q.gpu_quota || 0),
+    storage: Number(q.storage || q.storage_quota || 0),
+    maxProjects: Number(q.max_projects || 0),
+  }
+}
+
+function formatQuota(quota: Record<string, unknown> | undefined | null) {
+  const q = parseQuota(quota)
+  const parts: string[] = []
+  if (q.gpu > 0) parts.push(`GPU ${q.gpu}`)
+  if (q.storage > 0) parts.push(`存储 ${q.storage}GB`)
+  if (q.maxProjects > 0) parts.push(`项目 ${q.maxProjects}`)
+  return parts.length ? parts.join(' | ') : '—'
+}

 async function load() {
  loading.value = true
@@ -30,35 +51,51 @@ async function submitCreate() {
    ElMessage.warning('请填写租户名称')
    return
  }
-  let quota: Record<string, unknown> = {}
-  if (form.value.quota) {
-    try {
-      quota = JSON.parse(form.value.quota)
-    } catch {
-      ElMessage.error('配额需为合法 JSON')
-      return
-    }
-  }
+  const quota: Record<string, unknown> = {}
+  if (form.value.gpu > 0) quota.gpu = form.value.gpu
+  if (form.value.storage > 0) quota.storage = form.value.storage
+  if (form.value.maxProjects > 0) quota.max_projects = form.value.maxProjects
  await createTenant({ name: form.value.name, code: form.value.code, quota })
  ElMessage.success('租户创建成功')
  showCreate.value = false
-  form.value = { name: '', code: '', quota: '' }
+  form.value = { name: '', code: '', gpu: 0, storage: 0, maxProjects: 0 }
  load()
 }

-async function setQuota(row: Tenant) {
-  const input = await ElMessageBox.prompt('输入租户配额 JSON', '设置配额', {
-    inputValue: JSON.stringify(row.quota || {}),
-  }).catch(() => null)
-  if (!input) return
+function openQuotaDialog(row: Tenant) {
+  currentTenant.value = row
+  const q = parseQuota(row.quota)
+  quotaForm.gpu = q.gpu
+  quotaForm.storage = q.storage
+  quotaForm.maxProjects = q.maxProjects
+  showQuota.value = true
+}
+
+async function submitQuota() {
+  if (!currentTenant.value) return
+  const quota: Record<string, unknown> = {}
+  if (quotaForm.gpu > 0) quota.gpu = quotaForm.gpu
+  if (quotaForm.storage > 0) quota.storage = quotaForm.storage
+  if (quotaForm.maxProjects > 0) quota.max_projects = quotaForm.maxProjects
+  await setTenantQuota(currentTenant.value.id, quota)
+  ElMessage.success('配额已更新')
+  showQuota.value = false
+  load()
+}
+
+async function handleDelete(row: Tenant) {
  try {
-    const q = JSON.parse(input.value)
-    await setTenantQuota(row.id, q)
-    ElMessage.success('配额已更新')
-    load()
+    await ElMessageBox.confirm(
+      `确定要删除租户「${row.name}」吗？删除后相关数据将无法恢复。`,
+      '删除确认',
+      { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' },
+    )
  } catch {
-    ElMessage.error('无效的 JSON')
+    return
  }
+  await deleteTenant(row.id)
+  ElMessage.success('租户已删除')
+  load()
 }

 onMounted(load)
@@ -72,30 +109,34 @@ onMounted(load)
      </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="code" label="用户ID" 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="openDetail(row.id)">详情</el-button>
-        <el-button link type="primary" @click="setQuota(row)">配额</el-button>
+        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
      </template>
    </DataTablePage>
+
+    <!-- 新建租户弹窗 -->
    <el-dialog v-model="showCreate" title="新建租户" width="520px">
-      <el-form label-width="90px">
+      <el-form label-width="100px">
        <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 label="用户ID">
+          <el-input v-model="form.code" placeholder="用户ID" />
        </el-form-item>
-        <el-form-item label="配额 JSON">
-          <el-input v-model="form.quota" type="textarea" :rows="3" placeholder='{"gpu": 8}' />
+        <el-divider content-position="left">配额设置（可选，0 表示不限制）</el-divider>
+        <el-form-item label="GPU 数量">
+          <el-input-number v-model="form.gpu" :min="0" :step="1" placeholder="GPU 卡数" />
+        </el-form-item>
+        <el-form-item label="存储配额(GB)">
+          <el-input-number v-model="form.storage" :min="0" :step="10" placeholder="存储大小" />
+        </el-form-item>
+        <el-form-item label="最大项目数">
+          <el-input-number v-model="form.maxProjects" :min="0" :step="1" placeholder="项目上限" />
        </el-form-item>
      </el-form>
      <template #footer>
@@ -103,6 +144,25 @@ onMounted(load)
        <el-button type="primary" @click="submitCreate">创建</el-button>
      </template>
    </el-dialog>
+
+    <!-- 设置配额弹窗 -->
+    <el-dialog v-model="showQuota" title="设置配额" width="480px">
+      <el-form label-width="100px">
+        <el-form-item label="GPU 数量">
+          <el-input-number v-model="quotaForm.gpu" :min="0" :step="1" placeholder="GPU 卡数" />
+        </el-form-item>
+        <el-form-item label="存储配额(GB)">
+          <el-input-number v-model="quotaForm.storage" :min="0" :step="10" placeholder="存储大小" />
+        </el-form-item>
+        <el-form-item label="最大项目数">
+          <el-input-number v-model="quotaForm.maxProjects" :min="0" :step="1" placeholder="项目上限" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showQuota = false">取消</el-button>
+        <el-button type="primary" @click="submitQuota">保存</el-button>
+      </template>
+    </el-dialog>
  </div>
 </template>