feat(design): 设计系统重构与 shadcn/ui 集成 (v3.8.0)

.lintstagedrc.json

@@ -1,3 +1,6 @@
+# lint-staged 配置
+# 在 git commit 前自动运行 lint 和格式化
+
 {
   "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
   "*.{json,md,css}": ["prettier --write"]

CHANGELOG.md

@@ -5,6 +5,38 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.8.0]
+### Added
+- Integrated shadcn/ui component library (v4.11.0) with gradient button variant
+- Added complete Apple-style design system in globals.css with CSS variables
+- Added text-gradient-brand utility class for brand gradient text
+- Added touch-target utility class (44x44px minimum) for accessibility
+- Added animation utilities: float, glow-pulse, gradient-shift, fadeIn, slideUp
+- Added reduced-motion media query support for accessibility
+- Added prototype design specification documents:
+  - design-system-spec.md - Complete design token system
+  - component-library.md - Component classification and usage rules
+  - interaction-standards.md - Interaction patterns and feedback standards
+
+### Changed
+- Refactored button.tsx to use shadcn/ui with gradient variant support
+- Updated tailwind.config.ts with complete CSS variable color system
+- Updated globals.css with Apple HIG color palette and design tokens
+- Updated BikeTypeSelector.tsx with enhanced interaction states and animations
+- Updated BuildList.tsx and SummaryPanel.tsx to use shadcn Button components
+- Updated Hero.tsx, Cta.tsx, Navbar.tsx to use consistent Button styling
+- Updated Features.tsx and Pricing.tsx with proper aria-hidden attributes
+- Updated i18n translations (zh-CN.ts, en.ts) with missing emptyState keys
+- Updated README.md with shadcn/ui in tech stack and updated directory structure
+- Updated package.json version to 3.8.0
+
+### Fixed
+- Fixed decorative elements missing aria-hidden attributes
+- Fixed button touch targets to meet WCAG 2.1 44x44px minimum requirement
+- Fixed aria-pressed attribute on role="tab" elements (removed unsupported attribute)
+- Fixed missing i18n translation keys for configurator empty state
+- Fixed inconsistent button styling across components
+
 ## [3.5.0]
 ### Added
 - Added Footer component with version number display

README.md

@@ -39,6 +39,7 @@ Veloform 是一款基于 Next.js、Tailwind CSS 并由 Firebase 驱动的高级
 | React | v18.2.0 | UI 组件库 |
 | Zustand | v4.5.0 | 轻量级状态管理 |
 | Tailwind CSS | v3.4.0 | 样式框架 |
+| shadcn/ui | v4.11.0 | 高质量 React 组件库（基于 Radix UI） |
 | Firebase | v10.0.0 | Firestore 数据库与 Auth 身份验证 |
 | Framer Motion | v10.16.4 | 动画效果 |
 | Lucide React | v0.294.0 | 图标库 |
@@ -53,7 +54,7 @@ src/
 │   ├── layout.tsx                # 根布局（含 SyncProvider）
 │   ├── page.tsx                  # 首页/配置器
 │   ├── providers.tsx             # 全局提供者
-│   ├── globals.css               # 全局样式
+│   ├── globals.css               # 全局样式（Apple 设计系统）
 │   └── library/
 │       └── page.tsx              # 配置库页面
 ├── components/                   # UI 组件
@@ -68,23 +69,33 @@ src/
 │   │   └── SummaryPanel.tsx      # 汇总面板
 │   ├── layout/                   # 布局组件
 │   │   └── Navbar.tsx            # 导航栏
-│   ├── ui/                       # 通用 UI 组件
-│   │   ├── Button.tsx            # 按钮
-│   │   ├── Card.tsx              # 卡片
-│   │   ├── ErrorBoundary.tsx     # 错误边界
-│   │   ├── Modal.tsx             # 模态框
-│   │   ├── OnboardingGuide.tsx   # 新手引导
-│   │   ├── SupportModal.tsx      # 支持模态框
-│   │   ├── ThemeToggle.tsx       # 主题切换
-│   │   └── Toast.tsx             # Toast 通知
+│   ├── sections/                 # 页面区块组件
+│   │   ├── Hero.tsx              # 首页 Hero 区块
+│   │   ├── Features.tsx          # 功能特性区块
+│   │   ├── Pricing.tsx           # 定价区块
+│   │   ├── Cta.tsx               # 行动召唤区块
+│   │   └── Footer.tsx            # 页脚
+│   ├── ui/                       # shadcn/ui 组件库
+│   │   ├── button.tsx            # 按钮（含 gradient 变体）
+│   │   ├── card.tsx              # 卡片
+│   │   ├── dialog.tsx            # 对话框
+│   │   ├── input.tsx             # 输入框
+│   │   └── ...                   # 其他 shadcn 组件
 │   └── SyncProvider.tsx          # 云同步提供者（Auth + Firestore）
 ├── lib/                          # 工具库
