feat: 电商克隆上传交互升级、视频模型选择器图标

【电商克隆 - 商品图上传交互重构】 - 新增上传预览大图区（clone-ai-upload-preview-wrap），点击缩略图可切换预览 - 选中缩略图增加 is-active 绿色边框高亮 - 预览区显示商品图编号 + 尺寸/比例/格式信息（formatProductImageSpec） - 上传区到达 7 张上限时显示"已达上限"、阻止拖拽上传、输入框禁用 - 上传图片自动异步读取尺寸（width/height），无需等待上传完成即可展示 - 已上传素材区重构为列表头（标题+计数）+ 缩略图栈式布局 - 缩略图增加序号角标（1-7），删除按钮独立于缩略图下方 - selectedProductImageId 状态自动管理：删除/新增时自动切换到有效图片【工作台 - 视频模型选择器图标】 - 新增 VIDEO_MODEL_ICON_URLS 映射（HappyHorse/Pixverse/Vidu/Wan/Kling） - SelectChip 组件在 chipId=video-model 时显示模型品牌图标 - getVideoModelIconUrl 支持中英文模糊匹配【样式】 - ecommerce.css: 预览区/素材栈/缩略图选中态/上限态完整样式 - dark-green.css: 主题层微调
feat: 个人中心视觉重构、画布网点背景、剧本评分色调统一
2026-06-04 17:27:40 +08:00 · 2026-06-04 13:16:38 +08:00 · 2026-06-04 09:40:28 +08:00 · 2026-06-03 18:52:14 +08:00 · 2026-06-03 18:21:10 +08:00
10 changed files with 3756 additions and 222 deletions
@@ -26,7 +26,6 @@
  VideoCameraOutlined,
 } from "@ant-design/icons";
 import {
-  Background,
  ReactFlow,
 } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react";
@@ -3542,7 +3541,8 @@ function CanvasPage({
          onMouseMove={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasMouseMove}
          onWheel={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasWheel}
          style={{
-            "--canvas-bg-size": `${24 * canvasViewport.zoom}px`,
+            "--canvas-bg-size": `${34 * canvasViewport.zoom}px`,
+            "--canvas-bg-dot": `${1.35 * canvasViewport.zoom}px`,
            "--canvas-bg-x": `${canvasViewport.x}px`,
            "--canvas-bg-y": `${canvasViewport.y}px`,
            cursor: canvasPanDrag ? "grabbing" : spacePanning ? "grab" : undefined,
@@ -3727,9 +3727,7 @@ function CanvasPage({
            proOptions={{ hideAttribution: true }}
            onPaneClick={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handlePaneClick}
            onPaneContextMenu={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handlePaneContextMenu}
-          >
-            <Background gap={24} color="transparent" className="studio-canvas__background" />
-          </ReactFlow>
+          />
          <div className="studio-canvas-zoom-controls" onMouseDown={(e) => e.stopPropagation()}>
            <button type="button" title="缩小" onClick={zoomCanvasOut}>−</button>
            <button type="button" className="studio-canvas-zoom-controls__pct" title="重置缩放" onClick={resetCanvasZoom}>
@@ -523,6 +523,12 @@ 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;
@@ -778,6 +784,7 @@ 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);
@@ -862,6 +869,13 @@ 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";
@@ -890,6 +904,30 @@ 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/"));
@@ -945,6 +983,7 @@ 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);
  };
@@ -1815,6 +1854,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    setSelectedProductSetPreview(null);
    setShowHostingModal(false);
    setProductImages([]);
+    setSelectedProductImageId(null);
    setIsProductUploadDragging(false);
    setCloneOutput("detail");
    setRatio((current) => normalizeRatioForPlatform(platform, current, "detail"));
@@ -2061,18 +2101,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          </h2>
          <div
            role="button"
-            tabIndex={0}
-            className={`clone-ai-upload-zone${isProductUploadDragging ? " is-dragging" : ""}`}
-            onClick={() => productInputRef.current?.click()}
+            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();
+            }}
            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()}
@@ -2085,35 +2131,68 @@ 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-uploaded-files" aria-label="已上传商品原图">
-                {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="" />
+              <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>
                      <button
                        type="button"
                        onClick={(event) => {
                          event.stopPropagation();
                          removeProductImage(item.id);
                        }}
-                      aria-label={`删除${item.name}`}
+                        aria-label={`删除商品图 ${index + 1}`}
                      >
                        <CloseOutlined />
                      </button>
                    </figure>
                  ))}
                </div>
