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

<!--ts-->
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
}

<!--template-->
<TeachingCenter 
  @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 | 实验室被点击，返回当前实验室的信息 |

主题功能

概述

该Vue组件包支持三种主题颜色：

• ThemeEnum.blue (默认): #236EAD
• ThemeEnum.yellow: #6D561B
• ThemeEnum.green: #1F636C

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

使用方法

1. 通过 Props 传递主题

<template>
  <TeachingCenter :theme="currentTheme" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TeachingCenter from '@tmesoft/2d-teaching-center'
import { ThemeEnum } from '@tmesoft/2d-teaching-center/consts'

const currentTheme = ref<ThemeEnum>(ThemeEnum.blue)
</script>

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

<template>
  <TeachingCenter ref="teachingCenterRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TeachingCenter from '@tmesoft/2d-teaching-center'
import { ThemeEnum } from '@tmesoft/2d-teaching-center/consts'

const teachingCenterRef = ref()

// 设置主题
const setTheme = (theme: ThemeEnum) => {
  teachingCenterRef.value?.setTheme(theme)
}

// 获取当前主题
const getCurrentTheme = () => {
  return teachingCenterRef.value?.getTheme()
}
</script>

主题颜色常量

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

注意事项

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