diff --git a/PROGRESS.md b/PROGRESS.md index a093b75..1b3723f 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -2,7 +2,7 @@ > 配合 `DESIGN.md`。本文件只记 phase 状态、决策偏差、文件量、下一步。每条 1-2 句:做了啥 + 关键判断;细节查 `git log` / `git diff` / `DESIGN §7.9`。 -最后更新:2026-05-25(dev SPA 三栏支持右栏折叠 + 拖拽调宽) +最后更新:2026-05-25(dev SPA 粘贴上传文件显示可预览 chip) --- @@ -23,6 +23,7 @@ ### 2026-05-25 +- **dev SPA Ctrl+V 粘贴上传反馈改成可预览 chip**:`web/static/dev.html` `uploadFiles()` 成功时返回 `/v1/files/upload` 的 `saved[]` 元数据,粘贴文件后 `#chat-hint` 显示"已粘贴" + `.art-chip` 文件 chip + "可在右侧文件处查看",不再 4s 自动消失,下一次发送时由原有"发送中…"状态覆盖。chip 点击复用 `openFilePreview`;若主文件预览框已打开,改开新增的 `#mini-preview-modal` 小预览窗(支持 image/video/pdf/text/md,其它格式给下载兜底),避免覆盖用户当前正在看的主预览。`DESIGN.md` 不动(纯 dev SPA 交互);`RUN.md` 不动(运行方式无变化)。 - **dev SPA 三栏支持右文件栏折叠 + 左右分隔线拖拽调宽**:`web/static/dev.html` 主布局从 3 列 grid 改为 5 列 grid(任务栏 / 左 splitter / 对话栏 / 右 splitter / 文件栏),新增 `#split-left` / `#split-right` 两条 6px 拖拽分隔线,拖动时分别调整 `--left-pane-width` / `--right-pane-width` 并持久化到 localStorage(`zcbot.left-width` / `zcbot.right-width`)。右侧文件栏新增 `#pane-toggle-right`,折叠态复用左栏 rail 范式:列宽 40px,只保留展开按钮,状态持久化到 `zcbot.right-collapsed`;手机端继续走三 tab 单列,隐藏折叠按钮和 splitter,避免与移动端导航冲突。`DESIGN.md` 不动(纯 dev SPA 布局交互);`RUN.md` 不动(运行方式无变化)。 - **dev SPA 右侧文件列表长名称 hover 显示全路径**:`web/static/dev.html` 在右 pane 文件行 `.file-row .name` 和"选入…"源文件列表 `.sp-row .sp-name` 上补 `title`,内容取 `e.rel || e.name`,保留现有 ellipsis 截断视觉,鼠标悬停可看完整相对路径/名称。`DESIGN.md` 不动(无架构/心智模型变化);`RUN.md` 不动(运行方式无变化)。 - **dev SPA 左侧滚动条只覆盖 task 列表**:`web/static/dev.html` 左 pane 改成 flex column,顶部 4 行 pane-head(任务标题/新建/搜索筛选/排序)固定不参与滚动;`#task-list` 与 `#task-sentinel` 包进 `#task-scroll`,并把 IntersectionObserver root 从 `#pane-left` 改到 `#task-scroll`,保证无限滚动仍按列表区域触发。`DESIGN.md` 不动(无架构/心智模型变化);`RUN.md` 不动(运行方式无变化)。 diff --git a/web/static/dev.html b/web/static/dev.html index 3166953..6d7b618 100644 --- a/web/static/dev.html +++ b/web/static/dev.html @@ -421,6 +421,7 @@ } .art-chip::before { content: "📄"; font-size: 11px; } .art-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } + #chat-hint .art-chip { margin: 0 2px; vertical-align: middle; font-family: var(--mono); } /* 内联图片/视频:产物 chip 替代,fetch 完直接展示 */ .art-media { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; @@ -572,6 +573,33 @@ #file-preview-modal .body .xlsx-sheet td, #file-preview-modal .body .xlsx-sheet th { border: 1px solid var(--border); padding: 4px 8px; white-space: nowrap; } + #mini-preview-modal { background: rgba(0,0,0,0.18); z-index: 96; align-items: flex-start; justify-content: flex-end; padding: 56px 18px 0 0; } + #mini-preview-modal .card { + width: min(520px, 92vw); height: min(420px, 72vh); + display: flex; flex-direction: column; + box-shadow: var(--shadow-card); + } + #mini-preview-modal .hdr { + display: flex; align-items: center; gap: 8px; + padding: 7px 10px; border-bottom: 1px solid var(--border); + } + #mini-preview-modal .hdr .name { + flex: 1; font-weight: 500; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; + } + #mini-preview-modal .body { flex: 1; overflow: auto; padding: 10px; } + #mini-preview-modal .body.center { display: flex; align-items: center; justify-content: center; } + #mini-preview-modal .body .ph { color: var(--muted); font-size: 12px; text-align: center; } + #mini-preview-modal .body img.preview-img, + #mini-preview-modal .body video.preview-video { + max-width: 100%; max-height: 100%; display: block; margin: 0 auto; + } + #mini-preview-modal .body iframe.preview-frame { width: 100%; height: 100%; border: 0; } + #mini-preview-modal .body pre.preview-text { + margin: 0; padding: 8px; background: var(--code-bg); + border-radius: var(--r-md); white-space: pre-wrap; word-break: break-word; + font-family: var(--mono); font-size: 12px; line-height: 1.5; + } .small { font-size: 12px; } .muted { color: var(--muted); } @@ -943,6 +971,19 @@ + + +