workbench-charts

基于 Three.js 的可视化图表库（tsup 打包）

提供 3D 脑部可视化、激活图等组件，支持 React + Three.js

开发模式

方案一：Vite alias 直接引用源码（推荐）⭐

在 workbench-frontend/vite.config.ts 中已配置 alias：

alias: {
  'workbench-charts': resolve(__dirname, '../workbench-charts/src/index.ts')
}

优点：

• ✅ 修改 workbench-charts 源码后立即生效，无需构建
• ✅ 支持热更新（HMR）
• ✅ TypeScript 类型提示正常

使用方式：

# 只需启动 frontend 开发服务器
cd workbench-frontend
pnpm dev

现在你可以直接修改 workbench-charts/src/** 下的文件，保存后浏览器会自动刷新。

---

方案二：tsup watch 模式

如果你想测试构建产物或在生产环境使用，可以开启 watch 模式：

# Terminal 1: 启动 charts 库的 watch 构建
cd workbench-charts
npm run dev  # tsup --watch

# Terminal 2: 启动 frontend
cd workbench-frontend
pnpm dev

注意：此模式下修改源码后，tsup 会自动重新构建，但 frontend 需要手动刷新浏览器（因为 Vite 监听的是 node_modules 的变化）。

---

构建发布

生产构建时，Vite 会自动使用 workbench-charts 的构建产物（dist）：

# 先构建 charts 库
cd workbench-charts
npm run build

# 再构建 frontend
cd workbench-frontend
pnpm build

---

导出内容

// React 组件
export { LineChart, ThreeActivationDiagram }

// Three.js 工具类
export {
  ThreeAppBuilder,          // 构建器类
  disposeThreeObject,       // 资源释放工具
  mapValueToColorTextureByLinearScale,  // 颜色映射
  initImg,                  // 默认贴图
  BRAIN_MODEL_ANGLE         // 脑模型角度预设
}

---

目录结构

workbench-charts/
├── src/
│   ├── LineChart/              # 折线图组件
│   ├── ThreeActivationDiagram/ # 3D 激活图组件
│   ├── ThreeApp/               # Three.js 工具类
│   │   ├── ThreeAppBuilder.ts  # 构建器
│   │   ├── DisposeUtils.ts     # 资源回收
│   │   ├── ColorTexturePool.ts # 颜色贴图（代码生成）
│   │   └── BrainModelAngle.ts  # 角度预设
│   └── assets/                 # 资源文件目录
│       ├── images/             # 图片资源
│       ├── models/             # 3D 模型资源
│       └── index.ts            # 资源导出
├── dist/                       # 构建产物（npm 发布）
├── tsup.config.ts             # 打包配置
└── package.json

---

📦 使用资源文件

在库内部使用

直接相对路径导入：

// src/components/MyComponent.tsx
import brainImage from '../assets/images/brain.png'
import brainModel from '../assets/models/brain.gltf'

export function MyComponent() {
  return <img src={brainImage} alt="Brain" />
}

在使用方项目中导入资源

方式一：通过导出模块（推荐）

// 1. 先在 src/assets/index.ts 导出资源
export { default as brainImage } from './images/brain.png'

// 2. 使用方导入
import { brainImage } from 'workbench-charts/assets'

方式二：直接路径导入（需要类型支持）

import brainImage from 'workbench-charts/assets/images/brain.png'

资源处理流程

• 开发时：Vite alias 让资源通过 Vite 处理（自动优化、转 URL）
• 构建时：tsup 自动将 src/assets 复制到 dist/assets
• 发布时：资源随 npm 包一起发布，使用方可正常导入

详见 src/assets/README.md