feat(viral-video): 文案视频时长改为15-30秒滚轮picker #2196

Merged

xiaoxia merged 4 commits from feat/vv-duration-wheel-picker into develop 2026-10-05 16:30:26 +08:00

Conversation 2 Commits 4 Files Changed 4

+292 -8

xiaoxia commented 2026-10-05 15:28:19 +08:00

Owner

Copy Link

Copy Source

背景

用户反馈原 Select 下拉选择时长不直观，参考移动端滚轮 picker 样式改为竖屏滚轮。

改动

1. 新增通用组件 DurationWheelPicker（src/components/common/DurationWheelPicker/）

• 原生 scroll + scroll-snap 实现，零额外依赖
• 浅色紫主题：选中行 #7c3aed 紫字加粗+放大，背景 #f5f0ff 浅紫高亮条+上下紫色分隔线
• 上下两端渐变淡出遮罩，居中指示器
• 支持触摸滑动 / 鼠标滚轮 / 点击跳转，松手后自动吸附最近项
• 可配置 min/max/step/unit/height/disabled，value 受控

2. 爆款视频 Step1「文案视频时长」替换原 Select 下拉

• 范围：15–30 秒，步长 1 秒，共 16 档
• 默认值：15s → 20s
• label 右侧紫色小徽章实时显示「N秒」当前值
• 底部浅灰提示「上下滑动选择 15–30 秒视频时长」
• 切换视频模型时仍按模型 max_duration 自动 clamp：seedance-2.5 支持 30s；其他模型 max_duration=15 切回时自动落到 15s

3. 积分显示恢复（已在 PR #2193 d36cc09b 合入，本 PR 不重复）

• Header PointsBadge / 积分中心入口 / 生成页积分预校验 / 订阅页积分 Tab 全部恢复

样式

• 沿用紫白主题 (#7c3aed/#f5f0ff/#fafafe/#e5e7eb/#9ca3af)，不做深色
• CSS 新增 .vv-label-value 紫色小徽章

验证

• tsc --noEmit 通过
• vite build 通过（ViralVideoPage-BuptPNx9.js 包含所有 dw-picker-* 类名）
• prettier 已格式化

## 背景 用户反馈原 Select 下拉选择时长不直观，参考移动端滚轮 picker 样式改为竖屏滚轮。 ## 改动 ### 1. 新增通用组件 DurationWheelPicker（src/components/common/DurationWheelPicker/） - 原生 scroll + scroll-snap 实现，零额外依赖 - 浅色紫主题：选中行 #7c3aed 紫字加粗+放大，背景 #f5f0ff 浅紫高亮条+上下紫色分隔线 - 上下两端渐变淡出遮罩，居中指示器 - 支持触摸滑动 / 鼠标滚轮 / 点击跳转，松手后自动吸附最近项 - 可配置 min/max/step/unit/height/disabled，value 受控 ### 2. 爆款视频 Step1「文案视频时长」替换原 Select 下拉 - 范围：15–30 秒，步长 1 秒，共 16 档 - 默认值：15s → 20s - label 右侧紫色小徽章实时显示「N秒」当前值 - 底部浅灰提示「上下滑动选择 15–30 秒视频时长」 - 切换视频模型时仍按模型 max_duration 自动 clamp：seedance-2.5 支持 30s；其他模型 max_duration=15 切回时自动落到 15s ### 3. 积分显示恢复（已在 PR #2193 d36cc09b 合入，本 PR 不重复） - Header PointsBadge / 积分中心入口 / 生成页积分预校验 / 订阅页积分 Tab 全部恢复 ### 样式 - 沿用紫白主题 (#7c3aed/#f5f0ff/#fafafe/#e5e7eb/#9ca3af)，不做深色 - CSS 新增 .vv-label-value 紫色小徽章 ## 验证 - tsc --noEmit 通过 - vite build 通过（ViralVideoPage-BuptPNx9.js 包含所有 dw-picker-* 类名） - prettier 已格式化

xiaoxia added 1 commit 2026-10-05 15:28:20 +08:00

feat(viral-video): 文案视频时长改为15-30秒滚轮picker ... 73da37b6cc

- 新增通用 DurationWheelPicker 组件（scroll-snap 原生滚动，无额外依赖）
  * 浅色紫主题：选中行 #7c3aed 紫字加粗+#f5f0ff 浅紫背景条+上下分隔线
  * 支持上下滑动/点击/鼠标滚轮，松手自动吸附到最近秒
  * 上下两端渐变淡出，移动端流畅
  * 可配置 min/max/step/height/unit/disabled
- 爆款视频 Step1「文案视频时长」替换原 Select 下拉：
  * 范围 15–30 秒，步长 1 秒
  * 默认值从 15 秒改为 20 秒
  * label 右侧实时紫色徽章显示「N秒」当前值
  * 底部提示「上下滑动选择 15–30 秒视频时长」
- CSS 新增 .vv-label-value 紫色小徽章样式
- 切换视频模型时仍按模型 max_duration 自动 clamp（seedance-2.5 支持 30s，其他 max=15 模型切回时自动落到 15s）

注：积分 UI 恢复（ENABLE_CREDIT_SYSTEM=true）已在 PR #2193 合入 develop，本 PR 不再包含。

gitea-actions bot commented 2026-10-05 15:30:44 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#2196
预览链接	https://pr-2196.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2196 | | 预览链接 | [https://pr-2196.preview.xiaoxiajianji.com](https://pr-2196.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot added 1 commit 2026-10-05 15:35:52 +08:00

style: auto-format with black + isort + ruff + prettier [skip ci-format-check] 5d0d87806b

xiaoxia added 1 commit 2026-10-05 15:50:04 +08:00

fix(lint): DurationWheelPicker options 使用 useMemo 包裹以满足 exhaustive-deps 8d15c5fa10

xiaoxia added 1 commit 2026-10-05 16:16:15 +08:00

Merge remote-tracking branch 'origin/develop' into feat/vv-duration-wheel-picker 2e1f3a9a1c

xiaoxia merged commit 3eef497dfe into develop 2026-10-05 16:30:26 +08:00

gitea-actions bot commented 2026-10-05 16:31:35 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #2196 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #2196 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

xiaoxia referenced this pull request 2026-10-05 16:49:58 +08:00

fix(viral-video): 时长滚轮改为弹层式，保持与其他表单项外观一致 #2199

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot frontend-dev xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2196