refactor(PipConfigPanel): 混剪配置面板目录化拆分（547→106行, -81%） #1192

Merged

auto-approve-bot merged 35 commits from refactor/pip-config-panel-split into develop 2026-07-30 12:13:47 +08:00

Conversation 5 Commits 35 Files Changed 11

+630 -17

xiaoxia commented 2026-07-30 09:10:29 +08:00

Owner

Copy Link

Copy Source

变更内容

混剪配置面板组件目录化拆分，降低单文件复杂度：

新增文件

• PipConfigPanel/index.tsx - 主组件（106行，组合层）
• PipConfigPanel/constants.ts - 常量（九宫格映射、动画选项、颜色池、ID生成）
• PipConfigPanel/hooks/usePipConfigPanel.ts - 核心逻辑Hook（图层增删改查、九宫格、宽高比锁定）
• PipConfigPanel/components/LayerList.tsx - 左侧图层列表
• PipConfigPanel/components/PipPreview.tsx - 迷你预览区
• PipConfigPanel/components/LayerConfig.tsx - 右侧图层配置面板（素材/位置/尺寸/圆角/透明度/时间/动画）

删除文件

• PipConfigPanel.tsx - 旧单文件（547行，已目录化替代）

变更说明

• 主组件从 547行 → 106行，减少81%
• 保持原有功能和props接口完全不变
• 导入路径保持向后兼容
• 逻辑分层清晰：Hook层处理状态逻辑，组件层负责UI渲染

## 变更内容 混剪配置面板组件目录化拆分，降低单文件复杂度： ### 新增文件 - `PipConfigPanel/index.tsx` - 主组件（106行，组合层） - `PipConfigPanel/constants.ts` - 常量（九宫格映射、动画选项、颜色池、ID生成） - `PipConfigPanel/hooks/usePipConfigPanel.ts` - 核心逻辑Hook（图层增删改查、九宫格、宽高比锁定） - `PipConfigPanel/components/LayerList.tsx` - 左侧图层列表 - `PipConfigPanel/components/PipPreview.tsx` - 迷你预览区 - `PipConfigPanel/components/LayerConfig.tsx` - 右侧图层配置面板（素材/位置/尺寸/圆角/透明度/时间/动画） ### 删除文件 - `PipConfigPanel.tsx` - 旧单文件（547行，已目录化替代） ### 变更说明 - 主组件从 547行 → 106行，减少81% - 保持原有功能和props接口完全不变 - 导入路径保持向后兼容 - 逻辑分层清晰：Hook层处理状态逻辑，组件层负责UI渲染

xiaoxia added 7 commits 2026-07-30 09:10:30 +08:00

refactor(PipConfigPanel): 提取常量和工具函数 291291a1de

refactor(PipConfigPanel): 提取核心逻辑Hook 4d92df05a4

refactor(PipConfigPanel): 提取图层列表组件 14c75f33ac

refactor(PipConfigPanel): 提取预览区组件 a6aa59a5ea

refactor(PipConfigPanel): 提取图层配置面板 f92bfcfec6

refactor(PipConfigPanel): 目录化主组件 f46cf18ae1

refactor(PipConfigPanel): 删除旧单文件（已目录化） cddaf0249c

xiaoxia added 1 commit 2026-07-30 09:22:25 +08:00

fix: correct types import path bfa5c89cbb

xiaoxia added 1 commit 2026-07-30 09:22:25 +08:00

fix: correct types import path 59f23c55df

xiaoxia added 1 commit 2026-07-30 09:22:31 +08:00

fix: correct types import path ea957cc0e2

xiaoxia added 1 commit 2026-07-30 09:22:34 +08:00

fix: correct types import path e74c23e160

xiaoxia added 1 commit 2026-07-30 09:22:37 +08:00

fix: correct types import path 535f5accf7

xiaoxia added 1 commit 2026-07-30 09:22:38 +08:00

fix: correct types import path fec949f0fb

xiaoxia added 1 commit 2026-07-30 09:24:42 +08:00

