feat: 电商页面视觉精修，全局页面滚动按钮交互简化

AppShell.tsx： - 全局页面滚动操作按钮（floating-page-scroll-actions）暂时关闭 - 后续将通过页面级滚动交互替代全局滚动按钮 EcommercePage.tsx（电商生成页功能增强）： - 预览区header下方新增生成配置摘要条(clone-ai-preview-summary) - 展示当前选择的输出类型、平台、市场、语言、比例参数 - 方便用户快速确认当前生成配置无误 ecommerce.css（电商页面视觉精修）： - 新增CSS自定义属性体系(ecm-*)，统一电商页面颜色/间距/阴影 - 页面背景增加accent径向光晕和半透明渐变叠加 - 设置面板/预览区域卡片增加毛玻璃质感和微阴影 - 文本颜色层级化（ecm-text/ecm-muted/ecm-soft） - 保持现有布局结构不变，仅提升视觉效果 dark-green.css（暗绿主题电商按钮状态精修）： - 电商页面各工具模块按钮active态增加相对定位和overflow控制 - clone/set/detail/wear工具中is-active按钮状态一致性增强 - 限定在[data-view="ecommerce"]作用域内，避免全局污染
feat: 登录注册表单体验优化、工作台滚动按钮交互增强、主题层视觉精修
2026-06-03 16:42:57 +08:00 · 2026-06-03 15:38:52 +08:00 · 2026-06-03 10:48:48 +08:00 · 2026-06-03 09:55:15 +08:00 · 2026-06-03 09:53:05 +08:00 · 2026-06-02 21:30:06 +08:00
8 changed files with 3358 additions and 58 deletions
@@ -88,7 +88,7 @@ function AppShell({
    "avatarConsole",
    "characterMix",
  ] as WebViewKey[];
-  const showPageScrollActions = showFloatingNav && !toolSurfaceViews.includes(activeView);
+  const showPageScrollActions = false;

  const visibleNavItems = useMemo(
    () => {
@@ -2873,6 +2873,13 @@ 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" ? (
@@ -1,7 +1,10 @@
 import {
  CameraOutlined,
+  CheckOutlined,
  CheckCircleFilled,
+  CloseOutlined,
  DeleteOutlined,
+  EditOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
@@ -134,6 +137,48 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
  };
 }

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

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

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

+  const startBioEdit = () => {
+    setBioEditBackup(profileBio);
+    setBioStatusNotice(null);
+    setIsBioEditing(true);
+  };
+
+  const confirmBioEdit = () => {
+    handleBioBlur();
+    setIsBioEditing(false);
+    setBioStatusNotice("个性签名已保存");
+  };
+
+  const cancelBioEdit = () => {
+    setProfileBio(bioEditBackup);
+    setIsBioEditing(false);
+    setBioStatusNotice(null);
+  };
+
  const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
    <div className="profile-page__empty-state">
+      <span className="profile-page__empty-mark" aria-hidden="true">
+        <PlusOutlined />
+      </span>
      <p className="profile-page__empty-text">{text}</p>
      <button type="button" className="profile-page__empty-btn" onClick={action}>
        <PlusOutlined />
@@ -463,12 +535,12 @@ function ProfilePage({
            <article key={task.id} className="profile-page__list-card">
              <div className="profile-page__list-card-head">
                <strong>{task.title}</strong>
-                <span>{task.type}</span>
+                <span>{formatTaskType(task.type)}</span>
              </div>
              <p>{task.prompt}</p>
              <div className="profile-page__list-card-meta">
-                <span>{task.status}</span>
-                <span>{task.createdAt}</span>
+                <span>{formatTaskStatus(task.status)}</span>
+                <span>{formatProfileDate(task.createdAt)}</span>
              </div>
            </article>
          ))}
@@ -485,7 +557,7 @@ function ProfilePage({
            <article key={project.id} className="profile-page__list-card">
              <div className="profile-page__list-card-head">
                <strong>{project.name}</strong>
-                <span>{project.updatedAt}</span>
+                <span>{formatProfileDate(project.updatedAt)}</span>
                {onDeleteProject ? (
                  <button
                    type="button"
@@ -517,12 +589,12 @@ function ProfilePage({
            <article key={asset.id} className="profile-page__list-card">
              <div className="profile-page__list-card-head">
                <strong>{asset.name}</strong>
-                <span>{asset.status}</span>
+                <span>{formatAssetStatus(asset.status)}</span>
              </div>
              <p>{asset.description}</p>
              <div className="profile-page__list-card-meta">
                <span>{asset.type}</span>
-                <span>{asset.updatedAt}</span>
+                <span>{formatProfileDate(asset.updatedAt)}</span>
              </div>
            </article>
          ))}
@@ -585,15 +657,39 @@ function ProfilePage({
                </span>
              </div>
              <strong className="profile-page__username">{displayName}</strong>
-              <textarea
-                className="profile-page__bio"
-                value={profileBio}
-                onChange={(event) => setProfileBio(event.target.value)}
-                onBlur={handleBioBlur}
-                placeholder={displayedBio}
-                rows={2}
-                maxLength={80}
-              />
+              {isBioEditing ? (
+                <div className="profile-page__bio-editor">
+                  <textarea
+                    className="profile-page__bio"
+                    value={profileBio}
+                    onChange={(event) => setProfileBio(event.target.value)}
+                    placeholder="填写一句个人签名"
+                    rows={2}
+                    maxLength={80}
+                    autoFocus
+                  />
+                  <div className="profile-page__bio-actions">
+                    <button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
+                      <CheckOutlined />
+                      保存
+                    </button>
+                    <button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
+                      <CloseOutlined />
+                      取消
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
+                  onClick={startBioEdit}
+                >
+                  <span>{displayedBio}</span>
+                  <EditOutlined className="profile-page__bio-edit-icon" />
+                </button>
+              )}
+              {bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
              {profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
            </div>

@@ -612,18 +708,21 @@ function ProfilePage({
              </div>
            </div>

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

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

@@ -816,6 +947,11 @@ function ProfilePage({
                    autoComplete={mode === "login" ? "current-password" : "new-password"}
                  />
                  {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  {mode === "register" && passwordLooksReady && !fieldErrors.password ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 密码长度符合要求
+                    </span>
+                  ) : null}
                </label>
                {mode === "login" ? (
                  <div className="auth-page__forgot">
@@ -853,6 +989,11 @@ function ProfilePage({
                    autoComplete="email"
                  />
                  {fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null}
+                  {emailLooksValid && !fieldErrors.email ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 邮箱格式正确
+                    </span>
+                  ) : null}
                </label>
                <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
                  <span>
@@ -867,6 +1008,11 @@ function ProfilePage({
                    autoComplete={mode === "login" ? "current-password" : "new-password"}
                  />
                  {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  {mode === "register" && passwordLooksReady && !fieldErrors.password ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 密码长度符合要求
+                    </span>
+                  ) : null}
                </label>
              </>
            ) : null}
@@ -882,6 +1028,11 @@ function ProfilePage({
                    <input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" />
                  </div>
                  {fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null}
+                  {phoneLooksValid && !fieldErrors.phone ? (
+                    <span className="auth-page__field-hint">
+                      <CheckCircleFilled /> 手机号格式正确
+                    </span>
+                  ) : null}
                </label>
                <label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}>
                  <span>
@@ -907,6 +1058,11 @@ function ProfilePage({
                    </span>
                    <input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" />
                    {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                    {passwordLooksReady && !fieldErrors.password ? (
+                      <span className="auth-page__field-hint">
+                        <CheckCircleFilled /> 密码长度符合要求
+                      </span>
+                    ) : null}
                  </label>
                ) : null}
              </>
@@ -236,6 +236,7 @@ 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[]>([]);
@@ -273,6 +274,8 @@ 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(() => {
@@ -441,6 +444,27 @@ 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;
@@ -451,6 +475,7 @@ function WorkbenchPage({

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

  const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
    () => [
@@ -1373,6 +1398,9 @@ 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);
@@ -1384,7 +1412,7 @@ function WorkbenchPage({

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

  const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
    const surface = messagesSurfaceRef.current;
@@ -1392,8 +1420,9 @@ 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>) => {
@@ -3022,10 +3051,13 @@ function WorkbenchPage({
                {renderComposerToolbar(false, isGenerating)}
              </div>
            </section>
-            <div className="wb-chat-scroll-actions" aria-label="聊天滚动">
+            <div
+              className={`wb-chat-scroll-actions${scrollActionsVisible ? " is-visible" : ""}${scrollActionDirection ? ` is-${scrollActionDirection}` : ""}`}
+              aria-label="聊天滚动"
+            >
              <button
                type="button"
-                className="wb-chat-scroll-actions__button"
+                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top"
                title="返回聊天顶部"
                aria-label="返回聊天顶部"
                onClick={() => scrollMessagesSurface("top")}
@@ -3034,7 +3066,7 @@ function WorkbenchPage({
              </button>
              <button
                type="button"
-                className="wb-chat-scroll-actions__button"
+                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom"
                title="到达聊天底部"
                aria-label="到达聊天底部"
                onClick={() => scrollMessagesSurface("bottom")}
@@ -7933,3 +7933,777 @@
 .clone-ai-adwizard__risk.is-medium { color: #faad14; }
 .clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
 .clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
+
+/* Ecommerce generation page SaaS polish: visual-only refinement for the product creation workspace. */
+.product-clone-page {
+  --ecm-page: #0e1012;
+  --ecm-panel: rgba(20, 23, 25, 0.96);
+  --ecm-panel-strong: rgba(24, 28, 30, 0.98);
+  --ecm-inset: rgba(255, 255, 255, 0.035);
+  --ecm-inset-hover: rgba(255, 255, 255, 0.06);
+  --ecm-line: rgba(255, 255, 255, 0.095);
+  --ecm-line-strong: rgba(255, 255, 255, 0.14);
+  --ecm-text: #eef4f0;
+  --ecm-muted: rgba(232, 240, 235, 0.62);
+  --ecm-soft: rgba(232, 240, 235, 0.42);
+  --ecm-accent: var(--accent, #00ff88);
+  --ecm-accent-rgb: var(--accent-rgb, 0, 255, 136);
+  --ecm-radius-sm: 10px;
+  --ecm-radius-md: 14px;
+  --ecm-radius-lg: 18px;
+  --ecm-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.2);
+  --ecm-shadow-panel: 0 18px 54px rgba(0, 0, 0, 0.28);
+  background:
+    radial-gradient(circle at 26% 0%, rgba(var(--ecm-accent-rgb), 0.055), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 150px),
+    var(--ecm-page);
+  color: var(--ecm-text);
+  font-family: var(--font-sans, Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif);
+}
+
+.product-clone-page > .product-clone-shell {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 22%, transparent 76%, rgba(255, 255, 255, 0.014)),
+    transparent;
+}
+
+.product-clone-page :is(button, select, textarea, input) {
+  font-family: inherit;
+  letter-spacing: 0;
+}
+
+.product-clone-page :is(button, select, textarea):focus-visible {
+  outline: 2px solid rgba(var(--ecm-accent-rgb), 0.48);
+  outline-offset: 2px;
+}
+
+.product-clone-page :is(button, select, textarea):disabled {
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="clone"] {
+  --clone-settings-panel-width: clamp(420px, 36vw, 540px);
+  background:
+    radial-gradient(circle at 72% 12%, rgba(var(--ecm-accent-rgb), 0.045), transparent 31%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
+    var(--ecm-page);
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell,
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  background: transparent;
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel {
+  border-right-color: var(--ecm-line);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 150px),
+    var(--ecm-panel);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel {
+  gap: 12px;
+  padding: 18px;
+  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.035);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  margin: -18px -18px 2px;
+  padding: 16px 18px 14px;
+  border-bottom-color: var(--ecm-line);
+  background:
+    linear-gradient(180deg, rgba(21, 24, 26, 0.98), rgba(21, 24, 26, 0.9));
+  backdrop-filter: blur(16px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo__mark {
+  border-radius: 9px;
+  box-shadow: 0 0 0 1px rgba(var(--ecm-accent-rgb), 0.18), 0 10px 24px rgba(var(--ecm-accent-rgb), 0.14);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo strong {
+  font-size: 15px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo em {
+  border-color: var(--ecm-line);
+  background: var(--ecm-inset);
+  color: var(--ecm-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-card,
+  .clone-ai-platform-spec,
+  .clone-ai-count-panel,
+  .clone-ai-replicate-panel,
+  .clone-ai-module-panel,
+  .clone-ai-model-panel,
+  .clone-ai-video-panel
+) {
+  border-color: var(--ecm-line);
+  border-radius: var(--ecm-radius-md);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%),
+    var(--ecm-panel-strong);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card {
+  padding: 13px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card h2 {
+  margin-bottom: 10px;
+  color: var(--ecm-muted);
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+  min-height: 140px;
+  border-color: rgba(255, 255, 255, 0.16);
+  border-radius: var(--ecm-radius-md);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%),
+    var(--ecm-inset);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-dragging {
+  border-color: rgba(var(--ecm-accent-rgb), 0.55);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.14), transparent 60%),
+    rgba(var(--ecm-accent-rgb), 0.055);
+  transform: translateY(-1px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-icon {
+  background: rgba(var(--ecm-accent-rgb), 0.09);
+  color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-tag-group button,
+  .clone-ai-basic-select > button,
+  .clone-ai-basic-select__menu,
+  .clone-ai-basic-select__menu button,
+  .clone-ai-replicate-tabs button,
+  .clone-ai-replicate-upload,
+  .clone-ai-replicate-levels button,
+  .clone-ai-count-row,
+  .clone-ai-count-stepper button,
+  .clone-ai-module-list button,
+  .clone-ai-model-tabs button,
+  .clone-ai-model-scene-grid button,
+  .clone-ai-model-select,
+  .clone-ai-model-select > button,
+  .clone-ai-model-select__menu,
+  .clone-ai-model-select__menu button,
+  .clone-ai-video-options button,
+  .clone-ai-video-smart
+) {
+  border-color: var(--ecm-line);
+  background: var(--ecm-inset);
+  color: var(--ecm-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-tag-group button:hover,
+  .clone-ai-basic-select > button:hover,
+  .clone-ai-basic-select > button.is-open,
+  .clone-ai-basic-select__menu button:hover,
+  .clone-ai-replicate-tabs button:hover,
+  .clone-ai-replicate-upload:hover,
+  .clone-ai-replicate-levels button:hover,
+  .clone-ai-count-stepper button:hover:not(:disabled),
+  .clone-ai-module-list button:hover,
+  .clone-ai-model-tabs button:hover,
+  .clone-ai-model-scene-grid button:hover,
+  .clone-ai-model-select > button:hover,
+  .clone-ai-model-select > button.is-open,
+  .clone-ai-model-select__menu button:hover,
+  .clone-ai-video-options button:hover,
+  .clone-ai-video-smart:hover
+) {
+  border-color: var(--ecm-line-strong);
+  background: var(--ecm-inset-hover);
+  color: var(--ecm-text);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-tag-group button.is-active,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button.is-active,
+  .clone-ai-replicate-levels button.is-active,
+  .clone-ai-module-list button.is-active,
+  .clone-ai-model-tabs button.is-active,
+  .clone-ai-model-scene-grid button.is-active,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button.is-active,
+  .clone-ai-video-smart.is-on
+) {
+  border-color: rgba(var(--ecm-accent-rgb), 0.48);
+  background:
+    linear-gradient(180deg, rgba(var(--ecm-accent-rgb), 0.16), rgba(var(--ecm-accent-rgb), 0.07));
+  color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-generate, .clone-ai-send-button, .clone-ai-upload-zone strong) {
+  background: var(--ecm-accent);
+  color: var(--dg-button-text, #061014);
+  box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
+}
+
+.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);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:disabled, .clone-ai-send-button:disabled) {
+  border-color: var(--ecm-line);
+  background: var(--ecm-inset);
+  color: var(--ecm-soft);
+  filter: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle {
+  border-color: var(--ecm-line-strong);
+  background: rgba(20, 23, 25, 0.86);
+  color: var(--ecm-muted);
+  box-shadow: var(--ecm-shadow-soft);
+  backdrop-filter: blur(14px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
+  border-color: rgba(var(--ecm-accent-rgb), 0.5);
+  background: rgba(var(--ecm-accent-rgb), 0.09);
+  color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  align-content: center;
+  gap: 20px;
+  padding: 90px clamp(22px, 4vw, 46px) 134px;
+  background:
+    radial-gradient(circle at 50% 42%, rgba(var(--ecm-accent-rgb), 0.035), transparent 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 160px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+  top: 28px;
+  right: clamp(22px, 4vw, 46px);
+  left: clamp(22px, 4vw, 46px);
+  max-width: none;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header strong {
+  font-size: clamp(18px, 1.6vw, 22px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header span {
+  max-width: 620px;
+  color: var(--ecm-muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+  width: min(100%, 580px);
+  min-height: 260px;
+  padding: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.055);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.014);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state .anticon {
+  width: 84px;
+  height: 84px;
+  border-color: var(--ecm-line);
+  background:
+    radial-gradient(circle at 50% 16%, rgba(var(--ecm-accent-rgb), 0.12), transparent 62%),
+    var(--ecm-panel-strong);
+  color: rgba(var(--ecm-accent-rgb), 0.46);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-showcase {
+  gap: 18px;
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-main-result, .clone-ai-result-grid button) {
+  border-color: var(--ecm-line);
+  background: var(--ecm-panel-strong);
+  box-shadow: var(--ecm-shadow-soft);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-main-result:hover, .clone-ai-result-grid button:hover) {
+  border-color: rgba(var(--ecm-accent-rgb), 0.38);
+  box-shadow: var(--ecm-shadow-panel);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+  right: clamp(18px, 4vw, 46px);
+  bottom: 20px;
+  left: clamp(18px, 4vw, 46px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper {
+  border-color: var(--ecm-line);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
+    rgba(20, 24, 23, 0.92);
+  box-shadow: var(--ecm-shadow-panel);
+  backdrop-filter: blur(18px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper:focus-within {
+  border-color: rgba(var(--ecm-accent-rgb), 0.42);
+  box-shadow:
+    0 20px 58px rgba(0, 0, 0, 0.34),
+    0 0 0 1px rgba(var(--ecm-accent-rgb), 0.08);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
+  color: var(--ecm-text);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-char-count {
+  color: var(--ecm-soft);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) {
+  background: var(--ecm-page);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-panel,
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-rail {
+  border-color: var(--ecm-line);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 160px),
+    var(--ecm-panel);
+}
+
+.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button {
+  border-radius: var(--ecm-radius-sm);
+  color: var(--ecm-muted);
+}
+
+.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button:hover,
+.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button.is-active {
+  background: rgba(var(--ecm-accent-rgb), 0.1);
+  color: var(--ecm-accent);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-clone-field,
+  .product-set-upload-section,
+  .product-set-settings-section,
+  .product-set-detail-section
+) {
+  border-color: var(--ecm-line);
+  border-radius: var(--ecm-radius-lg);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent 54%),
+    var(--ecm-panel-strong);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-clone-field h2,
+  .product-set-upload-section h2,
+  .product-set-settings-section h2,
+  .product-set-detail-section h2
+) {
+  color: var(--ecm-text);
+  font-size: 15px;
+  font-weight: 820;
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  select,
+  textarea,
+  .product-clone-upload-zone,
+  .product-set-upload,
+  .product-set-output-grid button,
+  .product-set-structure-grid button,
+  .product-detail-module-grid button,
+  .product-clone-scene-grid button,
+  .product-clone-ratio-row button,
+  .product-clone-segment button,
+  .product-clone-model-button,
+  .product-clone-switch-row,
+  .product-set-style-toggle
+) {
+  border-color: var(--ecm-line);
+  border-radius: var(--ecm-radius-sm);
+  background: var(--ecm-inset);
+  color: var(--ecm-muted);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  select:hover,
+  textarea:hover,
+  .product-clone-upload-zone:hover,
+  .product-set-upload:hover,
+  .product-set-output-grid button:hover,
+  .product-set-structure-grid button:hover,
+  .product-detail-module-grid button:hover,
+  .product-clone-scene-grid button:hover,
+  .product-clone-ratio-row button:hover,
+  .product-clone-segment button:hover,
+  .product-clone-model-button:hover,
+  .product-clone-switch-row:hover,
+  .product-set-style-toggle:hover
+) {
+  border-color: var(--ecm-line-strong);
+  background: var(--ecm-inset-hover);
+  color: var(--ecm-text);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-set-output-grid button.is-active,
+  .product-set-structure-grid button.is-active,
+  .product-detail-module-grid button.is-active,
+  .product-clone-scene-grid button.is-active,
+  .product-clone-ratio-row button.is-active,
+  .product-clone-segment button.is-active,
+  .product-set-style-toggle.is-active
+) {
+  border-color: rgba(var(--ecm-accent-rgb), 0.48);
+  background: rgba(var(--ecm-accent-rgb), 0.12);
+  color: var(--ecm-accent);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(.product-clone-primary, .product-set-floating-submit) {
+  border: 0;
+  background: var(--ecm-accent);
+  color: var(--dg-button-text, #061014);
+  box-shadow: 0 12px 30px rgba(var(--ecm-accent-rgb), 0.18);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(.product-clone-primary, .product-set-floating-submit):disabled {
+  background: var(--ecm-inset);
+  color: var(--ecm-soft);
+  box-shadow: none;
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-preview {
+  background:
+    radial-gradient(circle at 50% 40%, rgba(var(--ecm-accent-rgb), 0.032), transparent 40%),
+    transparent;
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-set-empty-preview,
+  .product-clone-empty-panel
+) {
+  border-color: rgba(255, 255, 255, 0.055);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.014);
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail {
+  border-color: var(--ecm-line);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
+    rgba(20, 24, 23, 0.92);
+  box-shadow: var(--ecm-shadow-panel);
+  backdrop-filter: blur(18px);
+}
+
+.ecommerce-progress-bar {
+  border-color: rgba(var(--ecm-accent-rgb), 0.22);
+  background: rgba(var(--ecm-accent-rgb), 0.07);
+}
+
+.ecommerce-progress-bar__fill {
+  box-shadow: 0 0 18px rgba(var(--ecm-accent-rgb), 0.36);
+}
+
+@media (max-width: 1180px) {
+  .product-clone-page[data-tool="clone"] {
+    --clone-settings-panel-width: clamp(390px, 45vw, 440px);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    padding-right: 28px;
+    padding-left: 28px;
+  }
+}
+
+@media (max-width: 860px) {
+  .product-clone-page[data-tool="clone"] {
+    height: auto;
+    min-height: 100%;
+    overflow: auto;
+  }
+
+  .product-clone-page[data-tool="clone"] > .product-clone-shell,
+  .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(620px, 1fr);
+    height: auto;
+    min-height: 100%;
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+    grid-template-rows: 0 minmax(620px, 1fr);
+  }
+
+  .product-clone-page[data-tool="clone"] .product-clone-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--ecm-line);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-panel {
+    width: 100%;
+    max-width: none;
+    max-height: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle,
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-settings-toggle {
+    top: 14px;
+    right: 14px;
+    left: auto;
+    transform: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active {
+    transform: scale(0.94);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 620px;
+    padding: 92px 18px 134px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+    top: 24px;
+    right: 18px;
+    left: 18px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase {
+    grid-template-columns: 1fr;
+    width: min(100%, 520px);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+    display: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-main-result {
+    height: 260px;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-panel__scroll,
+  .product-clone-page[data-tool="clone"] .clone-ai-panel {
+    padding: 14px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-logo {
+    margin: -14px -14px 0;
+    padding: 14px 54px 12px 14px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-card,
+  .product-clone-page[data-tool="clone"] :is(.clone-ai-platform-spec, .clone-ai-count-panel, .clone-ai-replicate-panel, .clone-ai-module-panel, .clone-ai-model-panel, .clone-ai-video-panel) {
+    padding: 11px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+    min-height: 120px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-tag-group,
+  .product-clone-page[data-tool="clone"] .clone-ai-basic-select-grid,
+  .product-clone-page[data-tool="clone"] .clone-ai-model-select-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 560px;
+    padding: 86px 12px 128px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+    min-height: 220px;
+    padding: 22px 16px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+    right: 10px;
+    bottom: 12px;
+    left: 10px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper {
+    grid-template-columns: minmax(0, 1fr) 36px;
+    gap: 8px;
+    padding: 10px;
+    border-radius: 16px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-send-button {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+@media (max-width: 900px) {
+  .product-clone-page {
+    box-sizing: border-box;
+    padding-top: 58px;
+  }
+
+  .product-clone-page > .product-clone-shell {
+    min-height: calc(100% - 58px);
+  }
+}
+
+@media (max-width: 480px) {
+  .product-clone-page {
+    padding-top: 56px;
+  }
+
+  .product-clone-page > .product-clone-shell {
+    min-height: calc(100% - 56px);
+  }
+}
+
+/* Ecommerce refinement pass: make the preview state more informative and selected controls quieter. */
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  padding-top: 138px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+  gap: 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  max-width: min(100%, 720px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-summary span {
+  display: inline-flex;
+  align-items: center;
+  max-width: 180px;
+  min-height: 26px;
+  padding: 0 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.095);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.035);
+  color: rgba(232, 240, 235, 0.68);
+  font-size: 11px;
+  font-weight: 780;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-summary span:first-child {
+  border-color: rgba(var(--ecm-accent-rgb), 0.28);
+  background: rgba(var(--ecm-accent-rgb), 0.08);
+  color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-module-list button,
+  .clone-ai-model-scene-grid button,
+  .clone-ai-replicate-levels button,
+  .clone-ai-video-options button
+),
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-set-structure-grid button,
+  .product-detail-module-grid button,
+  .product-clone-scene-grid button,
+  .product-clone-ratio-row button
+) {
+  position: relative;
+  overflow: hidden;
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-module-list button.is-active,
+  .clone-ai-model-scene-grid button.is-active,
+  .clone-ai-replicate-levels button.is-active,
+  .clone-ai-video-options button.is-active
+),
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-set-structure-grid button.is-active,
+  .product-detail-module-grid button.is-active,
+  .product-clone-scene-grid button.is-active,
+  .product-clone-ratio-row button.is-active
+) {
+  border-color: rgba(var(--ecm-accent-rgb), 0.5);
+  background:
+    linear-gradient(90deg, rgba(var(--ecm-accent-rgb), 0.13), rgba(var(--ecm-accent-rgb), 0.035)),
+    rgba(255, 255, 255, 0.035);
+  color: var(--ecm-text);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-module-list button.is-active,
+  .clone-ai-model-scene-grid button.is-active,
+  .clone-ai-replicate-levels button.is-active,
+  .clone-ai-video-options button.is-active
+)::before,
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-set-structure-grid button.is-active,
+  .product-detail-module-grid button.is-active,
+  .product-clone-scene-grid button.is-active,
+  .product-clone-ratio-row button.is-active
+)::before {
+  position: absolute;
+  inset: 8px auto 8px 0;
+  width: 3px;
+  border-radius: 999px;
+  background: var(--ecm-accent);
+  content: "";
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active span,
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+  .product-set-structure-grid button.is-active em,
+  .product-detail-module-grid button.is-active span
+) {
+  color: rgba(232, 240, 235, 0.62);
+}
+
+@media (max-width: 860px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    padding-top: 148px;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    padding-top: 158px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-summary {
+    gap: 6px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-summary span {
+    max-width: 138px;
+    min-height: 24px;
+    padding: 0 8px;
+    font-size: 10px;
+  }
+}
@@ -148,37 +148,83 @@
  min-width: 0;
  min-height: 72px;
  padding: 0 28px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-inset);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(15, 17, 19, 0.84) 100%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 2px 8px rgba(0, 0, 0, 0.28);
  color: var(--fg-body);
  cursor: pointer;
-  font-size: 17px;
-  font-weight: 850;
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  transition:
+    border-color 240ms ease,
+    background 240ms ease,
+    color 240ms ease,
+    transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1),
+    box-shadow 240ms ease;
 }

 .omni-home__entry .anticon {
-  font-size: 18px;
+  font-size: 19px;
+  transition: color 240ms ease, transform 240ms ease;
 }

 .omni-home__entry:hover {
-  border-color: var(--border-default);
-  background: var(--bg-hover);
+  border-color: rgba(255, 255, 255, 0.16);
+  background: linear-gradient(180deg, rgba(28, 32, 36, 0.78) 0%, rgba(18, 22, 25, 0.88) 100%);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 0 24px rgba(var(--accent-rgb), 0.06),
+    0 4px 16px rgba(0, 0, 0, 0.36);
  color: #ffffff;
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+}
+
+.omni-home__entry:hover .anticon {
+  color: var(--accent);
+  transform: scale(1.08);
+}
+
+.omni-home__entry:active {
+  transform: translateY(0) scale(0.97);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.02) inset,
+    0 1px 4px rgba(0, 0, 0, 0.32);
+  transition-duration: 80ms;
 }

 .omni-home__entry--primary {
-  border-color: var(--accent);
-  background: var(--accent);
-  color: var(--dg-button-text, #061014);
+  border-color: rgba(var(--accent-rgb), 0.48);
+  background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.12) inset,
+    0 0 28px rgba(var(--accent-rgb), 0.18),
+    0 2px 12px rgba(0, 0, 0, 0.28);
+  color: #061014;
 }

 .omni-home__entry--primary:hover {
-  border-color: var(--accent-hover, var(--accent));
-  background: var(--accent-hover, var(--accent));
-  color: var(--dg-button-text, #061014);
+  border-color: rgba(var(--accent-rgb), 0.64);
+  background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.16) inset,
+    0 0 40px rgba(var(--accent-rgb), 0.28),
+    0 6px 24px rgba(0, 0, 0, 0.36);
+  color: #061014;
+}
+
+.omni-home__entry--primary .anticon {
+  color: #061014;
+}
+
+.omni-home__entry--primary:hover .anticon {
+  color: #061014;
+  transform: scale(1.12);
 }

 .omni-home__carousel {
@@ -3400,6 +3400,7 @@
  width: 100%;
  height: 100%;
  min-height: 520px;
+  max-height: 520px;
  padding: 18px 22px;
  border: none;
  outline: none;
@@ -3409,6 +3410,7 @@
  font-size: 14px;
  line-height: 1.9;
  resize: none;
+  overflow-y: auto;
 }

 .script-eval-v4-text-input::placeholder {
@@ -4268,6 +4270,11 @@
 .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 {
Author	SHA1	Message	Date
ludan	9282e6c0d8	feat: 电商页面视觉精修，全局页面滚动按钮交互简化 AppShell.tsx： - 全局页面滚动操作按钮（floating-page-scroll-actions）暂时关闭 - 后续将通过页面级滚动交互替代全局滚动按钮 EcommercePage.tsx（电商生成页功能增强）： - 预览区header下方新增生成配置摘要条(clone-ai-preview-summary) - 展示当前选择的输出类型、平台、市场、语言、比例参数 - 方便用户快速确认当前生成配置无误 ecommerce.css（电商页面视觉精修）： - 新增CSS自定义属性体系(ecm-*)，统一电商页面颜色/间距/阴影 - 页面背景增加accent径向光晕和半透明渐变叠加 - 设置面板/预览区域卡片增加毛玻璃质感和微阴影 - 文本颜色层级化（ecm-text/ecm-muted/ecm-soft） - 保持现有布局结构不变，仅提升视觉效果 dark-green.css（暗绿主题电商按钮状态精修）： - 电商页面各工具模块按钮active态增加相对定位和overflow控制 - clone/set/detail/wear工具中is-active按钮状态一致性增强 - 限定在[data-view="ecommerce"]作用域内，避免全局污染	2026-06-03 16:42:57 +08:00
ludan	f0f6f66d60	feat: 登录注册表单体验优化、工作台滚动按钮交互增强、主题层视觉精修 ProfilePage.tsx（登录/注册表单优化）： - 新增邮箱格式、手机号、密码强度前端校验逻辑 - 输入框内联校验提示（CheckCircleFilled图标+绿色文字） - 登录态展示区增加平台能力Stats（Studio/Assets/Team） - 表单增加kicker标签区分"账户登录"/"新用户注册" - 手机验证码tab标签精简为"手机" WorkbenchPage.tsx（工作台滚动交互增强）： - 新增滚动操作按钮显隐状态管理（scrollActionsVisible/direction） - 滚动时自动展示上下滚动按钮，950ms后自动隐藏 - scrollMessagesToLatest触发时间接展示滚动按钮 - 组件卸载时清理定时器避免内存泄漏 dark-green.css（主题层视觉精修）： - 工作台激活态页面背景增加微光渐变和径向光晕 - 消息表面区域增加内边距和scrollbar-gutter稳定布局 - 消息列表最大宽度约束为1040px，左右padding自适应 - 消息气泡增加边框、背景、阴影层次感 - AI助手气泡与用户气泡差异化背景色 - 头像增加微边框和accent色区分 - 作者标签字号和颜色精细调整	2026-06-03 15:38:52 +08:00
ludan	da45196c6e	Merge remote-tracking branch 'origin/master' into feat/profile-ui-polish	2026-06-03 10:48:48 +08:00
ludan	da06187a9c	Merge branch 'master' of http://118.145.251.184:3000/OmniAI/omniai-web into feat/profile-ui-polish	2026-06-03 09:55:15 +08:00
ludan	87d81d2c86	feat: 个人中心界面UI优化，提升商业产品精致度 ProfilePage组件优化： - 新增个性签名编辑功能（内联编辑/确认/取消交互） - 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined） - 新增 formatProfileDate 工具函数，统一日期格式化（中文友好） - 新增 formatTaskType 函数，任务类型中文化显示 - 新增 formatTaskStatus 函数，任务状态中文化显示 - 新增 formatAssetStatus 函数，资产状态中文化显示 - 优化空状态展示，增加图标占位 dark-green主题层样式增强： - 个人中心背景增加微光渐变（accent光晕+半透明遮罩） - Banner区域高度优化为214px，增加底部渐变分割线 - Banner叠加层增加径向光晕效果 - Banner编辑按钮增加毛玻璃质感（backdrop-filter） - 侧边栏/主体/选项卡/列表卡片等多处细节增强 - 按钮、标签、统计数字等组件加入微交互 - 保持暗绿主题配色体系不变，仅提升精致度	2026-06-03 09:53:05 +08:00
ludan	178c2ec695	Merge branch 'master' of http://118.145.251.184:3000/OmniAI/omniai-web into feat/home-entry-buttons-refined	2026-06-02 21:30:06 +08:00
ludan	324ebf5ce5	feat: 优化首页入口按钮质感，提升商业产品精致度 - 按钮背景改为微渐变+毛玻璃效果(backdrop-filter) - 边框改为半透明白色，圆角从8px升级到12px - 增加内高光+外层深度阴影提升层次感 - 字间距、字重大小幅调整，更精致克制 - hover态增加accent光晕+图标变绿+放大效果 - 主按钮增加渐变绿底+内高光+绿色辉光阴影 - 增加按压态scale(0.97)反馈 - 主按钮图标hover放大1.12倍	2026-06-02 19:09:00 +08:00
ludan	9ababfda46	fix: 修复剧本评分文本框随内容无限下拉导致按钮被挤出视口 - textarea 增加 max-height 限制高度不随内容增长 - textarea 增加 overflow-y: auto 启用内部滚动 - text-shell 同步增加 max-height 约束	2026-06-02 18:18:00 +08:00