Skip to content

Fix #35: 价格表页面增加分页功能 - #37

Merged
ding113 merged 5 commits into
devfrom
fix/issue-35-price-table-pagination
Oct 31, 2025
Merged

Fix #35: 价格表页面增加分页功能#37
ding113 merged 5 commits into
devfrom
fix/issue-35-price-table-pagination

Conversation

@claude

@claude claude Bot commented Oct 31, 2025

Copy link
Copy Markdown
Contributor

Close #35

🎯 功能概述

为价格表页面添加分页功能,解决一次性加载大量数据导致的性能问题。

🔧 主要改动

后端改进

  • 新增 PaginationParams 和 PaginatedResult 分页接口
  • 添加 findAllLatestPricesPaginated 分页查询方法
  • 新增 getModelPricesPaginated action 函数
  • 创建 /api/prices API 端点支持分页查询

前端优化

  • 重构 PriceList 组件支持分页显示
  • 添加页面大小选择器(20/50/100/200 条/页)
  • 实现 URL 参数同步,支持页面刷新和分享
  • 优化搜索功能,支持分页状态保持
  • 添加加载状态指示器

性能提升

  • 默认每页显示 50 条记录,避免一次性渲染大量数据
  • 支持 20-200 条/页的灵活配置
  • 保持向后兼容,降级处理确保功能可用性

📊 预期效果

  • 显著提升页面加载速度
  • 改善用户体验,特别是移动设备
  • 保持搜索功能的完整性和响应性
  • 降低内存占用和渲染压力

🧪 测试建议

  1. 测试不同页面大小的显示效果
  2. 验证搜索与分页的联动功能
  3. 测试 URL 参数的同步和页面刷新
  4. 验证在不同数据量下的性能表现

Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

gsh123china and others added 3 commits October 31, 2025 22:36
修复问题:
validateApiKeyAndGetUser 函数在查询用户信息时遗漏了 providerGroup 字段,导致 session.authState.user.providerGroup 始终为 undefined,供应商选择器中的用户分组过滤逻辑无法生效。

修改内容:
- 在 SELECT 查询中添加 userProviderGroup: users.providerGroup
- 在构建 User 对象时传递 providerGroup: row.userProviderGroup

影响范围:
- 恢复用户分组过滤功能,使设置了 providerGroup 的用户请求能够正确过滤到对应 groupTag 的供应商
- 向后兼容,未设置 providerGroup 的用户行为不变
- 无需数据库迁移或环境变更"

Co-authored-by: GuShenghua <gushenghua@sdesrd.com>
- 添加分页接口 PaginationParams 和 PaginatedResult
- 新增 findAllLatestPricesPaginated 分页查询方法
- 新增 getModelPricesPaginated action 函数
- 新增 /api/prices API 端点支持分页查询
- 重构 PriceList 组件支持分页、页面大小选择、搜索
- 修改价格表页面支持分页参数和降级处理
- 支持URL参数同步分页状态
- 优化性能,避免一次性加载大量数据
@ding113

ding113 commented Oct 31, 2025

Copy link
Copy Markdown
Owner

@claude 帮我审核这个 PR

page,
pageSize,
};

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

建议优化:后端搜索实现会导致性能问题,当数据量大时前端过滤仍然需要处理大量数据。建议在 SQL 层面实现搜索过滤以提高性能。

* - page: 页码 (默认: 1)
* - pageSize: 每页大小 (默认: 50)
* - search: 搜索关键词 (可选)
*/

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

安全建议:建议在 API 端点添加权限检查,确保只有管理员可以访问价格数据,与 Server Action 保持一致的权限控制。

}: PriceListProps) {
const [searchTerm, setSearchTerm] = useState("");
const [prices, setPrices] = useState<ModelPrice[]>(initialPrices);
const [total, setTotal] = useState(initialTotal);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

性能优化:在 useEffect 中直接调用 fetchPrices 会导致额外的 API 请求。建议只在 URL 参数与当前状态不一致时才触发数据获取。

window.history.replaceState({}, '', url.toString());
};

// 获取价格数据

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用户体验改进:建议添加防抖机制,避免用户快速输入时触发过多 API 请求。可以使用 useDebounce hook 来优化搜索体验。

model_name,
MAX(created_at) as max_created_at
FROM model_prices
GROUP BY model_name

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码重复:两个函数使用了相似的 CTE 查询逻辑。建议抽取公共的 SQL 模板或重构为可复用的查询构建器以减少重复代码。

@claude

claude Bot commented Oct 31, 2025

Copy link
Copy Markdown
Contributor Author

📋 代码审查结果

✅ 整体评价

这是一个质量很高的 PR,成功实现了价格表页面的分页功能,代码结构清晰,功能完整。主要优点包括:

  • 功能完整性:完整的分页实现,包括页面大小选择、URL 参数同步
  • 用户体验优化:加载状态指示器、响应式设计、搜索保持
  • 向下兼容:提供了降级处理机制,确保功能可用性
  • 代码组织:良好的类型定义和接口设计

🔧 主要改进建议

  1. 后端搜索优化

    • 当前实现在前端过滤,大数据量时仍有性能问题
    • 建议在 SQL 层面实现 WHERE model_name ILIKE ? 查询
  2. API 安全性

    • /api/prices 端点缺少权限检查
    • 建议添加与 Server Action 一致的管理员权限验证
  3. 性能优化

    • 搜索功能添加防抖机制,避免频繁 API 请求
    • useEffect 优化,避免不必要的重复请求
  4. 代码重构

    • SQL 查询存在重复,可抽取公共 CTE 模板
    • 分页逻辑可以抽象为可复用的 hook

🎯 建议优先级

高优先级

  • API 权限检查(安全性)
  • 后端搜索实现(性能)

中优先级

  • 搜索防抖优化
  • SQL 查询重构

低优先级

  • useEffect 优化
  • 代码抽象改进

🧪 测试建议

  1. 测试不同数据量下的性能表现(100+ 模型)
  2. 验证搜索功能的准确性和响应速度
  3. 测试页面刷新和 URL 参数同步
  4. 验证权限控制的有效性

总的来说,这是一个很棒的功能实现!👍 建议优先处理安全性和性能优化后合并。

@claude claude Bot added the enhancement New feature or request label Oct 31, 2025
github-actions Bot pushed a commit that referenced this pull request Oct 31, 2025
- 将管理员用户显示名称从 'Admin Token' 改为 'Admin (token_prefix...)'
- 显示管理员令牌的前8位作为标识,便于区分不同的管理员会话
- 保持普通用户的正常显示逻辑不变
ding113 and others added 2 commits October 31, 2025 23:57
主要改进:
- 添加 /api/prices 端点权限检查,确保只有管理员可访问
- 实现 SQL 层面的搜索过滤,提升大数据量场景下的性能
- 添加搜索防抖机制(500ms),优化用户体验
- 移除客户端过滤逻辑,统一使用后端搜索
- 优化 useEffect 依赖,避免不必要的 API 请求

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@ding113
ding113 merged commit 4e4a75e into dev Oct 31, 2025
1 of 2 checks passed
@ding113
ding113 deleted the fix/issue-35-price-table-pagination branch November 7, 2025 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants