小优化,产品愿景,视觉规范,交互和导航大版本

This commit is contained in:
Nostars Developer
2026-04-16 18:11:35 +08:00
parent 5878f7d9f4
commit 10f9c0061a
51 changed files with 5010 additions and 847 deletions

View File

@@ -4,6 +4,166 @@
## 记录
### [CL-20260416-1600] 2026-04-16 16:00 — 视觉风格从暗绿底全面转为白底青绿(绢本山水)
- **tags**: 前端, 视觉风格, 色彩体系, CSS变量, 白底, 千里江山图
- **affected_files**:
- art-agent/frontend/src/app/globals.css
- art-agent/frontend/src/app/page.tsx
- art-agent/frontend/src/app/login/page.tsx
- art-agent/frontend/src/app/gallery/page.tsx
- art-agent/frontend/src/components/chat/chat-messages.tsx
- art-agent/frontend/src/components/chat/chat-input.tsx
- art-agent/frontend/src/components/layout/top-nav.tsx
- art-agent/frontend/src/components/sidebar/sidebar.tsx
- art-agent/frontend/src/components/sidebar/session-list.tsx
- art-agent/frontend/src/components/profile-modal.tsx
- art-agent/frontend/src/components/detail/image-detail-panel.tsx
- art-agent/frontend/src/components/ui/ambient-particles.tsx
- docs/art-agent/VISUAL-STYLE-GUIDE.md
- **what**: 整个应用从暗色(墨绿黑 #0C1210)底色改为白色(绢本白 #FAFAF7)底色,文字改为墨黑(#1A1A1A),框体和光效保留千里江山图的蓝绿配色但色值加深适配白底
- **why**: 用户反馈当前风格"太偏绿了"。评估后认同——原版将背景、面板、文字全都带绿调,导致全屏绿色信息过载。千里江山图本身是青绿设色于白色绢本之上,白底才更贴近原画精髓
- **decisions**:
- 背景 #0C1210#FAFAF7(绢本微暖白),面板从绿底毛玻璃改为白色毛玻璃
- accent #4DB8A4#2E8B7A(加深以确保白底上对比度)
- 文字 #E0E8E2#1A1A1A(墨黑),次级文字 #7A9485#6B7B8A(灰蓝去绿调)
- 所有 rgba(77,184,164,...) 硬编码统一替换为 rgba(46,139,122,...)
- 云雾背景透明度大幅降低(白底上需要更淡才不会突兀)
- Logo 内部颜色从 #0C1210 改为 white石青底白字
- 保留所有动效系统(云烟缭绕、萤火粒子、水波纹等),仅调整颜色参数
- **notes**:
- surface-1/2/3 从深色半透明改为白色半透明,阴影也从重阴影改为轻阴影
- 网格底纹 opacity 从 0.03 降为 0.018
- VISUAL-STYLE-GUIDE.md 文档同步重写
- **source_chat**: [白底青绿视觉风格改造]
### [CL-20260416-1500] 2026-04-16 15:00 — UX风格指南实现度补全接入涟漪/sendBounce/会话切换动画/Error飘散/全屏云雾加载/流式opacity阶梯等10项
- **tags**: 前端, UX补全, 动效, framer-motion, 微交互, 排版使用, 实现状态文档
- **affected_files**:
- art-agent/frontend/src/components/chat/chat-input.tsx
- art-agent/frontend/src/components/chat/chat-messages.tsx
- art-agent/frontend/src/components/chat/image-grid.tsx
- art-agent/frontend/src/components/ui/motion-presets.ts
- art-agent/frontend/src/app/page.tsx
- art-agent/frontend/src/app/login/page.tsx
- art-agent/frontend/src/app/gallery/page.tsx
- art-agent/frontend/src/app/globals.css
- art-agent/frontend/src/lib/app-context.tsx
- art-agent/frontend/src/components/sidebar/sidebar.tsx
- art-agent/frontend/src/components/profile-modal.tsx
- docs/art-agent/UX-STYLE-GUIDE.md
- **what**: 补全 UX-STYLE-GUIDE.md 中描述但未实现的 10 项特性,并在文档中标注每项实现状态
- **why**: 分析发现风格指南完成度约 65-70%,多项微交互只写了文档描述或代码定义了但未接入业务
- **decisions**: 对每项未实现特性逐一补全代码,同时更新文档加入 ✅/🔶/⬜ 状态标记
- **notes**: 补全项包括:(1) ripple-effect.tsx 接入发送按钮 (2) sendBounce 替代 buttonTap (3) 会话切换 sessionSlide 滑入滑出 (4) Error errorFloat 飘散消失+4s自动清除 (5) 回到底部按钮水滴形 (6) 全屏加载改云雾凝聚 mist-loader (7) AI回复 StreamingLines 逐行 opacity 阶梯 (8) typo-h1/h2/strong 实际使用到组件 (9) 用户消息 .user-bubble 左上切角 (10) 图片占位 .stone-placeholder 石青渐变呼吸脉冲。文档每个 section 加入实现文件路径和状态标记。
### [CL-20260416-1330] 2026-04-16 13:30 — 交互体验全面升级:信息层级 + 科技质感 + 微交互趣味性
- **tags**: 前端, UX升级, 动效, framer-motion, 排版体系, 微交互, 视觉层级, 科技感, 粒子, 流光
- **affected_files**:
- art-agent/frontend/src/app/globals.css
- art-agent/frontend/src/app/page.tsx
- art-agent/frontend/src/app/login/page.tsx
- art-agent/frontend/src/app/gallery/page.tsx
- art-agent/frontend/src/components/chat/chat-messages.tsx
- art-agent/frontend/src/components/chat/chat-input.tsx
- art-agent/frontend/src/components/chat/image-grid.tsx
- art-agent/frontend/src/components/chat/model-selector.tsx
- art-agent/frontend/src/components/sidebar/sidebar.tsx
- art-agent/frontend/src/components/sidebar/session-list.tsx
- art-agent/frontend/src/components/layout/top-nav.tsx
- art-agent/frontend/src/components/detail/image-detail-panel.tsx
- art-agent/frontend/src/components/profile-modal.tsx
- art-agent/frontend/src/components/ui/motion-presets.ts (新建)
- art-agent/frontend/src/components/ui/ambient-particles.tsx (新建)
- art-agent/frontend/src/components/ui/data-stream.tsx (新建)
- art-agent/frontend/src/components/ui/ripple-effect.tsx (新建)
- art-agent/frontend/src/components/ui/firefly-burst.tsx (新建)
- docs/art-agent/UX-STYLE-GUIDE.md (新建)
- **what**: 四阶段全面升级交互体验:信息层级体系、科技质感注入、微交互趣味性、统一状态反馈
- **why**: 用户要求信息层级差异更突出、画面更高级典雅且具科技感、交互有巧思让使用心情愉悦
- **decisions**:
- 新增 framer-motion 作为动画引擎(~30KB gzipped不引入其他 UI 库
- 排版从 5 级扩展到 7 级Display 渐变文字 / H1 底部石青线 / H2 左侧竖线 / Body Strong 石青色 / Caption / Micro 大写加宽字间距CSS 工具类 `.typo-*`
- Surface 层级从 1 级扩展到 4 级Surface-0 背景 → Surface-3 弹窗),每级递增 backdrop-blur、border 亮度、box-shadow
- 背景网格底纹radial-gradient 点阵 opacity 0.03)从 body::before 实现,原云雾改为独立 DOM 元素 `.fog-layer-far/near`
- 环境粒子纯 CSS 实现15-28 个随机漂浮+闪烁的石青色小光点),空态时增多营造"未探索深山"感
- 数据流光(石青色 linear-gradient 横向流动 2pxAI 活动时出现在输入栏上方,生图时加速
- 用户消息改为右对齐渐变背景+右上切角,助手消息改为 surface-2 + 左侧 2px 石青竖线
- 消息入场动画:用户消息 translateY+scale spring助手消息 blur 消散(云雾凝聚)
- 发送按钮 whileTap scale 0.85,可发送时呼吸脉冲发光
- 输入框水面感应:焦点时底部 scaleX 扩展线 + box-shadow 随输入长度增强
- 收藏星标改为赭金色,点击时 5-7 个金色粒子向四周飘散(萤火点亮)
- 图片水墨晕染skeleton shimmer 占位 → clip-path circle 从中心扩展揭示
- Loading 从 bounce 圆点改为水波纹 scaleY 动画skeleton 用 shimmer 横向扫描
- 错误状态赭石红 + translateX 震动 2px × 4 次
- 空态使用 Display 级渐变文字 + stagger 入场动画
- 滚到底部按钮改圆形 + spring 弹入/退出
- 侧栏会话项 hover 时左侧 2px 竖线 slide-in
- 所有按钮 hover 添加 translateY(-1px) + shadow 加深浮起效果
- 所有弹出层改用 surface-3强模糊+明显阴影+更亮边框)
- 统一动画参数motion-presets.ts 定义 spring/springGentle、fadeIn/slideUp/mistReveal、messageEnter/assistantEnter、buttonTap/sendBounce、ripple/sparkle/inkReveal、staggerContainer/staggerItem
- **notes**:
- framer-motion 通过 npm install 添加3 个包),前端 bundle 增加约 30KB gzipped
- 环境粒子使用 CSS animation 而非 Canvas不影响性能
- 所有动画使用 transform/opacity/filter避免触发 layout
- body::before 原来用于云雾现改为点阵网格,云雾改为 AmbientParticles 组件内的 DOM 元素
- 构建验证通过next build 无错误First Load JS 增量约 50KBframer-motion
- **source_chat**: [交互体验全面升级](6b0e5860-9c5a-4b44-aa96-affba21e9472)
### [CL-20260416-1000] 2026-04-16 10:00 — 集成 Zero123++ 视角变换工具单图→6视角
- **tags**: 视角变换, Zero123++, Novel View Synthesis, 新工具, Replicate, 图片处理
- **affected_files**:
- art-agent/backend/app/config.py
- art-agent/backend/app/agent/tools.py
- art-agent/backend/app/agent/loop.py
- art-agent/backend/app/services/view_transform.py
- **what**: 新增 `transform_view` 工具,集成 Zero123++ 模型实现单图生成 6 个固定视角图片
- **why**: 用户需要将手绘建筑从侧面视角转为其他角度,视角变换是与生图完全不同的能力,需要独立工具
- **decisions**:
- 视角变换作为独立工具 `transform_view` 而非 `generate_image` 的扩展——输入不需要 prompt只需一张图
- 新增独立服务模块 `view_transform.py`,与 `image_gen.py` 分离——逻辑完全不同(无 prompt、grid 拆分)
-`config.py` 中新增 `VIEW_TRANSFORM_MODELS` 独立注册表——与 `IMAGE_MODELS` 分离,未来可扩展更多视角变换模型
- Zero123++ 输出为 3x2 grid 拼接图,用 Pillow 拆分为 6 张独立图片返回
- 进阶方案3D 重建 + ControlNet 风格还原 pipeline记录到延期方案 `[advanced-view-transform]`
- **notes**:
- Zero123++ 视角固定Azimuth: 30/90/150/210/270/330°, Elevation: 30/-20 交替),不支持自定义角度
- 手绘风格保持度可能不理想(模型偏向写实/3D 风格),需实际测试验证
- 输入图片需为正方形,建议 >= 320x320
- Replicate 上的模型 ID: `jd7h/zero123plusplus:c69c6559...`~$0.074/次,~76s
- loop.py 中对 `transform_view` 做了特殊结果处理(返回带视角信息的图片列表)
### [CL-20260416-0930] 2026-04-16 09:30 — 设备绑定配置与 Skill/Hooks 解耦local-env.json
- **tags**: 基础设施, local-env, 跨设备, hooks, project-launcher, Skill
- **affected_files**:
- .cursor/local-env.json
- .cursor/local-env.example.json
- .cursor/hooks.json
- .cursor/hooks/run-hook.ps1
- .cursor/hooks/session-init.sh
- .cursor/hooks/check-changelog.sh
- .cursor/hooks/README.md
- .cursor/rules/project/local-env-check.mdc
- .cursor/skills/project-launcher/SKILL.md
- .gitignore
- art-agent/ENVIRONMENT.md
- **what**: 将设备绑定的配置Node.js 路径、shell 类型)从 Skill 和 hooks 中解耦到 `.cursor/local-env.json`gitignored。project-launcher Skill 改为从 local-env.json 读取路径hooks 增加 run-hook.ps1 dispatcher + bash 版脚本支持跨平台;新增 local-env-check Rule 自动探测生成ENVIRONMENT.md 去除平台硬编码改为通用说明
- **why**: Node.js 路径和 shell 类型在不同设备上不同,硬编码在 Skill/hooks 中导致换机或跨平台时需要修改 git tracked 文件
- **decisions**: 采用 `.cursor/local-env.json`gitignored+ `.cursor/local-env.example.json`tracked 模板)的模式,类似 `.env` / `.env.example` 的惯例hooks.json 的跨平台靠为每个 hook 提供 .ps1 和 .sh 双版本
- **notes**: hooks.json 的 command 字段本身仍需按平台手动调整Windows 用 powershellmacOS/Linux 用 bash这是 Cursor hooks 机制的限制
- **source_chat**: [local-env 设备配置解耦]
### [CL-20260416-0900] 2026-04-16 09:00 — 环境依赖全面修复 + 统一环境文档
- **tags**: 环境, 依赖, Node.js, Python, venv, npm, requirements, ENVIRONMENT
- **affected_files**:
- art-agent/backend/requirements.txt
- art-agent/backend/requirements-lock.txt
- art-agent/ENVIRONMENT.md
- .cursor/skills/project-launcher/SKILL.md
- **what**: 排查并修复缺失的前后端依赖venv 和 node_modules 均不存在),安装 Node.js v22.15.0 到 %LOCALAPPDATA%\nodejs\,创建 Python venv 并安装全部后端依赖npm install 前端依赖requirements.txt 从范围版本更新为精确锁定版本;新增 requirements-lock.txt完整依赖树 61 个包)和 ENVIRONMENT.md 统一环境文档
- **why**: venv 和 node_modules 被 gitignore换机/重装后需要重新搭建;原 Node.js 安装已丢失requirements.txt 仅用 >= 范围无版本锁定
- **decisions**: Node.js 采用 zip 解压到 %LOCALAPPDATA% 而非 MSI 安装无管理员权限requirements.txt 直接锁定到当前精确版本而非继续用范围约束
- **notes**: project-launcher Skill 中的 Node.js 路径已同步更新为 %LOCALAPPDATA%\nodejs\
- **source_chat**: [环境依赖修复与文档生成]
### [CL-20260416-0830] 2026-04-16 08:30 — 生图按模型预处理 prompt官网/社区策略对齐)
- **tags**: 后端, 生图, prompt, SDXL, Flux, GPT Image, Gemini, Replicate, IP-Adapter, image_gen, Agent
- **affected_files**:

