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 和背景色微调区分

src/features/profile/ProfilePage.tsx

@@ -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>