abingyydsandClaude Sonnet 4.6
01405ca8cf
- 新增 4 套主题模板：starter/default/dark/minimal - Starter: 毛玻璃 + GradientText + SpotlightCard (原有风格) - Default: Aurora 极光背景 + SplitText + TiltedCard - Dark: Particles 粒子 + DecryptedText 赛博朋克风格 - Minimal: 极简优雅 + FadeContent 淡入动画 - 新增 i18n 中英双语支持 (i18next + browser-languagedetector) - 新增 ThemeProvider 运行时主题切换 (根据 theme_template 字段) - 新增 11 个 react-bits 动画组件 - 所有页面文案国际化 (Login/Register/Dashboard/Tokens/Pricing/Packages) - 新增 README.md + README.zh.md 含主题切换指南 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
121 lines
3.9 KiB
Markdown
121 lines
3.9 KiB
Markdown
# SubRouter 分站前端模板
|
||
|
||
SubRouter 分销商的开源前端模板。基于 React、Vite、Tailwind CSS 和 [react-bits](https://github.com/DavidHDev/react-bits) 动画组件构建。
|
||
|
||
## 功能特性
|
||
|
||
- **4 套内置主题模板** — Starter、默认主题、暗色主题（赛博朋克）、极简主题
|
||
- **中英双语** — 根据浏览器语言自动切换
|
||
- 暗色优先的毛玻璃设计
|
||
- 丰富的动画效果：渐变文字、聚光卡片、粒子背景、极光效果
|
||
- 用户注册、登录和控制台
|
||
- API 密钥管理
|
||
- 模型定价表
|
||
- 套餐订阅
|
||
- 完全响应式
|
||
- OpenAI 兼容 API 端点展示
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 开发服务器（端口 3001，/api 代理到 localhost:3000）
|
||
npm run dev
|
||
|
||
# 生产构建
|
||
npm run build
|
||
```
|
||
|
||
## 主题模板
|
||
|
||
dist-site 包含 **4 套内置主题模板**，每套有独特的视觉风格。主题由分销商在管理面板中选择，运行时动态加载。
|
||
|
||
### 可用主题
|
||
|
||
| 主题 | 值 | 描述 |
|
||
|------|-----|------|
|
||
| **Starter** | `starter` | 原始毛玻璃设计，渐变文字、聚光卡片、星光边框。靛蓝/紫色配色。 |
|
||
| **默认主题** | `default` | 极光动画背景，文字拆分动画、倾斜卡片、旋转特性文字。多彩渐变。 |
|
||
| **暗色主题** | `dark` | 赛博朋克/终端风格，粒子背景、解密文字动画、等宽字体。绿色强调色。 |
|
||
| **极简主题** | `minimal` | 简洁优雅设计，淡入动画、编号特性列表、极简边框。最大留白。 |
|
||
|
||
### 如何切换主题
|
||
|
||
#### 方式一：管理面板（推荐）
|
||
|
||
1. 登录 SubRouter 主管理面板
|
||
2. 进入 **分站设置**
|
||
3. 找到 **主题模板** 下拉框
|
||
4. 选择你喜欢的主题
|
||
5. 点击 **保存** — 立即生效
|
||
|
||
#### 方式二：API
|
||
|
||
```bash
|
||
# 通过 API 更新主题
|
||
curl -X PUT /api/distributor/self \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"theme_template": "dark"}'
|
||
```
|
||
|
||
可选值：`starter`、`default`、`dark`、`minimal`
|
||
|
||
### 工作原理
|
||
|
||
所有 4 套主题编译到同一个构建中。dist-site 从 `/api/dist/site/info` 接口读取 `theme_template` 字段，通过 React lazy loading 动态加载对应的 Layout 和 Home 组件。共享页面（登录、注册、控制台、令牌、定价、套餐）在所有主题中保持一致。
|
||
|
||
## 国际化（i18n）
|
||
|
||
dist-site 支持 **中文 (zh)** 和 **英文 (en)**，自动检测浏览器语言。
|
||
|
||
- 翻译文件：`src/i18n/locales/en.json` 和 `src/i18n/locales/zh.json`
|
||
- 使用 [i18next](https://www.i18next.com/) + [react-i18next](https://react.i18next.com/)
|
||
- 从 `navigator.language` 自动检测语言
|
||
- 不支持的语言回退到英文
|
||
|
||
### 添加新语言
|
||
|
||
1. 复制 `src/i18n/locales/en.json` 到 `src/i18n/locales/{lang}.json`
|
||
2. 翻译所有值
|
||
3. 在 `src/i18n/index.js` 中导入：
|
||
```js
|
||
import fr from './locales/fr.json';
|
||
// 添加到 resources：
|
||
resources: { en, zh, fr },
|
||
```
|
||
|
||
## 自定义主题
|
||
|
||
### 创建自定义主题
|
||
|
||
1. 创建新目录：`src/themes/my-theme/`
|
||
2. 创建 `Layout.jsx` 和 `Home.jsx`（从现有主题复制）
|
||
3. 在 `src/context/ThemeContext.jsx` 中注册：
|
||
```js
|
||
const themeRegistry = {
|
||
// ... 现有主题
|
||
'my-theme': {
|
||
Home: React.lazy(() => import('../themes/my-theme/Home')),
|
||
Layout: React.lazy(() => import('../themes/my-theme/Layout')),
|
||
},
|
||
};
|
||
```
|
||
4. 在管理面板的下拉框 `web/src/pages/Setting/DistributorSettings.jsx` 中添加选项
|
||
5. 运行 `npm run build`
|
||
|
||
## 技术栈
|
||
|
||
- [React 18](https://react.dev) + [Vite](https://vitejs.dev)
|
||
- [Tailwind CSS](https://tailwindcss.com)
|
||
- [motion/react](https://motion.dev) (Framer Motion)
|
||
- [i18next](https://www.i18next.com/) + [react-i18next](https://react.i18next.com/)
|
||
- [OGL](https://github.com/oframe/ogl) (WebGL 极光/粒子效果)
|
||
- [react-hot-toast](https://react-hot-toast.com)
|
||
- [react-bits](https://github.com/DavidHDev/react-bits) 动画组件
|
||
|
||
## 许可证
|
||
|
||
MIT
|