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

ProfilePage组件优化： - 新增个性签名编辑功能（内联编辑/确认/取消交互） - 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined） - 新增 formatProfileDate 工具函数，统一日期格式化（中文友好） - 新增 formatTaskType 函数，任务类型中文化显示 - 新增 formatTaskStatus 函数，任务状态中文化显示 - 新增 formatAssetStatus 函数，资产状态中文化显示 - 优化空状态展示，增加图标占位 dark-green主题层样式增强： - 个人中心背景增加微光渐变（accent光晕+半透明遮罩） - Banner区域高度优化为214px，增加底部渐变分割线 - Banner叠加层增加径向光晕效果 - Banner编辑按钮增加毛玻璃质感（backdrop-filter） - 侧边栏/主体/选项卡/列表卡片等多处细节增强 - 按钮、标签、统计数字等组件加入微交互 - 保持暗绿主题配色体系不变，仅提升精致度
Merge branch 'master' of http://118.145.251.184:3000/OmniAI/omniai-web into feat/home-entry-buttons-refined
2026-06-03 09:53:05 +08:00 · 2026-06-02 21:30:06 +08:00 · 2026-06-02 19:09:00 +08:00 · 2026-06-02 10:48:38 +00:00 · 2026-06-02 18:47:00 +08:00 · 2026-06-02 18:31:39 +08:00
24 changed files with 1518 additions and 123 deletions
@@ -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=
@@ -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;
@@ -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>
+  );
+}
@@ -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>
@@ -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>
  );
 }
@@ -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>
  );
@@ -477,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);
@@ -11,6 +11,7 @@ import {
  SkinOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
+import { EcommerceProgressBar } from "./EcommerceProgressBar";

 const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 const ecommerceGenerated = `${OSS_MUBAN}/ecommerce-carousel-generated.png`;
@@ -2402,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}
@@ -2547,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}
@@ -2592,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} />
@@ -2605,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>
      )}
@@ -2650,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} />
@@ -2663,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}。`
@@ -2814,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}
        >
@@ -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>
+  );
+}
@@ -9,6 +9,16 @@ import {
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import WelcomeSplash from "./WelcomeSplash";
+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`;
@@ -256,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>
                  );
                })}
@@ -282,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}
@@ -303,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 />
@@ -337,7 +348,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
              体验电商生成
            </button>
          </div>
-        </section>
+        </ScrollEntrance>
      </main>
    </section>
    </>
