fix(workbench): 工具弹窗 - 修正内容宽度与响应式网格

docs/content/docs/progress/pending-test.mdx

@@ -7,8 +7,9 @@ description: 当前项目已实现功能的手工验证清单与未确认边界
 
 ## 图片与视频电商出品工作室
 
-- 已实现：`/toolbox/image` 与 `/toolbox/video` 保留紧凑的工作区入口，移除顶部品牌介绍区，增加轻量创作流程提示、基于真实工作台工具的快捷出品目标卡、页面内可见的创作工具面板、语义彩色图标、分组提示词区域和更大的作品预览区；保留原有模型、上传、生成、任务、重试和详情逻辑。
-- 已实现：结果区、工具说明、进行中任务和历史任务按作品优先的视觉层级重新组织；增加明暗主题可继承的组件色彩变量、hover/focus 状态和移动端适配。
+- 已实现：`/toolbox/image` 与 `/toolbox/video` 保留紧凑工作区入口，移除顶部品牌介绍区；提供创作流程条、重置入口、快捷出品目标和工具选择弹窗。弹窗桌面五列，961px 以下四列、768px 以下两列；选择工具后空提示词自动套用首个预设，已有内容可通过预设入口追加或替换。
+- 已实现：重置后结果区保持空态，旧提交与轮询响应不会重新展示结果；历史任务保留。结果标题、任务列表和详情统一使用模型展示名；生成按钮收窄。模型选择器禁用位移、图标缩放、箭头过渡及弹层进出场动画，键盘聚焦仅滚动菜单。
+- 已实现：服务启动时在事务内补齐 118 个内置工具（69 图片、49 视频）及每个工具 3 个提示词预设，固定 ID、重复启动不覆盖已有管理员编辑和下线状态；不引用其他安装实例的资源 ID。
 - 已验证：`cd web && bun run typecheck`、`bun run lint`、`bun run build` 通过；`git diff --check` 通过。
 - [ ] 用户验收：真实登录态访问 `/toolbox/image` 和 `/toolbox/video`，确认快捷目标卡使用真实工具、图片/视频切换、工具弹层、素材上传和生成提交均正常。
 - [ ] 用户验收：明暗主题、窄屏滚动、不同工具数量、工具封面缺失、生成中/成功/失败结果状态下，确认布局和色彩层级符合预期。

web/src/pages/workbench/image-workbench-page.tsx

@@ -894,7 +894,6 @@ export function WorkbenchPage({ kind }: { kind: WorkbenchKind }) {
         <div className="workbench-tool-library" id="workbench-tool-library">
             <div className="workbench-tool-library-heading">
                 <div>
-                    <strong>选择创作工具</strong>
                     <span>选一个场景，或直接写提示词</span>
                 </div>
                 {tool ? (
@@ -1545,7 +1544,7 @@ function ToolCard({ tool, selected, onClick }: { tool: WorkbenchTool; selected:
     const subtitle = isModelIdLike(tool.subtitle) ? tool.description || "" : tool.subtitle || tool.description;
     return (
         <button type="button" className={`workbench-tool-card ${selected ? "is-selected" : ""} is-${visual.tone}`} aria-pressed={selected} onClick={onClick}>
-            <SpotlightSurface className="workbench-tool-card-surface" spotlightColor="color-mix(in srgb, var(--user-ink) 5%, transparent)">
+            <SpotlightSurface className="workbench-tool-card-spotlight" contentClassName="workbench-tool-card-surface relative z-[1]" spotlightColor="color-mix(in srgb, var(--user-ink) 5%, transparent)">
                 <span className="workbench-tool-card-image">{tool.coverUrl || tool.iconUrl ? <img src={tool.coverUrl || tool.iconUrl} alt="" /> : visual.icon}</span>
                 <span className="workbench-tool-card-copy">
                     <strong>{tool.name}</strong>

web/src/pages/workbench/workbench.css

@@ -207,11 +207,19 @@
 .workbench-tool-popover .ant-popover-inner {
     padding: 0;
 }
-.workbench-tool-popover-content,
-.workbench-tool-library {
+.workbench-tool-popover-content {
     display: grid;
     gap: 12px;
     width: min(680px, calc(100vw - 32px));
+    box-sizing: border-box;
+    padding: 18px;
+}
+.workbench-tool-library {
+    display: grid;
+    gap: 12px;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     padding: 18px;
 }
 .workbench-tool-library-heading {
@@ -1172,6 +1180,26 @@
     font-size: 11px;
     line-height: 1.5;
 }
+.workbench-picker-modal {
+    --wb-page: var(--user-page-bg, var(--workspace-page, #f8f8fa));
+    --wb-surface: var(--user-surface, #fff);
+    --wb-raised: var(--user-surface-raised, var(--user-surface, #fff));
+    --wb-muted: var(--user-surface-muted, #f1f1f3);
+    --wb-hover: var(--user-surface-hover, #eaeaec);
+    --wb-edge: var(--user-border, color-mix(in srgb, var(--user-ink) 9%, transparent));
+    --wb-shadow: none;
+    --wb-text: var(--user-ink, var(--foreground));
+    --wb-text-muted: var(--user-ink-muted, var(--muted-foreground));
+    --wb-text-soft: var(--user-ink-soft, var(--muted-foreground));
+    --wb-warning: #8a3b12;
+    --wb-accent-product: #e49a58;
+    --wb-accent-people: #8b78e8;
+    --wb-accent-scene: #4caeb5;
+    --wb-accent-style: #df729c;
+    --wb-accent-video: #c76475;
+    --wb-accent-creative: #6c82dc;
+    --wb-panel-glow: color-mix(in srgb, var(--user-primary, #6c82dc) 8%, transparent);
+}
 .workbench-picker-modal .ant-modal-content,
 .workbench-settings-modal .ant-modal-content,
 .workbench-detail-modal .ant-modal-content {
@@ -1242,6 +1270,13 @@
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--user-primary, var(--wb-accent-creative)) 18%, transparent);
 }
 
+.workbench-tool-card-spotlight {
+    height: 100%;
+    min-height: 146px;
+    overflow: hidden;
+    border-radius: inherit;
+}
+
 .workbench-tool-card-surface {
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
@@ -1456,9 +1491,6 @@
     .workbench-columns {
         grid-template-columns: minmax(340px, 1.1fr) minmax(290px, 1fr);
     }
-    .workbench-picker-modal .workbench-tool-grid {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
     .workbench-task-column {
         position: fixed;
         z-index: 30;
@@ -1490,6 +1522,11 @@
         grid-template-rows: minmax(300px, 1fr) minmax(220px, 0.7fr);
     }
 }
+@media (max-width: 960px) {
+    .workbench-picker-modal .workbench-tool-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
 @media (max-width: 767px) {
     .workbench-page > div:first-child {
         padding: 8px !important;
@@ -1609,12 +1646,13 @@
         overflow-x: auto;
         flex-wrap: nowrap;
     }
-    .workbench-tool-grid {
+    .workbench-picker-modal .workbench-tool-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         max-height: 62vh;
     }
     .workbench-tool-card,
-    .workbench-tool-card-surface {
+    .workbench-tool-card-surface,
+    .workbench-tool-card-spotlight {
         min-height: 126px;
     }
     .workbench-tool-card-surface {