merge master, accept theirs for known conflict files

2026-06-03 21:53:47 +08:00
parent db79ee2c80 f86ca99548
commit fdf9c43731
20 changed files with 4448 additions and 1108 deletions
@@ -567,7 +567,17 @@ function DigitalHumanPage({
                </button>
              )}
              {resultVideoUrl && (
-                <div className="studio-result-actions studio-result-actions--with-clear">
+                <button type="button" className="studio-generate-btn" onClick={() => {
+                  setResultVideoUrl("");
+                  setActiveTaskId("");
+                  setTaskProgress(0);
+                  setNotice("已清空工作区");
+                }}>
+                  清空
+                </button>
+              )}
+              {resultVideoUrl && (
+                <div className="studio-result-actions">
                  <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
                    <DownloadOutlined />
                    {isDownloadingResult ? "保存中" : "保存本地"}
@@ -576,14 +586,6 @@ function DigitalHumanPage({
                    <InboxOutlined />
                    {isSavingResultAsset ? "加入中" : "加入资产库"}
                  </button>
-                  <button type="button" onClick={() => {
-                    setResultVideoUrl("");
-                    setActiveTaskId("");
-                    setTaskProgress(0);
-                    setNotice("已清空工作区");
-                  }}>
-                    清空
-                  </button>
                </div>
              )}
            </div>
@@ -7,16 +7,13 @@ import {
  ShoppingOutlined,
  ThunderboltOutlined,
 } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { useScrollEntrance } from "../../hooks/useScrollEntrance";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
 import ModelGenerationShowcase from "./ModelGenerationShowcase";
-const ecommerceTemplate1 = "https://www.omniai.net.cn/static/home-ecommerce-template-1.png";
-const ecommerceTemplate2 = "https://www.omniai.net.cn/static/home-ecommerce-template-2.png";
-const ecommerceTemplate3 = "https://www.omniai.net.cn/static/home-ecommerce-template-3.png";

 function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
@@ -54,16 +51,6 @@ const HOME_CAROUSEL_IMAGES = [
 ];

 const HOME_FEATURES = [
-  {
-    key: "script",
-    eyebrow: "Script Review",
-    title: "剧本智能测评",
-    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
-    imageUrl: featureScriptImage,
-    actionLabel: "开始测评",
-    icon: <FileSearchOutlined />,
-    stats: ["六维评分", "质量量化", "逐项优化"],
-  },
  {
    key: "model",
    eyebrow: "AI Generation",
@@ -84,6 +71,16 @@ const HOME_FEATURES = [
    icon: <ShoppingOutlined />,
    stats: ["多场景", "多角度", "批量输出"],
  },
+  {
+    key: "script",
+    eyebrow: "Script Review",
+    title: "剧本智能测评",
+    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
+    imageUrl: featureScriptImage,
+    actionLabel: "开始测评",
+    icon: <FileSearchOutlined />,
+    stats: ["六维评分", "质量量化", "逐项优化"],
+  },
 ];

 const HOME_EXPERIENCE_POINTS = [
@@ -93,37 +90,96 @@ const HOME_EXPERIENCE_POINTS = [
  { label: "电商", meta: "商品视觉", tone: "amber" },
 ];

-const HOME_ECOMMERCE_TEMPLATES = [
-  {
-    title: "卖点详情图",
-    tag: "详情",
-    meta: "中文卖点标注",
-    imageUrl: ecommerceTemplate1,
-  },
-  {
-    title: "场景主图",
-    tag: "主图",
-    meta: "商品氛围构图",
-    imageUrl: ecommerceTemplate2,
-  },
-  {
-    title: "虚拟模特",
-    tag: "模特",
-    meta: "使用场景延展",
-    imageUrl: ecommerceTemplate3,
-  },
+const ECOMMERCE_MATRIX_FEATURES = [
+  { icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
+  { icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
+  { icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
 ];

-const HOME_ECOMMERCE_TOOLS = [
-  { title: "主图", meta: "平台首图" },
-  { title: "详情", meta: "卖点拆解" },
-  { title: "模特", meta: "虚拟模特" },
-  { title: "短视频", meta: "首帧方案" },
+const ECOMMERCE_MATRIX_PROCESS = [
+  { icon: "📤", label: "上传原图", subLabel: "Upload" },
+  { icon: "🔍", label: "AI识别", subLabel: "Recognition" },
+  { icon: "⚙️", label: "生成处理", subLabel: "Processing" },
+  { icon: "📦", label: "矩阵产出", subLabel: "Output" },
+];
+
+const ECOMMERCE_MATRIX_AI_STEPS = ["智能识别主体", "3D虚拟模特", "场景生成", "详情图生成", "批量导出"];
+
+type EcommerceMatrixModelCard = {
+  kind: "model";
+  color: "brown" | "green" | "blue";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square?: false;
+};
+
+type EcommerceMatrixSceneCard = {
+  kind: "scene";
+  color: "p1" | "p2" | "p3";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square: true;
+  variant?: "greenery" | "blue";
+};
+
+type EcommerceMatrixLayoutCard = {
+  kind: "layout";
+  color: "c1" | "c2" | "c3";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square: true;
+  badge: string;
+  badgeTone?: "purple";
+};
+
+type EcommerceMatrixCard = EcommerceMatrixModelCard | EcommerceMatrixSceneCard | EcommerceMatrixLayoutCard;
+
+const ECOMMERCE_MATRIX_OUTPUTS: Array<{
+  title: string;
+  subtitle: string;
+  cards: EcommerceMatrixCard[];
+}> = [
+  {
+    title: "3D 虚拟模特",
+    subtitle: "Virtual Model",
+    cards: [
+      { kind: "model", color: "brown", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+      { kind: "model", color: "green", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+      { kind: "model", color: "blue", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+    ],
+  },
+  {
+    title: "场景图",
+    subtitle: "Scene Image",
+    cards: [
+      { kind: "scene", color: "p1", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true },
+      { kind: "scene", color: "p2", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "greenery" },
+      { kind: "scene", color: "p3", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "blue" },
+    ],
+  },
+  {
+    title: "详情图",
+    subtitle: "Detail Image",
+    cards: [
+      { kind: "layout", color: "c1", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "优雅随行" },
+      { kind: "layout", color: "c2", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "限时特惠", badgeTone: "purple" },
+      { kind: "layout", color: "c3", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "新品首发" },
+    ],
+  },
 ];

 const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
 const HOME_CAROUSEL_TRANSITION_MS = 860;

+type EcommerceFlowLine = {
+  d: string;
+  x: number;
+  y: number;
+};
+
 interface HomeCarouselMotion {
  direction: number;
  progress: 0 | 1;
@@ -137,9 +193,9 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
  const depth = Math.abs(offset);
  const direction = Math.sign(offset);
  const isActive = depth === 0;
-  const xByDepth = [0, 286, 456, 610, 735, 840];
+  const xByDepth = [0, 190, 320, 430, 520, 590];
  const yByDepth = [8, -2, -8, -13, -18, -24];
-  const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84];
+  const scaleByDepth = [1, 1, 1, 1, 1, 1];
  const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
  const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
  const z = isActive ? 90 : 28 - depth;
@@ -159,38 +215,253 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
  } as CSSProperties;
 }

-function EcommerceFeatureShowcase() {
+function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) {
+  if (card.kind === "model") {
+    return (
+      <div className="mock-model">
+        <div className="silhouette" />
+        <div className={`mock-product-hold ${card.color}`} />
+      </div>
+    );
+  }
+
+  if (card.kind === "scene") {
+    return (
+      <div className="mock-scene">
+        {card.variant === "greenery" ? <div className="obj greenery" /> : <div className="obj decor-item is-soft-blue" />}
+        <div className={`obj table-top${card.variant === "greenery" ? " is-warm" : ""}`} />
+        <div className={`obj prod ${card.color}`} />
+      </div>
+    );
+  }
+
  return (
-    <div className="omni-home-ecommerce-showcase">
-      <div className="omni-home-ecommerce-showcase__depth" />
-      <div className="omni-home-ecommerce-showcase__grain" />
-
-      <div className="omni-home-ecommerce-showcase__prompt">
-        <span>商品图 + 生成要求</span>
-        <strong>生成整套电商视觉</strong>
-        <p>主图、详情页、虚拟模特、短视频首帧一次整理。</p>
+    <div className="mock-layout">
+      <div className="lay-img">
+        <div className={`mini-cup ${card.color}`} />
      </div>
+      <div className="lay-text">
+        <div className={`lay-line title${card.color === "c2" ? " is-short" : card.color === "c3" ? " is-wide" : ""}`} />
+        <div className={`lay-line sub${card.color === "c2" ? " is-medium" : ""}`} />
+        <div className={`lay-line short${card.color === "c3" ? " is-medium" : ""}`} />
+        <div className={`lay-badge${card.badgeTone === "purple" ? " purple" : ""}`}>{card.badge}</div>
+      </div>
+    </div>
+  );
+}

-      <div className="omni-home-ecommerce-showcase__tools" aria-hidden="true">
-        {HOME_ECOMMERCE_TOOLS.map((item) => (
-          <div key={item.title} className="omni-home-ecommerce-showcase__tool">
-            <b>{item.title}</b>
-            <small>{item.meta}</small>
+function EcommerceFeatureShowcase() {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const inputCardRef = useRef<HTMLDivElement | null>(null);
+  const outputGroupRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const [flowLines, setFlowLines] = useState<EcommerceFlowLine[]>(() =>
+    ECOMMERCE_MATRIX_OUTPUTS.map(() => ({ d: "", x: 0, y: 0 })),
+  );
+
+  useEffect(() => {
+    let frameId: number | null = null;
+
+    const updateFlowLines = () => {
+      const root = rootRef.current;
+      const inputCard = inputCardRef.current;
+      if (!root || !inputCard) return;
+
+      const rootRect = root.getBoundingClientRect();
+      const inputRect = inputCard.getBoundingClientRect();
+      const sx = inputRect.right - rootRect.left;
+      const sy = inputRect.top - rootRect.top + inputRect.height / 2;
+      const cornerRadius = 24;
+
+      const nextLines = outputGroupRefs.current.slice(0, ECOMMERCE_MATRIX_OUTPUTS.length).map((group) => {
+        if (!group) return { d: "", x: 0, y: 0 };
+
+        const groupRect = group.getBoundingClientRect();
+        const tx = groupRect.left - rootRect.left;
+        const ty = groupRect.top - rootRect.top + groupRect.height / 2;
+        const totalDistance = tx - sx;
+        const splitX = sx + totalDistance * 0.3;
+        const direction = ty > sy ? 1 : ty < sy ? -1 : 0;
+        const verticalDistance = Math.abs(ty - sy);
+        const resolvedRadius = Math.min(cornerRadius, verticalDistance / 2);
+
+        const d =
+          direction === 0
+            ? `M ${sx} ${sy} L ${tx} ${ty}`
+            : `M ${sx} ${sy} L ${splitX} ${sy} Q ${splitX + resolvedRadius} ${sy}, ${splitX + resolvedRadius} ${
+                sy + direction * resolvedRadius
+              } L ${splitX + resolvedRadius} ${ty - direction * resolvedRadius} Q ${splitX + resolvedRadius} ${ty}, ${
+                splitX + resolvedRadius * 2
+              } ${ty} L ${tx} ${ty}`;
+
+        return { d, x: tx, y: ty };
+      });
+
+      setFlowLines(nextLines);
+    };
+
+    const scheduleUpdate = () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      frameId = window.requestAnimationFrame(updateFlowLines);
+    };
+
+    scheduleUpdate();
+    window.addEventListener("resize", scheduleUpdate);
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+
+    return () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      window.removeEventListener("resize", scheduleUpdate);
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className="omni-home-ecommerce-matrix">
+      <div className="bg-base" />
+      <div className="bg-grid" />
+      <div className="bg-stars" />
+      <div className="bg-vignette" />
+      <div className="bg-noise" />
+
+      <div className="page">
+        <div className="left-panel">
+          <h3 className="hero-title">
+            一张原图
+            <br />
+            矩阵生产全场景图文
+          </h3>
+
+          <p className="hero-desc">
+            从商品原图到3D虚拟模特、场景图、详情图
+            <br />
+            AI工作流自动化，批量生成，高效出图
+          </p>
+
+          <div className="features">
+            {ECOMMERCE_MATRIX_FEATURES.map((item) => (
+              <div key={item.title} className="feature-item">
+                <div className="feature-icon">{item.icon}</div>
+                <div className="feature-text">
+                  <h4>{item.title}</h4>
+                  <p>{item.description}</p>
+                </div>
+              </div>
+            ))}
          </div>
-        ))}
-      </div>

-      <div className="omni-home-ecommerce-showcase__gallery" aria-hidden="true">
-        {HOME_ECOMMERCE_TEMPLATES.map((item, index) => (
-          <article key={item.title} className={`omni-home-ecommerce-showcase__shot is-${index + 1}`}>
-            <img src={item.imageUrl} alt="" />
-            <div>
-              <span>{item.tag}</span>
-              <strong>{item.title}</strong>
-              <small>{item.meta}</small>
+          <div className="process-flow">
+            {ECOMMERCE_MATRIX_PROCESS.map((item, index) => (
+              <Fragment key={item.label}>
+                {index > 0 ? <span className="process-arrow">▸</span> : null}
+                <div className="process-step">
+                  <span className="step-icon">{item.icon}</span>
+                  <span className="step-label">{item.label}</span>
+                  <span className="step-sub">{item.subLabel}</span>
+                </div>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+
+        <div className="center-panel">
+          <div ref={inputCardRef} className="input-card">
+            <div className="input-card-header">
+              <span className="input-card-label">商品原图 Input</span>
+              <span className="input-card-res">3000×3000</span>
            </div>
-          </article>
-        ))}
+            <div className="input-card-img">
+              <div className="product-placeholder">
+                <div className="cup cup-1">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="cup cup-2">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="cup cup-3">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="books">
+                  <div className="book" />
+                  <div className="book" />
+                  <div className="book" />
+                  <div className="book" />
+                </div>
+                <div className="table-surface" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="right-panel">
+          <div className="ai-node">
+            <div className="ai-node-title">AI 工作流</div>
+            <div className="ai-node-list">
+              {ECOMMERCE_MATRIX_AI_STEPS.map((item) => (
+                <div key={item} className="ai-node-item">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {ECOMMERCE_MATRIX_OUTPUTS.map((group, groupIndex) => (
+            <div
+              key={group.title}
+              ref={(node) => {
+                outputGroupRefs.current[groupIndex] = node;
+              }}
+              className="output-group"
+            >
+              <div className="output-label">
+                <h4>{group.title}</h4>
+                <p>{group.subtitle}</p>
+              </div>
+              <div className="output-cards">
+                {group.cards.map((card, cardIndex) => (
+                  <div key={`${group.title}-${cardIndex}`} className={`output-card${card.square ? " square" : ""}`}>
+                    <div className="output-card-img">
+                      <span className={`output-card-tag ${card.tagTone}`}>{card.tag}</span>
+                      <EcommerceMatrixCardVisual card={card} />
+                      <span className="output-card-res">{card.resolution}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <svg className="flow-svg" aria-hidden="true">
+          <defs>
+            <filter id="home-ecommerce-flow-glow">
+              <feGaussianBlur stdDeviation="2" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          {flowLines.map((line, index) => (
+            <Fragment key={index}>
+              <path className={`flow-path flow-path-${index + 1}`} d={line.d} filter="url(#home-ecommerce-flow-glow)" />
+              <circle className={`flow-dot flow-dot-${index + 1}`} cx={line.x} cy={line.y} r="4" filter="url(#home-ecommerce-flow-glow)" />
+            </Fragment>
+          ))}
+        </svg>
      </div>
    </div>
  );
@@ -367,19 +638,21 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
      <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
        {HOME_FEATURES.map((feature, index) => (
          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
-            <div className="omni-home__feature-copy">
-              <span>
-                {feature.icon}
-                {feature.eyebrow}
-              </span>
-              <h2>{feature.title}</h2>
-              <p>{feature.description}</p>
-              <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
-                {feature.actionLabel}
-                <ArrowRightOutlined />
-              </button>
-            </div>
-            <div className="omni-home__feature-visual" aria-hidden="true">
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+              <div className="omni-home__feature-copy">
+                <span>
+                  {feature.icon}
+                  {feature.eyebrow}
+                </span>
+                <h2>{feature.title}</h2>
+                <p>{feature.description}</p>
+                <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
+                  {feature.actionLabel}
+                  <ArrowRightOutlined />
+                </button>
+              </div>
+            ) : null}
+            <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
              {feature.key === "script" ? (
                <ScriptReviewShowcase />
              ) : feature.key === "model" ? (
@@ -390,14 +663,18 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
                <img src={feature.imageUrl} alt="" />
              )}
            </div>
-            <div className="omni-home__feature-stats" aria-hidden="true">
-              {feature.stats.map((item) => (
-                <span key={item}>{item}</span>
-              ))}
-            </div>
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+              <div className="omni-home__feature-stats" aria-hidden="true">
+                {feature.stats.map((item) => (
+                  <span key={item}>{item}</span>
+                ))}
+              </div>
+            ) : null}
          </section>
        ))}

+        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
+
        <section className="omni-home__experience" aria-label="点击体验">
          <div className="omni-home__experience-copy">
            <span>
@@ -430,8 +707,6 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
            </button>
          </div>
        </section>
-
-        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
      </main>
    </section>
    </>
@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from "react";

 const DIMS = [
  { name: "钩子设计", score: 16, max: 20, hue: 145, desc: "吸引力·悬念·黄金三秒", isPerfect: false, isLow: false },
-  { name: "角色塑造", score: 15, max: 15, hue: 155, desc: "立体度·动机·弧光", isPerfect: true, isLow: false },
  { name: "剧情结构", score: 16, max: 20, hue: 165, desc: "起承转合·节奏·冲突", isPerfect: false, isLow: false },
+  { name: "角色塑造", score: 15, max: 15, hue: 155, desc: "立体度·动机·弧光", isPerfect: true, isLow: false },
  { name: "逻辑严密", score: 12, max: 15, hue: 175, desc: "自洽·伏笔·因果链", isPerfect: false, isLow: false },
  { name: "场景构建", score: 10, max: 15, hue: 185, desc: "空间·视听·画面感", isPerfect: false, isLow: true },
  { name: "内容深度", score: 8, max: 15, hue: 195, desc: "主题·情感·思想内核", isPerfect: false, isLow: true },
@@ -27,6 +27,12 @@ const OPTIMIZATIONS = [
  { dim: "逻辑严密 → 补强", priority: "中优先", priorityClass: "badge-orange", text: "补充世界观细节，强化因果链与伏笔回收" },
 ];

+const SHOWCASE_POINTS = [
+  { icon: "⚡", title: "六维评分", text: "结构、节奏、人物到商业潜力全面量化" },
+  { icon: "◈", title: "质量量化", text: "用雷达评分拆解剧本质量与短板" },
+  { icon: "↗", title: "逐项优化", text: "给出可执行的优化路径和打磨方向" },
+];
+
 function animateNumber(el: HTMLElement | null, target: number, duration: number) {
  if (!el) return;
  const start = performance.now();
@@ -79,125 +85,154 @@ function ScriptReviewShowcase() {

  return (
    <div className="omni-script-review-showcase" id="script-review-showcase">
-      {/* Score Hero */}
-      <div className="srs-score-hero">
-        <div className="srs-score-left">
-          <div className="srs-score-circle">
-            <div className="srs-score-circle-inner">
-              <span className="srs-score-num" ref={scoreRef}>0</span>
-              <span className="srs-score-den">/ 100</span>
-            </div>
-          </div>
-          <div className="srs-score-meta">
-            <div className="srs-score-grade">A 级</div>
-            <div className="srs-score-tags">
-              <span className="srs-score-tag">现实剧情</span>
-              <span className="srs-score-tag">58min</span>
-              <span className="srs-score-tag">6角色</span>
-            </div>
-          </div>
+      <div className="srs-left-panel">
+        <div className="srs-brand-section">
+          <h1>剧本智能测评</h1>
+          <p>用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。</p>
        </div>
-        <div className="srs-score-divider" />
-        <div className="srs-score-right">
-          <div className="srs-score-proj">电商广告片生成项目计划 · 评测结果</div>
-          <div className="srs-score-summary">
-            现实剧情特征清晰，角色塑造表现突出。当前最值得继续打磨的是内容深度，建议围绕人物选择、冲突升级和可拍摄细节继续压实。
-          </div>
+
+        <div className="srs-point-list">
+          {SHOWCASE_POINTS.map((item) => (
+            <div key={item.title} className="srs-point-card">
+              <div className="srs-point-icon">{item.icon}</div>
+              <div>
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="srs-flow-card">
+          <span>上传剧本</span>
+          <b>→</b>
+          <span>六维评分</span>
+          <b>→</b>
+          <span>优化建议</span>
        </div>
      </div>

-      {/* Vertical Bar Chart */}
-      <div className="srs-chart-card">
-        <div className="srs-chart-title">六维评分 Dimension Breakdown</div>
-        <div className="srs-chart-body">
-          {DIMS.map((dim, i) => {
-            const pct = dim.score / dim.max;
-            return (
-              <div key={dim.name} className="srs-chart-col">
-                <div className="srs-chart-bar-wrap">
-                  <div className="srs-chart-bar-bg" style={{ height: "100%" }} />
-                  <div
-                    ref={(el) => { barRefs.current[i] = el; }}
-                    className={`srs-chart-bar-fill${dim.isPerfect ? " is-perfect" : ""}${dim.isLow ? " is-low" : ""}`}
-                    data-pct={String(Math.round(pct * 100))}
-                    style={{ height: "0%" }}
-                  >
-                    <div className="srs-chart-bar-score">
-                      <span
-                        ref={(el) => { scoreValRefs.current[i] = el; }}
-                        data-target={String(dim.score)}
-                      >0</span>
-                      <span className="srs-chart-bar-sub">/{dim.max}</span>
-                      {dim.isPerfect && <span className="srs-chart-bar-star">★</span>}
+      <div className="srs-results-panel">
+        {/* Score Hero */}
+        <div className="srs-score-hero">
+          <div className="srs-score-left">
+            <div className="srs-score-circle">
+              <div className="srs-score-circle-inner">
+                <span className="srs-score-num" ref={scoreRef}>0</span>
+                <span className="srs-score-den">/ 100</span>
+              </div>
+            </div>
+            <div className="srs-score-meta">
+              <div className="srs-score-grade">A 级</div>
+              <div className="srs-score-tags">
+                <span className="srs-score-tag">现实剧情</span>
+                <span className="srs-score-tag">58min</span>
+                <span className="srs-score-tag">6角色</span>
+              </div>
+            </div>
+          </div>
+          <div className="srs-score-divider" />
+          <div className="srs-score-right">
+            <div className="srs-score-proj">电商广告片生成项目计划 · 评测结果</div>
+            <div className="srs-score-summary">
+              现实剧情特征清晰，角色塑造表现突出。当前最值得继续打磨的是内容深度，建议围绕人物选择、冲突升级和可拍摄细节继续压实。
+            </div>
+          </div>
+        </div>
+
+        {/* Vertical Bar Chart */}
+        <div className="srs-chart-card">
+          <div className="srs-chart-title">六维评分 Dimension Breakdown</div>
+          <div className="srs-chart-body">
+            {DIMS.map((dim, i) => {
+              const pct = dim.score / dim.max;
+              return (
+                <div key={dim.name} className="srs-chart-col">
+                  <div className="srs-chart-bar-wrap">
+                    <div className="srs-chart-bar-bg" style={{ height: "100%" }} />
+                    <div
+                      ref={(el) => { barRefs.current[i] = el; }}
+                      className={`srs-chart-bar-fill${dim.isPerfect ? " is-perfect" : ""}${dim.isLow ? " is-low" : ""}`}
+                      data-pct={String(Math.round(pct * 100))}
+                      style={{ height: "0%" }}
+                    >
+                      <div className="srs-chart-bar-score">
+                        <span
+                          ref={(el) => { scoreValRefs.current[i] = el; }}
+                          data-target={String(dim.score)}
+                        >0</span>
+                        <span className="srs-chart-bar-sub">/{dim.max}</span>
+                        {dim.isPerfect && <span className="srs-chart-bar-star">★</span>}
+                      </div>
                    </div>
                  </div>
+                  <div className="srs-chart-col-label">
+                    <div className="srs-chart-col-name">{dim.name}</div>
+                    <div className="srs-chart-col-desc">{dim.desc}</div>
+                  </div>
                </div>
-                <div className="srs-chart-col-label">
-                  <div className="srs-chart-col-name">{dim.name}</div>
-                  <div className="srs-chart-col-desc">{dim.desc}</div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Triple Section */}
-      <div className="srs-triple-section">
-        {/* Highlights */}
-        <div className="srs-section-card is-highlight">
-          <div className="srs-section-header">
-            <div className="srs-section-icon">✦</div>
-            <span className="srs-section-label">亮点</span>
-          </div>
-          <div className="srs-section-list">
-            {HIGHLIGHTS.map((item) => (
-              <div key={item.dim} className="srs-section-item">
-                <div className="srs-section-item-head">
-                  <span className="srs-section-item-dim">{item.dim}</span>
-                  <span className="srs-section-item-score is-green">{item.score}</span>
-                </div>
-                <div className="srs-section-item-text">{item.text}</div>
-              </div>
-            ))}
+              );
+            })}
          </div>
        </div>

-        {/* Weaknesses */}
-        <div className="srs-section-card is-weakness">
-          <div className="srs-section-header">
-            <div className="srs-section-icon">✗</div>
-            <span className="srs-section-label">缺点</span>
-          </div>
-          <div className="srs-section-list">
-            {WEAKNESSES.map((item) => (
-              <div key={item.dim} className="srs-section-item">
-                <div className="srs-section-item-head">
-                  <span className="srs-section-item-dim">{item.dim}</span>
-                  <span className="srs-section-item-score is-red">{item.score}</span>
+        {/* Triple Section */}
+        <div className="srs-triple-section">
+          {/* Highlights */}
+          <div className="srs-section-card is-highlight">
+            <div className="srs-section-header">
+              <div className="srs-section-icon">✦</div>
+              <span className="srs-section-label">亮点</span>
+            </div>
+            <div className="srs-section-list">
+              {HIGHLIGHTS.map((item) => (
+                <div key={item.dim} className="srs-section-item">
+                  <div className="srs-section-item-head">
+                    <span className="srs-section-item-dim">{item.dim}</span>
+                    <span className="srs-section-item-score is-green">{item.score}</span>
+                  </div>
+                  <div className="srs-section-item-text">{item.text}</div>
                </div>
-                <div className="srs-section-item-text">{item.text}</div>
-              </div>
-            ))}
+              ))}
+            </div>
          </div>
-        </div>

-        {/* Optimization */}
-        <div className="srs-section-card is-optimize">
-          <div className="srs-section-header">
-            <div className="srs-section-icon">⚡</div>
-            <span className="srs-section-label">优化路径</span>
-          </div>
-          <div className="srs-section-list">
-            {OPTIMIZATIONS.map((item) => (
-              <div key={item.dim} className="srs-section-item">
-                <div className="srs-section-item-head">
-                  <span className="srs-section-item-dim">{item.dim}</span>
-                  <span className={`srs-section-item-badge ${item.priorityClass}`}>{item.priority}</span>
+          {/* Weaknesses */}
+          <div className="srs-section-card is-weakness">
+            <div className="srs-section-header">
+              <div className="srs-section-icon">✗</div>
+              <span className="srs-section-label">缺点</span>
+            </div>
+            <div className="srs-section-list">
+              {WEAKNESSES.map((item) => (
+                <div key={item.dim} className="srs-section-item">
+                  <div className="srs-section-item-head">
+                    <span className="srs-section-item-dim">{item.dim}</span>
+                    <span className="srs-section-item-score is-red">{item.score}</span>
+                  </div>
+                  <div className="srs-section-item-text">{item.text}</div>
                </div>
-                <div className="srs-section-item-text">{item.text}</div>
-              </div>
-            ))}
+              ))}
+            </div>
+          </div>
+
+          {/* Optimization */}
+          <div className="srs-section-card is-optimize">
+            <div className="srs-section-header">
+              <div className="srs-section-icon">⚡</div>
+              <span className="srs-section-label">优化路径</span>
+            </div>
+            <div className="srs-section-list">
+              {OPTIMIZATIONS.map((item) => (
+                <div key={item.dim} className="srs-section-item">
+                  <div className="srs-section-item-head">
+                    <span className="srs-section-item-dim">{item.dim}</span>
+                    <span className={`srs-section-item-badge ${item.priorityClass}`}>{item.priority}</span>
+                  </div>
+                  <div className="srs-section-item-text">{item.text}</div>
+                </div>
+              ))}
+            </div>
          </div>
        </div>
      </div>
@@ -787,7 +787,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
              </div>
            ) : inpaintResultImages.length && activeTool === "inpaint" ? (
              <div className="image-workbench-inpaint-stage">
-                <img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "90%", maxHeight: "90%", borderRadius: 8, objectFit: "contain" }} />
+                <img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "95%", maxHeight: "95%", borderRadius: 8, objectFit: "contain" }} />
                <div className="image-workbench-inpaint-bottom-bar">
                  <button type="button" className="image-workbench-inpaint-edit-btn" onClick={() => { setInpaintResultImages([]); setIsMaskEditing(true); setInpaintTool("brush"); setCanvasInitCounter((c) => c + 1); }}>
                    <HighlightOutlined /> 重新编辑遮罩
@@ -1284,12 +1284,16 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
              ))}
            </div>
          ) : referenceImage ? (
-            <img src={referenceImage} alt="参考图预览" />
+            <div className="studio-canvas-image">
+              <img src={referenceImage} alt="参考图预览" />
+            </div>
          ) : (
-            <div className="image-workbench-empty">
-              <PictureOutlined />
-              <strong>上传参考图后在此预览</strong>
-              <span>生成结果也会显示在这里</span>
+            <div className="studio-canvas-ghost">
+              <div className="studio-canvas-ghost__icon">
+                <PictureOutlined />
+              </div>
+              <div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
+              <div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
            </div>
          )}
        </section>
@@ -1,7 +1,10 @@
 import {
  CameraOutlined,
+  CheckOutlined,
  CheckCircleFilled,
+  CloseOutlined,
  DeleteOutlined,
+  EditOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
@@ -134,6 +137,48 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
  };
 }

+function formatProfileDate(value: string | null | undefined): string {
+  if (!value) return "刚刚";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "numeric",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function formatTaskType(type: WebGenerationPreviewTask["type"]): string {
+  const labels: Record<WebGenerationPreviewTask["type"], string> = {
+    image: "图像",
+    video: "视频",
+    agent: "智能体",
+    "digital-human": "数字人",
+    "character-mix": "角色融合",
+  };
+  return labels[type] || type;
+}
+
+function formatTaskStatus(status: WebGenerationPreviewTask["status"]): string {
+  const labels: Record<WebGenerationPreviewTask["status"], string> = {
+    queued: "排队中",
+    running: "生成中",
+    completed: "已完成",
+    failed: "失败",
+  };
+  return labels[status] || status;
+}
+
+function formatAssetStatus(status: string | undefined): string {
+  const normalized = String(status || "").toLowerCase();
+  if (normalized === "completed" || normalized === "ready" || normalized === "success") return "可用";
+  if (normalized === "running" || normalized === "processing") return "处理中";
+  if (normalized === "failed" || normalized === "error") return "失败";
+  return status || "资产";
+}
+
 function ProfilePage({
  session,
  usage,
@@ -187,6 +232,9 @@ function ProfilePage({
  const [profileNotice, setProfileNotice] = useState<string | null>(null);
  const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
  const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
+  const [isBioEditing, setIsBioEditing] = useState(false);
+  const [bioEditBackup, setBioEditBackup] = useState("");
+  const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
  const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));

  const completedTasks = tasks.filter((task) => task.status === "completed");
@@ -195,6 +243,9 @@ function ProfilePage({
  const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
  const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
  const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
+  const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
+  const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
+  const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);

  useEffect(() => {
    setLocalAvatarUrl(session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
@@ -525,8 +576,29 @@ function ProfilePage({
    void syncProfilePatch({ bio: nextBio || null });
  };

+  const startBioEdit = () => {
+    setBioEditBackup(profileBio);
+    setBioStatusNotice(null);
+    setIsBioEditing(true);
+  };
+
+  const confirmBioEdit = () => {
+    handleBioBlur();
+    setIsBioEditing(false);
+    setBioStatusNotice("个性签名已保存");
+  };
+
+  const cancelBioEdit = () => {
+    setProfileBio(bioEditBackup);
+    setIsBioEditing(false);
+    setBioStatusNotice(null);
+  };
+
  const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
    <div className="profile-page__empty-state">
+      <span className="profile-page__empty-mark" aria-hidden="true">
+        <PlusOutlined />
+      </span>
      <p className="profile-page__empty-text">{text}</p>
      <button type="button" className="profile-page__empty-btn" onClick={action}>
        <PlusOutlined />
@@ -538,20 +610,22 @@ function ProfilePage({
  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>{task.type}</span>
-              </div>
-              <p>{task.prompt}</p>
-              <div className="profile-page__list-card-meta">
-                <span>{task.status}</span>
-                <span>{task.createdAt}</span>
-              </div>
-            </article>
-          ))}
+        <div className="profile-page__works-scroll">
+          <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>
+                </div>
+              </article>
+            ))}
+          </div>
        </div>
      ) : (
        renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
@@ -565,7 +639,7 @@ function ProfilePage({
            <article key={project.id} className="profile-page__list-card">
              <div className="profile-page__list-card-head">
                <strong>{project.name}</strong>
-                <span>{project.updatedAt}</span>
+                <span>{formatProfileDate(project.updatedAt)}</span>
                {onDeleteProject ? (
                  <button
                    type="button"
@@ -597,12 +671,12 @@ function ProfilePage({
            <article key={asset.id} className="profile-page__list-card">
              <div className="profile-page__list-card-head">
                <strong>{asset.name}</strong>
-                <span>{asset.status}</span>
+                <span>{formatAssetStatus(asset.status)}</span>
              </div>
              <p>{asset.description}</p>
              <div className="profile-page__list-card-meta">
                <span>{asset.type}</span>
-                <span>{asset.updatedAt}</span>
+                <span>{formatProfileDate(asset.updatedAt)}</span>
              </div>
            </article>
          ))}
@@ -665,15 +739,39 @@ function ProfilePage({
                </span>
              </div>
              <strong className="profile-page__username">{displayName}</strong>
-              <textarea
-                className="profile-page__bio"
-                value={profileBio}
-                onChange={(event) => setProfileBio(event.target.value)}
-                onBlur={handleBioBlur}
-                placeholder={displayedBio}
-                rows={2}
-                maxLength={80}
-              />
+              {isBioEditing ? (
+                <div className="profile-page__bio-editor">
+                  <textarea
+                    className="profile-page__bio"
+                    value={profileBio}
+                    onChange={(event) => setProfileBio(event.target.value)}
+                    placeholder="填写一句个人签名"
+                    rows={2}
+                    maxLength={80}
+                    autoFocus
+                  />
+                  <div className="profile-page__bio-actions">
+                    <button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
+                      <CheckOutlined />
+                      保存
+                    </button>
+                    <button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
+                      <CloseOutlined />
+                      取消
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
+                  onClick={startBioEdit}
+                >
+                  <span>{displayedBio}</span>
+                  <EditOutlined className="profile-page__bio-edit-icon" />
+                </button>
+              )}
+              {bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
              {profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
            </div>

@@ -692,18 +790,21 @@ function ProfilePage({
              </div>
            </div>

-            <button type="button" className="profile-page__share-btn">
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
              <ShareAltOutlined />
              {packageLabel}
            </button>

-            <button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
+              <PlusOutlined />
              进入工作台
            </button>
-            <button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
+              <ShareAltOutlined />
              打开社区
            </button>
-            <button type="button" className="profile-page__share-btn" onClick={onLogout}>
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
+              <LockOutlined />
              退出登录
            </button>
          </aside>
@@ -759,13 +860,25 @@ function ProfilePage({
              <div className="profile-page__upload-card profile-page__upload-card--meta">
                {accountPanel === "credits" ? (
                  <>
-                    <span>当前账号：{displayName}</span>
-                    <span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
+                    <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>任务总数：{tasks.length}</span>
-                    <span>已完成：{completedTasks.length}</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>
@@ -784,12 +897,30 @@ function ProfilePage({
            <source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
          </video>
          <div className="auth-page__video-overlay">
-            <h1 className="auth-page__brand">OmniAI</h1>
-            <p className="auth-page__tagline">一句话，从创意到成片</p>
-            <div className="auth-page__features">
-              <span>AI 视频生成</span>
-              <span>AI 图片创作</span>
-              <span>AI 电商素材</span>
+            <div className="auth-page__showcase-content">
+              <div className="auth-page__brand-row">
+                <h1 className="auth-page__brand">OmniAI</h1>
+              </div>
+              <p className="auth-page__tagline">一句话，从创意到成片</p>
+              <div className="auth-page__features">
+                <span>AI 视频生成</span>
+                <span>AI 图片创作</span>
+                <span>AI 电商素材</span>
+              </div>
+              <div className="auth-page__showcase-stats" aria-label="平台能力">
+                <span>
+                  <strong>Studio</strong>
+                  创作工作台
+                </span>
+                <span>
+                  <strong>Assets</strong>
+                  资产沉淀
+                </span>
+                <span>
+                  <strong>Team</strong>
+                  团队协作
+                </span>
+              </div>
            </div>
          </div>
        </div>
@@ -840,7 +971,8 @@ function ProfilePage({
              <MailOutlined /> 邮箱
            </button>
            <button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}>
-              <MobileOutlined /> 手机验证码
+              <MobileOutlined />
+              <span className="auth-page__tab-label-short">手机</span>
            </button>
          </div>

@@ -920,6 +1052,11 @@ function ProfilePage({
                    autoComplete={mode === "login" ? "current-password" : "new-password"}
                  />
                  {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  {mode === "register" && passwordLooksReady && !fieldErrors.password ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 密码长度符合要求
+                    </span>
+                  ) : null}
                </label>
                {mode === "login" ? (
                  <div className="auth-page__forgot">
@@ -957,6 +1094,11 @@ function ProfilePage({
                    autoComplete="email"
                  />
                  {fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null}
+                  {emailLooksValid && !fieldErrors.email ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 邮箱格式正确
+                    </span>
+                  ) : null}
                </label>
                <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
                  <span>
@@ -971,6 +1113,11 @@ function ProfilePage({
                    autoComplete={mode === "login" ? "current-password" : "new-password"}
                  />
                  {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  {mode === "register" && passwordLooksReady && !fieldErrors.password ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 密码长度符合要求
+                    </span>
+                  ) : null}
                </label>
              </>
            ) : null}
@@ -986,6 +1133,11 @@ function ProfilePage({
                    <input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" />
                  </div>
                  {fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null}
+                  {phoneLooksValid && !fieldErrors.phone ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 手机号格式正确
+                    </span>
+                  ) : null}
                </label>
                <label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}>
                  <span>
@@ -1011,6 +1163,11 @@ function ProfilePage({
                    </span>
                    <input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" />
                    {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                    {passwordLooksReady && !fieldErrors.password ? (
+                      <span className="auth-page__field-hint">
+                        <CheckCircleFilled /> 密码长度符合要求
+                      </span>
+                    ) : null}
                  </label>
                ) : null}
              </>
@@ -1,8 +1,11 @@
 import {
+  BarChartOutlined,
  CheckCircleFilled,
  CopyOutlined,
  DownloadOutlined,
  FileTextOutlined,
+  LoadingOutlined,
+  ThunderboltOutlined,
  UploadOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
@@ -217,13 +220,6 @@ async function extractDocxText(bytes: Uint8Array): Promise<string> {
  }
  const textMatches = xmlText.match(/<w:t[^>]*>([\s\S]*?)<\/w:t>/g);
  if (!textMatches) return "";
-  const paragraphs: string[] = [];
-  let currentLine = "";
-  for (const match of textMatches) {
-    const content = match.replace(/<[^>]+>/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, "\"");
-    currentLine += content;
-  }
-  // Try to find paragraph breaks
  const paraMatches = xmlText.match(/<w:p[ >][\s\S]*?<\/w:p>/g);
  if (paraMatches) {
    return paraMatches.map((p) => {
@@ -232,7 +228,13 @@ async function extractDocxText(bytes: Uint8Array): Promise<string> {
      return tMatches.map((m) => m.replace(/<[^>]+>/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, "\"")).join("");
    }).filter(Boolean).join("\n").trim();
  }
-  return currentLine.trim();
+  return "";
+}
+
+function formatFileSize(size: number): string {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
 }

 const SCORE_DIMENSIONS: ScoreDimension[] = [
@@ -446,9 +448,10 @@ function ScriptTokensPage() {
  const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
  const scriptMinutes = Math.max(8, Math.round(script.length / 460));
  const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+  const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle";

  return (
-    <section className="script-eval-v5 page-motion">
+    <section className={`script-eval-v5 page-motion ${statusClass}`}>
      <div className="script-eval-v5-page">
        {/* Left Panel */}
        <aside className="script-eval-v5-left">
@@ -464,7 +467,10 @@ function ScriptTokensPage() {
              {uploadedFile ? (
                <div className="script-eval-v5-upload-done is-show">
                  <CheckCircleFilled />
-                  <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
+                  <span className="script-eval-v5-uf-meta">
+                    <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
+                    <span className="script-eval-v5-uf-size">{formatFileSize(uploadedFile.size)}</span>
+                  </span>
                  <span className="script-eval-v5-uf-re" onClick={(e) => { e.stopPropagation(); handleReset(); }}>
                    重新上传
                  </span>
@@ -474,7 +480,7 @@ function ScriptTokensPage() {
                  <div className="script-eval-v5-upload-icon"><UploadOutlined /></div>
                  <div className="script-eval-v5-upload-text">拖拽或点击上传</div>
                  <button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
-                    + 上传剧本
+                    <UploadOutlined /> 选择剧本
                  </button>
                  <div className="script-eval-v5-upload-hint">{TEXT_FILE_HINT}</div>
                </>
@@ -547,10 +553,12 @@ function ScriptTokensPage() {
              disabled={loading || !hasContent}
              onClick={() => void handleEvaluate()}
            >
-              {loading ? "◆ 评测中..." : "◆ 开始评测"}
+              {loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+              <span>{loading ? "评测中..." : "开始评测"}</span>
            </button>
            <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
-              导出评测报告
+              <DownloadOutlined />
+              <span>导出评测报告</span>
            </button>
          </div>
        </aside>
@@ -584,6 +592,11 @@ function ScriptTokensPage() {
                    <div className="page-loading-spinner" />
                    <strong>AI 正在分析剧本...</strong>
                    <p>正在调用模型进行六维评分，预计需要 15-30 秒</p>
+                    <div className="script-eval-v5-loading-steps" aria-hidden="true">
+                      <span>结构识别</span>
+                      <span>冲突评估</span>
+                      <span>商业潜力</span>
+                    </div>
                  </div>
                </div>
              </div>
@@ -670,13 +683,23 @@ function ScriptTokensPage() {
                        <span>0%</span>
                      </div>
                      <div className="script-eval-report__chart-grid">
-                        {SCORE_DIMENSIONS.map((dim) => {
+                        {SCORE_DIMENSIONS.map((dim, dimIndex) => {
                          const score = result.dimensionScores[dim.key] ?? 0;
                          const pct = Math.max(0, Math.min(1, score / dim.maxScore));
                          const lossPct = 1 - pct;
                          const isPerfect = score === dim.maxScore;
+                          const isActive = activeDim === null || activeDim === dimIndex;
                          return (
-                            <button key={dim.key} type="button" className="script-eval-report__bar-col">
+                            <button
+                              key={dim.key}
+                              type="button"
+                              className={`script-eval-report__bar-col${isActive ? "" : " is-dimmed"}`}
+                              onMouseEnter={() => setActiveDim(dimIndex)}
+                              onFocus={() => setActiveDim(dimIndex)}
+                              onMouseLeave={() => setActiveDim(null)}
+                              onBlur={() => setActiveDim(null)}
+                              aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`}
+                            >
                              <div className="script-eval-report__bar-score">
                                <b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null}
                              </div>
@@ -691,6 +714,14 @@ function ScriptTokensPage() {
                        })}
                      </div>
                    </div>
+                    <div className="script-eval-report__chart-note">
+                      <BarChartOutlined />
+                      <span>
+                        {activeDim === null
+                          ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。"
+                          : `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`}
+                      </span>
+                    </div>
                  </section>

                  <div className="script-eval-report__findings">
@@ -222,22 +222,35 @@ function TokenUsagePage({
    { label: "账户类型", value: isEnterpriseAccount ? "企业账户" : "个人账户", tone: "good" },
    { label: "企业空间", value: enterpriseUsage?.enterpriseName || session?.user.enterpriseName || "-" },
  ];
+  const pageStatusClass = enterpriseUsageLoading
+    ? "is-syncing"
+    : enterpriseUsageError
+      ? "has-sync-error"
+      : isLowBalance
+        ? "has-low-balance"
+        : "is-healthy";

  return (
-    <section className="script-token-page token-usage-page management-center-page" aria-label="管理中心">
+    <section className={`script-token-page token-usage-page management-center-page ${pageStatusClass}`} aria-label="管理中心">
      <main className="management-center-shell">
        <header className="management-center-toolbar" aria-label="管理中心操作">
          <div className="management-center-toolbar__title">
            <button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}>
              <ArrowLeftOutlined />
            </button>
-            <strong>管理中心</strong>
+            <span>
+              <strong>管理中心</strong>
+              <small>用量、成员与模型调用监控</small>
+            </span>
          </div>
-          <button type="button" onClick={refreshEnterpriseUsage}>
+          <span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}>
+            {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
+          </span>
+          <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
            <ReloadOutlined />
            刷新数据
          </button>
-          <button type="button">
+          <button type="button" className="is-muted-action">
            <UserOutlined />
            成员管理
          </button>
@@ -251,8 +264,9 @@ function TokenUsagePage({
        ) : null}

        <section className="management-metric-cards" aria-label="关键指标">
-          {metricCards.map((card) => (
+          {metricCards.map((card, index) => (
            <article key={card.key} className={`management-metric-card is-${card.tone}`}>
+              <span className="management-metric-card__index">{String(index + 1).padStart(2, "0")}</span>
              <span className="management-metric-card__label">{card.label}</span>
              <strong className="management-metric-card__value">{card.value}</strong>
              <span className="management-metric-card__hint">{card.hint}</span>
@@ -267,7 +281,7 @@ function TokenUsagePage({
                <BarChartOutlined />
                模型消耗分布
              </h2>
-              <span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
+              <span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
            </div>
            {modelBreakdown.length ? (
              <div className="management-model-list">
@@ -294,7 +308,10 @@ function TokenUsagePage({

          <article className="management-card management-status-card">
            <div className="management-card__head">
-              <h2>系统状态</h2>
+              <h2>
+                <LineChartOutlined />
+                系统状态
+              </h2>
            </div>
            <dl>
              {systemStatus.map((item) => (
@@ -348,7 +365,10 @@ function TokenUsagePage({

        <section className="management-card management-records">
          <div className="management-card__head">
-            <h2>调用记录</h2>
+            <h2>
+              <BarChartOutlined />
+              调用记录
+            </h2>
            <span>{records.length} 条记录</span>
          </div>
          <div className="management-record-table" role="table" aria-label="调用记录">
@@ -356,13 +356,13 @@ function WatermarkRemovalPage({
            </p>
          </section>

-          <div className="image-workbench-actions">
+          <div className="image-workbench-actions watermark-removal-actions">
            <button type="button" className="image-workbench-primary" onClick={() => void handleStart()} disabled={isProcessing}>
              <DeleteOutlined />
-              {isProcessing ? "处理中" : "开始去水印"}
+              {isProcessing ? "处理中..." : "开始去水印"}
            </button>
            {isProcessing && (
-              <button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel}>
                取消
              </button>
            )}