Merge pull request 'feat: 工具盒视觉重设计 + 个人中心详情弹窗' (#22) from feat/tool-hub-redesign-and-profile-detail into master

Reviewed-on: #22

src/App.tsx

@@ -263,6 +263,7 @@ function App() {
 
   // Task store
   const tasks = useTaskStore((s) => s.tasks);
+  const setTasks = useTaskStore((s) => s.setTasks);
   const appendTask = useTaskStore((s) => s.appendTask);
   const mergeServerTasks = useTaskStore((s) => s.mergeServerTasks);
   const clearTasks = useTaskStore((s) => s.clearTasks);
@@ -1042,6 +1043,8 @@ function App() {
             onOpenWorkbench={() => handleSetView("workbench")}
             onOpenCommunity={() => handleSetView("community")}
             onDeleteProject={handleDeleteProject}
+            onOpenProject={handleOpenProject}
+            onRemoveWork={(task) => setTasks(tasks.filter((item) => item.id !== task.id))}
           />
         );
       case "community":

src/components/AppShell.tsx

@@ -75,7 +75,7 @@ function AppShell({
   const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
-  const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
+  const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
   const toolSurfaceViews = [
     "workbench",
     "canvas",

src/features/more/MorePage.tsx

@@ -12,7 +12,7 @@ import {
   ThunderboltOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { useCallback, useEffect, useState } from "react";
 import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
 
@@ -28,6 +28,8 @@ interface MoreTool {
   id: string;
   title: string;
   text: string;
+  useCase: string;
+  tags: string[];
   icon: ReactNode;
   category: ToolCategory;
   target?: WebViewKey;
@@ -37,23 +39,77 @@ interface MoreTool {
   featured?: boolean;
 }
 
+type CompareScene =
+  | "workbench"
+  | "inpaint"
+  | "camera"
+  | "upscale"
+  | "watermark"
+  | "dialog"
+  | "subtitle"
+  | "digital-human"
+  | "character"
+  | "avatar";
+
+const toolCompareScenes: Record<string, CompareScene> = {
+  workbench: "workbench",
+  inpaint: "inpaint",
+  camera: "camera",
+  upscale: "upscale",
+  watermarkRemoval: "watermark",
+  dialogGenerator: "dialog",
+  subtitleRemoval: "subtitle",
+  digitalHuman: "digital-human",
+  characterMix: "character",
+  avatarConsole: "avatar",
+};
+
+function ToolComparePanel({ scene }: { scene: CompareScene }) {
+  return (
+    <span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
+      <span className="more-card__compare-labels">
+        <span>Before</span>
+        <span>After</span>
+      </span>
+      <span className="more-card__compare-stage">
+        <span className="more-card__compare-side more-card__compare-side--before">
+          <span className="more-card__scene-subject" />
+          <span className="more-card__scene-detail" />
+          <span className="more-card__scene-overlay" />
+        </span>
+        <span className="more-card__compare-divider">
+          <span />
+        </span>
+        <span className="more-card__compare-side more-card__compare-side--after">
+          <span className="more-card__scene-subject" />
+          <span className="more-card__scene-detail" />
+          <span className="more-card__scene-overlay" />
+        </span>
+      </span>
+    </span>
+  );
+}
+
 const tools: MoreTool[] = [
-  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
-  { id: "inpaint", title: "局部重绘", text: "遮罩区域重新生成", icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
-  { id: "camera", title: "镜头实验室", text: "角度、焦段和机位控制", icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
-  { id: "upscale", title: "分辨率提升", text: "图片与视频高清超分", icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
-  { id: "watermarkRemoval", title: "去水印", text: "AI 智能去除图片水印和文字", icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
-  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，添加可拖拽编辑的对话框", icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
-  { id: "subtitleRemoval", title: "字幕去除", text: "AI 智能擦除视频字幕", icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
-  { id: "digitalHuman", title: "数字人", text: "参考人像与音频生成口播视频", icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
-  { id: "characterMix", title: "角色迁移", text: "人物图迁移到参考视频动作", icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
-  { id: "avatarConsole", title: "数字人控制台", text: "形象、播报、互动与接入配置", icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
+  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
+  { id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
+  { id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
+  { id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
+  { id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
+  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
+  { id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
+  { id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
+  { id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
+  { id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
 ];
 
 interface FeaturedTool {
   id: string;
   title: string;
   desc: string;
+  kicker: string;
+  steps: string[];
+  outcome: string;
   icon: ReactNode;
   imageTool?: WebImageWorkbenchTool;
   target?: WebViewKey;
@@ -65,7 +121,10 @@ const featuredTools: FeaturedTool[] = [
   {
     id: "workbench",
     title: "图片工作台",
-    desc: "融合、修复、局部增强 — 一站式图片创作",
+    desc: "从一张素材开始，完成精修、合成和二次创作。",
+    kicker: "图片精修工作流",
+    steps: ["上传素材", "局部修复", "高清导出"],
+    outcome: "适合商品图、海报图和创意视觉",
     icon: <EditOutlined />,
     imageTool: "workbench",
     category: "image",
@@ -74,7 +133,10 @@ const featuredTools: FeaturedTool[] = [
   {
     id: "digitalHuman",
     title: "数字人",
-    desc: "参考人像与音频，一键生成口播视频",
+    desc: "用参考人像和音频，快速生成可交付口播视频。",
+    kicker: "口播视频工作流",
+    steps: ["选择人像", "上传音频", "生成视频"],
+    outcome: "适合品牌讲解、课程和带货短视频",
     icon: <CustomerServiceOutlined />,
     target: "digitalHuman",
     category: "video",
@@ -136,6 +198,18 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     }
   }, [onOpenImageTool, onSelectView]);
 
+  const openFeaturedTool = useCallback((tool: FeaturedTool) => {
+    pushRecentToolId(tool.id);
+    setRecentIds(getRecentToolIds());
+    if (tool.imageTool && onOpenImageTool) {
+      onOpenImageTool(tool.imageTool);
+      return;
+    }
+    if (tool.target && onSelectView) {
+      onSelectView(tool.target);
+    }
+  }, [onOpenImageTool, onSelectView]);
+
   const filteredTools = tools.filter((t) => {
     if (t.featured) return false;
     if (filter === "all") return true;
@@ -143,6 +217,13 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     return t.category === filter;
   });
 
+  const filterCounts: Record<FilterKey, number> = {
+    all: tools.filter((t) => !t.featured).length,
+    image: tools.filter((t) => !t.featured && t.category === "image").length,
+    video: tools.filter((t) => !t.featured && t.category === "video").length,
+    upcoming: tools.filter((t) => !t.featured && !t.ready).length,
+  };
+
   const recentTools = recentIds
     .map((id) => tools.find((t) => t.id === id))
     .filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
@@ -153,19 +234,31 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     return acc;
   }, {} as Record<ToolCategory, MoreTool[]>);
 
+  const activeFilterLabel = filters.find((item) => item.key === filter)?.label ?? "全部";
+  const hasGroupedTools = (["image", "video"] as ToolCategory[]).some((cat) => groupedTools[cat]?.length);
+
   return (
     <div className="more-page-v2">
       <header className="more-page-v2__header">
-        <h1>工具盒</h1>
-        <nav className="more-page-v2__filters">
+        <div className="more-page-v2__title-group">
+          <span className="more-page-v2__eyebrow">AI Tool Hub</span>
+          <h1>工具盒</h1>
+        </div>
+        <div className="more-page-v2__header-meta" aria-label="工具盒概览">
+          <span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
+          <span>{featuredTools.length} 个核心入口</span>
+        </div>
+        <nav className="more-page-v2__filters" aria-label="工具分类筛选">
           {filters.map((f) => (
             <button
               key={f.key}
               type="button"
               className={filter === f.key ? "is-active" : ""}
+              aria-pressed={filter === f.key}
               onClick={() => setFilter(f.key)}
             >
-              {f.label}
+              <span>{f.label}</span>
+              <em>{filterCounts[f.key]}</em>
             </button>
           ))}
         </nav>
@@ -176,6 +269,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
           <section className="more-page-v2__section">
             <h2 className="more-page-v2__section-title">
               <ClockCircleOutlined /> 最近使用
+              <span>继续使用</span>
             </h2>
             <div className="more-page-v2__recent-row">
               {recentTools.map((tool) => (
@@ -183,10 +277,14 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className="more-card more-card--recent"
+                  aria-label={`打开最近使用工具：${tool.title}`}
                   onClick={() => openTool(tool)}
                 >
                   <span className="more-card__icon">{tool.icon}</span>
-                  <strong>{tool.title}</strong>
+                  <span className="more-card__recent-body">
+                    <strong>{tool.title}</strong>
+                    <small>{categoryLabels[tool.category]}</small>
+                  </span>
                 </button>
               ))}
             </div>
@@ -204,23 +302,22 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className="more-card more-card--featured"
-                  style={{ "--card-gradient": tool.gradient } as React.CSSProperties}
-                  onClick={() => {
-                    pushRecentToolId(tool.id);
-                    setRecentIds(getRecentToolIds());
-                    if (tool.imageTool && onOpenImageTool) {
-                      onOpenImageTool(tool.imageTool);
-                      return;
-                    }
-                    if (tool.target && onSelectView) {
-                      onSelectView(tool.target);
-                    }
-                  }}
+                  style={{ "--card-gradient": tool.gradient } as CSSProperties}
+                  aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
+                  onClick={() => openFeaturedTool(tool)}
                 >
                   <span className="more-card__featured-icon">{tool.icon}</span>
                   <div className="more-card__featured-body">
+                    <span className="more-card__featured-kicker">{tool.kicker}</span>
                     <strong>{tool.title}</strong>
-                    <span>{tool.desc}</span>
+                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
+                    <span className="more-card__featured-desc">{tool.desc}</span>
+                    <span className="more-card__steps" aria-hidden="true">
+                      {tool.steps.map((step) => (
+                        <span key={step}>{step}</span>
+                      ))}
+                    </span>
+                    <span className="more-card__outcome">{tool.outcome}</span>
                     <span className="more-card__cta">开始使用 →</span>
                   </div>
                 </button>
@@ -229,13 +326,14 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
           </section>
         )}
 
-        {(["image", "video", "template"] as ToolCategory[]).map((cat) => {
+        {(["image", "video"] as ToolCategory[]).map((cat) => {
           const group = groupedTools[cat];
           if (!group || group.length === 0) return null;
           return (
             <section key={cat} className="more-page-v2__section">
               <h2 className="more-page-v2__section-title">
                 {categoryIcons[cat]} {categoryLabels[cat]}
+                <span>{group.length}</span>
               </h2>
               <div className="more-page-v2__grid">
                 {group.map((tool) => (
@@ -243,12 +341,21 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                     key={tool.id}
                     type="button"
                     className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
+                    aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
                     onClick={() => openTool(tool)}
                     disabled={!tool.ready}
                   >
                     <span className="more-card__icon">{tool.icon}</span>
+                    <span className="more-card__topline">
+                      {tool.tags.slice(0, 2).map((tag) => (
+                        <span key={tag}>{tag}</span>
+                      ))}
+                    </span>
                     <strong>{tool.title}</strong>
+                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
                     <span className="more-card__desc">{tool.text}</span>
+                    <span className="more-card__use-case">{tool.useCase}</span>
+                    <span className="more-card__action">打开工具 →</span>
                     {tool.badge && <span className="more-card__badge">{tool.badge}</span>}
                   </button>
                 ))}
@@ -256,6 +363,21 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
             </section>
           );
         })}
+
+        {!hasGroupedTools && (
+          <section className="more-page-v2__section">
+            <div className="more-page-v2__empty">
+              <span className="more-page-v2__empty-icon">
+                <ClockCircleOutlined />
+              </span>
+              <strong>{activeFilterLabel}工具正在整理中</strong>
+              <p>当前分类暂无可展示入口，后续能力上线后会在这里集中呈现。</p>
+              <button type="button" className="more-page-v2__empty-action" onClick={() => setFilter("all")}>
+                查看全部可用工具
+              </button>
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );

src/features/profile/ProfilePage.tsx

@@ -4,6 +4,7 @@ import {
   CheckCircleFilled,
   CloseOutlined,
   DeleteOutlined,
+  DownloadOutlined,
   EditOutlined,
   FileImageOutlined,
   FolderOpenOutlined,
@@ -17,7 +18,8 @@ import {
   ShareAltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
+import { useEffect, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
+import { createPortal } from "react-dom";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { assetClient } from "../../api/assetClient";
 import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
@@ -26,6 +28,7 @@ import { isServerRequestError } from "../../api/serverConnection";
 import { ossAssets } from "../../data/ossAssets";
 import type { WebAuthMode, WebGenerationPreviewTask, WebProjectSummary, WebUsageSummary, WebUserSession } from "../../types";
 import type { SavedAssetItem } from "../assets/localAssetStore";
+import { downloadResultAsset } from "../workbench/workbenchDownload";
 
 interface ProfilePageProps {
   session: WebUserSession | null;
@@ -41,11 +44,16 @@ interface ProfilePageProps {
   onOpenWorkbench: () => void;
   onOpenCommunity: () => void;
   onDeleteProject?: (project: WebProjectSummary) => void;
+  onOpenProject?: (project: WebProjectSummary) => void;
+  onRemoveWork?: (task: WebGenerationPreviewTask) => void;
 }
 
 type AuthTab = "password" | "email" | "phone";
 type ProfilePanel = "works" | "projects" | "assets" | "community";
 type AccountPanel = "credits" | "tasks";
+type ProfileDetailSelection =
+  | { kind: "work"; item: WebGenerationPreviewTask }
+  | { kind: "asset"; item: SavedAssetItem };
 
 const PROFILE_LOCAL_STORAGE_PREFIX = "omniai-web-profile-ui";
 const AUTH_LOGO_URL = ossAssets.brand.logo;
@@ -210,6 +218,8 @@ function ProfilePage({
   onOpenWorkbench,
   onOpenCommunity,
   onDeleteProject,
+  onOpenProject,
+  onRemoveWork,
 }: ProfilePageProps) {
   const isLoggedIn = Boolean(session);
   const userId = session?.user.id;
@@ -253,6 +263,10 @@ function ProfilePage({
   const [bioEditBackup, setBioEditBackup] = useState("");
   const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
   const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
+  const [detailSelection, setDetailSelection] = useState<ProfileDetailSelection | null>(null);
+  const [detailNotice, setDetailNotice] = useState<string | null>(null);
+  const [isDeletingDetail, setIsDeletingDetail] = useState(false);
+  const [isDownloadingDetail, setIsDownloadingDetail] = useState(false);
 
   const completedTasks = tasks.filter((task) => task.status === "completed");
   const visibleWorks = completedTasks.length ? completedTasks : tasks.slice(0, 6);
@@ -260,6 +274,30 @@ function ProfilePage({
   const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
   const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
   const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
+  const activePanelTitle =
+    activePanel === "works"
+      ? "代表作"
+      : activePanel === "projects"
+        ? "服务器项目"
+        : activePanel === "assets"
+          ? "我的资产"
+          : "社区审核";
+  const activePanelDescription =
+    activePanel === "works"
+      ? "最近完成的高质量生成内容"
+      : activePanel === "projects"
+        ? "云端同步的创作项目"
+        : activePanel === "assets"
+          ? "可复用的图片、视频与素材"
+          : "已提交社区的案例状态";
+  const activePanelCount =
+    activePanel === "works"
+      ? visibleWorks.length
+      : activePanel === "projects"
+        ? projects.length
+        : activePanel === "assets"
+          ? savedAssets.length
+          : communityCases.length;
   const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
   const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
   const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
@@ -611,6 +649,213 @@ function ProfilePage({
     setBioStatusNotice(null);
   };
 
+  const handleInteractiveCardKeyDown = (event: KeyboardEvent<HTMLElement>, action: () => void) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    action();
+  };
+
+  const openDetailSelection = (selection: ProfileDetailSelection) => {
+    setDetailNotice(null);
+    setIsDeletingDetail(false);
+    setIsDownloadingDetail(false);
+    setDetailSelection(selection);
+  };
+
+  const closeDetailSelection = () => {
+    if (isDeletingDetail || isDownloadingDetail) return;
+    setDetailSelection(null);
+    setDetailNotice(null);
+  };
+
+  useEffect(() => {
+    if (!detailSelection) return undefined;
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") closeDetailSelection();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [detailSelection, isDeletingDetail, isDownloadingDetail]);
+
+  useEffect(() => {
+    if (!detailSelection || typeof document === "undefined") return undefined;
+
+    const { body, documentElement } = document;
+    const previousBodyOverflow = body.style.overflow;
+    const previousRootOverscroll = documentElement.style.overscrollBehavior;
+
+    body.style.overflow = "hidden";
+    documentElement.style.overscrollBehavior = "contain";
+
+    return () => {
+      body.style.overflow = previousBodyOverflow;
+      documentElement.style.overscrollBehavior = previousRootOverscroll;
+    };
+  }, [detailSelection]);
+
+  const handleDownloadSelectedDetail = async () => {
+    if (!detailSelection || isDownloadingDetail) return;
+
+    const isWork = detailSelection.kind === "work";
+    const item = detailSelection.item;
+    const url = isWork ? item.outputUrl : item.imageUrl || item.url || "";
+    if (!url) {
+      setDetailNotice("暂无可下载的媒体文件");
+      return;
+    }
+
+    const isVideo = isWork ? item.type === "video" : item.type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
+    const taskId = isWork ? item.id : item.sourceTaskId || undefined;
+    const name = isWork ? item.title : item.name;
+
+    setIsDownloadingDetail(true);
+    setDetailNotice("正在准备下载...");
+    try {
+      const status = await downloadResultAsset(url, name, isVideo, taskId);
+      setDetailNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        setDetailNotice("已取消下载");
+      } else {
+        setDetailNotice(error instanceof Error ? error.message : "下载失败，请稍后重试");
+      }
+    } finally {
+      setIsDownloadingDetail(false);
+    }
+  };
+
+  const handleDeleteSelectedDetail = async () => {
+    if (!detailSelection || isDeletingDetail) return;
+
+    if (detailSelection.kind === "work") {
+      onRemoveWork?.(detailSelection.item);
+      setDetailNotice("已从当前代表作列表移除");
+      setDetailSelection(null);
+      return;
+    }
+
+    setIsDeletingDetail(true);
+    setDetailNotice(null);
+    try {
+      await assetClient.delete(detailSelection.item.id, { cleanupUserData: true });
+      setSavedAssets((current) => current.filter((asset) => asset.id !== detailSelection.item.id));
+      setDetailSelection(null);
+      setAssetNotice(`已删除 ${detailSelection.item.name}`);
+    } catch (error) {
+      setDetailNotice(formatProfileLoadError(error, "资产删除失败"));
+    } finally {
+      setIsDeletingDetail(false);
+    }
+  };
+
+  const renderDetailMedia = (url: string | null | undefined, type: "image" | "video" | "asset") => {
+    const mediaUrl = typeof url === "string" ? url.trim() : "";
+    const isVideoPreview = type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(mediaUrl);
+
+    if (!mediaUrl) {
+      return (
+        <div className="profile-page__detail-placeholder">
+          {type === "video" ? <PlayCircleOutlined /> : <FileImageOutlined />}
+          <span>暂无可预览内容</span>
+        </div>
+      );
+    }
+
+    return isVideoPreview ? (
+      <video className="profile-page__detail-media" src={mediaUrl} controls playsInline />
+    ) : (
+      <img className="profile-page__detail-media" src={mediaUrl} alt="" />
+    );
+  };
+
+  const renderDetailModal = () => {
+    if (!detailSelection) return null;
+    const modalTarget = typeof document === "undefined" ? null : document.querySelector(".web-shell") || document.body;
+    if (!modalTarget) return null;
+
+    const isWork = detailSelection.kind === "work";
+    const title = isWork ? detailSelection.item.title : detailSelection.item.name;
+    const description = isWork ? detailSelection.item.prompt : detailSelection.item.description;
+    const mediaUrl = isWork ? detailSelection.item.outputUrl : detailSelection.item.imageUrl || detailSelection.item.url;
+    const mediaType = isWork
+      ? detailSelection.item.type === "video" ? "video" : "image"
+      : detailSelection.item.type === "video" ? "video" : "asset";
+
+    return createPortal(
+      <div className="profile-page__detail-overlay" role="dialog" aria-modal="true" aria-labelledby="profile-detail-title">
+        <button type="button" className="profile-page__detail-backdrop" aria-label="关闭详情" onClick={closeDetailSelection} />
+        <section className="profile-page__detail-panel">
+          <header className="profile-page__detail-head">
+            <div>
+              <span className="profile-page__detail-eyebrow">{isWork ? "代表作详情" : "资产详情"}</span>
+              <h2 id="profile-detail-title">{title}</h2>
+            </div>
+            <button type="button" className="profile-page__detail-close" aria-label="关闭详情" onClick={closeDetailSelection}>
+              <CloseOutlined />
+            </button>
+          </header>
+
+          <div className="profile-page__detail-body">
+            <div className="profile-page__detail-preview">
+              {renderDetailMedia(mediaUrl, mediaType)}
+            </div>
+            <div className="profile-page__detail-info">
+              <p>{description || "暂无描述"}</p>
+              <dl>
+                <div>
+                  <dt>{isWork ? "类型" : "资产类型"}</dt>
+                  <dd>{isWork ? formatTaskType(detailSelection.item.type) : formatAssetType(detailSelection.item.type)}</dd>
+                </div>
+                <div>
+                  <dt>状态</dt>
+                  <dd>{isWork ? formatTaskStatus(detailSelection.item.status) : formatAssetStatus(detailSelection.item.status)}</dd>
+                </div>
+                <div>
+                  <dt>{isWork ? "创建时间" : "更新时间"}</dt>
+                  <dd>{formatProfileDate(isWork ? detailSelection.item.createdAt : detailSelection.item.updatedAt)}</dd>
+                </div>
+                {!isWork ? (
+                  <div>
+                    <dt>标签</dt>
+                    <dd>{detailSelection.item.tags?.length ? detailSelection.item.tags.join(" / ") : "服务器素材"}</dd>
+                  </div>
+                ) : null}
+              </dl>
+              {detailNotice ? <span className="profile-page__detail-notice">{detailNotice}</span> : null}
+            </div>
+          </div>
+
+          <footer className="profile-page__detail-actions">
+            <button
+              type="button"
+              className="profile-page__detail-action profile-page__detail-action--primary"
+              onClick={() => void handleDownloadSelectedDetail()}
+              disabled={isDownloadingDetail}
+            >
+              <DownloadOutlined />
+              {isDownloadingDetail ? "下载中..." : "下载"}
+            </button>
+            <button type="button" className="profile-page__detail-action profile-page__detail-action--secondary" onClick={onOpenWorkbench}>
+              <EditOutlined />
+              {isWork ? "继续编辑" : "使用素材"}
+            </button>
+            <button
+              type="button"
+              className="profile-page__detail-action profile-page__detail-action--danger"
+              onClick={() => void handleDeleteSelectedDetail()}
+              disabled={isDeletingDetail}
+            >
+              <DeleteOutlined />
+              {isDeletingDetail ? "删除中..." : isWork ? "移除代表作" : "删除资产"}
+            </button>
+          </footer>
+        </section>
+      </div>,
+      modalTarget,
+    );
+  };
+
   const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
     <div className="profile-page__empty-state">
       <span className="profile-page__empty-mark" aria-hidden="true">
@@ -656,7 +901,15 @@ function ProfilePage({
         <div className="profile-page__works-scroll">
           <div className="profile-page__list-grid motion-stagger">
             {visibleWorks.map((task) => (
-              <article key={task.id} className="profile-page__list-card profile-page__media-card">
+              <article
+                key={task.id}
+                className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
+                role="button"
+                tabIndex={0}
+                aria-label={`查看代表作 ${task.title}`}
+                onClick={() => openDetailSelection({ kind: "work", item: task })}
+                onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "work", item: task }))}
+              >
                 {renderCardPreview(task.outputUrl, task.type === "video" ? "video" : "image", formatTaskType(task.type))}
                 <div className="profile-page__list-card-body">
                   <div className="profile-page__list-card-head">
@@ -681,7 +934,17 @@ function ProfilePage({
       return projects.length ? (
         <div className="profile-page__list-grid motion-stagger">
           {projects.map((project) => (
-            <article key={project.id} className="profile-page__list-card profile-page__media-card">
+            <article
+              key={project.id}
+              className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
+              role="button"
+              tabIndex={0}
+              aria-label={`打开项目 ${project.name}`}
+              onClick={() => (onOpenProject ? onOpenProject(project) : onOpenWorkbench())}
+              onKeyDown={(event) =>
+                handleInteractiveCardKeyDown(event, () => (onOpenProject ? onOpenProject(project) : onOpenWorkbench()))
+              }
+            >
               {renderCardPreview(project.thumbnailUrl, "project", "项目")}
               <div className="profile-page__list-card-body">
                 <div className="profile-page__list-card-head">
@@ -691,7 +954,10 @@ function ProfilePage({
                       type="button"
                       className="profile-page__delete-project"
                       aria-label={`删除项目 ${project.name}`}
-                      onClick={() => onDeleteProject(project)}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onDeleteProject(project);
+                      }}
                     >
                       <DeleteOutlined />
                     </button>
@@ -715,7 +981,15 @@ function ProfilePage({
       return savedAssets.length ? (
         <div className="profile-page__list-grid">
           {savedAssets.map((asset) => (
-            <article key={asset.id} className="profile-page__list-card profile-page__media-card">
+            <article
+              key={asset.id}
+              className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
+              role="button"
+              tabIndex={0}
+              aria-label={`查看资产 ${asset.name}`}
+              onClick={() => openDetailSelection({ kind: "asset", item: asset })}
+              onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "asset", item: asset }))}
+            >
               {renderCardPreview(asset.imageUrl || asset.url, asset.type === "video" ? "video" : "asset", formatAssetType(asset.type))}
               <div className="profile-page__list-card-body">
                 <div className="profile-page__list-card-head">
@@ -765,9 +1039,9 @@ function ProfilePage({
           className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
           style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
         >
-          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()}>
+          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
             <CameraOutlined />
-            更换背景
+            <span className="profile-page__banner-btn-label">更换背景</span>
           </button>
           <div className="profile-page__banner-overlay" />
         </header>
@@ -847,14 +1121,16 @@ function ProfilePage({
                   className={accountPanel === "credits" ? "is-active" : ""}
                   onClick={() => setAccountPanel("credits")}
                 >
-                  积分 {(totalBalance / 100).toFixed(2)}
+                  <span>可用积分</span>
+                  <strong>{(totalBalance / 100).toFixed(2)}</strong>
                 </button>
                 <button
                   type="button"
                   className={accountPanel === "tasks" ? "is-active" : ""}
                   onClick={() => setAccountPanel("tasks")}
                 >
-                  任务 {tasks.length}
+                  <span>生成任务</span>
+                  <strong>{tasks.length}</strong>
                 </button>
               </div>
               <div className="profile-page__account-summary">
@@ -863,6 +1139,7 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>当前账号</small>
                       <strong>{displayName}</strong>
+                      <em>{packageLabel}</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>积分剩余</small>
@@ -874,6 +1151,7 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>任务概览</small>
                       <strong>{tasks.length} 个任务</strong>
+                      <em>{completedTasks.length} 个已完成</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>已完成</small>
@@ -884,55 +1162,54 @@ function ProfilePage({
               </div>
             </div>
 
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
-              <ShareAltOutlined />
-              {packageLabel}
-            </button>
+            <div className="profile-page__actions">
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
+                <ShareAltOutlined />
+                {packageLabel}
+              </button>
 
-            <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 profile-page__share-btn--secondary" onClick={onOpenCommunity}>
-              <ShareAltOutlined />
-              打开社区
-            </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
-              <LockOutlined />
-              退出登录
-            </button>
+              <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 profile-page__share-btn--secondary" onClick={onOpenCommunity}>
+                <ShareAltOutlined />
+                打开社区
+              </button>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
+                <LockOutlined />
+                退出登录
+              </button>
+            </div>
           </aside>
 
           <main className="profile-page__main">
             <div className="profile-page__main-tabs">
               <button type="button" className={activePanel === "works" ? "is-active" : ""} onClick={() => setActivePanel("works")}>
-                我的作品
+                <span>我的作品</span>
               </button>
               <button type="button" className={activePanel === "projects" ? "is-active" : ""} onClick={() => setActivePanel("projects")}>
-                我的项目
+                <span>我的项目</span>
               </button>
               <button type="button" className={activePanel === "assets" ? "is-active" : ""} onClick={() => setActivePanel("assets")}>
-                我的资产
+                <span>我的资产</span>
               </button>
               <button type="button" className={activePanel === "community" ? "is-active" : ""} onClick={() => setActivePanel("community")}>
-                社区发布
+                <span>社区发布</span>
               </button>
             </div>
 
             <div className="profile-page__section">
-              <span className="profile-page__section-label">
-                {activePanel === "works"
-                  ? "代表作"
-                  : activePanel === "projects"
-                    ? "服务器项目"
-                    : activePanel === "assets"
-                      ? "我的资产"
-                      : "社区审核"}
-              </span>
+              <div className="profile-page__section-head">
+                <span className="profile-page__section-label">{activePanelTitle}</span>
+                <span className="profile-page__section-desc">{activePanelDescription}</span>
+                <span className="profile-page__section-meta">{activePanelCount} 项</span>
+              </div>
               {renderActivePanel()}
             </div>
           </main>
         </div>
+        {renderDetailModal()}
       </section>
     );
   }

src/styles/pages/agent.css

@@ -1,13 +1 @@
 /* Agent page rules move here as they are retired from legacy-pages.css. */
-
-@media (max-width: 900px) {
-  .agent-page {
-    padding: 16px 16px 80px;
-  }
-}
-
-@media (max-width: 560px) {
-  .agent-page {
-    padding: 12px 10px 80px;
-  }
-}

src/styles/pages/assets.css

@@ -243,24 +243,3 @@
     max-height: calc(100vh - 190px);
   }
 }
-
-@media (max-width: 560px) {
-  .asset-preview-modal {
-    padding: 8px;
-  }
-
-  .asset-preview-modal__panel {
-    width: calc(100vw - 16px);
-    max-height: calc(100vh - 16px);
-    border-radius: 12px;
-  }
-
-  .asset-preview-modal__body {
-    padding: 8px;
-  }
-
-  .asset-preview-modal__body img,
-  .asset-preview-modal__body video {
-    max-height: calc(100vh - 160px);
-  }
-}

src/styles/pages/avatar-console.css

@@ -4211,30 +4211,3 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
-
-@media (max-width: 560px) {
-  .avatar-console-page {
-    height: auto;
-    min-height: 100%;
-    overflow: auto;
-  }
-
-  .avatar-console-main {
-    min-height: 100vh;
-    padding-bottom: 80px;
-  }
-
-  .avatar-console-scroll {
-    padding: 10px;
-  }
-
-  .avatar-console-toolbar {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .avatar-console-video-actions {
-    flex-direction: column;
-    gap: 8px;
-  }
-}

src/styles/pages/canvas.css

@@ -910,94 +910,3 @@
   height: 100%;
   cursor: crosshair;
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Canvas
-   Breakpoints: 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-@media (max-width: 900px) {
-  .studio-canvas-page {
-    flex-direction: column;
-  }
-
-  .studio-canvas-toolbar {
-    flex: 0 0 auto;
-    flex-direction: row;
-    width: 100%;
-    padding: 8px 12px;
-    gap: 6px;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-weak);
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .studio-canvas-toolbar__group {
-    flex-direction: row;
-    flex-shrink: 0;
-    gap: 4px;
-  }
-
-  .studio-canvas-toolbar button {
-    min-width: 36px;
-    height: 36px;
-    font-size: 14px;
-  }
-
-  .studio-canvas-main {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .studio-canvas-node {
-    min-width: 140px;
-    min-height: 60px;
-  }
-}
-
-@media (max-width: 560px) {
-  .studio-canvas-page {
-    flex-direction: column;
-  }
-
-  .studio-canvas-toolbar {
-    flex: 0 0 auto;
-    padding: 6px 8px;
-    gap: 4px;
-    border-bottom: 1px solid var(--border-weak);
-  }
-
-  .studio-canvas-toolbar button {
-    min-width: 30px;
-    height: 30px;
-    padding: 0 6px;
-    font-size: 12px;
-    border-radius: 8px;
-  }
-
-  .studio-canvas-main {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .studio-canvas-node {
-    min-width: 110px;
-    min-height: 48px;
-    border-radius: 10px;
-    padding: 8px;
-  }
-
-  .studio-canvas-project-bar {
-    right: 8px;
-    left: 8px;
-    bottom: 80px;
-    gap: 4px;
-    border-radius: 10px;
-    padding: 8px 10px;
-  }
-
-  .studio-canvas-project-bar__name-form {
-    font-size: 12px;
-  }
-}

src/styles/pages/community.css

@@ -117,52 +117,3 @@
   font-weight: 600;
   line-height: 1.6;
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Community
-   Breakpoints: 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-@media (max-width: 900px) {
-  .community-page {
-    padding: 12px 16px 80px;
-  }
-
-  .community-carousel__slide--video {
-    min-height: 200px;
-  }
-
-  .community-carousel__video {
-    max-height: 220px;
-  }
-
-  .community-case-card__preview {
-    min-height: 140px;
-  }
-}
-
-@media (max-width: 560px) {
-  .community-page {
-    padding: 10px 10px 80px;
-  }
-
-  .community-carousel__slide--video {
-    min-height: 160px;
-  }
-
-  .community-carousel__video {
-    max-height: 180px;
-  }
-
-  .community-case-card__preview {
-    min-height: 110px;
-  }
-
-  .community-case-empty {
-    padding: 32px 16px;
-  }
-
-  .community-case-empty__icon {
-    font-size: 18px;
-  }
-}

src/styles/pages/ecommerce.css

@@ -8382,147 +8382,6 @@
 .clone-ai-adwizard__risk.is-low { color: #52c41a; }
 .clone-ai-adwizard__risk.is-medium { color: #faad14; }
 .clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Ecommerce Tools
-   Breakpoints: 1180px / 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-/* ── 1180px: Narrower panels ── */
-@media (max-width: 1180px) {
-  .product-clone-page[data-tool="clone"] > .product-clone-shell {
-    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
-  }
-  .product-clone-page[data-tool="set"] > .product-clone-shell {
-    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
-  }
-}
-
-/* ── 900px: Tablet — stacked layout ── */
-@media (max-width: 900px) {
-  /* All tools: collapse shell to single column */
-  .product-clone-page > .product-clone-shell,
-  .product-clone-page[data-tool="clone"] > .product-clone-shell,
-  .product-clone-page[data-tool="set"] > .product-clone-shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  /* Rail becomes horizontal tab bar */
-  .product-clone-rail {
-    display: flex !important;
-    flex-direction: row;
-    gap: 4px;
-    width: 100%;
-    height: auto;
-    padding: 8px 12px;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-weak, #2a3032);
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .product-clone-rail button {
-    flex-shrink: 0;
-    white-space: nowrap;
-    flex-direction: row;
-    gap: 6px;
-    padding: 8px 14px;
-    font-size: 12px;
-  }
-
-  /* Panel: full-width, reduced height */
-  .product-clone-panel {
-    width: 100%;
-    max-height: 45vh;
-    overflow-y: auto;
-  }
-
-  .product-clone-page[data-tool="clone"] .product-clone-panel {
-    --clone-settings-panel-width: 100%;
-    max-height: 45vh;
-  }
-
-  /* Preview: independent scroll area */
-  .product-clone-preview {
-    min-height: 40vh;
-    overflow-y: auto;
-    padding: 20px 16px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-clone-preview {
-    padding: 20px 16px;
-  }
-
-  /* Collapse toggle tweak */
-  .product-clone-page[data-tool="clone"] .product-clone-panel {
-    transition: max-height 320ms ease, opacity 320ms ease;
-  }
-
-  .product-clone-page.is-settings-collapsed .product-clone-panel {
-    max-height: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-/* ── 560px: Phone — further compression ── */
-@media (max-width: 560px) {
-  .product-clone-page {
-    grid-template-rows: 44px minmax(0, 1fr);
-  }
-
-  .product-clone-rail {
-    padding: 6px 8px;
-    gap: 2px;
-  }
-
-  .product-clone-rail button {
-    padding: 6px 10px;
-    font-size: 11px;
-    gap: 4px;
-  }
-
-  .product-clone-panel {
-    max-height: 38vh;
-  }
-
-  .product-clone-page[data-tool="clone"] .product-clone-panel {
-    max-height: 38vh;
-  }
-
-  .product-clone-page[data-tool="set"] .product-clone-panel__scroll {
-    padding: 20px 14px 24px;
-  }
-
-  .product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
-    padding: 18px;
-    border-radius: 14px;
-    margin-bottom: 18px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-set-upload {
-    min-height: 180px;
-    padding: 16px;
-    gap: 8px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-set-upload-title {
-    font-size: 15px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-set-upload strong {
-    height: 42px;
-    min-width: 140px;
-    font-size: 16px;
-  }
-
-  /* Preview full-width */
-  .product-clone-preview {
-    padding: 12px 10px !important;
-    min-height: 50vh;
-  }
-}
 .clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
 
 /* ===== Ecommerce Template Apple Carousel ===== */

src/styles/pages/image-workbench.css

@@ -1776,28 +1776,3 @@ textarea.image-workbench-prompt {
 .image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
 .image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
 .image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
-
-@media (max-width: 900px) {
-  .image-workbench-page {
-    padding: 12px;
-  }
-  .image-workbench-toolbar {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-}
-
-@media (max-width: 560px) {
-  .image-workbench-page {
-    padding: 8px 8px 80px;
-  }
-  .image-workbench-toolbar {
-    gap: 4px;
-  }
-  .image-workbench-toolbar button {
-    min-width: 36px;
-    height: 36px;
-    padding: 0 10px;
-    font-size: 12px;
-  }
-}

src/styles/pages/more-tools.css

@@ -1286,23 +1286,3 @@ textarea.image-workbench-prompt,
     justify-items: start;
   }
 }
-
-@media (max-width: 560px) {
-  .token-usage-page {
-    padding: 0 8px 80px;
-  }
-
-  .token-usage-page .script-token-page__scroll,
-  .script-token-page__scroll {
-    padding-inline: 8px;
-  }
-
-  .token-member-card {
-    padding: 14px;
-    gap: 8px;
-  }
-
-  .token-member-card__head {
-    gap: 8px;
-  }
-}

src/styles/pages/profile.css

@@ -2,32 +2,451 @@
 
 /* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
 .profile-page__works-scroll {
-  max-height: 390px;
+  max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
 }
 
 .profile-page__works-scroll::-webkit-scrollbar {
-  display: none;
+  display: none; /* Chrome/Safari/Edge */
 }
 
 .profile-page__works-scroll .profile-page__list-grid {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
 }
 
-@media (max-width: 900px) {
-  .profile-page,
-  .auth-page,
-  .settings-page {
-    padding: 16px 16px 80px;
+/* Dashboard uses natural page scrolling instead of a nested works scroller. */
+.profile-page--dashboard .profile-page__works-scroll {
+  max-height: none;
+  overflow: visible;
+  scrollbar-width: auto;
+}
+
+.profile-page__interactive-card {
+  cursor: pointer;
+  user-select: none;
+}
+
+.profile-page__interactive-card:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
+  outline-offset: 3px;
+}
+
+.profile-page__detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: grid;
+  place-items: center;
+  padding: clamp(18px, 3vw, 32px);
+  isolation: isolate;
+  overscroll-behavior: contain;
+}
+
+.profile-page__detail-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.62);
+  cursor: pointer;
+}
+
+.profile-page__detail-panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 16px;
+  width: min(1080px, calc(100vw - 48px));
+  max-height: min(820px, calc(100dvh - 48px));
+  overflow: hidden;
+  padding: clamp(16px, 2vw, 22px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
+    color-mix(in srgb, var(--bg-panel) 94%, #000);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
+}
+
+.profile-page__detail-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  min-width: 0;
+  padding-bottom: 2px;
+}
+
+.profile-page__detail-head h2 {
+  max-width: 760px;
+  margin: 5px 0 0;
+  color: var(--text);
+  font-size: clamp(18px, 2vw, 25px);
+  line-height: 1.25;
+}
+
+.profile-page__detail-eyebrow {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.profile-page__detail-close {
+  display: inline-grid;
+  flex: 0 0 38px;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.profile-page__detail-close:hover,
+.profile-page__detail-close:focus-visible {
+  border-color: rgba(255, 255, 255, 0.22);
+  background: rgba(255, 255, 255, 0.075);
+  color: var(--text);
+  outline: none;
+}
+
+.profile-page__detail-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.78fr);
+  gap: 18px;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.profile-page__detail-preview {
+  display: grid;
+  place-items: center;
+  align-self: stretch;
+  min-height: min(500px, 54dvh);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 58%),
+    rgba(255, 255, 255, 0.024);
+}
+
+.profile-page__detail-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: min(640px, 56dvh);
+  object-fit: contain;
+}
+
+video.profile-page__detail-media {
+  height: 100%;
+  min-height: 320px;
+  background: #050607;
+}
+
+.profile-page__detail-placeholder {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.profile-page__detail-placeholder .anticon {
+  display: grid;
+  place-items: center;
+  width: 50px;
+  height: 50px;
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+  border-radius: 16px;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+  font-size: 20px;
+}
+
+.profile-page__detail-info {
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
+.profile-page__detail-info p {
+  margin: 0;
+  max-height: min(230px, 28dvh);
+  overflow: auto;
+  padding: 13px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1.7;
+  word-break: break-word;
+  scrollbar-gutter: stable;
+}
+
+.profile-page__detail-info dl {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.profile-page__detail-info dl div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.profile-page__detail-info dt {
+  color: var(--text-soft);
+  font-size: 11px;
+  font-weight: 760;
+}
+
+.profile-page__detail-info dd {
+  margin: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-page__detail-notice {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  padding: 7px 10px;
+  border: 1px solid rgba(243, 170, 38, 0.28);
+  border-radius: 999px;
+  background: rgba(243, 170, 38, 0.08);
+  color: var(--warning);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.profile-page__detail-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  justify-content: stretch;
+  gap: 10px;
+  min-width: 0;
+  padding-top: 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.profile-page__detail-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 40px;
+  padding: 0 16px;
+  border: 1px solid rgba(var(--accent-rgb), 0.36);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.11);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.profile-page__detail-action--primary {
+  justify-self: start;
+  min-width: 132px;
+}
+
+.profile-page__detail-action--secondary,
+.profile-page__detail-action--danger {
+  min-width: 118px;
+}
+
+.profile-page__detail-action:hover,
+.profile-page__detail-action:focus-visible {
+  border-color: rgba(var(--accent-rgb), 0.54);
+  background: rgba(var(--accent-rgb), 0.16);
+  outline: none;
+}
+
+.profile-page__detail-action--danger {
+  border-color: rgba(255, 90, 95, 0.24);
+  background: rgba(255, 90, 95, 0.08);
+  color: #ffadb0;
+}
+
+.profile-page__detail-action--danger:hover,
+.profile-page__detail-action--danger:focus-visible {
+  border-color: rgba(255, 90, 95, 0.42);
+  background: rgba(255, 90, 95, 0.13);
+}
+
+.profile-page__detail-action:disabled {
+  cursor: wait;
+  opacity: 0.62;
+}
+
+@media (max-width: 760px) {
+  .profile-page__detail-overlay {
+    align-items: end;
+    padding: 10px 10px 0;
+  }
+
+  .profile-page__detail-panel {
+    width: 100%;
+    max-height: calc(100dvh - 10px);
+    padding: 16px;
+    border-radius: 18px 18px 0 0;
+  }
+
+  .profile-page__detail-body {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    overflow: auto;
+    padding-right: 0;
+  }
+
+  .profile-page__detail-preview {
+    align-items: start;
+    min-height: 260px;
+    max-height: 42dvh;
+    overflow: auto;
+  }
+
+  .profile-page__detail-media {
+    width: 100%;
+    height: auto;
+    max-height: none;
+  }
+
+  video.profile-page__detail-media {
+    align-self: center;
+    height: auto;
+    min-height: 220px;
+    max-height: 42dvh;
+  }
+
+  .profile-page__detail-info {
+    overflow: auto;
+    padding-right: 0;
+  }
+
+  .profile-page__detail-info p {
+    min-height: 96px;
+    max-height: 30dvh;
+  }
+
+  .profile-page__detail-info dl {
+    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
+    gap: 8px;
+  }
+
+  .profile-page__detail-info dl div {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    min-height: 40px;
+    padding: 8px 10px;
+  }
+
+  .profile-page__detail-info dt {
+    display: none;
+  }
+
+  .profile-page__detail-info dd {
+    min-width: 0;
+    color: var(--text);
+    font-weight: 800;
+    text-align: left;
+  }
+
+  .profile-page__detail-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .profile-page__detail-action--primary {
+    grid-column: 1 / -1;
+    justify-self: stretch;
+  }
+
+  .profile-page__detail-action--secondary,
+  .profile-page__detail-action--danger {
+    min-width: 0;
   }
 }
 
-@media (max-width: 560px) {
-  .profile-page,
-  .auth-page,
-  .settings-page {
-    padding: 12px 10px 80px;
+@media (max-width: 420px) {
+  .profile-page__detail-overlay {
+    padding: 0;
+  }
+
+  .profile-page__detail-panel {
+    max-height: 94dvh;
+    padding: 14px;
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: 18px 18px 0 0;
+  }
+
+  .profile-page__detail-head {
+    gap: 12px;
+  }
+
+  .profile-page__detail-head h2 {
+    font-size: 18px;
+  }
+
+  .profile-page__detail-close {
+    flex-basis: 36px;
+    width: 36px;
+    height: 36px;
+  }
+
+  .profile-page__detail-info dl {
+    gap: 8px;
+  }
+
+  .profile-page__detail-info p {
+    min-height: 108px;
+  }
+
+  .profile-page__detail-preview {
+    min-height: 240px;
+    max-height: 40dvh;
+  }
+
+  .profile-page__detail-info dl {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .profile-page__detail-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .profile-page__detail-action--primary {
+    grid-column: auto;
+  }
+
+  .profile-page__detail-action {
+    min-height: 42px;
   }
 }

src/styles/pages/provider-health.css

@@ -163,41 +163,4 @@
 
 .provider-health-table tr:hover td {
   background: var(--surface-elevated);
-}
-
-@media (max-width: 900px) {
-  .provider-health-page__inner {
-    padding: 16px;
-    gap: 16px;
-  }
-
-  .provider-health-grid {
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  }
-}
-
-@media (max-width: 560px) {
-  .provider-health-page__inner {
-    padding: 12px 12px 80px;
-    gap: 12px;
-  }
-
-  .provider-health-grid {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
-
-  .provider-health-toolbar {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .provider-health-table {
-    font-size: 11px;
-  }
-
-  .provider-health-table th,
-  .provider-health-table td {
-    padding: 6px 8px;
-  }
 }

src/styles/pages/size-template.css

@@ -474,24 +474,3 @@
     width: min(100%, 430px);
   }
 }
-
-@media (max-width: 560px) {
-  .size-template-page {
-    padding: 12px 10px 80px;
-  }
-
-  .size-template-main-frame {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .size-template-spec-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  .size-template-preview-note,
-  .size-template-detail-card {
-    width: 100%;
-  }
-}

src/styles/pages/studio-layout.css

@@ -674,19 +674,3 @@
     max-height: 320px;
   }
 }
-
-@media (max-width: 560px) {
-  .studio-tool-layout {
-    grid-template-rows: 40px auto minmax(200px, 1fr) 32px;
-  }
-
-  .studio-tool-layout__toolstrip {
-    padding: 6px 8px;
-    gap: 4px;
-  }
-
-  .studio-panel {
-    max-height: 240px;
-    padding: 12px;
-  }
-}

src/styles/pages/subtitle-removal.css

@@ -133,15 +133,3 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
-
-@media (max-width: 900px) {
-  .subtitle-removal-page {
-    padding: 12px;
-  }
-}
-
-@media (max-width: 560px) {
-  .subtitle-removal-page {
-    padding: 8px 8px 80px;
-  }
-}

src/styles/pages/workbench.css

@@ -440,137 +440,3 @@
     grid-template-columns: 1fr;
   }
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Workbench Launch & Active State
-   Breakpoints: 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-/* ── 900px: Tablet — launch state ── */
-@media (max-width: 900px) {
-  .wb-home {
-    padding: 36px 16px 80px;
-    gap: 18px;
-  }
-
-  .wb-home__title {
-    font-size: clamp(24px, 6vw, 36px);
-  }
-
-  .wb-home__composer {
-    max-width: 100%;
-  }
-
-  .wb-home__suggestions {
-    max-width: 100%;
-  }
-
-  .wb-showcase {
-    max-width: 100%;
-  }
-
-  .wb-showcase__grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
-  }
-
-  /* Active state: message thread */
-  .ai-workbench-content-scroll {
-    width: 100%;
-    padding: 16px 12px;
-  }
-
-  .ai-chat-message-stack {
-    max-width: 86%;
-  }
-
-  .ai-chat-message-bubble {
-    padding: 10px 12px;
-    font-size: 13px;
-  }
-
-  /* Composer in active state */
-  .wb-composer {
-    width: 100%;
-    padding: 8px 0 12px;
-  }
-}
-
-/* ── 560px: Phone — full-width compact ── */
-@media (max-width: 560px) {
-  .wb-home {
-    padding: 24px 10px 72px;
-    gap: 14px;
-  }
-
-  .wb-home__title {
-    font-size: clamp(20px, 7vw, 28px);
-  }
-
-  .wb-home__glow {
-    width: 240px;
-    height: 120px;
-    top: -40px;
-  }
-
-  .wb-showcase__grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  .wb-suggestion-chip {
-    font-size: 12px;
-    padding: 7px 12px;
-  }
-
-  /* Active state: messages fill screen */
-  .ai-workbench-content-scroll {
-    padding: 12px 8px;
-  }
-
-  .ai-workbench-thread-shell {
-    max-width: 100%;
-  }
-
-  .ai-chat-message-list {
-    gap: 8px;
-  }
-
-  .ai-chat-message-stack {
-    max-width: 90%;
-  }
-
-  .ai-chat-message-bubble {
-    padding: 8px 10px;
-    font-size: 13px;
-    border-radius: 12px;
-  }
-
-  .ai-chat-message-bubble--user {
-    border-radius: 12px 12px 4px 12px;
-  }
-
-  .ai-chat-message-bubble--ai {
-    border-radius: 12px 12px 12px 4px;
-  }
-
-  .ai-chat-avatar {
-    width: 26px;
-    height: 26px;
-    flex: 0 0 26px;
-    font-size: 10px;
-  }
-
-  .ai-chat-message-row {
-    gap: 6px;
-  }
-
-  /* Composer at bottom */
-  .wb-composer {
-    padding: 6px 0 10px;
-  }
-
-  .wb-chat-scroll-actions {
-    display: none;
-  }
-}

src/styles/shell/app-shell.css

@@ -896,21 +896,6 @@
   cursor: pointer;
 }
 
-@media (max-width: 1180px) {
-  .brand-lockup__tone {
-    display: none;
-  }
-  .creator-button {
-    display: none;
-  }
-  .member-button {
-    max-width: 148px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
 @media (max-width: 900px) {
   .web-shell {
     overflow: hidden;
@@ -977,7 +962,6 @@
   }
 }
 
-/* ── 640px: Narrower topbar adjustments ── */
 @media (max-width: 640px) {
   .brand-lockup__name {
     font-size: 14px;
@@ -997,33 +981,3 @@
     justify-content: space-between;
   }
 }
-
-/* ── 560px: Phone-sized compact layout ── */
-@media (max-width: 560px) {
-  .web-topbar {
-    flex: 0 0 44px;
-    padding: 6px 10px;
-    gap: 6px;
-  }
-
-  .brand-lockup {
-    gap: 6px;
-  }
-
-  .brand-lockup__mark {
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
-  }
-
-  .brand-lockup__name {
-    font-size: 13px;
-    max-width: 80px;
-  }
-
-  .profile-button,
-  .icon-button {
-    min-width: 36px;
-    height: 36px;
-  }
-}

src/styles/tokens.css

@@ -84,14 +84,3 @@
   --danger: var(--error);
   --shadow-soft: var(--shadow-panel);
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive Breakpoints (standardized)
-   Reference-only — CSS custom properties cannot be used
-   inside @media queries, but all pages should align to
-   these three breakpoints for consistency.
-
-   Phone  : 560px  (max-width — portrait / landscape)
-   Tablet : 900px  (max-width — tablet / small desktop)
-   Desktop: 1180px (max-width — large desktop)
-   ═══════════════════════════════════════════════════════ */