test: add smoke test 299cd48849

xiaoxia added 1 commit 2026-07-30 09:24:43 +08:00

test: add smoke test 5baac982ae

xiaoxia added 1 commit 2026-07-30 09:24:44 +08:00

test: add smoke test 42718898d5

xiaoxia added 1 commit 2026-07-30 09:24:46 +08:00

test: add smoke test c71cd5eb3e

xiaoxia added 1 commit 2026-07-30 09:24:49 +08:00

test: add smoke test 5e7134c3ff

xiaoxia added 1 commit 2026-07-30 09:47:34 +08:00

fix: correct aspect ratio lock logic 563ad349a5

xiaoxia added 1 commit 2026-07-30 09:47:55 +08:00

fix: add zIndex to PipPreview layers 279d4ee32f

xiaoxia added 1 commit 2026-07-30 09:48:44 +08:00

fix: add zIndex to PipPreview and restore content 4d6b514990

xiaoxia added 1 commit 2026-07-30 10:03:33 +08:00

fix: remove semicolons to match prettier config 5796d6cf24

xiaoxia added 1 commit 2026-07-30 10:03:34 +08:00

fix: remove semicolons to match prettier config cc4ed56066

xiaoxia added 1 commit 2026-07-30 10:18:29 +08:00

fix: prettier formatting (param wrapping, arrow function style) ea192e40b5

xiaoxia added 1 commit 2026-07-30 10:18:30 +08:00

fix: prettier formatting (param wrapping) fd64c4bf51

xiaoxia added 1 commit 2026-07-30 10:30:59 +08:00

fix: 宽高比锁定除零防护+越界钳制 dfc1c3c793

xiaoxia added 1 commit 2026-07-30 10:31:00 +08:00

fix: X/Y输入框NaN防护 a6319712b5

xiaoxia added 1 commit 2026-07-30 10:36:24 +08:00

fix: Prettier格式化 549bbb3c76

xiaoxia added 1 commit 2026-07-30 10:36:25 +08:00

fix: Prettier格式化 8f335736ed

xiaoxia added 1 commit 2026-07-30 10:36:28 +08:00

fix: Prettier格式化 3221c170e9

xiaoxia added 1 commit 2026-07-30 10:48:45 +08:00

fix: 所有数值输入框添加NaN校验(width/height/border_radius/opacity/start_time/duration) b645e9ceea

xiaoxia added 1 commit 2026-07-30 11:25:08 +08:00

fix: 坐标输入增加负数校验(val>=0) ea6baf274c

xiaoxia added 1 commit 2026-07-30 11:25:08 +08:00

fix: 图片src空字符串防御(||undefined) bc3f107d3d

xiaoxia added 1 commit 2026-07-30 11:55:18 +08:00

fix: 移除重复的PipConfigPanelProps导出（与interface声明冲突） d21e8a2b8d

gitea-actions bot commented 2026-07-30 11:58:02 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-07-30 12:02:07 +08:00

fix: 坐标上限100+时间范围totalDuration校验（AI Review阻塞问题） df31e3c37f

auto-approve-bot commented 2026-07-30 12:05:24 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

• 是否存在阻塞级问题：否
• 阻塞级问题数量：0 个

📊 审查概览

• 整体评价：通过
• 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

无

💡 改进建议（不阻塞合并）

1. [usePipConfigPanel.ts: 79] handleReset 函数中的数据引用问题

   • 具体内容：在 handleReset 中调用 onChange({ ...DEFAULT_PIP_CONFIG })。虽然这创建了一个新的 config 对象引用，但其中的 layers 属性仍然引用了 DEFAULT_PIP_CONFIG 中定义的原始数组。如果父组件通过 useEffect 依赖 config.layers 的引用变化来触发副作用，重置操作可能无法触发该副作用。
   • 修改建议：建议显式创建一个新的数组引用，例如 onChange({ ...DEFAULT_PIP_CONFIG, layers: [] }) 或者在常量定义时确保结构独立性。

