JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
508 Commits 5 Branches 0 Tags 500 MiB
b4030c386e
Commit Graph

13 Commits

Author SHA1 Message Date
JOJO
b4030c386e refactor(frontend): 颜色 token 系统两层重构 + 三主题填色 + 去半透明 
将前端配色从散落的硬编码/双命名体系（--claude-* / --theme-*）重构为
两层 token 结构（原始层 + 中性语义层），并按"经典抄 Claude、浅色抄
ChatGPT、深色自研"的定位完成三主题填色，同时建立 stylelint 防回退栏杆。
代码大量由 AI 生成的历史遗留配色问题（同语义多值、跨主题塌缩、强调色
撞文字色、fallback 第二真相源等）在此一并收口。

== 一、Token 结构重构（_tokens.scss）==
- 重写为两层：原始层 + 语义层；组件只引用中性语义名
  （--surface-* / --text-* / --border-* / --accent* / --state-* 等）。
- --claude-* / --theme-* 降级为兼容别名（41 个转发），迁移完成后删除。
- 三主题（classic / light / dark）+ 首屏回退（:root:not([data-theme])，
  与经典同值）全部补齐，结构对齐、不再缺项。

== 二、三主题填色 ==
- 经典 = Claude 官网亮色盘：暖奶油表面阶梯
  canvas #faf9f5 < soft #f5f0e8 < card #efe9de < cream-strong #e8e0d2
  < 纯白浮起；文字 #141413；hairline #e6dfd8；暖橙 primary #cc785c。
- 浅色 = ChatGPT 亮色盘：冷白 #ffffff / 侧栏 #f9f9f9 / 嵌套 #f3f3f3，
  中性灰文字，近黑 primary #181818。
- 深色 = 自研中性灰阶，本轮完全不动（原样保留）。
- 修复塌缩 bug：强调色在 light/dark 原被误填成灰（CTA 失去品牌色），
  现统一回品牌 primary；light 表面原全塌成 #ffffff（过于平面），
  现按灰阶拉开层次。
- 强调色克制（CTA-only voltage）：primary 仅用于发送按钮/logo 等极少
  数处；hover / 选中 / 运行态一律走中性灰（运行态指示器从 amber 改灰）。
- 对话区背景从纯白改为暖奶油 canvas；个人空间下拉菜单、git 状态条、
  二级菜单等收口到统一语义色。

== 三、全面去半透明 ==
- 所有实体面板/二级菜单背景改为不透明（surface token 由半透明白改实色，
  --mobile-menu 三亮色主题改实色）。
- 移除已不透明面板上失效的 backdrop-filter 磨砂（移动端菜单、右键菜单、
  模型模式下拉等）。
- 遮罩 scrim（--overlay-scrim）与刻意玻璃质感装饰保留半透明。

== 四、块展开底色统一 ==
- 思考/工具块展开区底色统一为对话背景色：.collapsible-block 及其 header
  背景由 --surface-soft 改 transparent，与堆叠块（stacked-block）一致，
  消除"单块奶油底 vs 多块透明"的不一致。

== 五、布局修复 ==
- 工作区隐藏后残留空白：.workspace-panel--collapsed 补 flex-basis:0 +
  width/min-width:0，修正 flex-basis:auto 被子元素内容宽度撑开导致内联
  width:0 失效、collapsed 后仍占 ~300px 的问题。

== 六、防回退栏杆（新增）==
- 新增 .stylelintrc.cjs：三条规则拦截裸 hex / rgb()|hsl() 字面色 /
  var(--x, fallback) 兜底 / prefers-color-scheme；存量未清理文件用
  BASELINE_EXEMPT 临时豁免（现仅剩 5 个 admin 页面，本轮按用户要求不处理），
  清理一个移除一个、不再回退。
- package.json：build 脚本接入 stylelint（tsc → stylelint → vite），
  新增 lint:css 脚本及 stylelint/postcss-scss/postcss-html 依赖。
- 修复 25 处 \!important 笔误（zsh 历史扩展污染导致的无效 CSS）。

== 七、辅助脚本（新增 scripts/）==
- lint_check.py：Node 环境不可用时的 stylelint 替身（复刻三规则 + 括号
  校验，支持多行声明检测）。
- color_map.py：硬编码色 → token 反查，判定可映射/野色。
- strip_fallback.py：安全剥离已定义 token 的冗余 fallback。

== 八、文档 ==
- CLAUDE.md / AGENTS.md 前端设计规范更新：颜色规则扩写为三主题定位 +
  两层 token + 表面层次 + 强调色克制 + color-mix 派生 + stylelint 栏杆；
  新增"实体面板禁止半透明"规则；"禁止边缘光晕"补充"仅在用户明确允许
  或要求时才可使用"。

