fix: Dashboard CSS 类名对齐已有样式 + 修复路由指向
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 9s
CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Failing after 11s
CI/CD Pipeline / Integration Tests (pull_request) Failing after 5s
CI/CD Pipeline / Unit Tests (pull_request) Failing after 1m2s
CI/CD Pipeline / Production Browser E2E (pull_request) Failing after 1558h32m50s
CI/CD Pipeline / Staging E2E Tests (pull_request) Failing after 1558h32m52s
CI/CD Pipeline / Build Production Runtime Images (pull_request) Failing after 1558h32m53s
CI/CD Pipeline / Deploy Production (pull_request) Failing after 1558h32m52s
CI/CD Pipeline / Build & Push Staging (Watchtower auto-deploy) (pull_request) Failing after 1558h32m53s
CI/CD Pipeline / Staging API Integration Tests (pull_request) Failing after 1559h4m27s

- 所有类名改回 dashboard.css 已有定义(xx-kpi-*/xx-task-*/xx-quick-*/xx-chart-*/xx-announcement-*)
- "查看全部"路由从 /asset-library 改为 /app/history
- vite build 验证通过
This commit is contained in:
2026-07-13 16:57:21 +08:00
parent 3ebcc7e066
commit 6227aa610c
+35 -139
View File
@@ -9,161 +9,56 @@ import { Button, Tag } from "@/components/ui";
import { DatabaseOutlined } from "@ant-design/icons";
import "./dashboard.css";
/* ── 类型定义 ───────────────────────────────────────────── */
interface KpiItem {
key: string;
icon: string;
iconGradient: string;
value: string;
label: string;
trend: string;
trendDirection: "up" | "down" | "neutral";
accent: string;
}
interface QuickEntry {
key: string;
icon: React.ReactNode;
label: string;
desc: string;
badge?: string;
badgeTone?: "blue" | "green" | "orange" | "purple" | "slate";
gradient: string;
to: string;
}
interface RecentTask {
id: string;
title: string;
type: "成片" | "草稿" | "素材";
typeTone: "green" | "blue" | "slate";
updatedAt: string;
size: string;
status: "已完成" | "进行中" | "待处理";
statusTone: "green" | "blue" | "slate";
}
/* ── 主组件 ─────────────────────────────────────────────── */
const Dashboard: React.FC = () => {
const navigate = useNavigate();
const kpiData: KpiItem[] = [];
const quickEntries: QuickEntry[] = [];
const recentTasks: RecentTask[] = [];
return (
<div className="xx-dashboard-page">
{/* KPI 卡片网格 */}
<section className="xx-dashboard-kpis">
{kpiData.length > 0 ? (
kpiData.map((kpi) => (
<div
key={kpi.key}
className="xx-dashboard-kpi-card"
style={{ "--accent": kpi.accent } as React.CSSProperties}
>
<div className="xx-dashboard-kpi-icon" style={{ background: kpi.iconGradient }}>
{kpi.icon}
</div>
<div className="xx-dashboard-kpi-value">{kpi.value}</div>
<div className="xx-dashboard-kpi-label">{kpi.label}</div>
<div className={`xx-dashboard-kpi-trend ${kpi.trendDirection}`}>
{kpi.trendDirection === "up" ? "↑" : kpi.trendDirection === "down" ? "↓" : "→"}{" "}
{kpi.trend}
</div>
</div>
))
) : (
<div className="xx-dashboard-empty">
<p>暂无统计数据</p>
</div>
)}
</section>
<div className="xx-kpi-grid">
<div className="xx-dashboard-empty">
<p>暂无统计数据</p>
</div>
</div>
{/* 快速入口 */}
<section className="xx-dashboard-section">
<h2 className="xx-dashboard-section-title">快速入口</h2>
{quickEntries.length > 0 ? (
<div className="xx-dashboard-shortcuts">
{quickEntries.map((entry) => (
<button
key={entry.key}
type="button"
className="xx-dashboard-shortcut-card"
onClick={() => navigate(entry.to)}
>
<div
className="xx-dashboard-shortcut-icon"
style={{ background: entry.gradient }}
>
{entry.icon}
</div>
<div className="xx-dashboard-shortcut-label">{entry.label}</div>
<div className="xx-dashboard-shortcut-desc">{entry.desc}</div>
{entry.badge && (
<span className={`xx-dashboard-shortcut-badge ${entry.badgeTone ?? "blue"}`}>
{entry.badge}
</span>
)}
</button>
))}
</div>
) : (
<div className="xx-quick-entry-section">
<div className="xx-quick-entry-header">
<h3 className="xx-quick-entry-title">快速入口</h3>
</div>
<div className="xx-quick-grid">
<div className="xx-dashboard-empty">
<p>暂无快速入口</p>
</div>
)}
</section>
</div>
</div>
{/* 最近任务 */}
<section className="xx-dashboard-section">
<div className="xx-dashboard-section-header">
<h2 className="xx-dashboard-section-title">最近任务</h2>
<Button buttonType="ghost" buttonSize="sm" onClick={() => navigate("/asset-library")}>
<h3>最近任务</h3>
<Button buttonType="ghost" buttonSize="sm" onClick={() => navigate("/app/history")}>
查看全部
</Button>
</div>
{recentTasks.length > 0 ? (
<div className="xx-dashboard-task-list">
{recentTasks.map((task) => (
<div key={task.id} className="xx-dashboard-task-card">
<div className="xx-dashboard-task-left">
<Tag tone={task.typeTone}>{task.type}</Tag>
<div>
<div className="xx-dashboard-task-title">{task.title}</div>
<div className="xx-dashboard-task-meta">
更新于 {task.updatedAt} · {task.size}
</div>
</div>
</div>
<Tag tone={task.statusTone}>{task.status}</Tag>
</div>
))}
</div>
) : (
<div className="xx-task-list">
<div className="xx-dashboard-empty">
<p>暂无最近任务</p>
</div>
)}
</div>
</section>
{/* 使用统计 */}
<section className="xx-dashboard-section">
<h2 className="xx-dashboard-section-title">使用统计</h2>
<div className="xx-dashboard-chart-card">
<div className="xx-dashboard-chart-tabs">
<button type="button" className="xx-dashboard-chart-tab active">
近 7 天
</button>
<button type="button" className="xx-dashboard-chart-tab">
近 30 天
</button>
</div>
<div className="xx-dashboard-chart-body">
<div className="xx-dashboard-chart-placeholder">
<DatabaseOutlined />
<section className="xx-dashboard-section" style={{ marginTop: "var(--space-md)" }}>
<div className="xx-dashboard-section-header">
<h3>使用统计</h3>
</div>
<div className="xx-chart-container">
<div className="xx-chart-bars">
<div className="xx-dashboard-empty" style={{ width: "100%" }}>
<DatabaseOutlined style={{ fontSize: 24, marginBottom: 8 }} />
<p>暂无统计数据</p>
</div>
</div>
@@ -171,17 +66,18 @@ const Dashboard: React.FC = () => {
</section>
{/* 公告 */}
<section className="xx-dashboard-section">
<h2 className="xx-dashboard-section-title">公告</h2>
<div className="xx-dashboard-notice">
<div className="xx-dashboard-notice-header">
<span>📢</span>
<span>系统公告</span>
<Tag tone="blue">官方</Tag>
<section className="xx-dashboard-section" style={{ marginTop: "var(--space-md)" }}>
<div className="xx-dashboard-section-header">
<h3>公告</h3>
</div>
<div className="xx-announcement-list">
<div className="xx-announcement-item">
<span className="xx-announcement-tag xx-announcement-tag--notice">官方</span>
<div className="xx-announcement-content">
<h4>欢迎使用小应 SaaS 平台</h4>
<time>当前为演示版本,部分功能正在开发中。</time>
</div>
</div>
<p className="xx-dashboard-notice-body">
欢迎使用小应 SaaS 平台。当前为演示版本,部分功能正在开发中。
</p>
</div>
</section>
</div>