View File

@@ -2,6 +2,12 @@
最近 ~50 次改动的一句话概要,按时间倒序排列。每次会话自动注入上下文。
- [CL-20260416-1600] 视觉风格从暗绿底全面转为白底青绿(绢本山水):背景#FAFAF7+文字#1A1A1A+accent#2E8B7A13个文件颜色替换面板改白色毛玻璃云雾透明度降低VISUAL-STYLE-GUIDE.md重写
- [CL-20260416-1500] UX风格指南实现度补全涟漪/sendBounce/会话切换动画/Error飘散/云雾加载/流式opacity/排版类使用/左上切角/石青占位等10项全部落地文档每项标注✅状态+实现文件
- [CL-20260416-1330] 交互体验全面升级新增framer-motion动画引擎7级排版体系+4级Surface层级+网格底纹科技感,萤火粒子/数据流光/水墨晕染/投石入水/云雾凝聚/萤火点亮等微交互,用户/助手消息视觉拉开差距统一Loading/空态/Error状态全组件hover浮起+侧栏竖线+呼吸脉冲新增UX-STYLE-GUIDE.md文档
- [CL-20260416-1000] 集成Zero123++视角变换新增transform_view工具+view_transform.py服务单图输入生成6个固定视角图片grid拆分config.py新增VIEW_TRANSFORM_MODELS注册表loop.py特殊处理视角变换SSE事件进阶方案记入延期
- [CL-20260416-0930] 设备绑定配置解耦:新增.cursor/local-env.json(gitignored)存放nodejs_path和shellproject-launcher Skill和hooks改为读取该文件hooks增加bash版+dispatcher跨平台新增local-env-check Rule自动探测ENVIRONMENT.md去除硬编码
- [CL-20260416-0900] 环境依赖全面修复+统一环境文档安装Node.js v22.15.0+创建Python venv+安装全部前后端依赖requirements.txt锁定精确版本新增requirements-lock.txt和ENVIRONMENT.md更新project-launcher Skill路径
- [CL-20260416-0830] 生图按模型预处理 prompt新增 image_prompt_strategySDXL 默认负向词+---NEGATIVE---拆分Flux 剥粘贴的 Negative 段GPT/Gemini/IP-Adapter 规范化GenerateResult 带 effective_prompt/negative_promptReplicate SDXL 传 negative_prompt工具说明 SDXL 分隔符
- [CL-20260416-0810] 对话输入栏支持剪贴板粘贴图片为参考图ChatInput根容器onPasteCapture提取image/*文件并走startUploadplaceholder/title提示
- [CL-20260416-0745] Gemini原生生图延长读写超时+对RemoteProtocolError等可重试错误自动重试(默认3次指数退避)环境变量可微调VECTORENGINE_GEMINI_*_TIMEOUT

View File

@@ -3,6 +3,36 @@
最近 ~10 次改动的摘要记录,按时间倒序排列。
当 Agent 检测到当前任务与近期改动相关时自动读取。
### [CL-20260416-1600] 2026-04-16 — 视觉风格从暗绿底全面转为白底青绿(绢本山水)
- **tags**: 前端, 视觉风格, 色彩体系, CSS变量, 白底, 千里江山图
- **affected_files**: globals.css, page.tsx, login/page.tsx, gallery/page.tsx, chat-messages.tsx, chat-input.tsx, top-nav.tsx, sidebar.tsx, session-list.tsx, profile-modal.tsx, image-detail-panel.tsx, ambient-particles.tsx, VISUAL-STYLE-GUIDE.md
- **summary**: 背景从墨绿黑(#0C1210)改为绢本白(#FAFAF7),文字改为墨黑(#1A1A1A)accent色加深(#4DB8A4#2E8B7A)适配白底所有面板从深色毛玻璃改为白色毛玻璃13个文件中硬编码的旧rgba全部替换云雾/粒子透明度降低VISUAL-STYLE-GUIDE.md同步重写。设计理念千里江山图是青绿设色于绢本白底白底留白才能让青绿有呼吸感。
### [CL-20260416-1500] 2026-04-16 — UX 风格指南实现度补全10 项未实现特性 + 文档状态标注)
- **tags**: 前端, UX补全, 动效, framer-motion, 微交互, 文档
- **affected_files**: chat-input.tsx, chat-messages.tsx, image-grid.tsx, motion-presets.ts, page.tsx, login/page.tsx, gallery/page.tsx, globals.css, app-context.tsx, sidebar.tsx, profile-modal.tsx, UX-STYLE-GUIDE.md
- **summary**: 逐项分析 UX-STYLE-GUIDE.md 中所有特性的实现度(原 ~65%),补全 10 项未实现特性涟漪接入发送按钮、sendBounce 弹缩、会话切换滑入滑出动画、Error 飘散消失+自动清除、回到底部水滴形、全屏云雾凝聚加载、AI 回复逐行 opacity 阶梯、typo-h1/h2/strong 实际使用、用户消息左上切角、图片占位石青渐变呼吸脉冲。文档更新为每项标注 ✅ 状态 + 实现文件路径。
### [CL-20260416-1330] 2026-04-16 — 交互体验全面升级:信息层级 + 科技质感 + 微交互趣味性
- **tags**: 前端, UX升级, 动效, framer-motion, 排版体系, 微交互, 视觉层级, 科技感
- **affected_files**: globals.css, page.tsx, chat-messages.tsx, chat-input.tsx, image-grid.tsx, session-list.tsx, sidebar.tsx, top-nav.tsx, image-detail-panel.tsx, profile-modal.tsx, model-selector.tsx, login/page.tsx, gallery/page.tsx, UX-STYLE-GUIDE.md, motion-presets.ts, ambient-particles.tsx, data-stream.tsx, ripple-effect.tsx, firefly-burst.tsx
- **summary**: 四阶段全面升级。Phase 1globals.css 新增 7 级排版体系Display 渐变→Micro 大写)+ 4 级 Surface 层级 + 点阵网格底纹 + 水波纹/shimmer/涟漪等CSS动画。Phase 2新建环境萤火粒子组件纯CSS+ 数据流光组件AI 活动时输入栏上方),用户/助手消息视觉差异(渐变背景+切角 vs glass-panel+左侧竖线。Phase 3引入 framer-motion统一动画参数 motion-presets.ts发送按钮投石入水spring 弹缩+呼吸脉冲)、输入框水面感应(焦点扩展线+亮度随输入增强、AI 回复云雾凝聚blur 消散入场、收藏萤火点亮金色粒子爆发、图片水墨晕染clip-path 圆形揭示。Phase 4统一 Loading 水波纹 + shimmer 骨架屏 + 错误赭石红震动 + 空态 Display 渐变欢迎语 + stagger 入场,滚到底部按钮改圆形 spring 弹入,侧栏会话左侧竖线 hover全组件 hover 浮起。新增 UX-STYLE-GUIDE.md 交互体验文档。
### [CL-20260416-1000] 2026-04-16 — 集成 Zero123++ 视角变换工具单图→6视角
- **tags**: 视角变换, Zero123++, Novel View Synthesis, 新工具, Replicate
- **affected_files**: config.py, tools.py, loop.py, view_transform.py
- **summary**: 新增 `transform_view` 工具集成 Zero123++Replicate输入一张图片生成 6 个固定视角图片。独立服务模块 `view_transform.py` 处理 Replicate 调用 + grid 拼接图 Pillow 拆分。config.py 新增 `VIEW_TRANSFORM_MODELS` 注册表。loop.py 对视角变换结果做特殊 SSE 事件处理。进阶方案3D重建+ControlNet记入延期方案。
### [CL-20260416-0930] 2026-04-16 — 设备绑定配置与 Skill/Hooks 解耦local-env.json
- **tags**: 基础设施, local-env, 跨设备, hooks, project-launcher, Skill
- **affected_files**: local-env.json, local-env.example.json, hooks.json, run-hook.ps1, session-init.sh, check-changelog.sh, local-env-check.mdc, project-launcher/SKILL.md, .gitignore, ENVIRONMENT.md
- **summary**: 新增 `.cursor/local-env.json`gitignored存放设备绑定配置nodejs_path、shellproject-launcher Skill 和 hooks 均改为从中读取。hooks 增加 bash 版脚本 + PowerShell dispatcher 支持跨平台。新增 `local-env-check` Rule 在会话开始时自动探测生成。ENVIRONMENT.md 去除平台硬编码改为通用说明。
### [CL-20260416-0900] 2026-04-16 — 环境依赖全面修复 + 统一环境文档
- **tags**: 环境, 依赖, Node.js, Python, venv, npm, requirements, ENVIRONMENT
- **affected_files**: requirements.txt, requirements-lock.txt, ENVIRONMENT.md, project-launcher/SKILL.md
- **summary**: 排查缺失依赖venv/node_modules 均不存在),安装 Node.js v22.15.0 到 %LOCALAPPDATA%\nodejs\,创建后端 venv 并安装全部依赖14 个直接 + 47 个间接npm install 前端依赖46 个包。requirements.txt 锁定精确版本,新增 requirements-lock.txt 和 ENVIRONMENT.md 统一环境文档。project-launcher Skill Node.js 路径已同步更新。
### [CL-20260416-0830] 2026-04-16 — 生图按模型预处理 prompt
- **tags**: 后端, 生图, prompt, SDXL, Flux, Replicate, image_gen, Agent工具
- **affected_files**: image_prompt_strategy.py, image_gen.py, tools.py