d8d-vite-starter/USER_PREFERENCE_GUIDE.md

用户偏好设置功能指南

功能概述

本项目新增了移动端字体大小设置功能，允许用户选择四种字体大小：小(0)、中(1)、大(2)、超大(3)。

技术实现

1. 数据库结构

• 实体: UserPreference
• 表名: user_preferences
• 字段:
  • id: 主键ID
  • user_id: 关联用户ID（唯一索引）
  • font_size: 字体大小设置（0-3）
  • is_dark_mode: 深色模式开关（0/1）
  • created_at, updated_at: 时间戳
  • created_by, updated_by: 操作人ID

2. API接口

获取用户偏好设置

GET /api/v1/user-preferences?filters={"userId":1}

创建用户偏好设置

POST /api/v1/user-preferences
{
  "userId": 1,
  "fontSize": 1,
  "isDarkMode": 0
}

更新用户偏好设置

PUT /api/v1/user-preferences/{id}
{
  "fontSize": 2
}

3. 前端使用

字体大小枚举

enum FontSizeType {
  SMALL = 0,    // 14px
  MEDIUM = 1,   // 16px (默认)
  LARGE = 2,    // 18px
  EXTRA_LARGE = 3  // 20px
}

客户端调用示例

import { userPreferenceClient } from '@/client/api';
import { FontSizeType } from '@/server/modules/silver-users/user-preference.entity';

// 获取用户偏好设置
const response = await userPreferenceClient.$get({
  query: { filters: JSON.stringify({ userId: userId }) }
});

// 创建偏好设置
await userPreferenceClient.$post({
  json: {
    userId: user.id,
    fontSize: FontSizeType.LARGE,
    isDarkMode: 0
  }
});

// 更新偏好设置
await (userPreferenceClient as any)[preferenceId].$put({
  json: { fontSize: FontSizeType.LARGE }
});

4. 移动端页面集成

在ProfilePage.tsx中已经集成了字体大小设置功能：

1. 用户登录后自动加载当前偏好设置
2. 提供四种字体大小选项的radio选择
3. 实时保存设置并应用到页面
4. 通过CSS变量--mobile-font-size控制全局字体大小

5. 字体大小映射

枚举值	名称	实际大小	适用场景
0	小	14px	视力良好用户
1	中	16px	默认大小
2	大	18px	一般视力需求
3	超大	20px	视力不佳用户

测试步骤

1. 数据库初始化

# 运行数据库迁移
npm run db:migrate
# 或使用TypeORM同步
npm run dev

2. 功能测试

1. 登录系统
2. 进入个人中心页面
3. 选择"字体大小设置"
4. 切换不同字体大小
5. 验证设置是否保存成功
6. 刷新页面验证设置是否持久

3. API测试

# 测试获取偏好设置
curl -X GET "http://localhost:3000/api/v1/user-preferences?filters=%7B%22userId%22%3A1%7D" \
  -H "Authorization: Bearer YOUR_TOKEN"

# 测试创建偏好设置
curl -X POST http://localhost:3000/api/v1/user-preferences \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"userId": 1, "fontSize": 2, "isDarkMode": 0}'

扩展建议

1. 深色模式: 已预留is_dark_mode字段，可扩展深色模式支持
2. 更多设置: 可扩展用户其他偏好设置，如通知开关、布局方式等
3. 响应式: 可针对不同设备类型设置不同字体大小
4. A/B测试: 支持针对不同用户群体测试最佳默认设置

注意事项

1. 确保用户表中存在对应用户ID
2. 用户ID在user_preferences表中为唯一索引
3. 字体大小变更会立即应用到当前页面
4. 建议为视力障碍用户提供更大的字体选项