feat: 删除无用文件;优化面具设置
This commit is contained in:
parent
d44aa0af82
commit
bcfcae0793
99
README.md
99
README.md
|
|
@ -4,10 +4,9 @@
|
|||
|
||||
## 功能特性
|
||||
|
||||
- 🎮 **多平台社交登录**: 支持Discord、Google、Apple登录
|
||||
- 🎮 **多平台社交登录**: 支持Discord、Google登录
|
||||
- 🔐 **完整认证流程**: OAuth2.0认证，JWT token管理
|
||||
- 📱 **设备管理**: 自动设备ID生成和管理
|
||||
- 🎭 **开发环境Mock**: 使用MSW进行API模拟
|
||||
- 🛡️ **中间件保护**: 路由级别的认证保护
|
||||
|
||||
## 快速开始
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
### 1. 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 2. 环境变量配置
|
||||
|
|
@ -46,27 +45,20 @@ DISCORD_CLIENT_SECRET=your_discord_client_secret_here
|
|||
# 应用URL（生产环境需要修改）
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||
|
||||
# 开发环境Mock配置
|
||||
NEXT_PUBLIC_ENABLE_MOCK=true
|
||||
```
|
||||
|
||||
#### 其他OAuth配置（可选）
|
||||
|
||||
```env
|
||||
````env
|
||||
# Google OAuth（未来支持）
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
|
||||
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
|
||||
|
||||
# Apple OAuth（未来支持）
|
||||
NEXT_PUBLIC_APPLE_CLIENT_ID=your_apple_client_id_here
|
||||
APPLE_CLIENT_SECRET=your_apple_client_secret_here
|
||||
```
|
||||
|
||||
### 3. 启动开发服务器
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
pnpm run dev
|
||||
````
|
||||
|
||||
应用将在 http://localhost:3000 启动。
|
||||
|
||||
|
|
@ -97,40 +89,6 @@ npm run dev
|
|||
- 前端保存token并重定向到首页
|
||||
- 完成整个登录流程
|
||||
|
||||
## 开发环境Mock
|
||||
|
||||
项目使用MSW进行API模拟，在开发环境中：
|
||||
|
||||
- 设置 `NEXT_PUBLIC_ENABLE_MOCK=true` 启用Mock
|
||||
- 所有认证API请求都会被MSW拦截并返回模拟数据
|
||||
- 支持Discord、Google、Apple等第三方登录的模拟
|
||||
|
||||
### Mock功能特性
|
||||
|
||||
- ✅ 设备ID验证
|
||||
- ✅ 第三方登录模拟
|
||||
- ✅ Token管理
|
||||
- ✅ 用户信息管理
|
||||
- ✅ 错误场景模拟
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── app/ # Next.js App Router
|
||||
│ ├── (auth)/ # 认证相关页面
|
||||
│ ├── (main)/ # 主应用页面
|
||||
│ └── api/ # API路由
|
||||
├── components/ # 可复用组件
|
||||
├── lib/ # 工具库
|
||||
│ ├── auth/ # 认证管理
|
||||
│ ├── http/ # HTTP客户端
|
||||
│ └── oauth/ # OAuth服务
|
||||
├── services/ # 业务服务
|
||||
├── mocks/ # MSW Mock配置
|
||||
└── types/ # TypeScript类型定义
|
||||
```
|
||||
|
||||
## API文档
|
||||
|
||||
### 认证相关API
|
||||
|
|
@ -167,53 +125,6 @@ Headers:
|
|||
AUTH_DID: "设备ID"
|
||||
```
|
||||
|
||||
## 贡献指南
|
||||
|
||||
1. Fork本项目
|
||||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. 推送分支 (`git push origin feature/AmazingFeature`)
|
||||
5. 创建Pull Request
|
||||
|
||||
## 许可证
|
||||
|
||||
本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
|
||||
|
||||
## 文案清单导出（一次性盘点）
|
||||
|
||||
为便于产品/运营统一校对当前所有展示文案，项目提供静态扫描脚本，自动抽取源码中的用户可见与可感知文案并导出为 Excel。
|
||||
|
||||
### 覆盖范围
|
||||
|
||||
- JSX 文本节点与按钮/链接文案
|
||||
- 属性文案：`placeholder` / `title` / `alt` / `aria-*` / `label`
|
||||
- 交互文案：`toast.*` / `message.*` / `alert` / `confirm` / `Dialog`/`Tooltip` 等常见调用
|
||||
- 表单校验与错误提示：`form.setError(..., { message })`、校验链条中的 `{ message: '...' }`
|
||||
|
||||
### 运行
|
||||
|
||||
```bash
|
||||
# 生成 docs/copy-audit.xlsx
|
||||
npx ts-node scripts/extract-copy.ts # 若 ESM 运行报错，请改用下行
|
||||
node scripts/extract-copy.cjs
|
||||
```
|
||||
|
||||
输出文件：`docs/copy-audit.xlsx`
|
||||
|
||||
### Excel 字段说明（Sheet: copy）
|
||||
|
||||
- `route`: Next.js App Router 路由（如 `(main)/home`）或 `shared`
|
||||
- `file`: 文案所在文件（相对仓库根路径）
|
||||
- `componentOrFn`: 组件或函数名（无法解析时为文件名）
|
||||
- `kind`: 文案类型（`text` | `placeholder` | `title` | `alt` | `aria` | `label` | `toast` | `dialog` | `error` | `validation`）
|
||||
- `keyOrLocator`: 定位信息（如 `Button.placeholder`、`toast.success`）
|
||||
- `text`: 实际文案内容
|
||||
- `line`: 文案起始行号（近似定位）
|
||||
- `count`: 在同一路由下相同文案出现次数（已聚合）
|
||||
- `notes`: 预留备注
|
||||
|
||||
### 说明与边界
|
||||
|
||||
- 仅提取可静态分析到的硬编码字符串；运行时拼接（仅变量）无法还原将被忽略
|
||||
- 会过滤明显的“代码样”字符串（如过长的标识符）
|
||||
- 扫描目录为 `src/`，忽略 `node_modules/.next/__tests__/mocks` 等
|
||||
|
|
|
|||
|
|
@ -1,256 +0,0 @@
|
|||
# AI 建议回复功能重构说明
|
||||
|
||||
## 重构日期
|
||||
|
||||
2025-11-17
|
||||
|
||||
## 最新更新
|
||||
|
||||
2025-11-17 - 优化请求逻辑，确保每次只发送 3 次 API 请求
|
||||
|
||||
## 问题描述
|
||||
|
||||
重构前的 AI 建议功能存在以下问题：
|
||||
|
||||
1. **状态管理复杂**：维护了大量状态（`allSuggestions`、`loadedPages`、`batchNo`、`excContentList`、`isPageLoading`、`isRequesting` 等）
|
||||
2. **页面切换逻辑复杂**：需要跟踪哪些页面已加载，切换时判断是否显示骨架屏
|
||||
3. **显示逻辑不清晰**：`isLoading` 只在首次加载时为 true，分页切换时骨架屏显示不正确
|
||||
4. **用户体验问题**：会出现 AI 辅助提示为空的情况（如图所示）
|
||||
|
||||
## 重构目标
|
||||
|
||||
1. **简化状态管理**：只保留必要的状态
|
||||
2. **统一交互逻辑**：每次打开建议面板时，重置到第1页并重新获取数据
|
||||
3. **清晰的骨架屏显示**：数据未加载完成时始终显示骨架屏
|
||||
|
||||
## 重构内容
|
||||
|
||||
### 1. `useAiReplySuggestions` Hook 重构
|
||||
|
||||
#### 状态简化
|
||||
|
||||
**重构前：**
|
||||
|
||||
```typescript
|
||||
const [allSuggestions, setAllSuggestions] = useState<ReplySuggestion[]>([])
|
||||
const [loadedPages, setLoadedPages] = useState<Set<number>>(new Set([1]))
|
||||
const [isPageLoading, setIsPageLoading] = useState(false)
|
||||
const [isRequesting, setIsRequesting] = useState(false)
|
||||
// ... 其他状态
|
||||
```
|
||||
|
||||
**重构后：**
|
||||
|
||||
```typescript
|
||||
const [pageData, setPageData] = useState<Map<number, ReplySuggestion[]>>(new Map())
|
||||
const [loadingPages, setLoadingPages] = useState<Set<number>>(new Set())
|
||||
// ... 其他必要状态
|
||||
```
|
||||
|
||||
#### 核心逻辑变化
|
||||
|
||||
**重构前：**
|
||||
|
||||
- `showSuggestions` 函数会根据多种条件判断是否需要获取数据
|
||||
- 首次获取第1页数据，然后静默获取第2、3页
|
||||
- 页面切换时复杂的加载状态判断
|
||||
|
||||
**重构后：**
|
||||
|
||||
- **每次调用 `showSuggestions` 都重置到第1页并重新获取所有数据**
|
||||
- 按页存储数据到 `Map` 中，逻辑更清晰
|
||||
- 页面切换时自动检查并加载缺失的页面数据
|
||||
|
||||
### 2. 数据获取流程优化
|
||||
|
||||
#### 重构前流程
|
||||
|
||||
1. 获取第1页 → 立即展示
|
||||
2. 静默获取第2页 → 更新 `loadedPages`
|
||||
3. 静默获取第3页 → 更新 `loadedPages`
|
||||
4. 用户切换页面时检查 `loadedPages`
|
||||
|
||||
#### 重构后流程
|
||||
|
||||
1. 清空旧数据
|
||||
2. 获取第1页 → 存入 `pageData.set(1, ...)`
|
||||
3. 获取第2页 → 存入 `pageData.set(2, ...)`
|
||||
4. 获取第3页 → 存入 `pageData.set(3, ...)`
|
||||
5. 用户切换页面时从 `pageData` 读取，无数据则显示骨架屏
|
||||
|
||||
### 3. 骨架屏显示逻辑
|
||||
|
||||
**重构前：**
|
||||
|
||||
```typescript
|
||||
const displaySuggestions = isCurrentPageLoaded ? suggestions : Array.from({ length: 3 }, ...);
|
||||
```
|
||||
|
||||
**重构后：**
|
||||
|
||||
```typescript
|
||||
const suggestions =
|
||||
isCurrentPageLoading || !currentPageSuggestions
|
||||
? Array.from({ length: 3 }, (_, index) => ({
|
||||
id: `skeleton-${currentPage}-${index}`,
|
||||
text: '',
|
||||
isSkeleton: true,
|
||||
}))
|
||||
: currentPageSuggestions
|
||||
```
|
||||
|
||||
UI 组件根据 `isSkeleton` 标志渲染骨架屏或真实内容。
|
||||
|
||||
### 4. UI 组件更新
|
||||
|
||||
`AiReplySuggestions.tsx` 更新：
|
||||
|
||||
- 添加 `isSkeleton` 字段到 `ReplySuggestion` 接口
|
||||
- 检查 `suggestions.some(s => s.isSkeleton)` 决定是否显示骨架屏
|
||||
- 骨架屏添加 `animate-pulse` 动画效果
|
||||
|
||||
## 重构优势
|
||||
|
||||
### 1. **简化的状态管理**
|
||||
|
||||
- 使用 `Map<number, ReplySuggestion[]>` 按页存储数据，结构清晰
|
||||
- 移除了 `isRequesting`、`isPageLoading`、`isCurrentPageLoaded` 等冗余状态
|
||||
- 只需维护 `loadingPages: Set<number>` 来跟踪正在加载的页面
|
||||
|
||||
### 2. **智能的数据管理**
|
||||
|
||||
- **有新 AI 消息时**：重置到第1页并重新获取数据
|
||||
- **没有新消息时**：保留之前的建议内容和当前页面位置
|
||||
- 避免了"空白建议"的问题
|
||||
- 数据加载状态清晰可见（骨架屏动画）
|
||||
|
||||
### 3. **更可靠的数据加载**
|
||||
|
||||
- 智能判断是否需要重新获取数据（基于最后一条 AI 消息 ID）
|
||||
- 首次打开或数据为空时自动获取
|
||||
- 减少了因状态不同步导致的 bug
|
||||
|
||||
### 4. **更好的代码可维护性**
|
||||
|
||||
- 代码从 312 行减少到 200 行
|
||||
- 逻辑流程更清晰直观
|
||||
- 减少了状态依赖和副作用
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 场景1：首次打开建议面板（渐进式加载）
|
||||
|
||||
1. **点击建议按钮** → 面板打开，重置到第1页，显示骨架屏
|
||||
2. **~500ms 后第1页数据返回** → ✨ **立即展示第1页的3条建议**（用户可以开始浏览）
|
||||
3. **后台继续获取第2、3页** → 不阻塞用户交互
|
||||
4. **点击下一页** → 切换到第2页
|
||||
- 如果第2页数据已加载 → 立即显示
|
||||
- 如果第2页数据未加载 → 显示骨架屏（通常第2页已在后台加载完成）
|
||||
|
||||
### 场景2：关闭后再次打开（无新消息）
|
||||
|
||||
1. **关闭建议面板**
|
||||
2. **再次点击建议按钮** → 面板打开
|
||||
3. **保留上次的内容和页面位置**（比如之前在第2页，现在仍在第2页）
|
||||
4. **无需重新加载数据**，立即显示缓存的建议
|
||||
|
||||
### 场景3：收到新 AI 消息后打开
|
||||
|
||||
1. **用户发送消息，AI 回复**
|
||||
2. **点击建议按钮** → 面板打开
|
||||
3. **检测到新的 AI 消息** → 重置到第1页，显示骨架屏
|
||||
4. **重新获取所有建议数据**（基于最新的对话内容）
|
||||
|
||||
### 场景4：面板已打开时收到新 AI 消息
|
||||
|
||||
1. **建议面板已打开**（比如用户正在浏览第2页）
|
||||
2. **用户发送消息，AI 回复**
|
||||
3. **自动刷新建议数据** → **保持在当前页面**（第2页），不强制切回第1页
|
||||
4. **渐进式加载新数据**，用户可以继续浏览当前页
|
||||
|
||||
## API 返回值变化
|
||||
|
||||
Hook 返回的接口保持不变，确保向后兼容：
|
||||
|
||||
```typescript
|
||||
return {
|
||||
suggestions, // ReplySuggestion[] (包含 isSkeleton 标志)
|
||||
currentPage, // number
|
||||
totalPages, // number
|
||||
isLoading, // boolean (只要有页面在加载就为 true)
|
||||
isVisible, // boolean
|
||||
showSuggestions, // () => void
|
||||
hideSuggestions, // () => void
|
||||
handlePageChange, // (page: number) => void
|
||||
}
|
||||
```
|
||||
|
||||
移除的返回值：
|
||||
|
||||
- `isPageLoading`
|
||||
- `isCurrentPageLoaded`
|
||||
- `refreshSuggestions`
|
||||
|
||||
## 关键优化点
|
||||
|
||||
### 避免多次请求的设计
|
||||
|
||||
**问题**：原始实现会触发多次重复请求
|
||||
|
||||
**解决方案**：
|
||||
|
||||
1. **统一的 `fetchAllData` 函数**：一次性顺序获取3页数据，使用局部变量传递 `batchNo` 和 `excContentList`
|
||||
2. **防重复调用保护**：在 `fetchAllData` 开始时检查 `loadingPages.size > 0`，如果已有加载则跳过
|
||||
3. **移除分页独立加载**：删除了 `fetchPageData` 函数和 `handlePageChange` 中的数据获取逻辑
|
||||
4. **简化页面切换**：`handlePageChange` 只负责切换 `currentPage`，不触发数据加载
|
||||
|
||||
### 渐进式加载流程
|
||||
|
||||
采用**渐进式加载**策略，让用户尽早看到数据，提升体验：
|
||||
|
||||
```typescript
|
||||
fetchAllData() {
|
||||
// 1. 检查防重复
|
||||
if (loadingPages.size > 0) return;
|
||||
|
||||
// 2. 标记所有页面为加载中
|
||||
setLoadingPages(new Set([1, 2, 3]));
|
||||
|
||||
// 3. 获取第1页 → 立即展示
|
||||
const response1 = await genSupContentV2({ aiId, excContentList: [] });
|
||||
setPageData(new Map([[1, response1]])); // ✨ 立即展示第1页
|
||||
setLoadingPages(new Set([2, 3])); // 标记第1页已完成
|
||||
|
||||
// 4. 获取第2页 → 追加展示
|
||||
const response2 = await genSupContentV2({ aiId, batchNo, excContentList: [response1] });
|
||||
setPageData(prev => prev.set(2, response2)); // ✨ 追加第2页
|
||||
setLoadingPages(new Set([3])); // 标记第2页已完成
|
||||
|
||||
// 5. 获取第3页 → 追加展示
|
||||
const response3 = await genSupContentV2({ aiId, batchNo, excContentList: [response1, response2] });
|
||||
setPageData(prev => prev.set(3, response3)); // ✨ 追加第3页
|
||||
setLoadingPages(new Set()); // 全部完成
|
||||
}
|
||||
```
|
||||
|
||||
**关键优势**：
|
||||
|
||||
- 🚀 **第1页数据到达后立即展示**，用户无需等待所有数据
|
||||
- 📊 **后续页面数据追加展示**，不影响用户浏览第1页
|
||||
- ⏱️ **感知加载时间更短**，提升用户体验
|
||||
- 🔄 **页面2、3可以并行渲染**，用户切换时自动显示骨架屏
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **精确的请求次数**：每次调用 `fetchAllData` 只会发送 **3 次** API 请求（第1、2、3页）
|
||||
2. **智能缓存策略**：没有新 AI 消息时，复用已有数据，不发送请求
|
||||
3. **网络失败处理**：任一页面加载失败会中断整个流程并清空数据
|
||||
4. **Coin 不足处理**：任何页面触发 Coin 不足错误都会关闭整个建议面板
|
||||
5. **防重复保护**：通过 `loadingPages.size` 检查防止并发调用
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. 测试正常流程：打开建议 → 浏览3页 → 关闭 → 再次打开
|
||||
2. 测试网络慢场景：确认骨架屏正确显示
|
||||
3. 测试 Coin 不足场景：确认面板正确关闭
|
||||
4. 测试新消息场景：发送消息后面板已打开时自动刷新
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
# AI建议回复功能实现
|
||||
|
||||
## 功能概述
|
||||
|
||||
根据Figma设计稿实现了AI建议回复功能，用户可以在聊天界面中获取AI生成的回复建议，提高聊天效率。
|
||||
|
||||
## 实现组件
|
||||
|
||||
### 1. AiReplySuggestions.tsx
|
||||
|
||||
主要的AI建议回复组件，包含以下功能：
|
||||
|
||||
- 显示多个AI建议选项
|
||||
- 支持编辑建议内容
|
||||
- VIP解锁更多功能入口
|
||||
- 分页导航控制
|
||||
|
||||
### 2. useAiReplySuggestions.ts
|
||||
|
||||
状态管理Hook，处理：
|
||||
|
||||
- AI建议的获取和管理
|
||||
- 分页逻辑
|
||||
- 面板显示/隐藏控制
|
||||
- **自动刷新机制**：当面板打开时收到新AI消息会自动刷新建议
|
||||
|
||||
### 3. ChatInput.tsx（更新）
|
||||
|
||||
集成AI建议功能到聊天输入组件：
|
||||
|
||||
- 添加提示词按钮来触发建议面板
|
||||
- 处理建议选择和应用
|
||||
- 管理面板状态
|
||||
|
||||
## 设计细节
|
||||
|
||||
### 视觉设计
|
||||
|
||||
- 遵循Figma设计稿的视觉样式
|
||||
- 使用毛玻璃效果和圆角设计
|
||||
- 渐变色彩搭配
|
||||
- 响应式布局
|
||||
|
||||
### 交互设计
|
||||
|
||||
- 点击提示词按钮显示/隐藏建议面板
|
||||
- **点击建议卡片：直接发送该建议作为消息**
|
||||
- **点击编辑图标：将建议文案放入输入框进行编辑**
|
||||
- 分页控制支持浏览更多建议
|
||||
- VIP入口引导用户升级
|
||||
|
||||
## 使用方法
|
||||
|
||||
1. 在聊天界面点击输入框右侧的提示词按钮
|
||||
2. 查看AI生成的回复建议
|
||||
3. **直接点击建议卡片可立即发送该消息**
|
||||
4. **点击编辑图标将建议放入输入框进行修改**
|
||||
5. 使用分页控制查看更多建议选项
|
||||
|
||||
## 技术特点
|
||||
|
||||
- TypeScript类型安全
|
||||
- React Hooks状态管理
|
||||
- 响应式设计
|
||||
- 模块化组件结构
|
||||
- 可扩展的API接口设计
|
||||
|
||||
## 核心逻辑
|
||||
|
||||
### 建议获取时机
|
||||
|
||||
- 只有当最后一条消息来自AI（对方）时，才会在打开面板时获取新建议
|
||||
- 如果最后一条消息来自用户，则显示之前缓存的建议或骨架屏
|
||||
- 每次检测到新的AI消息后，第一次打开面板会重新获取建议
|
||||
|
||||
### 骨架屏显示
|
||||
|
||||
- **骨架屏已集成到建议弹窗内部**，不再是独立组件
|
||||
- 在API调用期间显示骨架屏，提升用户体验
|
||||
- 骨架屏固定显示2条建议的布局结构
|
||||
|
||||
### 分页机制
|
||||
|
||||
- **API一次性返回所有建议数据**，不是分页请求
|
||||
- 每页显示2条建议
|
||||
- 根据API返回的总数自动计算页数
|
||||
- **点击左右切换只是前端切换显示，不会重新请求接口**
|
||||
|
||||
### 缓存策略
|
||||
|
||||
- 建议会被缓存，避免重复API调用
|
||||
- 只有检测到新的AI消息时才会清空缓存重新获取
|
||||
- **自动刷新**：当面板已打开且收到新AI消息时，自动刷新建议
|
||||
|
||||
## API集成
|
||||
|
||||
已集成真实的AI建议API（`genSupContentV2`），替换了之前的模拟数据。
|
||||
|
||||
## 后续扩展
|
||||
|
||||
- 添加建议个性化定制
|
||||
- 支持更多建议类型
|
||||
- 添加使用统计和优化
|
||||
- 优化缓存策略和错误处理
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
# AvatarSetting 组件
|
||||
|
||||
这是一个根据Figma设计稿实现的头像设置模态框组件，支持头像预览、编辑、上传和删除功能。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 🖼️ 大尺寸圆形头像预览
|
||||
- ✂️ 头像裁剪功能
|
||||
- 📤 文件上传支持
|
||||
- 🗑️ 头像删除功能
|
||||
- 📱 响应式设计
|
||||
- 🎨 符合设计规范的UI
|
||||
- 🔄 模态框形式，覆盖在页面上
|
||||
|
||||
## 使用方法
|
||||
|
||||
```tsx
|
||||
import AvatarSetting from '@/app/(main)/profile/components/AvatarSetting'
|
||||
|
||||
function ProfilePage() {
|
||||
const [isAvatarSettingOpen, setIsAvatarSettingOpen] = useState(false)
|
||||
const [currentAvatar, setCurrentAvatar] = useState<string>('')
|
||||
|
||||
const handleAvatarChange = (avatarUrl: string) => {
|
||||
setCurrentAvatar(avatarUrl)
|
||||
// 这里可以调用API保存头像
|
||||
}
|
||||
|
||||
const handleAvatarDelete = () => {
|
||||
setCurrentAvatar('')
|
||||
// 这里可以调用API删除头像
|
||||
}
|
||||
|
||||
const openAvatarSetting = () => {
|
||||
setIsAvatarSettingOpen(true)
|
||||
}
|
||||
|
||||
const closeAvatarSetting = () => {
|
||||
setIsAvatarSettingOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 触发按钮 */}
|
||||
<button onClick={openAvatarSetting}>设置头像</button>
|
||||
|
||||
{/* 头像设置模态框 */}
|
||||
<AvatarSetting
|
||||
isOpen={isAvatarSettingOpen}
|
||||
onClose={closeAvatarSetting}
|
||||
currentAvatar={currentAvatar}
|
||||
onAvatarChange={handleAvatarChange}
|
||||
onAvatarDelete={handleAvatarDelete}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ----------------------------- | ----------- | ------------------- |
|
||||
| `isOpen` | `boolean` | `false` | 控制模态框显示/隐藏 |
|
||||
| `onClose` | `() => void` | `undefined` | 关闭模态框的回调 |
|
||||
| `currentAvatar` | `string \| undefined` | `undefined` | 当前头像URL |
|
||||
| `onAvatarChange` | `(avatarUrl: string) => void` | `undefined` | 头像变更回调 |
|
||||
| `onAvatarDelete` | `() => void` | `undefined` | 头像删除回调 |
|
||||
| `className` | `string` | `undefined` | 自定义CSS类名 |
|
||||
|
||||
## 层级关系
|
||||
|
||||
- 头像设置模态框：`z-40`
|
||||
- 头像裁剪弹窗：`z-50`（更高层级）
|
||||
|
||||
## 文件格式支持
|
||||
|
||||
- 支持的格式：JPG、JPEG、PNG
|
||||
- 文件大小限制：5MB
|
||||
- VIP用户支持GIF格式
|
||||
|
||||
## 设计规范
|
||||
|
||||
- 背景色：`#211a2b`
|
||||
- 头像尺寸：512x512px
|
||||
- 按钮渐变：从 `#f264a4` 到 `#c241e6`
|
||||
- 圆角：999px（完全圆形）
|
||||
- 模态框尺寸：800x800px
|
||||
|
||||
## 测试页面
|
||||
|
||||
访问 `/test-avatar-setting` 可以查看组件的演示效果。
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 组件现在是模态框形式，会覆盖在页面上
|
||||
2. 使用现有的 `AvatarCropModal` 组件进行头像裁剪
|
||||
3. 文件上传使用原生的 `input[type="file"]` 实现
|
||||
4. 组件会自动验证文件类型和大小
|
||||
5. 裁剪后的图片会自动转换为圆形
|
||||
6. 裁剪弹窗的层级比头像设置模态框更高
|
||||
|
|
@ -1,197 +0,0 @@
|
|||
# 心动等级头像组件 (CrushLevelAvatar)
|
||||
|
||||
## 概述
|
||||
|
||||
`CrushLevelAvatar` 是一个展示用户与AI角色心动等级的头像组件，根据设计稿实现了双头像重叠布局、心动等级徽章显示以及动画效果。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 1. 状态处理
|
||||
|
||||
- **无等级状态**：只显示AI头像和昵称
|
||||
- **有等级状态**：显示AI和用户双头像，包含心动等级信息
|
||||
|
||||
### 2. 视觉设计
|
||||
|
||||
- **双头像布局**：AI头像和用户头像并排显示，带有白色边框和阴影
|
||||
- **多层背景装饰**：三层渐变圆形背景，从外到内颜色递进
|
||||
- **心动等级徽章**：居中显示的心形徽章，包含等级数字
|
||||
- **角色信息展示**：角色名称和心动温度标签
|
||||
|
||||
### 3. 动画效果
|
||||
|
||||
- **等级变化动画**：心形背景从大到小消失，数字等级渐变切换
|
||||
- **分层延迟**：三层心形背景依次消失（0ms, 100ms, 200ms延迟）
|
||||
- **数字切换**：背景完全消失后，等级数字淡出淡入切换到新等级
|
||||
|
||||
## 组件属性
|
||||
|
||||
```typescript
|
||||
interface CrushLevelAvatarProps {
|
||||
size?: 'large' | 'small' // 头像尺寸
|
||||
showAnimation?: boolean // 是否显示等级变化动画
|
||||
}
|
||||
```
|
||||
|
||||
## 使用示例
|
||||
|
||||
```tsx
|
||||
import CrushLevelAvatar from './components/CrushLevelAvatar';
|
||||
|
||||
// 基础使用
|
||||
<CrushLevelAvatar />
|
||||
|
||||
// 大尺寸带动画
|
||||
<CrushLevelAvatar
|
||||
size="large"
|
||||
showAnimation={true}
|
||||
/>
|
||||
```
|
||||
|
||||
## 依赖要求
|
||||
|
||||
组件需要在以下上下文中使用：
|
||||
|
||||
1. **ChatConfigContext** - 提供AI信息和ID
|
||||
2. **用户认证** - 获取当前用户信息
|
||||
3. **IM服务** - 获取心动等级数据
|
||||
|
||||
## 数据来源
|
||||
|
||||
- `useChatConfig()` - AI信息和聊天配置
|
||||
- `useCurrentUser()` - 当前用户信息
|
||||
- `useGetHeartbeatLevel()` - 心动等级数据
|
||||
- `useHeartLevelTextFromLevel()` - 等级文本转换
|
||||
|
||||
## 样式系统
|
||||
|
||||
### CSS 动画类
|
||||
|
||||
- `.animate-scale-down` - 缩放动画
|
||||
- `.animate-delay-100/200/300` - 动画延迟
|
||||
|
||||
### 颜色设计
|
||||
|
||||
- 外层背景：`from-purple-500/20`
|
||||
- 中层背景：`from-pink-500/30`
|
||||
- 内层背景：`from-magenta-500/40`
|
||||
- 心形徽章：`from-pink-400 to-red-500`
|
||||
|
||||
## 实现细节
|
||||
|
||||
### 背景装饰层
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 心形背景层 - 使用SVG图标 */
|
||||
}
|
||||
;<div
|
||||
className={cn(
|
||||
'pointer-events-none absolute top-[-63px] left-1/2 h-[210px] w-60 -translate-x-1/2',
|
||||
isLevelChanging && showAnimation && 'animate-scale-fade-out'
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src="/icons/crushlevel_heart.svg"
|
||||
alt="heart background"
|
||||
fill
|
||||
className="object-contain opacity-20"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 心动等级徽章
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 心形背景 + 等级数字 */
|
||||
}
|
||||
;<div className="absolute top-1/2 left-1/2 z-10 size-10 -translate-x-1/2 -translate-y-1/2">
|
||||
<Image src="/icons/crushlevel_heart.svg" alt="heart" width={40} height={40} />
|
||||
<div
|
||||
className={cn(
|
||||
'relative z-10 text-base font-bold text-white transition-all duration-300',
|
||||
isLevelChanging && 'animate-level-change'
|
||||
)}
|
||||
key={displayLevel}
|
||||
>
|
||||
{displayLevel?.replace('LEVEL_', '') || '1'}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 动画触发机制
|
||||
|
||||
```tsx
|
||||
// 监听等级变化触发动画
|
||||
useEffect(() => {
|
||||
if (showAnimation && heartbeatLevel && heartbeatLevel !== displayLevel) {
|
||||
setIsLevelChanging(true)
|
||||
setAnimationKey((prev) => prev + 1)
|
||||
|
||||
// 背景消失后更新等级数字
|
||||
setTimeout(() => {
|
||||
setDisplayLevel(heartbeatLevel)
|
||||
setIsLevelChanging(false)
|
||||
}, 600) // 背景消失动画时长
|
||||
}
|
||||
}, [heartbeatLevel, showAnimation, displayLevel])
|
||||
```
|
||||
|
||||
### CSS 动画定义
|
||||
|
||||
```css
|
||||
/* 心形背景消失动画 */
|
||||
@keyframes scale-fade-out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 等级数字变化动画 */
|
||||
@keyframes level-change {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **上下文依赖**：组件必须在正确的 Context 环境中使用
|
||||
2. **性能考虑**：动画效果会增加渲染开销
|
||||
3. **响应式设计**：组件在不同屏幕尺寸下的表现
|
||||
4. **数据安全**：处理用户头像加载失败的情况
|
||||
5. **图标依赖**：需要确保 `/icons/crushlevel_heart.svg` 文件存在
|
||||
|
||||
## 测试
|
||||
|
||||
可以通过访问 `/test-crush-level-avatar` 页面查看组件的不同状态和配置效果。
|
||||
|
||||
### 调试功能
|
||||
|
||||
在浏览器控制台中可以调用以下函数来手动触发动画：
|
||||
|
||||
```javascript
|
||||
window.triggerLevelAnimation() // 触发等级变化动画
|
||||
```
|
||||
|
||||
## 更新历史
|
||||
|
||||
- 2024-01-XX：初始实现，包含基础功能
|
||||
- 2024-01-XX：添加动画效果和背景装饰
|
||||
- 2024-01-XX：优化性能和用户体验
|
||||
|
|
@ -1,404 +0,0 @@
|
|||
# Design Tokens for Website
|
||||
|
||||
This document outlines the design tokens defined in the `Tokens.xlsx` file, including global tokens (base values) and web system tokens (specific to Tailwind CSS integration). The tokens are organized into two sections corresponding to the Excel sheets: `Global tokens` and `Web sys tokens`.
|
||||
|
||||
## Global Tokens
|
||||
|
||||
The `Global tokens` sheet defines foundational design tokens, including colors, transparency, angles, typography, ratios, radii, borders, spacing, and breakpoints. These serve as the base values referenced by other tokens.
|
||||
|
||||
| Type | Token | Value | 移动端约定值 | 有调整会标黄 | 新增会标蓝 | 可不录入的文字会变红 |
|
||||
| ----------- | -------------------------- | ---------------------- | ------------ | ------------ | ---------- | -------------------- |
|
||||
| color | glo.color.orange.0 | #FFECDE | | | | |
|
||||
| | glo.color.orange.10 | #FFD7B8 | | | | |
|
||||
| | glo.color.orange.20 | #FFBF8F | | | | |
|
||||
| | glo.color.orange.30 | #FFA264 | | | | |
|
||||
| | glo.color.orange.40 | #FD8239 | | | | |
|
||||
| | glo.color.orange.50 | #F25E0F | | | | |
|
||||
| | glo.color.orange.60 | #D04500 | | | | |
|
||||
| | glo.color.orange.70 | #A83400 | | | | |
|
||||
| | glo.color.orange.80 | #7B2300 | | | | |
|
||||
| | glo.color.orange.90 | #4D1400 | | | | |
|
||||
| | glo.color.yellow.0 | #FFF8DE | | | | |
|
||||
| | glo.color.yellow.10 | #FFEFB3 | | | | |
|
||||
| | glo.color.yellow.20 | #FFE386 | | | | |
|
||||
| | glo.color.yellow.30 | #FCD258 | | | | |
|
||||
| | glo.color.yellow.40 | #F3BC2A | | | | |
|
||||
| | glo.color.yellow.50 | #E6A100 | | | | |
|
||||
| | glo.color.yellow.60 | #C78800 | | | | |
|
||||
| | glo.color.yellow.70 | #A26B00 | | | | |
|
||||
| | glo.color.yellow.80 | #784D00 | | | | |
|
||||
| | glo.color.yellow.90 | #4D2F00 | | | | |
|
||||
| | glo.color.grass.0 | #F8FFDE | | | | |
|
||||
| | glo.color.grass.10 | #EDFCB8 | | | | |
|
||||
| | glo.color.grass.20 | #E0F68F | | | | |
|
||||
| | glo.color.grass.30 | #CFED67 | | | | |
|
||||
| | glo.color.grass.40 | #BAE041 | | | | |
|
||||
| | glo.color.grass.50 | #A0CD1E | | | | |
|
||||
| | glo.color.grass.60 | #82B500 | | | | |
|
||||
| | glo.color.grass.70 | #689600 | | | | |
|
||||
| | glo.color.grass.80 | #4B7200 | | | | |
|
||||
| | glo.color.grass.90 | #304D00 | | | | |
|
||||
| | glo.color.green.0 | #DEFFE7 | | | | |
|
||||
| | glo.color.green.10 | #B9FCCD | | | | |
|
||||
| | glo.color.green.20 | #94F7B1 | | | | |
|
||||
| | glo.color.green.30 | #6FEE96 | | | | |
|
||||
| | glo.color.green.40 | #4AE27B | | | | |
|
||||
| | glo.color.green.50 | #28D061 | | | | |
|
||||
| | glo.color.green.60 | #0BB84A | | | | |
|
||||
| | glo.color.green.70 | #00983C | | | | |
|
||||
| | glo.color.green.80 | #007331 | | | | |
|
||||
| | glo.color.green.90 | #004D22 | | | | |
|
||||
| | glo.color.mint.0 | #DEFFF8 | | | | |
|
||||
| | glo.color.mint.10 | #B6FBED | | | | |
|
||||
| | glo.color.mint.20 | #8DF3E2 | | | | |
|
||||
| | glo.color.mint.30 | #65E9D5 | | | | |
|
||||
| | glo.color.mint.40 | #3FDAC4 | | | | |
|
||||
| | glo.color.mint.50 | #1DC7B0 | | | | |
|
||||
| | glo.color.mint.60 | #00AD96 | | | | |
|
||||
| | glo.color.mint.70 | #009182 | | | | |
|
||||
| | glo.color.mint.80 | #006F67 | | | | |
|
||||
| | glo.color.mint.90 | #004D49 | | | | |
|
||||
| | glo.color.sky.0 | #DEECFF | | | | |
|
||||
| | glo.color.sky.10 | #B5D2FD | | | | |
|
||||
| | glo.color.sky.20 | #8CB5F9 | | | | |
|
||||
| | glo.color.sky.30 | #6296F2 | | | | |
|
||||
| | glo.color.sky.40 | #3A76E6 | | | | |
|
||||
| | glo.color.sky.50 | #1E58D2 | | | | |
|
||||
| | glo.color.sky.60 | #063BB8 | | | | |
|
||||
| | glo.color.sky.70 | #002A98 | | | | |
|
||||
| | glo.color.sky.80 | #001E73 | | | | |
|
||||
| | glo.color.sky.90 | #00134D | | | | |
|
||||
| | glo.color.blue.0 | #DEE0FF | | | | |
|
||||
| | glo.color.blue.10 | #BCBEFF | | | | |
|
||||
| | glo.color.blue.20 | #9797FF | | | | |
|
||||
| | glo.color.blue.30 | #7370FF | | | | |
|
||||
| | glo.color.blue.40 | #4E48FF | | | | |
|
||||
| | glo.color.blue.50 | #3126E6 | | | | |
|
||||
| | glo.color.blue.60 | #180AC7 | | | | |
|
||||
| | glo.color.blue.70 | #0F00A2 | | | | |
|
||||
| | glo.color.blue.80 | #0D0078 | | | | |
|
||||
| | glo.color.blue.90 | #09004D | | | | |
|
||||
| | glo.color.violet.0 | #E4DEFF | | | | |
|
||||
| | glo.color.violet.10 | #C7B7FD | | | | |
|
||||
| | glo.color.violet.20 | #AA90F9 | | | | |
|
||||
| | glo.color.violet.30 | #8D68F2 | | | | |
|
||||
| | glo.color.violet.40 | #7B47FF | | | | |
|
||||
| | glo.color.violet.50 | #5923D2 | | | | |
|
||||
| | glo.color.violet.60 | #4309B8 | | | | |
|
||||
| | glo.color.violet.70 | #340098 | | | | |
|
||||
| | glo.color.violet.80 | #290073 | | | | |
|
||||
| | glo.color.violet.90 | #1C004D | | | | |
|
||||
| | glo.color.purple.0 | #FBDEFF | | | | |
|
||||
| | glo.color.purple.10 | #F2B7FD | | | | |
|
||||
| | glo.color.purple.20 | #E690F9 | | | | |
|
||||
| | glo.color.purple.30 | #D668F2 | | | | |
|
||||
| | glo.color.purple.40 | #C241E6 | | | | |
|
||||
| | glo.color.purple.50 | #A823D2 | | | | |
|
||||
| | glo.color.purple.60 | #8A09B8 | | | | |
|
||||
| | glo.color.purple.70 | #6E0098 | | | | |
|
||||
| | glo.color.purple.80 | #520073 | | | | |
|
||||
| | glo.color.purple.90 | #36004D | | | | |
|
||||
| | glo.color.magenta.0 | #FBDEFF | | | | |
|
||||
| | glo.color.magenta.10 | #FDB6D3 | | | | |
|
||||
| | glo.color.magenta.20 | #F98DBC | | | | |
|
||||
| | glo.color.magenta.30 | #F264A4 | | | | |
|
||||
| | glo.color.magenta.40 | #E63C8B | | | | |
|
||||
| | glo.color.magenta.50 | #D21F77 | | | | |
|
||||
| | glo.color.magenta.60 | #B80761 | | | | |
|
||||
| | glo.color.magenta.70 | #980050 | | | | |
|
||||
| | glo.color.magenta.80 | #73003E | | | | |
|
||||
| | glo.color.magenta.90 | #4D002A | | | | |
|
||||
| | glo.color.red.0 | #FFDEDE | | | | |
|
||||
| | glo.color.red.10 | #FFBCBC | | | | |
|
||||
| | glo.color.red.20 | #FF9696 | | | | |
|
||||
| | glo.color.red.30 | #F97372 | | | | |
|
||||
| | glo.color.red.40 | #EF4E4D | | | | |
|
||||
| | glo.color.red.50 | #E12A2A | | | | |
|
||||
| | glo.color.red.60 | #C2110E | | | | |
|
||||
| | glo.color.red.70 | #A00700 | | | | |
|
||||
| | glo.color.red.80 | #770800 | | | | |
|
||||
| | glo.color.red.90 | #4D0600 | | | | |
|
||||
| | glo.color.grey.0 | #E8E4EB | | | | |
|
||||
| | glo.color.grey.10 | #D4D0D8 | | | | |
|
||||
| | glo.color.grey.20 | #AAA3B1 | | | | |
|
||||
| | glo.color.grey.30 | #958E9E | | | | |
|
||||
| | glo.color.grey.40 | #847D8B | | | | |
|
||||
| | glo.color.grey.50 | #706A78 | | | | |
|
||||
| | glo.color.grey.60 | #5C5565 | | | | |
|
||||
| | glo.color.grey.70 | #484151 | | | | |
|
||||
| | glo.color.grey.80 | #352E3E | | | | |
|
||||
| | glo.color.grey.90 | #282233 | | | | |
|
||||
| | glo.color.grey.100 | #211A2B | | | | |
|
||||
| | glo.color.white | #FFFFFF | | | | |
|
||||
| | glo.color.black | #000000 | | | | |
|
||||
| Transparent | glo.transparent.t0 | 0 | | | | |
|
||||
| | glo.transparent.t2 | 0.02 | | | | |
|
||||
| | glo.transparent.t4 | 0.04 | | | | |
|
||||
| | glo.transparent.t6 | 0.06 | | | | |
|
||||
| | glo.transparent.t8 | 0.08 | | | | |
|
||||
| | glo.transparent.t12 | 0.12 | | | | |
|
||||
| | glo.transparent.t15 | 0.15 | | | | |
|
||||
| | glo.transparent.t20 | 0.2 | | | | |
|
||||
| | glo.transparent.t25 | 0.25 | | | | |
|
||||
| | glo.transparent.t30 | 0.3 | | | | |
|
||||
| | glo.transparent.t45 | 0.45 | | | | |
|
||||
| | glo.transparent.t65 | 0.65 | | | | |
|
||||
| | glo.transparent.t85 | 0.85 | | | | |
|
||||
| Degree | glo.deg.ltr | to Right | | | | |
|
||||
| | glo.deg.ttb | to Bottom | | | | |
|
||||
| | glo.deg.lttrb | to Bottom Right | | | | |
|
||||
| Typeface | glo.font.family.sys | Poppins | | | | |
|
||||
| | glo.font.family.numDisplay | DIN Alternate | | | | |
|
||||
| | glo.font.family.num | Poppins | | | | |
|
||||
| | glo.font.family.display | Oleo Script Swash Caps | | | | |
|
||||
| | glo.font.style.italic | Italic | | | | |
|
||||
| | glo.font.size.64 | 64 | | | | |
|
||||
| | glo.font.size.48 | 48 | | | | |
|
||||
| | glo.font.size.36 | 36 | | | | |
|
||||
| | glo.font.size.24 | 24 | | | | |
|
||||
| | glo.font.size.20 | 20 | | | | |
|
||||
| | glo.font.size.18 | 18 | | | | |
|
||||
| | glo.font.size.16 | 16 | | | | |
|
||||
| | glo.font.size.14 | 14 | | | | |
|
||||
| | glo.font.size.12 | 12 | | | | |
|
||||
| | glo.font.weight.regular | 400 | | | | |
|
||||
| | glo.font.weight.medium | 500 | | | | |
|
||||
| | glo.font.weight.semibold | 600 | | | | |
|
||||
| | glo.font.weight.bold | 700 | | | | |
|
||||
| | glo.font.lineheight.size64 | 80px | | | | |
|
||||
| | glo.font.lineheight.size48 | 56px | | | | |
|
||||
| | glo.font.lineheight.size36 | 48px | | | | |
|
||||
| | glo.font.lineheight.size24 | 28px | | | | |
|
||||
| | glo.font.lineheight.size20 | 24px | | | | |
|
||||
| | glo.font.lineheight.size18 | 24px | | | | |
|
||||
| | glo.font.lineheight.size16 | 24px | | | | |
|
||||
| | glo.font.lineheight.size14 | 20px | | | | |
|
||||
| | glo.font.lineheight.size12 | 20px | | | | |
|
||||
| | glo.font.lineheight.size0 | 1 | | | | |
|
||||
| radio | glo.radio.1.1 | 1:1 | | | | |
|
||||
| | glo.radio.4.3 | 4:3 | | | | |
|
||||
| | glo.radio.3.2 | 3:2 | | | | |
|
||||
| | glo.radio.2.1 | 2:1 | | | | |
|
||||
| | glo.radio.16.9 | 16:9 | | | | |
|
||||
| radius | glo.radius.4 | 4 | | | | |
|
||||
| | glo.radius.8 | 8 | | | | |
|
||||
| | glo.radius.12 | 12 | | | | |
|
||||
| | glo.radius.16 | 16 | | | | |
|
||||
| | glo.radius.24 | 24 | | | | |
|
||||
| | glo.radius.round | 0.5 | | | | |
|
||||
| border | glo.border.1 | 1px | | | | |
|
||||
| | glo.border.2 | 2px | | | | |
|
||||
| | glo.border.4 | 4px | | | | |
|
||||
| space | glo.spacing.4 | 4px | | | | |
|
||||
| | glo.spacing.8 | 8px | | | | |
|
||||
| | glo.spacing.12 | 12px | | | | |
|
||||
| | glo.spacing.16 | 16px | | | | |
|
||||
| | glo.spacing.24 | 24px | | | | |
|
||||
| | glo.spacing.32 | 32px | | | | |
|
||||
| | glo.spacing.48 | 48px | | | | |
|
||||
| | glo.spacing.64 | 64px | | | | |
|
||||
| | glo.spacing.80 | 80px | | | | |
|
||||
| | glo.spacing.128 | 128px | | | | |
|
||||
| breackpoint | breackpoint.xs | <768px | | | | |
|
||||
| | breackpoint.s | ≥768px | | | | |
|
||||
| | breackpoint.m | ≥1024px | | | | |
|
||||
| | breackpoint.l | ≥1280px | | | | |
|
||||
| | breackpoint.xl | ≥1536 | | | | |
|
||||
|
||||
## Web System Tokens
|
||||
|
||||
The `Web sys tokens` sheet defines tokens specifically for web use, including colors, typography, shadows, radii, and borders. These are intended for integration with Tailwind CSS, particularly for color definitions in dark and light themes.
|
||||
|
||||
| Type | | Token | Value@Dark Theme(Default) | Value on White |
|
||||
| ------------ | ---------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------- |
|
||||
| color | primary | color.primary.normal | $glo.color.magenta.50 | |
|
||||
| | | color.primary.hover | $glo.color.magenta.40 | |
|
||||
| | | color.primary.press | $glo.color.magenta.60 | |
|
||||
| | | color.primary.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.primary.variant.normal | $glo.color.magenta.40 | |
|
||||
| | | color.primary.variant.hover | $glo.color.magenta.30 | |
|
||||
| | | color.primary.variant.press | $glo.color.magenta.50 | |
|
||||
| | | color.primary.variant.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.primary.gradient.normal | linear-gradient($glo.deg.ltr,$glo.color.magenta.30,$glo.color.purple.40) | |
|
||||
| | | color.primary.gradient.hover | linear-gradient($glo.deg.ltr,$glo.color.magenta.20,$glo.color.purple.30) | |
|
||||
| | | color.primary.gradient.press | linear-gradient($glo.deg.ltr,$glo.color.magenta.40,$glo.color.purple.50) | |
|
||||
| | | color.primary.gradient.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.primary.onpic.normal | $glo.color.violet.40 | $glo.transparent.t85 |
|
||||
| | | color.primary.onpic.hover | $glo.color.violet.30 | $glo.transparent.t85 |
|
||||
| | | color.primary.onpic.press | $glo.color.violet.50 | $glo.transparent.t85 |
|
||||
| | Important | color.important.normal | $glo.color.red.50 | |
|
||||
| | | color.important.hover | $glo.color.red.40 | |
|
||||
| | | color.important.press | $glo.color.red.60 | |
|
||||
| | | color.important.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.important.variant.normal | $glo.color.red.40 | |
|
||||
| | | color.important.variant.hover | $glo.color.red.30 | |
|
||||
| | | color.important.variant.press | $glo.color.red.50 | |
|
||||
| | | color.important.variant.disabled | $glo.color.blue.10 | $glo.transparent.t25 |
|
||||
| | | color.important.gradient.normal | sha | |
|
||||
| | | color.important.gradient.hover | linear-gradient($glo.deg.ltr,$glo.color.orange.40,$glo.color.red.40) | |
|
||||
| | | color.important.gradient.press | linear-gradient($glo.deg.ltr,$glo.color.orange.60,$glo.color.red.60) | |
|
||||
| | | color.important.gradient.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.important.onpic.normal | $glo.color.red.50 | $glo.transparent.t85 |
|
||||
| | positive | color.positive.normal | $glo.color.mint.60 | |
|
||||
| | | color.positive.hover | $glo.color.mint.50 | |
|
||||
| | | color.positive.press | $glo.color.mint.70 | |
|
||||
| | | color.positive.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.positive.variant.normal | $glo.color.mint.40 | |
|
||||
| | | color.positive.variant.hover | $glo.color.mint.30 | |
|
||||
| | | color.positive.variant.press | $glo.color.mint.50 | |
|
||||
| | | color.positive.variant.disabled | $glo.color.blue.10 | $glo.transparent.t25 |
|
||||
| | | color.positive.gradient.normal | linear-gradient($glo.deg.ltr,$glo.color.green.40,$glo.color.mint.60) | |
|
||||
| | | color.positive.gradient.hover | linear-gradient($glo.deg.ltr,$glo.color.green.40,$glo.color.mint.50) | |
|
||||
| | | color.positive.gradient.press | | |
|
||||
| | | color.positive.gradient.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.positive.onpic.normal | $glo.color.mint.60 | $glo.transparent.t85 |
|
||||
| | warning | color.warning.normal | $glo.color.orange.50 | |
|
||||
| | | color.warning.hover | $glo.color.orange.40 | |
|
||||
| | | color.warning.press | $glo.color.orange.60 | |
|
||||
| | | color.warning.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.warning.variant.normal | $glo.color.orange.40 | |
|
||||
| | | color.warning.variant.hover | $glo.color.orange.30 | |
|
||||
| | | color.warning.variant.press | $glo.color.orange.50 | |
|
||||
| | | color.warning.variant.disabled | $glo.color.blue.10 | $glo.transparent.t25 |
|
||||
| | | color.warning.gradient.normal | linear-gradient($glo.deg.ltr,$glo.color.yellow.40,$glo.color.orange.50) | |
|
||||
| | | color.warning.gradient.hover | linear-gradient($glo.deg.ltr,$glo.color.yellow.30,$glo.color.orange40) | |
|
||||
| | | color.warning.gradient.press | linear-gradient($glo.deg.ltr,$glo.color.yellow.50,$glo.color.orange.60) | |
|
||||
| | | color.warning.gradient.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.warning.onpic.normal | $glo.color.orange.50 | $glo.transparent.t85 |
|
||||
| | emphasis | color.emphasis.normal | $glo.color.blue.40 | |
|
||||
| | | color.emphasis.hover | $glo.color.blue.30 | |
|
||||
| | | color.emphasis.press | $glo.color.blue.50 | |
|
||||
| | | color.emphasis.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.emphasis.variant.normal | $glo.color.blue.30 | |
|
||||
| | | color.emphasis.variant.hover | $glo.color.blue.20 | |
|
||||
| | | color.emphasis.variant.press | $glo.color.blue.40 | |
|
||||
| | | color.emphasis.variant.disabled | $glo.color.blue.10 | $glo.transparent.t25 |
|
||||
| | | color.emphasis.gradient.normal | linear-gradient($glo.deg.ltr,$glo.color.sky.30,$glo.color.blue.40) | |
|
||||
| | | color.emphasis.gradient.hover | linear-gradient($glo.deg.ltr,$glo.color.sky.20,$glo.color.blue.30) | |
|
||||
| | | color.emphasis.gradient.press | linear-gradient($glo.deg.ltr,$glo.color.sky.40,$glo.color.blue.50) | |
|
||||
| | | color.emphasis.gradient.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.emphasis.onpic.normal | $glo.color.blue.40 | $glo.transparent.t85 |
|
||||
| | Background | color.background.default | $glo.color.grey.100 | |
|
||||
| | | color.background.specialmap | $glo.color.grey.100 | |
|
||||
| | | color.background.district | $glo.color.black | $glo.transparent.t30 |
|
||||
| | Surface | color.surface.base.normal | $glo.color.grey.80 | |
|
||||
| | | color.surface.base.hover | $glo.color.grey.70 | |
|
||||
| | | color.surface.base.press | $glo.color.grey.90 | |
|
||||
| | | color.surface.base.disabled | $glo.color.grey.90 | |
|
||||
| | | color.surface.base.specialmap.normal | $glo.color.grey.80 | |
|
||||
| | | color.surface.base.specialmap.hover | $glo.color.grey.70 | |
|
||||
| | | color.surface.base.specialmap.press | $glo.color.grey.90 | $glo.transparent.t30 |
|
||||
| | | color.surface.base.specialmap.disabled | $glo.color.white | $glo.transparent.t8 |
|
||||
| | | color.surface.float.normal | $glo.color.grey.70 | |
|
||||
| | | color.surface.float.hover | $glo.color.grey.60 | |
|
||||
| | | color.surface.float.press | $glo.color.grey.80 | |
|
||||
| | | color.surface.float.disabled | $glo.color.grey.80 | |
|
||||
| | | color.surface.top.normal | $glo.color.black | $glo.transparent.t65 |
|
||||
| | | color.surface.top.hover | $glo.color.black | $glo.transparent.t45 |
|
||||
| | | color.surface.top.press | $glo.color.black | $glo.transparent.t85 |
|
||||
| | | color.surface.top.disabled | $glo.color.black | $glo.transparent.t30 |
|
||||
| | | color.surface.district.normal | $glo.color.purple.0 | $glo.transparent.t4 |
|
||||
| | | color.surface.district.hover | $glo.color.purple.0 | $glo.transparent.t12 |
|
||||
| | | color.surface.district.press | $glo.color.black | $glo.transparent.t25 |
|
||||
| | | color.surface.district.disabled | $glo.color.black | $glo.transparent.t25 |
|
||||
| | | color.surface.nest.normal | $glo.color.purple.0 | $glo.transparent.t8 |
|
||||
| | | color.surface.nest.hover | $glo.color.purple.0 | $glo.transparent.t12 |
|
||||
| | | color.surface.nest.press | $glo.color.purple.0 | $glo.transparent.t4 |
|
||||
| | | color.surface.nest.disabled | $glo.color.purple.0 | $glo.transparent.t4 |
|
||||
| | | color.surface.element.normal | $color.surface.nest.normal | |
|
||||
| | | color.surface.element.hover | $color.surface.nest.hover | |
|
||||
| | | color.surface.element.press | $color.surface.nest.press | |
|
||||
| | | color.surface.element.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.surface.element.dark.normal | $glo.color.black | $glo.transparent.t65 |
|
||||
| | | color.surface.element.dark.hover | $glo.color.black | $glo.transparent.t45 |
|
||||
| | | color.surface.element.dark.press | $glo.color.black | $glo.transparent.t85 |
|
||||
| | | color.surface.element.dark.disabled | $glo.color.black | $glo.transparent.t45 |
|
||||
| | | color.surface.element.light.normal | $glo.color.white | $glo.transparent.t15 |
|
||||
| | | color.surface.element.light.hover | $glo.color.white | $glo.transparent.t25 |
|
||||
| | | color.surface.element.light.press | $glo.color.white | $glo.transparent.t8 |
|
||||
| | | color.surface.element.light.disabled | $glo.color.white | $glo.transparent.t8 |
|
||||
| | | color.surface.white.normal | $glo.color.white | |
|
||||
| | | color.surface.white.hover | $glo.color.white | $glo.transparent.t85 |
|
||||
| | | color.surface.white.press | $glo.color.white | $glo.transparent.t65 |
|
||||
| | | color.surface.white.disabled | $glo.color.white | $glo.transparent.t45 |
|
||||
| | | color.surface.black.normal | $glo.color.black | |
|
||||
| | Outline | color.outline.normal | $glo.color.purple.0 | $glo.transparent.t20 |
|
||||
| | | color.outline.hover | $glo.color.purple.0 | $glo.transparent.t30 |
|
||||
| | | color.outline.press | $glo.color.purple.0 | $glo.transparent.t8 |
|
||||
| | | color.outline.disabled | $color.surface.element.disabled | |
|
||||
| | Overlay | color.overlay.primary | $glo.color.violet.30 | $glo.transparent.t30 |
|
||||
| | | color.overlay.gradient | linear-gradient($glo.deg.ttb,$glo.color.black $glo.transparent.t0,$glo.color.black $glo.transparent.t100) | |
|
||||
| | | color.overlay.dark | $glo.color.black | $glo.transparent.t65 |
|
||||
| | | color.overlay.background | linear-gradient($glo.deg.ttb,$color.background.default $glo.transparent.t0,$color.background.default $glo.transparent.t100) | |
|
||||
| | | color.overlay.base | linear-gradient($glo.deg.ttb,$color.surface.base.normal $glo.transparent.t100,$color.surface.base.normal $glo.transparent.t0) | |
|
||||
| | Context | color.context.subscribe.normal | linear-gradient($glo.deg.ltr,$glo.color.purple.50,$glo.color.violet.50) | |
|
||||
| | | color.context.subscribe.hover | linear-gradient($glo.deg.ltr,$glo.color.purple.30,$glo.color.violet.30) | |
|
||||
| | | color.context.subscribe.press | linear-gradient($glo.deg.ltr,$glo.color.purple.70,$glo.color.violet.70) | |
|
||||
| | | color.context.subscribe.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.context.legends.normal | linear-gradient($glo.deg.ltr,$glo.color.yellow.20,$glo.color.yellow.60) | |
|
||||
| | | color.context.legends.hover | linear-gradient($glo.deg.ltr,$glo.color.yellow.10,$glo.color.yellow.40) | |
|
||||
| | | color.context.legends.press | linear-gradient($glo.deg.ltr,$glo.color.yellow.60,$glo.color.yellow.90) | |
|
||||
| | | color.context.legends.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.context.legends.variant.normal | $glo.color.yellow.20 | |
|
||||
| | | color.context.legends.variant.hover | $glo.color.yellow.10 | |
|
||||
| | | color.context.legends.variant.press | $glo.color.yellow.40 | |
|
||||
| | | color.context.legends.variant.disabled | $color.surface.nest.disabled | |
|
||||
| | | color.context.vip.normal | linear-gradient($glo.deg.ltr,$glo.color.sky.20 0%,$glo.color.violet.40 60%,$glo.color.purple.30 100%) | |
|
||||
| | | color.context.recharge.normal | linear-gradient($glo.deg.ltr, $glo.color.yellow.0, $glo.color.yellow.70) | |
|
||||
| | Text&icon | color.txt.primary.normal | $glo.color.white | |
|
||||
| | | color.txt.primary.hover | $glo.color.magenta.30 | |
|
||||
| | | color.txt.primary.press | $glo.color.magenta.40 | |
|
||||
| | | color.txt.primary.disabled | $color.txt.disabled | |
|
||||
| | | color.txt.primary.specialmap.normal | $glo.color.white | |
|
||||
| | | color.txt.primary.specialmap.hover | $glo.color.white | $glo.transparent.t85 |
|
||||
| | | color.txt.primary.specialmap.press | $glo.color.white | $glo.transparent.t65 |
|
||||
| | | color.txt.primary.specialmap.disable | $glo.color.white | $glo.transparent.t45 |
|
||||
| | | color.txt.secondary.normal | $glo.color.grey.30 | |
|
||||
| | | color.txt.secondary.hover | $glo.color.magenta.30 | |
|
||||
| | | color.txt.secondary.press | $glo.color.magenta.40 | |
|
||||
| | | color.txt.secondary.disabled | $color.txt.disabled | |
|
||||
| | | color.txt.tertiary.normal | $glo.color.grey.40 | |
|
||||
| | | color.txt.tertiary.hover | $glo.color.grey.30 | |
|
||||
| | | color.txt.tertiary | $glo.color.grey.50 | |
|
||||
| | | color.txt.tertiary.disabled | $color.txt.disabled | |
|
||||
| | | color.txt.grass | $glo.color.grass.40 | |
|
||||
| | | color.txt.disabled | $glo.color.grey.50 | |
|
||||
| Typography | display | txt.display.l | $glo.font.family.display,$glo.font.size.64,$glo.font.weight.regular,$glo.font.lineheight.size64 | |
|
||||
| | | txt.display.m | $glo.font.family.display,$glo.font.size.48,$glo.font.weight.regular,$glo.font.lineheight.size48 | |
|
||||
| | | txt.display.s | $glo.font.family.display,$glo.font.size.24,$glo.font.weight.regular,$glo.font.lineheight.size24 | |
|
||||
| | headline | txt.headline.l | $glo.font.family.sys,$glo.font.size.48,$glo.font.weight.bold,$glo.font.lineheight.size48 | |
|
||||
| | | txt.headline.m | $glo.font.family.sys,$glo.font.size.36,$glo.font.weight.bold,$glo.font.lineheight.size36 | |
|
||||
| | title | txt.title.l | $glo.font.family.sys,$glo.font.size.24,$glo.font.weight.semibold,$glo.font.lineheight.size24 | |
|
||||
| | | txt.title.m | $glo.font.family.sys,$glo.font.size.20,$glo.font.weight.semibold,$glo.font.lineheight.size20 | |
|
||||
| | | txt.title.s | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.semibold,$glo.font.lineheight.size16 | |
|
||||
| | body | txt.bodySemibold.l | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.semibold,$glo.font.lineheight.size16 | |
|
||||
| | | txt.bodySemibold.m | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.semibold,$glo.font.lineheight.size14 | |
|
||||
| | | txt.bodySemibold.s | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.semibold,$glo.font.lineheight.size12 | |
|
||||
| | | txt.body.l | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.regular,$glo.font.lineheight.size16 | |
|
||||
| | | txt.body.m | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.regular,$glo.font.lineheight.size14 | |
|
||||
| | | txt.body.s | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.regular,$glo.font.lineheight.size12 | |
|
||||
| | | txt.bodyItalic.l | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.regular,$glo.font.lineheight.size16,$glo.font.style.italic | |
|
||||
| | label | txt.label.l | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.medium,$glo.font.lineheight.size16 | |
|
||||
| | | txt.label.m | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.medium,$glo.font.lineheight.size14 | |
|
||||
| | | txt.label.s | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.medium,$glo.font.lineheight.size12 | |
|
||||
| | number | txt.numDisplay.xl | $glo.font.family.numDisplay,$glo.font.size.64,$glo.font.weight.bold,$glo.font.lineheight.size64 | |
|
||||
| | | txt.numDisplay.l | $glo.font.family.numDisplay,$glo.font.size.48,$glo.font.weight.bold,$glo.font.lineheight.size48 | |
|
||||
| | | txt.numMonotype.xl | $glo.font.family.sys,$glo.font.size.24,$glo.font.weight.bold,$glo.font.lineheight.size24 | |
|
||||
| | | txt.numMonotype.l | $glo.font.family.sys,$glo.font.size.20,$glo.font.weight.bold,$glo.font.lineheight.size20 | |
|
||||
| | | txt.numMonotype.m | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.bold,$glo.font.lineheight.size16 | |
|
||||
| | | txt.numMonotype.s | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.medium,$glo.font.lineheight.size14 | |
|
||||
| | | txt.numMonotype.xs | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.regular,$glo.font.lineheight.size12 | |
|
||||
| visual style | shadow | shadow.s | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,4,渐变色,ShadowOpacity,便宜,半径 | |
|
||||
| | | shadow.m | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,8 | |
|
||||
| | | shadow.l | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,16 | |
|
||||
| | radius | radius.xs | $glo.radius.4 | |
|
||||
| | | radius.s | $glo.radius.8 | |
|
||||
| | | radius.m | $glo.radius.12 | |
|
||||
| | | radius.l | $glo.radius.16 | |
|
||||
| | | radius.xl | $glo.radius.24 | |
|
||||
| | | radius.round | $glo.radius.round | |
|
||||
| | | radius.pill | $glo.radius.round | |
|
||||
| | border | border.divider | $glo.border.1 | |
|
||||
| | | border.s | $glo.border.1 | |
|
||||
| | | border.m | $glo.border.2 | |
|
||||
| | | border.l | $glo.border.4 | |
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
# 环境变量配置说明
|
||||
|
||||
## 概述
|
||||
|
||||
本文档说明项目所需的环境变量配置。请在项目根目录创建 `.env.local` 文件并添加以下配置。
|
||||
|
||||
## 必需的环境变量
|
||||
|
||||
### 应用配置
|
||||
|
||||
```bash
|
||||
# 应用的基础 URL
|
||||
# 开发环境: http://localhost:3000
|
||||
# 生产环境: https://test.crushlevel.ai 或您的域名
|
||||
NEXT_PUBLIC_APP_URL=https://test.crushlevel.ai
|
||||
```
|
||||
|
||||
### Discord OAuth 配置
|
||||
|
||||
```bash
|
||||
# Discord OAuth 客户端 ID
|
||||
# 从 Discord Developer Portal 获取
|
||||
# https://discord.com/developers/applications
|
||||
NEXT_PUBLIC_DISCORD_CLIENT_ID=your_discord_client_id_here
|
||||
```
|
||||
|
||||
**获取步骤**:
|
||||
|
||||
1. 访问 [Discord Developer Portal](https://discord.com/developers/applications)
|
||||
2. 创建或选择应用
|
||||
3. 在 OAuth2 设置中配置回调 URL：
|
||||
- `https://test.crushlevel.ai/api/auth/discord/callback`
|
||||
- `http://localhost:3000/api/auth/discord/callback` (开发环境)
|
||||
4. 复制 Client ID
|
||||
|
||||
### Google OAuth 配置
|
||||
|
||||
```bash
|
||||
# Google OAuth 客户端 ID
|
||||
# 从 Google Cloud Console 获取
|
||||
# https://console.cloud.google.com/
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
|
||||
```
|
||||
|
||||
**获取步骤**:
|
||||
|
||||
1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. 创建或选择项目
|
||||
3. 启用 Google+ API
|
||||
4. 创建 OAuth 2.0 客户端 ID
|
||||
5. 配置授权重定向 URI：
|
||||
- `https://test.crushlevel.ai/api/auth/google/callback`
|
||||
- `http://localhost:3000/api/auth/google/callback` (开发环境)
|
||||
6. 复制客户端 ID
|
||||
|
||||
## 环境变量文件示例
|
||||
|
||||
创建 `.env.local` 文件：
|
||||
|
||||
```bash
|
||||
# .env.local
|
||||
|
||||
# App Configuration
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||
|
||||
# Discord OAuth
|
||||
NEXT_PUBLIC_DISCORD_CLIENT_ID=1234567890123456789
|
||||
|
||||
# Google OAuth
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com
|
||||
```
|
||||
|
||||
## 不同环境的配置
|
||||
|
||||
### 开发环境 (`.env.local`)
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||
NEXT_PUBLIC_DISCORD_CLIENT_ID=dev_discord_client_id
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=dev_google_client_id
|
||||
```
|
||||
|
||||
### 生产环境 (`.env.production`)
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_APP_URL=https://test.crushlevel.ai
|
||||
NEXT_PUBLIC_DISCORD_CLIENT_ID=prod_discord_client_id
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=prod_google_client_id
|
||||
```
|
||||
|
||||
## 安全注意事项
|
||||
|
||||
### ⚠️ 重要提醒
|
||||
|
||||
1. **不要提交敏感信息到 Git**
|
||||
- `.env.local` 已在 `.gitignore` 中
|
||||
- 不要将真实的密钥提交到代码库
|
||||
|
||||
2. **使用不同的凭据**
|
||||
- 开发环境和生产环境使用不同的 OAuth 凭据
|
||||
- 定期轮换生产环境的密钥
|
||||
|
||||
3. **限制回调 URL**
|
||||
- 只添加必要的回调 URL
|
||||
- 不要使用通配符
|
||||
|
||||
4. **环境变量前缀**
|
||||
- `NEXT_PUBLIC_` 前缀的变量会暴露到浏览器
|
||||
- 敏感的服务端密钥不要使用此前缀
|
||||
|
||||
## 验证配置
|
||||
|
||||
### 检查环境变量是否正确加载
|
||||
|
||||
在组件中添加调试代码（仅开发环境）：
|
||||
|
||||
```typescript
|
||||
console.log('App URL:', process.env.NEXT_PUBLIC_APP_URL)
|
||||
console.log('Discord Client ID:', process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID)
|
||||
console.log('Google Client ID:', process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID)
|
||||
```
|
||||
|
||||
### 常见问题
|
||||
|
||||
**问题 1**: 环境变量未生效
|
||||
|
||||
**解决方案**:
|
||||
|
||||
- 重启开发服务器 (`npm run dev`)
|
||||
- 确保文件名正确 (`.env.local`)
|
||||
- 检查变量名拼写
|
||||
|
||||
**问题 2**: OAuth 回调失败
|
||||
|
||||
**解决方案**:
|
||||
|
||||
- 检查 `NEXT_PUBLIC_APP_URL` 是否正确
|
||||
- 确保回调 URL 在 OAuth 提供商处正确配置
|
||||
- 开发环境使用 `http://localhost:3000`，生产环境使用实际域名
|
||||
|
||||
**问题 3**: 客户端 ID 无效
|
||||
|
||||
**解决方案**:
|
||||
|
||||
- 确认复制的是 Client ID 而不是 Client Secret
|
||||
- 检查是否有多余的空格或换行符
|
||||
- 确认 OAuth 应用状态为已发布/激活
|
||||
|
||||
## 添加新的环境变量
|
||||
|
||||
当添加新的环境变量时：
|
||||
|
||||
1. 在 `.env.local` 中添加变量
|
||||
2. 更新本文档
|
||||
3. 通知团队成员更新他们的本地配置
|
||||
4. 在部署平台（Vercel/Netlify 等）配置生产环境变量
|
||||
|
||||
## 部署平台配置
|
||||
|
||||
### Vercel
|
||||
|
||||
1. 进入项目设置
|
||||
2. 选择 "Environment Variables"
|
||||
3. 添加所有 `NEXT_PUBLIC_*` 变量
|
||||
4. 为不同环境（Production/Preview/Development）设置不同的值
|
||||
|
||||
### Netlify
|
||||
|
||||
1. 进入 Site settings
|
||||
2. 选择 "Build & deploy" > "Environment"
|
||||
3. 添加环境变量
|
||||
|
||||
## 相关文档
|
||||
|
||||
- [Next.js 环境变量文档](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables)
|
||||
- [Discord OAuth 文档](https://discord.com/developers/docs/topics/oauth2)
|
||||
- [Google OAuth 文档](https://developers.google.com/identity/protocols/oauth2)
|
||||
|
|
@ -1,420 +0,0 @@
|
|||
# Google Identity Services (GIS) 登录集成文档
|
||||
|
||||
## 概述
|
||||
|
||||
使用最新的 **Google Identity Services (GIS)** SDK 实现 Google 登录，无需页面跳转，通过弹窗方式完成授权，用户体验更好。
|
||||
|
||||
## 新旧方式对比
|
||||
|
||||
### 旧方式（OAuth 2.0 重定向流程）
|
||||
|
||||
```
|
||||
用户点击按钮 → 跳转到 Google 授权页面 → 授权后重定向回应用
|
||||
```
|
||||
|
||||
❌ 需要页面跳转
|
||||
❌ 需要配置回调路由
|
||||
❌ 用户体验不连贯
|
||||
|
||||
### 新方式（Google Identity Services）
|
||||
|
||||
```
|
||||
用户点击按钮 → 弹出 Google 授权窗口 → 授权后直接回调
|
||||
```
|
||||
|
||||
✅ 无需页面跳转
|
||||
✅ 无需回调路由
|
||||
✅ 用户体验流畅
|
||||
✅ 更安全（弹窗隔离）
|
||||
|
||||
## 实现架构
|
||||
|
||||
### 工作流程
|
||||
|
||||
```
|
||||
用户点击 "Continue with Google"
|
||||
↓
|
||||
加载 Google Identity Services SDK
|
||||
↓
|
||||
初始化 Code Client
|
||||
↓
|
||||
弹出 Google 授权窗口
|
||||
↓
|
||||
用户授权
|
||||
↓
|
||||
回调函数接收授权码
|
||||
↓
|
||||
调用后端登录接口
|
||||
↓
|
||||
登录成功，跳转到首页
|
||||
```
|
||||
|
||||
## 核心文件
|
||||
|
||||
### 1. Google OAuth 配置 (`src/lib/oauth/google.ts`)
|
||||
|
||||
**主要功能**:
|
||||
|
||||
- 定义 Google Identity Services 的 TypeScript 类型
|
||||
- 提供 SDK 加载方法
|
||||
- 提供 Code Client 初始化方法
|
||||
|
||||
**关键代码**:
|
||||
|
||||
```typescript
|
||||
export const googleOAuth = {
|
||||
// 加载 Google Identity Services SDK
|
||||
loadScript: (): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.google?.accounts) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://accounts.google.com/gsi/client'
|
||||
script.async = true
|
||||
script.defer = true
|
||||
script.onload = () => resolve()
|
||||
script.onerror = () => reject(new Error('Failed to load SDK'))
|
||||
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化 Code Client（获取授权码）
|
||||
initCodeClient: (callback, errorCallback) => {
|
||||
return window.google.accounts.oauth2.initCodeClient({
|
||||
client_id: GOOGLE_CLIENT_ID,
|
||||
scope: GOOGLE_SCOPES,
|
||||
ux_mode: 'popup',
|
||||
callback,
|
||||
error_callback: errorCallback,
|
||||
})
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### 2. GoogleButton 组件 (`src/app/(auth)/login/components/GoogleButton.tsx`)
|
||||
|
||||
**主要功能**:
|
||||
|
||||
- 加载 Google Identity Services SDK
|
||||
- 初始化 Code Client
|
||||
- 处理授权码回调
|
||||
- 调用后端登录接口
|
||||
|
||||
**关键实现**:
|
||||
|
||||
#### SDK 加载
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
const loadGoogleSDK = async () => {
|
||||
try {
|
||||
await googleOAuth.loadScript()
|
||||
console.log('Google Identity Services SDK loaded')
|
||||
} catch (error) {
|
||||
console.error('Failed to load Google SDK:', error)
|
||||
toast.error('Failed to load Google login')
|
||||
}
|
||||
}
|
||||
|
||||
loadGoogleSDK()
|
||||
}, [])
|
||||
```
|
||||
|
||||
#### 授权码处理
|
||||
|
||||
```typescript
|
||||
const handleGoogleResponse = async (response: GoogleCodeResponse) => {
|
||||
const deviceId = tokenManager.getDeviceId()
|
||||
const loginData = {
|
||||
appClient: AppClient.Web,
|
||||
deviceCode: deviceId,
|
||||
thirdToken: response.code, // Google 授权码
|
||||
thirdType: ThirdType.Google,
|
||||
}
|
||||
|
||||
login.mutate(loginData, {
|
||||
onSuccess: () => {
|
||||
toast.success('Login successful')
|
||||
router.push('/')
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error('Login failed')
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
#### 登录按钮点击
|
||||
|
||||
```typescript
|
||||
const handleGoogleLogin = async () => {
|
||||
// 确保 SDK 已加载
|
||||
if (!window.google?.accounts?.oauth2) {
|
||||
await googleOAuth.loadScript()
|
||||
}
|
||||
|
||||
// 初始化 Code Client
|
||||
if (!codeClientRef.current) {
|
||||
codeClientRef.current = googleOAuth.initCodeClient(handleGoogleResponse, handleGoogleError)
|
||||
}
|
||||
|
||||
// 请求授权码（弹出授权窗口）
|
||||
codeClientRef.current.requestCode()
|
||||
}
|
||||
```
|
||||
|
||||
## 环境变量配置
|
||||
|
||||
只需要配置客户端 ID，不需要配置回调 URL：
|
||||
|
||||
```bash
|
||||
# .env.local
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=你的Google客户端ID
|
||||
```
|
||||
|
||||
### 获取 Google OAuth 凭据
|
||||
|
||||
1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. 创建或选择项目
|
||||
3. 启用 Google+ API
|
||||
4. 创建 OAuth 2.0 客户端 ID
|
||||
5. 应用类型选择 "Web 应用"
|
||||
6. **授权的 JavaScript 来源**添加：
|
||||
```
|
||||
http://localhost:3000
|
||||
https://test.crushlevel.ai
|
||||
```
|
||||
7. **授权的重定向 URI** 可以留空（GIS 不需要）
|
||||
8. 复制客户端 ID
|
||||
|
||||
## 后端接口要求
|
||||
|
||||
与之前相同，后端接收授权码并完成登录：
|
||||
|
||||
```typescript
|
||||
POST /api/auth/login
|
||||
|
||||
{
|
||||
"appClient": "WEB",
|
||||
"deviceCode": "设备ID",
|
||||
"thirdToken": "Google授权码",
|
||||
"thirdType": "GOOGLE"
|
||||
}
|
||||
```
|
||||
|
||||
后端需要：
|
||||
|
||||
1. 使用授权码向 Google 交换 access_token
|
||||
2. 使用 access_token 获取用户信息
|
||||
3. 创建或更新用户
|
||||
4. 返回应用的登录 token
|
||||
|
||||
## 优势
|
||||
|
||||
### 1. 更好的用户体验
|
||||
|
||||
- ✅ 无需离开当前页面
|
||||
- ✅ 弹窗授权，快速完成
|
||||
- ✅ 不打断用户操作流程
|
||||
|
||||
### 2. 更简单的实现
|
||||
|
||||
- ✅ 不需要回调路由
|
||||
- ✅ 不需要处理 URL 参数
|
||||
- ✅ 不需要 state 验证
|
||||
- ✅ 代码更简洁
|
||||
|
||||
### 3. 更安全
|
||||
|
||||
- ✅ 弹窗隔离，防止钓鱼
|
||||
- ✅ SDK 自动处理安全验证
|
||||
- ✅ 支持 CORS 和 CSP
|
||||
|
||||
### 4. 更现代
|
||||
|
||||
- ✅ Google 官方推荐方式
|
||||
- ✅ 持续维护和更新
|
||||
- ✅ 更好的浏览器兼容性
|
||||
|
||||
## 与旧实现的对比
|
||||
|
||||
| 特性 | 旧方式（重定向） | 新方式（GIS） |
|
||||
| ------------ | ---------------- | --------------- |
|
||||
| 页面跳转 | ✅ 需要 | ❌ 不需要 |
|
||||
| 回调路由 | ✅ 需要 | ❌ 不需要 |
|
||||
| State 验证 | ✅ 需要手动实现 | ❌ SDK 自动处理 |
|
||||
| URL 参数处理 | ✅ 需要 | ❌ 不需要 |
|
||||
| 用户体验 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||||
| 代码复杂度 | 高 | 低 |
|
||||
| 维护成本 | 高 | 低 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: SDK 加载失败怎么办？
|
||||
|
||||
A:
|
||||
|
||||
- 检查网络连接
|
||||
- 确认没有被广告拦截器阻止
|
||||
- 检查浏览器控制台错误信息
|
||||
|
||||
### Q: 弹窗被浏览器拦截？
|
||||
|
||||
A:
|
||||
|
||||
- 确保在用户点击事件中调用 `requestCode()`
|
||||
- 不要在异步操作后调用
|
||||
- 检查浏览器弹窗设置
|
||||
|
||||
### Q: 授权后没有回调？
|
||||
|
||||
A:
|
||||
|
||||
- 检查回调函数是否正确绑定
|
||||
- 查看浏览器控制台是否有错误
|
||||
- 确认 Client ID 配置正确
|
||||
|
||||
### Q: 用户取消授权如何处理？
|
||||
|
||||
A:
|
||||
|
||||
```typescript
|
||||
const handleGoogleError = (error: any) => {
|
||||
// 用户取消授权不显示错误提示
|
||||
if (error.type === 'popup_closed') {
|
||||
return
|
||||
}
|
||||
|
||||
toast.error('Google login failed')
|
||||
}
|
||||
```
|
||||
|
||||
## 测试清单
|
||||
|
||||
### 本地测试
|
||||
|
||||
- [ ] SDK 正常加载
|
||||
- [ ] 点击按钮弹出授权窗口
|
||||
- [ ] 授权后正确回调
|
||||
- [ ] 授权码正确传递给后端
|
||||
- [ ] 登录成功后正确跳转
|
||||
- [ ] 用户取消授权的处理
|
||||
- [ ] 错误情况的处理
|
||||
|
||||
### 生产环境测试
|
||||
|
||||
- [ ] 配置正确的 JavaScript 来源
|
||||
- [ ] HTTPS 证书有效
|
||||
- [ ] 环境变量配置正确
|
||||
- [ ] 后端接口正常工作
|
||||
- [ ] 不同浏览器测试
|
||||
|
||||
## 浏览器兼容性
|
||||
|
||||
Google Identity Services 支持：
|
||||
|
||||
- ✅ Chrome 90+
|
||||
- ✅ Firefox 88+
|
||||
- ✅ Safari 14+
|
||||
- ✅ Edge 90+
|
||||
|
||||
## 安全注意事项
|
||||
|
||||
### 1. 客户端 ID 保护
|
||||
|
||||
虽然客户端 ID 是公开的，但仍需注意：
|
||||
|
||||
- 限制授权的 JavaScript 来源
|
||||
- 定期检查使用情况
|
||||
- 发现异常及时更换
|
||||
|
||||
### 2. 授权码处理
|
||||
|
||||
- 授权码只能使用一次
|
||||
- 及时传递给后端
|
||||
- 不要在客户端存储
|
||||
|
||||
### 3. HTTPS 要求
|
||||
|
||||
- 生产环境必须使用 HTTPS
|
||||
- 本地开发可以使用 HTTP
|
||||
|
||||
## 迁移指南
|
||||
|
||||
如果你之前使用的是旧的重定向方式，迁移步骤：
|
||||
|
||||
1. **更新配置文件**
|
||||
- 使用新的 `src/lib/oauth/google.ts`
|
||||
|
||||
2. **更新组件**
|
||||
- 使用新的 `GoogleButton.tsx`
|
||||
|
||||
3. **删除回调路由**
|
||||
- 删除 `src/app/api/auth/google/callback/route.ts`
|
||||
|
||||
4. **更新 Google Cloud Console**
|
||||
- 添加授权的 JavaScript 来源
|
||||
- 可以移除重定向 URI（可选）
|
||||
|
||||
5. **测试**
|
||||
- 完整测试登录流程
|
||||
- 确认所有功能正常
|
||||
|
||||
## 扩展功能
|
||||
|
||||
### 1. One Tap 登录
|
||||
|
||||
可以添加 Google One Tap 功能，自动显示登录提示：
|
||||
|
||||
```typescript
|
||||
window.google.accounts.id.initialize({
|
||||
client_id: GOOGLE_CLIENT_ID,
|
||||
callback: handleCredentialResponse,
|
||||
})
|
||||
|
||||
window.google.accounts.id.prompt()
|
||||
```
|
||||
|
||||
### 2. 自动登录
|
||||
|
||||
可以实现自动登录功能：
|
||||
|
||||
```typescript
|
||||
window.google.accounts.id.initialize({
|
||||
client_id: GOOGLE_CLIENT_ID,
|
||||
callback: handleCredentialResponse,
|
||||
auto_select: true,
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 自定义按钮样式
|
||||
|
||||
可以使用 Google 提供的标准按钮：
|
||||
|
||||
```typescript
|
||||
window.google.accounts.id.renderButton(document.getElementById('buttonDiv'), {
|
||||
theme: 'outline',
|
||||
size: 'large',
|
||||
})
|
||||
```
|
||||
|
||||
## 相关文档
|
||||
|
||||
- [Google Identity Services 官方文档](https://developers.google.com/identity/gsi/web)
|
||||
- [Code Model 文档](https://developers.google.com/identity/oauth2/web/guides/use-code-model)
|
||||
- [迁移指南](https://developers.google.com/identity/gsi/web/guides/migration)
|
||||
|
||||
## 总结
|
||||
|
||||
使用 Google Identity Services 是 Google 官方推荐的最新方式，相比传统的 OAuth 重定向流程：
|
||||
|
||||
✅ **用户体验更好** - 无需页面跳转
|
||||
✅ **实现更简单** - 代码量更少
|
||||
✅ **维护更容易** - 无需处理复杂的回调
|
||||
✅ **更加安全** - SDK 自动处理安全验证
|
||||
|
||||
强烈建议新项目直接使用这种方式！
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
# Google OAuth 快速开始指南
|
||||
|
||||
## 5 分钟快速集成
|
||||
|
||||
### 步骤 1: 获取 Google OAuth 凭据
|
||||
|
||||
1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. 创建新项目或选择现有项目
|
||||
3. 在左侧菜单选择 "API 和服务" > "凭据"
|
||||
4. 点击 "创建凭据" > "OAuth 客户端 ID"
|
||||
5. 选择应用类型为 "Web 应用"
|
||||
6. 配置授权重定向 URI：
|
||||
```
|
||||
http://localhost:3000/api/auth/google/callback
|
||||
```
|
||||
7. 点击"创建"并复制客户端 ID
|
||||
|
||||
### 步骤 2: 配置环境变量
|
||||
|
||||
在项目根目录创建 `.env.local` 文件：
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=你的客户端ID
|
||||
```
|
||||
|
||||
### 步骤 3: 重启开发服务器
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 步骤 4: 测试登录
|
||||
|
||||
1. 访问 http://localhost:3000/login
|
||||
2. 点击 "Continue with Google" 按钮
|
||||
3. 选择 Google 账号并授权
|
||||
4. 应该会重定向回应用并完成登录
|
||||
|
||||
## 文件清单
|
||||
|
||||
已创建的文件：
|
||||
|
||||
- ✅ `src/lib/oauth/google.ts` - Google OAuth 配置
|
||||
- ✅ `src/app/(auth)/login/components/GoogleButton.tsx` - Google 登录按钮组件
|
||||
- ✅ `src/app/api/auth/google/callback/route.ts` - OAuth 回调路由
|
||||
- ✅ `src/app/(auth)/login/components/login-form.tsx` - 已更新使用 GoogleButton
|
||||
|
||||
## 工作流程
|
||||
|
||||
```
|
||||
用户点击按钮
|
||||
↓
|
||||
GoogleButton.handleGoogleLogin()
|
||||
↓
|
||||
跳转到 Google 授权页面
|
||||
↓
|
||||
用户授权
|
||||
↓
|
||||
Google 重定向到 /api/auth/google/callback
|
||||
↓
|
||||
API 路由提取 code 并重定向到 /login?google_code=xxx
|
||||
↓
|
||||
GoogleButton.useEffect() 检测到 google_code
|
||||
↓
|
||||
调用后端登录接口 (thirdType: Google)
|
||||
↓
|
||||
登录成功，跳转到首页
|
||||
```
|
||||
|
||||
## 后端接口要求
|
||||
|
||||
后端需要处理以下登录请求：
|
||||
|
||||
```typescript
|
||||
POST /api/auth/login
|
||||
|
||||
{
|
||||
"appClient": "WEB",
|
||||
"deviceCode": "设备ID",
|
||||
"thirdToken": "Google授权码",
|
||||
"thirdType": "GOOGLE"
|
||||
}
|
||||
```
|
||||
|
||||
后端需要：
|
||||
|
||||
1. 使用授权码向 Google 交换 access_token
|
||||
2. 使用 access_token 获取用户信息
|
||||
3. 创建或更新用户
|
||||
4. 返回应用的登录 token
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: 点击按钮后没有跳转？
|
||||
|
||||
A: 检查浏览器控制台是否有错误，确认环境变量已正确配置。
|
||||
|
||||
### Q: 回调后显示错误？
|
||||
|
||||
A: 检查 Google Cloud Console 中的回调 URL 配置是否正确。
|
||||
|
||||
### Q: 登录接口调用失败？
|
||||
|
||||
A: 确认后端接口已实现并支持 Google 登录。
|
||||
|
||||
## 生产环境部署
|
||||
|
||||
### 1. 更新 Google OAuth 配置
|
||||
|
||||
在 Google Cloud Console 添加生产环境回调 URL：
|
||||
|
||||
```
|
||||
https://your-domain.com/api/auth/google/callback
|
||||
```
|
||||
|
||||
### 2. 更新环境变量
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_APP_URL=https://your-domain.com
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=生产环境客户端ID
|
||||
```
|
||||
|
||||
### 3. 部署
|
||||
|
||||
确保在部署平台（Vercel/Netlify）配置了正确的环境变量。
|
||||
|
||||
## 下一步
|
||||
|
||||
- [ ] 测试完整的登录流程
|
||||
- [ ] 添加错误处理和用户反馈
|
||||
- [ ] 实现登出功能
|
||||
- [ ] 添加用户信息展示
|
||||
- [ ] 考虑添加 Apple 登录
|
||||
|
||||
## 技术支持
|
||||
|
||||
如有问题，请参考：
|
||||
|
||||
- [完整文档](./GoogleOAuth.md)
|
||||
- [环境变量配置](./EnvironmentVariables.md)
|
||||
- [Google OAuth 官方文档](https://developers.google.com/identity/protocols/oauth2)
|
||||
|
|
@ -1,313 +0,0 @@
|
|||
# Google OAuth 登录集成文档
|
||||
|
||||
## 功能概述
|
||||
|
||||
实现了 Google OAuth 2.0 登录功能，参考 Discord 登录的实现模式，用户可以通过 Google 账号快速登录应用。
|
||||
|
||||
## 实现架构
|
||||
|
||||
### 1. OAuth 流程
|
||||
|
||||
```
|
||||
用户点击 "Continue with Google"
|
||||
↓
|
||||
跳转到 Google 授权页面
|
||||
↓
|
||||
用户授权后，Google 重定向到回调 URL
|
||||
↓
|
||||
API 路由接收授权码并重定向回登录页
|
||||
↓
|
||||
前端获取授权码并调用后端登录接口
|
||||
↓
|
||||
登录成功，跳转到首页或指定页面
|
||||
```
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── lib/
|
||||
│ └── oauth/
|
||||
│ ├── discord.ts # Discord OAuth 配置
|
||||
│ └── google.ts # Google OAuth 配置 (新增)
|
||||
├── app/
|
||||
│ ├── (auth)/
|
||||
│ │ └── login/
|
||||
│ │ └── components/
|
||||
│ │ ├── DiscordButton.tsx # Discord 登录按钮
|
||||
│ │ ├── GoogleButton.tsx # Google 登录按钮 (新增)
|
||||
│ │ └── login-form.tsx # 登录表单 (已更新)
|
||||
│ └── api/
|
||||
│ └── auth/
|
||||
│ ├── discord/
|
||||
│ │ └── callback/
|
||||
│ │ └── route.ts # Discord 回调路由
|
||||
│ └── google/
|
||||
│ └── callback/
|
||||
│ └── route.ts # Google 回调路由 (新增)
|
||||
```
|
||||
|
||||
## 核心文件说明
|
||||
|
||||
### 1. Google OAuth 配置 (`src/lib/oauth/google.ts`)
|
||||
|
||||
```typescript
|
||||
export const googleOAuth = {
|
||||
getAuthUrl: (state?: string): string => {
|
||||
// 构建 Google OAuth 授权 URL
|
||||
// 包含 client_id, redirect_uri, scope 等参数
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
**配置参数**:
|
||||
|
||||
- `client_id`: Google OAuth 客户端 ID
|
||||
- `redirect_uri`: 授权后的回调 URL
|
||||
- `scope`: 请求的权限范围（email, profile）
|
||||
- `access_type`: offline（获取 refresh_token）
|
||||
- `prompt`: consent（每次都显示授权页面）
|
||||
|
||||
### 2. GoogleButton 组件 (`src/app/(auth)/login/components/GoogleButton.tsx`)
|
||||
|
||||
**功能**:
|
||||
|
||||
- 处理 Google 登录按钮点击事件
|
||||
- 生成随机 state 用于安全验证
|
||||
- 跳转到 Google 授权页面
|
||||
- 处理 OAuth 回调（授权码）
|
||||
- 调用后端登录接口
|
||||
- 处理登录成功/失败的重定向
|
||||
|
||||
**关键方法**:
|
||||
|
||||
```typescript
|
||||
const handleGoogleLogin = () => {
|
||||
// 1. 生成 state
|
||||
const state = Math.random().toString(36).substring(2, 15)
|
||||
|
||||
// 2. 获取授权 URL
|
||||
const authUrl = googleOAuth.getAuthUrl(state)
|
||||
|
||||
// 3. 保存 state 到 sessionStorage
|
||||
sessionStorage.setItem('google_oauth_state', state)
|
||||
|
||||
// 4. 跳转到 Google 授权页面
|
||||
window.location.href = authUrl
|
||||
}
|
||||
```
|
||||
|
||||
**OAuth 回调处理**:
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
const googleCode = searchParams.get('google_code')
|
||||
const googleState = searchParams.get('google_state')
|
||||
|
||||
if (googleCode) {
|
||||
// 验证 state
|
||||
// 调用后端登录接口
|
||||
// 处理登录结果
|
||||
}
|
||||
}, [])
|
||||
```
|
||||
|
||||
### 3. Google 回调路由 (`src/app/api/auth/google/callback/route.ts`)
|
||||
|
||||
**功能**:
|
||||
|
||||
- 接收 Google OAuth 回调
|
||||
- 提取授权码 (code) 和 state
|
||||
- 重定向回登录页面，并将参数传递给前端
|
||||
|
||||
```typescript
|
||||
export async function GET(request: NextRequest) {
|
||||
const code = searchParams.get('code')
|
||||
const state = searchParams.get('state')
|
||||
|
||||
// 重定向到登录页，携带 google_code 和 google_state
|
||||
redirectUrl.searchParams.set('google_code', code)
|
||||
redirectUrl.searchParams.set('google_state', state)
|
||||
|
||||
return NextResponse.redirect(redirectUrl)
|
||||
}
|
||||
```
|
||||
|
||||
## 环境变量配置
|
||||
|
||||
需要在 `.env.local` 中添加以下环境变量：
|
||||
|
||||
```bash
|
||||
# Google OAuth 配置
|
||||
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
|
||||
NEXT_PUBLIC_APP_URL=https://test.crushlevel.ai
|
||||
```
|
||||
|
||||
### 获取 Google OAuth 凭据
|
||||
|
||||
1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. 创建或选择一个项目
|
||||
3. 启用 Google+ API
|
||||
4. 创建 OAuth 2.0 客户端 ID
|
||||
5. 配置授权重定向 URI：
|
||||
```
|
||||
https://test.crushlevel.ai/api/auth/google/callback
|
||||
http://localhost:3000/api/auth/google/callback (开发环境)
|
||||
```
|
||||
6. 复制客户端 ID 到环境变量
|
||||
|
||||
## 后端接口要求
|
||||
|
||||
后端需要实现登录接口，接收以下参数：
|
||||
|
||||
```typescript
|
||||
interface LoginRequest {
|
||||
appClient: AppClient.Web
|
||||
deviceCode: string // 设备唯一标识
|
||||
thirdToken: string // Google 授权码
|
||||
thirdType: ThirdType.Google // 第三方类型
|
||||
}
|
||||
```
|
||||
|
||||
后端需要：
|
||||
|
||||
1. 使用授权码向 Google 交换 access_token
|
||||
2. 使用 access_token 获取用户信息
|
||||
3. 创建或更新用户账号
|
||||
4. 返回应用的登录 token
|
||||
|
||||
## 安全特性
|
||||
|
||||
### 1. State 参数验证
|
||||
|
||||
- 前端生成随机 state 并保存到 sessionStorage
|
||||
- 回调时验证 state 是否匹配
|
||||
- 防止 CSRF 攻击
|
||||
|
||||
### 2. 授权码模式
|
||||
|
||||
- 使用 OAuth 2.0 授权码流程
|
||||
- 授权码只能使用一次
|
||||
- Token 交换在后端进行，更安全
|
||||
|
||||
### 3. URL 参数清理
|
||||
|
||||
- 登录成功后清理 URL 中的敏感参数
|
||||
- 防止参数泄露
|
||||
|
||||
## 用户体验优化
|
||||
|
||||
### 1. 重定向保持
|
||||
|
||||
```typescript
|
||||
// 保存登录前的页面
|
||||
sessionStorage.setItem('login_redirect_url', redirect || '')
|
||||
|
||||
// 登录成功后跳转回原页面
|
||||
const loginRedirectUrl = sessionStorage.getItem('login_redirect_url')
|
||||
if (loginRedirectUrl) {
|
||||
router.push(loginRedirectUrl)
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 错误处理
|
||||
|
||||
- 授权失败时显示友好的错误提示
|
||||
- 自动清理 URL 参数
|
||||
- 不影响用户继续尝试登录
|
||||
|
||||
### 3. 加载状态
|
||||
|
||||
- 使用 `useLogin` Hook 的 loading 状态
|
||||
- 可以添加 loading 动画提升体验
|
||||
|
||||
## 测试清单
|
||||
|
||||
### 本地测试
|
||||
|
||||
- [ ] 点击 Google 登录按钮跳转到 Google 授权页面
|
||||
- [ ] 授权后正确回调到应用
|
||||
- [ ] 授权码正确传递给后端
|
||||
- [ ] 登录成功后跳转到首页
|
||||
- [ ] State 参数验证正常工作
|
||||
- [ ] 错误情况处理正确
|
||||
|
||||
### 生产环境测试
|
||||
|
||||
- [ ] 配置正确的回调 URL
|
||||
- [ ] HTTPS 证书有效
|
||||
- [ ] 环境变量配置正确
|
||||
- [ ] 后端接口正常工作
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 1. 回调 URL 不匹配
|
||||
|
||||
**错误**: `redirect_uri_mismatch`
|
||||
|
||||
**解决方案**:
|
||||
|
||||
- 检查 Google Cloud Console 中配置的回调 URL
|
||||
- 确保 `NEXT_PUBLIC_APP_URL` 环境变量正确
|
||||
- 开发环境和生产环境需要分别配置
|
||||
|
||||
### 2. State 验证失败
|
||||
|
||||
**错误**: "Google login failed"
|
||||
|
||||
**解决方案**:
|
||||
|
||||
- 检查 sessionStorage 是否正常工作
|
||||
- 确保没有跨域问题
|
||||
- 检查浏览器是否禁用了 cookie/storage
|
||||
|
||||
### 3. 授权码已使用
|
||||
|
||||
**错误**: 后端返回授权码无效
|
||||
|
||||
**解决方案**:
|
||||
|
||||
- 授权码只能使用一次
|
||||
- 避免重复调用登录接口
|
||||
- 清理 URL 参数防止页面刷新时重复使用
|
||||
|
||||
## 与 Discord 登录的对比
|
||||
|
||||
| 特性 | Discord | Google |
|
||||
| -------------- | -------------------------------- | ------------------------------------ |
|
||||
| OAuth Provider | Discord | Google |
|
||||
| Scopes | identify, email | userinfo.email, userinfo.profile |
|
||||
| 授权 URL | discord.com/api/oauth2/authorize | accounts.google.com/o/oauth2/v2/auth |
|
||||
| 回调路由 | /api/auth/discord/callback | /api/auth/google/callback |
|
||||
| URL 参数 | discord_code, discord_state | google_code, google_state |
|
||||
| ThirdType | Discord | Google |
|
||||
|
||||
## 扩展建议
|
||||
|
||||
### 1. 添加 Apple 登录
|
||||
|
||||
参考 Google 登录的实现，创建：
|
||||
|
||||
- `src/lib/oauth/apple.ts`
|
||||
- `src/app/(auth)/login/components/AppleButton.tsx`
|
||||
- `src/app/api/auth/apple/callback/route.ts`
|
||||
|
||||
### 2. 统一 OAuth 处理
|
||||
|
||||
可以创建通用的 OAuth Hook：
|
||||
|
||||
```typescript
|
||||
const useOAuthLogin = (provider: 'google' | 'discord' | 'apple') => {
|
||||
// 通用的 OAuth 登录逻辑
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 添加登录统计
|
||||
|
||||
记录不同登录方式的使用情况，优化用户体验。
|
||||
|
||||
## 相关文档
|
||||
|
||||
- [Google OAuth 2.0 文档](https://developers.google.com/identity/protocols/oauth2)
|
||||
- [Next.js API Routes](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)
|
||||
- Discord OAuth 实现参考
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
# 消息点赞功能实现
|
||||
|
||||
## 概述
|
||||
|
||||
本功能基于网易云信 NIM Web SDK V2 实现了聊天消息的点赞和踩功能，通过更新消息的 `serverExtension` 字段来持久化存储用户的点赞状态，使用 NIM SDK 的 `modifyMessage` API 实现服务端同步。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✅ 支持对AI回复消息进行点赞/踩
|
||||
- ✅ 简洁的状态标记：只记录用户的点赞/踩状态，不统计数量
|
||||
- ✅ 视觉反馈：点赞后按钮高亮显示
|
||||
- ✅ 防重复点赞：再次点击取消点赞
|
||||
- ✅ 状态持久化：通过 NIM SDK 的 `serverExtension` 字段保存到云端
|
||||
- ✅ 多用户支持：支持多个用户对同一消息进行独立的点赞
|
||||
- ✅ 自动同步：点赞状态自动同步到所有客户端
|
||||
- ✅ 轻量级：简化数据结构，减少存储空间
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 1. 数据结构
|
||||
|
||||
#### MessageLikeStatus 枚举
|
||||
|
||||
```typescript
|
||||
export enum MessageLikeStatus {
|
||||
None = 'none', // 未点赞/踩
|
||||
Liked = 'liked', // 已点赞
|
||||
Disliked = 'disliked', // 已踩
|
||||
}
|
||||
```
|
||||
|
||||
#### MessageServerExtension 接口（简化版）
|
||||
|
||||
```typescript
|
||||
export interface MessageServerExtension {
|
||||
[userId: string]: MessageLikeStatus // 用户ID -> 点赞状态的直接映射
|
||||
}
|
||||
```
|
||||
|
||||
#### 工具函数
|
||||
|
||||
```typescript
|
||||
// 解析消息的serverExtension字段
|
||||
export const parseMessageServerExtension = (serverExtension?: string): MessageServerExtension
|
||||
|
||||
// 序列化MessageServerExtension对象
|
||||
export const stringifyMessageServerExtension = (extension: MessageServerExtension): string
|
||||
|
||||
// 获取用户对消息的点赞状态
|
||||
export const getUserLikeStatus = (message: ExtendedMessage, userId: string): MessageLikeStatus
|
||||
```
|
||||
|
||||
### 2. 核心功能
|
||||
|
||||
#### NimMsgContext 扩展
|
||||
|
||||
在 `NimMsgContext` 中添加了 `updateMessageLikeStatus` 方法，使用 NIM SDK 的 `modifyMessage` API：
|
||||
|
||||
```typescript
|
||||
const updateMessageLikeStatus = useCallback(
|
||||
async (conversationId: string, messageClientId: string, likeStatus: MessageLikeStatus) => {
|
||||
// 1. 获取当前登录用户ID
|
||||
const currentUserId = nim.V2NIMLoginService.getLoginUser()
|
||||
|
||||
// 2. 解析当前消息的serverExtension
|
||||
const currentServerExt = parseMessageServerExtension(targetMessage.serverExtension)
|
||||
|
||||
// 3. 更新用户的点赞状态（简化版）
|
||||
const newServerExt = { ...currentServerExt }
|
||||
if (likeStatus === MessageLikeStatus.None) {
|
||||
delete newServerExt[currentUserId] // 移除点赞状态
|
||||
} else {
|
||||
newServerExt[currentUserId] = likeStatus // 设置新状态
|
||||
}
|
||||
|
||||
// 4. 调用NIM SDK更新消息
|
||||
const modifyResult = await nim.V2NIMMessageService.modifyMessage(targetMessage, {
|
||||
serverExtension: stringifyMessageServerExtension(newServerExt),
|
||||
})
|
||||
|
||||
// 5. 更新本地状态
|
||||
addMsg(conversationId, [modifyResult.message], false)
|
||||
},
|
||||
[addMsg]
|
||||
)
|
||||
```
|
||||
|
||||
#### useMessageLike Hook
|
||||
|
||||
提供便捷的点赞操作方法：
|
||||
|
||||
```typescript
|
||||
const {
|
||||
likeMessage, // 点赞消息
|
||||
dislikeMessage, // 踩消息
|
||||
cancelLikeMessage, // 取消点赞/踩
|
||||
toggleLike, // 切换点赞状态
|
||||
toggleDislike, // 切换踩状态
|
||||
} = useMessageLike()
|
||||
```
|
||||
|
||||
### 3. UI组件
|
||||
|
||||
#### ChatOtherTextContainer
|
||||
|
||||
AI消息容器组件已集成点赞功能：
|
||||
|
||||
- 鼠标悬停显示操作按钮
|
||||
- 点赞后按钮高亮（红色）
|
||||
- 踩后按钮高亮（灰色）
|
||||
- 显示点赞/踩数量
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基本用法
|
||||
|
||||
```typescript
|
||||
import { useMessageLike } from '@/hooks/useMessageLike';
|
||||
import { getUserLikeStatus, MessageLikeStatus } from '@/atoms/im';
|
||||
import { useNimChat } from '@/context/NimChat/useNimChat';
|
||||
|
||||
const MyComponent = ({ message }: { message: ExtendedMessage }) => {
|
||||
const { toggleLike, toggleDislike } = useMessageLike();
|
||||
const { nim } = useNimChat();
|
||||
|
||||
// 获取当前用户的点赞状态
|
||||
const currentUserId = nim.V2NIMLoginService.getLoginUser();
|
||||
const currentStatus = getUserLikeStatus(message, currentUserId || '');
|
||||
|
||||
const handleLike = async () => {
|
||||
await toggleLike(message.conversationId, message.messageClientId, currentStatus);
|
||||
};
|
||||
|
||||
const handleDislike = async () => {
|
||||
await toggleDislike(message.conversationId, message.messageClientId, currentStatus);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={handleLike}
|
||||
className={currentStatus === MessageLikeStatus.Liked ? 'active' : ''}
|
||||
>
|
||||
👍
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDislike}
|
||||
className={currentStatus === MessageLikeStatus.Disliked ? 'active' : ''}
|
||||
>
|
||||
👎
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
|
||||
```typescript
|
||||
// 直接设置点赞状态
|
||||
await likeMessage(conversationId, messageClientId)
|
||||
|
||||
// 直接设置踩状态
|
||||
await dislikeMessage(conversationId, messageClientId)
|
||||
|
||||
// 取消所有状态
|
||||
await cancelLikeMessage(conversationId, messageClientId)
|
||||
```
|
||||
|
||||
## 状态管理
|
||||
|
||||
点赞状态通过以下方式管理：
|
||||
|
||||
1. **服务端状态**: 存储在 `message.serverExtension` 字段中，通过 NIM SDK 同步到云端
|
||||
2. **多用户支持**: 每个用户的点赞状态独立存储，使用用户ID作为键
|
||||
3. **简化存储**: 仅存储用户的点赞状态，不计算总数，节省存储空间
|
||||
4. **状态同步**: 通过 `msgListAtom` 全局状态管理，并通过 NIM SDK 自动同步到所有客户端
|
||||
5. **持久化**: 点赞状态持久化存储在 NIM 服务器，不会丢失
|
||||
|
||||
## 扩展建议
|
||||
|
||||
### 1. 消息更新监听
|
||||
|
||||
由于使用了 NIM SDK 的 `modifyMessage` API，建议监听消息更新事件：
|
||||
|
||||
```typescript
|
||||
// 监听消息修改事件
|
||||
nim.V2NIMMessageService.on('onMessageUpdated', (messages: V2NIMMessage[]) => {
|
||||
messages.forEach((message) => {
|
||||
// 处理点赞状态更新
|
||||
const serverExt = parseMessageServerExtension(message.serverExtension)
|
||||
if (serverExt.likes) {
|
||||
console.log('消息点赞状态已更新:', message.messageClientId, serverExt)
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 错误处理
|
||||
|
||||
为点赞操作添加错误处理和重试机制：
|
||||
|
||||
```typescript
|
||||
const updateMessageLikeStatusWithRetry = async (
|
||||
conversationId: string,
|
||||
messageClientId: string,
|
||||
likeStatus: MessageLikeStatus,
|
||||
retryCount = 3
|
||||
) => {
|
||||
try {
|
||||
await updateMessageLikeStatus(conversationId, messageClientId, likeStatus)
|
||||
} catch (error) {
|
||||
if (retryCount > 0) {
|
||||
console.log(`点赞失败，剩余重试次数: ${retryCount}`, error)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000)) // 等待1秒
|
||||
return updateMessageLikeStatusWithRetry(
|
||||
conversationId,
|
||||
messageClientId,
|
||||
likeStatus,
|
||||
retryCount - 1
|
||||
)
|
||||
} else {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 批量操作
|
||||
|
||||
对于大量消息的点赞状态批量更新：
|
||||
|
||||
```typescript
|
||||
const batchUpdateLikes = (
|
||||
updates: Array<{
|
||||
conversationId: string
|
||||
messageClientId: string
|
||||
likeStatus: MessageLikeStatus
|
||||
}>
|
||||
) => {
|
||||
// 批量更新逻辑
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **性能考虑**: 点赞状态更新会触发组件重渲染，建议使用 React.memo 优化
|
||||
2. **网络请求**: 每次点赞都会调用 NIM SDK 的 `modifyMessage` API，请考虑网络状况
|
||||
3. **并发控制**: 快速连续点击可能导致并发请求，建议添加防抖或节流
|
||||
4. **权限验证**: NIM SDK 会自动验证用户权限，无需额外处理
|
||||
5. **消息类型限制**: `modifyMessage` API 仅支持特定类型的消息，请参考 NIM 文档
|
||||
6. **扩展字段大小**: `serverExtension` 字段有大小限制，请合理设计数据结构
|
||||
|
||||
## 相关文件
|
||||
|
||||
- `src/atoms/im.ts` - 数据类型定义
|
||||
- `src/context/NimChat/NimMsgContext.tsx` - 核心逻辑
|
||||
- `src/hooks/useMessageLike.ts` - 便捷Hook
|
||||
- `src/app/(main)/chat/[aiId]/components/ChatMessageItems/ChatOtherTextContainer.tsx` - UI实现
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
# URL Text 参数功能说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
实现了从 URL 参数中获取 `text` 并自动填充到聊天输入框的功能。用户点击对话建议时，会跳转到聊天页面并自动填充对应的文本。
|
||||
|
||||
## 实现细节
|
||||
|
||||
### 1. StartChatItem 组件
|
||||
|
||||
**文件位置**: `src/app/(main)/home/components/StartChat/StartChatItem.tsx`
|
||||
|
||||
**功能**:
|
||||
|
||||
- 对话建议列表中的每一项都是一个链接
|
||||
- 点击时跳转到聊天页面，并将建议文本作为 URL 参数传递
|
||||
- 使用 `encodeURIComponent()` 对文本进行编码，确保特殊字符正确传递
|
||||
|
||||
**示例**:
|
||||
|
||||
```tsx
|
||||
<Link href={`/chat/${character.aiId}?text=${encodeURIComponent(suggestion)}`} className="...">
|
||||
<span>{suggestion}</span>
|
||||
</Link>
|
||||
```
|
||||
|
||||
### 2. ChatInput 组件
|
||||
|
||||
**文件位置**: `src/app/(main)/chat/[aiId]/components/ChatMessageAction/ChatInput.tsx`
|
||||
|
||||
**功能**:
|
||||
|
||||
- 使用 `useSearchParams()` Hook 获取 URL 参数
|
||||
- 在组件挂载时检查是否有 `text` 参数
|
||||
- 如果有，自动填充到输入框并聚焦
|
||||
|
||||
**实现代码**:
|
||||
|
||||
```tsx
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
useEffect(() => {
|
||||
const textFromUrl = searchParams.get('text')
|
||||
if (textFromUrl) {
|
||||
setMessage(textFromUrl)
|
||||
// 聚焦到输入框
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.focus()
|
||||
}
|
||||
}
|
||||
}, [searchParams])
|
||||
```
|
||||
|
||||
## 使用场景
|
||||
|
||||
### 场景 1: 对话建议快捷回复
|
||||
|
||||
用户在首页看到 AI 角色的对话建议，点击后：
|
||||
|
||||
1. 跳转到聊天页面
|
||||
2. 建议文本自动填充到输入框
|
||||
3. 用户可以直接发送或修改后发送
|
||||
|
||||
### 场景 2: 外部链接跳转
|
||||
|
||||
可以通过外部链接直接跳转到聊天页面并预填充文本：
|
||||
|
||||
```
|
||||
https://your-domain.com/chat/123?text=Hello%20there!
|
||||
```
|
||||
|
||||
## URL 参数格式
|
||||
|
||||
- **参数名**: `text`
|
||||
- **编码方式**: URL 编码 (使用 `encodeURIComponent`)
|
||||
- **示例**:
|
||||
- 原始文本: `How is your day ?`
|
||||
- 编码后: `How%20is%20your%20day%20%3F`
|
||||
- 完整 URL: `/chat/123?text=How%20is%20your%20day%20%3F`
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **URL 编码**: 必须使用 `encodeURIComponent()` 对文本进行编码，避免特殊字符导致 URL 解析错误
|
||||
2. **自动聚焦**: 填充文本后会自动聚焦到输入框，提升用户体验
|
||||
3. **单次触发**: URL 参数只在组件挂载或 `searchParams` 变化时读取一次
|
||||
4. **不影响现有功能**: 如果 URL 中没有 `text` 参数，输入框保持原有行为
|
||||
|
||||
## 扩展建议
|
||||
|
||||
### 可能的增强功能：
|
||||
|
||||
1. **清除 URL 参数**: 填充文本后清除 URL 中的 `text` 参数，避免刷新页面时重复填充
|
||||
|
||||
```tsx
|
||||
const router = useRouter()
|
||||
// 填充后清除参数
|
||||
router.replace(`/chat/${aiId}`, { scroll: false })
|
||||
```
|
||||
|
||||
2. **支持多个参数**: 可以扩展支持其他参数，如 `image`、`voice` 等
|
||||
|
||||
```
|
||||
/chat/123?text=Hello&image=https://...
|
||||
```
|
||||
|
||||
3. **参数验证**: 添加文本长度限制和内容验证
|
||||
```tsx
|
||||
if (textFromUrl && textFromUrl.length <= 1000) {
|
||||
setMessage(textFromUrl)
|
||||
}
|
||||
```
|
||||
|
||||
## 相关文件
|
||||
|
||||
- `src/app/(main)/home/components/StartChat/StartChatItem.tsx` - 发起跳转的组件
|
||||
- `src/app/(main)/chat/[aiId]/components/ChatMessageAction/ChatInput.tsx` - 接收参数的组件
|
||||
- `src/app/(main)/home/context/AudioPlayerContext.tsx` - 音频播放上下文（相关功能）
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
# 语音合成功能集成文档
|
||||
|
||||
## 概述
|
||||
|
||||
在 VoiceSelector 组件中集成了基于 `useFetchVoiceTtsV2` 接口的语音合成功能，实现了智能缓存、自动播放和错误回退机制。
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 1. 智能缓存
|
||||
|
||||
- 基于配置参数生成唯一哈希值作为缓存键
|
||||
- 相同配置的语音只生成一次，存储在内存中
|
||||
- 支持手动清除缓存
|
||||
|
||||
### 2. 参数映射
|
||||
|
||||
- `tone` (音调) → `loudnessRate` (音量)
|
||||
- `speed` (语速) → `speechRate` (语速)
|
||||
- 参数范围：[-50, 100]
|
||||
|
||||
### 3. 播放逻辑
|
||||
|
||||
1. **优先级**：TTS 生成的语音 > 预设语音文件
|
||||
2. **错误回退**：TTS 失败时自动使用预设语音
|
||||
3. **状态管理**：生成中、播放中、已缓存等状态
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── hooks/
|
||||
│ ├── useVoiceTTS.ts # 语音合成核心 Hook
|
||||
│ └── useCommon.ts # TTS 接口 Hook
|
||||
├── components/
|
||||
│ └── features/
|
||||
│ └── VoiceTTSPlayer.tsx # 独立的语音播放器组件
|
||||
├── app/
|
||||
│ ├── (main)/create/components/Voice/
|
||||
│ │ └── VoiceSelector.tsx # 集成了 TTS 的语音选择器
|
||||
│ ├── test-voice-tts/
|
||||
│ │ └── page.tsx # TTS 功能测试页面
|
||||
│ └── test-voice-selector/
|
||||
│ └── page.tsx # VoiceSelector 测试页面
|
||||
└── docs/
|
||||
└── VoiceTTSIntegration.md # 本文档
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基础用法
|
||||
|
||||
```tsx
|
||||
import { useVoiceTTS } from '@/hooks/useVoiceTTS'
|
||||
|
||||
function MyComponent() {
|
||||
const { generateAndPlay, isPlaying, isGenerating } = useVoiceTTS()
|
||||
|
||||
const config = {
|
||||
text: '你好，这是测试语音',
|
||||
voiceType: 'S_zh_xiaoxiao_emotion',
|
||||
speechRate: 0,
|
||||
loudnessRate: 0,
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={() => generateAndPlay(config)} disabled={isGenerating}>
|
||||
{isGenerating ? '生成中...' : isPlaying(config) ? '播放中' : '播放'}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### VoiceSelector 集成
|
||||
|
||||
```tsx
|
||||
import VoiceSelector from '@/app/(main)/create/components/Voice/VoiceSelector'
|
||||
|
||||
function CreateForm() {
|
||||
const [voiceConfig, setVoiceConfig] = useState({
|
||||
tone: 0, // 音调 [-50, 100]
|
||||
speed: 0, // 语速 [-50, 100]
|
||||
content: 'voice_id', // 语音类型ID
|
||||
})
|
||||
|
||||
return (
|
||||
<VoiceSelector
|
||||
value={voiceConfig}
|
||||
onChange={setVoiceConfig}
|
||||
onPlay={handlePlayVoice} // 预设语音播放回调
|
||||
playing={isPlayingPreset} // 预设语音播放状态
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 接口说明
|
||||
|
||||
### useFetchVoiceTtsV2 参数
|
||||
|
||||
```typescript
|
||||
interface FetchVoiceTtsV2Request {
|
||||
text?: string // 文本内容
|
||||
voiceType?: string // 语音类型 (以 S_ 开头)
|
||||
speechRate?: number // 语速 [-50, 100]
|
||||
loudnessRate?: number // 音量 [-50, 100]
|
||||
}
|
||||
```
|
||||
|
||||
### useVoiceTTS 选项
|
||||
|
||||
```typescript
|
||||
interface UseVoiceTTSOptions {
|
||||
autoPlay?: boolean // 生成完成后自动播放，默认 true
|
||||
cacheEnabled?: boolean // 启用缓存，默认 true
|
||||
onPlayStart?: (configHash: string) => void
|
||||
onPlayEnd?: (configHash: string) => void
|
||||
onGenerateStart?: (config: FetchVoiceTtsV2Request) => void
|
||||
onGenerateEnd?: (config: FetchVoiceTtsV2Request, url: string) => void
|
||||
onError?: (error: string) => void
|
||||
}
|
||||
```
|
||||
|
||||
## 状态说明
|
||||
|
||||
### VoiceSelector 状态
|
||||
|
||||
- **未选择**：显示提示选择语音
|
||||
- **已选择 + 未生成**：显示播放按钮
|
||||
- **生成中**：显示动画和 "Generating..."
|
||||
- **播放中**：显示播放动画
|
||||
- **已缓存**：显示 "Cached" 标识
|
||||
- **错误**：显示错误信息
|
||||
|
||||
### 播放优先级
|
||||
|
||||
1. TTS 生成的语音（如果有有效的 voiceType 和 voiceText）
|
||||
2. 预设语音文件（回退机制）
|
||||
3. 错误处理和用户提示
|
||||
|
||||
## 缓存机制
|
||||
|
||||
- **缓存键**：基于 `text + voiceType + speechRate + loudnessRate` 生成哈希
|
||||
- **存储方式**：内存中存储（页面刷新后清除）
|
||||
- **清除策略**：手动清除或组件卸载时清除
|
||||
|
||||
## 错误处理
|
||||
|
||||
1. **TTS 接口错误**：自动回退到预设语音
|
||||
2. **播放错误**：显示错误信息给用户
|
||||
3. **网络错误**：重试机制（在 useVoiceTTS 中实现）
|
||||
|
||||
## 测试页面
|
||||
|
||||
- `/test-voice-tts` - 独立的 TTS 功能测试
|
||||
- `/test-voice-selector` - VoiceSelector 组件测试
|
||||
|
||||
## 性能优化
|
||||
|
||||
1. **缓存机制**：避免重复生成相同配置的语音
|
||||
2. **懒加载**：只在用户点击播放时才生成语音
|
||||
3. **错误回退**：TTS 失败时使用预设语音，不影响用户体验
|
||||
4. **状态管理**：精确的状态控制，避免不必要的重渲染
|
||||
|
||||
## 扩展功能
|
||||
|
||||
- 支持自定义缓存策略
|
||||
- 支持批量预生成常用语音
|
||||
- 支持语音质量选择
|
||||
- 支持播放进度控制
|
||||
Binary file not shown.
|
|
@ -1,77 +0,0 @@
|
|||
{
|
||||
"totalItems": 2887,
|
||||
"uniqueTexts": 860,
|
||||
"translationKeys": 849,
|
||||
"byRoute": {
|
||||
"/": 107,
|
||||
"shared": 385,
|
||||
"debug-mock": 25,
|
||||
"demo": 154,
|
||||
"server-device-test": 130,
|
||||
"test-avatar-crop": 79,
|
||||
"test-avatar-setting": 5,
|
||||
"test-discord": 141,
|
||||
"test-image-crop": 41,
|
||||
"test-lamejs": 12,
|
||||
"test-middleware": 16,
|
||||
"test-mp3-conversion": 35,
|
||||
"test-s3-upload": 8,
|
||||
"(auth)/about": 6,
|
||||
"(auth)/login": 26,
|
||||
"(main)/chat": 1,
|
||||
"(main)/contact": 21,
|
||||
"(main)/creator": 11,
|
||||
"(main)/crushcoin": 13,
|
||||
"(main)/explore": 3,
|
||||
"(main)/leaderboard": 18,
|
||||
"(main)/profile": 81,
|
||||
"(main)/test-voice-wave": 70,
|
||||
"(main)/vip": 19,
|
||||
"(main)/wallet": 39,
|
||||
"(auth)/login/fields": 33,
|
||||
"(auth)/policy/privacy": 123,
|
||||
"(auth)/policy/recharge": 159,
|
||||
"(auth)/policy/tos": 131,
|
||||
"(auth)/share/[userId]": 25,
|
||||
"(main)/chat/[aiId]": 341,
|
||||
"(main)/create": 205,
|
||||
"(main)/generate/image": 23,
|
||||
"(main)/generate/image-2-background": 26,
|
||||
"(main)/generate/image-2-image": 25,
|
||||
"(main)/generate/image-edit": 25,
|
||||
"(main)/profile/account": 24,
|
||||
"(main)/profile/edit": 34,
|
||||
"(main)/user/[userId]": 78,
|
||||
"(main)/wallet/transactions": 3,
|
||||
"(main)/edit/[aiId]/character": 39,
|
||||
"(main)/edit/[aiId]": 16,
|
||||
"(main)/edit/[aiId]/dialogue": 52,
|
||||
"(main)/edit/[aiId]/image": 44,
|
||||
"(main)/edit/[aiId]/type": 25,
|
||||
"(main)/wallet/charge/result": 10
|
||||
},
|
||||
"byKind": {
|
||||
"title": 12,
|
||||
"text": 2687,
|
||||
"toast": 37,
|
||||
"alt": 68,
|
||||
"validation": 35,
|
||||
"placeholder": 37,
|
||||
"aria": 3,
|
||||
"error": 5,
|
||||
"label": 2,
|
||||
"dialog": 1
|
||||
},
|
||||
"sampleKeys": [
|
||||
"_.notfound.title.empty_title",
|
||||
"common.mockprovider.text.div",
|
||||
"common.mockprovider.text.p",
|
||||
"common.uselogout.toast.toast_success",
|
||||
"common.useregister.toast.toast_success",
|
||||
"common.useregister.toast.toast_error",
|
||||
"debug_mock.debugmockpage.text.div",
|
||||
"debug_mock.debugmockpage.text.h1",
|
||||
"debug_mock.debugmockpage.text.h2",
|
||||
"debug_mock.debugmockpage.text.button"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,67 +0,0 @@
|
|||
# 项目概述
|
||||
|
||||
这是一个使用 Next.js App Router 的 Web 应用.
|
||||
|
||||
crushlevel-next/
|
||||
├── app/
|
||||
│ ├── (auth)/ # 路由组：认证相关页面
|
||||
│ │ ├── login/
|
||||
│ │ │ └── page.tsx # /login 页面
|
||||
│ │ ├── register/
|
||||
│ │ │ └── page.tsx # /register 页面
|
||||
│ │ └── layout.tsx # 认证页面共享布局
|
||||
│ ├── (dashboard)/ # 路由组：仪表盘相关页面
|
||||
│ │ ├── page.tsx # /dashboard 页面
|
||||
│ │ ├── settings/
|
||||
│ │ │ └── page.tsx # /dashboard/settings 页面
|
||||
│ │ └── layout.tsx # 仪表盘页面共享布局
|
||||
│ ├── api/ # API 路由
|
||||
│ │ ├── auth/
|
||||
│ │ │ └── route.ts # /api/auth 路由
|
||||
│ │ └── users/
|
||||
│ │ └── route.ts # /api/users 路由
|
||||
│ ├── layout.tsx # 根布局（全局布局）
|
||||
│ ├── page.tsx # 根页面（/ 路由）
|
||||
│ ├── globals.css # 全局样式
|
||||
│ ├── favicon.ico # 网站图标
|
||||
│ └── not-found.tsx # 404 页面
|
||||
├── components/ # 可复用组件
|
||||
│ ├── ui/ # UI 组件（如按钮、卡片等）
|
||||
│ │ ├── Button.tsx
|
||||
│ │ └── Card.tsx
|
||||
│ ├── layout/ # 布局相关组件
|
||||
│ │ ├── Navbar.tsx
|
||||
│ │ └── Footer.tsx
|
||||
│ └── features/ # 功能相关组件
|
||||
│ ├── AuthForm.tsx
|
||||
│ └── DashboardChart.tsx
|
||||
├── lib/ # 工具函数和库
|
||||
│ ├── api.ts # API 调用封装
|
||||
│ ├── auth.ts # 认证相关逻辑
|
||||
│ └── db/ # 数据库连接和查询
|
||||
│ ├── prisma.ts
|
||||
│ └── models.ts
|
||||
├── types/ # TypeScript 类型定义
|
||||
│ ├── user.ts
|
||||
│ └── post.ts
|
||||
├── public/ # 静态资源
|
||||
│ ├── images/
|
||||
│ └── fonts/
|
||||
├── styles/ # 样式文件（如果不使用 globals.css）
|
||||
│ ├── tailwind.css
|
||||
│ └── components/
|
||||
├── middleware.ts # 中间件（如认证、国际化）
|
||||
├── next.config.mjs # Next.js 配置文件
|
||||
├── tsconfig.json # TypeScript 配置文件
|
||||
├── package.json
|
||||
├── docs # 文档
|
||||
└── README.md
|
||||
|
||||
## UI库
|
||||
|
||||
使用Shadcn/U作为UI的基础组件，结合tailwindcss实现。
|
||||
token都存放在global.css中。
|
||||
|
||||
## 组件库
|
||||
|
||||
基础组件库components/ui
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "crushlevel-next",
|
||||
"name": "spicyxxai",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
@ -46,7 +46,6 @@
|
|||
"dayjs": "^1.11.13",
|
||||
"decimal.js": "^10.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"jotai": "^2.13.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lamejs": "^1.2.1",
|
||||
"lucide-react": "^0.525.0",
|
||||
|
|
@ -98,11 +97,6 @@
|
|||
"typescript": "^5",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"msw": {
|
||||
"workerDirectory": [
|
||||
"public"
|
||||
]
|
||||
},
|
||||
"overrides": {
|
||||
"@types/react": "19.2.7",
|
||||
"@types/react-dom": "19.2.3"
|
||||
|
|
|
|||
251
pnpm-lock.yaml
251
pnpm-lock.yaml
|
|
@ -107,9 +107,6 @@ importers:
|
|||
embla-carousel-react:
|
||||
specifier: ^8.6.0
|
||||
version: 8.6.0(react@19.2.1)
|
||||
jotai:
|
||||
specifier: ^2.13.1
|
||||
version: 2.13.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@19.2.7)(react@19.2.1)
|
||||
js-cookie:
|
||||
specifier: ^3.0.5
|
||||
version: 3.0.5
|
||||
|
|
@ -227,7 +224,7 @@ importers:
|
|||
version: 4.6.0(typescript@5.8.3)
|
||||
msw:
|
||||
specifier: ^2.10.4
|
||||
version: 2.10.4(@types/node@20.19.8)(typescript@5.8.3)
|
||||
version: 2.12.4(@types/node@20.19.8)(typescript@5.8.3)
|
||||
prettier:
|
||||
specifier: ^3.7.1
|
||||
version: 3.7.1
|
||||
|
|
@ -524,15 +521,6 @@ packages:
|
|||
react: '>=18.0.0'
|
||||
react-dom: '>=18.0.0'
|
||||
|
||||
'@bundled-es-modules/cookie@2.0.1':
|
||||
resolution: {integrity: sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==}
|
||||
|
||||
'@bundled-es-modules/statuses@1.0.1':
|
||||
resolution: {integrity: sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==}
|
||||
|
||||
'@bundled-es-modules/tough-cookie@0.1.6':
|
||||
resolution: {integrity: sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==}
|
||||
|
||||
'@byteplus/rtc@4.67.4':
|
||||
resolution: {integrity: sha512-UABVde+HBJtYlax4VZ1+iZtxG2+mbAA2HakwOkdCafpc4ltqWcCnLW/2HHF00nMGG36FxB8ho6sweiECBI9iTQ==}
|
||||
|
||||
|
|
@ -977,8 +965,12 @@ packages:
|
|||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@inquirer/confirm@5.1.13':
|
||||
resolution: {integrity: sha512-EkCtvp67ICIVVzjsquUiVSd+V5HRGOGQfsqA4E4vMWhYnB7InUL0pa0TIWt1i+OfP16Gkds8CdIu6yGZwOM1Yw==}
|
||||
'@inquirer/ansi@1.0.2':
|
||||
resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@inquirer/confirm@5.1.21':
|
||||
resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
'@types/node': '>=18'
|
||||
|
|
@ -986,8 +978,8 @@ packages:
|
|||
'@types/node':
|
||||
optional: true
|
||||
|
||||
'@inquirer/core@10.1.14':
|
||||
resolution: {integrity: sha512-Ma+ZpOJPewtIYl6HZHZckeX1STvDnHTCB2GVINNUlSEn2Am6LddWwfPkIGY0IUFVjUUrr/93XlBwTK6mfLjf0A==}
|
||||
'@inquirer/core@10.3.2':
|
||||
resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
'@types/node': '>=18'
|
||||
|
|
@ -995,12 +987,12 @@ packages:
|
|||
'@types/node':
|
||||
optional: true
|
||||
|
||||
'@inquirer/figures@1.0.12':
|
||||
resolution: {integrity: sha512-MJttijd8rMFcKJC8NYmprWr6hD3r9Gd9qUC0XwPNwoEPWSMVJwA2MlXxF+nhZZNMY+HXsWa+o7KY2emWYIn0jQ==}
|
||||
'@inquirer/figures@1.0.15':
|
||||
resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@inquirer/type@3.0.7':
|
||||
resolution: {integrity: sha512-PfunHQcjwnju84L+ycmcMKB/pTPIngjUJvfnRhKY6FKPuYXlM4aQCb/nIdTFR6BEhMjFvngzvng/vBAJMZpLSA==}
|
||||
'@inquirer/type@3.0.10':
|
||||
resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
'@types/node': '>=18'
|
||||
|
|
@ -1039,8 +1031,8 @@ packages:
|
|||
'@jridgewell/trace-mapping@0.3.9':
|
||||
resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
|
||||
|
||||
'@mswjs/interceptors@0.39.3':
|
||||
resolution: {integrity: sha512-9bw/wBL7pblsnOCIqvn1788S9o4h+cC5HWXg0Xhh0dOzsZ53IyfmBM+FYqpDDPbm0xjCqEqvCITloF3Dm4TXRQ==}
|
||||
'@mswjs/interceptors@0.40.0':
|
||||
resolution: {integrity: sha512-EFd6cVbHsgLa6wa4RljGj6Wk75qoHxUSyc5asLyyPSyuhIcdS2Q3Phw6ImS1q+CkALthJRShiYfKANcQMuMqsQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@napi-rs/wasm-runtime@0.2.12':
|
||||
|
|
@ -2093,9 +2085,6 @@ packages:
|
|||
'@tybys/wasm-util@0.10.0':
|
||||
resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
|
||||
|
||||
'@types/cookie@0.6.0':
|
||||
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
||||
|
||||
'@types/crypto-js@4.2.2':
|
||||
resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
|
||||
|
||||
|
|
@ -2140,9 +2129,6 @@ packages:
|
|||
'@types/statuses@2.0.6':
|
||||
resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
|
||||
|
||||
'@types/tough-cookie@4.0.5':
|
||||
resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
|
||||
|
||||
'@types/uuid@9.0.8':
|
||||
resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
|
||||
|
||||
|
|
@ -2365,10 +2351,6 @@ packages:
|
|||
ajv@6.12.6:
|
||||
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
|
||||
|
||||
ansi-escapes@4.3.2:
|
||||
resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
ansi-regex@5.0.1:
|
||||
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -2596,9 +2578,9 @@ packages:
|
|||
convert-source-map@2.0.0:
|
||||
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
||||
|
||||
cookie@0.7.2:
|
||||
resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
|
||||
engines: {node: '>= 0.6'}
|
||||
cookie@1.1.1:
|
||||
resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
core-util-is@1.0.3:
|
||||
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
||||
|
|
@ -3096,8 +3078,8 @@ packages:
|
|||
graceful-fs@4.2.11:
|
||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
||||
|
||||
graphql@16.11.0:
|
||||
resolution: {integrity: sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==}
|
||||
graphql@16.12.0:
|
||||
resolution: {integrity: sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==}
|
||||
engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
|
||||
|
||||
gulp-sort@2.0.0:
|
||||
|
|
@ -3337,24 +3319,6 @@ packages:
|
|||
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
|
||||
hasBin: true
|
||||
|
||||
jotai@2.13.1:
|
||||
resolution: {integrity: sha512-cRsw6kFeGC9Z/D3egVKrTXRweycZ4z/k7i2MrfCzPYsL9SIWcPXTyqv258/+Ay8VUEcihNiE/coBLE6Kic6b8A==}
|
||||
engines: {node: '>=12.20.0'}
|
||||
peerDependencies:
|
||||
'@babel/core': '>=7.0.0'
|
||||
'@babel/template': '>=7.0.0'
|
||||
'@types/react': '>=17.0.0'
|
||||
react: '>=17.0.0'
|
||||
peerDependenciesMeta:
|
||||
'@babel/core':
|
||||
optional: true
|
||||
'@babel/template':
|
||||
optional: true
|
||||
'@types/react':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
|
||||
js-cookie@3.0.5:
|
||||
resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
|
||||
engines: {node: '>=14'}
|
||||
|
|
@ -3594,8 +3558,8 @@ packages:
|
|||
ms@2.1.3:
|
||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||
|
||||
msw@2.10.4:
|
||||
resolution: {integrity: sha512-6R1or/qyele7q3RyPwNuvc0IxO8L8/Aim6Sz5ncXEgcWUNxSKE+udriTOWHtpMwmfkLYlacA2y7TIx4cL5lgHA==}
|
||||
msw@2.12.4:
|
||||
resolution: {integrity: sha512-rHNiVfTyKhzc0EjoXUBVGteNKBevdjOlVC6GlIRXpy+/3LHEIGRovnB5WPjcvmNODVQ1TNFnoa7wsGbd0V3epg==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -3873,9 +3837,6 @@ packages:
|
|||
proxy-from-env@1.1.0:
|
||||
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
|
||||
|
||||
psl@1.15.0:
|
||||
resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
|
||||
|
||||
punycode@2.3.1:
|
||||
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -3884,9 +3845,6 @@ packages:
|
|||
resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
|
||||
engines: {node: '>=0.6'}
|
||||
|
||||
querystringify@2.2.0:
|
||||
resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
|
||||
|
||||
queue-microtask@1.2.3:
|
||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
|
||||
|
|
@ -3999,9 +3957,6 @@ packages:
|
|||
resolution: {integrity: sha512-LBnkqsDE7BZKvqylbmn7lTIVdpx4K/QCduRATpO5R+wtPmky/a8pN1bO2D6wXppn1497AJF9mNjqAXr6bdl9jg==}
|
||||
engines: {node: '>=0.10.5'}
|
||||
|
||||
requires-port@1.0.0:
|
||||
resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
|
||||
|
||||
resize-observer-polyfill@1.5.1:
|
||||
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
|
||||
|
||||
|
|
@ -4025,6 +3980,9 @@ packages:
|
|||
resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
|
||||
hasBin: true
|
||||
|
||||
rettime@0.7.0:
|
||||
resolution: {integrity: sha512-LPRKoHnLKd/r3dVxcwO7vhCW+orkOGj9ViueosEBK6ie89CijnfRlhaDhHq/3Hxu4CkWQtxwlBG0mzTQY6uQjw==}
|
||||
|
||||
reusify@1.1.0:
|
||||
resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
|
||||
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
|
||||
|
|
@ -4242,6 +4200,10 @@ packages:
|
|||
resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
|
||||
tagged-tag@1.0.0:
|
||||
resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
tailwind-merge@3.3.1:
|
||||
resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
|
||||
|
||||
|
|
@ -4272,6 +4234,13 @@ packages:
|
|||
resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
tldts-core@7.0.19:
|
||||
resolution: {integrity: sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==}
|
||||
|
||||
tldts@7.0.19:
|
||||
resolution: {integrity: sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==}
|
||||
hasBin: true
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||
engines: {node: '>=8.0'}
|
||||
|
|
@ -4280,9 +4249,9 @@ packages:
|
|||
resolution: {integrity: sha512-y8MN937s/HVhEoBU1SxfHC+wxCHkV1a9gW8eAdTadYh/bGyesZIVcbjI+mSpFbSVwQici/XjBjuUyri1dnXwBw==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
|
||||
tough-cookie@4.1.4:
|
||||
resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
|
||||
engines: {node: '>=6'}
|
||||
tough-cookie@6.0.0:
|
||||
resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
|
||||
engines: {node: '>=16'}
|
||||
|
||||
ts-api-utils@2.1.0:
|
||||
resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
|
||||
|
|
@ -4325,13 +4294,9 @@ packages:
|
|||
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
type-fest@0.21.3:
|
||||
resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
type-fest@4.41.0:
|
||||
resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
|
||||
engines: {node: '>=16'}
|
||||
type-fest@5.3.1:
|
||||
resolution: {integrity: sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
typed-array-buffer@1.0.3:
|
||||
resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
|
||||
|
|
@ -4372,13 +4337,12 @@ packages:
|
|||
resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
universalify@0.2.0:
|
||||
resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
|
||||
engines: {node: '>= 4.0.0'}
|
||||
|
||||
unrs-resolver@1.11.1:
|
||||
resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
|
||||
|
||||
until-async@3.0.2:
|
||||
resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
|
||||
|
||||
update-browserslist-db@1.2.2:
|
||||
resolution: {integrity: sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==}
|
||||
hasBin: true
|
||||
|
|
@ -4388,9 +4352,6 @@ packages:
|
|||
uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
|
||||
url-parse@1.5.10:
|
||||
resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
|
||||
|
||||
use-callback-ref@1.3.3:
|
||||
resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -4552,8 +4513,8 @@ packages:
|
|||
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
yoctocolors-cjs@2.1.2:
|
||||
resolution: {integrity: sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==}
|
||||
yoctocolors-cjs@2.1.3:
|
||||
resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
zod-validation-error@4.0.2:
|
||||
|
|
@ -5238,19 +5199,6 @@ snapshots:
|
|||
react: 19.2.1
|
||||
react-dom: 19.2.1(react@19.2.1)
|
||||
|
||||
'@bundled-es-modules/cookie@2.0.1':
|
||||
dependencies:
|
||||
cookie: 0.7.2
|
||||
|
||||
'@bundled-es-modules/statuses@1.0.1':
|
||||
dependencies:
|
||||
statuses: 2.0.2
|
||||
|
||||
'@bundled-es-modules/tough-cookie@0.1.6':
|
||||
dependencies:
|
||||
'@types/tough-cookie': 4.0.5
|
||||
tough-cookie: 4.1.4
|
||||
|
||||
'@byteplus/rtc@4.67.4':
|
||||
dependencies:
|
||||
eventemitter3: 4.0.7
|
||||
|
|
@ -5612,29 +5560,31 @@ snapshots:
|
|||
'@img/sharp-win32-x64@0.34.5':
|
||||
optional: true
|
||||
|
||||
'@inquirer/confirm@5.1.13(@types/node@20.19.8)':
|
||||
'@inquirer/ansi@1.0.2': {}
|
||||
|
||||
'@inquirer/confirm@5.1.21(@types/node@20.19.8)':
|
||||
dependencies:
|
||||
'@inquirer/core': 10.1.14(@types/node@20.19.8)
|
||||
'@inquirer/type': 3.0.7(@types/node@20.19.8)
|
||||
'@inquirer/core': 10.3.2(@types/node@20.19.8)
|
||||
'@inquirer/type': 3.0.10(@types/node@20.19.8)
|
||||
optionalDependencies:
|
||||
'@types/node': 20.19.8
|
||||
|
||||
'@inquirer/core@10.1.14(@types/node@20.19.8)':
|
||||
'@inquirer/core@10.3.2(@types/node@20.19.8)':
|
||||
dependencies:
|
||||
'@inquirer/figures': 1.0.12
|
||||
'@inquirer/type': 3.0.7(@types/node@20.19.8)
|
||||
ansi-escapes: 4.3.2
|
||||
'@inquirer/ansi': 1.0.2
|
||||
'@inquirer/figures': 1.0.15
|
||||
'@inquirer/type': 3.0.10(@types/node@20.19.8)
|
||||
cli-width: 4.1.0
|
||||
mute-stream: 2.0.0
|
||||
signal-exit: 4.1.0
|
||||
wrap-ansi: 6.2.0
|
||||
yoctocolors-cjs: 2.1.2
|
||||
yoctocolors-cjs: 2.1.3
|
||||
optionalDependencies:
|
||||
'@types/node': 20.19.8
|
||||
|
||||
'@inquirer/figures@1.0.12': {}
|
||||
'@inquirer/figures@1.0.15': {}
|
||||
|
||||
'@inquirer/type@3.0.7(@types/node@20.19.8)':
|
||||
'@inquirer/type@3.0.10(@types/node@20.19.8)':
|
||||
optionalDependencies:
|
||||
'@types/node': 20.19.8
|
||||
|
||||
|
|
@ -5672,7 +5622,7 @@ snapshots:
|
|||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.4
|
||||
|
||||
'@mswjs/interceptors@0.39.3':
|
||||
'@mswjs/interceptors@0.40.0':
|
||||
dependencies:
|
||||
'@open-draft/deferred-promise': 2.2.0
|
||||
'@open-draft/logger': 0.3.0
|
||||
|
|
@ -6760,8 +6710,6 @@ snapshots:
|
|||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@types/cookie@0.6.0': {}
|
||||
|
||||
'@types/crypto-js@4.2.2': {}
|
||||
|
||||
'@types/estree@1.0.8': {}
|
||||
|
|
@ -6801,8 +6749,6 @@ snapshots:
|
|||
|
||||
'@types/statuses@2.0.6': {}
|
||||
|
||||
'@types/tough-cookie@4.0.5': {}
|
||||
|
||||
'@types/uuid@9.0.8': {}
|
||||
|
||||
'@types/ws@8.18.1':
|
||||
|
|
@ -7023,10 +6969,6 @@ snapshots:
|
|||
json-schema-traverse: 0.4.1
|
||||
uri-js: 4.4.1
|
||||
|
||||
ansi-escapes@4.3.2:
|
||||
dependencies:
|
||||
type-fest: 0.21.3
|
||||
|
||||
ansi-regex@5.0.1: {}
|
||||
|
||||
ansi-styles@4.3.0:
|
||||
|
|
@ -7270,7 +7212,7 @@ snapshots:
|
|||
|
||||
convert-source-map@2.0.0: {}
|
||||
|
||||
cookie@0.7.2: {}
|
||||
cookie@1.1.1: {}
|
||||
|
||||
core-util-is@1.0.3: {}
|
||||
|
||||
|
|
@ -7930,7 +7872,7 @@ snapshots:
|
|||
|
||||
graceful-fs@4.2.11: {}
|
||||
|
||||
graphql@16.11.0: {}
|
||||
graphql@16.12.0: {}
|
||||
|
||||
gulp-sort@2.0.0:
|
||||
dependencies:
|
||||
|
|
@ -8178,13 +8120,6 @@ snapshots:
|
|||
|
||||
jiti@2.4.2: {}
|
||||
|
||||
jotai@2.13.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@19.2.7)(react@19.2.1):
|
||||
optionalDependencies:
|
||||
'@babel/core': 7.28.5
|
||||
'@babel/template': 7.27.2
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.1
|
||||
|
||||
js-cookie@3.0.5: {}
|
||||
|
||||
js-tokens@4.0.0: {}
|
||||
|
|
@ -8387,25 +8322,25 @@ snapshots:
|
|||
|
||||
ms@2.1.3: {}
|
||||
|
||||
msw@2.10.4(@types/node@20.19.8)(typescript@5.8.3):
|
||||
msw@2.12.4(@types/node@20.19.8)(typescript@5.8.3):
|
||||
dependencies:
|
||||
'@bundled-es-modules/cookie': 2.0.1
|
||||
'@bundled-es-modules/statuses': 1.0.1
|
||||
'@bundled-es-modules/tough-cookie': 0.1.6
|
||||
'@inquirer/confirm': 5.1.13(@types/node@20.19.8)
|
||||
'@mswjs/interceptors': 0.39.3
|
||||
'@inquirer/confirm': 5.1.21(@types/node@20.19.8)
|
||||
'@mswjs/interceptors': 0.40.0
|
||||
'@open-draft/deferred-promise': 2.2.0
|
||||
'@open-draft/until': 2.1.0
|
||||
'@types/cookie': 0.6.0
|
||||
'@types/statuses': 2.0.6
|
||||
graphql: 16.11.0
|
||||
cookie: 1.1.1
|
||||
graphql: 16.12.0
|
||||
headers-polyfill: 4.0.3
|
||||
is-node-process: 1.2.0
|
||||
outvariant: 1.4.3
|
||||
path-to-regexp: 6.3.0
|
||||
picocolors: 1.1.1
|
||||
rettime: 0.7.0
|
||||
statuses: 2.0.2
|
||||
strict-event-emitter: 0.5.1
|
||||
type-fest: 4.41.0
|
||||
tough-cookie: 6.0.0
|
||||
type-fest: 5.3.1
|
||||
until-async: 3.0.2
|
||||
yargs: 17.7.2
|
||||
optionalDependencies:
|
||||
typescript: 5.8.3
|
||||
|
|
@ -8617,18 +8552,12 @@ snapshots:
|
|||
|
||||
proxy-from-env@1.1.0: {}
|
||||
|
||||
psl@1.15.0:
|
||||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
punycode@2.3.1: {}
|
||||
|
||||
qs@6.14.0:
|
||||
dependencies:
|
||||
side-channel: 1.1.0
|
||||
|
||||
querystringify@2.2.0: {}
|
||||
|
||||
queue-microtask@1.2.3: {}
|
||||
|
||||
raf@3.4.1:
|
||||
|
|
@ -8747,8 +8676,6 @@ snapshots:
|
|||
|
||||
requireindex@1.1.0: {}
|
||||
|
||||
requires-port@1.0.0: {}
|
||||
|
||||
resize-observer-polyfill@1.5.1: {}
|
||||
|
||||
resolve-from@4.0.0: {}
|
||||
|
|
@ -8771,6 +8698,8 @@ snapshots:
|
|||
path-parse: 1.0.7
|
||||
supports-preserve-symlinks-flag: 1.0.0
|
||||
|
||||
rettime@0.7.0: {}
|
||||
|
||||
reusify@1.1.0: {}
|
||||
|
||||
run-parallel@1.2.0:
|
||||
|
|
@ -9060,6 +8989,8 @@ snapshots:
|
|||
dependencies:
|
||||
'@pkgr/core': 0.2.9
|
||||
|
||||
tagged-tag@1.0.0: {}
|
||||
|
||||
tailwind-merge@3.3.1: {}
|
||||
|
||||
tailwindcss@4.1.11: {}
|
||||
|
|
@ -9102,6 +9033,12 @@ snapshots:
|
|||
fdir: 6.5.0(picomatch@4.0.3)
|
||||
picomatch: 4.0.3
|
||||
|
||||
tldts-core@7.0.19: {}
|
||||
|
||||
tldts@7.0.19:
|
||||
dependencies:
|
||||
tldts-core: 7.0.19
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
dependencies:
|
||||
is-number: 7.0.0
|
||||
|
|
@ -9113,12 +9050,9 @@ snapshots:
|
|||
- bare-abort-controller
|
||||
- react-native-b4a
|
||||
|
||||
tough-cookie@4.1.4:
|
||||
tough-cookie@6.0.0:
|
||||
dependencies:
|
||||
psl: 1.15.0
|
||||
punycode: 2.3.1
|
||||
universalify: 0.2.0
|
||||
url-parse: 1.5.10
|
||||
tldts: 7.0.19
|
||||
|
||||
ts-api-utils@2.1.0(typescript@5.8.3):
|
||||
dependencies:
|
||||
|
|
@ -9171,9 +9105,9 @@ snapshots:
|
|||
dependencies:
|
||||
prelude-ls: 1.2.1
|
||||
|
||||
type-fest@0.21.3: {}
|
||||
|
||||
type-fest@4.41.0: {}
|
||||
type-fest@5.3.1:
|
||||
dependencies:
|
||||
tagged-tag: 1.0.0
|
||||
|
||||
typed-array-buffer@1.0.3:
|
||||
dependencies:
|
||||
|
|
@ -9232,8 +9166,6 @@ snapshots:
|
|||
|
||||
unicorn-magic@0.3.0: {}
|
||||
|
||||
universalify@0.2.0: {}
|
||||
|
||||
unrs-resolver@1.11.1:
|
||||
dependencies:
|
||||
napi-postinstall: 0.3.0
|
||||
|
|
@ -9258,6 +9190,8 @@ snapshots:
|
|||
'@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
|
||||
'@unrs/resolver-binding-win32-x64-msvc': 1.11.1
|
||||
|
||||
until-async@3.0.2: {}
|
||||
|
||||
update-browserslist-db@1.2.2(browserslist@4.28.1):
|
||||
dependencies:
|
||||
browserslist: 4.28.1
|
||||
|
|
@ -9268,11 +9202,6 @@ snapshots:
|
|||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
url-parse@1.5.10:
|
||||
dependencies:
|
||||
querystringify: 2.2.0
|
||||
requires-port: 1.0.0
|
||||
|
||||
use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.1):
|
||||
dependencies:
|
||||
react: 19.2.1
|
||||
|
|
@ -9469,7 +9398,7 @@ snapshots:
|
|||
|
||||
yocto-queue@0.1.0: {}
|
||||
|
||||
yoctocolors-cjs@2.1.2: {}
|
||||
yoctocolors-cjs@2.1.3: {}
|
||||
|
||||
zod-validation-error@4.0.2(zod@4.0.5):
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -1,344 +0,0 @@
|
|||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
|
||||
/**
|
||||
* Mock Service Worker.
|
||||
* @see https://github.com/mswjs/msw
|
||||
* - Please do NOT modify this file.
|
||||
*/
|
||||
|
||||
const PACKAGE_VERSION = '2.10.4'
|
||||
const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
|
||||
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
|
||||
const activeClientIds = new Set()
|
||||
|
||||
addEventListener('install', function () {
|
||||
self.skipWaiting()
|
||||
})
|
||||
|
||||
addEventListener('activate', function (event) {
|
||||
event.waitUntil(self.clients.claim())
|
||||
})
|
||||
|
||||
addEventListener('message', async function (event) {
|
||||
const clientId = Reflect.get(event.source || {}, 'id')
|
||||
|
||||
if (!clientId || !self.clients) {
|
||||
return
|
||||
}
|
||||
|
||||
const client = await self.clients.get(clientId)
|
||||
|
||||
if (!client) {
|
||||
return
|
||||
}
|
||||
|
||||
const allClients = await self.clients.matchAll({
|
||||
type: 'window',
|
||||
})
|
||||
|
||||
switch (event.data) {
|
||||
case 'KEEPALIVE_REQUEST': {
|
||||
sendToClient(client, {
|
||||
type: 'KEEPALIVE_RESPONSE',
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'INTEGRITY_CHECK_REQUEST': {
|
||||
sendToClient(client, {
|
||||
type: 'INTEGRITY_CHECK_RESPONSE',
|
||||
payload: {
|
||||
packageVersion: PACKAGE_VERSION,
|
||||
checksum: INTEGRITY_CHECKSUM,
|
||||
},
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'MOCK_ACTIVATE': {
|
||||
activeClientIds.add(clientId)
|
||||
|
||||
sendToClient(client, {
|
||||
type: 'MOCKING_ENABLED',
|
||||
payload: {
|
||||
client: {
|
||||
id: client.id,
|
||||
frameType: client.frameType,
|
||||
},
|
||||
},
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'MOCK_DEACTIVATE': {
|
||||
activeClientIds.delete(clientId)
|
||||
break
|
||||
}
|
||||
|
||||
case 'CLIENT_CLOSED': {
|
||||
activeClientIds.delete(clientId)
|
||||
|
||||
const remainingClients = allClients.filter((client) => {
|
||||
return client.id !== clientId
|
||||
})
|
||||
|
||||
// Unregister itself when there are no more clients
|
||||
if (remainingClients.length === 0) {
|
||||
self.registration.unregister()
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
addEventListener('fetch', function (event) {
|
||||
// Bypass navigation requests.
|
||||
if (event.request.mode === 'navigate') {
|
||||
return
|
||||
}
|
||||
|
||||
// Opening the DevTools triggers the "only-if-cached" request
|
||||
// that cannot be handled by the worker. Bypass such requests.
|
||||
if (
|
||||
event.request.cache === 'only-if-cached' &&
|
||||
event.request.mode !== 'same-origin'
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// Bypass all requests when there are no active clients.
|
||||
// Prevents the self-unregistered worked from handling requests
|
||||
// after it's been deleted (still remains active until the next reload).
|
||||
if (activeClientIds.size === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const requestId = crypto.randomUUID()
|
||||
event.respondWith(handleRequest(event, requestId))
|
||||
})
|
||||
|
||||
/**
|
||||
* @param {FetchEvent} event
|
||||
* @param {string} requestId
|
||||
*/
|
||||
async function handleRequest(event, requestId) {
|
||||
const client = await resolveMainClient(event)
|
||||
const requestCloneForEvents = event.request.clone()
|
||||
const response = await getResponse(event, client, requestId)
|
||||
|
||||
// Send back the response clone for the "response:*" life-cycle events.
|
||||
// Ensure MSW is active and ready to handle the message, otherwise
|
||||
// this message will pend indefinitely.
|
||||
if (client && activeClientIds.has(client.id)) {
|
||||
const serializedRequest = await serializeRequest(requestCloneForEvents)
|
||||
|
||||
// Clone the response so both the client and the library could consume it.
|
||||
const responseClone = response.clone()
|
||||
|
||||
sendToClient(
|
||||
client,
|
||||
{
|
||||
type: 'RESPONSE',
|
||||
payload: {
|
||||
isMockedResponse: IS_MOCKED_RESPONSE in response,
|
||||
request: {
|
||||
id: requestId,
|
||||
...serializedRequest,
|
||||
},
|
||||
response: {
|
||||
type: responseClone.type,
|
||||
status: responseClone.status,
|
||||
statusText: responseClone.statusText,
|
||||
headers: Object.fromEntries(responseClone.headers.entries()),
|
||||
body: responseClone.body,
|
||||
},
|
||||
},
|
||||
},
|
||||
responseClone.body ? [serializedRequest.body, responseClone.body] : [],
|
||||
)
|
||||
}
|
||||
|
||||
return response
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve the main client for the given event.
|
||||
* Client that issues a request doesn't necessarily equal the client
|
||||
* that registered the worker. It's with the latter the worker should
|
||||
* communicate with during the response resolving phase.
|
||||
* @param {FetchEvent} event
|
||||
* @returns {Promise<Client | undefined>}
|
||||
*/
|
||||
async function resolveMainClient(event) {
|
||||
const client = await self.clients.get(event.clientId)
|
||||
|
||||
if (activeClientIds.has(event.clientId)) {
|
||||
return client
|
||||
}
|
||||
|
||||
if (client?.frameType === 'top-level') {
|
||||
return client
|
||||
}
|
||||
|
||||
const allClients = await self.clients.matchAll({
|
||||
type: 'window',
|
||||
})
|
||||
|
||||
return allClients
|
||||
.filter((client) => {
|
||||
// Get only those clients that are currently visible.
|
||||
return client.visibilityState === 'visible'
|
||||
})
|
||||
.find((client) => {
|
||||
// Find the client ID that's recorded in the
|
||||
// set of clients that have registered the worker.
|
||||
return activeClientIds.has(client.id)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {FetchEvent} event
|
||||
* @param {Client | undefined} client
|
||||
* @param {string} requestId
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
async function getResponse(event, client, requestId) {
|
||||
// Clone the request because it might've been already used
|
||||
// (i.e. its body has been read and sent to the client).
|
||||
const requestClone = event.request.clone()
|
||||
|
||||
function passthrough() {
|
||||
// Cast the request headers to a new Headers instance
|
||||
// so the headers can be manipulated with.
|
||||
const headers = new Headers(requestClone.headers)
|
||||
|
||||
// Remove the "accept" header value that marked this request as passthrough.
|
||||
// This prevents request alteration and also keeps it compliant with the
|
||||
// user-defined CORS policies.
|
||||
const acceptHeader = headers.get('accept')
|
||||
if (acceptHeader) {
|
||||
const values = acceptHeader.split(',').map((value) => value.trim())
|
||||
const filteredValues = values.filter(
|
||||
(value) => value !== 'msw/passthrough',
|
||||
)
|
||||
|
||||
if (filteredValues.length > 0) {
|
||||
headers.set('accept', filteredValues.join(', '))
|
||||
} else {
|
||||
headers.delete('accept')
|
||||
}
|
||||
}
|
||||
|
||||
return fetch(requestClone, { headers })
|
||||
}
|
||||
|
||||
// Bypass mocking when the client is not active.
|
||||
if (!client) {
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
// Bypass initial page load requests (i.e. static assets).
|
||||
// The absence of the immediate/parent client in the map of the active clients
|
||||
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
|
||||
// and is not ready to handle requests.
|
||||
if (!activeClientIds.has(client.id)) {
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
// Notify the client that a request has been intercepted.
|
||||
const serializedRequest = await serializeRequest(event.request)
|
||||
const clientMessage = await sendToClient(
|
||||
client,
|
||||
{
|
||||
type: 'REQUEST',
|
||||
payload: {
|
||||
id: requestId,
|
||||
...serializedRequest,
|
||||
},
|
||||
},
|
||||
[serializedRequest.body],
|
||||
)
|
||||
|
||||
switch (clientMessage.type) {
|
||||
case 'MOCK_RESPONSE': {
|
||||
return respondWithMock(clientMessage.data)
|
||||
}
|
||||
|
||||
case 'PASSTHROUGH': {
|
||||
return passthrough()
|
||||
}
|
||||
}
|
||||
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Client} client
|
||||
* @param {any} message
|
||||
* @param {Array<Transferable>} transferrables
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
function sendToClient(client, message, transferrables = []) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const channel = new MessageChannel()
|
||||
|
||||
channel.port1.onmessage = (event) => {
|
||||
if (event.data && event.data.error) {
|
||||
return reject(event.data.error)
|
||||
}
|
||||
|
||||
resolve(event.data)
|
||||
}
|
||||
|
||||
client.postMessage(message, [
|
||||
channel.port2,
|
||||
...transferrables.filter(Boolean),
|
||||
])
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Response} response
|
||||
* @returns {Response}
|
||||
*/
|
||||
function respondWithMock(response) {
|
||||
// Setting response status code to 0 is a no-op.
|
||||
// However, when responding with a "Response.error()", the produced Response
|
||||
// instance will have status code set to 0. Since it's not possible to create
|
||||
// a Response instance with status code 0, handle that use-case separately.
|
||||
if (response.status === 0) {
|
||||
return Response.error()
|
||||
}
|
||||
|
||||
const mockedResponse = new Response(response.body, response)
|
||||
|
||||
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
|
||||
value: true,
|
||||
enumerable: true,
|
||||
})
|
||||
|
||||
return mockedResponse
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Request} request
|
||||
*/
|
||||
async function serializeRequest(request) {
|
||||
return {
|
||||
url: request.url,
|
||||
mode: request.mode,
|
||||
method: request.method,
|
||||
headers: Object.fromEntries(request.headers.entries()),
|
||||
cache: request.cache,
|
||||
credentials: request.credentials,
|
||||
destination: request.destination,
|
||||
integrity: request.integrity,
|
||||
redirect: request.redirect,
|
||||
referrer: request.referrer,
|
||||
referrerPolicy: request.referrerPolicy,
|
||||
body: await request.arrayBuffer(),
|
||||
keepalive: request.keepalive,
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
# 文案翻译覆盖总结
|
||||
|
||||
## 执行结果
|
||||
|
||||
✅ **成功完成文案翻译覆盖任务**
|
||||
|
||||
### 统计数据
|
||||
|
||||
- **总翻译条目**: 378 条（去重后）
|
||||
- **成功替换**: 334 条
|
||||
- **成功率**: 88.4%
|
||||
- **剩余冲突**: 44 条
|
||||
|
||||
### 冲突分析
|
||||
|
||||
- **文本未找到**: 24 条 - 主要是包含特殊字符（如 emoji）的文本
|
||||
- **多处匹配**: 20 条 - 同一文本在文件中出现多次，需要人工确认
|
||||
|
||||
## 实现的功能
|
||||
|
||||
### 1. 智能文案替换
|
||||
|
||||
- 基于 `ts-morph` AST 解析，精确定位不同类型的文案
|
||||
- 支持 JSX 文本、属性值、函数参数等多种文案类型
|
||||
- 保持代码格式和缩进不变
|
||||
|
||||
### 2. 冲突检测机制
|
||||
|
||||
- 自动检测文件不存在、文本未找到、多处匹配等冲突
|
||||
- 生成详细的冲突报告，便于人工处理
|
||||
|
||||
### 3. 去重处理
|
||||
|
||||
- 自动去除翻译数据中的重复条目
|
||||
- 避免重复替换导致的错误
|
||||
|
||||
### 4. 报告生成
|
||||
|
||||
- 成功替换报告：`scripts/translation-report.json`
|
||||
- 冲突报告：`scripts/translation-conflicts.xlsx`
|
||||
|
||||
## 使用的脚本
|
||||
|
||||
### 主要脚本
|
||||
|
||||
- `scripts/apply-translations.cjs` - 基础翻译应用脚本
|
||||
- `scripts/reset-and-apply-translations.cjs` - 重置并应用翻译脚本（推荐使用）
|
||||
|
||||
### 使用方法
|
||||
|
||||
```bash
|
||||
# 重置文件并应用翻译（推荐）
|
||||
node scripts/reset-and-apply-translations.cjs
|
||||
|
||||
# 仅应用翻译（如果文件未被修改过）
|
||||
node scripts/apply-translations.cjs
|
||||
```
|
||||
|
||||
## 处理建议
|
||||
|
||||
### 对于剩余冲突
|
||||
|
||||
1. **文本未找到的条目**：检查是否包含特殊字符或格式问题
|
||||
2. **多处匹配的条目**：需要人工确认具体替换哪个位置
|
||||
|
||||
### 后续优化
|
||||
|
||||
1. 可以针对特殊字符（emoji）的匹配进行优化
|
||||
2. 可以添加更智能的多处匹配处理逻辑
|
||||
3. 可以添加翻译质量验证机制
|
||||
|
||||
## 文件变更
|
||||
|
||||
所有成功替换的文案已直接修改到源代码文件中，包括：
|
||||
|
||||
- React 组件中的 JSX 文本
|
||||
- 属性值（title、placeholder、alt 等）
|
||||
- 函数调用中的字符串参数
|
||||
- 表单验证消息等
|
||||
|
||||
翻译覆盖任务已成功完成！🎉
|
||||
|
|
@ -1,378 +0,0 @@
|
|||
/*
|
||||
CommonJS runtime for applying translations from Excel to source code.
|
||||
*/
|
||||
const path = require('node:path')
|
||||
const fs = require('node:fs')
|
||||
const { Project, SyntaxKind, Node } = require('ts-morph')
|
||||
const XLSX = require('xlsx')
|
||||
|
||||
const WORKDIR = process.cwd()
|
||||
const TRANSLATES_FILE = path.join(WORKDIR, 'scripts', 'translates.xlsx')
|
||||
const REPORT_FILE = path.join(WORKDIR, 'scripts', 'translation-report.json')
|
||||
const CONFLICTS_FILE = path.join(WORKDIR, 'scripts', 'translation-conflicts.xlsx')
|
||||
|
||||
// 统计信息
|
||||
const stats = {
|
||||
total: 0,
|
||||
success: 0,
|
||||
conflicts: 0,
|
||||
fileNotFound: 0,
|
||||
textNotFound: 0,
|
||||
multipleMatches: 0,
|
||||
}
|
||||
|
||||
// 冲突列表
|
||||
const conflicts = []
|
||||
|
||||
// 成功替换列表
|
||||
const successfulReplacements = []
|
||||
|
||||
function loadTranslations() {
|
||||
console.log('📖 读取翻译数据...')
|
||||
const wb = XLSX.readFile(TRANSLATES_FILE)
|
||||
const ws = wb.Sheets[wb.SheetNames[0]]
|
||||
const data = XLSX.utils.sheet_to_json(ws, { defval: '' })
|
||||
|
||||
// 筛选出需要替换的条目
|
||||
let translations = data.filter(
|
||||
(row) => row.text && row.corrected_text && row.text !== row.corrected_text
|
||||
)
|
||||
|
||||
// 去重：按 file + line + text 去重，保留第一个
|
||||
const seen = new Set()
|
||||
translations = translations.filter((row) => {
|
||||
const key = `${row.file}:${row.line}:${row.text}`
|
||||
if (seen.has(key)) {
|
||||
return false
|
||||
}
|
||||
seen.add(key)
|
||||
return true
|
||||
})
|
||||
|
||||
console.log(`📊 找到 ${translations.length} 条需要替换的翻译（已去重）`)
|
||||
stats.total = translations.length
|
||||
|
||||
return translations
|
||||
}
|
||||
|
||||
function groupByFile(translations) {
|
||||
const groups = new Map()
|
||||
for (const translation of translations) {
|
||||
const filePath = path.join(WORKDIR, translation.file)
|
||||
if (!groups.has(filePath)) {
|
||||
groups.set(filePath, [])
|
||||
}
|
||||
groups.get(filePath).push(translation)
|
||||
}
|
||||
return groups
|
||||
}
|
||||
|
||||
function findTextInNode(node, targetText, kind) {
|
||||
if (!node) return null
|
||||
|
||||
// 处理 JSX 文本节点
|
||||
if (Node.isJsxText(node)) {
|
||||
const text = node.getText().replace(/\s+/g, ' ').trim()
|
||||
if (text === targetText) return node
|
||||
}
|
||||
|
||||
// 处理字符串字面量
|
||||
if (Node.isStringLiteral(node) || Node.isNoSubstitutionTemplateLiteral(node)) {
|
||||
const text = node.getLiteralText()
|
||||
if (text === targetText) return node
|
||||
}
|
||||
|
||||
// 处理 JSX 表达式中的字符串
|
||||
if (Node.isJsxExpression(node)) {
|
||||
const expr = node.getExpression()
|
||||
if (expr && (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr))) {
|
||||
const text = expr.getLiteralText()
|
||||
if (text === targetText) return node
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function findTextInFile(sourceFile, translation) {
|
||||
const { text, line, kind } = translation
|
||||
const matches = []
|
||||
|
||||
sourceFile.forEachDescendant((node) => {
|
||||
// 根据 kind 类型进行不同的匹配
|
||||
if (kind === 'text') {
|
||||
// 查找 JSX 文本节点
|
||||
if (Node.isJsxText(node)) {
|
||||
const nodeText = node.getText().replace(/\s+/g, ' ').trim()
|
||||
if (nodeText === text) {
|
||||
matches.push({ node, type: 'jsx-text', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
// 查找 JSX 表达式中的字符串
|
||||
if (Node.isJsxExpression(node)) {
|
||||
const expr = node.getExpression()
|
||||
if (expr && (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr))) {
|
||||
const nodeText = expr.getLiteralText()
|
||||
if (nodeText === text) {
|
||||
matches.push({ node: expr, type: 'jsx-expression', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (['placeholder', 'title', 'alt', 'label', 'aria'].includes(kind)) {
|
||||
// 查找 JSX 属性
|
||||
if (Node.isJsxAttribute(node)) {
|
||||
const name = node.getNameNode().getText().toLowerCase()
|
||||
const value = getStringFromInitializer(node)
|
||||
if (value === text) {
|
||||
matches.push({ node, type: 'jsx-attribute', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
} else if (['toast', 'dialog', 'error', 'validation'].includes(kind)) {
|
||||
// 查找函数调用中的字符串参数
|
||||
if (Node.isCallExpression(node)) {
|
||||
const args = node.getArguments()
|
||||
for (const arg of args) {
|
||||
if (Node.isStringLiteral(arg) || Node.isNoSubstitutionTemplateLiteral(arg)) {
|
||||
const nodeText = arg.getLiteralText()
|
||||
if (nodeText === text) {
|
||||
matches.push({ node: arg, type: 'function-arg', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return matches
|
||||
}
|
||||
|
||||
function getStringFromInitializer(attr) {
|
||||
const init = attr.getInitializer()
|
||||
if (!init) return undefined
|
||||
if (Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init)) {
|
||||
return init.getLiteralText()
|
||||
}
|
||||
if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (!expr) return undefined
|
||||
if (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr)) {
|
||||
return expr.getLiteralText()
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
function replaceText(node, newText, type) {
|
||||
try {
|
||||
if (type === 'jsx-text') {
|
||||
// JSX 文本节点需要特殊处理，保持空白字符
|
||||
const originalText = node.getText()
|
||||
const newTextWithWhitespace = originalText.replace(/\S+/g, newText)
|
||||
node.replaceWithText(newTextWithWhitespace)
|
||||
} else if (type === 'jsx-expression' || type === 'function-arg') {
|
||||
// 字符串字面量
|
||||
if (Node.isStringLiteral(node)) {
|
||||
node.replaceWithText(`"${newText}"`)
|
||||
} else if (Node.isNoSubstitutionTemplateLiteral(node)) {
|
||||
node.replaceWithText(`\`${newText}\``)
|
||||
}
|
||||
} else if (type === 'jsx-attribute') {
|
||||
// JSX 属性值
|
||||
const init = node.getInitializer()
|
||||
if (init) {
|
||||
if (Node.isStringLiteral(init)) {
|
||||
init.replaceWithText(`"${newText}"`)
|
||||
} else if (Node.isNoSubstitutionTemplateLiteral(init)) {
|
||||
init.replaceWithText(`\`${newText}\``)
|
||||
} else if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (expr && (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr))) {
|
||||
if (Node.isStringLiteral(expr)) {
|
||||
expr.replaceWithText(`"${newText}"`)
|
||||
} else {
|
||||
expr.replaceWithText(`\`${newText}\``)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error(`❌ 替换失败: ${error.message}`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function processFile(filePath, translations) {
|
||||
if (!fs.existsSync(filePath)) {
|
||||
console.log(`❌ 文件不存在: ${path.relative(WORKDIR, filePath)}`)
|
||||
translations.forEach((t) => {
|
||||
conflicts.push({
|
||||
...t,
|
||||
conflictType: 'FILE_NOT_FOUND',
|
||||
conflictReason: '文件不存在',
|
||||
})
|
||||
})
|
||||
stats.fileNotFound += translations.length
|
||||
return
|
||||
}
|
||||
|
||||
console.log(`📝 处理文件: ${path.relative(WORKDIR, filePath)}`)
|
||||
|
||||
try {
|
||||
const project = new Project({
|
||||
tsConfigFilePath: path.join(WORKDIR, 'tsconfig.json'),
|
||||
skipAddingFilesFromTsConfig: true,
|
||||
})
|
||||
const sourceFile = project.addSourceFileAtPath(filePath)
|
||||
|
||||
for (const translation of translations) {
|
||||
const { text, corrected_text, line, kind } = translation
|
||||
|
||||
// 首先在指定行附近查找
|
||||
let matches = findTextInFile(sourceFile, translation)
|
||||
|
||||
// 如果没找到，在整个文件中搜索
|
||||
if (matches.length === 0) {
|
||||
matches = findTextInFile(sourceFile, translation)
|
||||
}
|
||||
|
||||
if (matches.length === 0) {
|
||||
conflicts.push({
|
||||
...translation,
|
||||
conflictType: 'TEXT_NOT_FOUND_IN_FILE',
|
||||
conflictReason: '在文件中找不到匹配的文本',
|
||||
})
|
||||
stats.textNotFound++
|
||||
continue
|
||||
}
|
||||
|
||||
if (matches.length > 1) {
|
||||
conflicts.push({
|
||||
...translation,
|
||||
conflictType: 'MULTIPLE_MATCHES',
|
||||
conflictReason: `找到 ${matches.length} 个匹配项，需要人工确认`,
|
||||
})
|
||||
stats.multipleMatches++
|
||||
continue
|
||||
}
|
||||
|
||||
// 执行替换
|
||||
const match = matches[0]
|
||||
const success = replaceText(match.node, corrected_text, match.type)
|
||||
|
||||
if (success) {
|
||||
successfulReplacements.push({
|
||||
...translation,
|
||||
actualLine: match.line,
|
||||
replacementType: match.type,
|
||||
})
|
||||
stats.success++
|
||||
console.log(`✅ 替换成功: "${text}" -> "${corrected_text}" (行 ${match.line})`)
|
||||
} else {
|
||||
conflicts.push({
|
||||
...translation,
|
||||
conflictType: 'REPLACEMENT_FAILED',
|
||||
conflictReason: '替换操作失败',
|
||||
})
|
||||
stats.conflicts++
|
||||
}
|
||||
}
|
||||
|
||||
// 保存修改后的文件
|
||||
sourceFile.saveSync()
|
||||
} catch (error) {
|
||||
console.error(`❌ 处理文件失败: ${filePath}`, error.message)
|
||||
translations.forEach((t) => {
|
||||
conflicts.push({
|
||||
...t,
|
||||
conflictType: 'PARSE_ERROR',
|
||||
conflictReason: `文件解析失败: ${error.message}`,
|
||||
})
|
||||
})
|
||||
stats.conflicts += translations.length
|
||||
}
|
||||
}
|
||||
|
||||
function generateReport() {
|
||||
console.log('\n📊 生成报告...')
|
||||
|
||||
// 生成成功替换报告
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
stats,
|
||||
successfulReplacements,
|
||||
conflicts: conflicts.map((c) => ({
|
||||
file: c.file,
|
||||
line: c.line,
|
||||
text: c.text,
|
||||
corrected_text: c.corrected_text,
|
||||
conflictType: c.conflictType,
|
||||
conflictReason: c.conflictReason,
|
||||
})),
|
||||
}
|
||||
|
||||
fs.writeFileSync(REPORT_FILE, JSON.stringify(report, null, 2))
|
||||
console.log(`📄 成功替换报告已保存: ${REPORT_FILE}`)
|
||||
|
||||
// 生成冲突报告 Excel
|
||||
if (conflicts.length > 0) {
|
||||
const conflictRows = conflicts.map((c) => ({
|
||||
file: c.file,
|
||||
line: c.line,
|
||||
text: c.text,
|
||||
corrected_text: c.corrected_text,
|
||||
conflictType: c.conflictType,
|
||||
conflictReason: c.conflictReason,
|
||||
route: c.route,
|
||||
componentOrFn: c.componentOrFn,
|
||||
kind: c.kind,
|
||||
keyOrLocator: c.keyOrLocator,
|
||||
}))
|
||||
|
||||
const ws = XLSX.utils.json_to_sheet(conflictRows)
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'conflicts')
|
||||
XLSX.writeFile(wb, CONFLICTS_FILE)
|
||||
console.log(`📄 冲突报告已保存: ${CONFLICTS_FILE}`)
|
||||
}
|
||||
}
|
||||
|
||||
function printSummary() {
|
||||
console.log('\n📈 处理完成！')
|
||||
console.log(`总翻译条目: ${stats.total}`)
|
||||
console.log(`✅ 成功替换: ${stats.success}`)
|
||||
console.log(`❌ 文件不存在: ${stats.fileNotFound}`)
|
||||
console.log(`❌ 文本未找到: ${stats.textNotFound}`)
|
||||
console.log(`❌ 多处匹配: ${stats.multipleMatches}`)
|
||||
console.log(`❌ 其他冲突: ${stats.conflicts}`)
|
||||
console.log(`\n成功率: ${((stats.success / stats.total) * 100).toFixed(1)}%`)
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log('🚀 开始应用翻译...\n')
|
||||
|
||||
try {
|
||||
// 1. 读取翻译数据
|
||||
const translations = loadTranslations()
|
||||
|
||||
// 2. 按文件分组
|
||||
const fileGroups = groupByFile(translations)
|
||||
|
||||
// 3. 处理每个文件
|
||||
for (const [filePath, fileTranslations] of fileGroups) {
|
||||
processFile(filePath, fileTranslations)
|
||||
}
|
||||
|
||||
// 4. 生成报告
|
||||
generateReport()
|
||||
|
||||
// 5. 打印总结
|
||||
printSummary()
|
||||
} catch (error) {
|
||||
console.error('❌ 执行失败:', error)
|
||||
process.exitCode = 1
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
/*
|
||||
将现有的 copy-audit.xlsx 转换为 i18next 格式的翻译文件
|
||||
*/
|
||||
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const XLSX = require('xlsx')
|
||||
|
||||
const WORKDIR = process.cwd()
|
||||
|
||||
function generateI18nKey(item) {
|
||||
// 生成 i18next 格式的键名
|
||||
const route = item.route === 'shared' ? 'common' : item.route.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
const component = item.componentOrFn.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
const kind = item.kind
|
||||
const locator = item.keyOrLocator.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
|
||||
return `${route}.${component}.${kind}.${locator}`.toLowerCase()
|
||||
}
|
||||
|
||||
function main() {
|
||||
// 读取现有的 Excel 文件
|
||||
const excelFile = path.join(WORKDIR, 'docs', 'copy-audit.xlsx')
|
||||
if (!fs.existsSync(excelFile)) {
|
||||
console.error('❌ 找不到 copy-audit.xlsx 文件，请先运行 extract-copy 脚本')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
const workbook = XLSX.readFile(excelFile)
|
||||
const sheetName = workbook.SheetNames[0]
|
||||
const worksheet = workbook.Sheets[sheetName]
|
||||
const data = XLSX.utils.sheet_to_json(worksheet)
|
||||
|
||||
console.log(`📊 读取到 ${data.length} 条记录`)
|
||||
|
||||
// 生成 i18next 格式的翻译文件
|
||||
const translation = {}
|
||||
const i18nKeys = []
|
||||
|
||||
data.forEach((item, index) => {
|
||||
if (item.text && item.text.trim()) {
|
||||
const key = generateI18nKey(item)
|
||||
translation[key] = item.text
|
||||
i18nKeys.push({
|
||||
key,
|
||||
value: item.text,
|
||||
route: item.route,
|
||||
file: item.file,
|
||||
line: item.line,
|
||||
kind: item.kind,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 确保目录存在
|
||||
const localesDir = path.join(WORKDIR, 'public', 'locales', 'en')
|
||||
if (!fs.existsSync(localesDir)) {
|
||||
fs.mkdirSync(localesDir, { recursive: true })
|
||||
}
|
||||
|
||||
// 写入翻译文件
|
||||
const translationFile = path.join(localesDir, 'translation.json')
|
||||
fs.writeFileSync(translationFile, JSON.stringify(translation, null, 2))
|
||||
|
||||
// 生成详细的 i18n 扫描报告
|
||||
const report = {
|
||||
totalItems: data.length,
|
||||
uniqueTexts: new Set(data.map((item) => item.text)).size,
|
||||
translationKeys: Object.keys(translation).length,
|
||||
byRoute: data.reduce((acc, item) => {
|
||||
acc[item.route] = (acc[item.route] || 0) + 1
|
||||
return acc
|
||||
}, {}),
|
||||
byKind: data.reduce((acc, item) => {
|
||||
acc[item.kind] = (acc[item.kind] || 0) + 1
|
||||
return acc
|
||||
}, {}),
|
||||
sampleKeys: Object.keys(translation).slice(0, 10),
|
||||
}
|
||||
|
||||
// 生成 Excel 格式的 i18n 报告
|
||||
const i18nWorkbook = XLSX.utils.book_new()
|
||||
const i18nSheet = XLSX.utils.json_to_sheet(i18nKeys)
|
||||
XLSX.utils.book_append_sheet(i18nWorkbook, i18nSheet, 'i18n-keys')
|
||||
|
||||
const i18nReportFile = path.join(WORKDIR, 'docs', 'i18n-scan-report.xlsx')
|
||||
XLSX.writeFile(i18nWorkbook, i18nReportFile)
|
||||
|
||||
// 生成 JSON 报告
|
||||
const reportFile = path.join(WORKDIR, 'docs', 'i18n-scan-report.json')
|
||||
fs.writeFileSync(reportFile, JSON.stringify(report, null, 2))
|
||||
|
||||
console.log('✅ i18next 扫描转换完成！')
|
||||
console.log(`📊 总扫描条目: ${data.length}`)
|
||||
console.log(`🔑 生成翻译键: ${Object.keys(translation).length}`)
|
||||
console.log(`📁 翻译文件: ${translationFile}`)
|
||||
console.log(`📋 i18n Excel 报告: ${i18nReportFile}`)
|
||||
console.log(`📄 JSON 报告: ${reportFile}`)
|
||||
console.log('\n📝 示例翻译键:')
|
||||
report.sampleKeys.forEach((key) => {
|
||||
console.log(` ${key}: "${translation[key]}"`)
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
|
|
@ -1,333 +0,0 @@
|
|||
/*
|
||||
CommonJS runtime for extracting user-facing copy into Excel.
|
||||
*/
|
||||
const path = require('node:path')
|
||||
const fs = require('node:fs')
|
||||
const { globby } = require('globby')
|
||||
const { Project, SyntaxKind, Node } = require('ts-morph')
|
||||
const XLSX = require('xlsx')
|
||||
|
||||
const WORKDIR = process.cwd()
|
||||
const SRC_DIR = path.join(WORKDIR, 'src')
|
||||
const APP_DIR = path.join(SRC_DIR, 'app')
|
||||
|
||||
function ensureExcelDir() {
|
||||
const docsDir = path.join(WORKDIR, 'docs')
|
||||
if (!fs.existsSync(docsDir)) fs.mkdirSync(docsDir, { recursive: true })
|
||||
}
|
||||
|
||||
function isMeaningfulText(value) {
|
||||
if (!value) return false
|
||||
const trimmed = String(value).replace(/\s+/g, ' ').trim()
|
||||
if (!trimmed) return false
|
||||
if (/^[A-Za-z0-9_.$-]+$/.test(trimmed) && trimmed.length > 24) return false
|
||||
return true
|
||||
}
|
||||
|
||||
function getRouteForFile(absFilePath) {
|
||||
if (!absFilePath.startsWith(APP_DIR)) return 'shared'
|
||||
let dir = path.dirname(absFilePath)
|
||||
while (dir.startsWith(APP_DIR)) {
|
||||
const pageTsx = path.join(dir, 'page.tsx')
|
||||
const pageTs = path.join(dir, 'page.ts')
|
||||
if (fs.existsSync(pageTsx) || fs.existsSync(pageTs)) {
|
||||
const rel = path.relative(APP_DIR, dir)
|
||||
return rel || '/'
|
||||
}
|
||||
const parent = path.dirname(dir)
|
||||
if (parent === dir) break
|
||||
dir = parent
|
||||
}
|
||||
const relToApp = path.relative(APP_DIR, absFilePath)
|
||||
const parts = relToApp.split(path.sep)
|
||||
return parts.length > 0 ? parts[0] : 'shared'
|
||||
}
|
||||
|
||||
function getComponentOrFnName(node) {
|
||||
const fn = node.getFirstAncestorByKind(SyntaxKind.FunctionDeclaration)
|
||||
if (fn && fn.getName && fn.getName()) return fn.getName()
|
||||
const varDecl = node.getFirstAncestorByKind(SyntaxKind.VariableDeclaration)
|
||||
if (varDecl && varDecl.getName) return varDecl.getName()
|
||||
const cls = node.getFirstAncestorByKind(SyntaxKind.ClassDeclaration)
|
||||
if (cls && cls.getName && cls.getName()) return cls.getName()
|
||||
const sf = node.getSourceFile()
|
||||
return path.basename(sf.getFilePath())
|
||||
}
|
||||
|
||||
function getNodeLine(node) {
|
||||
const pos = node.getStartLineNumber && node.getStartLineNumber()
|
||||
return pos || 1
|
||||
}
|
||||
|
||||
function getAttrName(attr) {
|
||||
return attr.getNameNode().getText()
|
||||
}
|
||||
|
||||
function getStringFromInitializer(attr) {
|
||||
const init = attr.getInitializer()
|
||||
if (!init) return undefined
|
||||
if (Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
return init.getLiteralText()
|
||||
if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (!expr) return undefined
|
||||
if (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr))
|
||||
return expr.getLiteralText()
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
async function collectFiles() {
|
||||
const patterns = ['src/**/*.{ts,tsx}']
|
||||
const ignore = [
|
||||
'**/node_modules/**',
|
||||
'**/.next/**',
|
||||
'**/__tests__/**',
|
||||
'**/mocks/**',
|
||||
'**/mock/**',
|
||||
'**/*.d.ts',
|
||||
]
|
||||
return await globby(patterns, { gitignore: true, ignore })
|
||||
}
|
||||
|
||||
function pushItem(items, item) {
|
||||
if (!isMeaningfulText(item.text)) return
|
||||
items.push(item)
|
||||
}
|
||||
|
||||
function extractFromSourceFile(abs, items, project) {
|
||||
const sf = project.addSourceFileAtPath(abs)
|
||||
sf.forEachDescendant((node) => {
|
||||
// JSX text nodes
|
||||
if (Node.isJsxElement(node)) {
|
||||
const opening = node.getOpeningElement()
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const route = getRouteForFile(abs)
|
||||
const tagName = opening.getTagNameNode().getText()
|
||||
// 递归抓取所有子层级文本节点
|
||||
const textNodes = node.getDescendantsOfKind(SyntaxKind.JsxText)
|
||||
textNodes.forEach((t) => {
|
||||
const text = t.getText()
|
||||
const cleaned = text.replace(/\s+/g, ' ').trim()
|
||||
if (isMeaningfulText(cleaned)) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'text',
|
||||
keyOrLocator: tagName,
|
||||
text: cleaned,
|
||||
line: getNodeLine(t),
|
||||
})
|
||||
}
|
||||
})
|
||||
// 抓取 {'...'} 这类表达式中的字符串字面量
|
||||
const exprs = node.getDescendantsOfKind(SyntaxKind.JsxExpression)
|
||||
exprs.forEach((expr) => {
|
||||
const inner = expr.getExpression()
|
||||
if (inner && (Node.isStringLiteral(inner) || Node.isNoSubstitutionTemplateLiteral(inner))) {
|
||||
const cleaned = inner.getLiteralText().replace(/\s+/g, ' ').trim()
|
||||
if (isMeaningfulText(cleaned)) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'text',
|
||||
keyOrLocator: tagName,
|
||||
text: cleaned,
|
||||
line: getNodeLine(expr),
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// JSX attributes
|
||||
if (Node.isJsxOpeningElement(node) || Node.isJsxSelfClosingElement(node)) {
|
||||
const route = getRouteForFile(abs)
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const tag = node.getTagNameNode().getText()
|
||||
const attrs = node.getAttributes().filter(Node.isJsxAttribute)
|
||||
attrs.forEach((attr) => {
|
||||
const name = getAttrName(attr)
|
||||
const lower = name.toLowerCase()
|
||||
const value = getStringFromInitializer(attr)
|
||||
if (!value) return
|
||||
let kind = null
|
||||
if (lower === 'placeholder') kind = 'placeholder'
|
||||
else if (lower === 'title') kind = 'title'
|
||||
else if (lower === 'alt') kind = 'alt'
|
||||
else if (lower.startsWith('aria-')) kind = 'aria'
|
||||
else if (lower === 'label') kind = 'label'
|
||||
if (kind) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind,
|
||||
keyOrLocator: `${tag}.${name}`,
|
||||
text: value,
|
||||
line: getNodeLine(attr),
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Interaction messages
|
||||
if (Node.isCallExpression(node)) {
|
||||
const route = getRouteForFile(abs)
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const expr = node.getExpression()
|
||||
let kind = null
|
||||
let keyOrLocator = ''
|
||||
if (Node.isPropertyAccessExpression(expr)) {
|
||||
const left = expr.getExpression().getText()
|
||||
const name = expr.getName()
|
||||
if (left === 'toast' || left === 'message') {
|
||||
kind = 'toast'
|
||||
keyOrLocator = `${left}.${name}`
|
||||
}
|
||||
if ((left || '').toLowerCase().includes('dialog')) {
|
||||
kind = 'dialog'
|
||||
keyOrLocator = `${left}.${name}`
|
||||
}
|
||||
} else if (Node.isIdentifier(expr)) {
|
||||
const id = expr.getText()
|
||||
if (id === 'alert' || id === 'confirm') {
|
||||
kind = 'dialog'
|
||||
keyOrLocator = id
|
||||
}
|
||||
}
|
||||
if (kind) {
|
||||
const arg0 = node.getArguments()[0]
|
||||
if (arg0 && (Node.isStringLiteral(arg0) || Node.isNoSubstitutionTemplateLiteral(arg0))) {
|
||||
const text = arg0.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind,
|
||||
keyOrLocator,
|
||||
text,
|
||||
line: getNodeLine(node),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// form.setError("field", { message: "..." })
|
||||
if (Node.isPropertyAccessExpression(expr) && expr.getName() === 'setError') {
|
||||
const args = node.getArguments()
|
||||
if (args.length >= 2) {
|
||||
const second = args[1]
|
||||
if (Node.isObjectLiteralExpression(second)) {
|
||||
const msgProp = second.getProperty('message')
|
||||
if (msgProp && Node.isPropertyAssignment(msgProp)) {
|
||||
const init = msgProp.getInitializer()
|
||||
if (
|
||||
init &&
|
||||
(Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
) {
|
||||
const text = init.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'error',
|
||||
keyOrLocator: 'form.setError',
|
||||
text,
|
||||
line: getNodeLine(msgProp),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generic validation object { message: "..." }
|
||||
const args = node.getArguments()
|
||||
for (const a of args) {
|
||||
if (Node.isObjectLiteralExpression(a)) {
|
||||
const prop = a.getProperty('message')
|
||||
if (prop && Node.isPropertyAssignment(prop)) {
|
||||
const init = prop.getInitializer()
|
||||
if (
|
||||
init &&
|
||||
(Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
) {
|
||||
const text = init.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'validation',
|
||||
keyOrLocator: 'message',
|
||||
text,
|
||||
line: getNodeLine(prop),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function aggregate(items) {
|
||||
const map = new Map()
|
||||
for (const it of items) {
|
||||
const key = `${it.route}__${it.kind}__${it.keyOrLocator}__${it.text}`
|
||||
if (!map.has(key)) map.set(key, { item: it, count: 1 })
|
||||
else map.get(key).count += 1
|
||||
}
|
||||
const result = []
|
||||
for (const { item, count } of map.values()) {
|
||||
result.push({ ...item, count })
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function toWorkbook(items) {
|
||||
const rows = items.map((it) => ({
|
||||
route: it.route,
|
||||
file: it.file,
|
||||
componentOrFn: it.componentOrFn,
|
||||
kind: it.kind,
|
||||
keyOrLocator: it.keyOrLocator,
|
||||
text: it.text,
|
||||
line: it.line,
|
||||
count: it.count || 1,
|
||||
notes: it.notes || '',
|
||||
}))
|
||||
const ws = XLSX.utils.json_to_sheet(rows, { skipHeader: false })
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'copy')
|
||||
return wb
|
||||
}
|
||||
|
||||
async function main() {
|
||||
ensureExcelDir()
|
||||
const files = await collectFiles()
|
||||
const project = new Project({
|
||||
tsConfigFilePath: path.join(WORKDIR, 'tsconfig.json'),
|
||||
skipAddingFilesFromTsConfig: true,
|
||||
})
|
||||
const items = []
|
||||
for (const rel of files) {
|
||||
const abs = path.join(WORKDIR, rel)
|
||||
try {
|
||||
extractFromSourceFile(abs, items, project)
|
||||
} catch (e) {
|
||||
// continue on parse errors
|
||||
}
|
||||
}
|
||||
const aggregated = aggregate(items)
|
||||
const wb = toWorkbook(aggregated)
|
||||
const out = path.join(WORKDIR, 'docs', 'copy-audit.xlsx')
|
||||
XLSX.writeFile(wb, out)
|
||||
console.log(`Wrote ${aggregated.length} rows to ${out}`)
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err)
|
||||
process.exitCode = 1
|
||||
})
|
||||
|
|
@ -1,376 +0,0 @@
|
|||
/*
|
||||
Extract all user-facing copy from the codebase into an Excel file.
|
||||
Scans TS/TSX under src/, groups by Next.js App Router route, and writes docs/copy-audit.xlsx.
|
||||
*/
|
||||
|
||||
import path from 'node:path'
|
||||
import fs from 'node:fs'
|
||||
import { globby } from 'globby'
|
||||
import {
|
||||
Project,
|
||||
SyntaxKind,
|
||||
Node,
|
||||
JsxAttribute,
|
||||
StringLiteral,
|
||||
NoSubstitutionTemplateLiteral,
|
||||
} from 'ts-morph'
|
||||
import * as XLSX from 'xlsx'
|
||||
|
||||
type CopyKind =
|
||||
| 'text'
|
||||
| 'placeholder'
|
||||
| 'title'
|
||||
| 'alt'
|
||||
| 'aria'
|
||||
| 'label'
|
||||
| 'toast'
|
||||
| 'dialog'
|
||||
| 'error'
|
||||
| 'validation'
|
||||
|
||||
interface CopyItem {
|
||||
route: string
|
||||
file: string
|
||||
componentOrFn: string
|
||||
kind: CopyKind
|
||||
keyOrLocator: string
|
||||
text: string
|
||||
line: number
|
||||
notes?: string
|
||||
}
|
||||
|
||||
const WORKDIR = process.cwd()
|
||||
const SRC_DIR = path.join(WORKDIR, 'src')
|
||||
const APP_DIR = path.join(SRC_DIR, 'app')
|
||||
|
||||
function ensureExcelDir() {
|
||||
const docsDir = path.join(WORKDIR, 'docs')
|
||||
if (!fs.existsSync(docsDir)) fs.mkdirSync(docsDir, { recursive: true })
|
||||
}
|
||||
|
||||
function isMeaningfulText(value: string | undefined | null): value is string {
|
||||
if (!value) return false
|
||||
const trimmed = value.replace(/\s+/g, ' ').trim()
|
||||
if (!trimmed) return false
|
||||
// Filter obvious code-like tokens
|
||||
if (/^[A-Za-z0-9_.$-]+$/.test(trimmed) && trimmed.length > 24) return false
|
||||
return true
|
||||
}
|
||||
|
||||
function getRouteForFile(absFilePath: string): string {
|
||||
if (!absFilePath.startsWith(APP_DIR)) return 'shared'
|
||||
let dir = path.dirname(absFilePath)
|
||||
// Walk up to find nearest folder that contains a page.tsx (or page.ts)
|
||||
while (dir.startsWith(APP_DIR)) {
|
||||
const pageTsx = path.join(dir, 'page.tsx')
|
||||
const pageTs = path.join(dir, 'page.ts')
|
||||
if (fs.existsSync(pageTsx) || fs.existsSync(pageTs)) {
|
||||
const rel = path.relative(APP_DIR, dir)
|
||||
return rel || '/'
|
||||
}
|
||||
const parent = path.dirname(dir)
|
||||
if (parent === dir) break
|
||||
dir = parent
|
||||
}
|
||||
// Fallback: route is the first app subfolder segment
|
||||
const relToApp = path.relative(APP_DIR, absFilePath)
|
||||
const parts = relToApp.split(path.sep)
|
||||
return parts.length > 0 ? parts[0] : 'shared'
|
||||
}
|
||||
|
||||
function getComponentOrFnName(node: Node): string {
|
||||
const fn = node.getFirstAncestorByKind(SyntaxKind.FunctionDeclaration)
|
||||
if (fn?.getName()) return fn.getName()!
|
||||
const varDecl = node.getFirstAncestorByKind(SyntaxKind.VariableDeclaration)
|
||||
if (varDecl?.getName()) return varDecl.getName()
|
||||
const cls = node.getFirstAncestorByKind(SyntaxKind.ClassDeclaration)
|
||||
if (cls?.getName()) return cls.getName()!
|
||||
const sf = node.getSourceFile()
|
||||
return path.basename(sf.getFilePath())
|
||||
}
|
||||
|
||||
function getNodeLine(node: Node): number {
|
||||
const pos = node.getStartLineNumber()
|
||||
return pos ?? 1
|
||||
}
|
||||
|
||||
function getAttrName(attr: JsxAttribute): string {
|
||||
return attr.getNameNode().getText()
|
||||
}
|
||||
|
||||
function getStringFromInitializer(attr: JsxAttribute): string | undefined {
|
||||
const init = attr.getInitializer()
|
||||
if (!init) return undefined
|
||||
if (Node.isStringLiteral(init)) return init.getLiteralText()
|
||||
if (Node.isNoSubstitutionTemplateLiteral(init)) return init.getLiteralText()
|
||||
if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (!expr) return undefined
|
||||
if (Node.isStringLiteral(expr)) return expr.getLiteralText()
|
||||
if (Node.isNoSubstitutionTemplateLiteral(expr)) return expr.getLiteralText()
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
function pushItem(items: CopyItem[], item: CopyItem) {
|
||||
if (!isMeaningfulText(item.text)) return
|
||||
items.push(item)
|
||||
}
|
||||
|
||||
async function collectFiles(): Promise<string[]> {
|
||||
const patterns = ['src/**/*.{ts,tsx}']
|
||||
const ignore = [
|
||||
'**/node_modules/**',
|
||||
'**/.next/**',
|
||||
'**/__tests__/**',
|
||||
'**/mocks/**',
|
||||
'**/mock/**',
|
||||
'**/*.d.ts',
|
||||
]
|
||||
return await globby(patterns, { gitignore: true, ignore })
|
||||
}
|
||||
|
||||
function extractFromSourceFile(abs: string, items: CopyItem[], project: Project) {
|
||||
const sf = project.addSourceFileAtPath(abs)
|
||||
// JSX text nodes
|
||||
sf.forEachDescendant((node) => {
|
||||
if (Node.isJsxElement(node)) {
|
||||
const opening = node.getOpeningElement()
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const route = getRouteForFile(abs)
|
||||
// 递归提取所有 JsxText 与 {'...'} 字面量
|
||||
const tagName = opening.getTagNameNode().getText()
|
||||
const textNodes = node.getDescendantsOfKind(SyntaxKind.JsxText)
|
||||
textNodes.forEach((t) => {
|
||||
const text = t.getText()
|
||||
const cleaned = text.replace(/\s+/g, ' ').trim()
|
||||
if (isMeaningfulText(cleaned)) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'text',
|
||||
keyOrLocator: tagName,
|
||||
text: cleaned,
|
||||
line: getNodeLine(t),
|
||||
})
|
||||
}
|
||||
})
|
||||
const exprs = node.getDescendantsOfKind(SyntaxKind.JsxExpression)
|
||||
exprs.forEach((expr) => {
|
||||
const inner = expr.getExpression()
|
||||
if (inner && (Node.isStringLiteral(inner) || Node.isNoSubstitutionTemplateLiteral(inner))) {
|
||||
const cleaned = inner.getLiteralText().replace(/\s+/g, ' ').trim()
|
||||
if (isMeaningfulText(cleaned)) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'text',
|
||||
keyOrLocator: tagName,
|
||||
text: cleaned,
|
||||
line: getNodeLine(expr),
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// JSX attributes
|
||||
if (Node.isJsxOpeningElement(node) || Node.isJsxSelfClosingElement(node)) {
|
||||
const route = getRouteForFile(abs)
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const tag = Node.isJsxOpeningElement(node)
|
||||
? node.getTagNameNode().getText()
|
||||
: node.getTagNameNode().getText()
|
||||
const attrs = node.getAttributes().filter(Node.isJsxAttribute)
|
||||
attrs.forEach((attr) => {
|
||||
const name = getAttrName(attr)
|
||||
const lower = name.toLowerCase()
|
||||
const value = getStringFromInitializer(attr)
|
||||
if (!value) return
|
||||
let kind: CopyKind | null = null
|
||||
if (lower === 'placeholder') kind = 'placeholder'
|
||||
else if (lower === 'title') kind = 'title'
|
||||
else if (lower === 'alt') kind = 'alt'
|
||||
else if (lower.startsWith('aria-')) kind = 'aria'
|
||||
else if (lower === 'label') kind = 'label'
|
||||
if (kind) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind,
|
||||
keyOrLocator: `${tag}.${name}`,
|
||||
text: value,
|
||||
line: getNodeLine(attr),
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Interaction messages: toast.*, alert, confirm, message.*
|
||||
if (Node.isCallExpression(node)) {
|
||||
const route = getRouteForFile(abs)
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const expr = node.getExpression()
|
||||
let kind: CopyKind | null = null
|
||||
let keyOrLocator = ''
|
||||
if (Node.isPropertyAccessExpression(expr)) {
|
||||
const left = expr.getExpression().getText()
|
||||
const name = expr.getName()
|
||||
if (left === 'toast' || left === 'message') {
|
||||
kind = 'toast'
|
||||
keyOrLocator = `${left}.${name}`
|
||||
}
|
||||
if (left.toLowerCase().includes('dialog')) {
|
||||
kind = 'dialog'
|
||||
keyOrLocator = `${left}.${name}`
|
||||
}
|
||||
} else if (Node.isIdentifier(expr)) {
|
||||
const id = expr.getText()
|
||||
if (id === 'alert' || id === 'confirm') {
|
||||
kind = 'dialog'
|
||||
keyOrLocator = id
|
||||
}
|
||||
}
|
||||
if (kind) {
|
||||
const arg0 = node.getArguments()[0]
|
||||
if (arg0 && (Node.isStringLiteral(arg0) || Node.isNoSubstitutionTemplateLiteral(arg0))) {
|
||||
const text = (arg0 as StringLiteral | NoSubstitutionTemplateLiteral).getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind,
|
||||
keyOrLocator,
|
||||
text,
|
||||
line: getNodeLine(node),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// form.setError("field", { message: "..." })
|
||||
if (Node.isPropertyAccessExpression(expr) && expr.getName() === 'setError') {
|
||||
const args = node.getArguments()
|
||||
if (args.length >= 2) {
|
||||
const second = args[1]
|
||||
if (Node.isObjectLiteralExpression(second)) {
|
||||
const msgProp = second.getProperty('message')
|
||||
if (msgProp && Node.isPropertyAssignment(msgProp)) {
|
||||
const init = msgProp.getInitializer()
|
||||
if (
|
||||
init &&
|
||||
(Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
) {
|
||||
const text = init.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'error',
|
||||
keyOrLocator: 'form.setError',
|
||||
text,
|
||||
line: getNodeLine(msgProp),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generic validation: any object literal { message: "..." } inside chained calls
|
||||
const args = node.getArguments()
|
||||
for (const a of args) {
|
||||
if (Node.isObjectLiteralExpression(a)) {
|
||||
const prop = a.getProperty('message')
|
||||
if (prop && Node.isPropertyAssignment(prop)) {
|
||||
const init = prop.getInitializer()
|
||||
if (
|
||||
init &&
|
||||
(Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
) {
|
||||
const text = init.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'validation',
|
||||
keyOrLocator: 'message',
|
||||
text,
|
||||
line: getNodeLine(prop),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function aggregate(items: CopyItem[]): CopyItem[] {
|
||||
// Deduplicate by route+kind+text+keyOrLocator to keep first occurrence, count separately
|
||||
const map = new Map<string, { item: CopyItem; count: number }>()
|
||||
for (const it of items) {
|
||||
const key = `${it.route}__${it.kind}__${it.keyOrLocator}__${it.text}`
|
||||
if (!map.has(key)) {
|
||||
map.set(key, { item: it, count: 1 })
|
||||
} else {
|
||||
map.get(key)!.count += 1
|
||||
}
|
||||
}
|
||||
const result: CopyItem[] = []
|
||||
for (const { item, count } of map.values()) {
|
||||
;(item as any).count = count
|
||||
result.push(item)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function toWorkbook(items: CopyItem[]): XLSX.WorkBook {
|
||||
const rows = items.map((it) => ({
|
||||
route: it.route,
|
||||
file: it.file,
|
||||
componentOrFn: it.componentOrFn,
|
||||
kind: it.kind,
|
||||
keyOrLocator: it.keyOrLocator,
|
||||
text: it.text,
|
||||
line: it.line,
|
||||
count: (it as any).count ?? 1,
|
||||
notes: it.notes ?? '',
|
||||
}))
|
||||
const ws = XLSX.utils.json_to_sheet(rows, { skipHeader: false })
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'copy')
|
||||
return wb
|
||||
}
|
||||
|
||||
async function main() {
|
||||
ensureExcelDir()
|
||||
const files = await collectFiles()
|
||||
const project = new Project({
|
||||
tsConfigFilePath: path.join(WORKDIR, 'tsconfig.json'),
|
||||
skipAddingFilesFromTsConfig: true,
|
||||
})
|
||||
const items: CopyItem[] = []
|
||||
for (const rel of files) {
|
||||
const abs = path.join(WORKDIR, rel)
|
||||
try {
|
||||
extractFromSourceFile(abs, items, project)
|
||||
} catch (e) {
|
||||
// swallow parse errors but continue
|
||||
}
|
||||
}
|
||||
const aggregated = aggregate(items)
|
||||
const wb = toWorkbook(aggregated)
|
||||
const out = path.join(WORKDIR, 'docs', 'copy-audit.xlsx')
|
||||
XLSX.writeFile(wb, out)
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Wrote ${aggregated.length} rows to ${out}`)
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
process.exitCode = 1
|
||||
})
|
||||
|
|
@ -1,447 +0,0 @@
|
|||
/*
|
||||
使用 i18next-scanner 格式扫描项目中未翻译的文本
|
||||
基于现有的 extract-copy.ts 工具，生成 i18next 格式的扫描报告
|
||||
*/
|
||||
|
||||
import path from 'node:path'
|
||||
import fs from 'node:fs'
|
||||
import { globby } from 'globby'
|
||||
import {
|
||||
Project,
|
||||
SyntaxKind,
|
||||
Node,
|
||||
JsxAttribute,
|
||||
StringLiteral,
|
||||
NoSubstitutionTemplateLiteral,
|
||||
} from 'ts-morph'
|
||||
import * as XLSX from 'xlsx'
|
||||
|
||||
type CopyKind =
|
||||
| 'text'
|
||||
| 'placeholder'
|
||||
| 'title'
|
||||
| 'alt'
|
||||
| 'aria'
|
||||
| 'label'
|
||||
| 'toast'
|
||||
| 'dialog'
|
||||
| 'error'
|
||||
| 'validation'
|
||||
|
||||
interface CopyItem {
|
||||
route: string
|
||||
file: string
|
||||
componentOrFn: string
|
||||
kind: CopyKind
|
||||
keyOrLocator: string
|
||||
text: string
|
||||
line: number
|
||||
notes?: string
|
||||
}
|
||||
|
||||
interface I18nKey {
|
||||
key: string
|
||||
value: string
|
||||
context?: string
|
||||
file: string
|
||||
line: number
|
||||
}
|
||||
|
||||
const WORKDIR = process.cwd()
|
||||
const SRC_DIR = path.join(WORKDIR, 'src')
|
||||
const APP_DIR = path.join(SRC_DIR, 'app')
|
||||
|
||||
function ensureExcelDir() {
|
||||
const docsDir = path.join(WORKDIR, 'docs')
|
||||
if (!fs.existsSync(docsDir)) fs.mkdirSync(docsDir, { recursive: true })
|
||||
}
|
||||
|
||||
function isMeaningfulText(value: string | undefined | null): value is string {
|
||||
if (!value) return false
|
||||
const trimmed = value.replace(/\s+/g, ' ').trim()
|
||||
if (!trimmed) return false
|
||||
// Filter obvious code-like tokens
|
||||
if (/^[A-Za-z0-9_.$-]+$/.test(trimmed) && trimmed.length > 24) return false
|
||||
return true
|
||||
}
|
||||
|
||||
function getRouteForFile(absFilePath: string): string {
|
||||
if (!absFilePath.startsWith(APP_DIR)) return 'shared'
|
||||
let dir = path.dirname(absFilePath)
|
||||
// Walk up to find nearest folder that contains a page.tsx (or page.ts)
|
||||
while (dir.startsWith(APP_DIR)) {
|
||||
const pageTsx = path.join(dir, 'page.tsx')
|
||||
const pageTs = path.join(dir, 'page.ts')
|
||||
if (fs.existsSync(pageTsx) || fs.existsSync(pageTs)) {
|
||||
const rel = path.relative(APP_DIR, dir)
|
||||
return rel || '/'
|
||||
}
|
||||
const parent = path.dirname(dir)
|
||||
if (parent === dir) break
|
||||
dir = parent
|
||||
}
|
||||
// Fallback: route is the first app subfolder segment
|
||||
const relToApp = path.relative(APP_DIR, absFilePath)
|
||||
const parts = relToApp.split(path.sep)
|
||||
return parts.length > 0 ? parts[0] : 'shared'
|
||||
}
|
||||
|
||||
function getComponentOrFnName(node: Node): string {
|
||||
const fn = node.getFirstAncestorByKind(SyntaxKind.FunctionDeclaration)
|
||||
if (fn?.getName()) return fn.getName()!
|
||||
const varDecl = node.getFirstAncestorByKind(SyntaxKind.VariableDeclaration)
|
||||
if (varDecl?.getName()) return varDecl.getName()
|
||||
const cls = node.getFirstAncestorByKind(SyntaxKind.ClassDeclaration)
|
||||
if (cls?.getName()) return cls.getName()!
|
||||
const sf = node.getSourceFile()
|
||||
return path.basename(sf.getFilePath())
|
||||
}
|
||||
|
||||
function getNodeLine(node: Node): number {
|
||||
const pos = node.getStartLineNumber()
|
||||
return pos ?? 1
|
||||
}
|
||||
|
||||
function getAttrName(attr: JsxAttribute): string {
|
||||
return attr.getNameNode().getText()
|
||||
}
|
||||
|
||||
function getStringFromInitializer(attr: JsxAttribute): string | undefined {
|
||||
const init = attr.getInitializer()
|
||||
if (!init) return undefined
|
||||
if (Node.isStringLiteral(init)) return init.getLiteralText()
|
||||
if (Node.isNoSubstitutionTemplateLiteral(init)) return init.getLiteralText()
|
||||
if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (!expr) return undefined
|
||||
if (Node.isStringLiteral(expr)) return expr.getLiteralText()
|
||||
if (Node.isNoSubstitutionTemplateLiteral(expr)) return expr.getLiteralText()
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
function pushItem(items: CopyItem[], item: CopyItem) {
|
||||
if (!isMeaningfulText(item.text)) return
|
||||
items.push(item)
|
||||
}
|
||||
|
||||
function generateI18nKey(item: CopyItem): string {
|
||||
// 生成 i18next 格式的键名
|
||||
const route = item.route === 'shared' ? 'common' : item.route.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
const component = item.componentOrFn.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
const kind = item.kind
|
||||
const locator = item.keyOrLocator.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
|
||||
return `${route}.${component}.${kind}.${locator}`.toLowerCase()
|
||||
}
|
||||
|
||||
async function collectFiles(): Promise<string[]> {
|
||||
const patterns = ['src/**/*.{ts,tsx}']
|
||||
const ignore = [
|
||||
'**/node_modules/**',
|
||||
'**/.next/**',
|
||||
'**/__tests__/**',
|
||||
'**/mocks/**',
|
||||
'**/mock/**',
|
||||
'**/*.d.ts',
|
||||
]
|
||||
return await globby(patterns, { gitignore: true, ignore })
|
||||
}
|
||||
|
||||
function extractFromSourceFile(abs: string, items: CopyItem[], project: Project) {
|
||||
const sf = project.addSourceFileAtPath(abs)
|
||||
// JSX text nodes
|
||||
sf.forEachDescendant((node) => {
|
||||
if (Node.isJsxElement(node)) {
|
||||
const opening = node.getOpeningElement()
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const route = getRouteForFile(abs)
|
||||
// 递归提取所有 JsxText 与 {'...'} 字面量
|
||||
const tagName = opening.getTagNameNode().getText()
|
||||
const textNodes = node.getDescendantsOfKind(SyntaxKind.JsxText)
|
||||
textNodes.forEach((t) => {
|
||||
const text = t.getText()
|
||||
const cleaned = text.replace(/\s+/g, ' ').trim()
|
||||
if (isMeaningfulText(cleaned)) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'text',
|
||||
keyOrLocator: tagName,
|
||||
text: cleaned,
|
||||
line: getNodeLine(t),
|
||||
})
|
||||
}
|
||||
})
|
||||
const exprs = node.getDescendantsOfKind(SyntaxKind.JsxExpression)
|
||||
exprs.forEach((expr) => {
|
||||
const inner = expr.getExpression()
|
||||
if (inner && (Node.isStringLiteral(inner) || Node.isNoSubstitutionTemplateLiteral(inner))) {
|
||||
const cleaned = inner.getLiteralText().replace(/\s+/g, ' ').trim()
|
||||
if (isMeaningfulText(cleaned)) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'text',
|
||||
keyOrLocator: tagName,
|
||||
text: cleaned,
|
||||
line: getNodeLine(expr),
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// JSX attributes
|
||||
if (Node.isJsxOpeningElement(node) || Node.isJsxSelfClosingElement(node)) {
|
||||
const route = getRouteForFile(abs)
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const tag = Node.isJsxOpeningElement(node)
|
||||
? node.getTagNameNode().getText()
|
||||
: node.getTagNameNode().getText()
|
||||
const attrs = node.getAttributes().filter(Node.isJsxAttribute)
|
||||
attrs.forEach((attr) => {
|
||||
const name = getAttrName(attr)
|
||||
const lower = name.toLowerCase()
|
||||
const value = getStringFromInitializer(attr)
|
||||
if (!value) return
|
||||
let kind: CopyKind | null = null
|
||||
if (lower === 'placeholder') kind = 'placeholder'
|
||||
else if (lower === 'title') kind = 'title'
|
||||
else if (lower === 'alt') kind = 'alt'
|
||||
else if (lower.startsWith('aria-')) kind = 'aria'
|
||||
else if (lower === 'label') kind = 'label'
|
||||
if (kind) {
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind,
|
||||
keyOrLocator: `${tag}.${name}`,
|
||||
text: value,
|
||||
line: getNodeLine(attr),
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Interaction messages: toast.*, alert, confirm, message.*
|
||||
if (Node.isCallExpression(node)) {
|
||||
const route = getRouteForFile(abs)
|
||||
const componentOrFn = getComponentOrFnName(node)
|
||||
const expr = node.getExpression()
|
||||
let kind: CopyKind | null = null
|
||||
let keyOrLocator = ''
|
||||
if (Node.isPropertyAccessExpression(expr)) {
|
||||
const left = expr.getExpression().getText()
|
||||
const name = expr.getName()
|
||||
if (left === 'toast' || left === 'message') {
|
||||
kind = 'toast'
|
||||
keyOrLocator = `${left}.${name}`
|
||||
}
|
||||
if (left.toLowerCase().includes('dialog')) {
|
||||
kind = 'dialog'
|
||||
keyOrLocator = `${left}.${name}`
|
||||
}
|
||||
} else if (Node.isIdentifier(expr)) {
|
||||
const id = expr.getText()
|
||||
if (id === 'alert' || id === 'confirm') {
|
||||
kind = 'dialog'
|
||||
keyOrLocator = id
|
||||
}
|
||||
}
|
||||
if (kind) {
|
||||
const arg0 = node.getArguments()[0]
|
||||
if (arg0 && (Node.isStringLiteral(arg0) || Node.isNoSubstitutionTemplateLiteral(arg0))) {
|
||||
const text = (arg0 as StringLiteral | NoSubstitutionTemplateLiteral).getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind,
|
||||
keyOrLocator,
|
||||
text,
|
||||
line: getNodeLine(node),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// form.setError("field", { message: "..." })
|
||||
if (Node.isPropertyAccessExpression(expr) && expr.getName() === 'setError') {
|
||||
const args = node.getArguments()
|
||||
if (args.length >= 2) {
|
||||
const second = args[1]
|
||||
if (Node.isObjectLiteralExpression(second)) {
|
||||
const msgProp = second.getProperty('message')
|
||||
if (msgProp && Node.isPropertyAssignment(msgProp)) {
|
||||
const init = msgProp.getInitializer()
|
||||
if (
|
||||
init &&
|
||||
(Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
) {
|
||||
const text = init.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'error',
|
||||
keyOrLocator: 'form.setError',
|
||||
text,
|
||||
line: getNodeLine(msgProp),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generic validation: any object literal { message: "..." } inside chained calls
|
||||
const args = node.getArguments()
|
||||
for (const a of args) {
|
||||
if (Node.isObjectLiteralExpression(a)) {
|
||||
const prop = a.getProperty('message')
|
||||
if (prop && Node.isPropertyAssignment(prop)) {
|
||||
const init = prop.getInitializer()
|
||||
if (
|
||||
init &&
|
||||
(Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init))
|
||||
) {
|
||||
const text = init.getLiteralText()
|
||||
pushItem(items, {
|
||||
route,
|
||||
file: path.relative(WORKDIR, abs),
|
||||
componentOrFn,
|
||||
kind: 'validation',
|
||||
keyOrLocator: 'message',
|
||||
text,
|
||||
line: getNodeLine(prop),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function aggregate(items: CopyItem[]): CopyItem[] {
|
||||
// Deduplicate by route+kind+text+keyOrLocator to keep first occurrence, count separately
|
||||
const map = new Map<string, { item: CopyItem; count: number }>()
|
||||
for (const it of items) {
|
||||
const key = `${it.route}__${it.kind}__${it.keyOrLocator}__${it.text}`
|
||||
if (!map.has(key)) {
|
||||
map.set(key, { item: it, count: 1 })
|
||||
} else {
|
||||
map.get(key)!.count += 1
|
||||
}
|
||||
}
|
||||
const result: CopyItem[] = []
|
||||
for (const { item, count } of map.values()) {
|
||||
;(item as any).count = count
|
||||
result.push(item)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function generateI18nTranslation(items: CopyItem[]): Record<string, string> {
|
||||
const translation: Record<string, string> = {}
|
||||
|
||||
items.forEach((item) => {
|
||||
const key = generateI18nKey(item)
|
||||
translation[key] = item.text
|
||||
})
|
||||
|
||||
return translation
|
||||
}
|
||||
|
||||
function toWorkbook(items: CopyItem[]): XLSX.WorkBook {
|
||||
const rows = items.map((it) => ({
|
||||
route: it.route,
|
||||
file: it.file,
|
||||
componentOrFn: it.componentOrFn,
|
||||
kind: it.kind,
|
||||
keyOrLocator: it.keyOrLocator,
|
||||
text: it.text,
|
||||
line: it.line,
|
||||
count: (it as any).count ?? 1,
|
||||
i18nKey: generateI18nKey(it),
|
||||
notes: it.notes ?? '',
|
||||
}))
|
||||
const ws = XLSX.utils.json_to_sheet(rows, { skipHeader: false })
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'i18n-scan')
|
||||
return wb
|
||||
}
|
||||
|
||||
async function main() {
|
||||
ensureExcelDir()
|
||||
const files = await collectFiles()
|
||||
const project = new Project({
|
||||
tsConfigFilePath: path.join(WORKDIR, 'tsconfig.json'),
|
||||
skipAddingFilesFromTsConfig: true,
|
||||
})
|
||||
const items: CopyItem[] = []
|
||||
for (const rel of files) {
|
||||
const abs = path.join(WORKDIR, rel)
|
||||
try {
|
||||
extractFromSourceFile(abs, items, project)
|
||||
} catch (e) {
|
||||
// swallow parse errors but continue
|
||||
}
|
||||
}
|
||||
const aggregated = aggregate(items)
|
||||
|
||||
// 生成 i18next 格式的翻译文件
|
||||
const translation = generateI18nTranslation(aggregated)
|
||||
const localesDir = path.join(WORKDIR, 'public', 'locales', 'en')
|
||||
if (!fs.existsSync(localesDir)) {
|
||||
fs.mkdirSync(localesDir, { recursive: true })
|
||||
}
|
||||
const translationFile = path.join(localesDir, 'translation.json')
|
||||
fs.writeFileSync(translationFile, JSON.stringify(translation, null, 2))
|
||||
|
||||
// 生成 Excel 报告
|
||||
const wb = toWorkbook(aggregated)
|
||||
const out = path.join(WORKDIR, 'docs', 'i18n-scan-report.xlsx')
|
||||
XLSX.writeFile(wb, out)
|
||||
|
||||
// 生成扫描报告
|
||||
const report = {
|
||||
totalItems: aggregated.length,
|
||||
uniqueTexts: new Set(aggregated.map((item) => item.text)).size,
|
||||
byRoute: aggregated.reduce(
|
||||
(acc, item) => {
|
||||
acc[item.route] = (acc[item.route] || 0) + 1
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, number>
|
||||
),
|
||||
byKind: aggregated.reduce(
|
||||
(acc, item) => {
|
||||
acc[item.kind] = (acc[item.kind] || 0) + 1
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, number>
|
||||
),
|
||||
translationKeys: Object.keys(translation).length,
|
||||
}
|
||||
|
||||
const reportFile = path.join(WORKDIR, 'docs', 'i18n-scan-report.json')
|
||||
fs.writeFileSync(reportFile, JSON.stringify(report, null, 2))
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`✅ i18next 扫描完成！`)
|
||||
console.log(`📊 总扫描条目: ${aggregated.length}`)
|
||||
console.log(`🔑 生成翻译键: ${Object.keys(translation).length}`)
|
||||
console.log(`📁 翻译文件: ${translationFile}`)
|
||||
console.log(`📋 Excel 报告: ${out}`)
|
||||
console.log(`📄 JSON 报告: ${reportFile}`)
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
process.exitCode = 1
|
||||
})
|
||||
|
|
@ -1,363 +0,0 @@
|
|||
/*
|
||||
CommonJS runtime for resetting files and applying translations from Excel to source code.
|
||||
This script first resets files to their original state, then applies translations.
|
||||
*/
|
||||
const path = require('node:path')
|
||||
const fs = require('node:fs')
|
||||
const { execSync } = require('child_process')
|
||||
const { Project, SyntaxKind, Node } = require('ts-morph')
|
||||
const XLSX = require('xlsx')
|
||||
|
||||
const WORKDIR = process.cwd()
|
||||
const TRANSLATES_FILE = path.join(WORKDIR, 'scripts', 'translates.xlsx')
|
||||
const REPORT_FILE = path.join(WORKDIR, 'scripts', 'translation-report.json')
|
||||
const CONFLICTS_FILE = path.join(WORKDIR, 'scripts', 'translation-conflicts.xlsx')
|
||||
|
||||
// 统计信息
|
||||
const stats = {
|
||||
total: 0,
|
||||
success: 0,
|
||||
conflicts: 0,
|
||||
fileNotFound: 0,
|
||||
textNotFound: 0,
|
||||
multipleMatches: 0,
|
||||
}
|
||||
|
||||
// 冲突列表
|
||||
const conflicts = []
|
||||
|
||||
// 成功替换列表
|
||||
const successfulReplacements = []
|
||||
|
||||
function resetFiles() {
|
||||
console.log('🔄 重置文件到原始状态...')
|
||||
try {
|
||||
// 使用 git 重置所有修改的文件
|
||||
execSync('git checkout -- .', { cwd: WORKDIR, stdio: 'inherit' })
|
||||
console.log('✅ 文件重置完成')
|
||||
} catch (error) {
|
||||
console.error('❌ 重置文件失败:', error.message)
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
|
||||
function loadTranslations() {
|
||||
console.log('📖 读取翻译数据...')
|
||||
const wb = XLSX.readFile(TRANSLATES_FILE)
|
||||
const ws = wb.Sheets[wb.SheetNames[0]]
|
||||
const data = XLSX.utils.sheet_to_json(ws, { defval: '' })
|
||||
|
||||
// 筛选出需要替换的条目
|
||||
let translations = data.filter(
|
||||
(row) => row.text && row.corrected_text && row.text !== row.corrected_text
|
||||
)
|
||||
|
||||
// 去重：按 file + line + text 去重，保留第一个
|
||||
const seen = new Set()
|
||||
translations = translations.filter((row) => {
|
||||
const key = `${row.file}:${row.line}:${row.text}`
|
||||
if (seen.has(key)) {
|
||||
return false
|
||||
}
|
||||
seen.add(key)
|
||||
return true
|
||||
})
|
||||
|
||||
console.log(`📊 找到 ${translations.length} 条需要替换的翻译（已去重）`)
|
||||
stats.total = translations.length
|
||||
|
||||
return translations
|
||||
}
|
||||
|
||||
function groupByFile(translations) {
|
||||
const groups = new Map()
|
||||
for (const translation of translations) {
|
||||
const filePath = path.join(WORKDIR, translation.file)
|
||||
if (!groups.has(filePath)) {
|
||||
groups.set(filePath, [])
|
||||
}
|
||||
groups.get(filePath).push(translation)
|
||||
}
|
||||
return groups
|
||||
}
|
||||
|
||||
function findTextInFile(sourceFile, translation) {
|
||||
const { text, kind } = translation
|
||||
const matches = []
|
||||
|
||||
sourceFile.forEachDescendant((node) => {
|
||||
// 根据 kind 类型进行不同的匹配
|
||||
if (kind === 'text') {
|
||||
// 查找 JSX 文本节点
|
||||
if (Node.isJsxText(node)) {
|
||||
const nodeText = node.getText().replace(/\s+/g, ' ').trim()
|
||||
if (nodeText === text) {
|
||||
matches.push({ node, type: 'jsx-text', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
// 查找 JSX 表达式中的字符串
|
||||
if (Node.isJsxExpression(node)) {
|
||||
const expr = node.getExpression()
|
||||
if (expr && (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr))) {
|
||||
const nodeText = expr.getLiteralText()
|
||||
if (nodeText === text) {
|
||||
matches.push({ node: expr, type: 'jsx-expression', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (['placeholder', 'title', 'alt', 'label', 'aria'].includes(kind)) {
|
||||
// 查找 JSX 属性
|
||||
if (Node.isJsxAttribute(node)) {
|
||||
const name = node.getNameNode().getText().toLowerCase()
|
||||
const value = getStringFromInitializer(node)
|
||||
if (value === text) {
|
||||
matches.push({ node, type: 'jsx-attribute', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
} else if (['toast', 'dialog', 'error', 'validation'].includes(kind)) {
|
||||
// 查找函数调用中的字符串参数
|
||||
if (Node.isCallExpression(node)) {
|
||||
const args = node.getArguments()
|
||||
for (const arg of args) {
|
||||
if (Node.isStringLiteral(arg) || Node.isNoSubstitutionTemplateLiteral(arg)) {
|
||||
const nodeText = arg.getLiteralText()
|
||||
if (nodeText === text) {
|
||||
matches.push({ node: arg, type: 'function-arg', line: node.getStartLineNumber() })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return matches
|
||||
}
|
||||
|
||||
function getStringFromInitializer(attr) {
|
||||
const init = attr.getInitializer()
|
||||
if (!init) return undefined
|
||||
if (Node.isStringLiteral(init) || Node.isNoSubstitutionTemplateLiteral(init)) {
|
||||
return init.getLiteralText()
|
||||
}
|
||||
if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (!expr) return undefined
|
||||
if (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr)) {
|
||||
return expr.getLiteralText()
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
function replaceText(node, newText, type) {
|
||||
try {
|
||||
if (type === 'jsx-text') {
|
||||
// JSX 文本节点需要特殊处理，保持空白字符
|
||||
const originalText = node.getText()
|
||||
const newTextWithWhitespace = originalText.replace(/\S+/g, newText)
|
||||
node.replaceWithText(newTextWithWhitespace)
|
||||
} else if (type === 'jsx-expression' || type === 'function-arg') {
|
||||
// 字符串字面量
|
||||
if (Node.isStringLiteral(node)) {
|
||||
node.replaceWithText(`"${newText}"`)
|
||||
} else if (Node.isNoSubstitutionTemplateLiteral(node)) {
|
||||
node.replaceWithText(`\`${newText}\``)
|
||||
}
|
||||
} else if (type === 'jsx-attribute') {
|
||||
// JSX 属性值
|
||||
const init = node.getInitializer()
|
||||
if (init) {
|
||||
if (Node.isStringLiteral(init)) {
|
||||
init.replaceWithText(`"${newText}"`)
|
||||
} else if (Node.isNoSubstitutionTemplateLiteral(init)) {
|
||||
init.replaceWithText(`\`${newText}\``)
|
||||
} else if (Node.isJsxExpression(init)) {
|
||||
const expr = init.getExpression()
|
||||
if (expr && (Node.isStringLiteral(expr) || Node.isNoSubstitutionTemplateLiteral(expr))) {
|
||||
if (Node.isStringLiteral(expr)) {
|
||||
expr.replaceWithText(`"${newText}"`)
|
||||
} else {
|
||||
expr.replaceWithText(`\`${newText}\``)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error(`❌ 替换失败: ${error.message}`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function processFile(filePath, translations) {
|
||||
if (!fs.existsSync(filePath)) {
|
||||
console.log(`❌ 文件不存在: ${path.relative(WORKDIR, filePath)}`)
|
||||
translations.forEach((t) => {
|
||||
conflicts.push({
|
||||
...t,
|
||||
conflictType: 'FILE_NOT_FOUND',
|
||||
conflictReason: '文件不存在',
|
||||
})
|
||||
})
|
||||
stats.fileNotFound += translations.length
|
||||
return
|
||||
}
|
||||
|
||||
console.log(`📝 处理文件: ${path.relative(WORKDIR, filePath)}`)
|
||||
|
||||
try {
|
||||
const project = new Project({
|
||||
tsConfigFilePath: path.join(WORKDIR, 'tsconfig.json'),
|
||||
skipAddingFilesFromTsConfig: true,
|
||||
})
|
||||
const sourceFile = project.addSourceFileAtPath(filePath)
|
||||
|
||||
for (const translation of translations) {
|
||||
const { text, corrected_text, line, kind } = translation
|
||||
|
||||
// 在文件中查找匹配的文本
|
||||
const matches = findTextInFile(sourceFile, translation)
|
||||
|
||||
if (matches.length === 0) {
|
||||
conflicts.push({
|
||||
...translation,
|
||||
conflictType: 'TEXT_NOT_FOUND_IN_FILE',
|
||||
conflictReason: '在文件中找不到匹配的文本',
|
||||
})
|
||||
stats.textNotFound++
|
||||
continue
|
||||
}
|
||||
|
||||
if (matches.length > 1) {
|
||||
conflicts.push({
|
||||
...translation,
|
||||
conflictType: 'MULTIPLE_MATCHES',
|
||||
conflictReason: `找到 ${matches.length} 个匹配项，需要人工确认`,
|
||||
})
|
||||
stats.multipleMatches++
|
||||
continue
|
||||
}
|
||||
|
||||
// 执行替换
|
||||
const match = matches[0]
|
||||
const success = replaceText(match.node, corrected_text, match.type)
|
||||
|
||||
if (success) {
|
||||
successfulReplacements.push({
|
||||
...translation,
|
||||
actualLine: match.line,
|
||||
replacementType: match.type,
|
||||
})
|
||||
stats.success++
|
||||
console.log(`✅ 替换成功: "${text}" -> "${corrected_text}" (行 ${match.line})`)
|
||||
} else {
|
||||
conflicts.push({
|
||||
...translation,
|
||||
conflictType: 'REPLACEMENT_FAILED',
|
||||
conflictReason: '替换操作失败',
|
||||
})
|
||||
stats.conflicts++
|
||||
}
|
||||
}
|
||||
|
||||
// 保存修改后的文件
|
||||
sourceFile.saveSync()
|
||||
} catch (error) {
|
||||
console.error(`❌ 处理文件失败: ${filePath}`, error.message)
|
||||
translations.forEach((t) => {
|
||||
conflicts.push({
|
||||
...t,
|
||||
conflictType: 'PARSE_ERROR',
|
||||
conflictReason: `文件解析失败: ${error.message}`,
|
||||
})
|
||||
})
|
||||
stats.conflicts += translations.length
|
||||
}
|
||||
}
|
||||
|
||||
function generateReport() {
|
||||
console.log('\n📊 生成报告...')
|
||||
|
||||
// 生成成功替换报告
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
stats,
|
||||
successfulReplacements,
|
||||
conflicts: conflicts.map((c) => ({
|
||||
file: c.file,
|
||||
line: c.line,
|
||||
text: c.text,
|
||||
corrected_text: c.corrected_text,
|
||||
conflictType: c.conflictType,
|
||||
conflictReason: c.conflictReason,
|
||||
})),
|
||||
}
|
||||
|
||||
fs.writeFileSync(REPORT_FILE, JSON.stringify(report, null, 2))
|
||||
console.log(`📄 成功替换报告已保存: ${REPORT_FILE}`)
|
||||
|
||||
// 生成冲突报告 Excel
|
||||
if (conflicts.length > 0) {
|
||||
const conflictRows = conflicts.map((c) => ({
|
||||
file: c.file,
|
||||
line: c.line,
|
||||
text: c.text,
|
||||
corrected_text: c.corrected_text,
|
||||
conflictType: c.conflictType,
|
||||
conflictReason: c.conflictReason,
|
||||
route: c.route,
|
||||
componentOrFn: c.componentOrFn,
|
||||
kind: c.kind,
|
||||
keyOrLocator: c.keyOrLocator,
|
||||
}))
|
||||
|
||||
const ws = XLSX.utils.json_to_sheet(conflictRows)
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'conflicts')
|
||||
XLSX.writeFile(wb, CONFLICTS_FILE)
|
||||
console.log(`📄 冲突报告已保存: ${CONFLICTS_FILE}`)
|
||||
}
|
||||
}
|
||||
|
||||
function printSummary() {
|
||||
console.log('\n📈 处理完成！')
|
||||
console.log(`总翻译条目: ${stats.total}`)
|
||||
console.log(`✅ 成功替换: ${stats.success}`)
|
||||
console.log(`❌ 文件不存在: ${stats.fileNotFound}`)
|
||||
console.log(`❌ 文本未找到: ${stats.textNotFound}`)
|
||||
console.log(`❌ 多处匹配: ${stats.multipleMatches}`)
|
||||
console.log(`❌ 其他冲突: ${stats.conflicts}`)
|
||||
console.log(`\n成功率: ${((stats.success / stats.total) * 100).toFixed(1)}%`)
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log('🚀 开始重置并应用翻译...\n')
|
||||
|
||||
try {
|
||||
// 1. 重置文件到原始状态
|
||||
resetFiles()
|
||||
|
||||
// 2. 读取翻译数据
|
||||
const translations = loadTranslations()
|
||||
|
||||
// 3. 按文件分组
|
||||
const fileGroups = groupByFile(translations)
|
||||
|
||||
// 4. 处理每个文件
|
||||
for (const [filePath, fileTranslations] of fileGroups) {
|
||||
processFile(filePath, fileTranslations)
|
||||
}
|
||||
|
||||
// 5. 生成报告
|
||||
generateReport()
|
||||
|
||||
// 6. 打印总结
|
||||
printSummary()
|
||||
} catch (error) {
|
||||
console.error('❌ 执行失败:', error)
|
||||
process.exitCode = 1
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
|
@ -23,11 +23,11 @@ const AboutPage = () => {
|
|||
|
||||
<div className="txt-body-l mt-12">
|
||||
<div>
|
||||
Grow your love story with CrushLevel AI—From "Hi" to "I Do", sparked by every chat
|
||||
Grow your love story with Spicyxx.AI—From "Hi" to "I Do", sparked by every chat
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
At CrushLevel AI, every chat writes a new verse in your love epic—
|
||||
At Spicyxx.AI, every chat writes a new verse in your love epic—
|
||||
</div>
|
||||
<div>
|
||||
From that tentative "Hi" to the trembling "I do", find a home for the flirts you never
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ActiveTabType } from '.';
|
|||
export default function MaskCreate({ onActiveTab }: { onActiveTab: (tab: ActiveTabType) => void }) {
|
||||
return (
|
||||
<div>
|
||||
<MaskForm onSubmitSuccess={() => onActiveTab('mask')} />
|
||||
<MaskForm onSubmitSuccess={() => onActiveTab('mask_list')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,44 +29,56 @@ const ChatProfilePersona = React.memo(({ onActiveTab }: ProfileProps) => {
|
|||
const tCommon = useTranslations('common');
|
||||
const whoAmI = 'whoAmI';
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: t('profile.gender'),
|
||||
value: (
|
||||
<Image src={genderMap[0 as keyof typeof genderMap]} alt="gender" width={24} height={24} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: t('profile.age'),
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
label: t('profile.whoAmI'),
|
||||
className: whoAmI ? 'text-txt-primary-normal' : 'text-txt-secondary-normal',
|
||||
value: whoAmI || t('profile.unfilled'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="txt-title-s">{t('maskedIdentityMode')}</div>
|
||||
<div
|
||||
className="txt-label-m text-primary-variant-normal cursor-pointer"
|
||||
onClick={() => onActiveTab('mask')}
|
||||
onClick={() => onActiveTab('mask_create')}
|
||||
>
|
||||
{tCommon('edit')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface-element-normal rounded-m py-1">
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div className="txt-label-l text-txt-secondary-normal">{t('profile.nickname')}</div>
|
||||
<div className="txt-body-l text-txt-primary-normal flex-1 truncate text-right">{''}</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div className="txt-label-l text-txt-secondary-normal">{t('profile.gender')}</div>
|
||||
<div className="txt-body-l text-txt-primary-normal">
|
||||
{genderMap[0 as keyof typeof genderMap]}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div className="txt-label-l text-txt-secondary-normal">{t('profile.age')}</div>
|
||||
<div className="txt-body-l text-txt-primary-normal">{getAge(Number(23))}</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div className="txt-label-l text-txt-secondary-normal">{t('profile.whoAmI')}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'txt-body-l text-txt-primary-normal flex-1 truncate text-right',
|
||||
whoAmI ? 'text-txt-primary-normal' : 'text-txt-secondary-normal'
|
||||
)}
|
||||
onClick={() => onActiveTab('mask_list')}
|
||||
className="bg-surface-element-normal cursor-pointer rounded-m flex items-center justify-between gap-4 px-4 py-3"
|
||||
>
|
||||
{whoAmI || t('profile.unfilled')}
|
||||
<div className="txt-label-l text-txt-secondary-normal">{t('profile.nickname')}</div>
|
||||
<div className="txt-label-l text-txt-primary-normal">
|
||||
{'John Doe'}
|
||||
<IconButton iconfont="icon-arrow-right-border" size="small" variant="ghost" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface-element-normal rounded-m py-1">
|
||||
{items.map((item) => (
|
||||
<div key={item.label} className="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div className="txt-label-l text-txt-secondary-normal">{item.label}</div>
|
||||
<div className={cn('txt-body-l text-txt-primary-normal', item.className)}>
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ type SettingProps = {
|
|||
};
|
||||
export type ActiveTabType =
|
||||
| 'profile'
|
||||
| 'mask'
|
||||
| 'mask_list'
|
||||
| 'mask_create'
|
||||
| 'history'
|
||||
| 'voice_actor'
|
||||
|
|
@ -38,24 +38,13 @@ export type ActiveTabType =
|
|||
| 'background'
|
||||
| 'model';
|
||||
|
||||
const backMap = {
|
||||
mask: 'profile',
|
||||
mask_create: 'mask',
|
||||
history: 'profile',
|
||||
voice_actor: 'profile',
|
||||
font: 'profile',
|
||||
max_token: 'profile',
|
||||
background: 'profile',
|
||||
model: 'profile',
|
||||
} as const;
|
||||
|
||||
export default function SettingDialog({ open, onOpenChange }: SettingProps) {
|
||||
const t = useTranslations('chat.drawer');
|
||||
const [activeTab, setActiveTab] = useState<ActiveTabType>('profile');
|
||||
const updateUserChatSetting = useStreamChatStore((store) => store.updateUserChatSetting);
|
||||
|
||||
const titleMap = {
|
||||
mask: t('maskedIdentityMode'),
|
||||
mask_list: t('maskedIdentityMode'),
|
||||
mask_create: t('createMask'),
|
||||
history: t('history'),
|
||||
voice_actor: t('voiceActorTitle'),
|
||||
|
|
@ -82,18 +71,14 @@ export default function SettingDialog({ open, onOpenChange }: SettingProps) {
|
|||
titleMap[activeTab]
|
||||
)}
|
||||
{activeTab !== 'profile' && (
|
||||
<IconButton
|
||||
variant="tertiary"
|
||||
size="small"
|
||||
onClick={() => setActiveTab(backMap[activeTab])}
|
||||
>
|
||||
<IconButton variant="tertiary" size="small" onClick={() => setActiveTab('profile')}>
|
||||
<IconFont size={24} className="text-white cursor-pointer" type="icon-jiantou" />
|
||||
</IconButton>
|
||||
)}
|
||||
</AlertDialogTitle>
|
||||
<div className="w-full h-[calc(100vh-160px)] pr-1 mt-4">
|
||||
{activeTab === 'profile' && <Profile onActiveTab={setActiveTab} />}
|
||||
{activeTab === 'mask' && <MaskList onActiveTab={setActiveTab} />}
|
||||
{activeTab === 'mask_list' && <MaskList onActiveTab={setActiveTab} />}
|
||||
{activeTab === 'mask_create' && <MaskCreate onActiveTab={setActiveTab} />}
|
||||
{activeTab === 'voice_actor' && <VoiceActor />}
|
||||
{activeTab === 'font' && <Font />}
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ const SubscribeVipDrawer = () => {
|
|||
onClick={handleClose}
|
||||
/>
|
||||
<DrawerTitle className="txt-title-m text-txt-primary-normal">
|
||||
CrushLevel Vip
|
||||
Spicyxx.AI Vip
|
||||
</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,13 +48,13 @@ const VipPage = () => {
|
|||
iconfont="icon-arrow-left"
|
||||
onClick={handleBack}
|
||||
/>
|
||||
<h1 className="txt-title-l text-white">CrushLevel VIP</h1>
|
||||
<h1 className="txt-title-l text-white">Spicyxx.AI VIP</h1>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-6 flex h-[180px] flex-col items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-r from-[#ff9696] via-[#aa90f9] to-[#8df3e2]">
|
||||
<h2 className="txt-display-m sm:txt-display-l mb-2 px-4 text-center text-white">
|
||||
CrushLevel VIP
|
||||
Spicyxx.AI VIP
|
||||
</h2>
|
||||
<SubscribeText enableQuery={enableQuery} />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,48 @@
|
|||
'use client'
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
useGetChargeProductList,
|
||||
useGetWebChargePreOrder,
|
||||
useGetWebChargeCheckout,
|
||||
useUpdateWalletBalance,
|
||||
} from '@/hooks/useWallet'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { useState, useEffect } from 'react'
|
||||
import Decimal from 'decimal.js'
|
||||
import numeral from 'numeral'
|
||||
import { toast } from 'sonner'
|
||||
import RechargeListSkeleton from './RechargeListSkeleton'
|
||||
import { formatFromCents } from '@/utils/number'
|
||||
import QueryString from 'qs'
|
||||
} from '@/hooks/useWallet';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Decimal from 'decimal.js';
|
||||
import numeral from 'numeral';
|
||||
import { toast } from 'sonner';
|
||||
import RechargeListSkeleton from './RechargeListSkeleton';
|
||||
import { formatFromCents } from '@/utils/number';
|
||||
import QueryString from 'qs';
|
||||
|
||||
const RechargeList = () => {
|
||||
const [policyCheck, setpolicyCheck] = useState(true)
|
||||
const [selectedProductId, setSelectedProductId] = useState<string | null>(null)
|
||||
const [policyCheck, setpolicyCheck] = useState(true);
|
||||
const [selectedProductId, setSelectedProductId] = useState<string | null>(null);
|
||||
|
||||
const { data, isLoading } = useGetChargeProductList()
|
||||
const { productList } = data || {}
|
||||
const { data, isLoading } = useGetChargeProductList();
|
||||
const { productList } = data || {};
|
||||
|
||||
// 支付相关的hooks
|
||||
const preOrderMutation = useGetWebChargePreOrder()
|
||||
const checkoutMutation = useGetWebChargeCheckout()
|
||||
const preOrderMutation = useGetWebChargePreOrder();
|
||||
const checkoutMutation = useGetWebChargeCheckout();
|
||||
|
||||
// 默认选中第一个产品
|
||||
useEffect(() => {
|
||||
if (productList && productList.length > 0 && !selectedProductId) {
|
||||
setSelectedProductId(productList[0].productId || null)
|
||||
setSelectedProductId(productList[0].productId || null);
|
||||
}
|
||||
}, [productList, selectedProductId])
|
||||
}, [productList, selectedProductId]);
|
||||
|
||||
const selectedProduct = productList?.find((p) => p.productId === selectedProductId)
|
||||
const selectedProductAmount = formatFromCents(selectedProduct?.payAmount || 0, 2)
|
||||
const selectedProduct = productList?.find((p) => p.productId === selectedProductId);
|
||||
const selectedProductAmount = formatFromCents(selectedProduct?.payAmount || 0, 2);
|
||||
|
||||
// 支付处理函数
|
||||
const handlePayment = async () => {
|
||||
if (!selectedProductId || !policyCheck) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
@ -50,45 +50,45 @@ const RechargeList = () => {
|
|||
const preOrderResponse = await preOrderMutation.mutateAsync({
|
||||
productId: selectedProductId,
|
||||
version: 1,
|
||||
})
|
||||
});
|
||||
|
||||
if (!preOrderResponse.tradeNo) {
|
||||
throw new Error('预下单失败：未获取到交易号')
|
||||
throw new Error('预下单失败：未获取到交易号');
|
||||
}
|
||||
|
||||
// 2. 结账
|
||||
const baseURL = `${process.env.NEXT_PUBLIC_APP_URL}/wallet/charge/result`
|
||||
const baseURL = `${process.env.NEXT_PUBLIC_APP_URL}/wallet/charge/result`;
|
||||
const params = QueryString.stringify({
|
||||
redirectURL: '/wallet?back=1',
|
||||
back: 1,
|
||||
})
|
||||
const returnUrl = `${baseURL}?${params}`
|
||||
const cancelUrl = `${baseURL}?${params}`
|
||||
});
|
||||
const returnUrl = `${baseURL}?${params}`;
|
||||
const cancelUrl = `${baseURL}?${params}`;
|
||||
const checkoutResponse = await checkoutMutation.mutateAsync({
|
||||
tradeNo: preOrderResponse.tradeNo,
|
||||
payChannel: 'STRIPE',
|
||||
returnUrl,
|
||||
cancelUrl,
|
||||
})
|
||||
});
|
||||
|
||||
// 3. 跳转到支付页面
|
||||
if (checkoutResponse.paymentUrl) {
|
||||
window.location.href = checkoutResponse.paymentUrl
|
||||
window.location.href = checkoutResponse.paymentUrl;
|
||||
} else {
|
||||
throw new Error('支付链接获取失败')
|
||||
throw new Error('支付链接获取失败');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Payment failure, please try again')
|
||||
}
|
||||
toast.error('Payment failure, please try again');
|
||||
}
|
||||
};
|
||||
|
||||
// 检查是否可以支付
|
||||
const canPay =
|
||||
selectedProductId && policyCheck && !preOrderMutation.isPending && !checkoutMutation.isPending
|
||||
selectedProductId && policyCheck && !preOrderMutation.isPending && !checkoutMutation.isPending;
|
||||
|
||||
// 显示加载状态
|
||||
if (isLoading) {
|
||||
return <RechargeListSkeleton />
|
||||
return <RechargeListSkeleton />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -98,7 +98,7 @@ const RechargeList = () => {
|
|||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{productList?.map((product) => {
|
||||
const isSelected = selectedProductId === product.productId
|
||||
const isSelected = selectedProductId === product.productId;
|
||||
return (
|
||||
<div
|
||||
key={product.productId}
|
||||
|
|
@ -122,7 +122,7 @@ const RechargeList = () => {
|
|||
${formatFromCents(product.payAmount, 2)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,14 +143,14 @@ const RechargeList = () => {
|
|||
By recharging, you agree to the{' '}
|
||||
<Link href="/policy/recharge" target="_blank" onClick={(e) => e.stopPropagation()}>
|
||||
<span className="text-primary-variant-normal font-medium">
|
||||
CrushLevel Recharge Service Agreement
|
||||
Spicyxx.AI Recharge Service Agreement
|
||||
</span>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default RechargeList
|
||||
export default RechargeList;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import type { Metadata } from 'next';
|
|||
import { redirect } from 'next/navigation';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'CrushLevel AI - Grow Your Love Story',
|
||||
title: 'Spicyxx.AI - Grow Your Love Story',
|
||||
description:
|
||||
"Grow your love story with CrushLevel AI—From 'Hi' to 'I Do', sparked by every chat. Create, chat, and connect with AI companions.",
|
||||
"Grow your love story with Spicyxx.AI—From 'Hi' to 'I Do', sparked by every chat. Create, chat, and connect with AI companions.",
|
||||
keywords: [
|
||||
'CrushLevel',
|
||||
'Spicyxx.AI',
|
||||
'AI companion',
|
||||
'AI chat',
|
||||
'virtual girlfriend',
|
||||
|
|
@ -18,17 +18,17 @@ export const metadata: Metadata = {
|
|||
'AI conversation',
|
||||
],
|
||||
openGraph: {
|
||||
title: 'CrushLevel AI - Grow Your Love Story',
|
||||
title: 'Spicyxx.AI - Grow Your Love Story',
|
||||
description:
|
||||
"Grow your love story with CrushLevel AI—From 'Hi' to 'I Do', sparked by every chat. Create, chat, and connect with AI companions.",
|
||||
"Grow your love story with Spicyxx.AI—From 'Hi' to 'I Do', sparked by every chat. Create, chat, and connect with AI companions.",
|
||||
url: 'https://www.crushlevel.com',
|
||||
siteName: 'CrushLevel AI',
|
||||
siteName: 'Spicyxx.AI',
|
||||
images: [
|
||||
{
|
||||
url: '/logo.svg',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'CrushLevel AI - Grow Your Love Story',
|
||||
alt: 'Spicyxx.AI - Grow Your Love Story',
|
||||
},
|
||||
],
|
||||
locale: 'en_US',
|
||||
|
|
@ -36,9 +36,8 @@ export const metadata: Metadata = {
|
|||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'CrushLevel AI - Grow Your Love Story',
|
||||
description:
|
||||
"Grow your love story with CrushLevel AI—From 'Hi' to 'I Do', sparked by every chat.",
|
||||
title: 'Spicyxx.AI - Grow Your Love Story',
|
||||
description: "Grow your love story with Spicyxx.AI—From 'Hi' to 'I Do', sparked by every chat.",
|
||||
images: ['/logo.svg'],
|
||||
site: '@crushlevel',
|
||||
},
|
||||
|
|
|
|||
130
src/atoms/im.ts
130
src/atoms/im.ts
|
|
@ -1,130 +0,0 @@
|
|||
import { atom } from 'jotai'
|
||||
import { V2NIMConversation } from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK/V2NIMConversationService'
|
||||
import { V2NIMUser } from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK/V2NIMUserService'
|
||||
import { V2NIMMessage } from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK/V2NIMMessageService'
|
||||
import { QueueMap } from '@/lib/queue'
|
||||
import { VipType } from '@/services/wallet'
|
||||
|
||||
/**
|
||||
* 点赞状态枚举
|
||||
*/
|
||||
export enum MessageLikeStatus {
|
||||
None = 'none', // 未点赞/踩
|
||||
Liked = 'liked', // 已点赞
|
||||
Disliked = 'disliked', // 已踩
|
||||
}
|
||||
|
||||
/**
|
||||
* 消息服务端扩展字段接口（简化版）
|
||||
*/
|
||||
export interface MessageServerExtension {
|
||||
[userId: string]: MessageLikeStatus // 用户ID -> 点赞状态的直接映射
|
||||
}
|
||||
|
||||
/**
|
||||
* 消息扩展字段接口 (废弃，改用serverExtension)
|
||||
* @deprecated 使用 MessageServerExtension 替代
|
||||
*/
|
||||
export interface MessageExtension {
|
||||
likeStatus?: MessageLikeStatus // 当前用户对该消息的点赞状态
|
||||
likeCount?: number // 点赞总数
|
||||
dislikeCount?: number // 踩总数
|
||||
[key: string]: any // 其他扩展字段
|
||||
}
|
||||
|
||||
/**
|
||||
* 扩展消息类型，包含是否为新消息的标识
|
||||
*/
|
||||
export interface ExtendedMessage extends V2NIMMessage {
|
||||
isNewMessage?: boolean // 标识是否是新收到的消息（需要打字效果）
|
||||
isLoadingMessage?: boolean // 标识是否是loading消息
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析消息的serverExtension字段
|
||||
*/
|
||||
export const parseMessageServerExtension = (serverExtension?: string): MessageServerExtension => {
|
||||
if (!serverExtension) return {}
|
||||
try {
|
||||
return JSON.parse(serverExtension) as MessageServerExtension
|
||||
} catch {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将MessageServerExtension对象序列化为JSON字符串
|
||||
*/
|
||||
export const stringifyMessageServerExtension = (extension: MessageServerExtension): string => {
|
||||
return JSON.stringify(extension)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户对消息的点赞状态
|
||||
*/
|
||||
export const getUserLikeStatus = (message: ExtendedMessage, userId: string): MessageLikeStatus => {
|
||||
const serverExt = parseMessageServerExtension(message.serverExtension)
|
||||
return serverExt[userId] || MessageLikeStatus.None
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录状态
|
||||
*/
|
||||
export const imSyncedAtom = atom<boolean>(false)
|
||||
|
||||
/**
|
||||
* IM重连状态
|
||||
*/
|
||||
export enum IMReconnectStatus {
|
||||
CONNECTED = 'connected', // 已连接
|
||||
DISCONNECTED = 'disconnected', // 已断开
|
||||
RECONNECTING = 'reconnecting', // 重连中
|
||||
FAILED = 'failed', // 重连失败
|
||||
}
|
||||
|
||||
export const imReconnectStatusAtom = atom<IMReconnectStatus>(IMReconnectStatus.DISCONNECTED)
|
||||
|
||||
/**
|
||||
* 会话列表
|
||||
*/
|
||||
export const conversationListAtom = atom<Map<string, V2NIMConversation>>(new Map())
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
export const userListAtom = atom<Map<string, V2NIMUser>>(new Map())
|
||||
|
||||
/**
|
||||
* 消息列表
|
||||
*/
|
||||
export const msgListAtom = atom(new QueueMap<ExtendedMessage>(20, 'rightToLeft'))
|
||||
|
||||
/**
|
||||
* 选中的会话
|
||||
*/
|
||||
export const selectedConversationIdAtom = atom<string | null>(null)
|
||||
|
||||
/**
|
||||
* 聊天状态管理
|
||||
*/
|
||||
export const isWaitingForReplyAtom = atom<boolean>(false) // 是否正在等待AI回复
|
||||
|
||||
/**
|
||||
* 通话状态管理
|
||||
*/
|
||||
export const hasReceivedAiGreetingAtom = atom<boolean>(false) // 是否已收到AI开场白
|
||||
export const hasStartAICallAtom = atom<boolean>(false) // 是否已开始AI通话
|
||||
|
||||
export const isCoinInsufficientAtom = atom<boolean>(false) // 是否钻石不足
|
||||
export const isChargeDrawerOpenAtom = atom<boolean>(false) // 是否打开充值抽屉
|
||||
export const isVipDrawerOpenAtom = atom<{ open: boolean; vipType?: VipType }>({
|
||||
open: false,
|
||||
vipType: undefined,
|
||||
}) // 是否打开会员抽屉
|
||||
|
||||
export const isCallAtom = atom<boolean>(false) // 是否正在通话
|
||||
|
||||
/**
|
||||
* 已删除消息的会话列表 - 用于控制开场白显示
|
||||
*/
|
||||
export const deletedConversationsAtom = atom<Set<string>>(new Set<string>())
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogContent,
|
||||
|
|
@ -9,20 +9,20 @@ import {
|
|||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from '../ui/alert-dialog'
|
||||
import { IconButton, Button } from '../ui/button'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
|
||||
import { Input } from '../ui/input'
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
|
||||
import Image from 'next/image'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
|
||||
import Decimal from 'decimal.js'
|
||||
} from '../ui/alert-dialog';
|
||||
import { IconButton, Button } from '../ui/button';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||
import { Input } from '../ui/input';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
|
||||
import Image from 'next/image';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||||
import Decimal from 'decimal.js';
|
||||
|
||||
export interface AlbumPriceFormData {
|
||||
unlockMethod: 'pay' | 'free'
|
||||
price?: string
|
||||
unlockMethod: 'pay' | 'free';
|
||||
price?: string;
|
||||
}
|
||||
|
||||
const schema = z
|
||||
|
|
@ -35,48 +35,48 @@ const schema = z
|
|||
// 如果选择了 "pay"，price 必须填写且有效
|
||||
if (data.unlockMethod === 'pay') {
|
||||
if (!data.price || data.price.trim() === '') {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
if (Number(data.price) < 20) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true
|
||||
return true;
|
||||
},
|
||||
{
|
||||
message: 'At least 20 diamonds',
|
||||
path: ['price'],
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
interface AlbumPriceSettingProps {
|
||||
defaultUnlockPrice?: number
|
||||
onConfirm: (data: AlbumPriceFormData) => Promise<void>
|
||||
children?: React.ReactNode
|
||||
defaultUnlockPrice?: number;
|
||||
onConfirm: (data: AlbumPriceFormData) => Promise<void>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const AlbumPriceSetting = ({ defaultUnlockPrice, onConfirm, children }: AlbumPriceSettingProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
console.log('defaultUnlockPrice', defaultUnlockPrice)
|
||||
console.log('defaultUnlockPrice', defaultUnlockPrice);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (defaultUnlockPrice === undefined) {
|
||||
form.setValue('unlockMethod', 'pay')
|
||||
form.setValue('price', '20')
|
||||
return
|
||||
form.setValue('unlockMethod', 'pay');
|
||||
form.setValue('price', '20');
|
||||
return;
|
||||
}
|
||||
if (defaultUnlockPrice) {
|
||||
form.setValue('unlockMethod', 'pay')
|
||||
form.setValue('price', new Decimal(defaultUnlockPrice).div(100).toString())
|
||||
form.setValue('unlockMethod', 'pay');
|
||||
form.setValue('price', new Decimal(defaultUnlockPrice).div(100).toString());
|
||||
} else {
|
||||
form.setValue('unlockMethod', 'free')
|
||||
form.setValue('price', '')
|
||||
form.setValue('unlockMethod', 'free');
|
||||
form.setValue('price', '');
|
||||
}
|
||||
}
|
||||
}, [isOpen, defaultUnlockPrice])
|
||||
}, [isOpen, defaultUnlockPrice]);
|
||||
|
||||
const form = useForm<AlbumPriceFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
|
|
@ -84,40 +84,40 @@ const AlbumPriceSetting = ({ defaultUnlockPrice, onConfirm, children }: AlbumPri
|
|||
unlockMethod: 'pay',
|
||||
price: '',
|
||||
},
|
||||
})
|
||||
const unlockMethod = form.watch('unlockMethod')
|
||||
});
|
||||
const unlockMethod = form.watch('unlockMethod');
|
||||
|
||||
useEffect(() => {
|
||||
if (unlockMethod === 'free') {
|
||||
const priceValue = form.getValues('price')
|
||||
const priceValue = form.getValues('price');
|
||||
if (!priceValue) {
|
||||
form.setValue('price', '20')
|
||||
form.setValue('price', '20');
|
||||
}
|
||||
}
|
||||
}, [unlockMethod])
|
||||
}, [unlockMethod]);
|
||||
|
||||
const handleSubmit = async (data: AlbumPriceFormData) => {
|
||||
setIsLoading(true)
|
||||
setIsLoading(true);
|
||||
try {
|
||||
console.log('保存数据:', data)
|
||||
console.log('保存数据:', data);
|
||||
const result = {
|
||||
unlockMethod: data.unlockMethod,
|
||||
price: data.unlockMethod === 'pay' ? data.price : undefined,
|
||||
}
|
||||
await onConfirm(result)
|
||||
setIsOpen(false)
|
||||
form.reset()
|
||||
};
|
||||
await onConfirm(result);
|
||||
setIsOpen(false);
|
||||
form.reset();
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error)
|
||||
console.error('保存失败:', error);
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsOpen(false)
|
||||
form.reset()
|
||||
}
|
||||
setIsOpen(false);
|
||||
form.reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
|
|
@ -159,7 +159,7 @@ const AlbumPriceSetting = ({ defaultUnlockPrice, onConfirm, children }: AlbumPri
|
|||
the revenue.
|
||||
</p>
|
||||
<p className="break-words">
|
||||
CrushLevel keeps 20% of each image's sales as a service fee.
|
||||
Spicyxx.AI keeps 20% of each image's sales as a service fee.
|
||||
</p>
|
||||
<p className="break-words">
|
||||
Offering a few free images can encourage users to interact with
|
||||
|
|
@ -203,25 +203,25 @@ const AlbumPriceSetting = ({ defaultUnlockPrice, onConfirm, children }: AlbumPri
|
|||
type="text"
|
||||
placeholder="20~9999"
|
||||
onInput={(e) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
const target = e.target as HTMLInputElement;
|
||||
// 只允许输入数字
|
||||
let value = target.value.replace(/[^0-9]/g, '')
|
||||
let value = target.value.replace(/[^0-9]/g, '');
|
||||
|
||||
// 如果为空，允许继续输入
|
||||
if (value === '') {
|
||||
target.value = ''
|
||||
field.onChange('')
|
||||
return
|
||||
target.value = '';
|
||||
field.onChange('');
|
||||
return;
|
||||
}
|
||||
|
||||
// 转换为数字并限制范围
|
||||
const numValue = parseInt(value)
|
||||
const numValue = parseInt(value);
|
||||
if (numValue > 99999) {
|
||||
value = '99999'
|
||||
value = '99999';
|
||||
}
|
||||
|
||||
target.value = value
|
||||
field.onChange(value)
|
||||
target.value = value;
|
||||
field.onChange(value);
|
||||
}}
|
||||
prefixIcon={
|
||||
<div className="flex items-center justify-center p-1">
|
||||
|
|
@ -268,7 +268,7 @@ const AlbumPriceSetting = ({ defaultUnlockPrice, onConfirm, children }: AlbumPri
|
|||
</Form>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default AlbumPriceSetting
|
||||
export default AlbumPriceSetting;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
'use client'
|
||||
'use client';
|
||||
|
||||
import {
|
||||
useGetChargeProductList,
|
||||
useGetWalletBalance,
|
||||
useGetWebChargeCheckout,
|
||||
useGetWebChargePreOrder,
|
||||
} from '@/hooks/useWallet'
|
||||
import { Button, IconButton } from '../ui/button'
|
||||
} from '@/hooks/useWallet';
|
||||
import { Button, IconButton } from '../ui/button';
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
|
|
@ -14,57 +14,57 @@ import {
|
|||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from '../ui/drawer'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { formatFromCents } from '@/utils/number'
|
||||
import Image from 'next/image'
|
||||
import { Checkbox } from '../ui/checkbox'
|
||||
import Link from 'next/link'
|
||||
import { toast } from 'sonner'
|
||||
import { Skeleton } from '../ui/skeleton'
|
||||
import { usePathname, useSearchParams } from 'next/navigation'
|
||||
import QueryString from 'qs'
|
||||
import { useAtom } from 'jotai'
|
||||
import { isChargeDrawerOpenAtom } from '@/atoms/im'
|
||||
import { useCurrentUser } from '@/hooks/auth'
|
||||
} from '../ui/drawer';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { formatFromCents } from '@/utils/number';
|
||||
import Image from 'next/image';
|
||||
import { Checkbox } from '../ui/checkbox';
|
||||
import Link from 'next/link';
|
||||
import { toast } from 'sonner';
|
||||
import { Skeleton } from '../ui/skeleton';
|
||||
import { usePathname, useSearchParams } from 'next/navigation';
|
||||
import QueryString from 'qs';
|
||||
import { useAtom } from 'jotai';
|
||||
import { isChargeDrawerOpenAtom } from '@/atoms/im';
|
||||
import { useCurrentUser } from '@/hooks/auth';
|
||||
|
||||
const ChargeDrawer = () => {
|
||||
const [isChargeDrawerOpen, setIsChargeDrawerOpen] = useAtom(isChargeDrawerOpenAtom)
|
||||
const [policyCheck, setpolicyCheck] = useState(true)
|
||||
const [selectedProductId, setSelectedProductId] = useState<string | null>(null)
|
||||
const [isChargeDrawerOpen, setIsChargeDrawerOpen] = useAtom(isChargeDrawerOpenAtom);
|
||||
const [policyCheck, setpolicyCheck] = useState(true);
|
||||
const [selectedProductId, setSelectedProductId] = useState<string | null>(null);
|
||||
|
||||
const { data, isLoading } = useGetChargeProductList()
|
||||
const { productList } = data || {}
|
||||
const pathname = usePathname()
|
||||
const searchParams = useSearchParams()
|
||||
const { data, isLoading } = useGetChargeProductList();
|
||||
const { productList } = data || {};
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// 初始化获取钱包余额
|
||||
useGetWalletBalance()
|
||||
useGetWalletBalance();
|
||||
|
||||
// 支付相关的hooks
|
||||
const preOrderMutation = useGetWebChargePreOrder()
|
||||
const checkoutMutation = useGetWebChargeCheckout()
|
||||
const preOrderMutation = useGetWebChargePreOrder();
|
||||
const checkoutMutation = useGetWebChargeCheckout();
|
||||
|
||||
// 默认选中第一个产品
|
||||
useEffect(() => {
|
||||
if (productList && productList.length > 0 && !selectedProductId) {
|
||||
setSelectedProductId(productList[0].productId || null)
|
||||
setSelectedProductId(productList[0].productId || null);
|
||||
}
|
||||
}, [productList, selectedProductId])
|
||||
}, [productList, selectedProductId]);
|
||||
|
||||
const selectedProduct = productList?.find((p) => p.productId === selectedProductId)
|
||||
const selectedProductAmount = formatFromCents(selectedProduct?.payAmount || 0, 2)
|
||||
const selectedProduct = productList?.find((p) => p.productId === selectedProductId);
|
||||
const selectedProductAmount = formatFromCents(selectedProduct?.payAmount || 0, 2);
|
||||
const canPay =
|
||||
selectedProductId && policyCheck && !preOrderMutation.isPending && !checkoutMutation.isPending
|
||||
selectedProductId && policyCheck && !preOrderMutation.isPending && !checkoutMutation.isPending;
|
||||
|
||||
const handleClose = () => {
|
||||
setIsChargeDrawerOpen(false)
|
||||
}
|
||||
setIsChargeDrawerOpen(false);
|
||||
};
|
||||
|
||||
// 支付处理函数
|
||||
const handlePayment = async () => {
|
||||
if (!selectedProductId || !policyCheck) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
@ -72,21 +72,21 @@ const ChargeDrawer = () => {
|
|||
const preOrderResponse = await preOrderMutation.mutateAsync({
|
||||
productId: selectedProductId,
|
||||
version: 1,
|
||||
})
|
||||
});
|
||||
|
||||
if (!preOrderResponse.tradeNo) {
|
||||
throw new Error('Pre-order failed: No trade number obtained')
|
||||
throw new Error('Pre-order failed: No trade number obtained');
|
||||
}
|
||||
|
||||
const baseURL = `${process.env.NEXT_PUBLIC_APP_URL}/wallet/charge/result`
|
||||
const originalSearch = searchParams.toString()
|
||||
const fullPath = originalSearch ? `${pathname}?${originalSearch}` : pathname
|
||||
const baseURL = `${process.env.NEXT_PUBLIC_APP_URL}/wallet/charge/result`;
|
||||
const originalSearch = searchParams.toString();
|
||||
const fullPath = originalSearch ? `${pathname}?${originalSearch}` : pathname;
|
||||
const params = QueryString.stringify({
|
||||
redirectURL: fullPath,
|
||||
back: 1,
|
||||
})
|
||||
const returnUrl = `${baseURL}?${params}`
|
||||
const cancelUrl = `${baseURL}?${params}`
|
||||
});
|
||||
const returnUrl = `${baseURL}?${params}`;
|
||||
const cancelUrl = `${baseURL}?${params}`;
|
||||
|
||||
// 2. 结账
|
||||
const checkoutResponse = await checkoutMutation.mutateAsync({
|
||||
|
|
@ -94,18 +94,18 @@ const ChargeDrawer = () => {
|
|||
payChannel: 'STRIPE',
|
||||
returnUrl,
|
||||
cancelUrl,
|
||||
})
|
||||
});
|
||||
|
||||
// 3. 跳转到支付页面
|
||||
if (checkoutResponse.paymentUrl) {
|
||||
window.location.href = checkoutResponse.paymentUrl
|
||||
window.location.href = checkoutResponse.paymentUrl;
|
||||
} else {
|
||||
throw new Error('Failed to get payment link')
|
||||
throw new Error('Failed to get payment link');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Payment failure, please try again')
|
||||
}
|
||||
toast.error('Payment failure, please try again');
|
||||
}
|
||||
};
|
||||
|
||||
const renderList = () => {
|
||||
if (isLoading) {
|
||||
|
|
@ -123,13 +123,13 @@ const ChargeDrawer = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{productList?.map((product) => {
|
||||
const isSelected = selectedProductId === product.productId
|
||||
const isSelected = selectedProductId === product.productId;
|
||||
return (
|
||||
<div
|
||||
key={product.productId}
|
||||
|
|
@ -147,11 +147,11 @@ const ChargeDrawer = () => {
|
|||
${formatFromCents(product.payAmount, 2)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer open={isChargeDrawerOpen} onOpenChange={setIsChargeDrawerOpen} direction="right">
|
||||
|
|
@ -177,7 +177,7 @@ const ChargeDrawer = () => {
|
|||
By recharging, you agree to the{' '}
|
||||
<Link href="/policy/recharge" target="_blank" onClick={(e) => e.stopPropagation()}>
|
||||
<span className="text-primary-variant-normal font-medium">
|
||||
CrushLevel Recharge Service Agreement
|
||||
Spicyxx.AI Recharge Service Agreement
|
||||
</span>
|
||||
</Link>
|
||||
</span>
|
||||
|
|
@ -200,7 +200,7 @@ const ChargeDrawer = () => {
|
|||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default ChargeDrawer
|
||||
export default ChargeDrawer;
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { tokenManager } from '@/lib/auth/token'
|
||||
|
||||
export function MockProvider({ children }: { children: React.ReactNode }) {
|
||||
const [mockEnabled, setMockEnabled] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
async function initMocking() {
|
||||
// 首先初始化设备ID（确保用户第一次访问就有设备ID）
|
||||
tokenManager.initializeDeviceId()
|
||||
|
||||
// 只在开发环境和浏览器环境中启用
|
||||
if (process.env.NODE_ENV !== 'development' || typeof window === 'undefined') {
|
||||
setMockEnabled(true)
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否启用 mock
|
||||
const shouldMock = process.env.NEXT_PUBLIC_ENABLE_MOCK === 'true'
|
||||
console.log('🔧 Mock enabled:', shouldMock)
|
||||
|
||||
if (!shouldMock) {
|
||||
console.log('🚫 MSW 已禁用')
|
||||
setMockEnabled(true)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 动态导入 MSW
|
||||
const { worker } = await import('../mocks/browser')
|
||||
|
||||
// 启动 Service Worker
|
||||
await worker.start({
|
||||
onUnhandledRequest: 'bypass',
|
||||
serviceWorker: {
|
||||
url: '/mockServiceWorker.js',
|
||||
},
|
||||
// 添加选项以避免拦截页面导航
|
||||
quiet: false,
|
||||
})
|
||||
|
||||
console.log('🎭 MSW Worker started successfully')
|
||||
setMockEnabled(true)
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to start MSW:', error)
|
||||
setMockEnabled(true) // 即使失败也继续渲染
|
||||
}
|
||||
}
|
||||
|
||||
initMocking()
|
||||
}, [])
|
||||
|
||||
// 在 mock 初始化完成前显示加载状态
|
||||
if (!mockEnabled) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-500"></div>
|
||||
<p className="text-gray-600">Initializing development environment...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
/**
|
||||
* 测试工具加载器组件
|
||||
* 在开发环境中加载心动等级测试工具
|
||||
*/
|
||||
export function TestHeartbeatLoader() {
|
||||
useEffect(() => {
|
||||
// 只在开发环境加载测试工具
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
import('@/utils/testHeartbeatLevel')
|
||||
.then(() => {
|
||||
console.log('🔧 心动等级测试工具已加载')
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('加载测试工具失败:', error)
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
return null // 不渲染任何内容
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
// 服务端 Mock 初始化
|
||||
let isServerMockEnabled = false
|
||||
|
||||
export async function initServerMock() {
|
||||
// 避免重复初始化
|
||||
if (isServerMockEnabled) {
|
||||
return
|
||||
}
|
||||
|
||||
// 只在开发环境启用
|
||||
if (process.env.NODE_ENV !== 'development') {
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否启用 mock
|
||||
const shouldMock = process.env.NEXT_PUBLIC_ENABLE_MOCK === 'true'
|
||||
if (!shouldMock) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 动态导入服务端 MSW
|
||||
const { server } = await import('../mocks/server')
|
||||
|
||||
// 启动服务端 mock
|
||||
server.listen({
|
||||
onUnhandledRequest: 'bypass',
|
||||
})
|
||||
|
||||
isServerMockEnabled = true
|
||||
console.log('🎭 MSW Server started successfully')
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to start MSW Server:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 在服务端自动初始化
|
||||
if (typeof window === 'undefined') {
|
||||
initServerMock()
|
||||
}
|
||||
103
src/lib/utils.ts
103
src/lib/utils.ts
|
|
@ -1,128 +1,123 @@
|
|||
import { clsx, type ClassValue } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import dayjs from 'dayjs'
|
||||
import numeral from 'numeral'
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import dayjs from 'dayjs';
|
||||
import numeral from 'numeral';
|
||||
|
||||
// 合并类名
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
// 计算年龄
|
||||
export function calculateAge(year: string, month: string, day: string) {
|
||||
const birthDate = dayjs(`${year}-${month}-${day}`)
|
||||
const today = dayjs()
|
||||
return today.diff(birthDate, 'year')
|
||||
const birthDate = dayjs(`${year}-${month}-${day}`);
|
||||
const today = dayjs();
|
||||
return today.diff(birthDate, 'year');
|
||||
}
|
||||
|
||||
export function calculateAgeByBirthday(birthday?: string) {
|
||||
if (!birthday) return ''
|
||||
const birthDate = dayjs(birthday)
|
||||
const today = dayjs()
|
||||
return today.diff(birthDate, 'year')
|
||||
if (!birthday) return '';
|
||||
const birthDate = dayjs(birthday);
|
||||
const today = dayjs();
|
||||
return today.diff(birthDate, 'year');
|
||||
}
|
||||
|
||||
// 获取月份天数
|
||||
export function getDaysInMonth(year: string, month: string) {
|
||||
return Array.from({ length: dayjs(`${year}-${month}`).daysInMonth() }, (_, i) =>
|
||||
`${i + 1}`.padStart(2, '0')
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// 延迟函数
|
||||
export function delay(ms: number) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
// 加载图片
|
||||
export async function loadImageAsync(url: string) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous'
|
||||
img.onload = () => resolve(img)
|
||||
img.onerror = () => reject(new Error(`Failed to load image: ${url}`))
|
||||
img.src = url
|
||||
})
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
// 数字简化显示（K/M/B格式）
|
||||
export function formatNumberToKMB(number: number) {
|
||||
if (number >= 1000000000) {
|
||||
return numeral(Math.floor(number / 100000000) / 10).format('0.0') + 'B'
|
||||
return numeral(Math.floor(number / 100000000) / 10).format('0.0') + 'B';
|
||||
}
|
||||
if (number >= 1000000) {
|
||||
return numeral(Math.floor(number / 100000) / 10).format('0.0') + 'M'
|
||||
return numeral(Math.floor(number / 100000) / 10).format('0.0') + 'M';
|
||||
}
|
||||
if (number >= 1000) {
|
||||
return numeral(Math.floor(number / 100) / 10).format('0.0') + 'K'
|
||||
return numeral(Math.floor(number / 100) / 10).format('0.0') + 'K';
|
||||
}
|
||||
return number || 0
|
||||
return number || 0;
|
||||
}
|
||||
|
||||
// 根据时间戳（毫秒）获取年龄
|
||||
export function getAge(birthday: number) {
|
||||
if (!birthday) return 0
|
||||
const birthDate = dayjs(birthday)
|
||||
const today = dayjs()
|
||||
let age = today.year() - birthDate.year()
|
||||
if (!birthday) return 0;
|
||||
const birthDate = dayjs(birthday);
|
||||
const today = dayjs();
|
||||
let age = today.year() - birthDate.year();
|
||||
// 如果今年还没过生日，年龄减一
|
||||
if (
|
||||
today.month() < birthDate.month() ||
|
||||
(today.month() === birthDate.month() && today.date() < birthDate.date())
|
||||
) {
|
||||
age--
|
||||
age--;
|
||||
}
|
||||
return age
|
||||
return age;
|
||||
}
|
||||
|
||||
export function getConversationTime(timestamp: number) {
|
||||
const now = dayjs()
|
||||
const timestampDate = dayjs(timestamp)
|
||||
const now = dayjs();
|
||||
const timestampDate = dayjs(timestamp);
|
||||
// 当天显示HH:mm
|
||||
if (now.isSame(timestampDate, 'day')) {
|
||||
return timestampDate.format('HH:mm')
|
||||
return timestampDate.format('HH:mm');
|
||||
}
|
||||
// 昨天显示昨天HH:mm
|
||||
if (now.subtract(1, 'day').isSame(timestampDate, 'day')) {
|
||||
return 'Yesterday ' + timestampDate.format('HH:mm')
|
||||
return 'Yesterday ' + timestampDate.format('HH:mm');
|
||||
}
|
||||
// 今年显示MM-DD
|
||||
if (now.isSame(timestampDate, 'year')) {
|
||||
return timestampDate.format('MM-DD')
|
||||
return timestampDate.format('MM-DD');
|
||||
}
|
||||
return timestampDate.format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
// 格式化心动等级值
|
||||
export function formatHeartbeatLevel(value: number) {
|
||||
return `${value.toFixed(1)}℃`
|
||||
return timestampDate.format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
export function openApp(schemeURI: string) {
|
||||
const schemeUrl = schemeURI
|
||||
const downloadUrl = 'https://crushlevel.com/download' // 下载页 URL
|
||||
const startTime = Date.now()
|
||||
window.location.href = schemeUrl
|
||||
const schemeUrl = schemeURI;
|
||||
const downloadUrl = 'https://crushlevel.com/download'; // 下载页 URL
|
||||
const startTime = Date.now();
|
||||
window.location.href = schemeUrl;
|
||||
setTimeout(() => {
|
||||
if (Date.now() - startTime < 2100) {
|
||||
// 唤起成功
|
||||
return
|
||||
return;
|
||||
}
|
||||
window.location.href = downloadUrl // 失败跳转下载
|
||||
}, 2000)
|
||||
window.location.href = downloadUrl; // 失败跳转下载
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 毫秒转mm:ss, 如果是小时则为hh:mm
|
||||
export function durationText(duration: number) {
|
||||
const hours = Math.floor(duration / 3600000)
|
||||
const minutes = Math.floor((duration % 3600000) / 60000)
|
||||
const seconds = Math.floor((duration % 60000) / 1000)
|
||||
const hours = Math.floor(duration / 3600000);
|
||||
const minutes = Math.floor((duration % 3600000) / 60000);
|
||||
const seconds = Math.floor((duration % 60000) / 1000);
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
} else {
|
||||
return `00:${seconds.toString().padStart(2, '0')}`
|
||||
return `00:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue