Skip to content

网页界面去掉 AI 味:黑白灰、系统字体、胶囊控件 - #430

Merged
lbx154 merged 6 commits into
feat/ts-corefrom
feat/web-design
Nov 3, 2026
Merged

lbx154 merged 6 commits into
feat/ts-corefrom
feat/web-design

Conversation

@lbx154

@lbx154 lbx154 commented Nov 3, 2026

Copy link
Copy Markdown
Owner

参考 agents-anywhere.com 的克制风格,改网页工作区的外观。只动 frontend/web。

  • 配色只剩黑白灰(深色纯黑);accent/blue/gold 变成 ink 的别名,状态点保留绿/红
  • 字体优先 SF Pro / 苹方;去掉衬线标题,标题加粗收紧字距
  • 控件胶囊形;复选框黑白
  • 侧栏删说明小字和每个项目的花费(合计保留,说明在悬停提示);回收站并进筛选行
  • 顶部花费改为 ≈$x,“已工作”时长只在用量明细
  • 总负责人设置去掉卡片框
  • 浅色最淡文字 112 灰,对白底对比度 ≥4.5

网页测试 134 文件 / 1066 个全过。tsc 报 packages/core/src/serve/views.ts 的 repeat 类型错误,本 PR 没碰 core。

依据 design/ux-principles.md 第 1、6 条:先给人关心的结果,花费标明估算(≈ 与悬停说明)。

🤖 Generated with Claude Code

lbx154 and others added 6 commits November 3, 2026 06:06
- 配色只剩黑白灰;深色用纯黑。金色/蓝色 token 改为 ink 的别名,状态点保留绿(运行)和红(失败)
- 字体优先 SF Pro / 苹方,去掉衬线标题
- 按钮和输入框改成胶囊形,复选框随主题黑白
- 侧栏:删“全部项目合计 · 不含进行中的调用”和每个项目的花费;回收站并进筛选行;新建改成胶囊按钮
- 顶部:花费只显示 ≈$0.40,说明放在悬停提示;“已工作”时长只留在用量明细里
- 总负责人勾选项去掉卡片框,改为分隔线列表

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 侧栏删“本项目成果”(与顶部“成果与文件”重复)和“高级工具”折叠;技能库移到底栏,全局搜索变成项目行的图标
- 成果卡片:标题 22px 半粗,“打开”为黑色胶囊主按钮,文件名前不再加 ▦◧ 符号
- 示例任务卡片和多行输入框用面板圆角,不跟按钮一起变胶囊
- 新建页删“发送后自动建立项目……”说明

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 顶部更高(72px),标题 20px,状态行与标签间距加大;标签选中线 2px 黑
- 右上角和侧栏底部的 ··· 改为图标,不再靠字间距拼点
- 回复里的标题 22/18/15px 半粗,段落行高 1.75,列表圆点改灰

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 地图约 150 处写死的蓝/绿/赭/紫改为主题色:运行中绿、失败红、线条和强调黑、其余灰;阴影去掉蓝调
- 补回 7949c62 删 canvas.css 时丢掉的 --map-hairline / --map-silver / --map-status-* / --map-accent*:
  卡片边框此前因变量未定义退回文字色(黑粗边),状态点不显示
- 缩放按钮改胶囊,分隔线跟主题
- 工作台:模块标签选中为灰底胶囊;只读标记、根目录名不再粗体大写;编辑器标签去掉顶部色线
- 深色模式下拉框箭头不再平铺成一排(背景简写把 no-repeat 重置了)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 文本框聚焦只加深自身边框,不再画 2px 外框;按钮和链接保留键盘焦点框
- 带边框的按钮统一胶囊,输入框 12px 圆角;设置面板输入框不再跟着变胶囊
- 环境变量表单:标签与输入框留空,保存为黑色主按钮
- 命令面板:选中行内缩圆角、灰底;分组标题不再全大写;项目行去掉 ○
- 成果预览:文件名用正文字体,不用等宽粗体
- 成果与文件面板的“最新成果”:细灰边,打开为黑色胶囊

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 底部标签栏换成与全站一致的 lucide 线条图标,字 11px,选中为黑色加粗;高 56px
- 去掉 FontAwesome(只剩 6 个图标在用,全部换成 lucide),依赖少 3 个包
- 侧栏抽屉在手机上宽 85%(最多 320px),项目名不再被截得很短
- 成果预览的文件标签在手机上右边渐隐,看得出能左右滑;选中线 2px 黑

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@lbx154
lbx154 merged commit e49c60c into feat/ts-core Nov 3, 2026
6 of 7 checks passed
@lbx154
lbx154 deleted the feat/web-design branch November 3, 2026 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant