# dev-base

**Repository Path**: thingjs-code-temp/dev-base

## Basic Information

- **Project Name**: dev-base
- **Description**: dev-base（前端底座）是一个基于 Vue2 的 ThingJS 2.0 综合示例模板。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-24
- **Last Updated**: 2025-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
     <a href="https://www.thingjs.com/guide/"><img width="200" src="https://www.thingjs.com/static/images/avatar.png"></a>
</div>
<div align="center">
    <img src="https://img.shields.io/badge/ThingJS-v2.0-brightgreen.svg" alt="ThingJS">
</div>

dev-base（前端底座）是一个基于 Vue2 的 ThingJS 2.0 综合示例模板。

![前端底座页面预览](preview.png)

## 📋 功能说明

- 预制件：预先制定好的资源，是具有一定属性、行为、效果的对象模板，目的是用于生成三维对象。
- 蓝图：使用节点和连线的方式，来控制三维对象和界面组件的功能和交互。
- 属性面板：用于设置三维对象属性。
- UI 组件库：用于 UI 页面的开发。
- 工具栏：包含切换场景、采集点、采集线路、导入和导出场景布局和蓝图数据、预览等功能按钮。

## 📖 开发指南

```bash
# 安装依赖
npm install

# 启动开发服务
npm run dev

# 打包项目
npm run build

# 仅打包预制件
npm run build:prefab
```

## 🔨 开发规范

### 预制件开发

> 页面左侧栏列表中展示预制件资源，通过拖拽资源项到三维场景，可以创建预制件对象。
> 预制件资源存放在项目 `/prefabs` 目录，可自定义开发所需的预制件。

