audio_codebuddy/feature_list_ui_optimize.json

{
  "project_name": "AI语音应用 - 页面优化与付费转化",
  "base_config": {
    "backend_port": 3000,
    "frontend_port": 5173,
    "db_host": "localhost",
    "db_port": 3306,
    "auth_enabled": false
  },
  "features": [
    {
      "id": 1,
      "description": "生成页 - 音色选择器网格布局",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/voices - 验证获取音色列表接口"
      ],
      "frontend_test_steps": [
        "1. 进入生成页",
        "2. 验证音色选择器改为网格布局（2列x5行）",
        "3. 验证每个音色卡片显示名称和图标",
        "4. 点击选中音色验证高亮效果",
        "5. 验证选中状态清晰可见"
      ]
    },
    {
      "id": 2,
      "description": "生成页 - 滑块实时数值反馈",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入生成页",
        "2. 拖动语速滑块",
        "3. 验证滑块上方实时显示当前数值（如：1.5x）",
        "4. 拖动音调滑块",
        "5. 验证音调数值实时更新",
        "6. 拖动音量滑块",
        "7. 验证音量百分比实时显示"
      ]
    },
    {
      "id": 3,
      "description": "生成页 - 字数限制提示",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/validate/text -H 'Content-Type: application/json' -d '{\"text\":\"测试文本\"}' - 验证文本验证接口"
      ],
      "frontend_test_steps": [
        "1. 进入生成页",
        "2. 验证输入框上方显示'最多2000字'提示",
        "3. 输入超过1000字验证字数统计显示",
        "4. 输入接近2000字验证警告提示",
        "5. 超过2000字验证禁止继续输入",
        "6. 验证字数统计样式美观"
      ]
    },
    {
      "id": 4,
      "description": "生成页 - AI生成按钮视觉优化",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入生成页",
        "2. 验证AI生成按钮使用渐变背景色",
        "3. 验证按钮有阴影效果",
        "4. 验证按钮尺寸醒目",
        "5. hover按钮验证悬停效果增强",
        "6. 点击时验证点击反馈动画"
      ]
    },
    {
      "id": 5,
      "description": "首页 - 专辑封面默认图",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/albums - 验证专辑列表接口返回封面URL"
      ],
      "frontend_test_steps": [
        "1. 进入首页",
        "2. 验证专辑卡片有封面图显示",
        "3. 无自定义封面时显示默认占位图",
        "4. 验证默认封面样式美观",
        "5. 验证封面加载失败时的兜底处理"
      ]
    },
    {
      "id": 6,
      "description": "首页 - 订阅数友好格式",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/albums - 验证订阅数接口"
      ],
      "frontend_test_steps": [
        "1. 进入首页",
        "2. 验证订阅数显示为'12 位订阅者'格式",
        "3. 验证1位订阅者显示'1 位订阅者'",
        "4. 验证0位订阅者显示'暂无订阅者'"
      ]
    },
    {
      "id": 7,
      "description": "首页 - 专辑描述精简",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入首页",
        "2. 验证默认专辑描述显示为'未分类音频'",
        "3. 验证描述简洁不换行"
      ]
    },
    {
      "id": 8,
      "description": "历史页 - 空状态美化",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入历史页（无数据）",
        "2. 验证显示友好的空状态插画",
        "3. 验证空状态文案清晰",
        "4. 验证有引导按钮（如：去生成）"
      ]
    },
    {
      "id": 9,
      "description": "历史页 - 批量操作功能",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/history/batch-delete -H 'Content-Type: application/json' -d '{\"ids\":[\"id1\",\"id2\"]}' - 验证批量删除",
        "2. curl -X POST http://localhost:3000/api/history/batch-move -H 'Content-Type: application/json' -d '{\"ids\":[\"id1\"],\"albumId\":1}' - 验证批量移动到专辑"
      ],
      "frontend_test_steps": [
        "1. 进入历史页",
        "2. 长按或勾选多个音频",
        "3. 验证批量选择模式开启",
        "4. 验证选中数量显示",
        "5. 点击批量删除",
        "6. 验证确认弹窗",
        "7. 验证删除成功提示",
        "8. 验证批量移动到专辑功能"
      ]
    },
    {
      "id": 10,
      "description": "历史页 - 排序功能",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/history?sortBy=time&order=desc - 验证按时间排序",
        "2. curl http://localhost:3000/api/history?sortBy=name&order=asc - 验证按名称排序"
      ],
      "frontend_test_steps": [
        "1. 进入历史页",
        "2. 点击排序按钮",
        "3. 验证显示排序选项（时间/名称）",
        "4. 选择按时间排序验证效果",
        "5. 选择按名称排序验证效果",
        "6. 验证升序/降序切换"
      ]
    },
    {
      "id": 11,
      "description": "历史页 - 按专辑筛选",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/history?albumId=1 - 验证按专辑筛选"
      ],
      "frontend_test_steps": [
        "1. 进入历史页",
        "2. 点击筛选按钮",
        "3. 验证显示专辑筛选选项",
        "4. 选择某个专辑",
        "5. 验证列表只显示该专辑音频"
      ]
    },
    {
      "id": 12,
      "description": "我的页 - 未登录引导",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 未登录状态下进入我的页",
        "2. 验证显示引导插画",
        "3. 验证登录/注册CTA按钮醒目",
        "4. 点击引导按钮验证跳转登录页"
      ]
    },
    {
      "id": 13,
      "description": "我的页 - 菜单图标统一",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入我的页",
        "2. 验证所有菜单项有图标",
        "3. 验证图标风格统一",
        "4. 验证图标清晰可见"
      ]
    },
    {
      "id": 14,
      "description": "我的页 - 设置功能",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/user/settings - 验证获取用户设置",
        "2. curl -X PUT http://localhost:3000/api/user/settings -H 'Content-Type: application/json' -d '{\"theme\":\"dark\"}' - 验证更新设置"
      ],
      "frontend_test_steps": [
        "1. 进入我的页",
        "2. 验证设置入口显示",
        "3. 点击进入设置页",
        "4. 验证账号设置选项",
        "5. 验证主题切换选项（明亮/暗黑）",
        "6. 验证通知设置选项",
        "7. 修改设置验证生效"
      ]
    },
    {
      "id": 15,
      "description": "我的页 - 免费用户标签优化",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 免费用户进入我的页",
        "2. 验证会员标签改为'免费试用'样式",
        "3. 验证标签样式吸引人",
        "4. 点击标签验证引导开通会员"
      ]
    },
    {
      "id": 16,
      "description": "专辑管理页 - 新建专辑入口",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/albums -H 'Content-Type: application/json' -d '{\"name\":\"测试专辑\",\"description\":\"描述\"}' - 验证创建专辑"
      ],
      "frontend_test_steps": [
        "1. 进入专辑管理页",
        "2. 验证页面顶部有'新建专辑'按钮",
        "3. 点击新建专辑",
        "4. 验证弹窗表单（名称/描述/封面）",
        "5. 填写信息并确认",
        "6. 验证新专辑创建成功"
      ]
    },
    {
      "id": 17,
      "description": "专辑管理页 - 快捷操作菜单",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [
        "1. curl -X PUT http://localhost:3000/api/albums/1 -H 'Content-Type: application/json' -d '{\"name\":\"更新名称\"}' - 验证更新专辑",
        "2. curl -X DELETE http://localhost:3000/api/albums/1 - 验证删除专辑"
      ],
      "frontend_test_steps": [
        "1. 进入专辑管理页",
        "2. 长按或右滑专辑卡片",
        "3. 验证显示编辑/删除快捷操作",
        "4. 点击编辑验证弹窗",
        "5. 点击删除验证确认弹窗",
        "6. 验证操作成功反馈"
      ]
    },
    {
      "id": 18,
      "description": "专辑管理页 - 排序功能",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/albums?sortBy=name - 验证按名称排序",
        "2. curl http://localhost:3000/api/albums?sortBy=subscribers - 验证按订阅数排序"
      ],
      "frontend_test_steps": [
        "1. 进入专辑管理页",
        "2. 点击排序按钮",
        "3. 验证按名称/订阅数排序选项",
        "4. 切换排序验证列表变化"
      ]
    },
    {
      "id": 19,
      "description": "专辑管理页 - 默认专辑标注",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入专辑管理页",
        "2. 验证默认专辑有明确标注",
        "3. 验证标注显示'默认专辑不可删除'",
        "4. 验证默认专辑无编辑入口"
      ]
    },
    {
      "id": 20,
      "description": "全局 - 底部导航选中高亮",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 切换不同底部导航",
        "2. 验证选中项有高亮效果",
        "3. 验证选中项图标/文字颜色变化",
        "4. 验证选中项有下划线或背景高亮"
      ]
    },
    {
      "id": 21,
      "description": "全局 - 页面切换loading动画",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 点击底部导航切换页面",
        "2. 验证加载动画显示",
        "3. 验证动画样式美观",
        "4. 验证数据加载完成后动画消失"
      ]
    },
    {
      "id": 22,
      "description": "全局 - 错误提示优化",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/nonexist - 验证404响应"
      ],
      "frontend_test_steps": [
        "1. 断网状态下操作",
        "2. 验证显示友好错误提示",
        "3. 验证提示文案清晰",
        "4. 验证有重试按钮",
        "5. 验证错误提示可关闭"
      ]
    },
    {
      "id": 23,
      "description": "全局 - 无障碍标签",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "2",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 使用读屏软件测试",
        "2. 验证emoji图标有aria-label属性",
        "3. 验证可访问性标签正确"
      ]
    },
    {
      "id": 24,
      "description": "试听功能 - 预览API",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/preview -H 'Content-Type: application/json' -d '{\"text\":\"测试预览文本\"}' - 验证生成预览音频"
      ],
      "frontend_test_steps": [
        "1. 进入生成页输入文本",
        "2. 选择音色参数",
        "3. 点击试听预览按钮",
        "4. 验证预览音频播放",
        "5. 验证试听不消耗额度"
      ]
    },
    {
      "id": 25,
      "description": "历史页 - 一键试听按钮",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 进入历史页",
        "2. 验证每个音频卡片有播放按钮",
        "3. 点击播放按钮",
        "4. 验证音频开始播放",
        "5. 验证播放状态图标变化"
      ]
    },
    {
      "id": 26,
      "description": "下载功能 - 明显下载按钮",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/audio/audio-001/download - 验证下载接口"
      ],
      "frontend_test_steps": [
        "1. 进入历史页或详情页",
        "2. 验证下载按钮明显可见",
        "3. 点击下载按钮",
        "4. 验证下载进度显示",
        "5. 验证下载完成提示"
      ]
    },
    {
      "id": 27,
      "description": "分享功能 - 分享链接生成",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/share/audio-001 - 验证生成分享链接"
      ],
      "frontend_test_steps": [
        "1. 进入音频详情页",
        "2. 验证分享按钮明显可见",
        "3. 点击分享按钮",
        "4. 验证分享面板显示",
        "5. 验证可生成分享链接",
        "6. 验证复制链接功能"
      ]
    },
    {
      "id": 28,
      "description": "每日签到 - 签到API",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/signin -H 'Content-Type: application/json' -d '{\"userId\":\"test-user\"}' - 验证签到",
        "2. curl http://localhost:3000/api/signin/status?userId=test-user - 验证签到状态"
      ],
      "frontend_test_steps": [
        "1. 进入我的页或首页",
        "2. 验证签到入口显示",
        "3. 点击签到",
        "4. 验证签到成功动画",
        "5. 验证获得免费额度",
        "6. 验证连续签到天数显示"
      ]
    },
    {
      "id": 29,
      "description": "会员购买 - 会员卡入口",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/vip/plans - 验证获取会员套餐",
        "2. curl -X POST http://localhost:3000/api/vip/purchase -H 'Content-Type: application/json' -d '{\"planId\":\"monthly\"}' - 验证购买"
      ],
      "frontend_test_steps": [
        "1. 进入会员中心",
        "2. 验证月卡/年卡选项显示",
        "3. 验证套餐价格和权益说明",
        "4. 点击购买",
        "5. 验证支付流程",
        "6. 验证购买成功提示"
      ]
    },
    {
      "id": 30,
      "description": "额度用尽 - 付费引导弹窗",
      "status": "done",
      "passes": true,
      "priority": "high",
      "phase": "1",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/user/quota - 验证获取用户额度"
      ],
      "frontend_test_steps": [
        "1. 额度用尽时点击生成",
        "2. 验证弹窗提示'今日免费额度已用完'",
        "3. 验证弹窗有开通会员引导",
        "4. 点击立即开通",
        "5. 验证跳转会员购买页"
      ]
    },
    {
      "id": 31,
      "description": "邀请有礼 - 邀请API",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/invite/code - 验证获取邀请码",
        "2. curl -X POST http://localhost:3000/api/invite/claim -H 'Content-Type: application/json' -d '{\"inviteCode\":\"xxx\"}' - 验证使用邀请码"
      ],
      "frontend_test_steps": [
        "1. 进入邀请有礼页面",
        "2. 验证邀请码显示",
        "3. 验证分享邀请链接按钮",
        "4. 验证被邀请人获得奖励",
        "5. 验证邀请人获得奖励"
      ]
    },
    {
      "id": 32,
      "description": "任务中心 - 任务API",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/tasks - 验证获取任务列表",
        "2. curl -X POST http://localhost:3000/api/tasks/complete -H 'Content-Type: application/json' -d '{\"taskId\":\"task-001\"}' - 验证完成任务"
      ],
      "frontend_test_steps": [
        "1. 进入任务中心",
        "2. 验证新手任务列表",
        "3. 完成某个任务",
        "4. 验证奖励发放",
        "5. 验证任务进度更新"
      ]
    },
    {
      "id": 33,
      "description": "积分体系 - 积分API",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/points/balance - 验证获取积分余额",
        "2. curl http://localhost:3000/api/points/history - 验证积分明细"
      ],
      "frontend_test_steps": [
        "1. 进入我的积分页",
        "2. 验证积分余额显示",
        "3. 验证积分来源记录",
        "4. 验证积分消耗记录",
        "5. 验证积分兑换入口"
      ]
    },
    {
      "id": 34,
      "description": "生成成功 - 分享引导",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [],
      "frontend_test_steps": [
        "1. 生成音频成功",
        "2. 验证成功动画显示",
        "3. 验证分享按钮引导",
        "4. 点击分享验证分享面板",
        "5. 验证分享可获得积分"
      ]
    },
    {
      "id": 35,
      "description": "声音克隆 - 克隆API",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "3",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/voice/clone -H 'Content-Type: application/json' -d '{\"name\":\"克隆音色\",\"audioFiles\":[\"file1.mp3\"]}' - 验证克隆请求",
        "2. curl http://localhost:3000/api/voice/clone/status/clone-001 - 验证克隆状态"
      ],
      "frontend_test_steps": [
        "1. 进入声音克隆页",
        "2. 验证上传音频引导",
        "3. 上传5分钟音频",
        "4. 验证上传进度",
        "5. 验证克隆训练状态",
        "6. 验证克隆完成音色列表"
      ]
    },
    {
      "id": 36,
      "description": "批量生成 - 批量API",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "3",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/batch/generate -F 'file=@test.txt' - 验证批量上传",
        "2. curl http://localhost:3000/api/batch/status/batch-001 - 验证批量状态"
      ],
      "frontend_test_steps": [
        "1. 进入批量生成页",
        "2. 验证上传TXT/PDF入口",
        "3. 上传批量文件",
        "4. 验证解析结果预览",
        "5. 验证批量生成进度",
        "6. 验证批量下载功能"
      ]
    },
    {
      "id": 37,
      "description": "作品展示墙",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "3",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/works/ranking - 验证获取作品排行榜"
      ],
      "frontend_test_steps": [
        "1. 进入作品展示墙",
        "2. 验证优秀作品展示",
        "3. 验证点赞/播放数据",
        "4. 验证可查看作品详情",
        "5. 验证可关注创作者"
      ]
    },
    {
      "id": 38,
      "description": "足迹地图 - 成就API",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/achievements - 验证获取成就数据"
      ],
      "frontend_test_steps": [
        "1. 进入我的成就页",
        "2. 验证累计生成时长显示",
        "3. 验证累计字数统计",
        "4. 验证成就徽章展示",
        "5. 验证游戏化进度条"
      ]
    },
    {
      "id": 39,
      "description": "多语言支持 - 翻译API",
      "status": "done",
      "passes": true,
      "priority": "low",
      "phase": "3",
      "backend_test_steps": [
        "1. curl -X POST http://localhost:3000/api/translate -H 'Content-Type: application/json' -d '{\"text\":\"你好\",\"targetLang\":\"en\"}' - 验证翻译接口"
      ],
      "frontend_test_steps": [
        "1. 进入生成页",
        "2. 选择目标语言",
        "3. 输入中文文本",
        "4. 验证自动翻译",
        "5. 验证翻译后配音生成"
      ]
    },
    {
      "id": 40,
      "description": "高品质下载 - 会员专属标识",
      "status": "done",
      "passes": true,
      "priority": "medium",
      "phase": "2",
      "backend_test_steps": [
        "1. curl http://localhost:3000/api/audio/audio-001/download?quality=high - 验证高品质下载"
      ],
      "frontend_test_steps": [
        "1. 进入音频详情页",
        "2. 验证下载按钮显示品质选项",
        "3. 非会员点击高品质下载",
        "4. 验证提示'开通会员享受高品质'",
        "5. 会员点击高品质下载验证正常下载"
      ]
    }
  ]
}