注：前端构建验证（npm run build / lint:css）由用户本机完成；AI 工具
上下文 Node v24 段错误无法运行 node/npm/vite/stylelint。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-06 16:20:58 +08:00
JOJO
469e804e38 fix(frontend): 工具块展开内部滚动条样式统一，滚动槽透明 
- MinimalBlocks 思考内容(.thinking-content)补全自定义滚动条
- ToolAction 结构化显示三类滚动区(content/diff/code/output pre)统一样式
- 参考 git 状态侧边栏滚动条：10px 圆角胶囊滑块、半透明主题色
- 滚动槽(track)设为透明，贴合工具块灰色底色，避免明显槽体
- 颜色走 --claude-*/--theme-* 变量，三模式自适应

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-01 21:07:11 +08:00
JOJO
4124faa040 feat(frontend): 优化聊天界面与监控交互体验 2026-04-10 14:34:18 +08:00
JOJO
b29e6a67f8 fix: keep compression toast persistent and align summary layout 2026-04-06 17:09:36 +08:00
JOJO
6f2f854f6d fix: refine mobile assistant content spacing 2026-04-05 21:25:01 +08:00
JOJO
a5412dae34 fix: adjust sub-agent notice spacing in minimal mode 2026-04-05 16:58:22 +08:00
JOJO
dc60c7a123 feat: animate minimal summary text with color wave 2026-04-05 01:22:37 +08:00
JOJO
0c213b0a9f feat: polish minimal summary loader interactions 2026-04-04 20:52:50 +08:00
JOJO
3b710020fe feat(chat): add randomized summary loaders in minimal mode 2026-04-04 19:47:17 +08:00
JOJO
b9df354808 fix: 修复极简模式思考内容与SVG图标对齐问题 
- 使用相对单位调整思考内容的垂直对齐
- 添加负margin-top让第一行文字中心与SVG图标中心对齐
- 计算公式：(1em - 1.7em) / 2，基于line-height自动适配
- 不影响工具步骤的对齐（工具header的line-height为1）

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-04-04 16:38:56 +08:00
JOJO
c26cd3d3fd fix: 修复极简模式多个问题并恢复偏好设置自动应用 
- 修复极简模式下步骤竖线距离SVG不均匀的问题
  - 使用flex布局让竖线自动填充空间
  - 添加负margin让竖线延伸到下一个步骤
  - 确保竖线上下距离SVG图标相等

- 修复SVG图标颜色问题
  - 统一使用灰色(--claude-text-tertiary)
  - 不再受颜色模式影响

- 修复思考内容自动滚动问题
  - 添加registerThinkingRef和handleThinkingScroll支持
  - 移除导致滚动异常的伪元素负margin
  - 实现与堆叠模式一致的自动滚动行为

- 修复轮询改造后偏好设置不自动应用的问题
  - 在loadInitialData中应用默认模型和运行模式
  - 在createNewConversation前应用偏好设置
  - 在loadConversation前应用偏好设置
  - 确保新建或切换对话时使用用户设置的默认值

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-04-04 16:18:15 +08:00
JOJO
a030ff954b fix: 修复工具增强显示的多个问题 
1. read_file 工具支持三种模式显示
   - read 模式：显示完整文件内容
   - search 模式：显示搜索匹配项和行号
   - extract 模式：显示提取的多个片段

2. edit_file 工具兼容新旧数据格式
   - 支持 old_string/new_string 格式（当前后端使用）
   - 支持 replacements 数组格式（为未来扩展预留）

3. write_file 工具显示写入内容
   - 显示完整的写入内容
   - 使用绿色+号样式（与 edit_file 一致）
   - 支持显示追加模式标识

4. 极简模式工具图标匹配修复
   - 修复所有工具图标都显示为 run_command 的问题
   - 使用与堆叠块模式相同的图标获取逻辑
   - 正确显示每个工具对应的图标

5. 新增样式支持
   - 搜索匹配项样式
   - 提取片段样式
   - 移除彩色侧边框，保持简洁

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-04-04 15:37:38 +08:00
JOJO
321818f7ef feat: 新增极简模式（Minimal Mode） 
新增了一个全新的消息显示模式，提供更简洁的对话体验。

主要功能：
- 新增 MinimalBlocks.vue 组件，实现极简风格的消息块展示
- 在 ChatArea.vue 中集成极简模式渲染逻辑
- 在个性化设置中添加"极简模式"选项（blockDisplayMode）
- 支持三种显示模式：堆叠模式、极简模式、传统模式

技术实现：
- 使用 personalization store 管理显示模式状态
- 通过 computed 属性动态切换渲染组件
- 保持与现有堆叠模式和传统模式的兼容性

用户体验：
- 更清爽的界面布局
- 减少视觉干扰
- 适合快速浏览对话内容

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-04-04 14:47:45 +08:00