refactor(asset-selector): 三阶段重构 AssetSelector（504→168行, -67%） #937

Merged

auto-approve-bot merged 2 commits from refactor/asset-selector into develop 2026-07-28 01:02:51 +08:00

Conversation 7 Commits 2 Files Changed 17

+777 -447

xiaoxia commented 2026-07-26 16:23:34 +08:00

Owner

Copy Link

Copy Source

变更说明

AssetSelector 公共组件三阶段重构，主文件 504 行 → 168 行（-67%）。

Phase 1：抽类型/常量/工具

• types/index.ts — AssetSelectorProps, ViewMode
• constants.ts — TYPE_OPTIONS 类型筛选选项
• utils/index.ts — formatSize, formatDuration, getQualityLevel, getQualityColor

Phase 2：拆 UI 组件（6个）

• SelectorToolbar.tsx — 搜索 + 类型/质量筛选 + 视图切换
• SelectorBatchBar.tsx — 批量操作栏
• AssetCard.tsx — 网格卡片（缩略图/角标/checkbox）
• AssetListItem.tsx — 列表项
• PreviewOverlay.tsx — 悬浮预览浮层
• EmptyState.tsx — 空状态

Phase 3：抽业务 Hook（4个）

• useAssetFilter — 搜索 + 类型/质量分筛选 + 视图切换
• useAssetSelection — 单选/多选/Shift 连选
• useDragReorder — HTML5 DnD 拖拽排序 + 批量数据携带
• useAssetPreview — 悬浮延迟预览

其他

• 更新 index.ts 导出 AssetSelectorProps / ViewMode 类型

验收标准

• Prettier 格式化通过
• ESLint 通过（CI 验证）
• TSC 编译通过（CI 验证）
• 功能回归：选择/拖拽/筛选/预览正常

## 变更说明 AssetSelector 公共组件三阶段重构，主文件 504 行 → 168 行（-67%）。 ### Phase 1：抽类型/常量/工具 - `types/index.ts` — AssetSelectorProps, ViewMode - `constants.ts` — TYPE_OPTIONS 类型筛选选项 - `utils/index.ts` — formatSize, formatDuration, getQualityLevel, getQualityColor ### Phase 2：拆 UI 组件（6个） - `SelectorToolbar.tsx` — 搜索 + 类型/质量筛选 + 视图切换 - `SelectorBatchBar.tsx` — 批量操作栏 - `AssetCard.tsx` — 网格卡片（缩略图/角标/checkbox） - `AssetListItem.tsx` — 列表项 - `PreviewOverlay.tsx` — 悬浮预览浮层 - `EmptyState.tsx` — 空状态 ### Phase 3：抽业务 Hook（4个） - `useAssetFilter` — 搜索 + 类型/质量分筛选 + 视图切换 - `useAssetSelection` — 单选/多选/Shift 连选 - `useDragReorder` — HTML5 DnD 拖拽排序 + 批量数据携带 - `useAssetPreview` — 悬浮延迟预览 ### 其他 - 更新 `index.ts` 导出 AssetSelectorProps / ViewMode 类型 ## 验收标准 - [x] Prettier 格式化通过 - [ ] ESLint 通过（CI 验证） - [ ] TSC 编译通过（CI 验证） - [ ] 功能回归：选择/拖拽/筛选/预览正常

gitea-actions bot commented 2026-07-27 21:27:38 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-07-27 21:45:28 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-27 21:45:28 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot commented 2026-07-27 22:12:18 +08:00

Collaborator

Copy Link

Copy Source

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

xiaoxia added 1 commit 2026-07-28 00:37:53 +08:00

refactor(asset-selector): 三阶段重构 AssetSelector（504→168行, -67%） ... 04e8586f91

Phase 1: 抽 types/constants/utils
- types/index.ts — AssetSelectorProps, ViewMode
- constants.ts — TYPE_OPTIONS
- utils/index.ts — formatSize, formatDuration, getQualityLevel, getQualityColor