+              </div>
            ) : null}
          </div>
-          <input ref={productInputRef} type="file" accept="image/*" multiple onChange={handleProductUpload} />
+          <input ref={productInputRef} type="file" accept="image/*" multiple disabled={isProductImageLimitReached} onChange={handleProductUpload} />
        </section>

        <section className="clone-ai-card">
@@ -5,10 +5,13 @@ import {
  CloseOutlined,
  DeleteOutlined,
  EditOutlined,
+  FileImageOutlined,
+  FolderOpenOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
  PhoneOutlined,
+  PlayCircleOutlined,
  PlusOutlined,
  SafetyOutlined,
  ShareAltOutlined,
@@ -179,6 +182,19 @@ function formatAssetStatus(status: string | undefined): string {
  return status || "资产";
 }

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

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

+            <div className="profile-page__account-card">
+              <div className="profile-page__list-tabs">
+                <button
+                  type="button"
+                  className={accountPanel === "credits" ? "is-active" : ""}
+                  onClick={() => setAccountPanel("credits")}
+                >
+                  积分 {(totalBalance / 100).toFixed(2)}
+                </button>
+                <button
+                  type="button"
+                  className={accountPanel === "tasks" ? "is-active" : ""}
+                  onClick={() => setAccountPanel("tasks")}
+                >
+                  任务 {tasks.length}
+                </button>
+              </div>
+              <div className="profile-page__upload-card profile-page__upload-card--meta">
+                {accountPanel === "credits" ? (
+                  <>
+                    <span className="profile-page__meta-item">
+                      <small>当前账号</small>
+                      <strong>{displayName}</strong>
+                    </span>
+                    <span className="profile-page__meta-item">
+                      <small>积分剩余</small>
+                      <strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className="profile-page__meta-item">
+                      <small>任务总数</small>
+                      <strong>{tasks.length}</strong>
+                    </span>
+                    <span className="profile-page__meta-item">
+                      <small>已完成</small>
+                      <strong>{completedTasks.length}</strong>
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+
            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
              <ShareAltOutlined />
              {packageLabel}
@@ -755,52 +848,6 @@ function ProfilePage({
              </span>
              {renderActivePanel()}
            </div>
-
-            <div className="profile-page__section">
-              <div className="profile-page__list-bar">
-                <div className="profile-page__list-tabs">
-                  <button
-                    type="button"
-                    className={accountPanel === "credits" ? "is-active" : ""}
-                    onClick={() => setAccountPanel("credits")}
-                  >
-                    积分 {(totalBalance / 100).toFixed(2)}
-                  </button>
-                  <button
-                    type="button"
-                    className={accountPanel === "tasks" ? "is-active" : ""}
-                    onClick={() => setAccountPanel("tasks")}
-                  >
-                    任务 {tasks.length}
-                  </button>
-                </div>
-              </div>
-              <div className="profile-page__upload-card profile-page__upload-card--meta">
-                {accountPanel === "credits" ? (
-                  <>
-                    <span className="profile-page__meta-item">
-                      <small>当前账号</small>
-                      <strong>{displayName}</strong>
-                    </span>
-                    <span className="profile-page__meta-item">
-                      <small>积分剩余</small>
-                      <strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
-                    </span>
-                  </>
-                ) : (
-                  <>
-                    <span className="profile-page__meta-item">
-                      <small>任务总数</small>
-                      <strong>{tasks.length}</strong>
-                    </span>
-                    <span className="profile-page__meta-item">
-                      <small>已完成</small>
-                      <strong>{completedTasks.length}</strong>
-                    </span>
-                  </>
-                )}
-              </div>
-            </div>
          </main>
        </div>
      </section>
@@ -850,7 +897,6 @@ function ProfilePage({
            <span className="auth-page__logo">
              <img src={AUTH_LOGO_URL} alt="OmniAI" />
            </span>
-            <span className="auth-page__form-kicker">{mode === "login" ? "账户登录" : "新用户注册"}</span>
            <h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
            <p className="auth-page__subtitle">
              {mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}
@@ -1,8 +1,11 @@
 import {
+  BarChartOutlined,
  CheckCircleFilled,
  CopyOutlined,
  DownloadOutlined,
  FileTextOutlined,
+  LoadingOutlined,
+  ThunderboltOutlined,
  UploadOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
@@ -168,6 +171,12 @@ 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: "主角动机有铺垫，配角功能性较强，人物弧光尚可进一步深化。" },
@@ -346,12 +355,14 @@ function ScriptTokensPage() {
  const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
  const scriptMinutes = Math.max(8, Math.round(script.length / 460));
  const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+  const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle";

  return (
-    <section className="script-eval-v5 page-motion">
+    <section className={`script-eval-v5 page-motion ${statusClass}`}>
      <div className="script-eval-v5-page">
        {/* Left Panel */}
        <aside className="script-eval-v5-left">
+          <div className="script-eval-v5-left-main">
            <div className="script-eval-v5-lp-section">
              <div className="script-eval-v5-lp-label">上传剧本</div>
              <div
@@ -364,7 +375,10 @@ 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>
@@ -374,7 +388,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>
                  </>
@@ -445,12 +459,15 @@ function ScriptTokensPage() {
                disabled={loading || !hasContent}
                onClick={() => void handleEvaluate()}
              >
-              {loading ? "◆ 评测中..." : "◆ 开始评测"}
+                {loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+                <span>{loading ? "评测中..." : "开始评测"}</span>
              </button>
              <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
-              导出评测报告
+                <DownloadOutlined />
+                <span>导出评测报告</span>
              </button>
            </div>
+          </div>
        </aside>

        {/* Right Area */}
@@ -482,6 +499,11 @@ function ScriptTokensPage() {
                    <div className="page-loading-spinner" />
                    <strong>AI 正在分析剧本...</strong>
                    <p>正在调用模型进行六维评分，预计需要 15-30 秒</p>
+                    <div className="script-eval-v5-loading-steps" aria-hidden="true">
+                      <span>结构识别</span>
+                      <span>冲突评估</span>
+                      <span>商业潜力</span>
+                    </div>
                  </div>
                </div>
              </div>
@@ -568,13 +590,23 @@ function ScriptTokensPage() {
                        <span>0%</span>
                      </div>
                      <div className="script-eval-report__chart-grid">
-                        {SCORE_DIMENSIONS.map((dim) => {
+                        {SCORE_DIMENSIONS.map((dim, dimIndex) => {
                          const score = result.dimensionScores[dim.key] ?? 0;
                          const pct = Math.max(0, Math.min(1, score / dim.maxScore));
                          const lossPct = 1 - pct;
                          const isPerfect = score === dim.maxScore;
+                          const isActive = activeDim === null || activeDim === dimIndex;
                          return (
-                            <button key={dim.key} type="button" className="script-eval-report__bar-col">
+                            <button
+                              key={dim.key}
+                              type="button"
+                              className={`script-eval-report__bar-col${isActive ? "" : " is-dimmed"}`}
+                              onMouseEnter={() => setActiveDim(dimIndex)}
+                              onFocus={() => setActiveDim(dimIndex)}
+                              onMouseLeave={() => setActiveDim(null)}
+                              onBlur={() => setActiveDim(null)}
+                              aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`}
+                            >
                              <div className="script-eval-report__bar-score">
                                <b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null}
                              </div>
@@ -589,6 +621,14 @@ function ScriptTokensPage() {
                        })}
                      </div>
                    </div>
+                    <div className="script-eval-report__chart-note">
+                      <BarChartOutlined />
+                      <span>
+                        {activeDim === null
+                          ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。"
+                          : `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`}
+                      </span>
+                    </div>
                  </section>

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

  return (
-    <section className="script-token-page token-usage-page management-center-page" aria-label="管理中心">
+    <section className={`script-token-page token-usage-page management-center-page ${pageStatusClass}`} aria-label="管理中心">
      <main className="management-center-shell">
        <header className="management-center-toolbar" aria-label="管理中心操作">
          <div className="management-center-toolbar__title">
            <button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}>
              <ArrowLeftOutlined />
            </button>
+            <span>
              <strong>管理中心</strong>
+              <small>用量、成员与模型调用监控</small>
+            </span>
          </div>
-          <span className="management-center-status-pill">
+          <span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}>
            {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
          </span>
-          <button type="button" onClick={refreshEnterpriseUsage}>
+          <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
            <ReloadOutlined />
            刷新数据
          </button>
-          <button type="button">
+          <button type="button" className="is-muted-action">
            <UserOutlined />
            成员管理
          </button>
@@ -283,7 +293,7 @@ function TokenUsagePage({
                <BarChartOutlined />
                模型消耗分布
              </h2>
-              <span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
+              <span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
            </div>
            {modelBreakdown.length ? (
              <div className="management-model-list">
@@ -310,7 +320,10 @@ function TokenUsagePage({

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

        <section className="management-card management-records">
          <div className="management-card__head">
-            <h2>调用记录</h2>
+            <h2>
+              <BarChartOutlined />
+              调用记录
+            </h2>
            <span>{records.length} 条记录</span>
          </div>
          <div className="management-record-table" role="table" aria-label="调用记录">
@@ -3,6 +3,24 @@ 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,
@@ -56,6 +74,7 @@ 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}
@@ -71,6 +90,11 @@ 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>
@@ -1157,6 +1157,25 @@
  background: #202c28;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full {
+  cursor: default;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: #aeb8c4;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full:hover {
+  border-color: rgba(255, 255, 255, 0.16);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%),
+    var(--ecm-inset);
+  transform: none;
+}
+
 .product-clone-page[data-tool="clone"] .clone-ai-upload-zone:active {
  transform: scale(0.98);
 }
@@ -1274,6 +1293,27 @@
  transform: scale(0.92);
 }

+.product-clone-page[data-tool="clone"] .clone-ai-card,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
+  position: relative;
+  overflow: visible;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+  z-index: 8;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:hover),
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:focus-within) {
+  z-index: 90;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within {
+  z-index: 95;
+}
+
 .product-clone-page[data-tool="clone"] .clone-ai-settings-section {
  display: grid;
  gap: 8px;
@@ -3096,7 +3136,7 @@

 .uploaded-image-zoom {
  position: absolute;
-  z-index: 70;
+  z-index: 220;
  left: 50%;
  bottom: calc(100% + 10px);
  display: block;
@@ -3117,6 +3157,18 @@
  visibility: hidden;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .uploaded-image-zoom {
+  left: 0;
+  bottom: calc(100% + 12px);
+  width: min(240px, 58vw);
+  transform: translate(0, 8px) scale(0.96);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover .uploaded-image-zoom,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within .uploaded-image-zoom {
+  transform: translate(0, 0) scale(1);
+}
+
 .uploaded-image-zoom img {
  display: block;
  width: 100%;
@@ -3139,6 +3191,233 @@
  visibility: visible;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) {
+  align-content: start;
+  justify-items: stretch;
+  gap: 10px;
+  min-height: 0;
+  padding: 12px;
+  text-align: left;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-main {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  width: 100%;
+  align-items: center;
+  justify-items: start;
+  gap: 4px 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-icon {
+  grid-row: span 2;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-title {
+  min-width: 0;
+  color: #c9d2dd;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) strong {
+  grid-row: span 2;
+  min-width: 96px;
+  height: 34px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-hint {
+  grid-column: 2;
+  min-width: 0;
+  font-size: 10px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview-wrap {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview {
+  position: relative;
+  display: grid;
+  width: 100%;
+  min-height: 126px;
+  overflow: hidden;
+  border: 1px solid rgba(var(--ecm-accent-rgb), 0.2);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
+    rgba(8, 10, 12, 0.56);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview img {
+  display: block;
+  width: 100%;
+  height: 126px;
+  object-fit: contain;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px;
+  color: #eef2f6;
+  text-align: left;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta span {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
+  display: block;
+  overflow: hidden;
+  max-width: 260px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b {
+  color: var(--ecm-accent);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
+  color: #aeb8c4;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 0;
+  padding-top: 2px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-stack {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: #768292;
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head b {
+  flex: 0 0 auto;
+  padding: 2px 7px;
+  border: 1px solid rgba(var(--ecm-accent-rgb), 0.18);
+  border-radius: 999px;
+  background: rgba(var(--ecm-accent-rgb), 0.07);
+  color: var(--ecm-accent);
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file {
+  width: 46px;
+  height: 46px;
+  overflow: hidden;
+  border-color: rgba(255, 255, 255, 0.12);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.035);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file > button:not(.clone-ai-uploaded-file__thumb) {
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  background: rgba(8, 10, 12, 0.82);
+  color: #fff;
+  font-size: 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file.is-active {
+  border-color: rgba(var(--ecm-accent-rgb), 0.86);
+  box-shadow: 0 0 0 2px rgba(var(--ecm-accent-rgb), 0.12);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb {
+  position: static;
+  inset: auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  opacity: 1;
+  transform: none;
+  transition: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file__thumb span {
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: rgba(8, 10, 12, 0.76);
+  color: #eef2f6;
+  font-size: 9px;
+  font-weight: 900;
+  line-height: 14px;
+  text-align: center;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover {
+  border-color: rgba(var(--ecm-accent-rgb), 0.62);
+  transform: translateY(-1px);
+}
+
@keyframes image-mention-menu-rise {
  from {
    opacity: 0;
@@ -8008,9 +8287,8 @@
 }

 .product-clone-page[data-tool="clone"] .clone-ai-logo {
-  position: sticky;
-  top: 0;
-  z-index: 3;
+  position: static;
+  z-index: auto;
  margin: -18px -18px 2px;
  padding: 16px 18px 14px;
  border-bottom-color: var(--ecm-line);
@@ -8158,6 +8436,13 @@
  box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
 }

+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: #aeb8c4;
+  box-shadow: none;
+}
+
 .product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) {
  filter: brightness(1.03);
  transform: translateY(-1px);
@@ -8513,7 +8798,7 @@
  }

  .product-clone-page[data-tool="clone"] .clone-ai-logo {
-    margin: -14px -14px 0;
+    margin: 0;
    padding: 14px 54px 12px 14px;
  }

@@ -8707,3 +8992,127 @@
    font-size: 10px;
  }
 }
+
+@media (max-height: 760px) {
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview {
+    grid-template-rows: auto minmax(220px, 1fr) auto;
+    align-content: stretch;
+    justify-items: stretch;
+    overflow: auto;
+    padding-top: clamp(28px, 7vh, 72px);
+    padding-bottom: 20px;
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview-header {
+    position: static;
+    width: 100%;
+    max-width: none;
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-empty-state {
+    align-self: center;
+    justify-self: center;
+    min-height: min(260px, 36vh);
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-bottom-input {
+    position: static;
+    width: min(100%, 780px);
+    align-self: end;
+    justify-self: center;
+  }
+}
+
+@media (max-width: 860px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    grid-template-rows: auto minmax(220px, 1fr) auto;
+    align-content: stretch;
+    justify-items: stretch;
+    overflow: auto;
+    padding-bottom: 20px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+    position: static;
+    width: 100%;
+    max-width: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+    align-self: center;
+    justify-self: center;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+    position: static;
+    width: min(100%, 780px);
+    align-self: end;
+    justify-self: center;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    grid-template-rows: auto minmax(210px, 1fr) auto;
+    gap: 16px;
+    padding-bottom: 14px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+    min-height: min(220px, 34vh);
+  }
+}
+
+/* Mobile preview rhythm: once the preview header is in normal flow, remove the desktop top reserve. */
+@media (max-width: 860px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 520px;
+    padding-top: 18px;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 440px;
+    padding-top: 14px;
+  }
+}
+
+/* Mobile clone header alignment: keep the tool title in normal flow, but attach it to the top nav rhythm. */
+@media (max-width: 900px) {
+  .product-clone-page[data-tool="clone"] {
+    padding-top: 59px;
+  }
+
+  .product-clone-page[data-tool="clone"] > .product-clone-shell {
+    min-height: calc(100% - 59px);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-panel {
+    padding-top: 0;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-logo {
+    margin: 0 -18px 2px;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-panel {
+    padding: 0 14px 14px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-logo {
+    margin: 0 -14px 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .product-clone-page[data-tool="clone"] {
+    padding-top: 59px;
+  }
+
+  .product-clone-page[data-tool="clone"] > .product-clone-shell {
+    min-height: calc(100% - 59px);
+  }
+}
@@ -5377,3 +5377,559 @@
  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;
+  }
+}
Author	SHA1	Message	Date
ludan	2b65206b84	feat: 电商克隆上传交互升级、视频模型选择器图标【电商克隆 - 商品图上传交互重构】 - 新增上传预览大图区（clone-ai-upload-preview-wrap），点击缩略图可切换预览 - 选中缩略图增加 is-active 绿色边框高亮 - 预览区显示商品图编号 + 尺寸/比例/格式信息（formatProductImageSpec） - 上传区到达 7 张上限时显示"已达上限"、阻止拖拽上传、输入框禁用 - 上传图片自动异步读取尺寸（width/height），无需等待上传完成即可展示 - 已上传素材区重构为列表头（标题+计数）+ 缩略图栈式布局 - 缩略图增加序号角标（1-7），删除按钮独立于缩略图下方 - selectedProductImageId 状态自动管理：删除/新增时自动切换到有效图片【工作台 - 视频模型选择器图标】 - 新增 VIDEO_MODEL_ICON_URLS 映射（HappyHorse/Pixverse/Vidu/Wan/Kling） - SelectChip 组件在 chipId=video-model 时显示模型品牌图标 - getVideoModelIconUrl 支持中英文模糊匹配【样式】 - ecommerce.css: 预览区/素材栈/缩略图选中态/上限态完整样式 - dark-green.css: 主题层微调	2026-06-04 17:27:40 +08:00
ludan	fb4011bf1f	feat: 个人中心视觉重构、画布网点背景、剧本评分色调统一【个人中心视觉重构】 - 列表卡片新增媒体预览缩略图（图片/视频/项目/资产），支持 image/video 两种媒体类型 - 新增 renderCardPreview 通用预览组件，自动识别视频格式并渲染 <video> 标签 - 新增 formatAssetType 工具函数，资产类型中文化（角色/场景/道具/视频/图像/素材） - 媒体卡片采用固定高度网格布局（标题行 18px/正文 36px/元信息 18px），保证列表节奏一致 - 卡片预览区左上角显示类型标签徽章（品牌绿边框+半透明背景） - 删除按钮增加 hover 红色反馈（边框/背景/文字渐变至红色） - 积分/任务面板从底部区域移至侧边栏头像下方，减少滚动距离 - 新增 account-card 容器包裹积分/任务切换面板 - 侧边栏统计数据改为 3 列网格布局，每项增加独立圆角卡片样式 - 作品/项目/资产/社区发布四个 Tab 改为均分 4 列网格 - 分区标题增加品牌绿圆点前缀装饰 - 响应式断点：960px（侧边栏双列+内容区单列）、640px（全部单列+标签横向滚动）、420px（紧凑间距）【画布网点背景】 - 移除 ReactFlow <Background> 组件，改用纯 CSS radial-gradient 圆点背景 - 通过 CSS 自定义属性（--canvas-bg-size/--canvas-bg-dot/--canvas-bg-x/--canvas-bg-y）实现缩放/平移时网点同步 - 网点颜色使用半透明灰蓝（rgba(148,163,184,0.34)），随画布缩放动态调整点间距与大小【剧本评分色调统一】 - 变量 Token 体系重定义为电商同款暗色面板色调（--v5-bg: #0d0d0f, --v5-panel: #151719） - 移除所有 box-shadow 和 depth 阴影，改用 inset 顶部光泽线 - 移除 backdrop-filter 毛玻璃效果，统一为纯色半透明背景 - hover 交互简化为边框+背景色变化，取消 transform 浮起动画 - 上传区移除 ::after 径向光晕伪元素 - 已上传态/选中态仅通过 border-color 和背景色微调区分	2026-06-04 13:16:38 +08:00
ludan	b08a7918da	feat: 剧本评分左侧面板滚动优化、电商克隆移动端适配、视觉细节精修【剧本评分左侧面板滚动重构】 - 新增 script-eval-v5-left-main 滚动容器，上传区/AI信息/历史记录统一在容器内滚动 - 底部操作按钮（开始评测/导出报告）独立于滚动区外，始终可见可点击 - 历史评测列表增加 max-height 限制，超出区域内置滚动条 - 自定义窄滚动条（品牌绿半透明 thumb），保持视觉干净 - 短视口（≤760px/820px）压缩上传区和历史列表最小高度【剧本评分视觉精修】 - 左侧面板增加渐变背景层次与分区微光分割线 - 上传区增加 ::after 伪元素径向光晕，hover 时品牌绿边框增强 - 已上传状态上传区增加绿色边框高亮（is-ready/is-complete） - 底部操作栏背景层次加深，导出按钮 hover 增加绿色反馈 - 右侧面板增加底部径向渐变，上传引导卡标题提亮 - 顶部状态栏背景加深，模糊效果增强【电商克隆移动端适配增强】 - 900px/620px/480px 三级断点增加顶部预留空间，避免与导航重叠 - Logo 区域定位从 sticky 改为 static，避免滚动时遮挡内容 - 设置面板在窄屏下调整内边距与边距【Token 用量页精简】 - 移除指标卡片序号角标，保持卡片视觉简洁	2026-06-04 09:40:28 +08:00
ludan	7be4e65e1e	feat: 管理中心Token用量页面SaaS商业化精修【页面状态感知】 - 新增页面级状态类名（is-syncing/has-sync-error/has-low-balance/is-healthy） - 状态指示灯根据加载/错误/正常动态切换样式与动画 - 加载中禁用刷新按钮，防止重复请求【工具栏视觉升级】 - 标题增加副标题（"用量、成员与模型调用监控"） - 状态胶囊 pill 增加圆点动画（绿色脉冲=在线，琥珀色=异常） - 按钮增加 hover 品牌绿高亮、禁用态半透明 - 成员管理按钮增加 is-muted-action 弱化样式【指标卡片精修】 - 四张指标卡片增加序号角标（01-04），左侧彩色竖线标识 - 主卡片（可用额度）增加品牌绿光晕背景 + 绿色竖线 - 卡片增加渐变背景、顶部光泽内阴影、圆角阴影【数据展示增强】 - 模型消耗分布/系统状态/调用记录标题增加图标 - 模型消耗列表项增加 hover 浮起 + 品牌绿边框 - 调用记录表格增加表头背景、行 hover 高亮、状态标签徽章 - 分页按钮增加 hover 品牌绿填充【响应式适配】 - 1180px/900px/560px 三级断点完整适配 - 900px：工具栏吸顶、指标卡单列、图表区单列 - 560px：工具栏按钮 2 列网格、状态胶囊全宽、卡片间距缩小	2026-06-03 18:52:14 +08:00
ludan	73a6043310	feat: 剧本评分SaaS化精修、画布视觉升级、电商克隆预览响应式修复【剧本评分页面 SaaS 商业化精修】 - 上传区增加玻璃拟态渐变边框，hover 时高亮为品牌绿 - 已上传文件显示文件名+文件大小，重新上传按钮优化 - 上传按钮文案从"+ 上传剧本"改为"选择剧本"，增加图标 - 评测按钮增加 LoadingOutlined/ThunderboltOutlined 图标动画 - 评测等待态增加分步加载提示（结构识别/冲突评估/商业潜力） - 六维评分柱状图增加 hover/focus 交互：悬停维度高亮，其余维度 dim，底部显示当前维度详细说明 - 评分卡片、报告面板、历史记录项增加渐变背景与阴影层次 - 新增 script-tokens-v5 设计 Token 变量体系 - 响应式断点适配 1180px/900px/680px，移动端左右面板上下堆叠【画布页面视觉升级】 - 画布背景增加网点纹理 + 径向渐变，增强空间感 - 项目栏/缩放控件增加玻璃拟态毛玻璃效果 - 节点卡片增加渐变背景、内阴影、边框高亮 - 选中节点增加品牌绿外圈光环 + 投影 - 连线 connector 增加 hover 品牌绿高亮 - 节点连线/选区框/缩放手柄统一品牌绿主题色 - 所有编辑器/菜单面板统一玻璃拟态风格 - 移动端 560px 项目栏改为 4 列网格布局，按钮显示中文标签（编辑/最近/导出/提交）【电商克隆预览响应式修复】 - 短视口（高度≤760px）下预览面板内 header/空状态/底部输入改为静态流式布局 - 平板（≤860px）下预览面板取消绝对定位，改为 grid 流式布局 - 手机（≤620px）缩小间距与最小高度【其他】 - 个人中心登录注册表单移除 form-kicker 标签 - 品牌色（auth-page__brand）调整为强调绿色	2026-06-03 18:21:10 +08:00