+│   ├── stores/                   # Zustand 状态管理
+│   │   ├── index.ts              # 状态导出
+│   │   ├── config-store.ts       # 配置状态切片
+│   │   └── ui-store.ts           # UI 状态切片
+│   ├── services/                 # 业务服务层
+│   │   ├── config-service.ts     # 配置业务逻辑
+│   │   └── sync-service.ts       # 云同步服务
 │   ├── auth.ts                   # Firebase 认证服务
 │   ├── constants.ts              # 应用常量
 │   ├── env.ts                    # 环境变量验证
 │   ├── firebase-service.ts       # Firebase Firestore 服务
 │   ├── firebase.ts               # Firebase 配置
-│   ├── store.ts                  # Zustand 状态管理（含选择性 hooks）
+│   ├── store.ts                  # Zustand 状态管理（兼容层）
 │   ├── utils.ts                  # 工具函数
 │   ├── toast.ts                  # Toast 通知
 │   ├── recommended-configs.ts    # 推荐配置
@@ -213,7 +224,7 @@ MIT License
 
 ## 版本信息
 
-当前版本：**v3.7.0**  
-最后更新：2026-06-08
+当前版本：**v3.8.0**  
+最后更新：2026-06-15
 
 详细变更记录见 [CHANGELOG.md](./CHANGELOG.md)。

next.config.mjs

@@ -3,6 +3,18 @@ import withPWA from 'next-pwa';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    // 允许从这些域名加载图片
+    remotePatterns: [
+      { protocol: 'https', hostname: 'neeko-copilot.bytedance.net' },
+      { protocol: 'https', hostname: 'images.unsplash.com' },
+    ],
+    // 图片优化格式
+    formats: ['image/avif', 'image/webp'],
+    // 禁用不追踪 LCP 元素图片的优化提示
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
   webpack: (config, { isServer }) => {
     if (isServer) {
       config.externals = [...(config.externals || []), 'firebase', 'firebase-admin'];
@@ -15,6 +27,12 @@ const nextConfig = {
         net: false,
         tls: false,
       };
+
+      // Bundle 分析（仅在 ANALYZE=true 时启用）
+      if (process.env.ANALYZE === 'true') {
+        const { BundleAnalyzerPlugin } = require('@next/bundle-analyzer');
+        config.plugins.push(new BundleAnalyzerPlugin());
+      }
     }
     return config;
   },

openspec/PROJECT_GUIDELINES.md

@@ -1,8 +1,8 @@
 # Veloform 项目开发指南
 
 > **路径**: `/openspec/PROJECT_GUIDELINES.md`  
-> **版本**: v3.4.1  
-> **更新日期**: 2026-05-05
+> **版本**: v3.7.0  
+> **更新日期**: 2026-06-09
 
 ## 概述
 
@@ -320,5 +320,5 @@ A:
 ---
 
 **文档路径**: `/openspec/PROJECT_GUIDELINES.md`  
-**最后更新**: 2026-05-05  
-**版本**: v3.4.1
+**最后更新**: 2026-06-09  
+**版本**: v3.7.0

openspec/README.md

@@ -1,14 +1,14 @@
 # Veloform 规范文档索引
 
 > **路径**: `/openspec/README.md`
-> **版本**: v3.6.1
-> **更新日期**: 2026-06-04
+> **版本**: v3.7.0
+> **更新日期**: 2026-06-09
 
 ## 概述
 
 本文档是 Veloform 项目规范体系的导航入口，提供所有技术规范和开发指南的快速访问。规范文档采用分层结构，涵盖架构、API、开发、部署、安全和性能等核心领域。
 
-**项目版本**: v3.6.0
+**项目版本**: v3.7.0
 
 ---
 
