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

Reviewed-on: #22
feat: 工具盒视觉重设计 + 个人中心详情弹窗
2026-06-08 03:05:47 +00:00 · 2026-06-07 11:42:00 +08:00 · 2026-06-05 10:29:24 +00:00 · 2026-06-05 18:28:10 +08:00 · 2026-06-05 08:13:56 +00:00 · 2026-06-05 16:08:47 +08:00
7 changed files with 3732 additions and 145 deletions
@@ -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":
@@ -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",
@@ -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>
  );
@@ -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>
    );
  }
@@ -15,3 +15,438 @@
 .profile-page__works-scroll .profile-page__list-grid {
  grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
 }
+
+/* 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: 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;
+  }
+}
Author	SHA1	Message	Date
stringadmin	c1266169d7	Merge pull request 'feat: 工具盒视觉重设计 + 个人中心详情弹窗' (#22 ) from feat/tool-hub-redesign-and-profile-detail into master Reviewed-on: #22	2026-06-08 03:05:47 +00:00
ludan	4530058648	feat: 工具盒视觉重设计 + 个人中心详情弹窗本次提交对全部工具入口页（MorePage）进行了全面的信息架构和视觉升级，并为个人中心新增卡片点击详情弹窗。 ## 工具盒（MorePage）重设计 - 工具卡片增加 useCase 使用场景说明和 tags 标签行，帮助用户快速理解每个工具的适用场景 - 核心工具（Featured）卡片新增 kicker 标题、steps 操作步骤、outcome 产出说明，强化工作流引导 - 新增 ToolComparePanel 组件，为每个工具展示 Before/After 对比示意舞台 - 分类筛选按钮新增计数徽章，展示每个分类下的工具数量 - 页面头部新增 eyebrow（AI Tool Hub）+ 工具概览统计信息 - 最近使用区域增加分类标签副标题 - 空分类场景新增引导式空状态面板 - 全面补充 aria-label 和无障碍键盘支持 ## 个人中心详情弹窗 - 新增 ProfileDetailSelection 类型和 openDetailSelection/closeDetailSelection 流程 - 使用 createPortal 渲染详情弹窗，支持代表作和资产两种详情视图 - 弹窗内支持媒体预览（图片/视频）、元数据展示、下载和删除操作 - 列表卡片（代表作/项目/资产）改为 interactive-card，支持键盘 Enter/Space 激活 - 删除项目按钮增加 event.stopPropagation 防止冒泡触发卡片点击 - 弹窗打开时锁定 body 滚动，Esc 键关闭 ## App.tsx 适配 - 传递 setTasks 给 ProfilePage，支持代表作移除操作 - 传递 onOpenProject 回调，支持从个人中心打开项目 ## CSS 样式升级 - more.css: 全面重设页头布局（grid 三栏）、筛选胶囊、核心卡片 Before/After 舞台、步骤条、响应式适配 - profile.css: 新增详情弹窗 overlay/panel/preview 布局、交互卡片 hover/focus 状态 - dark-green.css: 工具盒与详情弹窗的深绿主题样式约 780 行	2026-06-07 11:42:00 +08:00
stringadmin	5bdeac20fb	Merge pull request 'feat: 个人中心仪表盘视觉打磨与交互优化' (#21 ) from feat/profile-dashboard-polish into master Reviewed-on: #21	2026-06-05 10:29:24 +00:00
ludan	bbc705c8d9	feat: 个人中心仪表盘视觉打磨与交互优化本次提交对个人中心（Profile Dashboard）进行了全面的 UI/UX 升级： ## AppShell 导航修复 - 修复浮动导航栏显示逻辑：移除未登录状态下多余的 session 判断条件，确保登录页不显示导航 ## ProfilePage 功能增强 - 新增面板标题、描述和计数变量，动态展示不同面板（代表作/服务器项目/我的资产/社区审核）的上下文信息 - 背景图更换按钮增加 aria-label 无障碍支持，文字使用独立 span 便于移动端隐藏 - 积分与任务切换按钮拆分为标签+数值结构，信息层级更清晰 - 账号摘要卡片新增套餐名称和已完成任务数展示 - 操作按钮（工作台/社区/退出登录）包裹至 actions 容器，统一布局管理 - 主面板标签页文字包裹 span，支持响应式隐藏 ## profile.css 滚动模型调整 - Dashboard 视图改用页面自然滚动，替代嵌套区域滚动，避免双滚动条问题 ## dark-green.css 主题样式（约 1160 行新增） - 背景图与头像区域：毛玻璃按钮、头像环绿边光晕、hover 编辑覆盖层 - 个性签名：圆角胶囊展示态 + 编辑态双向布局，状态提示条 - 账号卡片：标签按钮网格化布局、积分摘要面板、套餐标签 - 操作按钮组：主按钮渐变绿色、次要按钮低对比、退出按钮红色警示 - 内容标签页：胶囊切换 + 计数徽章，激活态绿边高亮 - 列表卡片：hover 微上浮 + 绿色边框过渡，空状态虚线面板 - 多轮视觉迭代：从 graphite 灰调到最终 black+green 参考色调 - 响应式适配：移动端头像环缩小、背景按钮圆形、标签页紧凑排列 - 页面级滚动：让 body 自然滚动，取消 content 内部滚动容器	2026-06-05 18:28:10 +08:00
stringadmin	796162de4d	Merge pull request 'chore: re-upload current web project code' (#19 ) from reupload/current-web-20260605 into master Reviewed-on: #19	2026-06-05 08:13:56 +00:00
stringadmin	aebe0ff827	chore: re-upload current web project code	2026-06-05 16:08:47 +08:00
stringadmin	c113d82844	Merge pull request 'feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率' (#17 ) from feat/responsive-layout into master Merge PR 17 feat responsive-layout	2026-06-05 07:21:29 +00:00
stringadmin	8cf9ee3519	merge: resolve conflicts between feat/responsive-layout and master Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-05 15:14:17 +08:00
stringadmin	2129b29dfe	Merge pull request 'Feat/profile account polish' (#16 ) from feat/profile-account-polish into master Reviewed-on: #16	2026-06-05 06:58:37 +00:00
stringadmin	d36d46836f	merge: resolve EcommercePage.tsx conflict, integrate master into profile-account-polish Keep master's EcommercePage.tsx (has more complete upload logic from prior conflict resolution). Accept all other master changes including canvas tool panels, task lifecycle, and workbench updates. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-05 14:05:39 +08:00
stringadmin	91c332f567	Merge pull request 'Feat/canvas tool panels' (#15 ) from feat/canvas-tool-panels into master Reviewed-on: #15	2026-06-05 05:30:22 +00:00
ludan	b17a978e9e	Merge origin/master: 保留电商上传优化版，接入master新增面板组件冲突解决：EcommercePage.tsx 保留本地版本（上传预览大图+缩略图切换交互） master新增：6个独立面板组件、图片校验工具、视频工作区增强、CSS更新	2026-06-05 10:34:19 +08:00
ludan	6d68ab02bb	feat: 个人中心账户摘要区重构、主题色调对齐电商【账户摘要区重构】 - 新增 profile-page__account-summary 双列网格布局（主信息 + 右侧指标） - 主信息区（account-summary-main）：显示账号名/任务概览 - 指标区（account-summary-metric）：品牌绿色数字展示积分/完成数，左侧分隔线 - 任务概览改为"X 个任务"更自然的表达方式 - 替代旧 upload-card--meta/meta-item 类名体系【主题色调对齐】 - 个人中心页面背景、侧边栏、卡片统一为电商同款平坦暗色 - 移除 box-shadow 深度阴影，使用 var(--bg-panel)/var(--bg-inset) Token - Tab 切换按钮透明背景，选中态品牌绿边框+浅绿背景 - 统计卡片/简介/Bio/媒体预览卡片统一边框与背景色 - 媒体徽章、分享按钮、头像环去除阴影	2026-06-04 18:06:43 +08:00
ludan	2b65206b84	feat: 电商克隆上传交互升级、视频模型选择器图标【电商克隆 - 商品图上传交互重构】 - 新增上传预览大图区（clone-ai-upload-preview-wrap），点击缩略图可切换预览 - 选中缩略图增加 is-active 绿色边框高亮 - 预览区显示商品图编号 + 尺寸/比例/格式信息（formatProductImageSpec） - 上传区到达 7 张上限时显示"已达上限"、阻止拖拽上传、输入框禁用 - 上传图片自动异步读取尺寸（width/height），无需等待上传完成即可展示 - 已上传素材区重构为列表头（标题+计数）+ 缩略图栈式布局 - 缩略图增加序号角标（1-7），删除按钮独立于缩略图下方 - selectedProductImageId 状态自动管理：删除/新增时自动切换到有效图片【工作台 - 视频模型选择器图标】 - 新增 VIDEO_MODEL_ICON_URLS 映射（HappyHorse/Pixverse/Vidu/Wan/Kling） - SelectChip 组件在 chipId=video-model 时显示模型品牌图标 - getVideoModelIconUrl 支持中英文模糊匹配【样式】 - ecommerce.css: 预览区/素材栈/缩略图选中态/上限态完整样式 - dark-green.css: 主题层微调	2026-06-04 17:27:40 +08:00
ludan	ecade14bd0	feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率 - 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面) - Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化 - 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换 - 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行 - 画布页面：工具栏横向滚动、节点缩小、手机全屏操作 - 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点 - 新增32条@media规则，媒体查询从107条增至139条	2026-06-02 17:45:57 +08:00