Merge branch 'master' into feat/toolbox-preview-cards-and-responsive-polish

feat: 工具盒卡片预览图替换与响应式视觉优化
本次提交包含以下改进： ## 1. 工具卡片真实预览图替换 (MorePage.tsx) - 移除原有的CSS绘制Before/After对比图(ToolComparePanel/CompareScene) - 新增ToolPreviewPanel组件，使用OSS真实截图展示每个工具的效果预览 - 建立toolPreviewImages映射表，为8个工具分别配置预览图URL - 预览图支持hover悬浮放大效果(popover)，桌面端鼠标悬停时展示大图 - 触摸设备通过@media (hover: none)隐藏popover，避免移动端误触 ## 2. 核心工具区重构 (MorePage.tsx) - 移除FeaturedTool独立接口和featuredTools数组，统一到tools体系 - 新增coreToolIds集合标记核心工具(workbench/inpaint/watermarkRemoval) - 新增coreToolGradients和coreToolSteps独立配置每张核心卡的渐变和步骤 - 移除openFeaturedTool，统一使用openTool处理所有工具点击 - 核心卡片kick er改为显示分类标签(图像创作/视频创作) - 视频生成分类标签更名为"视频创作" ## 3. 工具卡片视觉升级 (more.css) - 新增CSS变量体系：--more-card-surface/surface-strong/border/border-strong - 核心工具卡：三列网格布局、渐变背景叠加、预览图16:9占位区 - 普通工具卡：增大最小高度至392px、radial-gradient光晕、增强边框 - 卡片预览图：aspect-ratio容器、内边框光效、::after渐变叠加层 - Hover悬浮popover：从卡片底部弹出大图，160ms过渡动画 - CTA按钮强化：渐变背景、内阴影高光、font-weight 850 - :active状态按压反馈(translateY(0)消除位移) - 阴影系统升级：更深、更柔和的阴影层次 ## 4. Prompt案例弹窗响应式重构 (workbench.css) - 720px断点：从垂直堆叠改为水平左右分栏布局(1.08:0.92) - 侧边栏从底部面板移至右侧，带左分割线和投影 - 420px断点：紧凑水平分栏(0.9:1.1)、更小字号和间距 - 弹窗增加边框和圆角、关闭按钮毛玻璃效果 - 作者信息采用grid布局、描述文本line-clamp截断 ## 5. 响应式细节完善 - more.css 860px: 双列核心卡、增大预览图、调整间距 - more.css 520px: 单列布局、筛选标签横向滚动、CTA按钮全宽 - workbench.css: 各断点prompt-case-modal精确调优
2026-06-08 10:59:20 +00:00 · 2026-06-08 18:57:07 +08:00 · 2026-06-08 10:31:08 +00:00 · 2026-06-08 18:30:05 +08:00 · 2026-06-08 18:26:44 +08:00 · 2026-06-08 17:39:11 +08:00
12 changed files with 2562 additions and 256 deletions
@@ -374,6 +374,7 @@ function App() {
  })));

  const [ecommerceEverMounted, setEcommerceEverMounted] = useState(false);