2. [LayerList.tsx: 39] 图片 URL 安全性校验

   • 具体内容：代码直接将 layer.material_url 赋值给 <img src={...}>。虽然现代浏览器在 img 标签中阻止 javascript: 协议执行，但允许 data: 或其他可能导致信息泄露的协议。为了增强安全性，建议在前端对 URL 进行简单的格式校验（如限制以 http:// 或 https:// 开头），防止用户输入恶意伪协议。
   • 修改建议：在渲染前增加 URL 协议白名单校验，过滤非 http/https 开头的链接。

✅ 良好实践

• 类型安全：代码中广泛使用了 TypeScript 类型定义和断言（如 as PipAnimType），并在 LayerConfig 中对输入进行了数值范围校验（如 val >= 0 && val <= 100），有效防止了非法数据的提交。
• 防抖与状态管理：usePipConfigPanel hook 封装了复杂的图层逻辑，使用了 useCallback 和 useMemo 来优化性能和子组件渲染，结构清晰。
• 宽高比锁定逻辑：在 handleWidthChange 和 handleHeightChange 中正确处理了宽高比锁定的数学计算，并考虑了边界值（MIN_DIMENSION, MAX_DIMENSION），逻辑严谨。
• 空状态处理：LayerList 和 PipConfigPanel 主组件均正确处理了无图层或未选中图层时的空状态显示，用户体验良好。

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 04:05:23 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[usePipConfigPanel.ts: 79] handleReset 函数中的数据引用问题** - 具体内容：在 `handleReset` 中调用 `onChange({ ...DEFAULT_PIP_CONFIG })`。虽然这创建了一个新的 `config` 对象引用，但其中的 `layers` 属性仍然引用了 `DEFAULT_PIP_CONFIG` 中定义的原始数组。如果父组件通过 `useEffect` 依赖 `config.layers` 的引用变化来触发副作用，重置操作可能无法触发该副作用。 - 修改建议：建议显式创建一个新的数组引用，例如 `onChange({ ...DEFAULT_PIP_CONFIG, layers: [] })` 或者在常量定义时确保结构独立性。 2. **[LayerList.tsx: 39] 图片 URL 安全性校验** - 具体内容：代码直接将 `layer.material_url` 赋值给 `<img src={...}>`。虽然现代浏览器在 `img` 标签中阻止 `javascript:` 协议执行，但允许 `data:` 或其他可能导致信息泄露的协议。为了增强安全性，建议在前端对 URL 进行简单的格式校验（如限制以 `http://` 或 `https://` 开头），防止用户输入恶意伪协议。 - 修改建议：在渲染前增加 URL 协议白名单校验，过滤非 `http/https` 开头的链接。 ### ✅ 良好实践 - **类型安全**：代码中广泛使用了 TypeScript 类型定义和断言（如 `as PipAnimType`），并在 `LayerConfig` 中对输入进行了数值范围校验（如 `val >= 0 && val <= 100`），有效防止了非法数据的提交。 - **防抖与状态管理**：`usePipConfigPanel` hook 封装了复杂的图层逻辑，使用了 `useCallback` 和 `useMemo` 来优化性能和子组件渲染，结构清晰。 - **宽高比锁定逻辑**：在 `handleWidthChange` 和 `handleHeightChange` 中正确处理了宽高比锁定的数学计算，并考虑了边界值（`MIN_DIMENSION`, `MAX_DIMENSION`），逻辑严谨。 - **空状态处理**：`LayerList` 和 `PipConfigPanel` 主组件均正确处理了无图层或未选中图层时的空状态显示，用户体验良好。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 04:05:23 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-07-30 12:05:58 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-30 12:05:58 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit 44e6c8e10f into develop 2026-07-30 12:13:47 +08:00

auto-approve-bot deleted branch refactor/pip-config-panel-split 2026-07-30 12:13:47 +08:00

gitea-actions bot commented 2026-07-30 12:14:10 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

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 xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1192