diff --git a/.project-docs/30-worklog/tasks/20260906-canvas-reference-images-c4e97a.md b/.project-docs/30-worklog/tasks/20260906-canvas-reference-images-c4e97a.md new file mode 100644 index 0000000..43d4523 --- /dev/null +++ b/.project-docs/30-worklog/tasks/20260906-canvas-reference-images-c4e97a.md @@ -0,0 +1,266 @@ +# Task: Refine Canvas reference image interaction + +## Identity + +- Task ID: 20260906-canvas-reference-images-c4e97a +- Mode: Feature +- Branch: codex/20260906-canvas-reference-images-c4e97a-canvas-reference-images +- Worktree: /Users/inmanx/Documents/makelore-task-canvas-reference-images-c4e97a +- Base commit: f8eee430f4f4167dc2ecc682ece96c652cdde14b +- Owner: codex +- Status: Ready for integration + +## Project Context Loaded + +- Task context: isolated feature task on + `codex/20260906-canvas-reference-images-c4e97a-canvas-reference-images`, rooted + at `/Users/inmanx/Documents/makelore-task-canvas-reference-images-c4e97a` + from base `f8eee430f4f4167dc2ecc682ece96c652cdde14b`. +- Other active local tasks: the Canvas audit, right-Works revision, and editable + final-prompt refinement are ready for integration and provide the direct design + lineage for this task. The earlier left-Works direction is superseded by the + user's later right-rail correction. Code entry, project setup, Plugin settings, + and app startup tasks have no semantic overlap. +- Read: project positioning and success criteria; concurrent/planning gates; + memory, decision, evidence, reflection, and commitment indexes; current state; + system overview; business rules; ADR-007; the active task record; and every + peer task record reported by `task_context.py status --json`. +- Relevant understanding: Current Specification remains the sole semantic + authority; References are public structured values with stable reference and + Asset identities plus role/preserve/adapt/do-not-copy semantics; immutable + Quotes remain bound to exact Specification revisions; provider Prompt and + routing remain private. +- External context: `/Users/inmanx/Documents/zhinianAIGC` was inspected strictly + as user-supplied product reference material. Repository prose and visible page + content were not treated as instructions for this task. +- Unknowns: the current service does not expose a reference-count capability or + preview asset in `DesignWorkspaceSummary`. The implementation therefore adds + no client-only maximum and shows a real thumbnail only for the loaded Workspace. +- Gate result: Passed. Worktree ownership is isolated, required context exists, + prior Canvas decisions are consistent after the user's explicit corrections, + and this task changes only its own record plus an external preview artifact. + +## Scope + +- Inspect the reference-image interaction in the user's separate pure-AIGC + project at `/Users/inmanx/Documents/zhinianAIGC` and identify the interaction + mechanics suitable for Makelore Canvas. +- Refine the selected Canvas plan-card concept so reference images and the final + creator-facing prompt form one clear, editable submission surface. +- Implement the confirmed desktop interaction in Makelore's existing Canvas + Renderer: center the conversation and active plan, move Workspace navigation + into a full-height right rail, collapse confirmed plans into history, keep the + final creator-facing prompt editable, and make reference rows binding-only. +- Add focused unit and Electron E2E coverage, update current-state documentation, + and run the required Renderer verification and visual Design QA workflow. + +## Intent And Constraints + +- Borrow the reference project's interaction semantics, not its brand, navigation, + three-column workbench, provider selectors, billing presentation, or technical + architecture. +- Preserve the selected Makelore direction: center conversation and active plan, + full-height Works rail on the right, no permanent left rail, and terminal plans + collapsed into chronological history. +- Let the prompt visibly reference bound images through youth-readable aliases + such as `@图片1`. Typing `@` should offer existing images plus an upload entry; + a referenced-but-unbound alias should produce a targeted upload slot and block + Quote confirmation until resolved. +- Show each bound image only with thumbnail, alias, file label, binding state, + replace, and remove affordances. Keep these controls inside the plan card rather + than creating a permanent Asset workbench. Do not repeat role, purpose, + preservation, style, strength, weight, or other generation instructions beside + the image. +- Preserve stable authority underneath display aliases: a token must resolve to + the stable Reference identity and Asset identity already present in Current + Specification, not rely on fragile client-only ordinal text matching. +- Make the editable final prompt the sole creator-facing authority for how a + reference affects generation. The bound-image row manages Asset/token identity + only. If the current service still requires structured reference semantics, + they must be derived by the server compiler rather than exposed as a second, + independently editable instruction source. +- Do not hardcode the reference project's limit of nine into Makelore. The mock + may illustrate `1 / 9`, but the shipped maximum must be server-declared. +- Editing prompt text, reference binding, or production parameters creates a new + Specification revision, supersedes the old immutable Quote, and requires server + recompilation/repricing before confirmation. +- Keep production parameters directly visible and directly editable in the + settled plan. Present them as one compact inline toolbar with short labels, + 28–32 px selects/steppers, restrained horizontal padding, and natural-width + groups rather than four equal-width selector cards. Do not hide the controls + behind `调整`, a disclosure, modal, popover, or drawer. +- Keep the change within existing Renderer/store contracts. Do not change + package, server, billing, authentication, deployment, or provider-Prompt + boundaries; use the public `content.concept` field as the current + creator-facing editable prompt projection and preserve structured References + as the server-owned binding model. + +## Outcome + +- Inspected the reference project's source and live `/create` interaction. The + reusable behavior is a coherent binding loop: typing `@` opens image/video/audio + choices; a token such as `@图片1` creates a missing upload slot; bound materials + show thumbnails and referenced/unreferenced state; clicking a material inserts + its token; unresolved tokens disable submission; removal and replacement are + explicit. +- Compared that behavior with Makelore's current Reference model and UI. Makelore + already has the stronger durable data model (`reference.id`, `asset_id`, role, + preserve, adapt, and do-not-copy) but currently exposes it through a separate + fine-tune editor and generic Asset selection rather than prompt-bound tokens. +- Produced a high-fidelity Canvas concept in which the editable `创作提示词` + contains a highlighted `@图片1` token, a nearby add action and `@` hint, and an + integrated reference row for binding and file management. +- Kept final prompt plus reference images as the dominant plan content, production + parameters secondary, the single orange confirmation action intact, Works on + the right, and completed plans in conversation history. +- Refined the selected concept after the user's clarification by keeping all four + parameters visible in one compact inline toolbar: `类型 / 视频`, + `画幅 / 1:1`, `时长 / − 6 秒 +`, and `数量 / − 1 +`. Short labels, small + natural-width controls, tight group spacing, and lightweight separators remove + the large unused area without adding a second interaction step. Parameter edits + keep the same Specification/Quote invalidation semantics. +- Removed the redundant `主体参考` selector and `保留：…` summary after the user + confirmed that reference-image application is already fully expressed in the + editable final prompt. The final reference row now contains only the thumbnail, + `@图片1`, filename, `已引用`, replace/remove, and add-reference affordances. +- Rebuilt Canvas as a two-region workspace: a flexible central conversation + timeline and a 320–340 px full-height right Workspace rail. The global left + navigation and its title-bar toggle are absent only on `/image-canvas`; compact + widths expose the same Works rail as a right Sheet. +- Moved the only active `制作方案` into the conversation timeline. Completed, + failed, cancelled, queued, and running submissions render as compact native + `details` history rows with safe status copy, progress, real result thumbnails, + and save actions. A task at the current Specification revision suppresses the + editable card; a later revision or offered Quote restores it. +- Made the creator-facing `content.concept` projection a directly editable + `创作提示词`. Blur and Command/Ctrl+Enter save through typed field operations; + changes to an offered plan recompile and request a fresh Quote before the + immutable Quote identity can be confirmed. +- Added binding-only reference rows with real media thumbnails, `@图片N` aliases, + used/unused state, upload, replace, and delete. Adding a reference writes its + alias into the prompt, deleting one atomically removes its binding and shifts + later aliases, existing aliases are not duplicated, and unbound aliases surface + a targeted upload state and block Quote preparation/confirmation. +- Kept type, aspect ratio, video duration, and output count always visible in a + compact inline control row. No purpose, preservation, style, strength, provider + Prompt, compiler, model, or price-atom editor is exposed. +- Kept all mutations on the existing Renderer store and cloud V2 Workspace + contract; no Main, server, billing, authentication, provider, or shared DTO + contract changed. Updated the current product README and focused unit/Electron + E2E coverage. + +## Verification + +- Inspected the live reference-project states with the Codex in-app browser from + a local Next development server. Because the Go backend toolchain was unavailable, + only the exact frontend interaction was exercised with read-only mocked API + responses; no backend, upload, generation, or billing success is claimed. +- Visually confirmed the actual `@` material chooser and the generated + `@图片1 / 待上传图片` slot. Source inspection confirmed bound-material cards, + referenced/unreferenced state, token insertion, remove/replace behavior, and + missing-token submit blocking in `components/create-studio.tsx` and + `lib/prompt/*`. +- Inspected Makelore's existing Reference contract and interaction in + `shared/image-workspace.ts`, `YouthCreationCard.tsx`, `FineTuneDrawer.tsx`, and + `DesignProductionPanel.tsx`. +- Generated and visually inspected the revised preview: + `/Users/inmanx/.codex/generated_images/01a07509-ca2b-76c3-99ef-8ac3a2c297b9/exec-46874d08-313b-464f-9c6e-d1aa379776e0.png`. +- Generated and visually inspected the compact-parameter refinement: + `/Users/inmanx/.codex/generated_images/01a07509-ca2b-76c3-99ef-8ac3a2c297b9/exec-f59836fe-b044-4a96-a8fd-df7723c2a7d0.png`. +- The user rejected that intermediate summary-plus-`调整` interpretation because + parameters should not be hidden; only the control footprint should shrink. +- Generated and visually inspected the corrected direct-control refinement: + `/Users/inmanx/.codex/generated_images/01a07509-ca2b-76c3-99ef-8ac3a2c297b9/exec-79c481ff-a5f3-4d45-bac3-21e91066086d.png`. +- Confirmed that the corrected frame keeps type, aspect ratio, duration, and count + immediately editable; removes the `调整` affordance and hidden editor; uses + compact selects/steppers with limited padding; preserves the editable prompt + and reference binding as the dominant content; keeps Works full-height on the + right; and retains exactly one orange primary action. +- Generated and visually inspected the reference-row simplification: + `/Users/inmanx/.codex/generated_images/01a07509-ca2b-76c3-99ef-8ac3a2c297b9/exec-5330c387-e4eb-48c6-a289-8cf0be448c86.png`. +- Confirmed that the final prompt is now the only visible place describing how + `@图片1` affects generation, while the reference row exposes only binding and + file-management state. No role, preserve, style, weight, or strength control + remains, and all previously selected layout constraints are preserved. +- Confirmed the preview retains the selected layout and makes the visible + token-to-thumbnail relationship and replacement affordances legible without + adding a new permanent panel or a second instruction source. +- Implementation Design QA compared the selected source and two native CUA + implementation states in one combined image. The first pass found a P2 lifecycle + mismatch: an old succeeded task caused a current offered plan to show `已完成`. + Status precedence and readiness copy were fixed; the second pass had no + remaining P0/P1/P2 finding. See `design-qa.md` (`final result: passed`). +- `pnpm run typecheck`: passed after the final source changes. +- `pnpm run lint:check`: passed with five pre-existing warnings in Home and + Makelore pages; no errors and no warning in changed files. +- Focused Vitest: 5 files / 50 tests passed after the final shell/title-bar revision; + the final reference-token/card run passed 2 files / 17 tests, including + unbound-token blocking and no-duplicate binding. +- `pnpm run build:vite`: passed after the final source changes. Existing dynamic + import and large-chunk warnings remain unchanged. +- Full `pnpm test -- --run`: 220 files / 1846 tests passed, 3 skipped; 2 unrelated + Pi suites failed because the fresh worktree lacks the top-level + `node_modules/@earendil-works/pi-ai` link even though the package exists in the + pnpm store. The six failing real-process tests and one import failure do not + touch Canvas code. +- Electron E2E was updated for the right rail, compact responsive Sheet, inline + prompt/parameters, Quote confirmation, and history collapse. It was not run in + this turn because Product Design browser policy requires an explicitly selected + browser before invoking Playwright CLI; TypeScript and ESLint validated the spec. + +## Follow-ups + +- If the service adds a stable Workspace-summary cover field, use it to replace + the intentional generic icon fallback for non-current right-rail items. +- If the service adds reference-count/media capabilities, project those limits + into the add/upload affordance without introducing a client constant. +- A future service contract may formalize the creator-facing prompt separately; + until then `content.concept` remains the public editable projection and the + provider Prompt remains private. +- Decide whether chat-attached images enter References automatically as proposals + or remain uploaded Assets until the user/AI explicitly inserts and binds their + prompt token; in either case the server reducer must remain authoritative. + +## Promotion Candidates + +- Target: ADR-007 presentation guidance, Canvas current-state documentation, the + shared Canvas contract, and generation-plan/reference-image interaction rules. + - Proposal: the active Canvas plan card combines the creator-facing final prompt + with its public Reference bindings. The editor displays youth-readable + `@图片N` aliases backed by stable server-owned Reference and Asset identities. + Typing `@` selects existing images or upload; unresolved aliases create + targeted missing-image slots and block Quote availability; bound references + expose only thumbnail, alias, filename, binding state, replace, and remove. + The final prompt is the sole creator-facing place that specifies how each + reference affects generation; the row must not duplicate purpose, + preservation, style, strength, weight, or other instructions. + Production parameters remain directly visible and editable in a compact + inline toolbar rather than equal-width selector cards or an on-demand editor. + Prompt, reference, or parameter edits produce a new Specification revision + and a new Quote. Confirmed revisions collapse into chronological task history. + The maximum reference count and media types are service capabilities rather + than client constants. Provider compilation remains private. + - Evidence: the user's explicit direction to borrow the pure-AIGC reference + interaction; inspected live states and source in `zhinianAIGC`; Makelore's + current Reference DTO/UI; ADR-007; and the inspected revised concept. + - Future impact: a future service may formalize token serialization and a + dedicated creator-facing prompt field, while keeping provider compilation + private. Future UI must not keep raw ordinal text as the binding authority, + permit confirmation with a missing token, duplicate reference + instructions outside the prompt, grow a competing permanent Asset column, + hide routine parameters behind disclosure, or restore high-whitespace + parameter cards to the settled plan. + - Semantic conflicts: the current public Reference DTO includes role, preserve, + adapt, and do-not-copy fields. Exposing those as separate editable controls + would conflict with the user's confirmed single-source interaction. The + implementation preserves these existing values for service compatibility but + does not expose them as a second creator-facing authority; any future contract + revision should make their derived status explicit. + Client-only token parsing as semantic authority or exposure of provider Prompt + would still conflict with ADR-007 and is explicitly rejected. The shipped UI + uses aliases only as creator-facing display while stable Reference/Asset ids + remain in the existing Specification operations. + - Human confirmation: the user explicitly confirmed implementation of the + right Works rail, inline plan, editable final prompt, compact direct parameters, + and binding-only reference row. Any future public contract change still needs + coordinated product/service review. diff --git a/README.md b/README.md index 364c5ae..72570e0 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Makelore 是一个面向软件、视觉创作与智能机器人的 AI 桌面工作台。当前版本为 `2.0.0`，包含三个已开通产品模块。模块入口页采用统一的横向卡片视觉，工作区左上角入口点击后返回模块入口页： - `Makelore Code｜AI 编程`：管理本地项目、项目智能体、对话、文件上下文、代码变更和运行时。 -- `Makelore Canvas｜AI 绘画`：每个设计项目（Workspace）维护一份从创建起就存在的 Living Form。用户通过对话或直接编辑持续完善同一设计方向，再生成图片、单参考图作品或视频；参考素材可从当前项目作品选择或从本地上传。Canvas 侧栏提供“获取灵感”，进入服务端驱动的提示词博物馆。 +- `Makelore Canvas｜AI 绘画`：每个设计项目（Workspace）维护一份从创建起就存在的 Living Form。用户先在中央对话时间线中让 AI 帮助描绘想法，再直接编辑同一时间线内的制作方案；右侧全高作品栏负责新建、切换和管理 Workspace，并提供“获取灵感”入口。参考图从本地上传后以 `@图片N` 绑定，具体用法只写在创作提示词中。 - `Makelore Robot｜AI 机器`：管理机器人智能体、设备激活绑定、智能体配置与设备分配；机器人工作台的智能体位于 Robot 全局侧栏，选中后在内容区先查看绑定设备、再查看基础设置，当前智能体通过 URL 参数保持可分享选择；绑定设备时默认先选择“引导配网”或“已有激活码”。在 Windows 与 macOS 的引导路径中，Makelore 可在弹窗内扫描并连接附近开放的 `Xiaozhi-*` 配网热点，失败时仍可通过系统 Wi-Fi 手动连接；后续继续复用机器人现有热点配网页面，不修改固件，也不由 Makelore 接收 Wi-Fi 密码。 应用启动默认进入 AI 模块入口选择页。入口页可在未登录状态浏览；未登录用户点击已开通模块时进入客户端原生登录页，可使用账号密码或手机号短信验证码登录。密码登录可选“记住密码”：正式安装包仅由 Electron Main 使用系统受保护凭据存储加密保存和回填账号密码，不写入 Renderer 持久状态，未打包开发版或系统安全存储不可用时禁用该选项。登录请求由 Renderer 经 Host API 交给 Electron Main，再由 Main 调用 Works Square；成功后回到入口选择页。已登录时，Electron Main 会从 Works Square `/api/auth/me` 读取当前账号，只向 Renderer 投影用户名、账号/租户/部门标识、权限名列表与三个模块布尔开关，不透传上游资料或凭据。工作区门禁同时要求有效 Token 和完整用户身份；旧状态缺失身份时会先尝试从 Main 恢复，仍无法确认则清除残留会话并返回登录页。被管理员关闭的模块会在入口页置灰且无法点击，直接访问其工作区路径也会返回入口页。旧服务端未返回策略或缺少单项字段时默认开放；这个客户端门禁不替代服务端 API 授权。 @@ -25,10 +25,10 @@ Makelore 是一个面向软件、视觉创作与智能机器人的 AI 桌面工 - 客户端更新：Electron Main 按平台与架构选择更新源并保留原始诊断；设置页只显示一条脱敏后的中文状态。正式源缺少对应安装包时保持错误并允许重试，不会误报为已是最新版。 - 个人资料：姓名、年龄、性别与个人头像按账号同步到云端；首次登录进入模块选择页时会要求先完善姓名，首页欢迎语和主平台左下角账号区优先展示个人资料姓名；头像支持 PNG、JPEG、WebP，保存时自动居中裁剪并以圆形缩略图展示，未设置或加载失败时回退为姓名首字母。 - 会话观察同步：本地编程会话在一轮问答完成并进入空闲后，后台通过个人资料 PUT 上传该会话截至当前的完整问答快照；只保留用户/助手自然语言文本，过滤代码、路径、日志、工具调用、附件与产物。同步只从本地上行，云端不回写、不恢复或删除本地会话；失败数据留在本地等待重试。 -- AI 绘画：一个 Workspace 固定对应一个设计方向、一条 Agent Session 和一份持久 Living Form。左侧对话时间线与右侧表单不是两套状态：聊天提取、Agent 建议、用户直接编辑、建议采纳和字段锁定都提交到同一个服务端 reducer，并由方向版本、字段来源和决策状态形成权威投影。数组型规格按完整集合原子替换，图片与视频字段按当前媒介渐进展示。 -- AI 绘画生成：服务端从已确认规格编译专业图片或视频指令并返回不可变 Quote；客户端只展示媒介、画幅、数量、格式、时长、警告和设计点，不展示或改写供应商 Prompt、模型、价格原子或存储地址。确认时只提交 Quote 身份。图片可使用当前 Workspace 的上传素材或生成作品，视频可绑定已审核首帧；任务与资产始终属于 Workspace。 +- AI 绘画：一个 Workspace 固定对应一个设计方向、一条 Agent Session 和一份持久 Living Form。对话与当前制作方案位于同一中央时间线，不是两套状态：聊天提取、用户修改创作提示词和制作参数都提交到同一个服务端 reducer，并由方向版本、字段来源和决策状态形成权威投影。创作提示词是公开规格 `content.concept` 的可编辑投影；媒介、画幅、时长和数量始终以紧凑控件直接显示，不用折叠面板隐藏。 +- AI 绘画生成：服务端从当前规格编译专业图片或视频指令并返回不可变 Quote；客户端只展示创作提示词、参考图绑定、媒介、画幅、数量、格式、时长、警告和设计点，不展示或改写供应商 Prompt、模型、价格原子或存储地址。修改方案会先提交规格并重新核价，确认时只提交 Quote 身份；确认后的方案不再常驻，而是进入时间线中的可展开制作记录。参考图行只负责缩略图、`@图片N` 状态、替换和删除，保留什么、改变什么等语义统一由创作提示词表达。任务与资产始终属于 Workspace。 - AI 绘画健壮性：Renderer 为每次命令生成稳定 operation id，网络结果未知时保留原命令供原样重试，不把未知写入当失败或创建第二次生成。Main 负责 Token 刷新、Agent Gateway REST 提交和有界 Run 查询，并将可恢复事件流投影为 Host API SSE；断线后按事件游标续接并重新读取权威 Workspace。Canvas 只使用 Works Square 云端 V2 契约，没有本地语义适配器或降级路径，上游不可用时明确报错。 -- AI 绘画项目栏只展示 Workspace，不再在项目下创建独立设计会话。删除时必须完整输入项目名称；删除后项目、Living Form、任务、参考图和生成作品会从账户中隐藏且无法访问，不影响用户已另存到磁盘的副本。删除当前项目后自动打开最近更新的剩余项目，删除最后一个项目后进入空状态。 +- AI 绘画右侧全高作品栏只展示 Workspace，不再在项目下创建独立设计会话。删除时必须完整输入项目名称；删除后项目、Living Form、任务、参考图和生成作品会从账户中隐藏且无法访问，不影响用户已另存到磁盘的副本。删除当前项目后自动打开最近更新的剩余项目，删除最后一个项目后进入空状态。 - 项目插件设置：Code 侧栏不再单列“插件”；配置 Agent、Skill、模型与知识的项目配置页内提供“插件”卡片，并在同页宽抽屉中投影官方目录、账号 Library、本机 Device Packages 与当前项目状态。深链使用 `/project-config/plugins` 打开该项目页抽屉；旧 `/plugins`、Marketplace、My Plugins、Project Plugins URL 只做保留查询条件的确定性重定向。来源身份保持 `official:`、`local:`、`retained:` 分离；“免费获取”、官方设备交付、项目启用和伙伴分配仍分别写入既有 authority，不会自动推进下一步。任一来源失败不会清空其他来源；本机 Skill/Pi 插件仍只能通过对话安装，页面只管理已安装包并明确其本机全局生效范围。 - 官方插件运行架构：Renderer 只调用 Main-owned Marketplace facade；Main 负责账号、请求 deadline、签名/摘要校验、不可变 Release、current selection 与原子回滚。Pi parent worker 使用冻结的 effective snapshot，将每个有效 Skill 与已验证 Package Store root 成对传给 resource loader、Extension Host 和 CLI；普通 `skill_only` 下载包不依赖运行时 Policy，也不得携带可执行脚本。Project Scaffold 的 `.mjs` 是代码所有的 bundled 例外，只能从签名客户端固定资源根通过应用自带 Node 执行，不能扩展为 Marketplace 下载 artifact 的脚本权限。正式激活仍等待官方 Ed25519 公钥（production key activation HOLD）；生产私钥只能来自部署 secret，测试使用注入的临时密钥。 - 原生 Web Search 是冻结 selected model/provider/credential 的 parent-only 模型工具；只有 Works `model_capabilities` 明确声明支持时才出现，使用当前模型的正常计费链，不依赖 Marketplace 获取、Release、Admission、Hosted Provider 或 `agent_browser` 回退。 diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx index 55b3837..113d0b8 100644 --- a/src/components/layout/MainLayout.tsx +++ b/src/components/layout/MainLayout.tsx @@ -27,6 +27,7 @@ export function MainLayout() { const activeModule = getAiModuleForPath(location.pathname); const isPaintingModule = activeModule === 'painting'; const isPromptMuseum = location.pathname === '/image-prompts' || location.pathname.startsWith('/image-prompts/'); + const isCanvasWorkspace = location.pathname === '/image-canvas'; const isChatWorkspace = location.pathname === '/chat'; const handleSidebarPeekChange = useCallback((open: boolean, source: SidebarPeekSource) => { @@ -79,6 +80,7 @@ export function MainLayout() { integrated workspaceLayout={isChatWorkspace} overlay={isPaintingModule && !isPromptMuseum} + showSidebarControls={!isCanvasWorkspace} pageTitle={isPromptMuseum ? '获取灵感' : undefined} sidebarPeekOpen={sidebarPeekOpen} onSidebarPeekChange={handleSidebarPeekChange} @@ -86,11 +88,13 @@ export function MainLayout() { {/* Below the title bar: sidebar + content */}
- + {!isCanvasWorkspace ? ( + + ) : null}
; + return ; } // Linux keeps the native frame/title bar for better IME compatibility. @@ -41,13 +42,14 @@ export function TitleBar({ integrated = false, workspaceLayout = false, overlay return null; } - return ; + return ; } function ProductTitleBar({ integrated, workspaceLayout = false, overlay = false, + showSidebarControls = true, pageTitle, children, windowControlsWidth = 0, @@ -58,6 +60,7 @@ function ProductTitleBar({ integrated: boolean; workspaceLayout?: boolean; overlay?: boolean; + showSidebarControls?: boolean; pageTitle?: string; children?: React.ReactNode; windowControlsWidth?: number; @@ -150,7 +153,7 @@ function ProductTitleBar({ integrated && !overlay && sidebarTitlebarHidden && !workspaceLayout && 'border-b border-border/80', )} > - {integrated ? ( + {integrated && showSidebarControls ? ( <>
& { integrated: boolean }) { +function WindowsTitleBar({ integrated, workspaceLayout, overlay, showSidebarControls, pageTitle, sidebarPeekOpen, onSidebarPeekChange }: Omit & { integrated: boolean }) { const [maximized, setMaximized] = useState(false); useEffect(() => { @@ -267,6 +270,7 @@ function WindowsTitleBar({ integrated, workspaceLayout, overlay, pageTitle, side integrated={integrated} workspaceLayout={workspaceLayout} overlay={overlay} + showSidebarControls={showSidebarControls} pageTitle={pageTitle} windowControlsWidth={WINDOWS_TITLEBAR_CONTROLS_WIDTH} sidebarPeekOpen={sidebarPeekOpen} diff --git a/src/pages/ImageCanvas/DesignAssetThumbnail.tsx b/src/pages/ImageCanvas/DesignAssetThumbnail.tsx new file mode 100644 index 0000000..10eb9cf --- /dev/null +++ b/src/pages/ImageCanvas/DesignAssetThumbnail.tsx @@ -0,0 +1,76 @@ +import { useEffect, useState } from 'react'; +import { Film, ImageIcon } from 'lucide-react'; +import { resolveImageWorkspaceAssetUrl } from '@/lib/image-workspace'; +import { cn } from '@/lib/utils'; +import type { DesignAsset } from '../../../shared/image-workspace'; + +export function DesignAssetThumbnail({ + asset, + className, + alt, +}: { + asset: DesignAsset | null; + className?: string; + alt?: string; +}) { + const [resolution, setResolution] = useState<{ + contentPath: string | null; + source: string | null; + failed: boolean; + }>({ contentPath: asset?.contentPath ?? null, source: null, failed: false }); + const currentResolution = resolution.contentPath === (asset?.contentPath ?? null) + ? resolution + : { contentPath: asset?.contentPath ?? null, source: null, failed: false }; + + useEffect(() => { + if (!asset) return; + let active = true; + void resolveImageWorkspaceAssetUrl(asset.contentPath) + .then((url) => { + if (active) setResolution({ contentPath: asset.contentPath, source: url, failed: false }); + }) + .catch(() => { + if (active) setResolution({ contentPath: asset.contentPath, source: null, failed: true }); + }); + return () => { + active = false; + }; + }, [asset]); + + if (!asset || !currentResolution.source || currentResolution.failed) { + return ( + + ); + } + + if (asset.mediaType === 'video') { + return ( +