feat: 个人中心视觉重构、画布网点背景、剧本评分色调统一

【个人中心视觉重构】 - 列表卡片新增媒体预览缩略图（图片/视频/项目/资产），支持 image/video 两种媒体类型 - 新增 renderCardPreview 通用预览组件，自动识别视频格式并渲染 <video> 标签 - 新增 formatAssetType 工具函数，资产类型中文化（角色/场景/道具/视频/图像/素材） - 媒体卡片采用固定高度网格布局（标题行 18px/正文 36px/元信息 18px），保证列表节奏一致 - 卡片预览区左上角显示类型标签徽章（品牌绿边框+半透明背景） - 删除按钮增加 hover 红色反馈（边框/背景/文字渐变至红色） - 积分/任务面板从底部区域移至侧边栏头像下方，减少滚动距离 - 新增 account-card 容器包裹积分/任务切换面板 - 侧边栏统计数据改为 3 列网格布局，每项增加独立圆角卡片样式 - 作品/项目/资产/社区发布四个 Tab 改为均分 4 列网格 - 分区标题增加品牌绿圆点前缀装饰 - 响应式断点：960px（侧边栏双列+内容区单列）、640px（全部单列+标签横向滚动）、420px（紧凑间距）【画布网点背景】 - 移除 ReactFlow <Background> 组件，改用纯 CSS radial-gradient 圆点背景 - 通过 CSS 自定义属性（--canvas-bg-size/--canvas-bg-dot/--canvas-bg-x/--canvas-bg-y）实现缩放/平移时网点同步 - 网点颜色使用半透明灰蓝（rgba(148,163,184,0.34)），随画布缩放动态调整点间距与大小【剧本评分色调统一】 - 变量 Token 体系重定义为电商同款暗色面板色调（--v5-bg: #0d0d0f, --v5-panel: #151719） - 移除所有 box-shadow 和 depth 阴影，改用 inset 顶部光泽线 - 移除 backdrop-filter 毛玻璃效果，统一为纯色半透明背景 - hover 交互简化为边框+背景色变化，取消 transform 浮起动画 - 上传区移除 ::after 径向光晕伪元素 - 已上传态/选中态仅通过 border-color 和背景色微调区分
2026-06-04 13:16:38 +08:00
parent b08a7918da
commit fb4011bf1f
4 changed files with 1002 additions and 95 deletions
@@ -26,7 +26,6 @@
  VideoCameraOutlined,
 } from "@ant-design/icons";
 import {
-  Background,
  ReactFlow,
 } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react";
