refactor(StickerPanel): 贴纸面板目录化拆分（516→103行, -80%） #1191

Merged

auto-approve-bot merged 37 commits from refactor/sticker-panel-split into develop 2026-07-30 12:16:12 +08:00

Conversation 5 Commits 37 Files Changed 11

+626 -24

xiaoxia commented 2026-07-30 09:06:58 +08:00

Owner

Copy Link

Copy Source

变更内容

贴纸面板组件目录化拆分，降低单文件复杂度：

新增文件

• StickerPanel/index.tsx - 主组件（103行，组合层）
• StickerPanel/constants.ts - 常量（EMOJI列表、文字预设、ID生成）
• StickerPanel/hooks/useStickerPanel.ts - 核心逻辑Hook（状态管理+增删改操作）
• StickerPanel/components/StickerTabs.tsx - Tab选择器+各类型贴纸添加区
• StickerPanel/components/StickerList.tsx - 已添加贴纸列表
• StickerPanel/components/StickerPropsEditor.tsx - 属性调整面板（位置/大小/旋转/透明度/时间/文字属性/预览）

删除文件

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

变更说明

• 主组件从 516行 → 103行，减少80%
• 保持原有功能和props接口完全不变
• 导入路径保持向后兼容（import StickerPanel from ./StickerPanel）
• 逻辑分层清晰：Hook层处理状态逻辑，组件层负责UI渲染

## 变更内容 贴纸面板组件目录化拆分，降低单文件复杂度： ### 新增文件 - `StickerPanel/index.tsx` - 主组件（103行，组合层） - `StickerPanel/constants.ts` - 常量（EMOJI列表、文字预设、ID生成） - `StickerPanel/hooks/useStickerPanel.ts` - 核心逻辑Hook（状态管理+增删改操作） - `StickerPanel/components/StickerTabs.tsx` - Tab选择器+各类型贴纸添加区 - `StickerPanel/components/StickerList.tsx` - 已添加贴纸列表 - `StickerPanel/components/StickerPropsEditor.tsx` - 属性调整面板（位置/大小/旋转/透明度/时间/文字属性/预览） ### 删除文件 - `StickerPanel.tsx` - 旧单文件（516行，已目录化替代） ### 变更说明 - 主组件从 516行 → 103行，减少80% - 保持原有功能和props接口完全不变 - 导入路径保持向后兼容（`import StickerPanel from ./StickerPanel`） - 逻辑分层清晰：Hook层处理状态逻辑，组件层负责UI渲染

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

refactor(StickerPanel): 提取常量和工具函数 2ad97b5e3f

refactor(StickerPanel): 提取核心逻辑Hook f820d54b23

refactor(StickerPanel): 提取Tab选择器组件 2e316e6b4b

refactor(StickerPanel): 提取贴纸列表组件 0f8f27d844

refactor(StickerPanel): 提取属性编辑面板组件 532f5fcdfd

refactor(StickerPanel): 目录化主组件 201984c328

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

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

fix(StickerPanel): 移除未使用的TextStickerPreset导入 ec85ec806c

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

fix(StickerPanel): 同步主组件与本地版本一致 1c310c6e3c

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

fix: correct types import path 0583709690

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

fix: correct types import path 1c423affea

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

fix: correct types import path e6ad55a47a

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

fix: correct types import path e8f47c23d6

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

fix: correct types import path 94b4ff74d0

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

fix: correct types import path e6017ba93c

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

test: add smoke test a0382a78f6

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

test: add smoke test ed9fde5c17

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

test: add smoke test bd9eee5a5e

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

test: add smoke test 6a253d4cdd

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

test: add smoke test 31b3aacadf

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

fix: remove unused handleReset e14874d11d

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

fix: replace document.querySelector with useState for image url input 585f26072f

xiaoxia added 1 commit 2026-07-30 09:56:05 +08:00

fix: replace document.querySelector with useState for image URL input 33add38616

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

fix: remove semicolons to match prettier config (semi: false) d7be0562a9

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

fix: correct types import path (missing ../ level for components/ subdir) 9899aa45e2

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

fix: prettier formatting + trailing newline affdf48680

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

fix: Prettier格式化 7fed595950

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

fix: Prettier格式化 f7634ba928

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

fix: Prettier格式化 89318fc6bb

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

fix: Prettier格式化 9b5938e1b9

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