+  const [workbenchResetToken, setWorkbenchResetToken] = useState(0);
  const isEcommerceActive = activeView === "ecommerce" || activeView === "ecommerceHub";
  useEffect(() => {
    if (isEcommerceActive && !ecommerceEverMounted) setEcommerceEverMounted(true);
@@ -459,6 +460,9 @@ function App() {
  );

  const handleSetView = useCallback((view: WebViewKey) => {
+    if (view === "workbench" && Boolean(session)) {
+      setWorkbenchResetToken((token) => token + 1);
+    }
    window.location.hash = `/${view}`;
    setView(view);
    if (view !== "login") {
@@ -467,7 +471,7 @@ function App() {
    if (isWorkspaceView(view)) {
      setWorkspaceExpanded(true);
    }
-  }, [setView, setWorkspaceExpanded]);
+  }, [session, setView, setWorkspaceExpanded]);

  const clearAuthenticatedState = useCallback((options?: { resetView?: boolean }) => {
    clearAllUserStorage();
@@ -1313,11 +1317,13 @@ function App() {
      case "workbench":
        return (
          <WorkbenchPage
+            key={`workbench-${workbenchResetToken}`}
            isAuthenticated={Boolean(session)}
            session={session}
            onRequireLogin={handleRequireTaskLogin}
            onOpenResultInCanvas={handleOpenResultInCanvas}
            onRefreshUsage={refreshUsage}
+            resetToken={workbenchResetToken}
          />
        );
      case "home":
@@ -2,6 +2,7 @@ import { serverRequest } from "./serverConnection";

 export interface BetaApplicationInput {
  name: string;
+  email: string;
  phone: string;
  wechat: string;
  industry: string;
@@ -16,6 +17,7 @@ export interface BetaApplicationInput {
  wantFeature: string[];
  selfStatement: string;
  signature: string;
+  applicationDate: string;
  agreeRules: boolean;
 }

@@ -72,6 +74,7 @@ function normalizeApplication(raw: unknown): BetaApplicationItem {
    userId: readNumberOrNull(item.userId),
    username: readNullableString(item.username),
    name: readString(item.name),
+    email: readString(item.email),
    phone: readString(item.phone),
    wechat: readString(item.wechat),
    industry: readString(item.industry),
@@ -86,6 +89,7 @@ function normalizeApplication(raw: unknown): BetaApplicationItem {
    wantFeature: readStringArray(item.wantFeature),
    selfStatement: readString(item.selfStatement),
    signature: readString(item.signature),
+    applicationDate: readString(item.applicationDate),
    agreeRules: item.agreeRules === true,
    status: normalizeStatus(item.status),
    inviteCode: readNullableString(item.inviteCode),
@@ -38,9 +38,14 @@ function normalizeModelOption(raw: unknown): ModelCapabilityOption | null {
  const enabled = raw.enabled === undefined ? status !== "maintenance" && status !== "disabled" : Boolean(raw.enabled);
  if (!enabled) return null;

+  const label = toStringValue(raw.label ?? raw.displayName ?? raw.display_name ?? raw.name, value);
+
  return {
    value,
-    label: toStringValue(raw.label ?? raw.displayName ?? raw.display_name ?? raw.name, value),
+    label:
+      value === "wan2.7-image-pro"
+        ? label.replace(/\s*4k\b/i, "").trim() || "wan 2.7 Pro"
+        : label,
    description: toStringValue(raw.description) || undefined,
    badge: toStringValue(raw.badge) || undefined,
    enabled,
@@ -10,6 +10,7 @@ interface BetaApplicationModalProps {
 /* ── Form state ── */
 interface BetaFormData {
  name: string;
+  email: string;
  phone: string;
  wechat: string;
  industry: string;
@@ -24,11 +25,13 @@ interface BetaFormData {
  wantFeature: string[];
  selfStatement: string;
  signature: string;
+  applicationDate: string;
  agreeRules: boolean;
 }

 const INITIAL_FORM: BetaFormData = {
  name: "",
+  email: "",
  phone: "",
  wechat: "",
  industry: "",
@@ -43,6 +46,7 @@ const INITIAL_FORM: BetaFormData = {
  wantFeature: [],
  selfStatement: "",
  signature: "",
+  applicationDate: "",
  agreeRules: false,
 };

@@ -156,10 +160,12 @@ const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {

  const validate = () => {
    if (!form.name.trim()) return "请填写姓名 / 常用昵称";
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) return "请填写用于接收内测码的有效邮箱";
    if (!form.phone.trim()) return "请填写联系手机号码";
    if (!form.wechat.trim()) return "请填写微信账号";
    if (!form.selfStatement.trim()) return "请填写申请自述";
    if (!form.signature.trim()) return "请填写申请人确认签字";
+    if (!form.applicationDate.trim()) return "请填写申请日期";
    if (!form.agreeRules) return "请先阅读并同意内测规则";
    return null;
  };
@@ -178,6 +184,7 @@ const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
      await betaApplicationClient.submit({
        ...form,
        name: form.name.trim(),
+        email: form.email.trim(),
        phone: form.phone.trim(),
        wechat: form.wechat.trim(),
        industry: form.industry.trim(),
@@ -190,9 +197,10 @@ const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
        feedbackWilling: form.feedbackWilling.trim(),
        selfStatement: form.selfStatement.trim(),
        signature: form.signature.trim(),
+        applicationDate: form.applicationDate.trim(),
      });
      setForm(INITIAL_FORM);
-      setMessage({ tone: "success", text: "申请已提交，请留意站内通知。" });
+      setMessage({ tone: "success", text: "申请已提交，请留意预留邮箱中的审核结果。" });
    } catch (error) {
      setMessage({ tone: "error", text: error instanceof Error ? error.message : "提交内测申请失败" });
    } finally {
@@ -229,6 +237,7 @@ const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
            <h3 className="beta-doc-section__title">一、个人基础信息</h3>
            <div className="beta-doc-grid">
              <TextField label="姓名 / 常用昵称" value={form.name} onChange={(v) => update("name", v)} />
+              <TextField label="接收内测码邮箱" value={form.email} onChange={(v) => update("email", v)} placeholder="审核通过后内测码将发送到此邮箱" />
              <TextField label="联系手机号码" value={form.phone} onChange={(v) => update("phone", v)} />
              <TextField label="微信账号" value={form.wechat} onChange={(v) => update("wechat", v)} />
              <TextField label="所在行业 / 职业" value={form.industry} onChange={(v) => update("industry", v)} />
@@ -297,7 +306,7 @@ const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
              <li>内测赠送 <strong>500 元等值 50,000 积分</strong>，仅限内测期间使用，不可提现、不可转让、不可兑换现金；</li>
              <li>内测版本含未上线测试功能，存在功能不稳定、界面调整、参数优化等情况，申请人自愿理解包容；</li>
              <li>严禁私自泄露内测专属工作流、内部功能、测试接口、未发布技术方案等内部资料；</li>
-              <li>审核通过后，官方将在 <strong>48 小时</strong> 内发放内测账号、登录权限及免费积分；</li>
+              <li>审核通过后，官方将在 <strong>48 小时</strong> 内通过预留邮箱发放内测码、登录权限及免费积分；</li>
              <li>正式版上线后，优质内测体验官可享受专属永久优惠权限与平台荣誉称号。</li>
            </ol>

@@ -312,10 +321,7 @@ const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {

            <div className="beta-doc-grid beta-doc-grid--two">
              <TextField label="申请人确认签字" value={form.signature} onChange={(v) => update("signature", v)} placeholder="请签署姓名" />
-              <div className="beta-text-field">
-                <span className="beta-text-field__label">申请填写日期</span>
-                <input type="text" className="beta-text-field__input" value="2026年    月    日" readOnly />
-              </div>
+              <TextField label="申请填写日期" value={form.applicationDate} onChange={(v) => update("applicationDate", v)} placeholder="例如：2026年6月8日" />
            </div>
          </section>

@@ -214,6 +214,7 @@ export default function BetaApplicationsPage({ session, onOpenLogin }: BetaAppli
                <h3>一、个人基础信息</h3>
                <div className="beta-admin-field-grid">
                  <DetailField label="姓名 / 常用昵称" value={valueOrEmpty(selectedApplication.name)} />
+                  <DetailField label="接收内测码邮箱" value={valueOrEmpty(selectedApplication.email)} />
                  <DetailField label="联系手机号码" value={valueOrEmpty(selectedApplication.phone)} />
                  <DetailField label="微信账号" value={valueOrEmpty(selectedApplication.wechat)} />
                  <DetailField label="所在行业 / 职业" value={valueOrEmpty(selectedApplication.industry)} />
@@ -248,6 +249,7 @@ export default function BetaApplicationsPage({ session, onOpenLogin }: BetaAppli
                <p className="beta-admin-statement">{selectedApplication.selfStatement || "未填写"}</p>
                <div className="beta-admin-field-grid">
                  <DetailField label="申请人确认签字" value={valueOrEmpty(selectedApplication.signature)} />
+                  <DetailField label="申请填写日期" value={valueOrEmpty(selectedApplication.applicationDate)} />
                  <DetailField label="同意规则" value={selectedApplication.agreeRules ? "已同意" : "未同意"} />
                  <DetailField label="IP" value={valueOrEmpty(selectedApplication.ipAddress)} />
                  <DetailField label="客户端" value={valueOrEmpty(selectedApplication.userAgent)} wide />
@@ -37,117 +37,153 @@ interface MoreTool {
  imageTool?: WebImageWorkbenchTool;
  ready: boolean;
  badge?: string;
-  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",
+const toolPreviewImages: Record<string, string> = {
+  inpaint: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%B1%80%E9%83%A8%E9%87%8D%E7%BB%98.PNG",
+  camera: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E9%95%9C%E5%A4%B4%E5%AE%9E%E9%AA%8C%E5%AE%A4.PNG",
+  upscale: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%88%86%E8%BE%A8%E7%8E%87%E6%8F%90%E5%8D%87.PNG",
+  watermarkRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%8E%BB%E6%B0%B4%E5%8D%B0.PNG",
+  dialogGenerator: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%AF%B9%E8%AF%9D%E6%A1%86%E7%94%9F%E6%88%90%E5%99%A8.PNG",
+  subtitleRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%AD%97%E5%B9%95%E5%8E%BB%E9%99%A4.PNG",
+  characterMix: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E8%A7%92%E8%89%B2%E8%BF%81%E7%A7%BB.PNG",
+  avatarConsole: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E6%95%B0%E5%AD%97%E4%BA%BA%E6%8E%A7%E5%88%B6%E5%8F%B0.PNG",
 };

-function ToolComparePanel({ scene }: { scene: CompareScene }) {
+function ToolPreviewPanel({ toolId }: { toolId: string }) {
+  const imageUrl = toolPreviewImages[toolId];
+  if (!imageUrl) return null;
+
  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 className="more-card__preview" aria-hidden="true">
+      <span className="more-card__preview-frame">
+        <img src={imageUrl} alt="" loading="lazy" decoding="async" />
      </span>
+      <img className="more-card__preview-popover" src={imageUrl} alt="" loading="lazy" decoding="async" />
    </span>
  );
 }

-const tools: MoreTool[] = [
-  { 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;
-  category: ToolCategory;
-  gradient: string;
+function getPreviewClassName(toolId: string) {
+  return toolPreviewImages[toolId] ? " more-card--has-preview" : " more-card--no-preview";
 }

-const featuredTools: FeaturedTool[] = [
+const tools: MoreTool[] = [
  {
    id: "workbench",
    title: "图片工作台",
-    desc: "从一张素材开始，完成精修、合成和二次创作。",
-    kicker: "图片精修工作流",
-    steps: ["上传素材", "局部修复", "高清导出"],
-    outcome: "适合商品图、海报图和创意视觉",
+    text: "融合、修复、局部增强",
+    useCase: "适合商品图精修、创意合成和局部画面重做",
+    tags: ["热门", "一站式", "商品图"],
    icon: <EditOutlined />,
-    imageTool: "workbench",
    category: "image",
-    gradient: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
+    imageTool: "workbench",
+    ready: 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: "数字人",
-    desc: "用参考人像和音频，快速生成可交付口播视频。",
-    kicker: "口播视频工作流",
-    steps: ["选择人像", "上传音频", "生成视频"],
-    outcome: "适合品牌讲解、课程和带货短视频",
+    text: "用一张人像和音频生成口播视频",
+    useCase: "适合品牌讲解、课程口播和带货短视频",
+    tags: ["热门", "口播", "视频"],
    icon: <CustomerServiceOutlined />,
-    target: "digitalHuman",
    category: "video",
-    gradient: "linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(6, 182, 212, 0.06))",
+    target: "digitalHuman",
+    ready: 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,
  },
 ];

 const categoryLabels: Record<ToolCategory, string> = {
  image: "图像创作",
-  video: "视频生成",
+  video: "视频创作",
 };

 const categoryIcons: Record<ToolCategory, ReactNode> = {
@@ -162,6 +198,20 @@ const filters: { key: FilterKey; label: string }[] = [
  { key: "upcoming", label: "即将上线" },
 ];

+const coreToolIds = new Set(["workbench", "inpaint", "watermarkRemoval"]);
+
+const coreToolGradients: Record<string, string> = {
+  workbench: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
+  inpaint: "linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.055))",
+  watermarkRemoval: "linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(var(--accent-rgb), 0.055))",
+};
+
+const coreToolSteps: Record<string, string[]> = {
+  workbench: ["上传素材", "局部修复", "高清导出"],
+  inpaint: ["选定区域", "描述修改", "生成结果"],
+  watermarkRemoval: ["上传素材", "智能识别", "干净导出"],
+};
+
 const RECENT_STORAGE_KEY = "omniai:more-recent-tools";
 const MAX_RECENT = 4;

@@ -169,7 +219,9 @@ function getRecentToolIds(): string[] {
  try {
    const raw = localStorage.getItem(RECENT_STORAGE_KEY);
    return raw ? JSON.parse(raw) : [];
-  } catch { return []; }
+  } catch {
+    return [];
+  }
 }

 function pushRecentToolId(id: string) {
@@ -199,39 +251,29 @@ 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;
+  const filteredTools = tools.filter((tool) => {
+    if (coreToolIds.has(tool.id)) return false;
    if (filter === "all") return true;
-    if (filter === "upcoming") return !t.ready;
-    return t.category === filter;
+    if (filter === "upcoming") return !tool.ready;
+    return tool.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,
+    all: tools.filter((tool) => !coreToolIds.has(tool.id)).length,
+    image: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "image").length,
+    video: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "video").length,
+    upcoming: tools.filter((tool) => !coreToolIds.has(tool.id) && !tool.ready).length,
  };

  const recentTools = recentIds
-    .map((id) => tools.find((t) => t.id === id))
-    .filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
+    .map((id) => tools.find((tool) => tool.id === id))
+    .filter((tool): tool is MoreTool => Boolean(tool) && (tool?.ready ?? false));

-  const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, t) => {
-    if (!acc[t.category]) acc[t.category] = [];
-    acc[t.category].push(t);
+  const coreTools = tools.filter((tool) => coreToolIds.has(tool.id));
+
+  const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, tool) => {
+    if (!acc[tool.category]) acc[tool.category] = [];
+    acc[tool.category].push(tool);
    return acc;
  }, {} as Record<ToolCategory, MoreTool[]>);

@@ -247,19 +289,19 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
        </div>
        <div className="more-page-v2__header-meta" aria-label="工具盒概览">
          <span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
-          <span>{featuredTools.length} 个核心入口</span>
+          <span>{coreTools.length} 个核心入口</span>
        </div>
        <nav className="more-page-v2__filters" aria-label="工具分类筛选">
-          {filters.map((f) => (
+          {filters.map((item) => (
            <button
-              key={f.key}
+              key={item.key}
              type="button"
-              className={filter === f.key ? "is-active" : ""}
-              aria-pressed={filter === f.key}
-              onClick={() => setFilter(f.key)}
+              className={filter === item.key ? "is-active" : ""}
+              aria-pressed={filter === item.key}
+              onClick={() => setFilter(item.key)}
            >
-              <span>{f.label}</span>
-              <em>{filterCounts[f.key]}</em>
+              <span>{item.label}</span>
+              <em>{filterCounts[item.key]}</em>
            </button>
          ))}
        </nav>
@@ -298,27 +340,27 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
              <ThunderboltOutlined /> 核心工具
            </h2>
            <div className="more-page-v2__featured-grid">
-              {featuredTools.map((tool) => (
+              {coreTools.map((tool) => (
                <button
                  key={tool.id}
                  type="button"
-                  className="more-card more-card--featured"
-                  style={{ "--card-gradient": tool.gradient } as CSSProperties}
-                  aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
-                  onClick={() => openFeaturedTool(tool)}
+                  className={`more-card more-card--featured${getPreviewClassName(tool.id)}`}
+                  style={{ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))" } as CSSProperties}
+                  aria-label={`打开核心工具：${tool.title}，${tool.text}`}
+                  onClick={() => openTool(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>
+                    <span className="more-card__featured-kicker">{categoryLabels[tool.category]}</span>
                    <strong>{tool.title}</strong>
-                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
-                    <span className="more-card__featured-desc">{tool.desc}</span>
+                    <ToolPreviewPanel toolId={tool.id} />
+                    <span className="more-card__featured-desc">{tool.text}</span>
                    <span className="more-card__steps" aria-hidden="true">
-                      {tool.steps.map((step) => (
+                      {(coreToolSteps[tool.id] ?? tool.tags.slice(0, 3)).map((step) => (
                        <span key={step}>{step}</span>
                      ))}
                    </span>
-                    <span className="more-card__outcome">{tool.outcome}</span>
+                    <span className="more-card__outcome">{tool.useCase}</span>
                    <span className="more-card__cta">开始使用 →</span>
                  </div>
                </button>
@@ -341,7 +383,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                  <button
                    key={tool.id}
                    type="button"
-                    className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
+                    className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}${getPreviewClassName(tool.id)}`}
                    aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
                    onClick={() => openTool(tool)}
                    disabled={!tool.ready}
@@ -353,7 +395,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                      ))}
                    </span>
                    <strong>{tool.title}</strong>
-                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
+                    <ToolPreviewPanel toolId={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>
@@ -81,7 +81,9 @@ import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
 import { calculateEnterpriseVideoCredits, ENTERPRISE_DEFAULT_VIDEO_MODEL } from "../../utils/enterpriseVideoPolicy";
 import {
  getImageQualityOptions,
+  getImageQualityOptionsForContext,
  getDefaultImageQuality,
+  getDefaultImageQualityForContext,
  getVideoQualityOptions,
  getDefaultVideoQuality,
  getVideoQualityLabel,
@@ -200,6 +202,7 @@ interface WorkbenchPageProps {
  onRequireLogin: (input: CreatePreviewTaskInput) => void;
  onOpenResultInCanvas?: (payload: import("./workbenchConstants").WorkbenchResultActionPayload) => void;
  onRefreshUsage?: () => void;
+  resetToken?: number;
 }

 // ─── Component ───────────────────────────────────────────────────────────
@@ -231,6 +234,7 @@ function WorkbenchPage({
  onRequireLogin,
  onOpenResultInCanvas,
  onRefreshUsage,
+  resetToken,
 }: WorkbenchPageProps) {
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const referenceInputRef = useRef<HTMLInputElement | null>(null);
@@ -249,10 +253,11 @@ function WorkbenchPage({
  const activeConversationIdRef = useRef<number | null>(null);
  const messagesRef = useRef<ChatMessage[]>([]);
  const conversationMessagesCacheRef = useRef<Map<number, ChatMessage[]>>(new Map());
-  const skipConversationAutoSelectRef = useRef(false);
+  const skipConversationAutoSelectRef = useRef(Boolean(resetToken));
  const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks());
  const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map());
  const lastScrollTopRef = useRef(0);
+  const scrollActionHintTimerRef = useRef<number | null>(null);
  const shouldFollowNewMessagesRef = useRef(true);
  const pendingScrollToLatestRef = useRef(true);
  const genTracker = useGenerationTasks({ sourceView: "workbench" });
@@ -261,7 +266,7 @@ function WorkbenchPage({

  const [activeMode, setActiveMode] = useState<WorkbenchMode>("video");
  const [inputValue, setInputValue] = useState("");
-  const [messages, setMessages] = useState<ChatMessage[]>(() => readStoredMessages());
+  const [messages, setMessages] = useState<ChatMessage[]>(() => (resetToken ? [] : readStoredMessages()));
  const [promptHistory, setPromptHistory] = useState<string[]>(() => readStoredPromptHistory());
  const [toolbarMenuId, setToolbarMenuId] = useState<ToolbarMenuId>(null);
  const [referenceItems, setReferenceItems] = useState<ReferenceItem[]>([]);
@@ -284,7 +289,7 @@ function WorkbenchPage({
  const [projectError, setProjectError] = useState<string | null>(null);
  const [conversations, setConversations] = useState<ConversationSummary[]>([]);
  const [activeConversationId, setActiveConversationId] = useState<number | null>(() =>
-    readStoredActiveConversationId(readStoredMessages()),
+    resetToken ? null : readStoredActiveConversationId(readStoredMessages()),
  );
  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
  const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
@@ -294,7 +299,9 @@ function WorkbenchPage({
  const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
  const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
  const [composerHidden, setComposerHidden] = useState(false);
+  const [scrollActionHint, setScrollActionHint] = useState<"top" | "bottom" | null>(null);
  const [workspaceStarted, setWorkspaceStarted] = useState(false);
+  const lastResetTokenRef = useRef(resetToken);

  useEffect(() => {
    activeConversationIdRef.current = activeConversationId;
@@ -420,7 +427,6 @@ function WorkbenchPage({
  const toolTheme = MODE_META[activeMode];
  const workbenchAccent = "#00ff88";
  const hasConversationRecords = activeConversationId !== null || messages.length > 0;
-  const hasActivatedWorkspace = workspaceStarted || isGenerating || hasConversationRecords;
  const referenceCount = referenceItems.length;
  const activeVideoModelValue = toHappyHorseDisplayModel(videoModel);
  const activeModelValue =
@@ -448,6 +454,7 @@ function WorkbenchPage({
    [conversations],
  );
  const hasSidebarRecords = conversationRecords.length > 0;
+  const hasActivatedWorkspace = workspaceStarted || isGenerating || hasConversationRecords;

  const activeConversationTitle = useMemo(() => {
    if (!activeConversationId) return "";
@@ -464,7 +471,26 @@ function WorkbenchPage({
    setSidebarCollapsed(!hasSidebarRecords);
  }, [hasSidebarRecords]);

-  const imageQualityOptions = useMemo(() => getImageQualityOptions(imageModel), [imageModel]);
+  const hasImageReferences = activeMode === "image" && referenceItems.some((item) => item.kind === "image");
+  const isImageGridMode = activeMode === "image" && imageGridMode !== "single";
+  const imageQualityContext = useMemo(
+    () => ({
+      hasReferenceImages: hasImageReferences,
+      isGridMode: isImageGridMode,
+    }),
+    [hasImageReferences, isImageGridMode],
+  );
+  const imageQualityOptions = useMemo(
+    () => getImageQualityOptionsForContext(imageModel, imageQualityContext),
+    [imageModel, imageQualityContext],
+  );
+  const imageGridModeOptions = useMemo(
+    () =>
+      String(imageModel || "").toLowerCase().startsWith("wan2.7-")
+        ? GRID_MODE_OPTIONS.filter((option) => option.value !== "grid-25")
+        : GRID_MODE_OPTIONS,
+    [imageModel],
+  );
  const videoQualityOptions = getVideoQualityOptions(videoModel);
  const videoQualityLabel = getVideoQualityLabel(videoModel, videoQuality);

@@ -543,6 +569,31 @@ function WorkbenchPage({
    });
  }, []);

+  const hideScrollActionHint = useCallback(() => {
+    if (scrollActionHintTimerRef.current !== null) {
+      window.clearTimeout(scrollActionHintTimerRef.current);
+      scrollActionHintTimerRef.current = null;
+    }
+    setScrollActionHint(null);
+  }, []);
+
+  const showScrollActionHint = useCallback((direction: "top" | "bottom") => {
+    if (scrollActionHintTimerRef.current !== null) {
+      window.clearTimeout(scrollActionHintTimerRef.current);
+    }
+    setScrollActionHint(direction);
+    scrollActionHintTimerRef.current = window.setTimeout(() => {
+      setScrollActionHint(null);
+      scrollActionHintTimerRef.current = null;
+    }, 1400);
+  }, []);
+
+  useEffect(() => () => {
+    if (scrollActionHintTimerRef.current !== null) {
+      window.clearTimeout(scrollActionHintTimerRef.current);
+    }
+  }, []);
+
  const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
    () => [
      {
@@ -1175,9 +1226,15 @@ function WorkbenchPage({

  useEffect(() => {
    if (!imageQualityOptions.some((option) => option.value === imageQuality)) {
-      setImageQuality(getDefaultImageQuality(imageModel));
+      setImageQuality(getDefaultImageQualityForContext(imageModel, imageQualityContext));
    }
-  }, [imageModel, imageQuality, imageQualityOptions]);
+  }, [imageModel, imageQuality, imageQualityContext, imageQualityOptions]);
+
+  useEffect(() => {
+    if (!imageGridModeOptions.some((option) => option.value === imageGridMode)) {
+      setImageGridMode("single");
+    }
+  }, [imageGridMode, imageGridModeOptions]);

  useEffect(() => {
    if (activeMode !== "video" || videoFrameMode !== "start-end" || referenceItems.length <= 2) return;
@@ -1313,6 +1370,12 @@ function WorkbenchPage({
    activeConversationIdRef.current = null;
  }, [syncActiveGenerationUi]);

+  useEffect(() => {
+    if (resetToken === undefined || lastResetTokenRef.current === resetToken) return;
+    lastResetTokenRef.current = resetToken;
+    handleNewConversation();
+  }, [handleNewConversation, resetToken]);
+
  const handleSelectProject = useCallback((id: string) => {
    if (!id) {
      handleNewConversation();
@@ -1467,6 +1530,7 @@ function WorkbenchPage({
      const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
      shouldFollowNewMessagesRef.current = atBottom;
      setComposerHidden(!(atTop || atBottom));
+      hideScrollActionHint();
      lastScrollTopRef.current = top;
    };

@@ -1481,24 +1545,27 @@ function WorkbenchPage({
      shouldFollowNewMessagesRef.current = atBottom;
      if (atTop || atBottom) {
        setComposerHidden(false);
+        hideScrollActionHint();
      } else if (Math.abs(delta) > scrollDeltaThreshold) {
        setComposerHidden(true);
+        showScrollActionHint(delta < 0 ? "top" : "bottom");
      }
      lastScrollTopRef.current = top;
    };

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

  const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
    const surface = messagesSurfaceRef.current;
    if (!surface) return;

    const top = direction === "top" ? 0 : surface.scrollHeight;
+    hideScrollActionHint();
    setComposerHidden(false);
    surface.scrollTo({ top, behavior: "smooth" });
-  }, []);
+  }, [hideScrollActionHint]);

  const closeToolbarMenus = () => setToolbarMenuId(null);
  const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => {
@@ -2865,7 +2932,7 @@ function WorkbenchPage({
            <SelectChip
              chipId="image-grid-mode"
              value={imageGridMode}
-              options={GRID_MODE_OPTIONS}
+              options={imageGridModeOptions}
              disabled={disabled}
              isOpen={toolbarMenuId === "image-grid-mode"}
              onToggle={() => toggleToolbarMenu("image-grid-mode")}
@@ -2993,9 +3060,29 @@ function WorkbenchPage({
      </div>
    ) : null;

-  const renderPromptCaseOverlay = () =>
-    selectedPromptCase ? (
-      <div className="wb-prompt-case-modal" role="dialog" aria-modal="true" aria-labelledby="wb-prompt-case-title">
+  const renderPromptCaseOverlay = () => {
+    if (!selectedPromptCase) return null;
+
+    const measuredRatio = promptCaseMeasuredRatios[selectedPromptCase.id];
+    const ratioParts = selectedPromptCase.ratio.replace(/\s+/g, "").split(":").map(Number);
+    const declaredRatio =
+      ratioParts.length === 2 && ratioParts[0] > 0 && ratioParts[1] > 0
+        ? ratioParts[0] / ratioParts[1]
+        : null;
+    const caseRatio =
+      typeof measuredRatio === "number" && Number.isFinite(measuredRatio) && measuredRatio > 0
+        ? measuredRatio
+        : declaredRatio;
+    const copyLength = `${selectedPromptCase.summary} ${selectedPromptCase.prompt}`.length;
+    const modalClassName = [
+      "wb-prompt-case-modal",
+      caseRatio && caseRatio < 0.72 ? "is-tall-media" : "",
+      caseRatio && caseRatio >= 0.72 && caseRatio < 1 ? "is-portrait-media" : "",
+      copyLength > 260 ? "is-long-copy" : "",
+    ].filter(Boolean).join(" ");
+
+    return (
+      <div className={modalClassName} role="dialog" aria-modal="true" aria-labelledby="wb-prompt-case-title">
        <button
          type="button"
          className="wb-prompt-case-modal__backdrop"
@@ -3004,7 +3091,11 @@ function WorkbenchPage({
        />
        <section className="wb-prompt-case-modal__panel">
          <div className="wb-prompt-case-modal__media">
-            <img src={selectedPromptCase.imageUrl} alt={selectedPromptCase.title} />
+            <img
+              src={selectedPromptCase.imageUrl}
+              alt={selectedPromptCase.title}
+              onLoad={(event) => handlePromptCaseImageLoad(selectedPromptCase.id, event)}
+            />
          </div>
          <aside className="wb-prompt-case-modal__sidebar">
            <button
@@ -3044,7 +3135,8 @@ function WorkbenchPage({
          </aside>
        </section>
      </div>
-    ) : null;
+    );
+  };

  if (!hasActivatedWorkspace) {
    return (
@@ -3139,8 +3231,8 @@ function WorkbenchPage({

        </div>
          </div>
+          {renderConversationSidebar()}
        </div>
-        {renderConversationSidebar()}
        {renderMessagePreviewOverlay()}
        {renderPromptCaseOverlay()}
        {renderDeleteDialog()}
@@ -3282,10 +3374,10 @@ function WorkbenchPage({
                {renderComposerToolbar(false, isGenerating)}
              </div>
            </section>
-            <div className="wb-chat-scroll-actions" aria-label="聊天滚动">
+            <div className={`wb-chat-scroll-actions${scrollActionHint ? ` is-showing-${scrollActionHint}` : ""}`} aria-label="聊天滚动">
              <button
                type="button"
-                className="wb-chat-scroll-actions__button"
+                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top"
                title="返回聊天顶部"
                aria-label="返回聊天顶部"
                onClick={() => scrollMessagesSurface("top")}
@@ -3294,7 +3386,7 @@ function WorkbenchPage({
              </button>
              <button
                type="button"
-                className="wb-chat-scroll-actions__button"
+                className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom"
                title="到达聊天底部"
                aria-label="到达聊天底部"
                onClick={() => scrollMessagesSurface("bottom")}
@@ -231,7 +231,7 @@ export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as Workbe
 }));

 export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
-  { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K" },
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro" },
  { value: "wan2.7-image", label: "wan 2.7" },
  { value: "gpt-image-2", label: "omni-GPT" },
  { value: "gpt-image-2-vip", label: "omni-GPT VIP" },
@@ -1,6 +1,11 @@
 .more-page-v2 {
-  --more-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
-  --more-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 38px rgba(0, 0, 0, 0.16);
+  --more-card-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
+  --more-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.035), 0 16px 34px rgba(0, 0, 0, 0.18);
+  --more-card-surface: rgba(19, 23, 24, 0.86);
+  --more-card-surface-strong: rgba(22, 27, 28, 0.94);
+  --more-card-border: rgba(255, 255, 255, 0.105);
+  --more-card-border-strong: rgba(var(--accent-rgb), 0.3);
+  --more-page-pad-x: clamp(18px, 2.3vw, 32px);

  position: relative;
  display: grid;
@@ -158,24 +163,24 @@

 .more-page-v2__scroll {
  overflow-y: auto;
-  padding: 26px 28px 68px;
+  padding: 28px var(--more-page-pad-x) 72px;
  scrollbar-color: rgba(var(--accent-rgb), 0.26) transparent;
 }

 .more-page-v2__section {
-  margin-bottom: 30px;
+  margin-bottom: 34px;
 }

 .more-page-v2__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
-  margin: 0 0 15px;
-  color: var(--fg-muted);
+  margin: 0 0 14px;
+  color: color-mix(in srgb, var(--fg-muted) 86%, var(--fg-body));
  font-size: 12px;
-  font-weight: 800;
+  font-weight: 850;
  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.055em;
 }

 .more-page-v2__section-title .anticon {
@@ -199,27 +204,31 @@

 .more-page-v2__recent-row {
  display: flex;
-  gap: 12px;
+  gap: 10px;
  flex-wrap: wrap;
 }

 .more-page-v2__featured-grid {
  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 18px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
 }

 .more-card--featured {
-  display: flex;
-  align-items: flex-start;
-  gap: 18px;
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  align-items: start;
+  justify-items: stretch;
+  gap: 16px;
+  min-height: 336px;
  padding: 20px;
-  border-color: rgba(var(--accent-rgb), 0.18);
+  border-color: rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-xs, 8px);
  background:
    var(--card-gradient),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
-    var(--bg-panel);
+    radial-gradient(circle at 14% 4%, rgba(var(--accent-rgb), 0.12), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
+    var(--more-card-surface-strong);
  box-shadow: var(--more-card-glow);
  position: relative;
  overflow: hidden;
@@ -230,27 +239,27 @@
  position: absolute;
  inset: 0;
  background:
-    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%);
-  opacity: 0.5;
+    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.038), transparent),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%);
+  opacity: 0.62;
  pointer-events: none;
 }

 .more-card--featured:hover {
-  border-color: rgba(var(--accent-rgb), 0.45);
-  transform: translateY(-3px);
-  box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
+  border-color: rgba(var(--accent-rgb), 0.46);
+  transform: translateY(-2px);
+  box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
 }

 .more-card__featured-icon {
  display: grid;
  place-items: center;
-  width: 52px;
-  height: 52px;
-  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  width: 54px;
+  height: 54px;
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: var(--radius-xs, 8px);
  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
    var(--bg-inset);
  color: var(--accent);
  font-size: 24px;
@@ -261,11 +270,32 @@
 .more-card__featured-body {
  display: flex;
  flex-direction: column;
-  gap: 9px;
+  gap: 10px;
+  justify-self: stretch;
+  width: 100%;
+  height: 100%;
  min-width: 0;
  text-align: left;
 }

+.more-card--featured .more-card__preview {
+  width: 100%;
+  min-height: 0;
+  aspect-ratio: 16 / 9;
+}
+
+.more-card--featured.more-card--no-preview {
+  min-height: 0;
+}
+
+.more-card--featured.more-card--no-preview .more-card__featured-body {
+  justify-content: flex-start;
+}
+
+.more-card--featured.more-card--no-preview .more-card__outcome {
+  margin-top: 4px;
+}
+
 .more-card__featured-kicker {
  width: fit-content;
  color: var(--accent);
@@ -277,14 +307,14 @@

 .more-card__featured-body strong {
  color: var(--fg-body);
-  font-size: 18px;
-  font-weight: 800;
+  font-size: 20px;
+  font-weight: 850;
  line-height: 1.25;
 }

 .more-card__featured-desc {
  font-size: 13px;
-  color: var(--fg-muted);
+  color: color-mix(in srgb, var(--fg-muted) 88%, var(--fg-body));
  line-height: 1.5;
 }

@@ -327,20 +357,23 @@
  display: inline-flex;
  align-items: center;
  width: fit-content;
-  min-height: 28px;
-  margin-top: 0;
-  padding: 0 10px;
-  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  min-height: 32px;
+  margin-top: auto;
+  padding: 0 12px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
  border-radius: var(--radius-xs, 8px);
-  background: rgba(var(--accent-rgb), 0.08);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
+    rgba(var(--accent-rgb), 0.06);
  font-size: 12px;
-  font-weight: 800;
+  font-weight: 850;
  color: var(--accent) !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }

 .more-page-v2__grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
 }

@@ -350,18 +383,22 @@
  align-content: start;
  justify-items: start;
  min-width: 0;
-  gap: 10px;
+  min-height: 392px;
+  gap: 12px;
  padding: 18px;
-  border: 1px solid var(--border-weak);
+  border: 1px solid var(--more-card-border);
  border-radius: var(--radius-xs, 8px);
  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 42%),
-    var(--bg-panel);
+    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.055), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
+    var(--more-card-surface);
  color: var(--fg-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 1px 0 rgba(255, 255, 255, 0.02);
  transition:
    border-color 160ms ease,
    background 160ms ease,
@@ -370,12 +407,19 @@
 }

 .more-card:hover {
-  border-color: rgba(var(--accent-rgb), 0.38);
+  border-color: var(--more-card-border-strong);
  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
-    var(--bg-hover, rgba(255, 255, 255, 0.03));
+    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.085), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 46%),
+    rgba(24, 29, 30, 0.94);
  transform: translateY(-2px);
-  box-shadow: var(--more-card-glow), 0 10px 26px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--more-card-glow), 0 14px 30px rgba(0, 0, 0, 0.18);
+}
+
+.more-card:active,
+.more-page-v2__filters button:active,
+.more-page-v2__empty-action:active {
+  transform: translateY(0);
 }

 .more-card--pending {
@@ -395,17 +439,20 @@
  display: flex;
  align-items: center;
  gap: 10px;
-  min-width: 150px;
-  min-height: 54px;
-  padding: 10px 14px;
-  border-color: rgba(var(--accent-rgb), 0.14);
+  min-width: 164px;
+  min-height: 58px;
+  padding: 11px 14px;
+  border-color: rgba(var(--accent-rgb), 0.16);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.016)),
+    rgba(18, 23, 24, 0.88);
 }

 .more-card__icon {
  display: grid;
  place-items: center;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: var(--radius-xs, 8px);
  background:
@@ -437,15 +484,15 @@
 .more-card strong {
  max-width: 100%;
  color: var(--fg-body);
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1.35;
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.28;
 }

 .more-card__topline {
  position: absolute;
-  top: 14px;
-  right: 14px;
+  top: 18px;
+  right: 18px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
@@ -472,9 +519,9 @@
  position: relative;
  display: block;
  width: 100%;
-  min-height: 92px;
+  min-height: 104px;
  overflow: hidden;
-  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 34%),
@@ -483,8 +530,7 @@
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
-    0 0 20px rgba(var(--accent-rgb), 0.08);
-  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
+    0 0 18px rgba(var(--accent-rgb), 0.07);
  isolation: isolate;
 }

@@ -506,7 +552,6 @@
  inset: 5px;
  z-index: 3;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
-  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  content: "";
  pointer-events: none;
 }
@@ -880,15 +925,102 @@
  border-radius: 8px;
 }

+.more-card__preview {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.42 / 1;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.more-card__preview-frame {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: var(--radius-xs, 8px);
+  background:
+    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.12), transparent 56%),
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 34%),
+    var(--bg-inset);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    0 0 18px rgba(var(--accent-rgb), 0.06);
+}
+
+.more-card__preview-frame::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(0, 0, 0, 0.18)),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 38%, rgba(255, 255, 255, 0.025));
+  content: "";
+  pointer-events: none;
+}
+
+.more-card__preview-frame img,
+.more-card__preview-popover {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 6px;
+  transform: none;
+  transition:
+    filter 220ms ease;
+}
+
+.more-card:hover .more-card__preview-frame img {
+  filter: saturate(1.05) contrast(1.02);
+}
+
+.more-card__preview-popover {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 12px);
+  z-index: 20;
+  width: min(420px, calc(100vw - 48px));
+  height: auto;
+  max-height: min(360px, 58vh);
+  padding: 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: var(--radius-xs, 8px);
+  background:
+    radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.12), transparent 52%),
+    rgba(10, 14, 14, 0.96);
+  box-shadow:
+    0 28px 68px rgba(0, 0, 0, 0.46),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 8px) scale(0.96);
+  transform-origin: 50% 100%;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.more-card__preview:hover .more-card__preview-popover {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+.more-card--featured .more-card__preview-popover {
+  display: none;
+}
+
 .more-card__desc {
-  color: var(--fg-muted);
+  color: color-mix(in srgb, var(--fg-muted) 88%, var(--fg-body));
  font-size: 12.5px;
-  line-height: 1.5;
+  line-height: 1.55;
 }

 .more-card__use-case {
  display: block;
-  min-height: 38px;
+  min-height: 50px;
  color: color-mix(in srgb, var(--fg-muted) 78%, var(--fg-body));
  font-size: 12px;
  line-height: 1.55;
@@ -898,15 +1030,15 @@
  display: inline-flex;
  align-items: center;
  width: fit-content;
-  min-height: 26px;
-  margin-top: 2px;
-  padding: 0 9px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  min-height: 30px;
+  margin-top: auto;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs, 8px);
  background: rgba(255, 255, 255, 0.035);
  color: var(--fg-body);
  font-size: 11px;
-  font-weight: 800;
+  font-weight: 850;
  transition:
    border-color 160ms ease,
    background 160ms ease,
@@ -915,8 +1047,8 @@
 }

 .more-card:hover .more-card__action {
-  border-color: rgba(var(--accent-rgb), 0.28);
-  background: rgba(var(--accent-rgb), 0.08);
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  transform: translateX(2px);
 }
@@ -936,14 +1068,15 @@
 .more-page-v2__empty {
  display: grid;
  justify-items: center;
-  gap: 10px;
-  min-height: 220px;
-  padding: 34px 20px;
-  border: 1px solid var(--border-weak);
+  gap: 12px;
+  min-height: 238px;
+  padding: 38px 22px;
+  border: 1px solid var(--more-card-border);
  border-radius: var(--radius-xs, 8px);
  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.065), transparent 64%),
-    var(--bg-panel);
+    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.1), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 64%),
+    var(--more-card-surface);
  color: var(--fg-muted);
  text-align: center;
 }
@@ -951,11 +1084,13 @@
 .more-page-v2__empty-icon {
  display: grid;
  place-items: center;
-  width: 48px;
-  height: 48px;
+  width: 52px;
+  height: 52px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius-xs, 8px);
-  background: rgba(var(--accent-rgb), 0.1);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
+    rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 20px;
 }
@@ -978,12 +1113,14 @@
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  min-height: 34px;
+  min-height: 36px;
  margin-top: 4px;
-  padding: 0 12px;
-  border: 1px solid rgba(var(--accent-rgb), 0.32);
+  padding: 0 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.36);
  border-radius: var(--radius-xs, 8px);
-  background: rgba(var(--accent-rgb), 0.08);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.08)),
+    rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
@@ -1013,6 +1150,7 @@

  .more-page-v2__header {
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
+    gap: 14px;
  }

  .more-page-v2__filters {
@@ -1023,15 +1161,21 @@

@media (max-width: 860px) {
  .more-page-v2 {
+    --more-page-pad-x: 16px;
+
    padding-left: 0;
  }

  .more-page-v2__header {
    grid-template-columns: minmax(0, 1fr);
-    padding: 14px 16px 12px;
+    padding: 16px 16px 14px;
    gap: 12px;
  }

+  .more-page-v2__header h1 {
+    font-size: 24px;
+  }
+
  .more-page-v2__header-meta {
    gap: 6px;
  }
@@ -1047,13 +1191,22 @@
    padding-right: 16px;
  }

+  .more-page-v2__filters button {
+    min-height: 31px;
+    padding: 0 10px;
+  }
+
  .more-page-v2__scroll {
-    padding: 16px 16px 48px;
+    padding: 18px 16px 52px;
+  }
+
+  .more-page-v2__section {
+    margin-bottom: 26px;
  }

  .more-page-v2__grid {
-    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 14px;
  }

  .more-page-v2__recent-row {
@@ -1063,11 +1216,13 @@
  }

  .more-page-v2__featured-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .more-card--featured {
+    grid-template-columns: 44px minmax(0, 1fr);
+    min-height: 0;
    padding: 16px;
    gap: 12px;
  }
@@ -1079,7 +1234,12 @@
  }

  .more-card__featured-body strong {
-    font-size: 15px;
+    font-size: 16px;
+  }
+
+  .more-card--featured .more-card__preview {
+    width: 100%;
+    min-height: 176px;
  }

  .more-card__featured-kicker,
@@ -1097,8 +1257,13 @@
    font-size: 10px;
  }

-  .more-card__compare {
-    min-height: 82px;
+  .more-card__preview {
+    min-height: 190px;
+  }
+
+  .more-card {
+    min-height: 394px;
+    padding: 16px;
  }

  .more-card__topline {
@@ -1108,24 +1273,74 @@
  }

  .more-card__use-case {
-    min-height: 54px;
+    min-height: 46px;
  }
 }

@media (max-width: 520px) {
+  .more-page-v2__header {
+    gap: 10px;
+    padding-top: 14px;
+  }
+
+  .more-page-v2__header-meta {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    margin-right: -16px;
+    padding-right: 16px;
+    scrollbar-width: none;
+  }
+
+  .more-page-v2__header-meta::-webkit-scrollbar {
+    display: none;
+  }
+
  .more-page-v2__grid {
    grid-template-columns: 1fr;
  }

-  .more-card {
-    gap: 9px;
+  .more-page-v2__featured-grid {
+    grid-template-columns: 1fr;
  }

-  .more-card__compare {
-    min-height: 94px;
+  .more-page-v2__section-title {
+    margin-bottom: 12px;
+  }
+
+  .more-card--featured {
+    grid-template-columns: 1fr;
+    padding: 15px;
+  }
+
+  .more-card__featured-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .more-card {
+    gap: 10px;
+    min-height: 0;
+    padding: 15px;
+  }
+
+  .more-card__preview {
+    min-height: 190px;
  }

  .more-card__use-case {
    min-height: 0;
  }
+
+  .more-card__action,
+  .more-card__cta {
+    min-height: 32px;
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (hover: none) {
+  .more-card__preview-popover {
+    display: none;
+  }
 }
@@ -10845,8 +10845,44 @@
 }

@media (max-width: 900px) {
+  .web-shell[data-ui-theme="dark-green"] {
+    --dg-mobile-nav-height: 58px;
+    --dg-mobile-nav-gap: 12px;
+    --dg-mobile-nav-space: calc(var(--dg-mobile-nav-height) + var(--dg-mobile-nav-gap));
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .web-topbar {
+    z-index: 72;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .web-shell__content,
+  .web-shell[data-ui-theme="dark-green"] .web-shell__page {
+    min-height: 0;
+    padding-bottom: 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .web-shell__page {
+    overflow: auto;
+  }
+
+  .web-shell[data-ui-theme="dark-green"]:not([data-view="home"]):not([data-view="login"]):not([data-view="workbench"]):not([data-view="agent"]):not([data-view="avatarConsole"]) .web-shell__page {
+    padding-top: var(--dg-mobile-nav-space);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-popover {
+    position: fixed;
+    top: calc(56px + var(--dg-mobile-nav-space) + env(safe-area-inset-top, 0px));
+    right: 12px;
+    z-index: 120;
+    width: min(288px, calc(100vw - 24px));
+    max-height: calc(100svh - 56px - var(--dg-mobile-nav-space) - 24px);
+    overflow-y: auto;
+    transform-origin: top right;
+  }
+
  .web-shell[data-ui-theme="dark-green"] .floating-nav {
    top: calc(56px + env(safe-area-inset-top, 0px));
+    z-index: 50;
    right: 12px;
    bottom: auto;
    left: 12px;
@@ -25,11 +25,30 @@ export function getImageQualityOptions(model: string): CanvasOption[] {
    : imageQualityOptions.filter((option) => option.value !== "4K");
 }

+export function getImageQualityOptionsForContext(
+  model: string,
+  context?: { hasReferenceImages?: boolean; isGridMode?: boolean },
+): CanvasOption[] {
+  const options = getImageQualityOptions(model);
+  const shouldLimitTo2K =
+    String(model || "").toLowerCase() === "wan2.7-image-pro" &&
+    (context?.hasReferenceImages || context?.isGridMode);
+  return shouldLimitTo2K ? options.filter((option) => option.value !== "4K") : options;
+}
+
 export function getDefaultImageQuality(model: string): string {
  const options = getImageQualityOptions(model);
  return options.some((option) => option.value === "2K") ? "2K" : options[0]?.value || "1K";
 }

+export function getDefaultImageQualityForContext(
+  model: string,
+  context?: { hasReferenceImages?: boolean; isGridMode?: boolean },
+): string {
+  const options = getImageQualityOptionsForContext(model, context);
+  return options.some((option) => option.value === "2K") ? "2K" : options[0]?.value || "1K";
+}
+
 // ─── Video quality ────────────────────────────────────────────────────────────

 function normalizeVideoModel(model: string): string {
Author	SHA1	Message	Date
stringadmin	1049fa3218	Merge branch 'master' into feat/toolbox-preview-cards-and-responsive-polish	2026-06-08 10:59:20 +00:00
ludan	6f54ad92c0	feat: 工具盒卡片预览图替换与响应式视觉优化本次提交包含以下改进： ## 1. 工具卡片真实预览图替换 (MorePage.tsx) - 移除原有的CSS绘制Before/After对比图(ToolComparePanel/CompareScene) - 新增ToolPreviewPanel组件，使用OSS真实截图展示每个工具的效果预览 - 建立toolPreviewImages映射表，为8个工具分别配置预览图URL - 预览图支持hover悬浮放大效果(popover)，桌面端鼠标悬停时展示大图 - 触摸设备通过@media (hover: none)隐藏popover，避免移动端误触 ## 2. 核心工具区重构 (MorePage.tsx) - 移除FeaturedTool独立接口和featuredTools数组，统一到tools体系 - 新增coreToolIds集合标记核心工具(workbench/inpaint/watermarkRemoval) - 新增coreToolGradients和coreToolSteps独立配置每张核心卡的渐变和步骤 - 移除openFeaturedTool，统一使用openTool处理所有工具点击 - 核心卡片kick er改为显示分类标签(图像创作/视频创作) - 视频生成分类标签更名为"视频创作" ## 3. 工具卡片视觉升级 (more.css) - 新增CSS变量体系：--more-card-surface/surface-strong/border/border-strong - 核心工具卡：三列网格布局、渐变背景叠加、预览图16:9占位区 - 普通工具卡：增大最小高度至392px、radial-gradient光晕、增强边框 - 卡片预览图：aspect-ratio容器、内边框光效、::after渐变叠加层 - Hover悬浮popover：从卡片底部弹出大图，160ms过渡动画 - CTA按钮强化：渐变背景、内阴影高光、font-weight 850 - :active状态按压反馈(translateY(0)消除位移) - 阴影系统升级：更深、更柔和的阴影层次 ## 4. Prompt案例弹窗响应式重构 (workbench.css) - 720px断点：从垂直堆叠改为水平左右分栏布局(1.08:0.92) - 侧边栏从底部面板移至右侧，带左分割线和投影 - 420px断点：紧凑水平分栏(0.9:1.1)、更小字号和间距 - 弹窗增加边框和圆角、关闭按钮毛玻璃效果 - 作者信息采用grid布局、描述文本line-clamp截断 ## 5. 响应式细节完善 - more.css 860px: 双列核心卡、增大预览图、调整间距 - more.css 520px: 单列布局、筛选标签横向滚动、CTA按钮全宽 - workbench.css: 各断点prompt-case-modal精确调优	2026-06-08 18:57:07 +08:00
stringadmin	9b7e708f85	Merge pull request 'Codex/generation task reliability' (#27 ) from codex/generation-task-reliability into master Reviewed-on: #27	2026-06-08 10:31:08 +00:00
stringadmin	4e97e706fd	Add beta application email fields	2026-06-08 18:30:05 +08:00
stringadmin	30536ad15f	Fix wan2.7 image quality selection	2026-06-08 18:26:44 +08:00
stringadmin	e78cc05299	Merge remote-tracking branch 'origin/master' into codex/generation-task-reliability	2026-06-08 17:39:11 +08:00
stringadmin	b88be66e7f	Merge pull request 'feat: Workbench SaaS视觉升级与视图重置机制' (#26 ) from feat/workbench-saas-polish-and-reset into master Reviewed-on: #26	2026-06-08 09:31:55 +00:00
stringadmin	1a9196a63a	Merge branch 'master' into feat/workbench-saas-polish-and-reset	2026-06-08 09:31:49 +00:00
ludan	4dfcb6fc8a	feat: Workbench SaaS视觉升级与视图重置机制本次提交包含以下改进： ## 1. Workbench视图重置机制 (App.tsx + WorkbenchPage.tsx) - 在App.tsx中新增workbenchResetToken状态，每次导航到workbench页面且存在session时递增token - WorkbenchPage新增resetToken属性，检测token变化后自动调用handleNewConversation()重置工作台状态 - 重置时清空消息列表和活跃会话ID，确保每次进入工作台都是全新状态 ## 2. 滚动操作提示系统 (WorkbenchPage.tsx) - 新增scrollActionHint状态和hideScrollActionHint/showScrollActionHint方法 - 用户滚动离开消息区域时自动显示滚动方向提示（顶部/底部按钮） - 1.4秒后自动隐藏提示，优化交互体验 - 手动点击滚动按钮后立即隐藏提示 - 为滚动按钮添加--top/--bottom标识类名，支持独立定位 ## 3. Prompt案例弹窗自适应布局 (WorkbenchPage.tsx) - renderPromptCaseOverlay重构为动态计算moda l类名 - 根据图片实测宽高比(is-tall-media/is-portrait-media)和文案长度(is-long-copy)动态调整布局 - 添加handlePromptCaseImageLoad回调在图片加载后测量尺寸 ## 4. Workbench SaaS视觉美化 (workbench.css) - 全新SaaS风格设计变量(--wb-panel, --wb-line, --wb-shadow等) - 首页区域：标题样式、Composer输入框圆角/阴影/聚焦态、发送按钮渐变样式 - 模式选择/芯片组件：下拉菜单、悬停态优化、选中态高亮 - 聊天消息区：气泡圆角、头像样式、消息间距、空状态引导 - 图片/视频结果卡片：边框、阴影、标签徽章、视频PLAY标识 - 生成中卡片：停止按钮样式 - 会话侧边栏：折叠态浮动按钮定位、展开态面板样式、选中项左侧指示条 - 滚动快捷键：固定定位圆形按钮、显示/隐藏过渡动画 - Prompt案例弹窗：桌面端毛玻璃双栏布局、移动端底部面板布局 - @media适配：560px/720px/900px/980px四个断点全覆盖 ## 5. 全局移动端布局变量 (dark-green.css) - 新增--dg-mobile-nav-height/gap/space CSS变量，统一移动端底部导航高度计算 - 优化Topbar z-index层级 - 非特殊页面自动添加顶部padding避让移动导航 - Profile弹窗fixed定位及安全区域适配	2026-06-08 17:30:21 +08:00
stringadmin	60d5cd2edf	Merge pull request 'Codex/generation task reliability' (#25 ) from codex/generation-task-reliability into master Reviewed-on: #25	2026-06-08 07:49:24 +00:00