feat: polish website and console dashboards

2026-06-06 21:15:33 +08:00
parent 97113964c8
commit f725de28bd
5 changed files with 554 additions and 11 deletions
@@ -1593,6 +1593,73 @@ body {
  margin-bottom: 24px;
 }

+.dashboard-command-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin: -6px 0 20px;
+}
+
+.dashboard-command-item {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 5px;
+  min-height: 88px;
+  padding: 14px;
+  border: 1px solid var(--console-line);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 86%, transparent), color-mix(in srgb, var(--color-bg-card) 70%, var(--color-bg)));
+  color: var(--color-text-primary);
+  text-decoration: none;
+  box-shadow: var(--shadow-card);
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dashboard-command-item::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  content: "";
+  background: var(--color-primary);
+}
+
+.dashboard-command-item[data-tone="success"]::before {
+  background: var(--color-success);
+}
+
+.dashboard-command-item[data-tone="warning"]::before {
+  background: var(--color-warning);
+}
+
+.dashboard-command-item[data-tone="danger"]::before {
+  background: var(--color-danger);
+}
+
+.dashboard-command-item:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--console-line));
+  box-shadow: var(--console-shadow-soft);
+}
+
+.dashboard-command-item span,
+.dashboard-command-item em {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.dashboard-command-item strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: clamp(20px, 2vw, 28px);
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
 .dashboard-stat-grid .stat-card {
  min-width: 0;
 }
@@ -1706,6 +1773,10 @@ body {
 }

@media (max-width: 1200px) {
+  .dashboard-command-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
  .dashboard-stat-grid {
    gap: 10px;
  }
@@ -1768,6 +1839,10 @@ body {
 }

@media (max-width: 860px) {
+  .dashboard-command-strip {
+    grid-template-columns: 1fr;
+  }
+
  .dashboard-section-head {
    align-items: flex-start;
    flex-direction: column;
@@ -10640,7 +10715,8 @@ textarea {
 }

 .user-dashboard-hero {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
@@ -10683,10 +10759,59 @@ textarea {
 .user-dashboard-header-actions {
  display: inline-flex;
  align-items: center;
+  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
 }

+.user-dashboard-hero-side {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.user-dashboard-hero-rail {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.user-dashboard-hero-rail>div {
+  min-height: 66px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--console-line);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--color-bg-card) 72%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
+}
+
+[data-theme="dark"] .user-dashboard-hero-rail>div {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.user-dashboard-hero-rail span {
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-dashboard-hero-rail strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 13px;
+  font-weight: 780;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
 .user-dashboard-skeleton {
  display: grid;
  gap: 18px;
@@ -10700,10 +10825,29 @@ textarea {
 }

 .user-dashboard-stat {
+  position: relative;
+  overflow: hidden;
  padding: 18px;
  border-color: var(--color-border-light);
 }

+.user-dashboard-stat::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  content: "";
+  background: var(--color-primary);
+  opacity: 0.78;
+}
+
+.user-dashboard-stat[data-tone="success"]::before {
+  background: var(--color-success);
+}
+
+.user-dashboard-stat[data-tone="cost"]::before {
+  background: #14b8a6;
+}
+
 .user-dashboard-stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
@@ -10760,6 +10904,12 @@ textarea {
  color: var(--color-text-primary);
 }

+.user-dashboard-panel-head p {
+  margin: 4px 0 0;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
 .user-dashboard-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -10767,11 +10917,11 @@ textarea {
 }

 .user-dashboard-entry {
-  min-height: 86px;
+  min-height: 108px;
  display: grid;
-  place-items: center;
+  align-content: center;
  gap: 8px;
-  padding: 14px 12px;
+  padding: 16px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg) 72%, var(--color-bg-card));
@@ -10788,6 +10938,19 @@ textarea {
  color: var(--color-primary);
 }

+.user-dashboard-entry span {
+  color: var(--color-text-primary);
+  font-weight: 780;
+}
+
+.user-dashboard-entry small {
+  max-width: 24ch;
+  color: var(--color-text-muted);
+  font-size: 11.5px;
+  font-weight: 520;
+  line-height: 1.45;
+}
+
 .user-dashboard-entry:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
@@ -10887,6 +11050,10 @@ textarea {
 }

@media (max-width: 960px) {
+  .user-dashboard-hero {
+    grid-template-columns: 1fr;
+  }
+
  .user-dashboard-grid {
    grid-template-columns: 1fr;
  }
@@ -10905,10 +11072,15 @@ textarea {
    flex-direction: column;
  }

+  .user-dashboard-hero-side,
  .user-dashboard-header-actions {
    width: 100%;
  }

+  .user-dashboard-hero-rail {
+    grid-template-columns: 1fr;
+  }
+
  .user-dashboard-header-actions .btn {
    flex: 1;
  }
@@ -538,6 +538,45 @@ export default function Dashboard({
  const siteAvailability = showInactiveSites
    ? [...activeSites, ...inactiveSites]
    : activeSites;
+  const proxySuccessRate =
+    proxy24hTotal > 0 ? (proxy24hSuccess / proxy24hTotal) * 100 : 0;
+  const activeAccountRate =
+    totalAccounts > 0 ? (activeAccounts / totalAccounts) * 100 : 0;
+  const siteRiskCount = activeSites.filter((site) => {
+    const availability = site.availabilityPercent ?? 100;
+    const latency = site.averageLatencyMs ?? 0;
+    return availability < 99 || latency > 1800 || site.failedCount > 0;
+  }).length;
+  const dashboardCommandLinks = [
+    {
+      to: "/routes",
+      label: "路由健康",
+      value: `${proxySuccessRate.toFixed(1)}%`,
+      note: "24h 成功率",
+      tone: proxySuccessRate >= 99 ? "success" : proxySuccessRate >= 95 ? "warning" : "danger",
+    },
+    {
+      to: "/logs",
+      label: "使用日志",
+      value: Math.round(proxy24hTotal).toLocaleString(),
+      note: "最近 24h 请求",
+      tone: "primary",
+    },
+    {
+      to: "/sites",
+      label: "站点管理",
+      value: String(siteRiskCount),
+      note: siteRiskCount > 0 ? "需关注站点" : "风险站点",
+      tone: siteRiskCount > 0 ? "warning" : "success",
+    },
+    {
+      to: "/settings/notify",
+      label: "通知设置",
+      value: `${activeAccountRate.toFixed(0)}%`,
+      note: "账户启用率",
+      tone: activeAccountRate >= 80 ? "success" : "warning",
+    },
+  ];

  const getLatencyColor = (ms: number) =>
    ms <= 500
@@ -642,6 +681,21 @@ export default function Dashboard({
        </div>
      </section>

+      <nav className="dashboard-command-strip" aria-label="运营快捷入口">
+        {dashboardCommandLinks.map((item) => (
+          <Link
+            key={item.to}
+            to={item.to}
+            className="dashboard-command-item"
+            data-tone={item.tone}
+          >
+            <span>{item.label}</span>
+            <strong>{item.value}</strong>
+            <em>{item.note}</em>
+          </Link>
+        ))}
+      </nav>
+
      <div className="dashboard-stat-grid">
        <div className="stat-card animate-slide-up stagger-1">
          <div className="stat-card-header">
@@ -138,6 +138,7 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
  const failedRequests = Math.max(0, (summary?.totalRequests || 0) - (summary?.successRequests || 0));
  const activeKeyCount = keys.filter((key) => key.enabled).length;
  const userInitial = (profile.username || profile.email || 'U').trim().slice(0, 1).toUpperCase();
+  const lastActivityLabel = recentLogs[0] ? formatDateLabel(recentLogs[0].created_at) : '暂无调用';

  return (
    <div className="user-dashboard-page animate-fade-in">
@@ -149,24 +150,40 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
            <p className="page-subtitle">这里汇总你的模型调用、密钥状态和创作入口。</p>
          </div>
        </div>
-        <div className="user-dashboard-header-actions">
-          <Link to="/user/models" className="btn btn-ghost">模型广场</Link>
-          <Link to="/user/usage" className="btn btn-primary">使用记录</Link>
+        <div className="user-dashboard-hero-side">
+          <div className="user-dashboard-hero-rail" aria-label="账号运行状态">
+            <div>
+              <span>启用密钥</span>
+              <strong>{activeKeyCount}/{keys.length}</strong>
+            </div>
+            <div>
+              <span>成功率</span>
+              <strong>{successRate}%</strong>
+            </div>
+            <div>
+              <span>最近调用</span>
+              <strong>{lastActivityLabel}</strong>
+            </div>
+          </div>
+          <div className="user-dashboard-header-actions">
+            <Link to="/user/models" className="btn btn-ghost">模型广场</Link>
+            <Link to="/user/usage" className="btn btn-primary">使用记录</Link>
+          </div>
        </div>
      </header>

      <div className="user-dashboard-stat-grid">
-        <div className="card user-dashboard-stat">
+        <div className="card user-dashboard-stat" data-tone="volume">
          <div className="user-dashboard-stat-label">总请求次数</div>
          <div className="user-dashboard-stat-value">{summary?.totalRequests || 0}</div>
          <div className="user-dashboard-stat-note">{failedRequests} 次失败</div>
        </div>
-        <div className="card user-dashboard-stat">
+        <div className="card user-dashboard-stat" data-tone="success">
          <div className="user-dashboard-stat-label">请求成功率</div>
          <div className="user-dashboard-stat-value is-success">{successRate}%</div>
          <div className="user-dashboard-stat-note">{summary?.successRequests || 0} 次成功</div>
        </div>
-        <div className="card user-dashboard-stat">
+        <div className="card user-dashboard-stat" data-tone="cost">
          <div className="user-dashboard-stat-label">总消耗金额</div>
          <div className="user-dashboard-stat-value">{formatMoney(summary?.totalCost)}</div>
          <div className="user-dashboard-stat-note">{activeKeyCount}/{keys.length} 个密钥启用</div>
@@ -177,24 +194,31 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
        <div className="user-dashboard-column">
          <section className="card user-dashboard-panel">
            <div className="user-dashboard-panel-head">
-              <h2>快速入口</h2>
+              <div>
+                <h2>快速入口</h2>
+                <p>选择一个入口继续创作</p>
+              </div>
            </div>
            <div className="user-dashboard-entry-grid">
              <Link to="/user/workflows" className="user-dashboard-entry">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h5v5H4zM15 4h5v5h-5zM15 15h5v5h-5zM9 8h6M17.5 9v6M9 11l6 6" /></svg>
                <span>工作流</span>
+                <small>画布编排图片、视频与 API 节点</small>
              </Link>
              <Link to="/user/comfyui-agent" className="user-dashboard-entry">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                <span>视频助手</span>
+                <small>脚本拆解、镜头规划、素材生成</small>
              </Link>
              <Link to="/user/picture-agent" className="user-dashboard-entry">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-5-6h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg>
                <span>生图助手</span>
+                <small>使用生图模型并自动归档产出</small>
              </Link>
              <Link to="/user/workspace" className="user-dashboard-entry">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 13h8M8 16h5" /></svg>
                <span>工作空间</span>
+                <small>查看已生成图片、视频与音频</small>
              </Link>
            </div>
          </section>