@@ -23,8 +23,8 @@
 | [状态管理](./architecture/state-management.md) | React 状态管理方案、Context、Zustand、Server State | 选择合适的状态管理方案 |
 | [组件模式](./architecture/component-patterns.md) | React 组件设计模式、Hooks 最佳实践、性能优化 | 开发可复用组件时参考 |
 | [组件设计规范](./architecture/component-design.md) | 组件分类、命名规范、Props 定义、可访问性 | 开发新组件时参考 |
-| [ADR 索引](./architecture/adr/) | 架构决策记录索引 | 理解关键架构决策背景 |
-| [规范标准化](./规范标准化.md) | 文档格式、版本管理、命名规范和维护流程 | 规范化文档编写 |
+| ADR 索引（待补充） | 架构决策记录索引 | 理解关键架构决策背景 |
+| 规范标准化（待补充） | 文档格式、版本管理、命名规范和维护流程 | 规范化文档编写 |
 
 ### API 规范
 
@@ -39,14 +39,14 @@
 |------|------|----------|
 | [编码规范](./development/coding-standards.md) | TypeScript、React/Next.js、样式、Git 工作流、性能优化 | 编写代码时遵循 |
 | [测试规范](./development/testing.md) | 测试策略、框架使用、覆盖率要求、最佳实践 | 编写测试时参考 |
-| [国际化规范](./development/i18n-guidelines.md) | i18n 实现、翻译文件结构、语言切换、测试 | 开发多语言功能时参考 |
+| 国际化规范（待补充） | i18n 实现、翻译文件结构、语言切换、测试 | 开发多语言功能时参考 |
 
 ### 部署规范
 
 | 文档 | 说明 | 适用场景 |
 |------|------|----------|
 | [环境配置](./deployment/environments.md) | 部署流程、环境变量、SSR 配置、监控、SEO | 部署应用时参考 |
-| [CI/CD 流程](./devops/ci-cd.md) | 分支策略、自动化测试、部署流程、监控告警 | 设置 CI/CD 流水线 |
+| CI/CD 流程（待补充） | 分支策略、自动化测试、部署流程、监控告警 | 设置 CI/CD 流水线 |
 
 ### 安全规范
 
@@ -66,7 +66,7 @@
 |------|------|----------|
 | [UI 设计系统](./design/ui-design-system.md) | 完整的设计系统，包含颜色、字体、间距、组件规范等 | UI 开发、组件设计参考 |
 | [原型图说明](../prototype/prototype-guide.md) | 高拟真原型图功能说明、与实际项目映射关系 | 理解 UI 设计和交互流程 |
-| [设计审查与优化建议](./design/design-review.md) | 顶级设计师视角的设计审查和优化建议 | 优化用户体验、提升设计质量 |
+| 设计审查与优化建议（待补充） | 顶级设计师视角的设计审查和优化建议 | 优化用户体验、提升设计质量 |
 
 ---
 
@@ -84,7 +84,7 @@
 1. 查看 [组件模式](./architecture/component-patterns.md) 了解 React 组件开发模式
 2. 参考 [状态管理](./architecture/state-management.md) 选择合适的状态管理方案
 3. 如需调用后端，查阅 [Firestore API](./api/firestore.md)
-4. 如需多语言支持，参考 [国际化规范](./development/i18n-guidelines.md)
+4. 如需多语言支持，参考 [编码规范](./development/coding-standards.md) 中的国际化章节（自定义 i18n hook，不依赖 next-intl）
 5. 完成后按照 [测试规范](./development/testing.md) 编写测试
 
 ### 修复 Bug
@@ -166,6 +166,7 @@
 
 | 规范版本 | 项目版本 | 更新日期 | 主要变更 |
 |---------|---------|---------|---------|
+| v3.7.0 | 3.7.0 | 2026-06-09 | 规范文档与实际代码全面对齐：统一版本号、修正字体加载策略、补全 sections/ 组件目录、修正 i18n 实现说明、修正 Tailwind 配置示例 |
 | v3.6.1 | 3.6.0 | 2026-06-04 | 更新组件文档与实际代码对齐、统一版本号、完善 Button/Card/Footer 组件文档 |
 | v3.6.0 | 3.6.0 | 2026-06-04 | 完善规范文档体系、统一设计系统文档、优化原型说明 |
 | v3.5.0 | 3.5.0 | 2026-06-03 | 新增页脚组件、深色/浅色主题切换、完整主题系统 |
@@ -185,10 +186,10 @@
 - [英文 README](../README_EN.md) - 英文版项目说明
 - [变更日志](../CHANGELOG.md) - 版本历史
 - [原型图](../prototype/prototype-guide.md) - 原型说明文档