fix: 导入CSSProperties类型替换React.CSSProperties(避免TS编译错误) ff583d4014

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

fix: TEXT_PRESET_STYLES type改为Partial以匹配实际预设数量 fff7b0e081

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

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

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

fix: 贴纸时间输入增加NaN校验和范围边界校验（AI Review阻塞问题） 94ece7cd16

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

fix: 修正TEXT_PRESET_STYLES为正确的8个预设（与TextStickerPreset类型匹配） 7627d8b4d6

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

fix: z_index改用Math.max计算避免删除后新增重复（AI Review阻塞问题） b1d448a627

auto-approve-bot approved these changes 2026-07-30 12:13:06 +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:13:06 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-07-30 12:13:42 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot commented 2026-07-30 12:15:26 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [StickerPropsEditor.tsx: 195] 类型安全与代码逻辑

   • 具体内容：在预览区域的 style 属性中直接使用了 ...TEXT_PRESET_STYLES[sticker.text_preset]。如果 sticker.type 为 "image" 或 "emoji"，访问 text_preset 属性在类型定义上可能不合法（取决于 StickerItem 的类型定义是否为联合类型）。虽然运行时可能返回 undefined 且不影响渲染，但建议将此样式展开逻辑移至 sticker.type === "text" 的判断块内，或确保类型安全。

2. [StickerTabs.tsx: 41] 输入校验增强

   • 具体内容：handleImageAdd 函数直接使用 imageUrl.trim() 作为图片源。建议添加简单的 URL 格式校验（例如正则校验 ^https?:// 或 ^data:image/），防止用户输入无效字符串导致后续渲染出现破损图片图标。

3. [StickerPropsEditor.tsx: 201] 图片加载错误处理

   • 具体内容：预览区域的 <img> 标签仅设置了 src，未处理图片加载失败的情况。建议添加 onError 事件处理（例如隐藏图片或显示占位符），以提升用户在输入错误 URL 时的体验。

✅ 良好实践

• 使用了 useCallback 和 useMemo 优化 Hook 性能，避免不必要的子组件渲染。
• StickerList 组件中正确使用了 e.stopPropagation() 防止删除按钮点击事件冒泡触发选中逻辑。
• genStickerId 结合时间戳和随机数，有效降低了 ID 冲突概率。
• useStickerPanel 中的 z_index 计算逻辑正确处理了空数组边界情况。

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：3 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[StickerPropsEditor.tsx: 195] 类型安全与代码逻辑** - 具体内容：在预览区域的 `style` 属性中直接使用了 `...TEXT_PRESET_STYLES[sticker.text_preset]`。如果 `sticker.type` 为 "image" 或 "emoji"，访问 `text_preset` 属性在类型定义上可能不合法（取决于 `StickerItem` 的类型定义是否为联合类型）。虽然运行时可能返回 `undefined` 且不影响渲染，但建议将此样式展开逻辑移至 `sticker.type === "text"` 的判断块内，或确保类型安全。 2. **[StickerTabs.tsx: 41] 输入校验增强** - 具体内容：`handleImageAdd` 函数直接使用 `imageUrl.trim()` 作为图片源。建议添加简单的 URL 格式校验（例如正则校验 `^https?://` 或 `^data:image/`），防止用户输入无效字符串导致后续渲染出现破损图片图标。 3. **[StickerPropsEditor.tsx: 201] 图片加载错误处理** - 具体内容：预览区域的 `<img>` 标签仅设置了 `src`，未处理图片加载失败的情况。建议添加 `onError` 事件处理（例如隐藏图片或显示占位符），以提升用户在输入错误 URL 时的体验。 ### ✅ 良好实践 - 使用了 `useCallback` 和 `useMemo` 优化 Hook 性能，避免不必要的子组件渲染。 - `StickerList` 组件中正确使用了 `e.stopPropagation()` 防止删除按钮点击事件冒泡触发选中逻辑。 - `genStickerId` 结合时间戳和随机数，有效降低了 ID 冲突概率。 - `useStickerPanel` 中的 `z_index` 计算逻辑正确处理了空数组边界情况。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 04:15:26 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit 223bb530dd into develop 2026-07-30 12:16:12 +08:00

auto-approve-bot deleted branch refactor/sticker-panel-split 2026-07-30 12:16:12 +08:00

gitea-actions bot commented 2026-07-30 12:16:23 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1191 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1191