2d-teaching-center

如何使用

用于渲染2d的实验中心效果
1. pnpm i @tmesoft/2d-teaching-center
2. 在admin项目中拷贝src/assets/svg/drag-center-icons到自己的项目:src/assets/svg/drag-center-icons下（注意路径要一致）

demo

``vue

import { ref } from 'vue'
import TeachingCenter from '@tmesoft/2d-teaching-center'
import { ThemeEnum } from '@tmesoft/2d-teaching-center/consts'

// 监听点击实验室
const labClickHandle = (lab) => {
console.log('lab', lab)
}

const teachingCenterRef = ref()
const currentTheme = ref(ThemeEnum.blue)

// 传入json数据
const setJson = (modelData:string)=>{
teachingCenterRef.value?.setJSON(modelData)
}

// 修改实验室状态
// 支持两种状态：using,unused
const changeLabStatus = () => {
teachingCenterRef.value?.setLabStatus(labId, 'using')
}

// 设置主题
const setTheme = (theme: ThemeEnum) => {
teachingCenterRef.value?.setTheme(theme)
// 或者通过props传递
currentTheme.value = theme
}


@onLabClick="labClickHandle"
ref="teachingCenterRef"
:theme="currentTheme"
/>

`

Props

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| autoComputedUrl | Boolean | true | 是否自动计算URL |
| theme | ThemeEnum | ThemeEnum.blue | 主题颜色，可选值：ThemeEnum.blue, ThemeEnum.yellow, ThemeEnum.green |

方法

| Name | Description | type | default |
|--------------|--------------|-------------------------------|---------|
| setJSON | 设置模型json内容 | string | '' |
| getJSON | 获取组件内的json内容 | | |
| setLabStatus | 设置模型的实验室状态 | {labId:string,status:'using'/'unused'} | |
| setTheme | 设置主题颜色 | theme: ThemeEnum | void |
| getTheme | 获取当前主题颜色 | - | ThemeEnum |

事件

| Name | Description |
|------------|-------------------|
| onLabClick | 实验室被点击，返回当前实验室的信息 |

主题功能

$3

该Vue组件包支持三种主题颜色：
- ThemeEnum.blue (默认): #236EAD
- ThemeEnum.yellow: #6D561B
- ThemeEnum.green: #1F636C

主题颜色会应用到SVG图标中的 path 元素上，实现动态主题切换。

$3

#### 1. 通过 Props 传递主题

`vue



`

#### 2. 通过组件实例方法设置主题

`vue



`

$3

`typescript
export enum ThemeEnum {
blue = 'blue',
yellow = 'yellow',
green = 'green'
}

export enum BlueTheme{
border='236EAD',
background='F0F8FF',
}
export enum YellowTheme{
border='6D561B',
background='FFF8E1',
}
export enum GreenTheme{
border='1F636C',
background='E6F9F5',
}
export const THEME_COLORS = {
[ThemeEnum.blue]:BlueTheme,
[ThemeEnum.yellow]: YellowTheme,
[ThemeEnum.green]: GreenTheme,
} as const
``

$3

1. 主题颜色会应用到SVG中的 path 元素
2. 主题变化是响应式的，会自动更新所有相关的SVG图标
3. 如果传入无效的主题值，组件会在控制台输出警告信息