fix(ui): 文件预览遮罩改整屏、消除"上暗下亮"割裂——输入区上浮为悬浮活动条继续可用(bump 0.58.43)
旧实现用 #file-preview-modal { bottom: --preview-bottom-inset } 把遮罩顶到
chat-form 之上以便边看边打字,代价是底部整条(输入区+左栏入口+右栏+状态)
全不压暗,与上方压暗区形成硬边界的通亮带,视觉割裂。
改为遮罩铺满整屏(bottom → padding-bottom,仍让居中卡片停在输入区之上不遮挡),
底部随整屏统一压暗;仅 chat-form 由新 body.fp-open 类 position:relative;z-index:95
(压过遮罩 z90;#app/#pane-mid 均不建层叠上下文,已核)+ 上向阴影上浮为
"悬浮活动条",继续可打字。预览时点左栏/右栏/状态落到遮罩=关预览,符合
"背景不可用"预期。改 dev.html + preview.js(open/close 加/去 fp-open)。
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
20c7512370
commit
9c39d0ba42
|
|
@ -5,6 +5,10 @@
|
|||
> 所以不是每个版本号都有条目。条目格式 `## <版本> — <日期>`,新条目加在最上面。
|
||||
> 工程口径的完整记录见 `PROGRESS.md` / git log。
|
||||
|
||||
## 0.58.43 — 2026-07-19
|
||||
|
||||
- 优化文件预览的观感:打开预览时整个页面背景统一压暗,不再出现"上半屏变暗、底部输入区一条通亮"的割裂感;底部输入框依然悬浮可用,可以边看文件边打字。
|
||||
|
||||
## 0.58.42 — 2026-07-19
|
||||
|
||||
- 提示和确认弹框换新样式:重命名、删除、清空、解绑等操作的确认框,以及各类操作提示,不再用浏览器那种顶部灰框,改为和「修改密码」一致的页内弹框;成功/失败提示改为页面顶部轻提示,几秒后自动消失。
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
> 配合 `DESIGN.md`。本文件只记 phase 状态、决策偏差、文件量、下一步。每条 1-2 句:做了啥 + 关键判断;细节查 `git log` / `git diff` / `DESIGN §7.9`。
|
||||
|
||||
最后更新:2026-07-19(页内弹框替代原生 alert/confirm/prompt,新增 dialog.js,bump 0.58.42)
|
||||
最后更新:2026-07-19(文件预览遮罩改整屏、消除"上暗下亮"割裂,bump 0.58.43)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
### 2026-07
|
||||
|
||||
- **07-19 / 0.58.43**:文件预览遮罩改整屏、消除"上暗下亮"割裂——旧实现用 `#file-preview-modal { bottom: var(--preview-bottom-inset) }` 把遮罩顶到 chat-form 之上,好让预览时能边看边打字,代价是底部整条(输入区+左栏入口+右栏+状态)全不压暗,与上方压暗区形成一条硬边界的通亮带,很割裂。改为遮罩铺满整屏(`bottom`→`padding-bottom`,仍让居中卡片停在输入区之上不遮挡),底部随整屏统一压暗;仅 chat-form 由新 `body.fp-open` 类 `position:relative;z-index:95`(压过遮罩 z90,层叠上下文已核:`#app`/`#pane-mid` 均不建 context)+ 上向阴影,上浮成"悬浮活动条",继续可打字。预览时左栏/右栏/状态点击落到遮罩=关预览(符合"背景不可用"预期)。改 `web/static/dev.html` + `web/static/js/preview.js`(open/close 加/去 `fp-open`)。
|
||||
- **07-19 / 0.58.42**:页内弹框替代原生 alert/confirm/prompt——用户反馈原生浏览器弹框(顶部丑框)应改成页内样式,且区分两类(对标 Element `dialog`/`message`)。新增 `web/static/js/dialog.js`:`dialogConfirm`/`dialogPrompt`(遮罩+卡片 modal,复用改密码那套头/体/脚布局,Promise 化以一比一替换同步的 `confirm`/`prompt`,Esc/点遮罩=取消、Enter=确认、danger 变体红键)+ `message`(顶部居中轻量 toast,success/error/info 三态,自动消失、点即消)。dev.html 加 `#app-dialog` 容器 + `#app-messages` toast + 对应 CSS。全量替换主应用 8 文件调用点(chat/files/crons/procs/wechat/skills/media/auth,共 30 处);`admin.js`(独立 admin-only 页、独立 `<style>`、无 CSS 变量)刻意保留原生 alert 避免缺样式。纯前端加法,不动后端/接口。
|
||||
- **07-18 / 0.58.41**:任务改名 UI——后端 `PATCH /v1/tasks/{id}` 早支持 `name`(validate_task_name 校验)但前端无入口;`taskMenuItems` 加「重命名」项(列表行 ⋯ 与顶栏 ⋯ 共用此菜单,一处插入两处生效),`renameTask()` 走 prompt→PATCH→更 `state.tasksById`/`taskMeta.name` + `renderChatMeta()` + `loadTaskList()` 全同步。刻意只改 DB 显示名,不动 working_dir/磁盘宪法文件(定位锚是 task_id/short_id,name 设计为自由可变标签)。仅改 `web/static/js/chat.js`。
|
||||
- **07-18 / 0.58.39**:JWT 滑动续签——活跃用户临期(剩余寿命 < TTL 1/4,env `ZCBOT_JWT_REFRESH_THRESHOLD_SECONDS` 可调、0 关)由 `_authenticate` 中间件就地重签发新 token 走响应头 `X-Refreshed-Token`/`X-Token-Expires-At`,前端 `api()` 无感吸收换 `state.token`,不再因 7d TTL 掉线。additive 惠及 platform 层 + SPA(不认退回原重登行为);CORS 加 `expose_headers`。
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
# zcbot 版本号单一事实源:web/app.py 的 FastAPI version、/healthz 返回、前端展示都引这里。
|
||||
# 改版本只动这一行。
|
||||
__version__ = "0.58.42"
|
||||
__version__ = "0.58.43"
|
||||
|
|
|
|||
|
|
@ -1146,10 +1146,18 @@
|
|||
#new-task-modal .actions { margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end; }
|
||||
|
||||
/* ───── file preview modal(略深的遮罩 0.5 + 更重阴影) ─────
|
||||
bottom 让出 chat-form 高度(--preview-bottom-inset 由 JS 按需写),输入区不被遮挡,可继续打字 */
|
||||
遮罩铺满整屏(含底部),避免"上暗下亮"的割裂;padding-bottom 让出 chat-form 高度
|
||||
(--preview-bottom-inset 由 JS 按需写),使居中卡片停在输入区之上、不遮挡输入区。
|
||||
输入区本身由 body.fp-open 抬到遮罩之上继续可用(见下方 #chat-form 规则)。 */
|
||||
#file-preview-modal {
|
||||
background: rgba(0,0,0,0.5); z-index: 90;
|
||||
bottom: var(--preview-bottom-inset, 0);
|
||||
padding-bottom: var(--preview-bottom-inset, 0);
|
||||
}
|
||||
/* 预览开启时:仅把输入区上浮成遮罩之上的"悬浮活动条"(实底 + 上向阴影),
|
||||
其余底部区域(左栏入口 / 右栏 / 状态)随整屏遮罩统一压暗,不再是一条通亮的带。 */
|
||||
body.fp-open #chat-form {
|
||||
position: relative; z-index: 95;
|
||||
box-shadow: 0 -10px 28px rgba(0,0,0,.22);
|
||||
}
|
||||
#file-preview-modal .card {
|
||||
width: 90vw; height: 90vh; max-width: 1200px;
|
||||
|
|
|
|||
|
|
@ -189,6 +189,8 @@ export async function openFilePreview(rel) {
|
|||
const inset = (cf && cf.offsetParent) ? cf.offsetHeight : 0;
|
||||
$("file-preview-modal").style.setProperty("--preview-bottom-inset", inset + "px");
|
||||
$("file-preview-modal").classList.add("show");
|
||||
// 遮罩铺满整屏后,把输入区抬到遮罩之上继续可用(CSS body.fp-open #chat-form)
|
||||
document.body.classList.add("fp-open");
|
||||
|
||||
const cat = _categorize(rel);
|
||||
// pptx/ppt:后端转 PDF 再复用现成 PDF iframe(非下载原文件),首次稍候 + 失败回退下载。
|
||||
|
|
@ -399,6 +401,7 @@ function _showFallback(msg) {
|
|||
|
||||
export function closeFilePreview() {
|
||||
$("file-preview-modal").classList.remove("show");
|
||||
document.body.classList.remove("fp-open");
|
||||
$("file-preview-modal").style.removeProperty("--preview-bottom-inset");
|
||||
_clearZoom($("fp-body"));
|
||||
$("fp-body").innerHTML = "";
|
||||
|
|
|
|||
Loading…
Reference in New Issue