feat: enhance website flow and user workbench

2026-06-06 21:44:58 +08:00
parent f725de28bd
commit f7916a42e5
4 changed files with 502 additions and 21 deletions
@@ -10817,6 +10817,85 @@ textarea {
  gap: 18px;
 }

+.user-dashboard-workbench {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.user-dashboard-suggestion,
+.user-dashboard-workbench-metrics {
+  border: 1px solid var(--console-line);
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)), color-mix(in srgb, var(--color-bg-card) 82%, var(--color-bg)));
+  box-shadow: var(--shadow-card);
+}
+
+.user-dashboard-suggestion {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px 18px;
+  align-items: center;
+  padding: 18px;
+}
+
+.user-dashboard-suggestion span,
+.user-dashboard-workbench-metrics span {
+  color: var(--color-text-muted);
+  font-size: 11px;
+  font-weight: 760;
+}
+
+.user-dashboard-suggestion strong {
+  color: var(--color-text-primary);
+  font-size: 20px;
+  letter-spacing: -0.03em;
+}
+
+.user-dashboard-suggestion p {
+  max-width: 68ch;
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.user-dashboard-suggestion .btn {
+  grid-row: 1 / span 3;
+  grid-column: 2;
+}
+
+.user-dashboard-workbench-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  overflow: hidden;
+}
+
+.user-dashboard-workbench-metrics>div {
+  display: grid;
+  align-content: center;
+  gap: 6px;
+  min-width: 0;
+  min-height: 92px;
+  padding: 14px;
+}
+
+.user-dashboard-workbench-metrics>div+div {
+  border-left: 1px solid var(--console-line);
+}
+
+.user-dashboard-workbench-metrics strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 14px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .user-dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -10917,6 +10996,8 @@ textarea {
 }

 .user-dashboard-entry {
+  position: relative;
+  overflow: hidden;
  min-height: 108px;
  display: grid;
  align-content: center;
@@ -10932,6 +11013,34 @@ textarea {
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
 }

+.user-dashboard-entry::after {
+  position: absolute;
+  inset: auto 12px 12px auto;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  content: "";
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  filter: blur(4px);
+}
+
+.user-dashboard-entry[data-kind="video"]::after {
+  background: color-mix(in srgb, #14b8a6 14%, transparent);
+}
+
+.user-dashboard-entry[data-kind="image"]::after {
+  background: color-mix(in srgb, var(--color-success) 13%, transparent);
+}
+
+.user-dashboard-entry[data-kind="workspace"]::after {
+  background: color-mix(in srgb, var(--color-warning) 13%, transparent);
+}
+
+.user-dashboard-entry>* {
+  position: relative;
+  z-index: 1;
+}
+
 .user-dashboard-entry svg {
  width: 22px;
  height: 22px;
@@ -11054,6 +11163,10 @@ textarea {
    grid-template-columns: 1fr;
  }

+  .user-dashboard-workbench {
+    grid-template-columns: 1fr;
+  }
+
  .user-dashboard-grid {
    grid-template-columns: 1fr;
  }
@@ -11062,10 +11175,26 @@ textarea {
@media (max-width: 768px) {
  .user-dashboard-stat-grid,
  .user-dashboard-entry-grid,
+  .user-dashboard-workbench-metrics,
  .user-dashboard-profile-actions {
    grid-template-columns: 1fr;
  }

+  .user-dashboard-suggestion {
+    grid-template-columns: 1fr;
+  }
+
+  .user-dashboard-suggestion .btn {
+    grid-row: auto;
+    grid-column: auto;
+    width: 100%;
+  }
+
+  .user-dashboard-workbench-metrics>div+div {
+    border-top: 1px solid var(--console-line);
+    border-left: 0;
+  }
+
  .user-dashboard-hero,
  .user-dashboard-header {
    align-items: flex-start;
@@ -139,6 +139,63 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
  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) : '暂无调用';
+  const primarySuggestion = activeKeyCount === 0
+    ? {
+        title: '先创建一个 API 密钥',
+        body: '密钥创建后，工作流、生图助手和外部客户端都会进入同一套日志与计费。',
+        action: '管理密钥',
+        to: '/user/dashboard/keys',
+      }
+    : recentLogs.length === 0
+      ? {
+          title: '从一次创作任务开始',
+          body: '试试生图助手或工作流，产出会自动进入工作空间。',
+          action: '打开生图助手',
+          to: '/user/picture-agent',
+        }
+      : failedRequests > 0
+        ? {
+            title: '检查失败调用',
+            body: '最近存在失败请求，进入使用记录可以查看模型、延迟和错误原因。',
+            action: '查看使用记录',
+            to: '/user/usage',
+          }
+        : {
+            title: '继续扩展你的创作链路',
+            body: '把现有模型调用升级为工作流，复用提示词、图片、视频和归档产出。',
+            action: '打开工作流',
+            to: '/user/workflows',
+          };
+  const creationActions = [
+    {
+      label: '工作流',
+      note: '画布编排图片、视频与 API 节点',
+      to: '/user/workflows',
+      kind: 'workflow',
+      svg: <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>,
+    },
+    {
+      label: '视频助手',
+      note: '脚本拆解、镜头规划、素材生成',
+      to: '/user/comfyui-agent',
+      kind: 'video',
+      svg: <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>,
+    },
+    {
+      label: '生图助手',
+      note: '使用生图模型并自动归档产出',
+      to: '/user/picture-agent',
+      kind: 'image',
+      svg: <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>,
+    },
+    {
+      label: '工作空间',
+      note: '查看已生成图片、视频与音频',
+      to: '/user/workspace',
+      kind: 'workspace',
+      svg: <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>,
+    },
+  ];

  return (
    <div className="user-dashboard-page animate-fade-in">
@@ -172,6 +229,29 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
        </div>
      </header>

+      <section className="user-dashboard-workbench">
+        <div className="user-dashboard-suggestion">
+          <span>下一步</span>
+          <strong>{primarySuggestion.title}</strong>
+          <p>{primarySuggestion.body}</p>
+          <Link to={primarySuggestion.to} className="btn btn-primary">{primarySuggestion.action}</Link>
+        </div>
+        <div className="user-dashboard-workbench-metrics">
+          <div>
+            <span>今日入口</span>
+            <strong>创作工作台</strong>
+          </div>
+          <div>
+            <span>产出归档</span>
+            <strong>Workspace</strong>
+          </div>
+          <div>
+            <span>计费口径</span>
+            <strong>Token + Media</strong>
+          </div>
+        </div>
+      </section>
+
      <div className="user-dashboard-stat-grid">
        <div className="card user-dashboard-stat" data-tone="volume">
          <div className="user-dashboard-stat-label">总请求次数</div>
@@ -200,26 +280,18 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
              </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>
+              {creationActions.map((action) => (
+                <Link
+                  key={action.to}
+                  to={action.to}
+                  className="user-dashboard-entry"
+                  data-kind={action.kind}
+                >
+                  {action.svg}
+                  <span>{action.label}</span>
+                  <small>{action.note}</small>
+                </Link>
+              ))}
            </div>
          </section>