BaskBuddy

commit b7490ec1b700c654ab261737f2cdb43b67d1192d Author: rollback-safety Date: Tue Jul 21 16:04:03 2026 +0800 SAFETY NET: pre-rollback state (post design rounds 1-3) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2001431 --- /dev/null +++ b/.gitignore @@ -0,0 +1,46 @@ +# ===== Dependencies ===== +node_modules/ +.pnpm-store/ + +# ===== Build Outputs ===== +dist/ +.astro/ +.output/ + +# ===== Environment ===== +.env +.env.local +.env.*.local + +# ===== macOS ===== +.DS_Store +.AppleDouble +.LSOverride + +# ===== Windows ===== +Thumbs.db +ehthumbs.db +Desktop.ini + +# ===== Editors ===== +.vscode/* +!.vscode/settings.json +!.vscode/extensions.json +.idea/ +*.swp +*.swo +*~ + +# ===== Logs ===== +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# ===== Misc ===== +*.local +.cache/ + +# ===== Vite build temp artifacts ===== +vite.config.ts.timestamp-*.mjs diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3286d7 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + +

+ BaskBuddy + + + +

+ + + diff --git a/overview-color-icon-final.md b/overview-color-icon-final.md new file mode 100644 index 0000000..5619305 --- /dev/null +++ b/overview-color-icon-final.md @@ -0,0 +1,45 @@ +# bashi-website — 色彩 & 图标最终决策落地（像素君 / UI Designer） + +用户拍板「听你的」，以下决策已直接执行并验证通过。 + +## 1. 赛道色统一（解决双套定义） +之前：赛道卡片用粉彩 `#E8A0BF/#7EC8E3/#98D8AA/#C9B1FF`，但全局 `--track-*` token 是饱和默认色 `#EF4444/#2563EB/#10B981/#8B5CF6` —— **色相一致，唯独「社交」一边粉、一边红**最扎眼。 + +改为：token 与卡片粉彩**同色相**，并加深以保证 WCAG AA（白底文字 ≥4.5:1；实心按钮白字 ≥4.5:1）： + +| 赛道 | 旧 token | 新 token | 对齐的卡片粉彩 | +|------|----------|----------|----------------| +| 社交 Social | `#EF4444` 红 | `#C2416B` 深玫瑰 | `#E8A0BF` 粉 | +| 职场 Career | `#2563EB` | `#1C7AB6` 深天蓝 | `#7EC8E3` 蓝 | +| 支付 Payment | `#10B981` | `#15803D` 深绿 | `#98D8AA` 绿 | +| AI | `#8B5CF6` | `#7C3AED` 深紫 | `#C9B1FF` 紫 | + +- 顺手**删掉 4 个从未引用的 `--track-*-bright` 死 token**，设计系统更干净。 + +## 2. 图标全部统一为 lucide（单一图标源） +设计系统第一原则就是一致性。把所有手写内联 SVG 换成 lucide： +- **Header**：汉堡 ↔ 关闭 → `Menu` / `X` +- **Contact**：`💼`→`Briefcase`、`🤝`→`Handshake`、CTA 箭头→`ArrowRight`、邮件→`Mail` +- **NotFound**：返回箭头→`ArrowLeft`、前往箭头→`ArrowRight` +- **Join**：投递区残留的邮件 SVG → `Mail` + +全站**已无任何 emoji**（上次 Join 福利区已改，本次清掉 Contact 两处 + Join 邮件图标）。 + +## 3. SPA fallback（生产环境深链接不 404） +新增 `public/_redirects`：`/* /index.html 200`（Netlify 及多数静态托管通用，对其它平台无害），已随构建进入 `dist/`。 + +> 若用其它托管，规则如下： +> - **nginx**：`try_files $uri $uri/ /index.html;` +> - **Vercel**：`vercel.json` → `{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }` +> - **GitHub Pages**：需用 `gh-pages` + 404.html 拷贝，或 hash router + +## 验证 +- `npx tsc --noEmit` → 0 错误 +- `npm run build` → 1819 模块，新色已进入 `dist` CSS，`_redirects` 已进 `dist` +- `src/` 内 **0 emoji** +- 开发服务器在线 **http://localhost:4321**：`/` `/business` `/contact` `/join` `/en/contact` `/404` 全部 200，改动模块编译干净，lucide 依赖解析 200 + +## 仍可继续打磨（可选，未动） +- 字体层级/行高 token 化（目前散落在 class 里） +- 暗色主题目前由 `page-enter`/CSS 变量驱动，可补一套更完整的深色 token 校验 +- 赛道卡片粉彩与全局 token 仍有「深浅两档」的语义区分，若想彻底单源，可把卡片色也改从 `--track-*` 派生（需动 i18n 数据） diff --git a/overview-dark-mode-tokens.md b/overview-dark-mode-tokens.md new file mode 100644 index 0000000..ae36e52 --- /dev/null +++ b/overview-dark-mode-tokens.md @@ -0,0 +1,38 @@ +# bashi-website — 设计系统完善 + 暗色模式落地 + +> 像素君（UI Designer）· 第二轮打磨：把"死"的暗色 token 真正激活，并补全设计系统刻度尺 + 赛道色单源。 + +## 1. 设计令牌补全（`global.css`） +- **字体刻度尺**：在 `:root` 新增模块化 token —— `--fs-xs…4xl`、`--lh-tight/snug/normal/relaxed`、`--fw-regular…bold`、`--ls-tight…widest`。设计系统从此有统一"刻度尺"，组件可逐步迁移到令牌而非散值。 +- **主题感知 surface 令牌**：`--surface-card` / `--text-strong` / `--header-bg` / `--accent`，浅色下指向既有值，暗色下自动切换。 + +## 2. 暗色模式（从摆设变成真功能） +之前 `--bg-dark` / `--text-on-dark` / `--shadow-dark-*` 都定义了，却**没有 `data-theme="dark"` 覆盖块、也没有切换开关**——等于死代码。本次： +- 新增 `[data-theme="dark"]` 覆盖块：暖调近黑表面（`--bg-primary:#16110E`、`--surface-card:#1E1813`）、暖白文字（`--text-primary:#F5EFE6`、`--text-strong:#FBF6EC`）、低透明度奶油描边、暗色阴影、`color-scheme: dark`。 +- `body` 加 `background-color/color` 依赖令牌，整页随主题切换。 +- **三态主题开关**：`src/hooks/useTheme.ts`（浅 / 深 / 跟随系统，localStorage 持久化 + 系统偏好实时监听）+ Header 顶栏按钮循环切换 `Sun / Moon / Monitor`（lucide 图标）。 +- `index.html` 内联防闪烁脚本：首屏绘制前就设好 `data-theme` 与 `color-scheme`，**无 FOUC**。 + +## 3. 组件迁移到主题令牌 +- 中性/深色底上的 `text-[var(--brand-black)]` → `text-[var(--text-strong)]`（覆盖 Home/Business/Innovation/Join/Contact/About/Footer/Privacy/NotFound/Header 的全部标题与导航文字）。 +- `bg-white` 卡片 → `bg-[var(--surface-card)]`（Contact/Join/NotFound/Privacy）。 +- 悬停底色 `hover:bg-[var(--brand-cream-light)]` → `hover:bg-[var(--accent)]`；静态奶油色高亮块（About/Join/Innovation 序号徽章、Contact Passion 卡）→ `bg-[var(--accent)]`。 +- 英雄区/区块渐变遮罩：白底遮罩改为 `color-mix(in srgb, var(--bg-primary) NN%, transparent)`，奶油渐变改为 `var(--bg-secondary)`，均随主题淡入背景。 +- Header 吸顶与移动菜单底色 → `var(--header-bg)`。 +- **关键边界**：奶油实心按钮（Home 联系 CTA、Business CTA）保留 `text-[var(--brand-black)]`——浅奶油底配深字在两种主题都可读，若误改成浅字会在暗色下"浅字叠浅底"翻车（已修复一处该回归）。 + +## 4. 赛道色单源（`--track-*` 成为唯一来源） +- 新增 `src/lib/tracks.ts`：`TRACK_TOKEN` 把 social/career/payment/ai 映射到 `var(--track-*)`。 +- `i18n` 的 `business.tracks[]` 加 `key` 字段、**删除**原先写死的粉彩 `color` 字段（即那套双源粉彩）。Home/Business 改用 `TRACK_TOKEN[track.key]`，卡片底色（`color-mix` 深色调）与圆点 accent 现在共享同一 token，永不漂移。 + +## 5. Footer 清理 +- 残留 `📍` emoji → lucide `MapPin`；硬编码 `rgba(26,26,26,0.40)` 的标语文字 → `var(--text-muted)`（暗色下原本会不可见）。 + +## 验证 +- `npx tsc --noEmit` → 0 错误；`npm run build` → 1821 模块；`[data-theme=dark]` 块与 `#16110e` 已进入 `dist` CSS；**全站 0 emoji**；所有路由 200；改动模块编译干净；主题接线（`baskbuddy-theme`、`data-theme`）在产物 JS 中可查。 +- 说明：暗色**视觉**正确性经逐项推演确认（无 headless 浏览器截图）；请点击顶栏 Sun/Moon/Monitor 按钮实际体验切换。 + +## 仍可继续打磨的方向（可选） +- 把组件里的 `text-[15px]` 等散值逐步替换成本轮新增的 `--fs-*` 刻度（目前令牌已就位，属渐进式重构）。 +- 补一套更完整的暗色对比度走查清单（针对 `.gradient-mesh` / `.text-gradient-warm` 等渐变类在暗色下的表现）。 +- 部署级：确认托管平台的 SPA fallback（已有 `public/_redirects`，nginx/Vercel 规则可补）。 diff --git a/overview-icon-color-audit.md b/overview-icon-color-audit.md new file mode 100644 index 0000000..02481ee --- /dev/null +++ b/overview-icon-color-audit.md @@ -0,0 +1,47 @@ +# 色彩 & 图标审计与修复 — bashi-website + +> 角色：像素君（UI Designer）｜审计依据：Impeccable + UI/UX Pro Max 设计规范 + +## 已修复（明确违规 / 无障碍硬伤） + +### 1. 图标：Emoji → 真实 SVG +- **Join.tsx 福利区** 原用 emoji `⏰🏠💪🎉📚`，违反「禁止 emoji 作图标」规范。 +- 安装 **lucide-react 1.25.0**，替换为 `Clock / Home / Dumbbell / PartyPopper / BookOpen`，置于 `#brand-cream-light` 圆角方块中，与全站图标语言一致。 + +### 2. 图标：唤醒沉睡的 `icon` 数据 +- `i18n/{zh,en}.ts` 中每个产品都带 `icon: 'heart'|'music'|…` 字段，但**从未渲染**。 +- `Business.tsx` 新增 `productIcon` 映射，给每个产品芯片渲染真实 lucide 图标 + （heart/music/sparkles/briefcase/mountain/footprints/rocket/check-circle→CircleCheck/bot/ear）。 + +### 3. 色彩：状态徽章对比度硬伤（WCAG AA 失败） +- `.status-developing` 原为 **奶油色文字 `#F5DEB3` 叠在近透明奶油底** → 白底上约 **1.3:1**，文字几乎不可见。 +- 修复：`color-mix(... cream-deep 20% + bg-primary)` 底 + `#8A6A2F` 文字（≈ **4.9:1**，通过）。 +- `.status-planned` 文字加深到 `#1D4ED8`，留足 AA 余量。 + +### 4. 色彩：暖白微调 +- `--brand-white` 由 `#FFFFFF` → `#FCFBF8`，与奶油暖调主题更协调（纯白在「温暖未来主义」里偏冷）。 + +## 验证 +- `npx tsc --noEmit` → 0 错误 +- `npm run build` → 1819 模块（lucide 已打包） +- 开发服务器 `/business`、`/join` 模块编译通过，全站页面 200 + +## 待你拍板（未改，属品牌级决策） + +### A. 赛道色存在「双套定义」不一致 +| 位置 | 社交 | 职场 | 支付 | AI | +|------|------|------|------|-----| +| 赛道卡片（Home/Business/Innovation） | `#E8A0BF` 粉 | `#7EC8E3` 青 | `#98D8AA` 薄荷 | `#C9B1FF` 薰衣草 | +| 全局强调 token `--track-*` | `#EF4444` 红 | `#2563EB` 蓝 | `#10B981` 翠 | `#8B5CF6` 紫 | + +- 卡片用的是柔和粉彩，强调 token 是 Tailwind 默认饱和色，**色相不一致**（尤其「社交」= 粉 vs 红）。 +- **建议**：统一为一套色相（例如让全局强调 token 与粉彩共享色相，仅提高饱和度用于小面积强调）。 +- 需要你确认方向后我再改——这是品牌视觉基调，不想擅自重绘。 + +### B. 手写内联 SVG +- `Header / Contact / NotFound` 用的是手写 24×24 描边 SVG，风格一致、无问题；可选统一换成 lucide 做单一图标源。 + +## 你需要告诉我的 +1. 赛道色要不要统一？统一到「粉彩色相」还是维持饱和色相？ +2. 是否要把手写 SVG 也换成 lucide（单一图标源）？ +3. 是否需要我补充一个 **SPA fallback** 部署配置（nginx / vercel / netlify），否则生产环境深链接 404。 diff --git a/overview.md b/overview.md new file mode 100644 index 0000000..a1e5d16 --- /dev/null +++ b/overview.md @@ -0,0 +1,25 @@ +# bashi-website — Migrated to Pure React (Vite + React Router) + +The site was migrated from **Astro 5** to a **pure React SPA** (Vite + React Router + Tailwind v4), so every page route is now a real `.tsx` file as requested. + +## What changed +- **Removed**: all `.astro` files (`src/pages/*.astro`, `src/pages/en/*.astro`, `src/layouts/BaseLayout.astro`), `astro.config.mjs`, and `scripts/`. Zero Astro dependencies remain in `package.json`. +- **Added**: Vite + React Router toolchain, `src/main.tsx`, `src/App.tsx` (routes), `src/layout/RootLayout.tsx`, `src/hooks/useClientEffects.ts`, `src/seo/Seo.tsx`, and 8 `src/pages/*.tsx` route wrappers. +- **Reused unchanged**: `src/styles/global.css` (full BaskBuddy design system), all existing React components (`Home/About/Business/Contact/Innovation/Join/Privacy/NotFound/Header/Footer/SiteShell`), and the i18n catalogs (`zh.ts`/`en.ts`). + +## Architecture +- `zh` at `/` & `/{page}`, `en` at `/en/{page}`, unknown paths → 404. +- `RootLayout` keeps `Header`/`Footer` mounted across navigations and replays the `page-enter` animation on routed content. +- `useClientEffects(pathname)` ports the interaction logic that previously lived in Astro's `