@@ -3542,7 +3541,8 @@ function CanvasPage({
          onMouseMove={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasMouseMove}
          onWheel={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasWheel}
          style={{
-            "--canvas-bg-size": `${24 * canvasViewport.zoom}px`,
+            "--canvas-bg-size": `${34 * canvasViewport.zoom}px`,
+            "--canvas-bg-dot": `${1.35 * canvasViewport.zoom}px`,
            "--canvas-bg-x": `${canvasViewport.x}px`,
            "--canvas-bg-y": `${canvasViewport.y}px`,
            cursor: canvasPanDrag ? "grabbing" : spacePanning ? "grab" : undefined,
@@ -3727,9 +3727,7 @@ function CanvasPage({
            proOptions={{ hideAttribution: true }}
            onPaneClick={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handlePaneClick}
            onPaneContextMenu={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handlePaneContextMenu}
-          >
-            <Background gap={24} color="transparent" className="studio-canvas__background" />
-          </ReactFlow>
+          />
          <div className="studio-canvas-zoom-controls" onMouseDown={(e) => e.stopPropagation()}>
            <button type="button" title="缩小" onClick={zoomCanvasOut}>−</button>
            <button type="button" className="studio-canvas-zoom-controls__pct" title="重置缩放" onClick={resetCanvasZoom}>
@@ -5,10 +5,13 @@ import {
  CloseOutlined,
  DeleteOutlined,
  EditOutlined,
+  FileImageOutlined,
+  FolderOpenOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
  PhoneOutlined,
+  PlayCircleOutlined,
  PlusOutlined,
  SafetyOutlined,
  ShareAltOutlined,
@@ -179,6 +182,19 @@ function formatAssetStatus(status: string | undefined): string {
  return status || "资产";
 }

+function formatAssetType(type: SavedAssetItem["type"]): string {
+  const labels: Record<string, string> = {
+    character: "角色",
+    scene: "场景",
+    prop: "道具",
+    video: "视频",
+    image: "图像",
+    asset: "资产",
+    other: "素材",
+  };
+  return labels[type] || "素材";
+}
+
 function ProfilePage({
  session,
  usage,
@@ -527,20 +543,48 @@ function ProfilePage({
    </div>
  );

+  const renderCardPreview = (
+    url: string | null | undefined,
+    type: "image" | "video" | "project" | "asset",
+    label: string,
+  ) => {
+    const mediaUrl = typeof url === "string" ? url.trim() : "";
+    const isVideoPreview = type === "video" || /\.(mp4|webm|mov)(\?|#|$)/i.test(mediaUrl);
+    const placeholderIcon =
+      type === "video" ? <PlayCircleOutlined /> : type === "project" ? <FolderOpenOutlined /> : <FileImageOutlined />;
+
+    return (
+      <div className={`profile-page__list-card-preview${mediaUrl ? " has-media" : ""}`} aria-hidden="true">
+        {mediaUrl ? (
+          isVideoPreview ? (
+            <video src={mediaUrl} muted playsInline preload="metadata" />
+          ) : (
+            <img src={mediaUrl} alt="" loading="lazy" />
+          )
+        ) : (
+          <span className="profile-page__list-card-placeholder">{placeholderIcon}</span>
+        )}
+        <span className="profile-page__media-badge">{label}</span>
+      </div>
+    );
+  };
+
  const renderActivePanel = () => {
    if (activePanel === "works") {
      return visibleWorks.length ? (
        <div className="profile-page__list-grid motion-stagger">
          {visibleWorks.map((task) => (
-            <article key={task.id} className="profile-page__list-card">
-              <div className="profile-page__list-card-head">
-                <strong>{task.title}</strong>
-                <span>{formatTaskType(task.type)}</span>
-              </div>
-              <p>{task.prompt}</p>
-              <div className="profile-page__list-card-meta">
-                <span>{formatTaskStatus(task.status)}</span>
-                <span>{formatProfileDate(task.createdAt)}</span>
+            <article key={task.id} className="profile-page__list-card profile-page__media-card">
+              {renderCardPreview(task.outputUrl, task.type === "video" ? "video" : "image", formatTaskType(task.type))}
+              <div className="profile-page__list-card-body">
+                <div className="profile-page__list-card-head">
+                  <strong>{task.title}</strong>
+                </div>
+                <p>{task.prompt}</p>
+                <div className="profile-page__list-card-meta">
+                  <span>{formatTaskStatus(task.status)}</span>
+                  <span>{formatProfileDate(task.createdAt)}</span>
+                </div>
              </div>
            </article>
          ))}
@@ -554,25 +598,27 @@ function ProfilePage({
      return projects.length ? (
        <div className="profile-page__list-grid motion-stagger">
          {projects.map((project) => (
-            <article key={project.id} className="profile-page__list-card">
-              <div className="profile-page__list-card-head">
-                <strong>{project.name}</strong>
-                <span>{formatProfileDate(project.updatedAt)}</span>
-                {onDeleteProject ? (
-                  <button
-                    type="button"
-                    className="profile-page__delete-project"
-                    aria-label={`删除项目 ${project.name}`}
-                    onClick={() => onDeleteProject(project)}
-                  >
-                    <DeleteOutlined />
-                  </button>
-                ) : null}
-              </div>
-              <p>{project.description || "最近更新的项目"}</p>
-              <div className="profile-page__list-card-meta">
-                <span>{project.storyboardCount} 节点</span>
-                <span>{project.imageCount} 图 / {project.videoCount} 视频</span>
+            <article key={project.id} className="profile-page__list-card profile-page__media-card">
+              {renderCardPreview(project.thumbnailUrl, "project", "项目")}
+              <div className="profile-page__list-card-body">
+                <div className="profile-page__list-card-head">
+                  <strong>{project.name}</strong>
+                  {onDeleteProject ? (
+                    <button
+                      type="button"
+                      className="profile-page__delete-project"
+                      aria-label={`删除项目 ${project.name}`}
+                      onClick={() => onDeleteProject(project)}
+                    >
+                      <DeleteOutlined />
+                    </button>
+                  ) : null}
+                </div>
+                <p>{project.description || "最近更新的项目"}</p>
+                <div className="profile-page__list-card-meta">
+                  <span>{project.storyboardCount} 节点</span>
+                  <span>{formatProfileDate(project.updatedAt)}</span>
+                </div>
              </div>
            </article>
          ))}
@@ -586,15 +632,18 @@ function ProfilePage({
      return savedAssets.length ? (
        <div className="profile-page__list-grid">
          {savedAssets.map((asset) => (
-            <article key={asset.id} className="profile-page__list-card">
-              <div className="profile-page__list-card-head">
-                <strong>{asset.name}</strong>
-                <span>{formatAssetStatus(asset.status)}</span>
-              </div>
-              <p>{asset.description}</p>
-              <div className="profile-page__list-card-meta">
-                <span>{asset.type}</span>
-                <span>{formatProfileDate(asset.updatedAt)}</span>
+            <article key={asset.id} className="profile-page__list-card profile-page__media-card">
+              {renderCardPreview(asset.imageUrl || asset.url, asset.type === "video" ? "video" : "asset", formatAssetType(asset.type))}
+              <div className="profile-page__list-card-body">
+                <div className="profile-page__list-card-head">
+                  <strong>{asset.name}</strong>
+                  <span>{formatAssetStatus(asset.status)}</span>
+                </div>
+                <p>{asset.description}</p>
+                <div className="profile-page__list-card-meta">
+                  <span>{formatAssetType(asset.type)}</span>
+                  <span>{formatProfileDate(asset.updatedAt)}</span>
+                </div>
              </div>
            </article>
          ))}
@@ -708,6 +757,50 @@ function ProfilePage({
              </div>
            </div>

+            <div className="profile-page__account-card">
+              <div className="profile-page__list-tabs">
+                <button
+                  type="button"
+                  className={accountPanel === "credits" ? "is-active" : ""}
+                  onClick={() => setAccountPanel("credits")}
+                >
+                  积分 {(totalBalance / 100).toFixed(2)}
+                </button>
+                <button
+                  type="button"
+                  className={accountPanel === "tasks" ? "is-active" : ""}
+                  onClick={() => setAccountPanel("tasks")}
+                >
+                  任务 {tasks.length}
+                </button>
+              </div>
+              <div className="profile-page__upload-card profile-page__upload-card--meta">
+                {accountPanel === "credits" ? (
+                  <>
+                    <span className="profile-page__meta-item">
+                      <small>当前账号</small>
+                      <strong>{displayName}</strong>
+                    </span>
+                    <span className="profile-page__meta-item">
+                      <small>积分剩余</small>
+                      <strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className="profile-page__meta-item">
+                      <small>任务总数</small>
+                      <strong>{tasks.length}</strong>
+                    </span>
+                    <span className="profile-page__meta-item">
+                      <small>已完成</small>
+                      <strong>{completedTasks.length}</strong>
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+
            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
              <ShareAltOutlined />
              {packageLabel}
@@ -755,52 +848,6 @@ function ProfilePage({
              </span>
              {renderActivePanel()}
            </div>
-
-            <div className="profile-page__section">
-              <div className="profile-page__list-bar">
-                <div className="profile-page__list-tabs">
-                  <button
-                    type="button"
-                    className={accountPanel === "credits" ? "is-active" : ""}
-                    onClick={() => setAccountPanel("credits")}
-                  >
-                    积分 {(totalBalance / 100).toFixed(2)}
-                  </button>
-                  <button
-                    type="button"
-                    className={accountPanel === "tasks" ? "is-active" : ""}
-                    onClick={() => setAccountPanel("tasks")}
-                  >
-                    任务 {tasks.length}
-                  </button>
-                </div>
-              </div>
-              <div className="profile-page__upload-card profile-page__upload-card--meta">
-                {accountPanel === "credits" ? (
-                  <>
-                    <span className="profile-page__meta-item">
-                      <small>当前账号</small>
-                      <strong>{displayName}</strong>
-                    </span>
-                    <span className="profile-page__meta-item">
-                      <small>积分剩余</small>
-                      <strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
-                    </span>
-                  </>
-                ) : (
-                  <>
-                    <span className="profile-page__meta-item">
-                      <small>任务总数</small>
-                      <strong>{tasks.length}</strong>
-                    </span>
-                    <span className="profile-page__meta-item">
-                      <small>已完成</small>
-                      <strong>{completedTasks.length}</strong>
-                    </span>
-                  </>
-                )}
-              </div>
-            </div>
          </main>
        </div>
      </section>