承兑平台在线文档

Appearance

UI样式指南 ​

**本文引用的文件** - [tailwind.config.js](file://【PC】商户/tailwind.config.js) - [postcss.config.js](file://【PC】商户/postcss.config.js) - [tailwind.config.js](file://【PC】交易员/tailwind.config.js) - [postcss.config.js](file://【PC】交易员/postcss.config.js) - [main.tsx](file://【PC】商户/src/main.tsx) - [MainLayout.tsx](file://【PC】商户/src/components/MainLayout.tsx) - [Login.tsx](file://【PC】商户/src/pages/Auth/Login.tsx) - [index.tsx](file://【PC】商户/src/pages/Dashboard/index.tsx) - [index.tsx](file://【PC】商户/src/pages/Orders/index.tsx) - [Stripe DESIGN.md](file://awesome-design-md/design-md/stripe/DESIGN.md) - [沟通记录.md](file://AI沟通记录/2026-06-10_沟通记录.md)

更新摘要 ​

所做更改

  • 更新颜色体系：从Ant Design的蓝色系改为基于Stripe的深靛蓝#533afd设计系统
  • 新增Tailwind CSS设计系统：引入原子化设计令牌和组件规范
  • 更新字体系统：采用Inter字体族替代原有字体方案
  • 新增阴影效果：定义蓝色阴影系统（blue和blue-lg）
  • 更新主题切换机制：基于Tailwind CSS的暗黑模式支持
  • 新增设计令牌管理：颜色、字体、阴影等设计令牌的标准化

目录 ​

  1. 引言
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考量
  8. 故障排查指南
  9. 结论
  10. 附录

引言 ​

本指南面向设计与前端团队，基于新的Tailwind CSS设计系统，系统化梳理该平台的UI设计规范与样式标准。内容涵盖基于Stripe设计系统的颜色体系（深靛蓝#533afd为主色调）、Inter字体族、阴影效果、设计令牌管理、组件样式定义、状态样式、响应式样式、主题切换机制、可访问性要求、一致性检查方法、设计系统构建与维护策略。目标是帮助团队在多端应用中建立一致、可复用且可演进的视觉与交互语言。

项目结构 ​

该项目采用Tailwind CSS设计系统，通过tailwind.config.js配置设计令牌，通过postcss.config.js集成PostCSS插件。项目结构包含颜色系统、字体系统、阴影系统等设计令牌的集中管理。

mermaid
graph TB
subgraph "Tailwind CSS设计系统"
A_tailwind["tailwind.config.js<br/>设计令牌配置"]
B_postcss["postcss.config.js<br/>PostCSS插件配置"]
C_tokens["设计令牌<br/>颜色/字体/阴影"]
D_components["组件样式<br/>原子化设计"]
end
A_tailwind --> C_tokens
B_postcss --> D_components
C_tokens --> D_components

图表来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)

核心组件 ​

  • 设计令牌系统：通过tailwind.config.js集中管理颜色、字体、阴影等设计令牌
  • 原子化组件：基于Tailwind CSS的原子化类名系统，提供可组合的样式组件
  • 主题系统：支持明暗主题切换，基于CSS变量和Tailwind的暗黑模式
  • 响应式系统：基于断点的响应式设计，支持移动端和桌面端适配
  • PostCSS集成：通过postcss.config.js集成Autoprefixer等插件

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)

架构总览 ​

新设计系统采用"设计令牌 + 原子化组件 + 主题系统"的三层架构，通过Tailwind CSS实现样式的一致性和可维护性。

mermaid
graph TB
Tokens["设计令牌<br/>colors/fontFamily/shadow"] --> Atomic["原子化组件<br/>Tailwind类名"]
Atomic --> Theme["主题系统<br/>明暗模式切换"]
Theme --> Responsive["响应式系统<br/>断点适配"]
Tokens --> PostCSS["PostCSS处理<br/>Autoprefixer等"]
PostCSS --> Atomic

图表来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)

详细组件分析 ​

颜色体系 ​

