feat: 个人中心界面UI优化，提升商业产品精致度

ProfilePage组件优化：
- 新增个性签名编辑功能（内联编辑/确认/取消交互）
- 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined）
- 新增 formatProfileDate 工具函数，统一日期格式化（中文友好）
- 新增 formatTaskType 函数，任务类型中文化显示
- 新增 formatTaskStatus 函数，任务状态中文化显示
- 新增 formatAssetStatus 函数，资产状态中文化显示
- 优化空状态展示，增加图标占位

dark-green主题层样式增强：
- 个人中心背景增加微光渐变（accent光晕+半透明遮罩）
- Banner区域高度优化为214px，增加底部渐变分割线
- Banner叠加层增加径向光晕效果
- Banner编辑按钮增加毛玻璃质感（backdrop-filter）
- 侧边栏/主体/选项卡/列表卡片等多处细节增强
- 按钮、标签、统计数字等组件加入微交互
- 保持暗绿主题配色体系不变，仅提升精致度

.env.example

@@ -0,0 +1,8 @@
+# Dev proxy target — the backend API server
+VITE_DEV_PROXY=http://47.110.225.76:3600
+
+# Key server URL for auth/profile endpoints
+VITE_KEY_SERVER_URL=
+
+# Main API base URL (used when not served from omniai.net.cn)
+VITE_API_BASE_URL=

src/App.tsx

@@ -357,7 +357,7 @@ function App() {
     canvasAutoOpenedRecentRef.current = false;
     setWorkspaceExpanded(false);
     if (options?.resetView) {
-      handleSetView("workbench");
+      handleSetView("login");
     }
   }, [clearSessionState, setProjects, setProjectsLoaded, setUsage, clearTasks, setRuntimeNotifications, setServerNotifications, setCanvasWorkflow, setCurrentCanvasProjectId, setWorkspaceExpanded, handleSetView]);
 
