3.1 KiB

Raw Permalink Blame History

RFC 125: 修复缺失的类型导出

元数据

状态: 已修复
创建日期: 2026-01-21
类型: Bug 修复

问题描述

在实现文件夹分类系统后，前端应用启动时报错：

SyntaxError: The requested module '/src/types/index.ts' does not provide an export named 'treeNodeColorClasses'

根本原因

多个组件（ProjectTreeNode, ProjectSelector, ProjectSearchDropdown, ProjectSmartSearchInput, FolderTree）依赖以下导出：

TreeNode 接口
treeNodeColorClasses 常量

但这些导出在类型定义文件中缺失。

受影响的文件

// 以下文件都尝试导入缺失的类型或使用旧常量
- client/src/components/features/project/ProjectTreeNode.tsx
- client/src/components/features/project/ProjectSelector.tsx
- client/src/components/features/project/ProjectSearchDropdown.tsx
- client/src/components/features/project/ProjectSmartSearchInput.tsx
- client/src/components/features/project/FolderTree.tsx
- client/src/components/features/project/ProjectSidebar.tsx (使用旧的 ROOT_ID_*)

解决方案

步骤 1: 在 `client/src/types/project-view.ts` 中添加缺失的类型定义

1. TreeNode 接口

export interface TreeNode {
  id: string;
  name: string;
  type: 'folder' | 'project';
  color?: string;
  icon?: string;
  children?: TreeNode[];
  parentId?: string;
  level?: number;
}

2. treeNodeColorClasses 常量

export const treeNodeColorClasses: Record<string, string> = {
  yellow: 'text-yellow-500',
  blue: 'text-blue-500',
  green: 'text-green-500',
  purple: 'text-purple-500',
  red: 'text-red-500',
  orange: 'text-orange-500',
  pink: 'text-pink-500',
  indigo: 'text-indigo-500',
  teal: 'text-teal-500',
  cyan: 'text-cyan-500',
};

步骤 2: 在 `client/src/types/index.ts` 中添加导出

关键修复：必须从 index.ts 重新导出 project-view.ts：

// 重新导出所有类型
export * from './project';
export * from './project-view';  // ← 添加这一行
export * from './folder';
export * from './storyboard';
// ... 其他导出

步骤 3: 更新 ProjectSidebar 使用新的虚拟根常量

// 旧代码
import { ROOT_ID_MINE, ROOT_ID_COLLAB } from '@/types/project-view';
onClick={() => onRootChange(ROOT_ID_MINE)}

// 新代码
import { VIRTUAL_ROOTS } from '@/types/folder';
onClick={() => onRootChange(VIRTUAL_ROOTS.mine.id)}

步骤 4: 清除 Vite 缓存

rm -rf client/node_modules/.vite

验证

修复后，所有受影响的组件都能正常导入所需的类型：

import { treeNodeColorClasses, type TreeNode } from '@/types';

// 使用示例
const iconColor = node.color 
  ? treeNodeColorClasses[node.color] 
  : 'text-text-secondary';

预防措施

类型检查：在提交前运行 tsc --noEmit 检查类型错误
导出验证：确保所有公共类型都从 index.ts 正确导出
依赖分析：使用 IDE 的"查找引用"功能验证导出是否被使用

3.1 KiB Raw Permalink Blame History