@@ -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");
@@ -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>
+              {isBioEditing ? (
+                <div className="profile-page__bio-editor">
                  <textarea
                    className="profile-page__bio"
                    value={profileBio}
                    onChange={(event) => setProfileBio(event.target.value)}
-                onBlur={handleBioBlur}
-                placeholder={displayedBio}
+                    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>
@@ -2914,7 +2914,7 @@ function WorkbenchPage({
                        </div>
                      )}
                      {messages.map((message) => (
-                        <article key={message.id} className={`ai-chat-message-row${message.role === "user" ? " is-user" : ""}`}>
+                        <article key={message.id} className={`ai-chat-message-row chat-message-enter${message.role === "user" ? " is-user" : ""}`}>
                          <div className={`ai-chat-avatar${message.role === "user" ? " ai-chat-avatar--user" : ""}`}>
                            {message.role === "user" ? "我" : "AI"}
                          </div>
@@ -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 };
+}
@@ -48,6 +48,7 @@
  background: var(--surface-elevated);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: none;
+  transform-origin: top right;
 }

 .profile-popover__head {
@@ -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;
@@ -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);
+  }
+}
@@ -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%;
@@ -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;
@@ -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 {
@@ -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;
@@ -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 {
@@ -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 {
@@ -1,8 +1,11 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";

-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
    plugins: [
      react(),
      compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
@@ -12,7 +15,7 @@ export default defineConfig({
      host: "127.0.0.1",
      proxy: {
        "/api": {
-        target: "http://47.110.225.76:3600",
+          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
          changeOrigin: true,
        },
      },
@@ -22,7 +25,7 @@ export default defineConfig({
      host: "127.0.0.1",
    },
    esbuild: {
-    drop: ["debugger"],
+      drop: ["console", "debugger"],
    },
    build: {
      sourcemap: "hidden",
@@ -42,4 +45,5 @@ export default defineConfig({
        },
      },
    },
+  };
 });
Author	SHA1	Message	Date
ludan	87d81d2c86	feat: 个人中心界面UI优化，提升商业产品精致度 ProfilePage组件优化： - 新增个性签名编辑功能（内联编辑/确认/取消交互） - 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined） - 新增 formatProfileDate 工具函数，统一日期格式化（中文友好） - 新增 formatTaskType 函数，任务类型中文化显示 - 新增 formatTaskStatus 函数，任务状态中文化显示 - 新增 formatAssetStatus 函数，资产状态中文化显示 - 优化空状态展示，增加图标占位 dark-green主题层样式增强： - 个人中心背景增加微光渐变（accent光晕+半透明遮罩） - Banner区域高度优化为214px，增加底部渐变分割线 - Banner叠加层增加径向光晕效果 - Banner编辑按钮增加毛玻璃质感（backdrop-filter） - 侧边栏/主体/选项卡/列表卡片等多处细节增强 - 按钮、标签、统计数字等组件加入微交互 - 保持暗绿主题配色体系不变，仅提升精致度	2026-06-03 09:53:05 +08:00
ludan	178c2ec695	Merge branch 'master' of http://118.145.251.184:3000/OmniAI/omniai-web into feat/home-entry-buttons-refined	2026-06-02 21:30:06 +08:00
ludan	324ebf5ce5	feat: 优化首页入口按钮质感，提升商业产品精致度 - 按钮背景改为微渐变+毛玻璃效果(backdrop-filter) - 边框改为半透明白色，圆角从8px升级到12px - 增加内高光+外层深度阴影提升层次感 - 字间距、字重大小幅调整，更精致克制 - hover态增加accent光晕+图标变绿+放大效果 - 主按钮增加渐变绿底+内高光+绿色辉光阴影 - 增加按压态scale(0.97)反馈 - 主按钮图标hover放大1.12倍	2026-06-02 19:09:00 +08:00
stringadmin	e5e5af5b54	Merge pull request 'Feat/ui animation enhancements' (#5 ) from feat/ui-animation-enhancements into master Reviewed-on: #5	2026-06-02 10:48:38 +00:00
stringadmin	fd71b2b18e	fix: redirect to login page after logout instead of workbench Logout and session expiry previously redirected to "workbench" which requires authentication, causing 401 errors and a frozen page state. Now correctly redirects to "login" page immediately. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-02 18:47:00 +08:00
stringadmin	6b9953625e	feat: UI interaction polish — exit animations, hover effects, directional transitions - Add AnimatedPanel component with CSS transition-based enter/exit for Profile popover and Notification panel (140ms scale+fade) - Add nav-activate-pulse animation for floating-nav active indicator (320ms glow) - Add tool-panel-fade-in crossfade when switching ecommerce tools - Add carousel-card-label slide-up-in 260ms on active carousel card - Add feature-visual img hover scale(1.03)+brightness, experience-route hover translateY(-2px) - Add community-case-card--mosaic hover scale(1.02)+shadow lift - Add directional PageTransition: forward→slideX(20px), backward→slideX(-20px) - Move vite proxy target from hardcoded IP to VITE_DEV_PROXY env variable - Add .env.example for developer onboarding Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-02 18:31:39 +08:00
stringadmin	93a538d51d	feat: UI animation enhancements across all major pages P1 - Critical UX feedback: - Add scale-in + slide-up-in entrance animations to profile popover and notification panel - Port SmoothedProgressBar to EcommercePage (4 generation tools: clone, detail, tryOn, productSet) - Add result-reveal stagger animation to ecommerce result grids - Add heart-pop spring animation to CommunityPage favorite toggle P2 - Visual polish: - Add scroll-entrance IntersectionObserver animations for HomePage feature sections and experience section - Add chat-message-in entrance animation to WorkbenchPage message rows - Fix prefers-reduced-motion accessibility in WelcomeSplash canvas (skip animation, instant entry) P3 - CSS consolidation: - Remove conflicting .page-motion definition from legacy-pages.css (keep translateY version from legacy-components.css) - Consolidate skeleton-shimmer: remove opacity-pulse keyframe from primitives.css, unify with gradient sweep - Wire up --ease-spring token for heart-pop animation - Add :active press states (scale 0.97) to topbar buttons, brand lockup Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-02 17:37:51 +08:00