@@ -492,7 +492,7 @@ function App() {
         if (nextSession) {
           setSession(nextSession);
         } else {
-          clearAuthenticatedState();
+          clearAuthenticatedState({ resetView: true });
         }
       } finally {
         checking = false;

src/api/adVideoPlanClient.ts

@@ -1,7 +1,8 @@
 import { buildApiUrl, buildAuthHeaders } from "./serverConnection";
 
 const TEXT_MODEL = "qwen-max";
-const VISION_MODEL = "qwen3.6-plus";
+const VISION_MODEL = "qwen3.7-plus";
+const VISION_FALLBACK_MODEL = "qwen-vl-plus";
 
 export interface AdVideoUserConfig {
   platform: string;
@@ -107,36 +108,63 @@ interface ChatMessage {
   content: string;
 }
 
+const MAX_RETRIES = 3;
+const RETRY_BASE_MS = 2000;
+const CHAT_TIMEOUT_MS = 120_000; // 2 minutes per AI call
+
+function isTransientError(err: unknown): boolean {
+  if (!(err instanceof Error)) return false;
+  const msg = err.message.toLowerCase();
+  return /\b429\b/.test(msg) || msg.includes("signal timed out") || msg.includes("aborted") || msg.includes("timeout");
+}
+
+async function retryOnTransient<T>(fn: () => Promise<T>, signal?: AbortSignal): Promise<T> {
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await fn();
+    } catch (err) {
+      if (signal?.aborted) throw err;
+      if (attempt === MAX_RETRIES) throw err;
+      if (!isTransientError(err)) throw err;
+      const delay = RETRY_BASE_MS * 2 ** attempt + Math.random() * 1000;
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw new Error("unreachable");
+}
+
 async function chat(
   systemPrompt: string,
   userContent: string,
   options?: { model?: string; signal?: AbortSignal },
 ): Promise<string> {
-  const messages: ChatMessage[] = [
-    { role: "system", content: systemPrompt },
-    { role: "user", content: userContent },
-  ];
-  const timeoutSignal = AbortSignal.timeout(60000);
-  const combinedSignal = options?.signal
-    ? AbortSignal.any([options.signal, timeoutSignal])
-    : timeoutSignal;
-  const res = await fetch(buildApiUrl("ai/chat"), {
-    method: "POST",
-    headers: buildAuthHeaders(),
-    body: JSON.stringify({
-      model: options?.model ?? TEXT_MODEL,
-      messages,
-      stream: false,
-      temperature: 0.4,
-    }),
-    signal: combinedSignal,
-  });
-  if (!res.ok) throw new Error(`AI 调用失败 (${res.status})`);
-  const payload = await res.json();
-  const content: string =
-    payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
-  if (!content) throw new Error("模型未返回有效内容");
-  return content;
+  return retryOnTransient(async () => {
+    const messages: ChatMessage[] = [
+      { role: "system", content: systemPrompt },
+      { role: "user", content: userContent },
+    ];
+    const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
+    const combinedSignal = options?.signal
+      ? AbortSignal.any([options.signal, timeoutSignal])
+      : timeoutSignal;
+    const res = await fetch(buildApiUrl("ai/chat"), {
+      method: "POST",
+      headers: buildAuthHeaders(),
+      body: JSON.stringify({
+        model: options?.model ?? TEXT_MODEL,
+        messages,
+        stream: false,
+        temperature: 0.4,
+      }),
+      signal: combinedSignal,
+    });
+    if (!res.ok) throw new Error(`AI 调用失败 (${res.status})`);
+    const payload = await res.json();
+    const content: string =
+      payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
+    if (!content) throw new Error("模型未返回有效内容");
+    return content;
+  }, options?.signal);
 }
 
 async function visionChat(
@@ -149,30 +177,43 @@ async function visionChat(
     ...imageUrls.map((url) => ({ type: "image_url", image_url: { url } })),
     { type: "text", text },
   ];
-  const timeoutSignal = AbortSignal.timeout(60000);
-  const combinedSignal = signal
-    ? AbortSignal.any([signal, timeoutSignal])
-    : timeoutSignal;
-  const res = await fetch(buildApiUrl("ai/chat"), {
-    method: "POST",
-    headers: buildAuthHeaders(),
-    body: JSON.stringify({
-      model: VISION_MODEL,
-      messages: [
-        { role: "system", content: systemPrompt },
-        { role: "user", content },
-      ],
-      stream: false,
-      temperature: 0.3,
-    }),
-    signal: combinedSignal,
-  });
-  if (!res.ok) throw new Error(`图片理解调用失败 (${res.status})`);
-  const payload = await res.json();
-  const out: string =
-    payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
-  if (!out) throw new Error("图片理解未返回有效内容");
-  return out;
+  const messages = [
+    { role: "system", content: systemPrompt },
+    { role: "user", content },
+  ];
+
+  for (const model of [VISION_MODEL, VISION_FALLBACK_MODEL]) {
+    const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
+    const combinedSignal = signal
+      ? AbortSignal.any([signal, timeoutSignal])
+      : timeoutSignal;
+    try {
+      const out = await retryOnTransient(async () => {
+        const res = await fetch(buildApiUrl("ai/chat"), {
+          method: "POST",
+          headers: buildAuthHeaders(),
+          body: JSON.stringify({ model, messages, stream: false, temperature: 0.3 }),
+          signal: combinedSignal,
+        });
+        if (!res.ok) {
+          const errBody = await res.text().catch(() => "");
+          if (model === VISION_MODEL && errBody.includes("image format")) throw new Error("IMAGE_FORMAT_FALLBACK");
+          throw new Error(`图片理解调用失败 (${res.status})`);
+        }
+        const payload = await res.json();
+        const result: string =
+          payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
+        if (!result) throw new Error("图片理解未返回有效内容");
+        return result;
+      }, signal);
+      return out;
+    } catch (err) {
+      if (err instanceof Error && err.message === "IMAGE_FORMAT_FALLBACK") continue;
+      if (model === VISION_MODEL && err instanceof Error && err.message?.includes("图片理解调用失败")) continue;
+      throw err;
+    }
+  }
+  throw new Error("图片理解调用失败，所有模型均不可用");
 }
 
 const IMAGE_UNDERSTANDING_PROMPT = `你是电商产品图片分析专家。请分析用户提供的产品图片，识别产品主体、外观、颜色、材质、形状、尺寸感、品牌标识、关键部件、可视化卖点和适合展示的镜头角度。请用简洁的中文段落描述，不要编造图片中看不到的信息。`;

src/api/aiGenerationClient.ts

@@ -403,6 +403,24 @@ export const aiGenerationClient = {
     return readJsonResponse<{ url: string; ossKey?: string }>(res, "Asset upload response failed");
   },
 
+  async uploadAssetBinary(blob: Blob, options?: { name?: string; mimeType?: string; scope?: string }): Promise<{ url: string; signedUrl?: string; ossKey?: string }> {
+    const form = new FormData();
+    form.append("file", blob, options?.name || "upload.png");
+    if (options?.scope) form.append("scope", options.scope);
+    if (options?.mimeType) form.append("mimeType", options.mimeType);
+    // Exclude Content-Type so browser auto-sets multipart/form-data with boundary
+    const { "Content-Type": _ct, ...authHeaders } = buildAuthHeaders();
+    const res = await fetch(buildApiUrl("oss/upload-binary"), {
+      method: "POST",
+      headers: authHeaders,
+      body: form,
+    });
+    if (!res.ok) {
+      await throwResponseError(res, "Binary asset upload failed");
+    }
+    return readJsonResponse<{ url: string; ossKey?: string }>(res, "Binary asset upload response failed");
+  },
+
   async uploadAssetByUrl(input: UploadAssetByUrlInput): Promise<{ url: string; signedUrl?: string; ossKey?: string }> {
     const res = await fetch(buildApiUrl("oss/upload-by-url"), {
       method: "POST",

src/components/AnimatedPanel.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+interface AnimatedPanelProps {
+  open: boolean;
+  children: ReactNode;
+  className?: string;
+  /** Duration in ms for the exit animation before unmounting. */
+  exitDuration?: number;
+}
+
+export function AnimatedPanel({ open, children, className, exitDuration = 140 }: AnimatedPanelProps) {
+  const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(open);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setVisible(true);
+        });
+      });
+    } else {
+      setVisible(false);
+      timerRef.current = window.setTimeout(() => {
+        setMounted(false);
+        timerRef.current = null;
+      }, exitDuration);
+    }
+  }, [open, exitDuration]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div
+      className={`${className ?? ""} animated-panel${visible ? " is-visible" : ""}`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/AppShell.tsx

@@ -16,6 +16,7 @@ import { canManageCommunityCases, canReviewCommunity } from "../features/communi
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
 import { RechargeModal } from "./RechargeModal/RechargeModal";
+import { AnimatedPanel } from "./AnimatedPanel";
 
 interface AppShellProps {
   activeView: WebViewKey;
@@ -61,6 +62,8 @@ function AppShell({
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
+  const prevActiveViewRef = useRef<WebViewKey>(activeView);
+  const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
   const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
@@ -100,6 +103,15 @@ function AppShell({
     [navItems],
   );
 
+  useEffect(() => {
+    if (activeView !== prevActiveViewRef.current) {
+      setNavJustActivated(activeView);
+      prevActiveViewRef.current = activeView;
+      const timer = window.setTimeout(() => setNavJustActivated(null), 320);
+      return () => window.clearTimeout(timer);
+    }
+  }, [activeView]);
+
   useEffect(() => {
     if (typeof document === "undefined") {
       return;
@@ -223,8 +235,8 @@ function AppShell({
                   <button
                     type="button"
                     className={`floating-nav__button${isActive ? " is-active" : ""}${
-                      workspaceExpanded && index === 3 ? " has-divider" : ""
-                    }`}
+                      navJustActivated === item.key ? " nav-just-activated" : ""
+                    }${workspaceExpanded && index === 3 ? " has-divider" : ""}`}
                     title={`${item.label} / ${item.hint}`}
                     aria-label={item.label}
                     onClick={() => onSelectView(item.children?.[0]?.key ?? item.key)}
@@ -330,8 +342,7 @@ function AppShell({
                     </>
                   )}
                 </button>
-                {session && profileOpen ? (
-                  <div className="profile-popover panel-surface">
+                <AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
                     <div className="profile-popover__head">
                       <span className="profile-popover__avatar">
                         {avatarUrl ? <img src={avatarUrl} alt={displayName} /> : avatarLabel}
@@ -410,8 +421,7 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
-                  </div>
-                ) : null}
+                  </AnimatedPanel>
               </div>
             </div>
             </header>

src/components/NotificationCenter.tsx

@@ -10,6 +10,7 @@ import {
 } from "@ant-design/icons";
 import { useEffect, useRef, useState } from "react";
 import type { WebNotification, WebNotificationType, WebViewKey } from "../types";
+import { AnimatedPanel } from "./AnimatedPanel";
 
 const NOTIFICATION_ICONS: Record<WebNotificationType, React.ReactNode> = {
   task_completed: <CheckCircleOutlined style={{ color: "#10b981" }} />,
@@ -115,8 +116,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
           <span className="notification-center__badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
         )}
       </button>
-      {open && (
-        <div className="notification-center__panel">
+      <AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
           <div className="notification-center__header">
             <span className="notification-center__title">通知中心</span>
             <div className="notification-center__header-actions">
@@ -158,8 +158,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
               ))
             )}
           </div>
-        </div>
-      )}
+        </AnimatedPanel>
     </div>
   );
 }

src/components/PageTransition.tsx

@@ -7,9 +7,40 @@ interface PageTransitionProps {
 
 const EXIT_DURATION_MS = 180;
 
+const NAV_ORDER: string[] = [
+  "home",
+  "workbench",
+  "ecommerce",
+  "ecommerceTemplates",
+  "sizeTemplate",
+  "canvas",
+  "scriptTokens",
+  "tokenUsage",
+  "community",
+  "assets",
+  "more",
+  "imageWorkbench",
+  "resolutionUpscale",
+  "watermarkRemoval",
+  "subtitleRemoval",
+  "digitalHuman",
+  "avatarConsole",
+  "characterMix",
+  "agent",
+  "settings",
+  "login",
+  "profile",
+  "report",
+];
+
+function getNavIndex(key: string): number {
+  return NAV_ORDER.indexOf(key);
+}
+
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
+  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -18,6 +49,15 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
       setDisplayedChildren(children);
       return;
     }
+    const prevIndex = getNavIndex(prevKeyRef.current);
+    const nextIndex = getNavIndex(viewKey);
+    if (prevIndex < nextIndex) {
+      setDirection("forward");
+    } else if (prevIndex > nextIndex) {
+      setDirection("backward");
+    } else {
+      setDirection("neutral");
+    }
     prevKeyRef.current = viewKey;
     setPhase("exit");
     timerRef.current = setTimeout(() => {
@@ -27,8 +67,10 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
+  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
+
   return (
-    <div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
       {displayedChildren}
     </div>
   );

src/features/community/CommunityPage.tsx

@@ -17,12 +17,7 @@ import { cloneWorkflow, createBlankWorkflow } from "../../data/workflows";
 import type { WebCanvasWorkflow, WebProjectSummary } from "../../types";
 import { getCommunityCaseCover, getWorkflowFromCase, shouldShowInCanvasCommunity } from "./communityCaseUtils";
 import { ossThumb } from "../../utils/ossImageOptimize";
-import wechatCaseImage10 from "../../../tu/微信图片_20260514125332_10_2.png";
-import wechatCaseImage11 from "../../../tu/微信图片_20260514125332_11_2.png";
-import wechatCaseImage12 from "../../../tu/微信图片_20260514125332_12_2.png";
-import wechatCaseImage7 from "../../../tu/微信图片_20260514125332_7_2.png";
-import wechatCaseImage8 from "../../../tu/微信图片_20260514125332_8_2.png";
-import wechatCaseImage9 from "../../../tu/微信图片_20260514125332_9_2.png";
+const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 
 interface CommunityPageProps {
   projects: WebProjectSummary[];
@@ -35,12 +30,12 @@ interface CommunityPageProps {
 }
 
 const communityCardImages = [
-  wechatCaseImage7,
-  wechatCaseImage8,
-  wechatCaseImage9,
-  wechatCaseImage10,
-  wechatCaseImage11,
-  wechatCaseImage12,
+  `${OSS_MUBAN}/dianshang1.png`,
+  `${OSS_MUBAN}/dianshang2.png`,
+  `${OSS_MUBAN}/dianshang3.png`,
+  `${OSS_MUBAN}/wechat-7.png`,
+  `${OSS_MUBAN}/wechat-8.png`,
+  `${OSS_MUBAN}/wechat-9.png`,
 ];
 
 const SLIDE_INTERVAL = 3000;
@@ -482,8 +477,9 @@ function CommunityPage({ projects, isAuthenticated, onStartCreate, onOpenProject
                   <div className="community-card-actions">
                     <button
                       type="button"
-                      className={isFavorite ? "is-active" : ""}
+                      className={isFavorite ? "is-active heart-animate" : ""}
                       aria-pressed={isFavorite}
+                      key={isFavorite ? `fav-${cardId}` : `unfav-${cardId}`}
                       onClick={(event) => {
                         event.stopPropagation();
                         void handleToggleFavorite(item, cardId);

src/features/ecommerce/EcommercePage.tsx

@@ -11,9 +11,12 @@ import {
   SkinOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
-import ecommerceGenerated from "../../assets/ecommerce-carousel-generated.png";
-import ecommerceSlide4 from "../../assets/ecommerce-hero-carousel/slide-4.png";
-import ecommerceSlide5 from "../../assets/ecommerce-hero-carousel/slide-5.png";
+import { EcommerceProgressBar } from "./EcommerceProgressBar";
+
+const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
+const ecommerceGenerated = `${OSS_MUBAN}/ecommerce-carousel-generated.png`;
+const ecommerceSlide4 = `${OSS_MUBAN}/slide-4.png`;
+const ecommerceSlide5 = `${OSS_MUBAN}/slide-5.png`;
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
 import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -1319,18 +1322,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   });
 
   const uploadProductImages = async (): Promise<string[]> => {
+    const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
     const urls: string[] = [];
     for (const item of productImages) {
       try {
         const resp = await fetch(item.src);
-        const blob = await resp.blob();
-        const dataUrl = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(String(reader.result));
-          reader.onerror = () => reject(reader.error);
-          reader.readAsDataURL(blob);
-        });
-        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType: blob.type });
+        const rawBlob = await resp.blob();
+        const mimeType = SUPPORTED_IMAGE_TYPES.has(rawBlob.type) ? rawBlob.type : "image/png";
+        const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
+        const { url } = await aiGenerationClient.uploadAssetBinary(blob, { name: item.name, mimeType, scope: "ecommerce-product" });
         urls.push(url);
       } catch {
         // skip images that fail to upload
@@ -2403,6 +2403,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </div>
 
       <footer className="product-clone-panel__footer">
+        {detailStatus === "generating" ? <EcommerceProgressBar status="generating" label="A+详情页" /> : null}
         <button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
           {detailStatus === "generating" ? <LoadingOutlined /> : null}
           {detailPrimaryLabel}
@@ -2548,6 +2549,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </div>
 
       <footer className="product-clone-panel__footer">
+        {tryOnStatus === "generating" ? <EcommerceProgressBar status="generating" label="服饰穿戴图" /> : null}
         <button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
           {tryOnStatus === "generating" ? <LoadingOutlined /> : null}
           {tryOnPrimaryLabel}
@@ -2593,7 +2595,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>{productSetPreviewCards[0].label}</span>
           </button>
           <div className="product-set-flow-arrow" aria-hidden="true" />
-          <div className="product-set-card-grid">
+          <div className="product-set-card-grid result-reveal">
             {productSetPreviewCards.slice(1).map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2606,6 +2608,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="product-set-empty-preview" aria-live="polite">
           {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
           <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
+          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" label="商品套图" /> : null}
           <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图"}</span>
         </section>
       )}
@@ -2651,7 +2654,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>原图素材</span>
           </button>
           <div className="clone-ai-flow-arrow" aria-hidden="true" />
-          <div className="clone-ai-result-grid">
+          <div className="clone-ai-result-grid result-reveal">
             {clonePreviewCards.map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2664,6 +2667,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="clone-ai-empty-state" aria-live="polite">
           {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
           <strong>{status === "generating" ? "正在生成" : "等待生成"}</strong>
+          {status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
           <span>
             {status === "generating"
               ? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
@@ -2815,7 +2819,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
         <aside
           id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
-          className="product-clone-panel"
+          className={`product-clone-panel tool-panel-enter`}
+          key={activeTool}
           aria-label={`${pageLabel}参数`}
           aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
         >

src/features/ecommerce/EcommerceProgressBar.tsx

@@ -0,0 +1,30 @@
+import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
+
+interface EcommerceProgressBarProps {
+  status: "idle" | "generating" | "done" | "failed" | string;
+  label?: string;
+}
+
+function mapStatus(status: string): "running" | "completed" | "failed" {
+  if (status === "done") return "completed";
+  if (status === "failed") return "failed";
+  if (status === "generating" || status === "modeling") return "running";
+  return "running";
+}
+
+export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
+  const progress = mapStatus(status) === "running" ? 50 : 100;
+  const smoothed = useSmoothedProgress(progress, mapStatus(status));
+
+  if (status === "idle") return null;
+
+  return (
+    <div className="ecommerce-progress-bar">
+      <span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
+      <div className="ecommerce-progress-bar__track">
+        <div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
+      </div>
+      <span className="ecommerce-progress-bar__value">{smoothed}%</span>
+    </div>
+  );
+}

src/features/ecommerce/ecommerceVideoService.ts

@@ -9,7 +9,6 @@ import {
   type AdVideoUserConfig,
 } from "../../api/adVideoPlanClient";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
-import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
 import { waitForTask } from "../../api/taskSubscription";
 import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
 import type {
@@ -34,12 +33,18 @@ export async function runVideoPlan(
 
   onStepStart("upload");
   const imageUrls: string[] = [];
-  for (const dataUrl of imageDataUrls) {
-    const result = await uploadAssetWithProgress(
-      { dataUrl, scope: "ecommerce-product", mimeType: "image/png" },
-      { signal },
-    );
-    imageUrls.push(result.url);
+  const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
+  for (const srcUrl of imageDataUrls) {
+    try {
+      const resp = await fetch(srcUrl);
+      const rawBlob = await resp.blob();
+      const mimeType = SUPPORTED_IMAGE_TYPES.has(rawBlob.type) ? rawBlob.type : "image/png";
+      const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
+      const result = await aiGenerationClient.uploadAssetBinary(blob, { mimeType, scope: "ecommerce-product" });
+      imageUrls.push(result.url);
+    } catch {
+      // skip images that fail to upload
+    }
   }
   onStepDone("upload");
 

src/features/home/HomePage.tsx

@@ -9,12 +9,24 @@ import {
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import WelcomeSplash from "./WelcomeSplash";
-import featureEcommerceImage from "../../assets/home-features/feature-ecommerce.jpg";
-import featureScriptImage from "../../assets/home-features/feature-script.jpg";
-import featureTokenImage from "../../assets/home-features/feature-token.jpg";
-import heroImage1 from "../../../projects/public/hero-1.png";
-import heroImage2 from "../../../projects/public/hero-2.png";
-import heroImage3 from "../../../projects/public/hero-3.png";
+import { useScrollEntrance } from "../../hooks/useScrollEntrance";
+
+function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
+  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
+  return (
+    <section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
+      {children}
+    </section>
+  );
+}
+
+const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
+const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
+const heroImage2 = `${OSS_MUBAN}/hero-2.png`;
+const heroImage3 = `${OSS_MUBAN}/hero-3.png`;
+const featureEcommerceImage = `${OSS_MUBAN}/feature-ecommerce.jpg`;
+const featureScriptImage = `${OSS_MUBAN}/feature-script.jpg`;
+const featureTokenImage = `${OSS_MUBAN}/feature-token.jpg`;
 
 interface HomePageProps {
   onOpenGenerate: () => void;
@@ -254,6 +266,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                       }}
                     >
                       <img src={slide.imageUrl} alt={slide.title} />
+                      {isActive ? <span className="omni-home__carousel-card-label slide-up-in-260">{slide.title}</span> : null}
                     </button>
                   );
                 })}
@@ -280,7 +293,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
 
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
-          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
+          <ScrollEntrance key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
             <div className="omni-home__feature-copy">
               <span>
                 {feature.icon}
@@ -301,10 +314,10 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                 <span key={item}>{item}</span>
               ))}
             </div>
-          </section>
+          </ScrollEntrance>
         ))}
 
-        <section className="omni-home__experience" aria-label="点击体验">
+        <ScrollEntrance className="omni-home__experience" aria-label="点击体验">
           <div className="omni-home__experience-copy">
             <span>
               <ThunderboltOutlined />
@@ -335,7 +348,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
               体验电商生成
             </button>
           </div>
-        </section>
+        </ScrollEntrance>
       </main>
     </section>
     </>

src/features/home/WelcomeSplash.tsx

@@ -8,6 +8,10 @@ const MATRIX_CHARS =
   "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" +
   "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{};:?/\\|~`";
 
+const prefersReducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
 export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rafRef = useRef(0);
@@ -16,15 +20,27 @@ export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
 
   const handleEnter = useCallback(() => {
     setExiting(true);
-    setTimeout(onEnter, 700);
+    setTimeout(onEnter, prefersReducedMotion ? 0 : 700);
   }, [onEnter]);
 
   useEffect(() => {
-    const timer = setTimeout(() => setShowWelcome(true), 6000);
+    const timer = setTimeout(() => setShowWelcome(true), prefersReducedMotion ? 0 : 6000);
     return () => clearTimeout(timer);
   }, []);
 
   useEffect(() => {
+    if (prefersReducedMotion) {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      return;
+    }
+
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");

src/features/profile/ProfilePage.tsx

@@ -1,7 +1,10 @@
 import {
   CameraOutlined,
+  CheckOutlined,
   CheckCircleFilled,
+  CloseOutlined,
   DeleteOutlined,
+  EditOutlined,
   LockOutlined,
   MailOutlined,
   MobileOutlined,
@@ -135,6 +138,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,
@@ -182,6 +227,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");
@@ -497,8 +545,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 />
@@ -515,12 +584,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>
           ))}
@@ -537,7 +606,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"
@@ -569,12 +638,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>
           ))}
@@ -637,15 +706,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>
 
@@ -664,18 +757,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>
@@ -731,13 +827,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>

src/features/workbench/WorkbenchPromptPreview.tsx

@@ -0,0 +1,88 @@
+import { FileTextOutlined, SoundOutlined } from "@ant-design/icons";
+import type { PromptMentionItem, PromptMentionTokenRange, ReferenceItem } from "./workbenchConstants";
+import { renderPromptPreviewNodes, getPromptMentionTokenRanges } from "./workbenchMentionUtils";
+
+export { getPromptMentionTokenRanges };
+
+export function findPromptMentionRangeInside(index: number, ranges: PromptMentionTokenRange[]) {
+  return ranges.find((range) => index > range.start && index < range.end);
+}
+
+export function findPromptMentionRangeOverlap(start: number, end: number, ranges: PromptMentionTokenRange[]) {
+  return ranges.find((range) => start < range.end && end > range.start);
+}
+
+export function ReferenceInlinePreview({
+  item,
+}: {
+  item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
+}) {
+  if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
+    return item.kind === "video" ? (
+      <video src={item.previewUrl} muted playsInline />
+    ) : (
+      <img src={item.previewUrl} alt={item.name} loading="lazy" />
+    );
+  }
+
+  return item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />;
+}
+
+export function ReferencePreview({
+  item,
+  label,
+}: {
+  item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
+  label?: string;
+}) {
+  if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
+    return item.kind === "video" ? (
+      <video src={item.previewUrl} muted playsInline />
+    ) : (
+      <img src={item.previewUrl} alt={item.name} loading="lazy" />
+    );
+  }
+
+  return (
+    <span className="wb-composer__ref-icon">
+      {item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />}
+      {label ? <span>{label}</span> : null}
+    </span>
+  );
+}
+
+export function PromptPreviewLayer({
+  text,
+  items,
+  onTokenPointerDown,
+}: {
+  text: string;
+  items: PromptMentionItem[];
+  onTokenPointerDown?: (index: number) => void;
+}) {
+  const nodes = renderPromptPreviewNodes(text, items);
+  if (nodes.length === 0) return null;
+
+  return (
+    <div
+      className="wb-composer__highlight"
+      aria-hidden="true"
+      onPointerDown={(event) => {
+        const target =
+          event.target instanceof Element
+            ? event.target.closest<HTMLElement>(".wb-composer__mention-inline-chip")
+            : null;
+        if (!target) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        const tokenEnd = Number(target.dataset.tokenEnd);
+        if (Number.isFinite(tokenEnd)) {
+          onTokenPointerDown?.(tokenEnd);
+        }
+      }}
+    >
+      {nodes}
+    </div>
+  );
+}

src/features/workbench/WorkbenchSelectChips.tsx

@@ -0,0 +1,264 @@
+import { DownOutlined } from "@ant-design/icons";
+import type { ReactNode } from "react";
+import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
+import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
+
+export function SelectChip({
+  chipId,
+  value,
+  options,
+  disabled,
+  isOpen,
+  onToggle,
+  onClose,
+  onChange,
+  ariaLabel,
+  direction = "up",
+}: {
+  chipId: string;
+  value: string;
+  options: WorkbenchOption[];
+  disabled?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  onChange: (value: string) => void;
+  ariaLabel?: string;
+  direction?: "up" | "down";
+}) {
+  const activeOption = options.find((option) => option.value === value);
+
+  return (
+    <div
+      className={`ai-workbench-select-chip${chipId.endsWith("-model") ? " ai-workbench-select-chip--model" : ""}${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
+    >
+      <button
+        type="button"
+        className="ai-workbench-select-chip__trigger"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={`${chipId}-listbox`}
+      >
+        <span className="ai-workbench-select-chip__copy">
+          <span className="ai-workbench-select-chip__value">{activeOption?.label || value}</span>
+        </span>
+        <DownOutlined className="ai-workbench-select-chip__arrow" />
+      </button>
+
+      {isOpen ? (
+        <div
+          id={`${chipId}-listbox`}
+          className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--${direction} is-open`}
+          role="listbox"
+        >
+          {options.map((option, index) => {
+            const active = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                className={`ai-workbench-select-chip__option${active ? " is-active" : ""}`}
+                style={{ transitionDelay: `${index * 18}ms` }}
+                onClick={() => {
+                  onChange(option.value);
+                  onClose();
+                }}
+              >
+                <span className="ai-workbench-select-chip__option-label">
+                  <span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
+                  <span className="ai-workbench-select-chip__option-copy">
+                    <span className="ai-workbench-select-chip__option-title">
+                      <span>{option.label}</span>
+                      {option.badge ? (
+                        <span className="ai-workbench-select-chip__option-badge">{option.badge}</span>
+                      ) : null}
+                    </span>
+                    {option.description ? (
+                      <span className="ai-workbench-select-chip__option-desc">{option.description}</span>
+                    ) : null}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function CompoundSelectChip({
+  chipId,
+  summary,
+  groups,
+  disabled,
+  isOpen,
+  onToggle,
+  direction = "up",
+}: {
+  chipId: string;
+  summary: string;
+  groups: WorkbenchFieldGroup[];
+  disabled?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+  direction?: "up" | "down";
+}) {
+  return (
+    <div
+      className={`ai-workbench-select-chip ai-workbench-select-chip--compound${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
+    >
+      <button
+        type="button"
+        className="ai-workbench-select-chip__trigger"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        aria-controls={`${chipId}-panel`}
+      >
+        <span className="ai-workbench-select-chip__copy">
+          <span className="ai-workbench-select-chip__value">{summary}</span>
+        </span>
+        <DownOutlined className="ai-workbench-select-chip__arrow" />
+      </button>
+
+      {isOpen ? (
+        <div
+          id={`${chipId}-panel`}
+          className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--compound ai-workbench-select-chip__dropdown--${direction} is-open`}
+          role="dialog"
+        >
+          <div className="ai-workbench-settings-panel">
+            {groups.map((group) => {
+              const currentLabel =
+                group.options.find((option) => option.value === group.value)?.label || group.value;
+              const fieldKey = `${group.kind || "pill"}-${group.label}`;
+
+              return (
+                <div
+                  key={fieldKey}
+                  className={`ai-workbench-settings-panel__field ai-workbench-settings-panel__field--${group.kind || "pill"}`}
+                >
+                  <div className="ai-workbench-settings-panel__head">
+                    <div className="ai-workbench-settings-panel__title-wrap">
+                      {group.icon ? (
+                        <span className="ai-workbench-settings-panel__title-icon">{group.icon}</span>
+                      ) : null}
+                      <div className="ai-workbench-settings-panel__title-copy">
+                        <div className="ai-workbench-settings-panel__title">{group.label}</div>
+                      </div>
+                    </div>
+                    <span className="ai-workbench-settings-panel__current">{currentLabel}</span>
+                  </div>
+
+                  <fieldset
+                    className={`ai-workbench-settings-panel__grid ai-workbench-settings-panel__grid--${group.kind || "pill"} ${getSettingsGridColumnsClassName(group.columns || 3)}`}
+                  >
+                    <legend className="ai-workbench-visually-hidden">{group.label}</legend>
+                    {group.options.map((option) => {
+                      const active = option.value === group.value;
+                      return (
+                        <button
+                          key={`${fieldKey}-${option.value}`}
+                          type="button"
+                          aria-pressed={active}
+                          className={`ai-workbench-settings-panel__option ai-workbench-settings-panel__option--${group.kind || "pill"}${active ? " is-active" : ""}`}
+                          onClick={() => group.onChange(option.value)}
+                        >
+                          {group.kind === "ratio" ? (
+                            <span className="ai-workbench-ratio-option">
+                              <span
+                                className={`ai-workbench-ratio-option__preview ${getRatioOptionClassName(option.value)}`}
+                              >
+                                <span className="ai-workbench-ratio-option__frame" />
+                              </span>
+                              <span className="ai-workbench-ratio-option__label">{option.label}</span>
+                            </span>
+                          ) : (
+                            <span>{option.label}</span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </fieldset>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function InlineOptionChip({
+  chipId,
+  value,
+  options,
+  icon,
+  disabled,
+  isOpen,
+  onToggle,
+  onClose,
+  onChange,
+  direction = "up",
+}: {
+  chipId: string;
+  value: string;
+  options: WorkbenchOption[];
+  icon?: ReactNode;
+  disabled?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  onChange: (value: string) => void;
+  direction?: "up" | "down";
+}) {
+  const activeOption = options.find((option) => option.value === value);
+
+  return (
+    <div className={`wb-inline-chip${isOpen ? " is-open" : ""}${disabled ? " is-disabled" : ""}`}>
+      <button
+        type="button"
+        className="wb-inline-chip__trigger"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={`${chipId}-listbox`}
+      >
+        {icon ? <span className="wb-inline-chip__icon">{icon}</span> : null}
+        <span>{activeOption?.label || value}</span>
+      </button>
+      {isOpen ? (
+        <div id={`${chipId}-listbox`} className={`wb-inline-chip__menu wb-inline-chip__menu--${direction}`} role="listbox">
+          {options.map((option) => {
+            const active = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                className={`wb-inline-chip__option${active ? " is-active" : ""}`}
+                onClick={() => {
+                  onChange(option.value);
+                  onClose();
+                }}
+              >
+                <span>{option.label}</span>
+                {active ? <span className="wb-inline-chip__check">✓</span> : null}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/features/workbench/workbenchConstants.ts

@@ -0,0 +1,404 @@
+import { isServerRequestError } from "../../api/serverConnection";
+import { ENTERPRISE_VIDEO_MODEL_OPTIONS } from "../../utils/enterpriseVideoPolicy";
+import type { WebGenerationPreviewTask } from "../../types";
+import type { ReactNode } from "react";
+
+export type WorkbenchMode = "chat" | "image" | "video";
+export type ToolbarMenuId =
+  | "studio-mode"
+  | "image-model"
+  | "image-settings"
+  | "image-grid-mode"
+  | "video-model"
+  | "video-mode"
+  | "video-ratio"
+  | "video-duration"
+  | "video-quality"
+  | null;
+export type ReferenceKind = "image" | "video" | "audio" | "file";
+
+export interface WorkbenchOption {
+  value: string;
+  label: string;
+  description?: string;
+  badge?: string;
+}
+
+export interface WorkbenchFieldGroup {
+  label: string;
+  value: string;
+  options: WorkbenchOption[];
+  onChange: (value: string) => void;
+  kind?: "ratio" | "pill";
+  columns?: 2 | 3 | 4;
+  icon?: ReactNode;
+}
+
+export interface ReferenceItem {
+  id: string;
+  kind: ReferenceKind;
+  name: string;
+  previewUrl?: string;
+  file?: File;
+  remoteUrl?: string;
+  token: string;
+  fingerprint?: string;
+  originalSize?: number;
+  compressed?: boolean;
+}
+
+export type PromptMentionItem = Pick<ReferenceItem, "token" | "id" | "name" | "kind" | "previewUrl" | "remoteUrl">;
+
+export interface PromptMentionTokenRange {
+  start: number;
+  end: number;
+  item: PromptMentionItem;
+}
+
+export interface ChatAttachment {
+  kind: ReferenceKind;
+  name: string;
+  token: string;
+  previewUrl?: string;
+  remoteUrl?: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  author: string;
+  mode: WorkbenchMode;
+  body: string;
+  prompt?: string;
+  createdAt: string;
+  status?: "thinking" | "queued" | "completed" | "failed";
+  taskId?: string;
+  conversationId?: number;
+  taskProgress?: number;
+  taskStatusLabel?: string;
+  attachments?: ChatAttachment[];
+  resultUrl?: string;
+  resultType?: "image" | "video";
+  resultOriginalUrl?: string;
+  resultOssKey?: string;
+  resultMimeType?: string;
+  result?: {
+    title: string;
+    summary: string;
+    specs: string[];
+  };
+}
+
+export interface DeleteDialogState {
+  projectId: string;
+  title: string;
+}
+
+export interface WorkbenchKeepaliveTask {
+  taskId: string;
+  conversationId: number;
+  assistantMessageId: string;
+  concurrencySlotId?: string;
+  operation?: "generation" | "video-super-resolution";
+  mode: "image" | "video";
+  modelLabel: string;
+  specs: string[];
+  referenceCount: number;
+  progress: number;
+  statusLabel: string;
+  startedAt: number;
+}
+
+export interface WorkbenchResultActionPayload {
+  title: string;
+  prompt: string;
+  resultUrl: string;
+  resultType: "image" | "video";
+  taskId?: string;
+  resultOriginalUrl?: string;
+  resultOssKey?: string;
+  resultMimeType?: string;
+}
+
+// ─── Constants ───────────────────────────────────────────────────────
+
+export const MESSAGE_STORAGE_KEY = "omniai-web-workbench-messages";
+export const ACTIVE_CONVERSATION_STORAGE_KEY = "omniai-web-workbench-active-conversation-id";
+export const PROMPT_HISTORY_STORAGE_KEY = "omniai-web-workbench-prompt-history";
+export const TASK_KEEPALIVE_STORAGE_KEY = "omniai-web-workbench-active-tasks";
+export const WORKBENCH_TASK_STALE_MS = 6 * 60 * 60 * 1000;
+export const WORKBENCH_TASK_MAX_POLL_FAILURES = 10;
+export const REFERENCE_IMAGE_COMPRESS_THRESHOLD = 10 * 1024 * 1024;
+export const REFERENCE_IMAGE_MAX_DIMENSION = 1920;
+export const REFERENCE_IMAGE_INITIAL_QUALITY = 0.84;
+export const REFERENCE_IMAGE_MIN_QUALITY = 0.62;
+export const CHAT_MODEL = "gemini-3.1-pro";
+
+export const CHAT_NATURAL_SYSTEM_PROMPT = [
+  "你是 OmniAI 的创作协作助手，像一个正在一起工作的同伴一样说话。",
+  `默认使用自然、简洁的中文，不要官腔，不要机械套话，不要频繁使用“首先、其次、最后”这种模板。`,
+  "先直接回应用户当前关心的点；需要拆解时，用短段落或少量要点，把下一步说清楚。",
+  `不说“作为一个 AI”，不做空泛总结，不编造不确定的信息。`,
+  "当用户在排查问题或调整页面时，优先给判断、原因和可执行的下一步。",
+].join("\n");
+
+export const CHAT_TURN_STYLE_REMINDER = [
+  "本轮回答继续保持像正常人协作的口吻：",
+  `不要以"好的，以下是""当然可以""根据你的需求"这类模板开头。`,
+  "能一句话说清就先一句话说清；需要展开时再分点。",
+  "少用宏大标题，多用具体判断和下一步动作。",
+].join("\n");
+
+export const NON_CONVERSATIONAL_ASSISTANT_TEXT = new Set([
+  "我先看一下上下文，马上接上。",
+  "我在整理，马上说清楚。",
+  "正在读取当前模式、模型、规格和参考素材，准备创建生成任务。",
+  "Task submitted, generating...",
+  "任务已提交，正在生成中...",
+  "AI 正在整理回答...",
+]);
+
+export const MODE_META: Record<
+  WorkbenchMode,
+  {
+    label: string;
+    menuLabel: string;
+    accent: string;
+    placeholder: string;
+    description: string;
+    subline: string;
+    taskType: WebGenerationPreviewTask["type"];
+  }
+> = {
+  chat: {
+    label: "OmniChat",
+    menuLabel: "对话模式",
+    accent: "#6be7ff",
+    placeholder: "把创意、脚本、素材要求或工作流目标发给我",
+    description: "直接对话、拆解需求、整理上下文，并把想法推进到可执行结果。",
+    subline: "适合连续协作、问答推演、脚本整理和工作流规划。",
+    taskType: "agent",
+  },
+  image: {
+    label: "图像生成",
+    menuLabel: "图像生成",
+    accent: "#00b1cc",
+    placeholder: "描述角色、场景、商品图、首帧或尾帧画面",
+    description: "在同一界面完成文生图、图生图、参考图管理和候选筛选。",
+    subline: "模型、比例、清晰度和多宫格保持在同一条工作链里。",
+    taskType: "image",
+  },
+  video: {
+    label: "视频生成",
+    menuLabel: "视频生成",
+    accent: "#2197ff",
+    placeholder: "描述成片目标、人物、场景、镜头运动、节奏、比例和时长",
+    description: "用统一工作台管理起始帧、动作描述、镜头节奏和视频输出。",
+    subline: "支持首尾帧、参考素材、比例、时长和画质等关键设置。",
+    taskType: "video",
+  },
+};
+
+export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as WorkbenchMode[]).map((mode) => ({
+  value: mode,
+  label: MODE_META[mode].menuLabel,
+  description: MODE_META[mode].subline,
+}));
+
+export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K · 0.20 积分" },
+  { value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
+  { value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
+  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
+  { value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
+  { value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
+];
+
+export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));
+export const RATIO_OPTIONS: WorkbenchOption[] = [
+  { value: "21:9", label: "21:9" },
+  { value: "16:9", label: "16:9" },
+  { value: "4:3", label: "4:3" },
+  { value: "1:1", label: "1:1" },
+  { value: "3:4", label: "3:4" },
+  { value: "9:16", label: "9:16" },
+];
+
+export const GRID_MODE_OPTIONS: WorkbenchOption[] = [
+  { value: "single", label: "单图" },
+  { value: "grid-4", label: "4 宫格" },
+  { value: "grid-9", label: "9 宫格" },
+  { value: "grid-25", label: "25 宫格" },
+];
+
+export const VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
+  { value: "omni", label: "全能参考" },
+  { value: "start-end", label: "首尾帧" },
+];
+
+export const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
+  { value: "4", label: "4s" },
+  { value: "5", label: "5s" },
+  { value: "6", label: "6s" },
+  { value: "7", label: "7s" },
+  { value: "8", label: "8s" },
+  { value: "9", label: "9s" },
+  { value: "10", label: "10s" },
+  { value: "11", label: "11s" },
+  { value: "12", label: "12s" },
+  { value: "13", label: "13s" },
+  { value: "14", label: "14s" },
+  { value: "15", label: "15s" },
+];
+
+// ─── Shared helpers ──────────────────────────────────────────────────
+
+export function getCachedRole(): string {
+  try {
+    const raw = window.localStorage.getItem("omniai-web-session");
+    if (!raw) return "";
+    return String(JSON.parse(raw)?.user?.role || "").trim().toLowerCase();
+  } catch { return ""; }
+}
+
+export function getSessionUserId(): string {
+  try {
+    const raw = window.localStorage.getItem("omniai-web-session");
+    if (!raw) return "anon";
+    const id = JSON.parse(raw)?.user?.id;
+    return id ? String(id) : "anon";
+  } catch { return "anon"; }
+}
+
+export function userKey(base: string): string {
+  return `${base}:${getSessionUserId()}`;
+}
+
+export function createId(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function formatWorkbenchTimestamp(date = new Date()): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+export function parseWorkbenchTimestampValue(value: string): number {
+  const matched = value.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/);
+  if (matched) {
+    const [, year, month, day, hours, minutes] = matched;
+    return new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes)).getTime();
+  }
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : NaN;
+}
+
+export function buildChatAttachments(items: ReferenceItem[]): ChatAttachment[] {
+  return items.map((item) => ({
+    kind: item.kind,
+    name: item.name,
+    token: item.token,
+    previewUrl: item.remoteUrl || item.previewUrl,
+    remoteUrl: item.remoteUrl,
+  }));
+}
+
+export function buildNaturalChatHistoryMessages(messages: ChatMessage[]): Array<{ role: "user" | "assistant"; content: string }> {
+  return messages
+    .filter((message) => {
+      const body = message.body.trim();
+      if (!body) return false;
+      if (message.role === "user") return true;
+      if (message.mode !== "chat") return false;
+      if (message.status === "thinking" || message.status === "queued") return false;
+      if (NON_CONVERSATIONAL_ASSISTANT_TEXT.has(body)) return false;
+      return true;
+    })
+    .slice(-10)
+    .map((message) => ({
+      role: message.role,
+      content: message.body.trim(),
+    }));
+}
+
+export function getErrorText(error: unknown): string {
+  return error instanceof Error ? error.message : String(error || "Unknown error");
+}
+
+export function isAuthFailure(error: unknown): boolean {
+  return isServerRequestError(error) && (error.status === 401 || error.status === 403);
+}
+
+export function isInsufficientBalance(error: unknown): boolean {
+  if (isServerRequestError(error) && error.status === 402) return true;
+  const msg = error instanceof Error ? error.message : String(error || "");
+  return /余额不足|积分不足|insufficient.?balance/i.test(msg);
+}
+
+export function isInsufficientBalanceMessage(msg: string | undefined | null): boolean {
+  if (!msg) return false;
+  return /余额不足|积分不足|insufficient.?balance/i.test(msg);
+}
+
+export function isTransientMessage(message: ChatMessage): boolean {
+  return (message.status === "thinking" || message.status === "queued") && !message.taskId;
+}
+
+export function getPersistableMessages(messages: ChatMessage[]): ChatMessage[] {
+  return messages.filter((message, index) => {
+    if (isTransientMessage(message)) return false;
+    if (message.role === "assistant") return true;
+    const nextMessage = messages[index + 1];
+    return (
+      nextMessage?.role === "assistant" &&
+      nextMessage.conversationId === message.conversationId &&
+      !isTransientMessage(nextMessage)
+    );
+  });
+}
+
+export function shouldPersistPatch(patch: Partial<ChatMessage>): boolean {
+  return (
+    patch.status === "completed" ||
+    patch.status === "failed" ||
+    typeof patch.taskId === "string" ||
+    typeof patch.resultUrl === "string" ||
+    typeof patch.resultOssKey === "string" ||
+    typeof patch.resultOriginalUrl === "string" ||
+    typeof patch.resultMimeType === "string"
+  );
+}
+
+export function buildAssistantResult(
+  mode: WorkbenchMode,
+  model: string,
+  specs: string[],
+  referenceCount: number,
+): ChatMessage["result"] {
+  if (mode === "image") {
+    return {
+      title: "图像任务已创建",
+      summary: referenceCount > 0 ? "已携带参考图，后续结果会进入资产库和画布。" : "已按当前模型和规格进入图像生成流程。",
+      specs,
+    };
+  }
+
+  if (mode === "video") {
+    return {
+      title: "视频任务已创建",
+      summary: referenceCount > 0 ? "已携带参考素材，生成后可继续拆分镜头并发布案例。" : "已按当前镜头设置进入视频生成流程。",
+      specs,
+    };
+  }
+
+  return {
+    title: "Agent 已接管",
+    summary: "我会把当前输入整理成脚本、分镜、素材需求和可复制的工作流节点。",
+    specs: [model, ...specs],
+  };
+}

src/features/workbench/workbenchMentionUtils.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import type { PromptMentionItem, PromptMentionTokenRange } from "./workbenchConstants";
+
+export function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function normalizePromptWhitespace(value: string) {
+  return value.replace(/[ \t]{2,}/g, " ").trim();
+}
+
+export function removePromptMentionTokenFromText(text: string, token: string) {
+  if (!token) return text;
+  const escapedToken = escapeRegExp(token);
+  return normalizePromptWhitespace(
+    text.replace(new RegExp(`(^|\\s)${escapedToken}(?=\\s|$)`, "g"), " "),
+  );
+}
+
+export function removePromptTextRange(text: string, start: number, end: number) {
+  return normalizePromptWhitespace(`${text.slice(0, start)}${text.slice(end)}`);
+}
+
+export function getPromptMentionTokenRanges(text: string, items: PromptMentionItem[]): PromptMentionTokenRange[] {
+  if (!text || !items.length) return [];
+  const ranges: PromptMentionTokenRange[] = [];
+  for (const item of items) {
+    const idx = text.indexOf(item.token);
+    if (idx >= 0) {
+      ranges.push({ start: idx, end: idx + item.token.length, item });
+    }
+  }
+  return ranges.sort((a, b) => a.start - b.start);
+}
+
+export function renderPromptPreviewNodes(
+  text: string,
+  items: PromptMentionItem[],
+): ReactNode[] {
+  if (!text) return [];
+
+  const tokens = Array.from(new Set(items.map((item) => item.token))).sort((a, b) => b.length - a.length);
+  const tokenMap = new Map(items.map((item) => [item.token, item]));
+  const nodes: ReactNode[] = [];
+  let cursor = 0;
+  let index = 0;
+
+  while (cursor < text.length) {
+    const matchedToken = tokens.find((token) => text.startsWith(token, cursor));
+
+    if (matchedToken) {
+      const matchedItem = tokenMap.get(matchedToken);
+      if (matchedItem) {
+        nodes.push(
+          <span key={`mention-${index}`} className="wb-prompt-mention-chip" data-token={matchedItem.token}>
+            {matchedItem.token}
+          </span>,
+        );
+        cursor += matchedToken.length;
+        index += 1;
+        continue;
+      }
+    }
+
+    const nextTokenStart = tokens.reduce((closest, token) => {
+      const pos = text.indexOf(token, cursor + 1);
+      return pos >= 0 && (closest < 0 || pos < closest) ? pos : closest;
+    }, -1);
+
+    const end = nextTokenStart >= 0 ? nextTokenStart : text.length;
+    const segment = text.slice(cursor, end);
+    if (segment) {
+      nodes.push(<span key={`text-${index}`}>{segment}</span>);
+      index += 1;
+    }
+    cursor = end;
+  }
+
+  return nodes;
+}

src/features/workbench/workbenchReferenceUtils.ts

@@ -0,0 +1,211 @@
+import {
+  REFERENCE_IMAGE_COMPRESS_THRESHOLD,
+  REFERENCE_IMAGE_MAX_DIMENSION,
+  REFERENCE_IMAGE_INITIAL_QUALITY,
+  REFERENCE_IMAGE_MIN_QUALITY,
+  type WorkbenchMode,
+  type ReferenceKind,
+  type ReferenceItem,
+  type WorkbenchOption,
+} from "./workbenchConstants";
+import { resolvePreUploadedUrl } from "../../api/referenceUploadService";
+
+export function getRatioOptionClassName(value: string) {
+  return `ai-workbench-ratio-option__preview--${value.replace(":", "-")}`;
+}
+
+export function getSettingsGridColumnsClassName(columns: 2 | 3 | 4 = 3) {
+  return `ai-workbench-settings-panel__grid--cols-${columns}`;
+}
+
+export function getReferenceAccept(mode: WorkbenchMode, videoFrameMode?: string) {
+  if (mode === "chat") return ".docx,.txt,.md,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp";
+  if (mode === "image") return "image/*";
+  if (videoFrameMode === "start-end") return "image/*";
+  return "image/*,video/mp4,video/quicktime,video/webm,video/x-msvideo,.mp4,.mov,.webm,.avi,audio/mpeg,audio/mp3,audio/wav,audio/x-wav,.mp3,.wav";
+}
+
+export function getReferenceUploadLabel(mode: WorkbenchMode) {
+  if (mode === "video") return "参考内容";
+  if (mode === "image") return "参考图";
+  return "附件";
+}
+
+export function getReferenceLimit(mode: WorkbenchMode, videoFrameMode?: string) {
+  if (mode === "video" && videoFrameMode === "start-end") return 2;
+  if (mode === "video") return 12;
+  if (mode === "image") return 9;
+  return 4;
+}
+
+export function getReferenceKindLabel(kind: ReferenceKind) {
+  if (kind === "image") return "图片";
+  if (kind === "video") return "视频";
+  if (kind === "audio") return "音频";
+  return "附件";
+}
+
+export function getReferenceEmptyCopy(mode: WorkbenchMode) {
+  if (mode === "video") return "上传最多12个参考素材，首尾帧模式仅保留2张图片，输入文字或 @ 引用内容，自由组合图、文、音、视频多元素";
+  if (mode === "image") return "最多上传9张参考图，输入文字或 @ 引用内容，控制角色、风格和构图";
+  return "上传附件后可用 @ 引用，帮助 Agent 读取上下文";
+}
+
+export function hexToRgbTriplet(hex: string) {
+  const normalized = hex.replace("#", "");
+  const full = normalized.length === 3
+    ? normalized
+        .split("")
+        .map((char) => `${char}${char}`)
+        .join("")
+    : normalized;
+
+  const value = Number.parseInt(full, 16);
+  const r = (value >> 16) & 255;
+  const g = (value >> 8) & 255;
+  const b = value & 255;
+  return `${r}, ${g}, ${b}`;
+}
+
+export function inferReferenceKind(file: File, mode: WorkbenchMode): ReferenceKind {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.startsWith("audio/")) return "audio";
+  return mode === "chat" ? "file" : "image";
+}
+
+export function disposeReferencePreview(item: Pick<ReferenceItem, "previewUrl">) {
+  if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+}
+
+export function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("Unable to read reference file"));
+    };
+    reader.onerror = () => reject(reader.error || new Error("Unable to read reference file"));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function bytesToHex(buffer: ArrayBuffer) {
+  return Array.from(new Uint8Array(buffer))
+    .map((byte) => byte.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+export async function buildReferenceFingerprint(file: File, kind: ReferenceKind) {
+  if (kind === "image" && window.crypto?.subtle) {
+    const digest = await window.crypto.subtle.digest("SHA-256", await file.arrayBuffer());
+    return `image:${bytesToHex(digest)}`;
+  }
+  return `${kind}:${file.name}:${file.size}:${file.lastModified}:${file.type}`;
+}
+
+export function canCompressReferenceImage(file: File) {
+  return (
+    file.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD &&
+    file.type.startsWith("image/") &&
+    !/svg|gif/i.test(file.type)
+  );
+}
+
+function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number) {
+  return new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(resolve, type, quality);
+  });
+}
+
+function getCompressedImageName(fileName: string) {
+  const baseName = fileName.replace(/\.[^.]+$/, "");
+  return `${baseName || "reference"}.jpg`;
+}
+
+export async function compressReferenceImageIfNeeded(file: File) {
+  if (!canCompressReferenceImage(file)) {
+    return { file, compressed: false };
+  }
+
+  try {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(1, REFERENCE_IMAGE_MAX_DIMENSION / Math.max(bitmap.width, bitmap.height));
+    let width = Math.max(1, Math.round(bitmap.width * scale));
+    let height = Math.max(1, Math.round(bitmap.height * scale));
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+      bitmap.close();
+      return { file, compressed: false };
+    }
+
+    const render = () => {
+      canvas.width = width;
+      canvas.height = height;
+      context.fillStyle = "#ffffff";
+      context.fillRect(0, 0, width, height);
+      context.drawImage(bitmap, 0, 0, width, height);
+    };
+
+    const encode = async () => {
+      let quality = REFERENCE_IMAGE_INITIAL_QUALITY;
+      let nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
+      while (nextBlob && nextBlob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && quality > REFERENCE_IMAGE_MIN_QUALITY) {
+        quality = Math.max(REFERENCE_IMAGE_MIN_QUALITY, quality - 0.08);
+        nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
+      }
+      return nextBlob;
+    };
+
+    render();
+    let blob = await encode();
+    while (blob && blob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && Math.max(width, height) > 960) {
+      width = Math.max(1, Math.round(width * 0.82));
+      height = Math.max(1, Math.round(height * 0.82));
+      render();
+      blob = await encode();
+    }
+    bitmap.close();
+
+    if (!blob || blob.size >= file.size) {
+      return { file, compressed: false };
+    }
+
+    return {
+      file: new File([blob], getCompressedImageName(file.name), {
+        type: "image/jpeg",
+        lastModified: file.lastModified,
+      }),
+      compressed: true,
+    };
+  } catch {
+    return { file, compressed: false };
+  }
+}
+
+export function buildReferenceToken(kind: ReferenceKind, index: number) {
+  if (kind === "image") return `@图片${index}`;
+  if (kind === "video") return `@视频${index}`;
+  if (kind === "audio") return `@音频${index}`;
+  return `@附件${index}`;
+}
+
+export async function resolveReferenceUrls(items: ReferenceItem[]): Promise<string[]> {
+  const tasks = items.map(async (item) => {
+    if (item.remoteUrl) return item.remoteUrl;
+    if (!item.file) {
+      if (item.previewUrl && /^https?:\/\//i.test(item.previewUrl)) {
+        return item.previewUrl;
+      }
+      return null;
+    }
+    const url = await resolvePreUploadedUrl(item.file, item.name, item.fingerprint);
+    if (url) {
+      item.remoteUrl = url;
+      return url;
+    }
+    return null;
+  });
+  const results = await Promise.all(tasks);
+  return results.filter((url): url is string => url !== null);
+}

src/features/workbench/workbenchStorage.ts

@@ -0,0 +1,173 @@
+import {
+  userKey,
+  MESSAGE_STORAGE_KEY,
+  ACTIVE_CONVERSATION_STORAGE_KEY,
+  PROMPT_HISTORY_STORAGE_KEY,
+  TASK_KEEPALIVE_STORAGE_KEY,
+  WORKBENCH_TASK_STALE_MS,
+  type ChatMessage,
+  type WorkbenchKeepaliveTask,
+} from "./workbenchConstants";
+import { parseWorkbenchTimestampValue } from "./workbenchConstants";
+
+export function readStoredMessages(): ChatMessage[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(userKey(MESSAGE_STORAGE_KEY));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((item): item is ChatMessage => {
+      if (!item || typeof item !== "object") return false;
+      const candidate = item as Partial<ChatMessage>;
+      return (
+        typeof candidate.id === "string" &&
+        (candidate.role === "user" || candidate.role === "assistant") &&
+        typeof candidate.body === "string"
+      );
+    });
+  } catch {
+    return [];
+  }
+}
+
+export function readStoredPromptHistory(): string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(userKey(PROMPT_HISTORY_STORAGE_KEY));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+export function readStoredActiveConversationId(messages: ChatMessage[] = []): number | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
+    const value = raw ? Number(raw) : NaN;
+    if (Number.isFinite(value) && value > 0) return value;
+  } catch {
+    // Active conversation recovery is optional.
+  }
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index]?.conversationId;
+    if (typeof candidate === "number" && Number.isFinite(candidate) && candidate > 0) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+export function persistActiveConversationId(conversationId: number | null) {
+  if (typeof window === "undefined") return;
+  try {
+    if (conversationId && Number.isFinite(conversationId)) {
+      window.localStorage.setItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY), String(conversationId));
+    } else {
+      window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
+    }
+  } catch {
+    // Local history is a convenience; generation still works without it.
+  }
+}
+
+export function persistMessages(messages: ChatMessage[]) {
+  try {
+    window.localStorage.setItem(userKey(MESSAGE_STORAGE_KEY), JSON.stringify(messages.slice(-60)));
+  } catch {
+    // Local history is a convenience; generation still works without it.
+  }
+}
+
+export function clearWorkbenchLocalState() {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(userKey(MESSAGE_STORAGE_KEY));
+    window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
+    window.localStorage.removeItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
+  } catch {
+    // Logout cleanup should never block the UI.
+  }
+}
+
+export function persistPromptHistory(history: string[]) {
+  try {
+    window.localStorage.setItem(userKey(PROMPT_HISTORY_STORAGE_KEY), JSON.stringify(history.slice(0, 20)));
+  } catch {
+    // Local history is optional.
+  }
+}
+
+// ─── Keepalive task persistence ──────────────────────────────────────
+
+export function buildRecoverableTaskFromMessage(conversationId: number, message: ChatMessage): WorkbenchKeepaliveTask | null {
+  if (message.role !== "assistant") return null;
+  if (!(message.status === "thinking" && message.taskId && message.mode !== "chat")) return null;
+  if (message.mode !== "image" && message.mode !== "video") return null;
+  if (Date.now() - parseWorkbenchTimestampValue(message.createdAt) > WORKBENCH_TASK_STALE_MS) return null;
+
+  const specs = message.result?.specs || [];
+  return {
+    taskId: message.taskId,
+    conversationId,
+    assistantMessageId: message.id,
+    operation: message.taskStatusLabel?.includes("超分") ? "video-super-resolution" : "generation",
+    mode: message.mode,
+    modelLabel: specs[0] || message.author || message.mode,
+    specs,
+    referenceCount: message.attachments?.length || 0,
+    progress: Math.max(10, Math.min(99, Number(message.taskProgress || 30))),
+    statusLabel: message.taskStatusLabel || "任务恢复中...",
+    startedAt: parseWorkbenchTimestampValue(message.createdAt) || Date.now(),
+  };
+}
+
+export function readStoredKeepaliveTasks(): Record<string, WorkbenchKeepaliveTask> {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+
+    const tasks: Record<string, WorkbenchKeepaliveTask> = {};
+    Object.values(parsed as Record<string, Partial<WorkbenchKeepaliveTask>>).forEach((task) => {
+      if (
+        task &&
+        typeof task.taskId === "string" &&
+        typeof task.conversationId === "number" &&
+        typeof task.assistantMessageId === "string" &&
+        (task.mode === "image" || task.mode === "video")
+      ) {
+        tasks[task.taskId] = {
+          taskId: task.taskId,
+          conversationId: task.conversationId,
+          assistantMessageId: task.assistantMessageId,
+          concurrencySlotId: typeof task.concurrencySlotId === "string" ? task.concurrencySlotId : undefined,
+          operation: task.operation === "video-super-resolution" ? "video-super-resolution" : "generation",
+          mode: task.mode,
+          modelLabel: task.modelLabel || task.mode,
+          specs: Array.isArray(task.specs) ? task.specs.filter((item): item is string => typeof item === "string") : [],
+          referenceCount: Number(task.referenceCount || 0),
+          progress: Number(task.progress || 0),
+          statusLabel: task.statusLabel || "Generating...",
+          startedAt: Number(task.startedAt || Date.now()),
+        };
+      }
+    });
+    return tasks;
+  } catch {
+    return {};
+  }
+}
+
+export function persistKeepaliveTasks(tasks: Record<string, WorkbenchKeepaliveTask>) {
+  try {
+    window.localStorage.setItem(userKey(TASK_KEEPALIVE_STORAGE_KEY), JSON.stringify(tasks));
+  } catch {
+    // Task restore is best-effort.
+  }
+}

src/hooks/useScrollEntrance.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useScrollEntrance<T extends HTMLElement>(threshold = 0.15) {
+  const ref = useRef<T>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    if (typeof IntersectionObserver === "undefined") {
+      setIsVisible(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return { ref, isVisible };
+}

src/styles/components/legacy-components.css

@@ -48,6 +48,7 @@
   background: var(--surface-elevated);
   box-shadow: var(--shadow-elevated);
   backdrop-filter: none;
+  transform-origin: top right;
 }
 
 .profile-popover__head {

src/styles/components/motion.css

@@ -34,11 +34,118 @@
   }
 }
 
+/* 260ms variant for carousel labels */
+.slide-up-in-260 {
+  animation: slide-up-in 260ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 @keyframes backdrop-in {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
+/* Popover / panel entrance utilities */
+.panel-enter {
+  animation: scale-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both,
+             slide-up-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.backdrop-enter {
+  animation: backdrop-in 140ms ease both;
+}
+
+/* Heart toggle spring animation */
+@keyframes heart-pop {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.3); }
+  70% { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+
+.heart-animate {
+  animation: heart-pop 420ms var(--ease-spring, cubic-bezier(0.34, 1.2, 0.64, 1)) both;
+}
+
+/* Result reveal stagger for generation output grids */
+.result-reveal > * {
+  opacity: 0;
+  animation: slide-up-in 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.result-reveal > *:nth-child(1) { animation-delay: 0ms; }
+.result-reveal > *:nth-child(2) { animation-delay: 80ms; }
+.result-reveal > *:nth-child(3) { animation-delay: 160ms; }
+.result-reveal > *:nth-child(4) { animation-delay: 240ms; }
+.result-reveal > *:nth-child(5) { animation-delay: 320ms; }
+.result-reveal > *:nth-child(n+6) { animation-delay: 400ms; }
+
+/* Scroll-triggered entrance: hidden until revealed by IntersectionObserver */
+.scroll-entrance {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              transform 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+.scroll-entrance.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-entrance.is-visible > * {
+  animation: slide-up-in 380ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.scroll-entrance.is-visible > *:nth-child(1) { animation-delay: 60ms; }
+.scroll-entrance.is-visible > *:nth-child(2) { animation-delay: 140ms; }
+.scroll-entrance.is-visible > *:nth-child(3) { animation-delay: 220ms; }
+
+/* Chat message entrance animation */
+@keyframes chat-message-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-message-enter {
+  animation: chat-message-in 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+/* AnimatedPanel: CSS transition-based enter/exit for popovers */
+.animated-panel {
+  opacity: 0;
+  transform: scale(0.95) translateY(8px);
+  transition:
+    opacity 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+    transform 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+  pointer-events: none;
+}
+
+.animated-panel.is-visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+/* Ecommerce tool panel crossfade on tool switch */
+@keyframes tool-panel-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.tool-panel-enter {
+  animation: tool-panel-fade-in 180ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 /* Stagger utility: apply to parent, children get delayed entrance */
 .motion-stagger > * {
   animation: list-item-in 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;

src/styles/components/page-transition.css

@@ -15,3 +15,56 @@
     transform: translateY(0);
   }
 }
+
+/* Directional page transitions */
+.page-motion--enter.is-forward {
+  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.page-motion--enter.is-backward {
+  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.page-motion--exit.is-forward {
+  animation: page-slide-out-forward 180ms ease both;
+}
+
+.page-motion--exit.is-backward {
+  animation: page-slide-out-backward 180ms ease both;
+}
+
+@keyframes page-slide-in-forward {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes page-slide-in-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes page-slide-out-forward {
+  to {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+}
+
+@keyframes page-slide-out-backward {
+  to {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}

src/styles/components/primitives.css

@@ -29,7 +29,8 @@
   width: 40%;
   height: 24px;
   border-radius: 8px;
-  background: var(--surface-elevated, #222);
+  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
 }
 
@@ -42,7 +43,8 @@
   flex: 1;
   height: 140px;
   border-radius: 14px;
-  background: var(--surface-elevated, #222);
+  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   animation-delay: 0.15s;
 }
@@ -51,16 +53,12 @@
   width: 100%;
   height: 200px;
   border-radius: 14px;
-  background: var(--surface-elevated, #222);
+  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   animation-delay: 0.3s;
 }
 
-@keyframes skeleton-shimmer {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 0.7; }
-}
-
 .page-transition-wrap {
   width: 100%;
   height: 100%;

src/styles/pages/ecommerce.css

@@ -9,6 +9,48 @@
   font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
 }
 
+/* Ecommerce generation progress bar */
+.ecommerce-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: var(--radius-sm, 10px);
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.08);
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.18);
+  margin: 8px 0;
+}
+
+.ecommerce-progress-bar__label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--fg-muted, #aeb8b1);
+  white-space: nowrap;
+}
+
+.ecommerce-progress-bar__track {
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.12);
+  overflow: hidden;
+}
+
+.ecommerce-progress-bar__fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--accent, #00ff88);
+  transition: width 80ms linear;
+}
+
+.ecommerce-progress-bar__value {
+  font-size: 12px;
+  font-weight: 900;
+  color: var(--accent, #00ff88);
+  min-width: 40px;
+  text-align: right;
+}
+
 /* Product set page: target dark two-column workspace with floating detail input. */
 .product-clone-page[data-tool="set"] {
   display: block;

src/styles/pages/home.css

@@ -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 {
@@ -405,6 +451,21 @@
   transform: translateZ(20px) scale(1.02);
 }
 
+.omni-home__carousel-card-label {
+  position: absolute;
+  bottom: 12px;
+  left: 14px;
+  z-index: 2;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
+  color: var(--fg-body, #f3f5f2);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
 .omni-home__carousel-card:hover {
   box-shadow:
     0 28px 58px rgb(0 0 0 / 34%),
@@ -570,6 +631,13 @@
   object-position: center;
   transform: none;
   transform-origin: center;
+  transition: transform 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              filter 280ms ease;
+}
+
+.omni-home__feature-visual:hover img {
+  transform: scale(1.03);
+  filter: saturate(1.1) contrast(1.06) brightness(1.04);
 }
 
 .omni-home__feature-stats {
@@ -721,6 +789,14 @@
   padding: 16px 18px;
   box-shadow: 0 20px 46px rgb(0 0 0 / 26%);
   backdrop-filter: blur(12px);
+  cursor: pointer;
+  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              box-shadow 200ms ease;
+}
+
+.omni-home__experience-route:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 24px 52px rgb(0 0 0 / 32%);
 }
 
 .omni-home__experience-route b {

src/styles/pages/legacy-pages.css

@@ -14271,19 +14271,6 @@
 }
 
 /* ─── Page Motion Animation ─── */
-.page-motion {
-  animation: pixel-page-enter 0.3s ease-out;
-}
-
-@keyframes pixel-page-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 /* ─── Workbench Page Layout Overrides ─── */
 .ai-workbench-page.is-active .ai-workbench-shell {
   grid-template-columns: 1fr auto;

src/styles/pages/script-tokens.css

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

src/styles/shell/app-shell.css

@@ -135,6 +135,11 @@
   font-size: 15px;
   font-weight: 900;
   cursor: pointer;
+  transition: opacity 160ms ease;
+}
+
+.brand-lockup:active {
+  opacity: 0.85;
 }
 
 .brand-lockup__mark {
@@ -303,6 +308,15 @@
   background: var(--bg-hover);
 }
 
+.creator-button:active,
+.member-button:active,
+.profile-button:active,
+.icon-button:active,
+.theme-toggle:active {
+  transform: scale(0.97);
+  transition-duration: 80ms;
+}
+
 .profile-button--guest:hover {
   background: rgba(var(--accent-rgb), 0.88);
   color: #07100b;
@@ -481,6 +495,15 @@
   box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
 }
 
+@keyframes nav-activate-pulse {
+  0% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34), 0 0 8px rgba(var(--accent-rgb), 0.25); }
+  100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34); }
+}
+
+.floating-nav__button.nav-just-activated {
+  animation: nav-activate-pulse 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 .floating-nav__button:hover .floating-nav__label,
 .floating-nav__button:focus-visible .floating-nav__label,
 .floating-nav__button.is-active .floating-nav__label {

src/styles/themes/dark-green.css

@@ -3990,6 +3990,13 @@
   isolation: isolate;
   break-inside: avoid;
   aspect-ratio: 4 / 5;
+  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              box-shadow 200ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
 }
 
 .web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-0,
@@ -5387,6 +5394,787 @@
   aspect-ratio: auto;
 }
 
+/* Profile center: commercial SaaS polish while preserving the dark-green theme. */
+.web-shell[data-ui-theme="dark-green"] .profile-page {
+  background:
+    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px),
+    var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
+  height: 214px;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%),
+    linear-gradient(180deg, var(--bg-elevated), var(--dg-page));
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
+  opacity: 0.7;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
+  background-position: center;
+  background-size: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
+  background:
+    linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)),
+    radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
+  height: 36px;
+  padding: 0 14px;
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(10, 12, 13, 0.66);
+  backdrop-filter: blur(14px);
+  flex-direction: row;
+  justify-content: center;
+  min-width: 104px;
+  line-height: 1;
+  font-weight: 600;
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
+  top: 18px;
+  right: max(18px, calc((100vw - 1240px) / 2 + 18px));
+  bottom: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: rgba(12, 18, 16, 0.86);
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__body {
+  grid-template-columns: 292px minmax(0, 1fr);
+  gap: 34px;
+  width: min(1240px, calc(100% - 56px));
+  margin-top: -72px;
+  padding-bottom: 56px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
+  border-color: rgba(255, 255, 255, 0.075);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
+    var(--bg-surface);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+  gap: 18px;
+  padding: 22px;
+  border-radius: var(--radius-lg);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
+  gap: 10px;
+  width: 100%;
+  padding-bottom: 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before {
+  content: "";
+  position: absolute;
+  inset: -7px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%);
+  opacity: 0.9;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  border: 4px solid var(--dg-page);
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)),
+    var(--bg-elevated);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
+  left: 50%;
+  top: 50%;
+  width: 88px;
+  height: 88px;
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(8, 10, 11, 0.68);
+  color: #fff;
+  font-size: 20px;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
+  right: -3px;
+  bottom: 10px;
+  z-index: 4;
+  border: 2px solid var(--bg-surface);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
+  background: rgba(8, 10, 11, 0.82);
+  transform: translate(-50%, -50%) scale(1.02);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__username {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 21px;
+  letter-spacing: 0;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
+  width: 100%;
+  min-height: 56px;
+  padding: 10px 12px;
+  border-color: rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--fg-muted);
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
+  background: var(--bg-elevated);
+  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-width: 68px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.075);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--fg-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.045);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent-hover);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 48px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.055);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.018);
+  color: var(--fg-muted);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.45;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span {
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+  font-size: 12px;
+  opacity: 0.78;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: rgba(var(--accent-rgb), 0.055);
+  color: var(--fg-body);
+  outline: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon,
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon {
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status {
+  color: var(--accent);
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
+  gap: 0;
+  width: 100%;
+  padding: 12px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.065);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
+  font-size: 19px;
+  line-height: 1.1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count span {
+  margin-top: 4px;
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
+  min-height: 40px;
+  padding: 0 15px;
+  border-radius: var(--radius-sm);
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan {
+  justify-content: center;
+  border-color: rgba(var(--accent-rgb), 0.24);
+  background: rgba(var(--accent-rgb), 0.07);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary {
+  border-color: rgba(var(--accent-rgb), 0.62);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary {
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger {
+  margin-top: 2px;
+  border-color: transparent;
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover {
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover {
+  border-color: var(--accent-hover);
+  background: var(--accent-hover);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover {
+  border-color: rgba(255, 90, 95, 0.36);
+  background: rgba(255, 90, 95, 0.1);
+  color: #ff9a9d;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main {
+  gap: 22px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
+  min-height: 52px;
+  margin-bottom: 2px;
+  padding: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.065);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.022);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
+  min-height: 42px;
+  padding: 0 18px;
+  border: 0;
+  border-radius: var(--radius-sm);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after {
+  content: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__section {
+  gap: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
+  margin-bottom: 0;
+  color: var(--fg-body);
+  font-size: 15px;
+  letter-spacing: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
+  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+  gap: 14px;
+  max-height: min(470px, 48vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 6px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
+  scrollbar-width: thin;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.28);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--accent-rgb), 0.42);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
+  min-height: 136px;
+  padding: 16px;
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent),
+    var(--bg-surface);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
+  display: -webkit-box;
+  min-height: 38px;
+  overflow: hidden;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.55;
+  text-overflow: ellipsis;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.055);
+  color: var(--fg-soft);
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
+  position: relative;
+  min-height: 280px;
+  overflow: hidden;
+  padding: 46px 28px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+  font-size: 18px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
+  position: relative;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
+  position: relative;
+  min-height: 38px;
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 14px;
+  max-height: min(470px, 48vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 6px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
+  scrollbar-width: thin;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
+  min-height: 74px;
+  padding: 10px;
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
+  transform: translateY(-2px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
+  flex-basis: 70px;
+  width: 70px;
+  height: 52px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
+  margin-bottom: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.065);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
+  min-height: 32px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
+  background: rgba(var(--accent-rgb), 0.1);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  padding: 14px;
+  border-radius: var(--radius-md);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.055);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small {
+  overflow: hidden;
+  color: var(--fg-soft);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 17px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
+    grid-template-columns: 1fr;
+    width: min(100% - 36px, 760px);
+    margin-top: -54px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+    align-items: stretch;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
+    overflow-x: auto;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page__banner {
+    height: 152px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
+    top: 10px;
+    right: 12px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 999px;
+    font-size: 0;
+    gap: 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    font-size: 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
+    width: min(100% - 28px, 560px);
+    margin-top: -32px;
+    padding-bottom: 88px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+    gap: 13px;
+    padding: 18px;
+    border-radius: var(--radius-md);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
+    gap: 7px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
+    width: 76px;
+    height: 76px;
+    border-width: 3px;
+    font-size: 24px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
+    width: 76px;
+    height: 76px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
+    bottom: 6px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__username {
+    font-size: 20px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__bio {
+    min-height: 46px;
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
+    min-height: 42px;
+    padding: 8px 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__counts {
+    padding: 9px 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
+    font-size: 18px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
+    min-height: 36px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
+    flex: 0 0 auto;
+    padding: 0 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+    max-height: min(312px, 46vh);
+    padding-right: 4px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
+    min-height: 112px;
+    padding: 9px;
+    gap: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
+    width: 100%;
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
+    max-width: 100%;
+    overflow: hidden;
+    padding: 3px 7px;
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
+    min-height: 30px;
+    font-size: 11px;
+    line-height: 1.45;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 8px;
+    font-size: 10px;
+  }
+}
+
 /* Ecommerce generation page: keep its carousel and composer independent from
    the community carousel rules that share class names. */
 .web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {

vite.config.ts

@@ -1,45 +1,49 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
-  plugins: [
-    react(),
-    compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
-  ],
-  server: {
-    port: 5174,
-    host: "127.0.0.1",
-    proxy: {
-      "/api": {
-        target: "http://47.110.225.76:3600",
-        changeOrigin: true,
-      },
-    },
-  },
-  preview: {
-    port: 4174,
-    host: "127.0.0.1",
-  },
-  esbuild: {
-    drop: ["debugger"],
-  },
-  build: {
-    sourcemap: "hidden",
-    rollupOptions: {
-      output: {
-        manualChunks(id: string) {
-          if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
-            return "vendor-react";
-          }
-          if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
-            return "vendor-antd";
-          }
-          if (id.includes("node_modules/@xyflow")) {
-            return "vendor-xyflow";
-          }
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
+    plugins: [
+      react(),
+      compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
+    ],
+    server: {
+      port: 5174,
+      host: "127.0.0.1",
+      proxy: {
+        "/api": {
+          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
+          changeOrigin: true,
         },
       },
     },
-  },
-});
+    preview: {
+      port: 4174,
+      host: "127.0.0.1",
+    },
+    esbuild: {
+      drop: ["console", "debugger"],
+    },
+    build: {
+      sourcemap: "hidden",
+      rollupOptions: {
+        output: {
+          manualChunks(id: string) {
+            if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
+              return "vendor-react";
+            }
+            if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
+              return "vendor-antd";
+            }
+            if (id.includes("node_modules/@xyflow")) {
+              return "vendor-xyflow";
+            }
+          },
+        },
+      },
+    },
+  };
+});