Skip to content

RATING_FEATURE.md

Latest commit

 

History

History
110 lines (81 loc) · 3.25 KB

RATING_FEATURE.md

File metadata and controls

110 lines (81 loc) · 3.25 KB

历史记录评分功能说明

功能概述

为历史记录页面添加了图片评分系统，包括：

  1. 星级评分：每张图片下方显示5颗星 + 1个"Bad"按钮
  2. 星级筛选：可按星级（1-5星）或 Bad 筛选历史记录
  3. 筛选面板折叠：筛选条件面板默认折叠，点击可展开/收起

使用方法

评分操作

  1. 打开历史记录页面（/history.html）
  2. 在任意图片下方可以看到评分区域
  3. 点击星星（★）进行1-5星评分
  4. 点击"👎 Bad"按钮标记为不喜欢的图片
  5. 再次点击已选中的评分可以取消或更改

筛选操作

  1. 点击"🔍 筛选条件"标题展开筛选面板
  2. 日期筛选：选择特定日期查看该日期的历史记录
  3. 星级筛选：
    • 全部：显示所有记录
    • ★★★★★：仅显示5星图片
    • ★★★★：仅显示4星图片
    • ★★★：仅显示3星图片
    • ★★：仅显示2星图片
    • ★：仅显示1星图片
    • 👎 Bad：仅显示标记为Bad的图片
  4. 可以同时使用日期和星级筛选
  5. 点击"清除日期"按钮清除日期筛选
  6. 点击"全部"按钮清除星级筛选

折叠/展开筛选面板

  • 点击"🔍 筛选条件"标题可切换面板的展开/折叠状态
  • 默认状态为折叠，节省页面空间

技术实现

后端改动

  1. 数据库结构 (database.py)

    • 在 generation_history 表中添加 rating 字段（INTEGER，默认0）
    • 添加 idx_history_rating 索引优化查询性能
    • 新增 update_rating() 函数更新评分
    • 修改 get_user_history()、get_all_history()、get_history_count() 支持评分筛选

  2. API接口 (app.py)

    • 新增 /api/rating POST 接口处理评分请求
    • 修改 /api/history GET 接口支持 rating 参数筛选

前端改动

  1. 样式 (static/history.html)

    • 添加评分星星样式（.star、.rating-container）
    • 添加 Bad 按钮样式（.bad-rating）
    • 添加筛选面板折叠样式（.filter-section、.filter-content）
    • 添加星级筛选按钮样式（.rating-filter-btn）

  2. 功能

    • rateImage(): 提交评分到后端
    • selectRatingFilter(): 选择星级筛选
    • toggleFilterSection(): 切换筛选面板折叠状态
    • generateStarsHtml(): 生成评分星星HTML
    • 修改 renderHistory() 显示评分区域
    • 修改 loadHistory() 支持评分筛选参数

评分值说明

  • 0: 未评分（默认值）
  • 1-5: 1-5星评分
  • -1: Bad（不喜欢）

数据迁移

如果数据库中已有历史记录但没有 rating 字段，需要运行迁移脚本：

python migrate_add_rating.py

该脚本会：

  1. 检查 rating 字段是否存在
  2. 如果不存在则添加该字段（默认值为0）
  3. 创建评分索引

测试

运行测试脚本验证评分功能：

python test_rating.py

测试内容包括：

  1. 获取历史记录
  2. 为图片评分
  3. 验证评分已更新
  4. 测试评分筛选功能

注意事项

  1. 评分不校验用户ID：任何用户都可以对所有用户的图片进行评分
  2. 评分会立即保存并刷新显示
  3. 筛选条件可以组合使用（日期 + 星级）
  4. 筛选面板默认折叠，减少页面占用空间