-- [设计审查](./design/design-review.md) - 设计优化建议
+- 设计审查（待补充） - 设计优化建议
 
 ---
 
 **文档路径**: `/openspec/README.md`
-**最后更新**: 2026-06-04
-**版本**: v3.6.1
+**最后更新**: 2026-06-09
+**版本**: v3.7.0

openspec/SPEC.md

@@ -1,8 +1,8 @@
 # Veloform 规范概览
 
 > **路径**: `/openspec/SPEC.md`  
-> **版本**: v3.6.1  
-> **更新日期**: 2026-06-04
+> **版本**: v3.7.0  
+> **更新日期**: 2026-06-09
 
 ## 概述
 
@@ -61,6 +61,7 @@ src/
 │   └── globals.css              # 全局样式
 │
 ├── components/                   # UI 组件
+│   ├── SyncProvider.tsx       # Firebase 认证同步提供者（顶层组件）
 │   ├── configurator/            # 配置器相关组件
 │   │   ├── BikeTypeSelector.tsx
 │   │   ├── BuildList.tsx
@@ -74,6 +75,11 @@ src/
 │   ├── layout/                  # 布局组件
 │   │   ├── Navbar.tsx
 │   │   └── Footer.tsx
+│   ├── sections/               # 营销/落地页分区组件（Hero/Features/Pricing/Cta）
+│   │   ├── Hero.tsx
+│   │   ├── Features.tsx
+│   │   ├── Pricing.tsx
+│   │   └── Cta.tsx
 │   └── ui/                      # 通用 UI 组件
 │       ├── Button.tsx
 │       ├── Card.tsx
@@ -234,6 +240,7 @@ src/
 
 | 规范版本 | 项目版本 | 更新日期 | 说明 |
 |---------|---------|---------|------|
+| v3.7.0 | 3.7.0 | 2026-06-09 | 规范文档与实际代码全面对齐：补全 SyncProvider/sections/ 目录、修正 i18n 说明、修正 Tailwind 配置示例、统一版本号 |
 | v3.6.1 | 3.6.0 | 2026-06-04 | 更新组件文档与实际代码对齐、统一版本号 |
 | v3.6.0 | 3.6.0 | 2026-06-04 | 完善规范文档体系、统一设计系统文档、优化原型说明、新增视觉效果规范 |
 | v3.5.0 | 3.5.0 | 2026-06-03 | 新增页脚组件、深色/浅色主题切换、完整主题系统 |
@@ -247,5 +254,5 @@ src/
 
 ---
 
-**最后更新**: 2026-06-04  
-**版本**: v3.6.1
+**最后更新**: 2026-06-09  
+**版本**: v3.7.0

openspec/architecture/component-design.md

@@ -1,8 +1,8 @@
 # 组件设计规范
 
 > **路径**: `/openspec/architecture/component-design.md`  
-> **版本**: v3.5.1  
-> **更新日期**: 2026-06-01
+> **版本**: v3.7.0  
+> **更新日期**: 2026-06-09
 
 ## 概述
 
@@ -94,14 +94,23 @@ export default function Home() {
 
 ```
 components/
-├── layout/           # 布局组件
-│   └── Navbar.tsx
-├── configurator/     # 配置器相关组件
+├── SyncProvider.tsx   # 顶层 Firebase 同步提供者
+├── layout/            # 布局组件
+│   ├── Navbar.tsx
+│   └── Footer.tsx
+├── configurator/      # 配置器相关组件
 │   ├── BuildList.tsx
-│   └── BikeTypeSelector.tsx
-└── ui/               # 通用 UI 组件
+│   ├── BikeTypeSelector.tsx
+│   └── ...
+├── sections/          # 营销/落地页分区组件
+│   ├── Hero.tsx
+│   ├── Features.tsx
+│   ├── Pricing.tsx
+│   └── Cta.tsx
+└── ui/                # 通用 UI 组件
     ├── Button.tsx
-    └── Card.tsx
+    ├── Card.tsx
+    └── ...
 ```
 
 ---
@@ -512,5 +521,5 @@ export function FadeInCard({ children }) {
 ---
 
 **文档路径**: `/openspec/architecture/component-design.md`  
-**最后更新**: 2026-06-01  
-**版本**: v3.5.1
+**最后更新**: 2026-06-09  
+**版本**: v3.7.0