- [ThingJS 预制件开发指导手册](https://wiki.uino.com/book/prefab)

### 蓝图开发

> 右键蓝图区会出现默认蓝图节点菜单，也可自定义开发所需的蓝图节点，自定义蓝图节点资源存放在 `/nodes` 目录。

- [ThingJS 蓝图开发指导手册](https://wiki.uino.com/book/612f5205dec53e3d4278d89a)

> 📌 Tips: 点击蓝图运行按钮或工具栏预览按钮进入预览模式。预览模式下会运行预制件和蓝图逻辑。

### 属性面板开发（property-panel）

> 鼠标点击选中三维对象，页面右侧会出现属性面板区，可通过属性面板设置三维对象的属性。
> 属性面板的应用代码在 `/src/views/HomeView.vue` 文件中。

- [ThingJS 属性面板开发指导手册](https://wiki.uino.com/book/61a58e053f6f5d728d74a61c)

### UI 组件开发

> UI 页面使用基于 [iview](http://v4.iviewui.com/) 定制化的 [@uino/kiss-ui](http://10.209.1.46:3000/#/ui-v4/) 组件库编写。

## 🔻 目录结构

```
Dev Base
├─ nodes                       # 自定义蓝图节点
│  ├─ BPCodeNode.js
│  ├─ index.js
├─ plugins                     # thingjs插件开发列表
│  ├─ miniMap                  # 小地图插件
├─ scenes                      # 场景文件列表
│  ├─ factory                  # 工厂场景（bundle）
│  ├─ scene-gltf               # 大楼场景（gltf）
├─ prefabs                     # 预制件开发列表
│  ├─ worker                   # 例如：工人预制件
│  │  ├─ blueprints            # 蓝图代码文件夹
│  │  │  └─ BPWorkerNode.js
│  │  ├─ components            # 组件代码文件夹
│  │  │  └─ PathMotion.js      # 组件，挂载到预制件对象上
│  │  ├─ images                # 静态资源目录
│  │  ├─ bundle.json           # 预制件信息
│  │  └─ prefab.json           # 预制件入口配置
├─ public
│  ├─ _plugin                  # thingjs插件资源
│  │  └─ navigator             # 导航插件
│  ├─ icons                    # 图标资源
│  ├─ macros                   # 蓝图子图数据
│  ├─ sign                     # 标记资源
├─ scripts                     # npm 命令脚本和 https 秘钥
├─ src
│  ├─ api                      # api 接口服务
│  │  ├─ index.js
│  │  ├─ model.js              # 模型列表数据
│  ├─ components               # 组件目录
│  │  ├─ Blueprint.vue         # 底部蓝图组件
│  │  ├─ SceneInfoPanel.vue    # 场景信息面板
│  │  ├─ SiderMenu.vue         # 左侧栏列表
│  │  └─ ToolBarPanel.vue      # 顶部工具按钮栏
│  │  ├─ MockData.vue          # 推送数据组件
│  ├─ locale                   # 国际化
│  │  ├─ custom-cn.js          # 蓝图国际化
│  │  └─ prefab.js             # 预制件国际化
│  ├─ sceneManager             # 场景管理模块
│  │  ├─ blueprintEditor       # 蓝图功能相关
│  │  ├─ plugins               # 注册使用 thingjs 对象选择插件
│  │  ├─ fileLoader.js         # 文件导出、导入
│  │  ├─ index.js
│  │  ├─ objectManager.js      # 对象管理
│  │  └─ scene.js              # 初始化场景，设置场景的基础配置
│  ├─ utils
│  │  ├─ dragControl           # 物体拖拽相关
│  │  ├─ object3d              # 孪生体常用方法集
│  │  ├─ actionManager.js      # 注册数据推送服务
│  │  ├─ campusFly.js          # 禁止切换园区时飞行动画
│  │  ├─ CtDotLineArea.js      # 采集点
│  │  ├─ fixMonacoError.js     # 修复 monaco 错误
│  │  ├─ index.js
│  │  ├─ playStopTool.js       # 预览、取消预览
│  │  ├─ previewPrefabScene.js # 模型预览场景
│  │  ├─ storage.js            # 本地存储
│  │  ├─ tool.js               # 常用函数
│  ├─ views
│  │  ├─ HomeView.vue          # 主页面
├─ index.html                  # 首页
```

## 📚 工程依赖说明

### 蓝图节点编辑器 `@uino/thing-blueprint-editor`

> [蓝图](https://wiki.uino.com/book/612f5205dec53e3d4278d89a)使用节点和连线的方式，来控制三维对象和界面组件的功能和交互。

#### 简单使用

```js
// 引入蓝图编辑器及CSS样式
import Blueprint, {
  BaseNode,
  BeginNode,
  PrintNode,
  StringNode,
  NullNode,
  BooleanNode,
  NumberNode,
} from '@uino/thing-blueprint-editor'
import '@uino/thing-blueprint-editor/dist/style.css'

// 初始化蓝图编辑器实例
const blueprint = new Blueprint()

// 注册蓝图节点
blueprint.registerNode(Vector3Node)
blueprint.registerNode([
  NullNode,
  BooleanNode,
  NumberNode,
  StringNode,
  BooleanVarGetterNode,
  BooleanVarSetterNode,
  NumberVarGetterNode,
  NumberVarSetterNode,
  StringVarGetterNode,
  StringVarSetterNode,
  Vec3Node,
  BeginNode,
  BranchNode,
  SwitchNode,
  DelayNode,
  TickNode,
  OpNode,
  PrintNode,
  ProxyNode,
  ArrayNode,
  SequenceNode,
])

// 获取蓝图编辑器
const editor = blueprint.getEditor()

// ======================== 定义右键菜单数据 ===============================
const getName = (node) => node.config.name
const data = {
  children: [
    {
      foldername: 'root',
      nodes: [BeginNode, PrintNode].map((node) => node.config.name), // 从蓝图节点的config配置项中获取到name
      children: [
        {
          foldername: 'common',
          nodes: [NullNode, BooleanNode, NumberNode].map(getName),
        },
        {
          foldername: 'vars',
          nodes: [
            'BooleanVarGetter',
            'BooleanVarSetter',
            'NumberVarGetter',
            'NumberVarSetter',
            'StringVarGetter',
            'StringVarSetter',
          ],
        },
        {
          foldername: 'others',
          nodes: ['Vec3', 'Branch', 'Switch', 'Delay', 'Tick', 'Op', 'Proxy'],
        },
      ],
    },
  ],
}

//加载右键菜单的配置
editor.loadFolder(data)
// ======================== 定义右键菜单数据 ===============================

// ======================== 加载节点样式的配置 ===============================
editor.loadStyle([
  {
    style: { headerColor: '#B16C2A', bodyColor: 'rgba(41, 44, 47, 0.9)' },
    nodes: [
      BeginNode,
      PrintNode,
      StringNode,
      ArrayNode,
      SequenceNode,
      Vector3Node,
    ].map((node) => node.config.name),
  },
  {
    style: { headerColor: '#673FCE', bodyColor: 'rgba(41, 44, 47, 0.9)' },
    nodes: ['Vec3', 'Branch', 'Switch', 'Delay', 'Tick', 'Op', 'Proxy'],
  },
])
// ======================== 加载节点样式的配置 ===============================

// 渲染蓝图编辑器
editor.render()
```

#### 蓝图节点开发

- [代码示例](https://wiki.uino.com/book/612f5205dec53e3d4278d89a/614c434ef8a490430c16b3a9.html)

### 属性面板 `@uino/thing-ui-property-panel`

> [property-panel](https://wiki.uino.com/book/61a58e053f6f5d728d74a61c)是一套基于 Vue.js 的数据驱动型 UI 面板库，主要服务于 PC 界面的[属性面板配置](https://wiki.uino.com/book/61a58e053f6f5d728d74a61c/62086449e35bf932dad51ce5.html)场景。

#### 引入

```js
import Vue from 'vue'
import PropertyPanel from '@uino/thing-ui-property-panel'
import '@uino/thing-ui-property-panel/dist/style/dark-orange.css'

Vue.use(PropertyPanel)
```

#### 使用

```html
<t-ui-panel :options="options" @change="change"></t-ui-panel>
```

### 预制件打包 `@thing.js/cli-p-prefab`

> 对项目中的预制件进行打包，默认打包到 dist 目录。

- 在 dev 环境中从场景中获取到的预制件是打包后 dist 目录下的文件。

### 项目打包 `@thing.js/cli-service`

> 对项目进行打包，内部会调用`@thing.js/cli-p-prefab`对预制件进行打包。