基于Stripe设计系统，采用深靛蓝#533afd作为主色调，建立完整的颜色层次系统：

  • 主色调（primary）：#533afd（默认）、#4434d4（深色）、#2e2b8c（按下）、#665efd（浅色）
  • 品牌色（brand）：#1c1e54（深蓝）
  • 文字色（ink）：#0d253d（默认）、#273951（二级）、#64748d（弱化）、#61718a（弱化2）
  • 背景色（canvas）：#ffffff（默认）、#f6f9fc（软色）、#f5e9d4（奶油色）
  • 分隔线（hairline）：#e3e8ee（默认）、#a8c3de（输入框）
mermaid
graph LR
Primary["主色调<br/>#533afd"] --> Deep["深色<br/>#4434d4"]
Primary --> Press["按下<br/>#2e2b8c"]
Primary --> Soft["浅色<br/>#665efd"]
Brand["品牌色<br/>#1c1e54"] --> Canvas["背景色<br/>#ffffff/#f6f9fc/#f5e9d4"]
Ink["文字色<br/>#0d253d/#273951/#64748d"] --> Hairline["分隔线<br/>#e3e8ee/#a8c3de"]

图表来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [Stripe DESIGN.md](file://awesome-design-md/design-md/stripe/DESIGN.md)

字体规范 ​

采用Inter字体族，建立完整的字体层次系统：

  • 字体家族：Inter字体族，支持400/500/600/700字重
  • 字体特性：启用OpenType特性"calt"和"rlig"，支持上下文连字
  • 字体栈：Inter, system-ui, sans-serif
  • 数字字体：使用等宽字体支持数值显示

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [Stripe DESIGN.md](file://awesome-design-md/design-md/stripe/DESIGN.md)

阴影效果 ​

建立蓝色阴影系统，提供统一的深度表达：

  • 蓝色阴影（blue）：rgba(0,55,112,0.08) 0 1px 3px
  • 蓝色大阴影（blue-lg）：rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

组件样式与状态 ​

基于Tailwind CSS的原子化设计，提供可组合的组件样式：

  • 按钮组件：支持pill形状（圆角9999px）、不同尺寸、状态样式
  • 表单组件：输入框、选择器等组件的状态管理
  • 卡片组件：基于阴影和圆角的卡片样式
  • 导航组件：菜单、标签页等导航样式

章节来源

  • [Login.tsx](file://【PC】商户/src/pages/Auth/Login.tsx)
  • [index.tsx](file://【PC】商户/src/pages/Dashboard/index.tsx)
  • [index.tsx](file://【PC】商户/src/pages/Orders/index.tsx)

响应式样式 ​

基于Tailwind CSS的响应式系统，支持多端适配：

  • 断点系统：基于Tailwind默认断点（sm: 640px, md: 768px, lg: 1024px, xl: 1280px）
  • 响应式类名：使用sm:, md:, lg:, xl:前缀实现响应式样式
  • 布局系统：基于Flexbox和Grid的响应式布局

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

设计令牌管理 ​

建立标准化的设计令牌管理系统：

  • 颜色令牌：主色调、辅助色、背景色、文字色的统一管理
  • 尺寸令牌：字体大小、行高、间距、圆角、阴影等设计令牌
  • 状态令牌：悬停、聚焦、选中、禁用等状态的颜色和效果
  • 命名规范：基于Tailwind CSS的原子化命名约定

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

主题切换机制 ​

支持明暗主题切换，基于Tailwind CSS的暗黑模式：

  • 暗黑模式：通过dark:前缀实现暗黑主题样式
  • 主题变量：基于CSS变量的主题切换机制
  • 组件适配：所有组件支持明暗主题的自动适配

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

可访问性要求 ​

遵循WCAG 2.1 AA标准的可访问性要求：

  • 对比度：确保文本与背景的对比度满足AA标准（4.5:1）
  • 键盘导航：支持完整的键盘操作和焦点管理
  • 屏幕阅读器：语义化的HTML结构和ARIA属性
  • 运动敏感性：提供减少动画的偏好设置

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

样式一致性检查方法 ​

建立全面的样式一致性检查体系：

  • 设计令牌检查：确保所有颜色、字体、间距使用统一的设计令牌
  • 原子化检查：检查Tailwind类名的正确使用和组合
  • 主题一致性：验证明暗主题下的样式一致性
  • 跨端一致性：确保移动端和桌面端的样式表现一致

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

设计系统构建指南 ​

基于Tailwind CSS的设计系统构建方法：

  • 原子化设计：从颜色、字体、间距、组件出发，建立设计令牌
  • 版本化管理：为设计令牌和组件版本打标签，追踪变更
  • 文档化：建立设计令牌文档和组件使用指南
  • 自动化：集成样式检查和一致性验证工具

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

样式维护策略 ​

基于Tailwind CSS的样式维护最佳实践：

  • 渐进式重构：优先重构高频使用的组件和样式
  • 向后兼容：确保新旧样式系统的平滑过渡
  • 变更审批：重大样式变更需要设计和技术评审
  • 知识沉淀：建立样式使用规范和常见问题解决方案

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

样式冲突解决方案 ​

基于Tailwind CSS的样式冲突解决方法：

  • 原子化原则：优先使用原子化类名，避免复杂的CSS选择器
  • 作用域隔离：通过组件封装和命名空间避免样式污染
  • 权重控制：合理使用Tailwind的优先级和特殊修饰符
  • 工具链支持：利用Tailwind CSS的内置工具和插件

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)

设计规范更新流程 ​

基于Tailwind CSS的设计规范更新流程：

  • 需求收集：收集设计和开发团队的设计规范需求
  • 令牌更新：更新tailwind.config.js中的设计令牌配置
  • 组件适配：适配现有组件以符合新的设计规范
  • 测试验证：进行全面的样式测试和一致性检查
  • 文档同步：更新设计系统文档和使用指南

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [沟通记录.md](file://AI沟通记录/2026-06-10_沟通记录.md)

依赖关系分析 ​

新设计系统的核心依赖关系如下：

mermaid
graph TB
Tailwind["Tailwind CSS"] --> Config["tailwind.config.js"]
PostCSS["@tailwindcss/postcss"] --> Tailwind
Autoprefixer["autoprefixer"] --> PostCSS
Config --> Tokens["设计令牌"]
Tokens --> Components["组件样式"]
Components --> Theme["主题系统"]

图表来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)

性能考量 ​

基于Tailwind CSS的性能优化策略：

  • 样式体积：通过tree-shaking移除未使用的样式类名
  • 构建优化：PostCSS插件链的优化和缓存
  • 运行时性能：原子化CSS的高效渲染和内存使用
  • 字体优化：Inter字体的预加载和字体回退机制

故障排查指南 ​

基于Tailwind CSS的故障排查方法：

  • 样式未生效：检查Tailwind CSS的编译和类名拼写
  • 主题切换异常：验证暗黑模式的配置和CSS变量
  • 响应式问题：检查断点设置和响应式类名的使用
  • 构建错误：检查tailwind.config.js的配置语法和依赖版本

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)

结论 ​

本指南基于新的Tailwind CSS设计系统，总结了基于Stripe设计系统的颜色、字体、阴影、组件与状态、响应式与主题、可访问性、一致性检查与维护策略等关键规范。建议在后续开发中以这些规范为依据，建立基于原子化设计的可执行设计系统，并在团队内推广落地，确保产品在多端的一致性与可维护性。

附录 ​

  • 设计令牌版本：基于Stripe设计系统的颜色令牌#533afd
  • 字体许可：Inter字体的开源许可和使用条款
  • PostCSS插件：Autoprefixer等插件的版本兼容性
  • 浏览器支持：现代浏览器的CSS变量和Flexbox支持情况

章节来源

  • [tailwind.config.js](file://【PC】商户/tailwind.config.js)
  • [postcss.config.js](file://【PC】商户/postcss.config.js)
  • [Stripe DESIGN.md](file://awesome-design-md/design-md/stripe/DESIGN.md)