feat(public-frontend): 公开前端 UI 视觉升级 #22

2026-06-24T11:17:48+08:00

lixu commented

2026-06-24 11:17:48 +08:00

Summary

公开前端(public-frontend/,即 goods.tangshasha.com)此前风格偏朴素(灰底白卡、系统字体)。本 PR 引入一套统一的品牌设计系统并套用到所有页面,在不增加功能、不改 API 的前提下提升视觉质感。纯前端样式改动。

设计系统(基础设施)

tailwind.config.js: 新增 brand 色阶(50–900,翠绿/teal)、Inter 字体、三档阴影(card/card-hover/glow)、2xl/3xl 圆角、fade-up 入场动效。
index.html: 引入 Inter 字体 + theme-color/description meta。
index.css: 双径向渐变背景,新增 @layer components 复用类 .card / .input / .btn-primary / .btn-ghost / .chip。

页面套用

App.tsx: 顶栏改为 sticky + 毛玻璃,logo 渐变图标,导航 active 态,页脚收录数胶囊徽章。
Home.tsx: 重做 hero(渐变标题「天工」、徽章、搜索框 + 示例 chips),未搜索时展示三张特性卡;搜索结果列表加 hover 与箭头指示。
ProductView.tsx / Contribute.tsx / ApiDocs.tsx / Account.tsx: 统一套用 .card/.input/.btn-primary,徽章改为 rounded-full brand 配色,emerald 硬编码替换为 brand 色阶。

验证

npm run build(tsc + vite build)通过。
dev server 逐页人工验证:首页/搜索、商品详情、贡献表单、API 文档、API 密钥,功能均正常。

## Summary 公开前端(`public-frontend/`,即 goods.tangshasha.com)此前风格偏朴素(灰底白卡、系统字体)。本 PR 引入一套统一的品牌设计系统并套用到所有页面,在不增加功能、不改 API 的前提下提升视觉质感。纯前端样式改动。 **设计系统(基础设施)** - `tailwind.config.js`: 新增 `brand` 色阶(50–900,翠绿/teal)、`Inter` 字体、三档阴影(`card`/`card-hover`/`glow`)、`2xl/3xl` 圆角、`fade-up` 入场动效。 - `index.html`: 引入 Inter 字体 + `theme-color`/`description` meta。 - `index.css`: 双径向渐变背景,新增 `@layer components` 复用类 `.card` / `.input` / `.btn-primary` / `.btn-ghost` / `.chip`。 **页面套用** - `App.tsx`: 顶栏改为 sticky + 毛玻璃,logo 渐变图标,导航 active 态,页脚收录数胶囊徽章。 - `Home.tsx`: 重做 hero(渐变标题「天工」、徽章、搜索框 + 示例 chips),未搜索时展示三张特性卡;搜索结果列表加 hover 与箭头指示。 - `ProductView.tsx` / `Contribute.tsx` / `ApiDocs.tsx` / `Account.tsx`: 统一套用 `.card`/`.input`/`.btn-primary`,徽章改为 rounded-full brand 配色,emerald 硬编码替换为 brand 色阶。 **验证** - `npm run build`(tsc + vite build)通过。 - dev server 逐页人工验证:首页/搜索、商品详情、贡献表单、API 文档、API 密钥,功能均正常。

lixu added 1 commit 2026-06-24 11:17:49 +08:00

feat(public-frontend): 公开前端 UI 视觉升级

CI / Go (api) (pull_request) Failing after 32s

Details

CI / Python (ingestion) (pull_request) Failing after 31s

Details

CI / Migrations (postgres) (pull_request) Failing after 32s

Details

d58f46bc80

引入统一品牌主题(色阶/字体/阴影/动效),重做首页 hero、卡片、导航与页脚,统一各页面的卡片/输入框/按钮样式。

- tailwind: 新增 brand 色阶、Inter 字体、card/glow 阴影与 fade-up 动效
- index.html: 引入 Inter 字体与 theme-color/description meta
- index.css: 双径向渐变背景 + @layer 组件类(.card/.input/.btn-primary 等)
- App/Home/ProductView/Contribute/ApiDocs/Account: 套用新设计系统

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

lixu merged commit dbbad274b6 into main

2026-06-24 12:36:17 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lixu/goods#22