配置详解
📂 项目结构说明
├── public/ # 静态资源 & 组件预览图
├── src/
│ ├── common/ # 公共工具函数
│ ├── components/ # 动态组件目录
│ │ ├── common/ # 公共组件
│ │ └── simpleColumn/ # 示例组件目录（可自定义）
│ │ └── dynamicRotatingBase.vue
│ ├── router/ # 路由配置
│ │ ├── componentList # 服务说明 & 组件列表
│ │ └── previewEntry # 单组件预览调试
│ └── dcsConfig.ts # ⭐ 动态组件核心配置文件
├── ...
其余文件均为标准 Vue 3 + Vite 项目结构， 并已按
vite-plugin-federation要求完成配置。
⚙️ dcsConfig.ts 配置详解（核心）
./src 目录下的 dcsConfig.ts 是 整个动态组件服务的核心配置文件 原则上增加/修改完组件代码后，再更改dcsConfig.ts即可发布服务。 如下为参考实例：
const config = {
name: 'baseSample',
version: '1.1.0',
description: '动态组件服务示例组件库',
components: [
{
name: '测试组件',
type: 'testBase',
comFile: './src/components/testBase.vue',
previewPath: './preview/testBase.png',
default: {},
defaultObject3D: {},
config: {},
},
...
]
}
基础字段
name: string // 动态组件服务名称（仅支持英文）
version: string // 服务版本号
description: string // 服务描述
components（组件列表）
components: [
{
name: string
type: string
comFile: string
previewPath: string
defaultObject3D?: { ... }
default?: { ... }
config?: { ... }
}
]
单个组件字段说明
🧩 基础信息
| 字段 | 说明 |
|---|---|
name | 组件名称 |
type | 组件唯一英文标识 |
comFile | 组件入口文件 |
previewPath | 组件预览图路径 |
🎯 defaultObject3D（可选）
默认 Three.js 物体参数（仅支持 位置 / 缩放 / 旋转）：
defaultObject3D: {
position: { x: 0, y: 0.2, z: 0 },
scale: { x: 0.5, y: 0.5, z: 0.5 },
rotation: { x: -Math.PI / 2, y: 0, z: 0 },
}
可只写其中任意项，或完全不写。
🔧 default（组件默认参数）
default: {
color: '#ffffff',
opacity: 1,
// ...其他自定义参数
}
🎛 config（参数 UI 配置）
将自动生成 在线编辑器配置面板
⚠️ 字段必须与 default 一一对应。
config: {
color: { name: '颜色', com: 'ColorPicker' },
type: {
name: '类型',
com: 'Select',
options: ['imgA', 'imgB', 'imgC'].map(item => ({
label: item,
value: item,
})),
},
videoLoop: { name: '视频重复', com: 'Switch' },
opacity: {
name: '透明度',
com: 'Slider',
min: 0,
max: 1,
step: 0.01,
},
jsonText: {
name: '数据配置',
com: 'jsonText',
},
}
当前支持的 UI 组件类型
| com | 说明 |
|---|---|
ColorPicker | 颜色选择器 |
Select | 下拉选择 |
Switch | 开关 |
Slider | 数值滑动条 |
jsonText | JSON 编辑器 |
🧩 总结
dynamic-component-service 是：
tvt.js 生态下的 动态组件基础设施
实现：
- 组件独立发布
- 动态加载
- 在线编辑
- 源码导出
- 二次开发
面向：
- 商业项目
- 插件作者
- 三维应用开发者