feat: 图片工作台/镜头实验室/局部重绘/数字人/去水印页面UI优化

feat: 个人中心侧边栏显示、代表作滚动、图片工作台预览样式、首页轮播尺寸调整
feat: 首页功能页样式与组件更新
2026-06-03 20:36:07 +08:00 · 2026-06-03 19:15:45 +08:00 · 2026-06-03 17:28:44 +08:00
26 changed files with 3553 additions and 8108 deletions
@@ -73,7 +73,7 @@ function AppShell({
  const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
  const isAuthView = activeView === "login";
  const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
-  const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
+  const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
  const toolSurfaceViews = [
    "workbench",
    "canvas",
@@ -88,7 +88,7 @@ function AppShell({
    "avatarConsole",
    "characterMix",
  ] as WebViewKey[];
-  const showPageScrollActions = false;
+  const showPageScrollActions = showFloatingNav && !toolSurfaceViews.includes(activeView);

  const visibleNavItems = useMemo(
    () => {
@@ -26,6 +26,7 @@
  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";
@@ -3541,8 +3542,7 @@ function CanvasPage({
          onMouseMove={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasMouseMove}
          onWheel={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasWheel}
          style={{
-            "--canvas-bg-size": `${34 * canvasViewport.zoom}px`,
-            "--canvas-bg-dot": `${1.35 * canvasViewport.zoom}px`,
+            "--canvas-bg-size": `${24 * canvasViewport.zoom}px`,
            "--canvas-bg-x": `${canvasViewport.x}px`,
            "--canvas-bg-y": `${canvasViewport.y}px`,
            cursor: canvasPanDrag ? "grabbing" : spacePanning ? "grab" : undefined,
@@ -3727,7 +3727,9 @@ 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}>
@@ -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>
@@ -523,12 +523,6 @@ const formatUploadedImageRatio = (image?: CloneImageItem) => {
  if (!image.width || !image.height) return `上传图片\u00a0\u00a0\u00a0原图比例${format}`;
  return `上传图片 ${image.width}×${image.height}px\u00a0\u00a0\u00a0${formatAspectRatio(image.width, image.height)}${format}`;
 };
-const formatProductImageSpec = (image?: CloneImageItem | null) => {
-  if (!image) return "等待上传";
-  const format = image.format ? ` · ${image.format}` : "";
-  if (!image.width || !image.height) return `正在识别尺寸${format}`;
-  return `${image.width}×${image.height}px · ${formatAspectRatio(image.width, image.height)}${format}`;
-};
 const defaultMarketLanguageOption = marketLanguageOptions[0]!;
 const normalizeMarket = (value: string) =>
  marketLanguageOptions.some((option) => option.country === value) ? value : defaultMarketLanguageOption.country;
@@ -784,7 +778,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
  const [showHostingModal, setShowHostingModal] = useState(false);
  const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
-  const [selectedProductImageId, setSelectedProductImageId] = useState<string | null>(null);
  const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
  const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>("detail");
  const [openCloneBasicSelect, setOpenCloneBasicSelect] = useState<CloneBasicSelectKey | null>(null);
@@ -869,13 +862,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const selectedProductSetOutput =
    productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
  const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
-  const selectedProductImage = productImages.find((image) => image.id === selectedProductImageId) ?? productImages[0] ?? null;
-  const selectedProductImageIndex = selectedProductImage
-    ? productImages.findIndex((image) => image.id === selectedProductImage.id)
-    : -1;
-  const selectedProductImageLabel = selectedProductImageIndex >= 0 ? `商品图 ${selectedProductImageIndex + 1}` : "商品图";
-  const selectedProductImageSpec = formatProductImageSpec(selectedProductImage);
-  const isProductImageLimitReached = productImages.length >= maxCloneProductImages;
  const productSetPreviewReady = productSetStatus === "done";
  const cloneSetTotal = Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0);
  const canGenerateSet = setImages.length > 0 && productSetStatus !== "generating";
@@ -904,30 +890,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    });
  };

-  useEffect(() => {
-    if (!productImages.length) {
-      if (selectedProductImageId !== null) setSelectedProductImageId(null);
-      return;
-    }
-    if (!selectedProductImageId || !productImages.some((image) => image.id === selectedProductImageId)) {
-      setSelectedProductImageId(productImages[0].id);
-    }
-  }, [productImages, selectedProductImageId]);
-
-  useEffect(() => {
-    productImages
-      .filter((item) => !item.width || !item.height)
-      .forEach((item) => {
-        readImageDimensions(item.src)
-          .then(({ width, height }) => {
-            setProductImages((current) =>
-              current.map((currentItem) => (currentItem.id === item.id ? { ...currentItem, width, height } : currentItem)),
-            );
-          })
-          .catch(() => undefined);
-      });
-  }, [productImages]);
-
  const addSetImages = (files: File[]) => {
    if (setImages.length >= 3) return;
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
@@ -983,7 +945,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const handleProductDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsProductUploadDragging(false);
-    if (isProductImageLimitReached) return;
    const files = Array.from(event.dataTransfer.files);
    if (files.length) addProductImages(files);
  };
@@ -1854,7 +1815,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    setSelectedProductSetPreview(null);
    setShowHostingModal(false);
    setProductImages([]);
-    setSelectedProductImageId(null);
    setIsProductUploadDragging(false);
    setCloneOutput("detail");
    setRatio((current) => normalizeRatioForPlatform(platform, current, "detail"));
@@ -2101,24 +2061,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          </h2>
          <div
            role="button"
-            tabIndex={isProductImageLimitReached ? -1 : 0}
-            aria-disabled={isProductImageLimitReached}
-            className={`clone-ai-upload-zone${isProductUploadDragging ? " is-dragging" : ""}${isProductImageLimitReached ? " is-full" : ""}`}
-            onClick={() => {
-              if (isProductImageLimitReached) return;
-              productInputRef.current?.click();
-            }}
+            tabIndex={0}
+            className={`clone-ai-upload-zone${isProductUploadDragging ? " is-dragging" : ""}`}
+            onClick={() => productInputRef.current?.click()}
            onKeyDown={(event) => {
              if (event.target !== event.currentTarget) return;
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
-                if (isProductImageLimitReached) return;
                productInputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
-              if (isProductImageLimitReached) return;
              setIsProductUploadDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
@@ -2131,68 +2085,35 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
              </span>
              <span className="clone-ai-upload-title">拖拽或点击上传</span>
              <strong>
-                {isProductImageLimitReached ? (
-                  "已达上限"
-                ) : (
-                  <>
                <span aria-hidden="true">+</span>
                上传图片
-                  </>
-                )}
              </strong>
              <span className="clone-ai-upload-hint">同一产品，最多 7 张</span>
            </div>
            {productImages.length ? (
-              <div className="clone-ai-upload-preview-wrap" onClick={(event) => event.stopPropagation()} aria-live="polite">
-                <div className="clone-ai-upload-preview">
-                  <img src={selectedProductImage?.src ?? productImages[0].src} alt={`当前预览：${selectedProductImageLabel}`} />
-                </div>
-                <div className="clone-ai-upload-preview__meta">
-                  <span>
-                    <b>{selectedProductImageLabel}</b>
-                    <em title={selectedProductImage?.name ?? productImages[0].name}>{selectedProductImageSpec}</em>
-                  </span>
-                </div>
-              </div>
-            ) : null}
-            {productImages.length ? (
-              <div className="clone-ai-uploaded-stack">
-                <div className="clone-ai-uploaded-head">
-                  <span>已上传素材</span>
-                  <b>{productImages.length}/{maxCloneProductImages}</b>
-                </div>
              <div className="clone-ai-uploaded-files" aria-label="已上传商品原图">
-                  {productImages.map((item, index) => (
-                    <figure key={item.id} className={`clone-ai-uploaded-file${item.id === selectedProductImage?.id ? " is-active" : ""}`}>
-                      <button
-                        type="button"
-                        className="clone-ai-uploaded-file__thumb"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          setSelectedProductImageId(item.id);
-                        }}
-                        aria-label={`预览商品图 ${index + 1}`}
-                      >
-                        <img src={item.src} alt={`商品图 ${index + 1}`} />
-                        <span>{index + 1}</span>
-                      </button>
+                {productImages.map((item) => (
+                  <figure key={item.id} className="clone-ai-uploaded-file">
+                    <img src={item.src} alt={item.name} />
+                    <span className="uploaded-image-zoom" aria-hidden="true">
+                      <img src={item.src} alt="" />
+                    </span>
                    <button
                      type="button"
                      onClick={(event) => {
                        event.stopPropagation();
                        removeProductImage(item.id);
                      }}
-                        aria-label={`删除商品图 ${index + 1}`}
+                      aria-label={`删除${item.name}`}
                    >
                      <CloseOutlined />
                    </button>
                  </figure>
                ))}
              </div>
-              </div>
            ) : null}
          </div>
-          <input ref={productInputRef} type="file" accept="image/*" multiple disabled={isProductImageLimitReached} onChange={handleProductUpload} />
+          <input ref={productInputRef} type="file" accept="image/*" multiple onChange={handleProductUpload} />
        </section>

        <section className="clone-ai-card">
@@ -2952,13 +2873,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        <span>
          上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
        </span>
-        <div className="clone-ai-preview-summary" aria-label="当前生成配置">
-          <span>{selectedCloneOutput.label}</span>
-          <span>{platform}</span>
-          <span>{market}</span>
-          <span>{language}</span>
-          <span>{formatRatioDisplayValue(ratio)}</span>
-        </div>
      </header>

      {status === "done" ? (
@@ -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,40 +215,255 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
  } as CSSProperties;
 }

-function EcommerceFeatureShowcase() {
+function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) {
+  if (card.kind === "model") {
    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-model">
+        <div className="silhouette" />
+        <div className={`mock-product-hold ${card.color}`} />
      </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>
+  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="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>
+  );
+}
+
+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 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>
-          </article>
+              </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>
+            <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,6 +638,7 @@ 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" : ""}`}>
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
              <div className="omni-home__feature-copy">
                <span>
                  {feature.icon}
@@ -379,7 +651,8 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
                  <ArrowRightOutlined />
                </button>
              </div>
-            <div className="omni-home__feature-visual" aria-hidden="true">
+            ) : 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>
+            {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,6 +85,34 @@ function ScriptReviewShowcase() {

  return (
    <div className="omni-script-review-showcase" id="script-review-showcase">
+      <div className="srs-left-panel">
+        <div className="srs-brand-section">
+          <h1>剧本智能测评</h1>
+          <p>用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。</p>
+        </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>
+
+      <div className="srs-results-panel">
        {/* Score Hero */}
        <div className="srs-score-hero">
          <div className="srs-score-left">
@@ -202,6 +236,7 @@ function ScriptReviewShowcase() {
          </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 ? (
+            <div className="studio-canvas-image">
              <img src={referenceImage} alt="参考图预览" />
+            </div>
          ) : (
-            <div className="image-workbench-empty">
+            <div className="studio-canvas-ghost">
+              <div className="studio-canvas-ghost__icon">
                <PictureOutlined />
-              <strong>上传参考图后在此预览</strong>
-              <span>生成结果也会显示在这里</span>
+              </div>
+              <div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
+              <div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
            </div>
          )}
        </section>
@@ -1,17 +1,11 @@
 import {
  CameraOutlined,
-  CheckOutlined,
  CheckCircleFilled,
-  CloseOutlined,
  DeleteOutlined,
-  EditOutlined,
-  FileImageOutlined,
-  FolderOpenOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
  PhoneOutlined,
-  PlayCircleOutlined,
  PlusOutlined,
  SafetyOutlined,
  ShareAltOutlined,
@@ -140,61 +134,6 @@ 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 formatAssetType(type: SavedAssetItem["type"]): string {
-  const labels: Record<string, string> = {
-    character: "角色",
-    scene: "场景",
-    prop: "道具",
-    video: "视频",
-    image: "图像",
-    asset: "资产",
-    other: "素材",
-  };
-  return labels[type] || "素材";
-}
-
 function ProfilePage({
  session,
  usage,
@@ -240,9 +179,6 @@ 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");
@@ -251,9 +187,6 @@ 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"));
@@ -512,29 +445,8 @@ 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 />
@@ -543,52 +455,26 @@ 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__works-scroll">
          <div className="profile-page__list-grid motion-stagger">
            {visibleWorks.map((task) => (
-            <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">
+              <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>{formatTaskStatus(task.status)}</span>
-                  <span>{formatProfileDate(task.createdAt)}</span>
-                </div>
+                  <span>{task.status}</span>
+                  <span>{task.createdAt}</span>
                </div>
              </article>
            ))}
          </div>
+        </div>
      ) : (
        renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
      );
@@ -598,11 +484,10 @@ 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 profile-page__media-card">
-              {renderCardPreview(project.thumbnailUrl, "project", "项目")}
-              <div className="profile-page__list-card-body">
+            <article key={project.id} className="profile-page__list-card">
              <div className="profile-page__list-card-head">
                <strong>{project.name}</strong>
+                <span>{project.updatedAt}</span>
                {onDeleteProject ? (
                  <button
                    type="button"
@@ -617,8 +502,7 @@ function ProfilePage({
              <p>{project.description || "最近更新的项目"}</p>
              <div className="profile-page__list-card-meta">
                <span>{project.storyboardCount} 节点</span>
-                  <span>{formatProfileDate(project.updatedAt)}</span>
-                </div>
+                <span>{project.imageCount} 图 / {project.videoCount} 视频</span>
              </div>
            </article>
          ))}
@@ -632,18 +516,15 @@ function ProfilePage({
      return savedAssets.length ? (
        <div className="profile-page__list-grid">
          {savedAssets.map((asset) => (
-            <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">
+            <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>
+                <span>{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>
+                <span>{asset.type}</span>
+                <span>{asset.updatedAt}</span>
              </div>
            </article>
          ))}
@@ -706,39 +587,15 @@ function ProfilePage({
                </span>
              </div>
              <strong className="profile-page__username">{displayName}</strong>
-              {isBioEditing ? (
-                <div className="profile-page__bio-editor">
              <textarea
                className="profile-page__bio"
                value={profileBio}
                onChange={(event) => setProfileBio(event.target.value)}
-                    placeholder="填写一句个人签名"
+                onBlur={handleBioBlur}
+                placeholder={displayedBio}
                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>

@@ -757,65 +614,18 @@ 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">
+            <button type="button" className="profile-page__share-btn">
              <ShareAltOutlined />
              {packageLabel}
            </button>

-            <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
-              <PlusOutlined />
+            <button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
              进入工作台
            </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
-              <ShareAltOutlined />
+            <button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
              打开社区
            </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
-              <LockOutlined />
+            <button type="button" className="profile-page__share-btn" onClick={onLogout}>
              退出登录
            </button>
          </aside>
@@ -848,6 +658,40 @@ 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>当前账号：{displayName}</span>
+                    <span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
+                  </>
+                ) : (
+                  <>
+                    <span>任务总数：{tasks.length}</span>
+                    <span>已完成：{completedTasks.length}</span>
+                  </>
+                )}
+              </div>
+            </div>
          </main>
        </div>
      </section>
@@ -862,31 +706,13 @@ function ProfilePage({
            <source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
          </video>
          <div className="auth-page__video-overlay">
-            <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>
      </div>
@@ -936,8 +762,7 @@ function ProfilePage({
              <MailOutlined /> 邮箱
            </button>
            <button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}>
-              <MobileOutlined />
-              <span className="auth-page__tab-label-short">手机</span>
+              <MobileOutlined /> 手机验证码
            </button>
          </div>

@@ -993,11 +818,6 @@ 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">
@@ -1035,11 +855,6 @@ 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>
@@ -1054,11 +869,6 @@ 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}
@@ -1074,11 +884,6 @@ 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>
@@ -1104,11 +909,6 @@ 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,11 +1,8 @@
 import {
-  BarChartOutlined,
  CheckCircleFilled,
  CopyOutlined,
  DownloadOutlined,
  FileTextOutlined,
-  LoadingOutlined,
-  ThunderboltOutlined,
  UploadOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
@@ -171,12 +168,6 @@ function normalizeUploadedText(raw: string, ext: string): string {
  return raw;
 }

-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[] = [
  { key: "hook", label: "钩子设计", maxScore: 20, hint: "开篇吸引力·悬念设置·黄金三秒", detail: "开篇即抛出高概念钩子，悬念设置紧凑有力。" },
  { key: "character", label: "角色塑造", maxScore: 15, hint: "人物立体度·动机合理性·弧光设计", detail: "主角动机有铺垫，配角功能性较强，人物弧光尚可进一步深化。" },
@@ -355,14 +346,12 @@ 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 ${statusClass}`}>
+    <section className="script-eval-v5 page-motion">
      <div className="script-eval-v5-page">
        {/* Left Panel */}
        <aside className="script-eval-v5-left">
-          <div className="script-eval-v5-left-main">
          <div className="script-eval-v5-lp-section">
            <div className="script-eval-v5-lp-label">上传剧本</div>
            <div
@@ -375,10 +364,7 @@ function ScriptTokensPage() {
              {uploadedFile ? (
                <div className="script-eval-v5-upload-done is-show">
                  <CheckCircleFilled />
-                    <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>
@@ -388,7 +374,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>
                </>
@@ -459,15 +445,12 @@ function ScriptTokensPage() {
              disabled={loading || !hasContent}
              onClick={() => void handleEvaluate()}
            >
-                {loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
-                <span>{loading ? "评测中..." : "开始评测"}</span>
+              {loading ? "◆ 评测中..." : "◆ 开始评测"}
            </button>
            <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
-                <DownloadOutlined />
-                <span>导出评测报告</span>
+              导出评测报告
            </button>
          </div>
-          </div>
        </aside>

        {/* Right Area */}
@@ -499,11 +482,6 @@ 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>
@@ -590,23 +568,13 @@ function ScriptTokensPage() {
                        <span>0%</span>
                      </div>
                      <div className="script-eval-report__chart-grid">
-                        {SCORE_DIMENSIONS.map((dim, dimIndex) => {
+                        {SCORE_DIMENSIONS.map((dim) => {
                          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${isActive ? "" : " is-dimmed"}`}
-                              onMouseEnter={() => setActiveDim(dimIndex)}
-                              onFocus={() => setActiveDim(dimIndex)}
-                              onMouseLeave={() => setActiveDim(null)}
-                              onBlur={() => setActiveDim(null)}
-                              aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`}
-                            >
+                            <button key={dim.key} type="button" className="script-eval-report__bar-col">
                              <div className="script-eval-report__bar-score">
                                <b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null}
                              </div>
@@ -621,14 +589,6 @@ 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">
@@ -230,35 +230,25 @@ 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 ${pageStatusClass}`} aria-label="管理中心">
+    <section className="script-token-page token-usage-page management-center-page" 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>
-            <span>
            <strong>管理中心</strong>
-              <small>用量、成员与模型调用监控</small>
-            </span>
          </div>
-          <span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}>
+          <span className="management-center-status-pill">
            {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
          </span>
-          <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
+          <button type="button" onClick={refreshEnterpriseUsage}>
            <ReloadOutlined />
            刷新数据
          </button>
-          <button type="button" className="is-muted-action">
+          <button type="button">
            <UserOutlined />
            成员管理
          </button>
@@ -293,7 +283,7 @@ function TokenUsagePage({
                <BarChartOutlined />
                模型消耗分布
              </h2>
-              <span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
+              <span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
            </div>
            {modelBreakdown.length ? (
              <div className="management-model-list">
@@ -320,10 +310,7 @@ function TokenUsagePage({

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

        <section className="management-card management-records">
          <div className="management-card__head">
-            <h2>
-              <BarChartOutlined />
-              调用记录
-            </h2>
+            <h2>调用记录</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>
            )}
@@ -236,7 +236,6 @@ function WorkbenchPage({
  const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks());
  const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map());
  const lastScrollTopRef = useRef(0);
-  const scrollActionsHideTimerRef = useRef<number | null>(null);
  const shouldFollowNewMessagesRef = useRef(true);
  const pendingScrollToLatestRef = useRef(true);
  const renderedMessageIdsRef = useRef<string[]>([]);
@@ -274,8 +273,6 @@ function WorkbenchPage({
  const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
  const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
  const [composerHidden, setComposerHidden] = useState(false);
-  const [scrollActionsVisible, setScrollActionsVisible] = useState(false);
-  const [scrollActionDirection, setScrollActionDirection] = useState<"top" | "bottom" | null>(null);
  const [workspaceStarted, setWorkspaceStarted] = useState(false);

  useEffect(() => {
@@ -444,27 +441,6 @@ function WorkbenchPage({
    "--accent-glow": `0 0 24px rgba(${accentRgb}, 0.22)`,
  } as CSSProperties;

-  const revealScrollActionsTemporarily = useCallback((direction: "top" | "bottom") => {
-    setScrollActionDirection(direction);
-    setScrollActionsVisible(true);
-    if (scrollActionsHideTimerRef.current !== null) {
-      window.clearTimeout(scrollActionsHideTimerRef.current);
-    }
-    scrollActionsHideTimerRef.current = window.setTimeout(() => {
-      setScrollActionsVisible(false);
-      setScrollActionDirection(null);
-      scrollActionsHideTimerRef.current = null;
-    }, 950);
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (scrollActionsHideTimerRef.current !== null) {
-        window.clearTimeout(scrollActionsHideTimerRef.current);
-      }
-    };
-  }, []);
-
  const scrollMessagesToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
    const scroll = () => {
      const surface = messagesSurfaceRef.current;
@@ -475,7 +451,6 @@ function WorkbenchPage({

      setComposerHidden(false);
      shouldFollowNewMessagesRef.current = true;
-      revealScrollActionsTemporarily("bottom");
      surface.scrollTo({ top: surface.scrollHeight, behavior });
      lastScrollTopRef.current = surface.scrollTop;
    };
@@ -484,7 +459,7 @@ function WorkbenchPage({
      scroll();
      window.setTimeout(scroll, 80);
    });
-  }, [revealScrollActionsTemporarily]);
+  }, []);

  const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
    () => [
@@ -1398,9 +1373,6 @@ function WorkbenchPage({
      const delta = top - lastScrollTopRef.current;
      const atTop = top <= edgeThreshold;
      const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
-      if (surface.scrollHeight > surface.clientHeight + edgeThreshold && Math.abs(delta) > 1) {
-        revealScrollActionsTemporarily(delta > 0 ? "bottom" : "top");
-      }
      shouldFollowNewMessagesRef.current = atBottom;
      if (atTop || atBottom) {
        setComposerHidden(false);
@@ -1412,7 +1384,7 @@ function WorkbenchPage({

    surface.addEventListener("scroll", handleScroll, { passive: true });
    return () => surface.removeEventListener("scroll", handleScroll);
-  }, [hasActivatedWorkspace, revealScrollActionsTemporarily]);
+  }, [hasActivatedWorkspace]);

  const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
    const surface = messagesSurfaceRef.current;
@@ -1420,9 +1392,8 @@ function WorkbenchPage({

    const top = direction === "top" ? 0 : surface.scrollHeight;
    setComposerHidden(false);
-    revealScrollActionsTemporarily(direction);
    surface.scrollTo({ top, behavior: "smooth" });
-  }, [revealScrollActionsTemporarily]);
+  }, []);

  const closeToolbarMenus = () => setToolbarMenuId(null);
  const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => {
@@ -3051,13 +3022,10 @@ function WorkbenchPage({
                {renderComposerToolbar(false, isGenerating)}
              </div>
            </section>
-            <div
-              className={`wb-chat-scroll-actions${scrollActionsVisible ? " is-visible" : ""}${scrollActionDirection ? ` is-${scrollActionDirection}` : ""}`}
-              aria-label="聊天滚动"
-            >
+            <div className="wb-chat-scroll-actions" aria-label="聊天滚动">
              <button
                type="button"
-                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top"
+                className="wb-chat-scroll-actions__button"
                title="返回聊天顶部"
                aria-label="返回聊天顶部"
                onClick={() => scrollMessagesSurface("top")}
@@ -3066,7 +3034,7 @@ function WorkbenchPage({
              </button>
              <button
                type="button"
-                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom"
+                className="wb-chat-scroll-actions__button"
                title="到达聊天底部"
                aria-label="到达聊天底部"
                onClick={() => scrollMessagesSurface("bottom")}
@@ -3,24 +3,6 @@ import type { ReactNode } from "react";
 import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
 import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";

-const VIDEO_MODEL_ICON_URLS = {
-  happyHorse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/HappyHorse.svg",
-  pixverse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/Pixverse.svg",
-  vidu: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/viduQ3.svg",
-  wanxiang: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/wan.svg",
-  kling: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/kling.svg",
-} as const;
-
-function getVideoModelIconUrl(option: WorkbenchOption): string | null {
-  const text = `${option.value} ${option.label}`.toLowerCase();
-  if (text.includes("happyhorse")) return VIDEO_MODEL_ICON_URLS.happyHorse;
-  if (text.includes("pixverse")) return VIDEO_MODEL_ICON_URLS.pixverse;
-  if (text.includes("vidu")) return VIDEO_MODEL_ICON_URLS.vidu;
-  if (text.includes("wan") || text.includes("万相")) return VIDEO_MODEL_ICON_URLS.wanxiang;
-  if (text.includes("kling") || text.includes("可灵")) return VIDEO_MODEL_ICON_URLS.kling;
-  return null;
-}
-
 export function SelectChip({
  chipId,
  value,
@@ -74,7 +56,6 @@ export function SelectChip({
        >
          {options.map((option, index) => {
            const active = option.value === value;
-            const iconUrl = chipId === "video-model" ? getVideoModelIconUrl(option) : null;
            return (
              <button
                key={option.value}
@@ -90,11 +71,6 @@ export function SelectChip({
              >
                <span className="ai-workbench-select-chip__option-label">
                  <span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
-                  {iconUrl ? (
-                    <span className="ai-workbench-select-chip__option-icon" aria-hidden="true">
-                      <img src={iconUrl} alt="" loading="lazy" />
-                    </span>
-                  ) : null}
                  <span className="ai-workbench-select-chip__option-copy">
                    <span className="ai-workbench-select-chip__option-title">
                      <span>{option.label}</span>
@@ -50,7 +50,7 @@
 }

 .ecom-video-flowbar__pulse.is-active {
-  background: #34d399;
+  background: #00ff88;
 }

 .ecom-video-flowbar__wave {
@@ -97,7 +97,7 @@
 }

 .ecom-video-step-dot.is-done {
-  background: #34d399;
+  background: #00ff88;
 }

 .ecom-video-step-dot.is-active {
@@ -139,7 +139,7 @@
  place-items: center;
  border: 1px solid #1c4d3a;
  border-radius: 8px;
-  background: #34d399;
+  background: #00ff88;
  color: #06110e;
  padding: 0;
  font-size: 17px;
@@ -213,7 +213,7 @@
 }

 .ecom-video-flow-lines path.is-active {
-  stroke: #34d399;
+  stroke: #00ff88;
  animation: ecom-video-path-dash 1.8s linear infinite;
 }

@@ -319,7 +319,7 @@

 .ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
 .ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
-  background: #34d399;
+  background: #00ff88;
 }

 .ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
@@ -390,7 +390,7 @@
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
-  background: #34d399;
+  background: #00ff88;
 }

 .ecom-video-flow-connector.is-active i,
@@ -541,7 +541,7 @@
  place-items: center;
  border-radius: 999px;
  background: #1c4d3a;
-  color: #34d399;
+  color: #00ff88;
  font-size: 12px;
  font-weight: 900;
 }
@@ -563,7 +563,10 @@ textarea.image-workbench-prompt {
  align-items: center;
  justify-content: center;
  overflow: hidden;
-  background: var(--bg-inset);
+  background:
+    radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1.4px),
+    var(--bg-inset);
+  background-size: 22px 22px;
 }

 .image-workbench-canvas img {
@@ -592,6 +595,7 @@ textarea.image-workbench-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
+  justify-content: center;
  gap: 8px;
  color: var(--fg-dim);
  font-size: 14px;
@@ -625,16 +629,24 @@ textarea.image-workbench-prompt {
  height: 100%;
 }

+.image-workbench-camera-stage {
+  flex-direction: column;
+  gap: 16px;
+}
+
 .image-workbench-inpaint-stage img,
 .image-workbench-camera-stage img {
-  max-width: 90%;
-  max-height: 90%;
+  max-width: 95%;
+  max-height: 95%;
  border-radius: 8px;
  object-fit: contain;
 }

-.image-workbench-inpaint-stage > span,
-.image-workbench-camera-stage > span {
+.image-workbench-camera-stage img {
+  max-height: 68%;
+}
+
+.image-workbench-inpaint-stage > span {
  position: absolute;
  bottom: 12px;
  left: 50%;
@@ -647,6 +659,15 @@ textarea.image-workbench-prompt {
  white-space: nowrap;
 }

+.image-workbench-camera-stage > span {
+  padding: 4px 12px;
+  border-radius: var(--radius-xs);
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
 /* Inpaint mask canvas */
 .image-workbench-inpaint-canvas {
  display: block;
@@ -689,16 +710,8 @@ textarea.image-workbench-prompt {
  color: #fff;
 }

-.image-workbench-camera-stage > span {
-  bottom: 64px;
-}
-
 .image-workbench-camera-stage > .image-workbench-result-actions {
-  position: absolute;
-  bottom: 16px;
-  left: 50%;
  width: min(360px, calc(100% - 32px));
-  transform: translateX(-50%);
 }

 .image-workbench-inpaint-tool.is-active {
@@ -809,7 +822,7 @@ textarea.image-workbench-prompt {
  text-align: center;
 }

-.image-workbench-result-grid {
+.image-workbench-panel--right .image-workbench-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
@@ -1467,6 +1480,27 @@ textarea.image-workbench-prompt {
  margin: 0;
 }

+.watermark-removal-actions {
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 0 0;
+}
+
+.watermark-removal-actions .image-workbench-primary {
+  width: 100%;
+  min-height: 48px;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 750;
+}
+
+.watermark-removal-actions .image-workbench-cancel {
+  width: 100%;
+  min-height: 42px;
+  justify-content: center;
+  font-size: 13px;
+}
+
 .watermark-removal-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
@@ -1519,34 +1553,42 @@ textarea.image-workbench-prompt {

 .watermark-removal-compare__actions {
  position: absolute;
-  bottom: 10px;
+  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  width: min(480px, calc(100% - 32px));
 }

 .watermark-removal-compare__actions button {
  display: inline-flex;
  align-items: center;
-  gap: 4px;
-  padding: 5px 12px;
-  border: none;
+  justify-content: center;
+  gap: 10px;
+  min-height: 64px;
+  padding: 0 24px;
+  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  font-size: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 18px;
+  font-weight: 750;
  cursor: pointer;
-  backdrop-filter: blur(4px);
-  transition: background 0.15s;
+  backdrop-filter: none;
+  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
 }

 .watermark-removal-compare__actions button:hover:not(:disabled) {
-  background: rgba(0, 0, 0, 0.8);
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: rgba(var(--accent-rgb), 0.11);
+  color: var(--accent);
 }

 .watermark-removal-compare__actions button:disabled {
-  opacity: 0.5;
+  opacity: 0.56;
  cursor: not-allowed;
 }

@@ -1563,33 +1605,33 @@ textarea.image-workbench-prompt {
 }

 .image-workbench-generating strong {
-  font-size: 15px;
+  font-size: 20px;
  color: var(--fg-default);
 }

 .image-workbench-progress-bar {
-  width: 200px;
-  height: 6px;
-  border-radius: 3px;
+  width: 320px;
+  height: 8px;
+  border-radius: 4px;
  background: var(--bg-inset);
  overflow: hidden;
 }

 .image-workbench-progress-fill {
  height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
  background: var(--accent);
  transition: width 0.3s ease;
 }

 .image-workbench-cancel {
-  margin-top: 8px;
-  padding: 6px 16px;
+  margin-top: 12px;
+  padding: 8px 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--fg-muted);
-  font-size: 13px;
+  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
 }
@@ -1600,14 +1642,17 @@ textarea.image-workbench-prompt {
 }

 .image-workbench-result-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
  width: 100%;
  height: 100%;
-  padding: 16px;
+  margin: 0;
+  padding: 24px;
  overflow-y: auto;
-  align-content: start;
+  gap: 16px;
 }

 .image-workbench-result-item {
@@ -1634,8 +1679,9 @@ textarea.image-workbench-prompt {
 .image-workbench-result-card {
  display: grid;
  min-width: 0;
+  width: min(100%, 500px);
  align-content: start;
-  gap: 8px;
+  gap: 12px;
 }

 .image-workbench-result-actions {
@@ -1647,16 +1693,16 @@ textarea.image-workbench-prompt {
 .image-workbench-result-actions button {
  display: inline-flex;
  min-width: 0;
-  min-height: 34px;
+  min-height: 48px;
  align-items: center;
  justify-content: center;
-  gap: 5px;
+  gap: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-inset);
  color: var(--fg-body);
  font: inherit;
-  font-size: 12px;
+  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
@@ -1 +1,17 @@
 /* Profile page rules move here as they are retired from legacy-pages.css. */
+
+/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
+.profile-page__works-scroll {
+  max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.profile-page__works-scroll::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Edge */
+}
+
+.profile-page__works-scroll .profile-page__list-grid {
+  grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
+}
@@ -1489,7 +1489,7 @@
  --eval-text-secondary: #94a3b8;
  --eval-text-tertiary: #64748b;
  --eval-text-placeholder: #475569;
-  --eval-accent-start: #34d399;
+  --eval-accent-start: #00ff88;
  --eval-accent-mid: #10b981;
  --eval-accent-end: #059669;
  --eval-accent-glow: rgba(16, 185, 129, 0.3);
@@ -3400,7 +3400,6 @@
  width: 100%;
  height: 100%;
  min-height: 520px;
-  max-height: 520px;
  padding: 18px 22px;
  border: none;
  outline: none;
@@ -3410,7 +3409,6 @@
  font-size: 14px;
  line-height: 1.9;
  resize: none;
-  overflow-y: auto;
 }

 .script-eval-v4-text-input::placeholder {
@@ -4270,11 +4268,6 @@
 .script-eval-v4-text-shell,
 .script-eval-v4-text-input {
  min-height: calc(100vh - 422px);
-  max-height: calc(100vh - 422px);
-}
-
-.script-eval-v4-text-input {
-  overflow-y: auto;
 }

 .script-eval-v4-score-card {
@@ -5377,559 +5370,3 @@
  flex-shrink: 0;
  font-size: 16px;
 }
-
-/* ===== Token usage commercial SaaS polish ===== */
-.token-usage-page.management-center-page {
-  --usage-panel: rgba(17, 21, 21, 0.96);
-  --usage-panel-strong: rgba(21, 26, 25, 0.98);
-  --usage-inset: rgba(255, 255, 255, 0.035);
-  --usage-inset-strong: rgba(255, 255, 255, 0.055);
-  --usage-line: rgba(255, 255, 255, 0.08);
-  --usage-line-strong: rgba(var(--accent-rgb), 0.28);
-  --usage-muted: rgba(232, 240, 235, 0.66);
-  --usage-soft: rgba(232, 240, 235, 0.44);
-  --usage-card-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
-  background:
-    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.06), transparent 34%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 220px),
-    var(--bg-base);
-}
-
-.token-usage-page .management-center-shell {
-  gap: 16px;
-  padding: 0 30px 42px;
-}
-
-.token-usage-page .management-center-toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 8;
-  min-height: 64px;
-  border-bottom-color: var(--usage-line);
-  border-bottom-left-radius: 18px;
-  background: rgba(14, 17, 17, 0.88);
-  backdrop-filter: blur(18px);
-  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
-}
-
-.token-usage-page .management-center-toolbar__title {
-  gap: 10px;
-}
-
-.token-usage-page .management-center-toolbar__title > span {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.token-usage-page .management-center-toolbar__title strong {
-  color: #f2f8f5;
-  font-size: 15px;
-  letter-spacing: 0;
-}
-
-.token-usage-page .management-center-toolbar__title small {
-  overflow: hidden;
-  color: var(--usage-soft);
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.token-usage-page .management-center-toolbar button,
-.token-usage-page .management-card__head button,
-.token-usage-page .management-center-status-pill {
-  border-color: var(--usage-line);
-  border-radius: 10px;
-  background: var(--usage-inset);
-  color: var(--usage-muted);
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease;
-}
-
-.token-usage-page .management-center-toolbar button:hover:not(:disabled),
-.token-usage-page .management-card__head button:hover {
-  border-color: var(--usage-line-strong);
-  background: rgba(var(--accent-rgb), 0.08);
-  color: var(--fg-body);
-  transform: translateY(-1px);
-}
-
-.token-usage-page .management-center-toolbar button:disabled {
-  opacity: 0.52;
-  cursor: wait;
-}
-
-.token-usage-page .management-center-toolbar__back {
-  border-radius: 999px !important;
-}
-
-.token-usage-page .management-center-toolbar button.is-muted-action {
-  color: var(--usage-soft);
-}
-
-.token-usage-page .management-center-toolbar button.is-primary {
-  border-color: rgba(var(--accent-rgb), 0.72);
-  background: linear-gradient(180deg, #2fffa5, var(--accent));
-  color: rgb(5, 15, 11);
-  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-.token-usage-page .management-center-status-pill {
-  position: relative;
-  gap: 7px;
-  border-radius: 999px;
-  padding-inline: 12px;
-}
-
-.token-usage-page .management-center-status-pill::before {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
-  content: "";
-}
-
-.token-usage-page .management-center-status-pill.is-loading::before {
-  animation: token-usage-pulse 1.2s ease infinite;
-}
-
-.token-usage-page .management-center-status-pill.is-error {
-  border-color: rgba(245, 158, 11, 0.42);
-  background: rgba(245, 158, 11, 0.1);
-  color: #f7ca73;
-}
-
-.token-usage-page .management-center-status-pill.is-error::before {
-  background: #f59e0b;
-  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
-}
-
-@keyframes token-usage-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.42; transform: scale(0.76); }
-}
-
-.token-usage-page .management-balance-alert {
-  margin: 2px 0 0;
-  border-color: rgba(245, 158, 11, 0.34);
-  border-radius: 14px;
-  background:
-    linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.045)),
-    var(--usage-panel);
-  box-shadow: var(--usage-card-shadow);
-}
-
-.token-usage-page .management-balance-alert button {
-  border: 0;
-  border-radius: 999px;
-}
-
-.token-usage-page .management-metric-cards {
-  gap: 12px;
-  margin: 0;
-}
-
-.token-usage-page .management-metric-card {
-  position: relative;
-  min-height: 132px;
-  overflow: hidden;
-  gap: 8px;
-  padding: 18px;
-  border-color: var(--usage-line);
-  border-radius: 18px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.048), transparent 70%),
-    var(--usage-panel-strong);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
-}
-
-.token-usage-page .management-metric-card::before {
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 3px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.12);
-  content: "";
-}
-
-.token-usage-page .management-metric-card.is-accent {
-  border-color: rgba(var(--accent-rgb), 0.32);
-  background:
-    radial-gradient(circle at 88% 16%, rgba(var(--accent-rgb), 0.18), transparent 38%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 72%),
-    var(--usage-panel-strong);
-}
-
-.token-usage-page .management-metric-card.is-accent::before {
-  background: var(--accent);
-  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.44);
-}
-
-.token-usage-page .management-metric-card.is-warn::before {
-  background: #f59e0b;
-  box-shadow: 0 0 18px rgba(245, 158, 11, 0.32);
-}
-
-.token-usage-page .management-metric-card__index {
-  position: absolute;
-  top: 14px;
-  right: 16px;
-  color: rgba(255, 255, 255, 0.14);
-  font-size: 22px;
-  font-weight: 950;
-  line-height: 1;
-}
-
-.token-usage-page .management-metric-card__label {
-  color: var(--usage-muted);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.token-usage-page .management-metric-card__value {
-  color: #f6fbf8;
-  font-size: clamp(24px, 2.5vw, 34px);
-  font-weight: 920;
-  letter-spacing: 0;
-}
-
-.token-usage-page .management-metric-card__hint {
-  color: var(--usage-soft);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.token-usage-page .management-center-overview {
-  gap: 14px;
-}
-
-.token-usage-page .management-card {
-  border-color: var(--usage-line);
-  border-radius: 18px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 64%),
-    var(--usage-panel);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026);
-}
-
-.token-usage-page .management-card__head {
-  min-height: 50px;
-  border-bottom-color: var(--usage-line);
-  padding-inline: 18px;
-}
-
-.token-usage-page .management-card__head h2 {
-  color: #ecf5f0;
-  font-size: 14px;
-  letter-spacing: 0;
-}
-
-.token-usage-page .management-card__head h2 .anticon {
-  color: var(--accent);
-}
-
-.token-usage-page .management-card__head > span,
-.token-usage-page .management-card__head button {
-  border-color: var(--usage-line);
-  border-radius: 999px;
-  background: var(--usage-inset);
-  color: var(--usage-muted);
-}
-
-.token-usage-page .management-card--chart {
-  height: clamp(390px, 50vh, 580px);
-}
-
-.token-usage-page .management-empty-chart,
-.token-usage-page .management-record-empty,
-.token-usage-page .management-status-trend__empty {
-  border: 1px dashed var(--usage-line);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.024);
-}
-
-.token-usage-page .management-model-list {
-  gap: 10px;
-  padding: 14px 18px 18px;
-}
-
-.token-usage-page .management-model-bar {
-  gap: 8px;
-  padding: 12px 14px;
-  border: 1px solid rgba(255, 255, 255, 0.045);
-  border-radius: 14px;
-  background: var(--usage-inset);
-  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
-}
-
-.token-usage-page .management-model-bar:hover {
-  border-color: var(--usage-line-strong);
-  background: rgba(var(--accent-rgb), 0.052);
-  transform: translateY(-1px);
-}
-
-.token-usage-page .management-model-bar__top strong {
-  color: #eef6f2;
-  font-size: 13px;
-}
-
-.token-usage-page .management-model-bar__track {
-  height: 7px;
-  background: rgba(255, 255, 255, 0.07);
-}
-
-.token-usage-page .management-status-card dl {
-  padding: 14px 18px 10px;
-}
-
-.token-usage-page .management-status-card div {
-  min-height: 38px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
-}
-
-.token-usage-page .management-status-card div:last-child {
-  border-bottom: 0;
-}
-
-.token-usage-page .management-status-card dt {
-  color: var(--usage-soft);
-  font-weight: 780;
-}
-
-.token-usage-page .management-status-trend {
-  padding: 14px 18px 18px;
-  border-top-color: var(--usage-line);
-}
-
-.token-usage-page .management-status-trend__title {
-  margin-bottom: 8px;
-  color: var(--usage-muted);
-  font-weight: 820;
-}
-
-.token-usage-page .usage-trend__svg {
-  min-height: 160px;
-}
-
-.token-usage-page .usage-trend__line {
-  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.22));
-}
-
-.token-usage-page .usage-trend__dot {
-  transition: r 160ms ease;
-}
-
-.token-usage-page .usage-trend__meta {
-  border-top-color: var(--usage-line);
-  color: var(--usage-soft);
-}
-
-.token-usage-page .management-members,
-.token-usage-page .management-records {
-  padding-bottom: 14px;
-}
-
-.token-usage-page .management-member-list {
-  gap: 10px;
-  padding: 12px 18px 2px;
-}
-
-.token-usage-page .management-member-row {
-  min-height: 64px;
-  border: 1px solid rgba(255, 255, 255, 0.045);
-  border-radius: 14px;
-  background: var(--usage-inset);
-  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
-}
-
-.token-usage-page .management-member-row:hover {
-  border-color: var(--usage-line-strong);
-  background: rgba(var(--accent-rgb), 0.052);
-  transform: translateY(-1px);
-}
-
-.token-usage-page .management-member-avatar {
-  color: rgb(5, 15, 11);
-  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.16);
-}
-
-.token-usage-page .management-member-role {
-  border-color: var(--usage-line);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.035);
-}
-
-.token-usage-page .management-record-table {
-  min-width: 0;
-  padding: 14px 18px 0;
-  overflow-x: auto;
-}
-
-.token-usage-page .management-record-table__head,
-.token-usage-page .management-record-table__row {
-  min-width: 880px;
-  border: 1px solid transparent;
-  border-radius: 12px;
-}
-
-.token-usage-page .management-record-table__head {
-  min-height: 38px;
-  background: rgba(255, 255, 255, 0.045);
-  color: var(--usage-muted);
-}
-
-.token-usage-page .management-record-table__row {
-  min-height: 46px;
-  background: var(--usage-inset);
-  transition: border-color 160ms ease, background 160ms ease;
-}
-
-.token-usage-page .management-record-table__row:hover {
-  border-color: rgba(255, 255, 255, 0.065);
-  background: rgba(255, 255, 255, 0.052);
-}
-
-.token-usage-page .management-record-table__row span.is-good,
-.token-usage-page .management-record-table__row span.is-error {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: max-content;
-  min-width: 44px;
-  min-height: 24px;
-  border-radius: 999px;
-  padding: 0 9px;
-  font-size: 11px;
-  font-weight: 850;
-}
-
-.token-usage-page .management-record-table__row span.is-good {
-  background: rgba(var(--accent-rgb), 0.1);
-}
-
-.token-usage-page .management-record-table__row span.is-error {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.token-usage-page .management-record-pagination {
-  border-top-color: var(--usage-line);
-}
-
-.token-usage-page .management-record-pagination button {
-  border-color: var(--usage-line);
-  border-radius: 9px;
-  background: var(--usage-inset);
-  color: var(--usage-muted);
-}
-
-.token-usage-page .management-record-pagination button:hover:not(:disabled) {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: rgb(5, 15, 11);
-}
-
-@media (max-width: 1180px) {
-  .token-usage-page.management-center-page {
-    padding-left: 20px;
-  }
-
-  .token-usage-page .management-center-shell {
-    padding-inline: 22px;
-  }
-}
-
-@media (min-width: 901px) and (max-width: 1180px) {
-  .token-usage-page.management-center-page {
-    padding-left: 82px;
-  }
-}
-
-@media (max-width: 900px) {
-  .token-usage-page.management-center-page {
-    padding-top: 74px;
-    padding-left: 0;
-  }
-
-  .token-usage-page .management-center-shell {
-    padding: 0 16px 34px;
-  }
-
-  .token-usage-page .management-center-toolbar {
-    top: 0;
-    align-items: stretch;
-    margin: 0 -16px;
-    padding: 12px 16px;
-    border-radius: 0 0 18px 18px;
-  }
-
-  .token-usage-page .management-center-toolbar__title {
-    width: 100%;
-  }
-
-  .token-usage-page .management-center-status-pill {
-    order: 2;
-  }
-
-  .token-usage-page .management-metric-cards {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .token-usage-page .management-center-overview {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .token-usage-page .management-card--chart {
-    height: auto;
-    min-height: 360px;
-  }
-
-  .token-usage-page .management-member-row {
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
-    gap: 10px 12px;
-    padding: 14px;
-  }
-
-  .token-usage-page .management-member-role,
-  .token-usage-page .management-member-row > span:not(.management-member-avatar):not(.management-member-role):not(.management-member-meter),
-  .token-usage-page .management-member-meter,
-  .token-usage-page .management-member-row > .anticon {
-    grid-column: 2;
-    justify-self: start;
-  }
-}
-
-@media (max-width: 560px) {
-  .token-usage-page .management-center-toolbar button:not(.management-center-toolbar__back) {
-    flex: 1 1 calc(50% - 6px);
-    padding-inline: 10px;
-  }
-
-  .token-usage-page .management-center-status-pill {
-    flex: 1 1 100%;
-    justify-content: flex-start;
-  }
-
-  .token-usage-page .management-metric-card {
-    min-height: 118px;
-    padding: 16px;
-  }
-
-  .token-usage-page .management-metric-card__value {
-    font-size: 24px;
-  }
-
-  .token-usage-page .management-card__head {
-    min-height: 46px;
-    padding-inline: 14px;
-  }
-
-  .token-usage-page .management-model-list,
-  .token-usage-page .management-member-list,
-  .token-usage-page .management-record-table {
-    padding-inline: 14px;
-  }
-}
@@ -1,6 +1,6 @@
 .product-clone-page[data-tool="clone"].size-template-workbench {
  --clone-settings-panel-width: 640px;
-  --size-green: #34d399;
+  --size-green: #00ff88;
  --size-cyan: #38bdf8;
  --size-violet: #a78bfa;
  --size-amber: #fbbf24;
@@ -106,7 +106,7 @@

 .size-template-workbench .size-template-static-field.is-clickable > button:hover,
 .size-template-workbench .size-template-static-field.is-clickable > button[aria-expanded="true"] {
-  border-color: #34d399;
+  border-color: #00ff88;
  background: #202c28;
 }

@@ -155,7 +155,7 @@
 .size-template-platform-dialog button:hover,
 .size-template-platform-dialog button.is-active {
  background: #17352a;
-  color: #34d399;
+  color: #00ff88;
 }

@keyframes size-template-dialog-rise {
@@ -241,7 +241,7 @@
  width: 54px;
  height: 2px;
  border-radius: 999px;
-  background: linear-gradient(90deg, #34d399, rgb(52 211 153 / 0%));
+  background: linear-gradient(90deg, #00ff88, rgb(52 211 153 / 0%));
  box-shadow: 0 0 18px rgb(52 211 153 / 35%);
 }

@@ -355,7 +355,7 @@
 }

 .size-template-preview-note > div:first-child .anticon {
-  color: #34d399;
+  color: #00ff88;
 }

 .size-template-preview-note p {
@@ -414,7 +414,7 @@
 }

 .size-template-check-list .anticon {
-  color: #34d399;
+  color: #00ff88;
 }

@media (max-width: 1320px) {
@@ -376,23 +376,19 @@
  margin-top: 8px;
 }

-.studio-result-actions--with-clear {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .studio-result-actions button {
  display: inline-flex;
  min-width: 0;
-  min-height: 36px;
+  min-height: 48px;
  align-items: center;
  justify-content: center;
-  gap: 6px;
+  gap: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-inset);
  color: var(--fg-body);
  font: inherit;
-  font-size: 12px;
+  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
@@ -3,15 +3,15 @@
  --toolbox-green: #00ff88;
  --toolbox-blue: #4fc3f7;
  --toolbox-purple: #a855f7;
-  --toolbox-surface: rgba(14, 16, 38, 0.75);
-  --toolbox-elevated: rgba(20, 22, 52, 0.85);
+  --toolbox-surface: rgba(255, 255, 255, 0.04);
+  --toolbox-elevated: rgba(255, 255, 255, 0.06);
  --toolbox-highlight: rgba(28, 31, 68, 0.9);
  --toolbox-border-subtle: rgba(0, 255, 136, 0.08);
  --toolbox-border-default: rgba(0, 255, 136, 0.14);
  --toolbox-border-hover: rgba(0, 255, 136, 0.28);
-  --toolbox-text-primary: #f0f0f5;
-  --toolbox-text-secondary: rgba(240, 240, 245, 0.6);
-  --toolbox-text-tertiary: rgba(240, 240, 245, 0.4);
+  --toolbox-text-primary: #e8eaef;
+  --toolbox-text-secondary: #9aa1b8;
+  --toolbox-text-tertiary: #62697f;

  position: relative;
  isolation: isolate;
@@ -20,7 +20,7 @@
  background:
    linear-gradient(180deg, #070b10 0%, #05080d 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 255, 136, 0.04) 0%, transparent 70%),
-    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(79, 195, 247, 0.03) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(42, 159, 212, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 60%);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
@@ -30,21 +30,21 @@
  position: relative;
  z-index: 2;
  display: flex;
-  gap: clamp(20px, 3vw, 40px);
-  padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
+  gap: clamp(18px, 2.8vw, 36px);
+  padding: clamp(36px, 5.5vw, 68px) clamp(20px, 6vw, 76px);
  min-height: var(--home-section-min-height);
  align-items: center;
 }

 /* ===== Left Panel ===== */
 .omni-home__toolbox-left {
-  width: clamp(340px, 30vw, 440px);
+  width: clamp(320px, 30vw, 450px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: 17px;
  justify-content: flex-start;
-  padding-top: clamp(40px, 8vh, 100px);
+  padding-top: clamp(34px, 6vh, 84px);
 }

 .omni-home__toolbox-brand {
@@ -54,31 +54,31 @@
 }

 .omni-home__toolbox-brand-icon {
-  width: 52px;
-  height: 52px;
+  width: 56px;
+  height: 56px;
  background: var(--toolbox-green);
-  border-radius: 14px;
+  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0b12;
-  font-size: 26px;
+  font-size: 28px;
 }

 .omni-home__toolbox-brand-icon .anticon {
-  font-size: 28px;
+  font-size: 30px;
 }

 .omni-home__toolbox-brand-text {
  font-weight: 900;
-  font-size: 30px;
+  font-size: 34px;
  color: #fff;
  letter-spacing: -0.5px;
 }

 .omni-home__toolbox-title {
  font-weight: 900;
-  font-size: clamp(34px, 3.6vw, 46px);
+  font-size: clamp(36px, 3.8vw, 50px);
  line-height: 1.15;
  background: linear-gradient(135deg, var(--toolbox-green), var(--toolbox-blue));
  -webkit-background-clip: text;
@@ -87,9 +87,10 @@
 }

 .omni-home__toolbox-subtitle {
-  font-size: 17px;
-  line-height: 1.6;
+  font-size: 18px;
+  line-height: 1.55;
  color: var(--toolbox-text-secondary);
+  max-width: 100%;
 }

 .omni-home__toolbox-list {
@@ -102,8 +103,8 @@
 .omni-home__toolbox-item {
  display: flex;
  align-items: flex-start;
-  gap: 16px;
-  padding: 18px 22px;
+  gap: 17px;
+  padding: 17px 22px;
  border-radius: 16px;
  background: var(--toolbox-surface);
  border: 1px solid var(--toolbox-border-subtle);
@@ -124,14 +125,14 @@
 }

 .omni-home__toolbox-item-icon {
-  font-size: 28px;
+  font-size: 29px;
  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
+  width: 50px;
+  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
-  border-radius: 12px;
+  border-radius: 13px;
  background: rgba(0, 255, 136, 0.08);
 }

@@ -139,18 +140,19 @@
  display: flex;
  flex-direction: column;
  gap: 5px;
+  min-width: 0;
 }

 .omni-home__toolbox-item-name {
  font-weight: 700;
-  font-size: 17px;
+  font-size: 19px;
  color: var(--toolbox-text-primary);
 }

 .omni-home__toolbox-item-desc {
-  font-size: 14px;
+  font-size: 16px;
  color: var(--toolbox-text-tertiary);
-  line-height: 1.5;
+  line-height: 1.4;
 }

@keyframes omni-toolbox-fadeSlideIn {
@@ -160,14 +162,14 @@

 .omni-home__toolbox-workflow {
  margin-top: auto;
-  padding: 20px 24px;
+  padding: 19px 24px;
  border-radius: 16px;
  background: var(--toolbox-surface);
  border: 1px solid var(--toolbox-border-subtle);
 }

 .omni-home__toolbox-workflow-label {
-  font-size: 14px;
+  font-size: 16px;
  font-weight: 700;
  color: var(--toolbox-green);
  margin-bottom: 12px;
@@ -178,18 +180,21 @@
 .omni-home__toolbox-workflow-steps {
  display: flex;
  align-items: center;
+  flex-wrap: wrap;
  gap: 10px;
-  font-size: 14px;
+  font-size: 16px;
  color: var(--toolbox-text-tertiary);
 }

 .omni-home__toolbox-workflow-step {
  color: var(--toolbox-text-secondary);
+  white-space: nowrap;
 }

 .omni-home__toolbox-workflow-arrow {
  color: var(--toolbox-green);
-  font-size: 14px;
+  font-size: 16px;
+  flex-shrink: 0;
 }

 /* ===== Grid Area ===== */
@@ -829,17 +834,19 @@
@media (max-width: 980px) {
  .omni-home__toolbox-shell {
    flex-direction: column;
-    padding: 48px 22px 64px;
+    padding: 36px 20px 48px;
+    gap: 24px;
  }

  .omni-home__toolbox-left {
    width: 100%;
    flex-shrink: unset;
+    padding-top: 0;
  }

  .omni-home__toolbox-grid {
    width: 100%;
-    min-height: clamp(480px, 70vw, 700px);
+    min-height: clamp(400px, 60vw, 560px);
  }

  .omni-home__toolbox-workflow {
@@ -849,7 +856,7 @@

@media (max-width: 560px) {
  .omni-home__toolbox-shell {
-    padding: 36px 18px 48px;
+    padding: 28px 16px 40px;
  }

  .omni-home__toolbox-title {
Author	SHA1	Message	Date
OmniAI Developer	8d7f5d9a8a	feat: 图片工作台/镜头实验室/局部重绘/数字人/去水印页面UI优化	2026-06-03 20:36:07 +08:00
OmniAI Developer	7afcfa54c2	feat: 个人中心侧边栏显示、代表作滚动、图片工作台预览样式、首页轮播尺寸调整	2026-06-03 19:15:45 +08:00
OmniAI Developer	7b41cf3e87	feat: 首页功能页样式与组件更新	2026-06-03 17:28:44 +08:00