feat: UI 重做迁移到 Tailwind v4 + shadcn(zinc+蓝)#17
Open
rrbe wants to merge 10 commits into
Open
Conversation
- 接入 Tailwind v4（@tailwindcss/vite，CSS-first，过渡期只引 theme+utilities 层、不带 preflight）；新增 clsx/tailwind-merge/cn + class-variance-authority + @/ 别名 - 设计令牌重建为 zinc + 蓝强调（亮暗平等），新增字重/行高/字距令牌；index.css 用 @theme inline 把 shadcn 色名映射到语义令牌 - 数据/代码字体换 JetBrains Mono（替换 Source Code Pro），同步 CodeMirror 主题 - 共享原语 shadcn 化：Button(cva)/Input/Select/Checkbox/Tabs/Field/Modal，门面 API 不变 - 连接弹窗做大做舒展（lg=760）+ 所有弹窗加宽（默认 md=660）+ footer .spacer 兼容 - 侧栏目录树/分组头圆角药丸 hover - 修复亮色白底白字：theme-polish 通用元素规则收进 @layer base，避免压过 Tailwind 工具类
- base-ui.css 重写：删 .ui-select-*/.ui-check*/.field-err，只留 Dialog 定位/Menu/NumberField/Tooltip + .form-grid 子元素 margin 规则 - modals-forms.css 删 .modal* 盒子/.tabs/.test-result*/.swatch*/.url-action*/.color-swatch*（保留 .modal-backdrop/.form-row/.url-popup*/.toast* 等仍在用的） - theme-polish.css 删死 .modal/.modal-header（保留 .modal-backdrop） - Dialog.tsx 注释更新（不再引用 .modal 类） 约 250 行死规则；grep 确认零组件引用
- NumberField 对齐 ui/Input 观感（h-9 zinc inset + 外框聚焦环 + −/+ 步进），删死 .ui-number* - From/To URL 副弹窗全 Tailwind（卡片/标题/等宽 textarea/错误条/footer）；去 url-popup 类后用 z-[1101]! 压过 .ui-dialog 的 z-1001 - 删死 .url-popup*（modals-forms）+ .ui-dialog.url-popup（base-ui）
- DiagnoseResult/DiagnoseControl 的 #4ade80/#f87171/#9ca3af → var(--ok)/var(--err)/var(--fg-3)，亮暗都正确 - 诊断区与 SSH 密钥/Browse 行的内联 style 改 Tailwind
- 查询 tab 改现代圆角药丸（透明非激活、激活升到内容面+软阴影）；关闭/新建按钮显式清掉 border+bg，不再漏出 @layer base 的原生按钮方框 - db-select 压到 30px（覆盖表单档 h-9），适配 38px work-header - Button 新增 size 变体（default h-8 / sm h-7）；work-header 的构建/Save/Explain/Run/Stop 改 size=sm
side-section-more / sq-del / result-copy 等原生 <button> 未重置 border+bg，会漏出 @layer base 的默认按钮方框；补上 border:none + background:transparent + hover 反馈
- 两条 strip 现共用完全相同的声明：透明非激活(fg-2)、hover bg-2、激活升到 --bg-1 表面 + 蓝色 inset 顶 rule（margin-bottom:-1px 与下方 header 衔接）；关闭按钮统一为无边框图标按钮 - 统一尺寸/间距：strip 32px、padding 6/8、tab padding 0 6 0 11、gap 2、close 18px、max-width 200 - 去掉结果 tab 的加粗与 query tab 的圆角药丸/软阴影分歧
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
这是什么
把 AMDM 的 UI 从「纯手写 CSS + Slate 石墨」重做为 Tailwind v4 + shadcn 风原语（基于
@base-ui/react）+ Zinc/蓝设计令牌，对标 Outerbase Studio 的现代数据库工具观感。亮 / 暗平等；数据 / 代码字体改 JetBrains Mono（OFL，可商用）。主要变更
@tailwindcss/vite，过渡期只引 theme+utilities 层、不带 preflight）+clsx/tailwind-merge/cn+class-variance-authority+@/别名。@theme inline把 shadcn 色名映射到语义令牌（我们的--accent=品牌蓝→shadcnprimary；shadcnaccent=hover 底→--bg-3）。pineEditorTheme.ts。.spacer兼容。theme-polish通用元素规则收进@layer base，避免压过 Tailwind 工具类）；SSH 诊断硬编码 hex → 主题令牌（亮暗都正确）。CLAUDE.md样式约定段与DESIGN.md重写为新体系。有意保留（已被令牌上色、观感一致，Tailwind 化收益低）
.ctx-*、Toast.toast*、work-area 标签条 / Shell 工具栏 —— 仍是手写 CSS。校验
pnpm typecheck（node + web）+pnpm build全程绿。--t-*与ejson.ts/CodeMirror 同步、不全大写、忙态按钮不改宽度、i18n 三语、Base UI 弹层 z 分层。后续可选
ContextMenu / Toast / 工具栏的 Tailwind 化、排版令牌微调——可另起 PR。