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
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user