Phase 2: 拆 6 个 UI 组件
- SelectorToolbar — 搜索 + 类型/质量筛选 + 视图切换
- SelectorBatchBar — 批量操作栏
- AssetCard — 网格卡片（缩略图/角标/checkbox）
- AssetListItem — 列表项
- PreviewOverlay — 悬浮预览浮层
- EmptyState — 空状态

Phase 3: 抽 4 个业务 Hook
- useAssetFilter — 搜索 + 类型/质量分筛选 + 视图切换
- useAssetSelection — 单选/多选/Shift 连选
- useDragReorder — HTML5 DnD 拖拽排序 + 批量数据携带
- useAssetPreview — 悬浮延迟预览

同步更新 index.ts 导出类型

xiaoxia force-pushed refactor/asset-selector from 743877635d to 04e8586f91 2026-07-28 00:37:53 +08:00 Compare

xiaoxia added 1 commit 2026-07-28 00:57:13 +08:00

fix: 修复路径错误与类型问题 80339064dd

auto-approve-bot commented 2026-07-28 01:00:08 +08:00

Collaborator

Copy Link

Copy Source

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

auto-approve-bot commented 2026-07-28 01:01:27 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [apps/web/src/components/asset-selector/AssetCard.tsx] 未使用的 Props

   • 具体内容：AssetCard 组件定义了 compact?: boolean 属性，且在 AssetSelector.tsx 中传递了该属性，但在组件内部并未实际使用（未应用到 className 或样式逻辑中）。建议从 AssetCardProps 接口和组件解构中移除该属性，保持代码整洁。

2. [apps/web/src/components/asset-selector/AssetCard.tsx & AssetListItem.tsx] 性能优化建议

   • 具体内容：AssetCard 和 AssetListItem 是在列表中高频渲染的组件。当前代码未使用 React.memo 包裹。在 AssetSelector 中，当 dragOverIdx 或其他共享状态变化时，会导致整个列表重新渲染。建议使用 React.memo 包裹这两个子组件，避免不必要的重绘，提升拖拽和交互时的性能。

✅ 良好实践

• 组件拆分粒度合理，将工具栏、预览层、列表项等拆分为独立组件，提高了代码的可维护性。
• 复杂逻辑（筛选、选择、拖拽、预览）正确提取为自定义 Hooks，逻辑分层清晰。
• 事件处理中正确使用了 e.stopPropagation() 防止事件冒泡（如 Checkbox 点击）。
• 使用了 loading="lazy" 优化图片加载性能。

---

✅ 格式检查通过 | ✅ 逻辑审查需修改 | ⚠️ 建议关注性能

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/components/asset-selector/AssetCard.tsx] 未使用的 Props** - 具体内容：`AssetCard` 组件定义了 `compact?: boolean` 属性，且在 `AssetSelector.tsx` 中传递了该属性，但在组件内部并未实际使用（未应用到 className 或样式逻辑中）。建议从 `AssetCardProps` 接口和组件解构中移除该属性，保持代码整洁。 2. **[apps/web/src/components/asset-selector/AssetCard.tsx & AssetListItem.tsx] 性能优化建议** - 具体内容：`AssetCard` 和 `AssetListItem` 是在列表中高频渲染的组件。当前代码未使用 `React.memo` 包裹。在 `AssetSelector` 中，当 `dragOverIdx` 或其他共享状态变化时，会导致整个列表重新渲染。建议使用 `React.memo` 包裹这两个子组件，避免不必要的重绘，提升拖拽和交互时的性能。 ### ✅ 良好实践 - 组件拆分粒度合理，将工具栏、预览层、列表项等拆分为独立组件，提高了代码的可维护性。 - 复杂逻辑（筛选、选择、拖拽、预览）正确提取为自定义 Hooks，逻辑分层清晰。 - 事件处理中正确使用了 `e.stopPropagation()` 防止事件冒泡（如 Checkbox 点击）。 - 使用了 `loading="lazy"` 优化图片加载性能。 --- ✅ 格式检查通过 | ✅ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 17:01:26 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit 4578b65965 into develop 2026-07-28 01:02:51 +08:00

auto-approve-bot deleted branch refactor/asset-selector 2026-07-28 01:02:51 +08:00

gitea-actions bot commented 2026-07-28 01:03:32 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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