5.7 KiB

Raw Permalink Blame History

项目与素材库联动功能实现总结

🎯 实现目标

成功实现了项目面板与素材库面板的深度联动功能，用户可以在项目面板中右键点击"展开素材"，自动切换到素材库面板并显示该项目的素材。

✨ 核心功能

1. 项目右键菜单增强

✅ 在项目右键菜单中添加了"展开素材"选项
✅ 点击后自动切换到素材库面板
✅ 传递项目ID和项目名称信息

2. 智能面板切换

✅ 自动切换左侧面板到"素材库"标签
✅ 如果侧边栏收起，自动展开
✅ 无缝的用户体验

3. 智能搜索框联动

✅ 自动填入选择的项目名称
✅ 自动选择对应的项目ID
✅ 清空之前的搜索状态

4. 资源面板响应

✅ 自动加载选中项目的素材
✅ 清空之前选中的资源
✅ 更新搜索和过滤状态

🏗️ 技术实现

1. 状态管理升级 (UIStore)

// 新增联动方法
switchToLibraryWithProject: (projectId: string, projectName: string) => {
  set({ leftPanelActiveTab: "library" });
  // 确保左侧边栏展开
  if (get().leftSidebarCollapsed) {
    set({ leftSidebarCollapsed: false });
  }
  // 触发项目选择事件
  window.dispatchEvent(
    new CustomEvent("selectProjectInLibrary", {
      detail: { projectId, projectName },
    })
  );
};

2. 项目右键菜单升级

// 新增展开素材功能
<DropdownMenuItem onClick={handleShowResources}>
  <ImageIcon className="mr-2 h-4 w-4" />
  展开素材
</DropdownMenuItem>

3. 事件驱动通信

使用自定义事件 selectProjectInLibrary 实现组件间通信：

发送方：UIStore 的 switchToLibraryWithProject 方法
接收方：ResourcePanel 和 SmartSearchInput 组件

4. 响应式监听

// ResourcePanel 和 SmartSearchInput 中的事件监听
useEffect(() => {
  const handleSelectProjectInLibrary = (event: CustomEvent) => {
    const { projectId, projectName } = event.detail;
    // 更新状态和UI
  };

  window.addEventListener(
    "selectProjectInLibrary",
    handleSelectProjectInLibrary
  );
  return () => {
    window.removeEventListener(
      "selectProjectInLibrary",
      handleSelectProjectInLibrary
    );
  };
}, []);

📁 修改的文件

1. 状态管理

client/src/stores/uiStore.ts
- 添加 switchToLibraryWithProject 方法
- 实现面板切换和事件触发逻辑

2. 项目面板

client/src/components/layout/LeftSidebar.tsx
- 升级 ProjectContextMenu 组件
- 添加"展开素材"菜单项
- 传递项目信息给右键菜单
- 修复 Tailwind CSS 类名警告

3. 素材库面板

client/src/components/features/resource/ResourcePanel.tsx
- 添加事件监听器
- 响应项目选择事件
- 自动更新项目和搜索状态

4. 智能搜索框

client/src/components/features/resource/SmartSearchInput.tsx
- 添加事件监听器
- 自动填入项目名称
- 触发项目选择回调

5. 演示组件

client/src/components/features/project/ProjectResourceLinkDemo.tsx
- 创建联动功能演示组件
- 展示完整的交互流程

🔄 用户交互流程

1. 用户在项目面板中找到目标项目
   ↓
2. 右键点击项目，显示上下文菜单
   ↓
3. 点击"展开素材"菜单项
   ↓
4. 系统自动执行以下操作：
   - 切换到素材库面板
   - 展开左侧边栏（如果收起）
   - 在智能搜索框中填入项目名称
   - 自动选择该项目
   - 加载项目相关素材
   ↓
5. 用户可以立即查看和管理该项目的素材

🎨 用户体验优化

1. 视觉反馈

菜单项使用图片图标，直观表示素材功能
面板切换动画流畅自然
搜索框状态变化清晰可见

2. 交互优化

一键操作完成复杂的面板切换
保持用户操作的连续性
减少用户的认知负担

3. 状态管理

智能清理相关状态
避免状态冲突和数据不一致
保持界面响应性

🚀 技术优势

1. 松耦合设计

使用事件驱动模式，组件间解耦
易于扩展和维护
不影响现有功能

2. 性能优化

事件监听器正确清理，避免内存泄漏
状态更新最小化，减少不必要的重渲染
异步操作不阻塞UI

3. 类型安全

完整的 TypeScript 类型定义
事件数据结构明确
编译时错误检查

🔍 使用示例

基础使用

// 在任何组件中触发联动
const { switchToLibraryWithProject } = useUIStore();

const handleShowProjectResources = () => {
  switchToLibraryWithProject("project-123", "西游记之大圣归来");
};

监听联动事件

// 在需要响应的组件中
useEffect(() => {
  const handleSelectProjectInLibrary = (event: CustomEvent) => {
    const { projectId, projectName } = event.detail;
    // 处理项目选择
  };

  window.addEventListener(
    "selectProjectInLibrary",
    handleSelectProjectInLibrary
  );
  return () => {
    window.removeEventListener(
      "selectProjectInLibrary",
      handleSelectProjectInLibrary
    );
  };
}, []);

🎉 最终效果

成功实现了项目面板与素材库面板的深度联动：

操作简化: 一键从项目跳转到素材管理
体验流畅: 自动面板切换和状态同步
信息传递: 项目名称自动填入搜索框
状态一致: 所有相关组件状态同步更新

这个实现大大提升了用户在项目和素材之间切换的效率，提供了更加一体化的工作流体验。用户不再需要手动切换面板、搜索项目，而是可以直接从项目上下文快速访问相关素材，极大地提升了工作效率。

5.7 KiB Raw Permalink Blame History