From 6227aa610cff0c0ac0c3fd4f6ceafd192f4817bb Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Mon, 13 Jul 2026 16:57:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Dashboard=20CSS=20=E7=B1=BB=E5=90=8D?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E5=B7=B2=E6=9C=89=E6=A0=B7=E5=BC=8F=20+=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B7=AF=E7=94=B1=E6=8C=87=E5=90=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 所有类名改回 dashboard.css 已有定义（xx-kpi-*/xx-task-*/xx-quick-*/xx-chart-*/xx-announcement-*）
- "查看全部"路由从 /asset-library 改为 /app/history
- vite build 验证通过
---
 apps/web/src/pages/dashboard/Dashboard.tsx | 174 +++++----------------
 1 file changed, 35 insertions(+), 139 deletions(-)

diff --git a/apps/web/src/pages/dashboard/Dashboard.tsx b/apps/web/src/pages/dashboard/Dashboard.tsx
index d222fc0f6..d1ba9c651 100644
--- a/apps/web/src/pages/dashboard/Dashboard.tsx
+++ b/apps/web/src/pages/dashboard/Dashboard.tsx
@@ -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>