fix: #1789 标题字号滑块拖动回弹 — useMemo 稳定引用 + ref 防御 #1793

Merged

xiaoxia merged 1 commits from fix/1789-title-slider-bounce into develop 2026-09-08 13:28:51 +08:00

Conversation 4 Commits 1 Files Changed 2

+19 -7

xiaoxia commented 2026-09-08 13:23:37 +08:00

Owner

Copy Link

Copy Source

问题

拖动标题字号滑块时，值被自动回弹到模板默认值（如 28px），无法停留在用户选择的位置。

根因

useTitleCoverSync 的 useEffect 依赖了 userTemplates（每次渲染 .filter() 生成新数组引用），导致：

用户拖滑块 → setState → 组件重渲染 → allTemplates.filter() 新引用 →
useTitleCoverSync effect 触发 → 从模板 title_config.font_size 覆盖 → slider 回弹

修复

修复1（核心）— useTemplateSelection.ts

用 useMemo 缓存 validTemplates，仅在 allTemplates 变化时重新计算，稳定下游引用：

const validTemplates = useMemo(() => allTemplates.filter(isValidTemplate), [allTemplates])

修复2（防御性）— useTitleCoverSync.ts

用 useRef 持有最新 userTemplates，从 effect 依赖数组移除，effect 只在 selectedTemplate 真正变化时触发：

const templatesRef = useRef(userTemplates)
templatesRef.current = userTemplates

useEffect(() => {
  const tpl = templatesRef.current.find((t) => t.id === selectedTemplate)
  // ...
}, [selectedTemplate, setTitleSettings, setCoverSettings])
// ↑ 移除 userTemplates

验收标准

• 拖动字号滑块从 12→128，slider 值不回弹，预览标题大小实时变化
• 切换模板时，标题样式仍能从模板 title_config 正确同步（不回归）
• 样式按钮（粗体/斜体/描边/阴影）切换即时生效
• CI 全绿

## 问题 拖动标题字号滑块时，值被自动回弹到模板默认值（如 28px），无法停留在用户选择的位置。 ## 根因 `useTitleCoverSync` 的 useEffect 依赖了 `userTemplates`（每次渲染 `.filter()` 生成新数组引用），导致： ``` 用户拖滑块 → setState → 组件重渲染 → allTemplates.filter() 新引用 → useTitleCoverSync effect 触发 → 从模板 title_config.font_size 覆盖 → slider 回弹 ``` ## 修复 ### 修复1（核心）— `useTemplateSelection.ts` 用 `useMemo` 缓存 `validTemplates`，仅在 `allTemplates` 变化时重新计算，稳定下游引用： ```ts const validTemplates = useMemo(() => allTemplates.filter(isValidTemplate), [allTemplates]) ``` ### 修复2（防御性）— `useTitleCoverSync.ts` 用 `useRef` 持有最新 `userTemplates`，从 effect 依赖数组移除，effect 只在 `selectedTemplate` 真正变化时触发： ```ts const templatesRef = useRef(userTemplates) templatesRef.current = userTemplates useEffect(() => { const tpl = templatesRef.current.find((t) => t.id === selectedTemplate) // ... }, [selectedTemplate, setTitleSettings, setCoverSettings]) // ↑ 移除 userTemplates ``` ## 验收标准 - [ ] 拖动字号滑块从 12→128，slider 值不回弹，预览标题大小实时变化 - [ ] 切换模板时，标题样式仍能从模板 title_config 正确同步（不回归） - [ ] 样式按钮（粗体/斜体/描边/阴影）切换即时生效 - [ ] CI 全绿

xiaoxia added 1 commit 2026-09-08 13:23:38 +08:00

fix: #1789 标题字号滑块拖动回弹 — useMemo 稳定引用 + ref 防御 ... c61bead0e0

根因：useTitleCoverSync 的 useEffect 依赖 userTemplates（每次渲染
.filter() 生成新数组引用），导致：
  用户拖滑块 → setState → 重渲染 → 新数组引用 → effect 触发 →
  从模板 title_config.font_size 覆盖回去 → slider 回弹

修复1（核心）：useTemplateSelection.ts 用 useMemo 缓存 validTemplates，
  仅在 allTemplates 变化时重新计算，稳定下游引用。
修复2（防御性）：useTitleCoverSync.ts 用 ref 持有 userTemplates，
  从依赖数组移除，effect 只在 selectedTemplate 真正变化时触发。

gitea-actions bot commented 2026-09-08 13:25:32 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-09-08 13:25:34 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-08 13:25:34 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit 6904fce511 into develop 2026-09-08 13:28:51 +08:00

gitea-actions bot commented 2026-09-08 13:29:08 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this pull request 2026-09-08 14:27:22 +08:00

AI数字人口播短视频功能 #1794

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

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#1793