feat: 新增了对vue组件的支持

src/components/webtopo-svgedit/components/center-panel/index.vue

@@ -74,6 +74,26 @@
                 item.actual_bound.width / 2
               )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
             ></component>
+            <foreignObject
+              v-else-if="item.type === EDoneJsonType.Vue"
+              width="100"
+              height="100"
+              :id="`foreign-object${item.id}`"
+            >
+              <component
+                :is="item.tag"
+                v-bind="prosToVBind(item)"
+                :id="item.id"
+                :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+                  item.actual_bound.y + item.actual_bound.height / 2
+                }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+                  item.actual_bound.x +
+                  item.actual_bound.width / 2
+                )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+                >{{ item.tag_slot }}</component
+              >
+            </foreignObject>
+
             <line
               v-else-if="item.type === EDoneJsonType.StraightLine"
               :id="item.id"

src/components/webtopo-svgedit/components/left-panel/index.vue

@@ -51,7 +51,13 @@
   const globalStore = useGlobalStore();
   const select_lib = ref('svg文件');
   const config_center = ref<IConfigComponentGroup[]>(globalStore.config_center.svg文件);
-  const activeNames = ref(['stateful', 'stateless', 'have_animation', 'custom_svg_group']);
+  const activeNames = ref([
+    'stateful',
+    'stateless',
+    'have_animation',
+    'custom_svg_group',
+    'element-ui'
+  ]);
   const libChange = (val: any) => {
     config_center.value = [];
     config_center.value = val;

src/components/webtopo-svgedit/components/right-panel/index.vue

@@ -49,6 +49,13 @@
             >
               <el-switch v-model="globalStore.handle_svg_info.info.state.OnOff.default"></el-switch>
             </el-form-item>
+            <el-form-item
+              label="文字插槽"
+              size="small"
+              v-if="globalStore.handle_svg_info.info.tag_slot"
+            >
+              <el-input v-model="globalStore.handle_svg_info.info.tag_slot" />
+            </el-form-item>
             <dynamic-el-form-item
               :obj-info="globalStore.handle_svg_info.info.props"
             ></dynamic-el-form-item>

src/config-center/index.ts

@@ -1,12 +1,14 @@
 import { svgfile_config_center } from './svg-file';
 import { IComponentImport, IConfigCenter } from './types';
 import customSvgText from '@/components/webtopo-svgedit/components/custom-svg/custom-svg-text/index.vue';
+import { vue_config_center } from './vue';
+import { ElButton, ElTag } from 'element-plus';
 export const configCenter: IConfigCenter = {
   svg文件: svgfile_config_center,
-  vue组件: [],
-  自定义组件: [],
-  图表: []
+  vue组件: vue_config_center
 };
 export const ComponentImport: IComponentImport = {
-  'custom-svg-text': customSvgText
+  'custom-svg-text': customSvgText,
+  'el-button': ElButton,
+  'el-tag': ElTag
 };

src/config-center/svg-file/stateless/alternator/index.ts

@@ -13,7 +13,7 @@ export const alternator_svg_file: IConfigItem = {
     fill: {
       title: '填充色',
       type: EConfigItemPropsType.Color,
-      val: '#ff0000'
+      val: '#00ff00'
     }
   }
 };

src/config-center/types.ts

@@ -24,13 +24,14 @@ export interface IConfigItem {
   animations?: IConfigItemProps;
   tag?: any;
   state?: IConfigItemState; //通过一个属性去控制多个属性就是有状态组件
+  tag_slot?: string;
 }
 export interface IConfigItemProps {
   [key: string]: {
     title: string;
     type: EConfigItemPropsType;
     val: any;
-    options?: { value: any; label: string }[];
+    options?: any;
     disabled?: boolean;
   };
 }
@@ -53,7 +54,8 @@ export enum EDoneJsonType {
   File = 'File',
   StraightLine = 'StraightLine',
   ConnectionLine = 'ConnectionLine',
-  CustomSvg = 'CustomSvg'
+  CustomSvg = 'CustomSvg',
+  Vue = 'Vue'
 }
 interface IDoneJsonConfig {
   can_zoom: boolean;

src/config-center/vue/element-ui/button/index.ts

@@ -0,0 +1,48 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types';
+
+export const el_button_vue: IConfigItem = {
+  name: 'el-button',
+  tag: 'el-button',
+  title: '按钮',
+  type: EDoneJsonType.Vue,
+  config: {
+    can_zoom: true,
+    have_anchor: true,
+    actual_rect: true
+  },
+  props: {
+    size: {
+      title: '尺寸',
+      type: EConfigItemPropsType.Select,
+      val: 'default',
+      options: [
+        { label: '大', value: 'large' },
+        { label: '默认', value: 'default' },
+        { label: '小', value: 'small' }
+      ]
+    },
+    type: {
+      title: '类型',
+      type: EConfigItemPropsType.Select,
+      val: 'primary',
+      options: [
+        { label: '主要按钮', value: 'primary' },
+        { label: '成功按钮', value: 'success' },
+        { label: '警告按钮', value: 'warning' },
+        { label: '危险按钮', value: 'danger' },
+        { label: '信息按钮', value: 'info' }
+      ]
+    },
+    plain: {
+      title: '朴素按钮',
+      type: EConfigItemPropsType.Switch,
+      val: false
+    },
+    text: {
+      title: '文字按钮',
+      type: EConfigItemPropsType.Switch,
+      val: false
+    }
+  },
+  tag_slot: '按钮'
+};

src/config-center/vue/element-ui/index.ts

@@ -0,0 +1,9 @@
+import { IConfigComponentGroup } from '@/config-center/types';
+import { el_button_vue } from './button';
+import { el_tag_vue } from './tag';
+
+export const element_ui_group: IConfigComponentGroup = {
+  groupType: 'element-ui',
+  title: 'element-ui',
+  list: [el_button_vue, el_tag_vue]
+};

src/config-center/vue/element-ui/tag/index.ts

@@ -0,0 +1,37 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types';
+
+export const el_tag_vue: IConfigItem = {
+  name: 'el-tag',
+  tag: 'el-tag',
+  title: '标签',
+  type: EDoneJsonType.Vue,
+  config: {
+    can_zoom: true,
+    have_anchor: true,
+    actual_rect: true
+  },
+  props: {
+    type: {
+      title: '类型',
+      type: EConfigItemPropsType.Select,
+      val: 'success',
+      options: [
+        { label: '成功', value: 'success' },
+        { label: '警告', value: 'warning' },
+        { label: '危险', value: 'danger' },
+        { label: '信息', value: 'info' }
+      ]
+    },
+    closable: {
+      title: '可关闭',
+      type: EConfigItemPropsType.Switch,
+      val: true
+    },
+    'disable-transitions': {
+      title: '渐变',
+      type: EConfigItemPropsType.Switch,
+      val: false
+    }
+  },
+  tag_slot: '标签'
+};

src/config-center/vue/index.ts

@@ -0,0 +1,4 @@
+import { IConfigComponentGroup } from '../types';
+import { element_ui_group } from './element-ui';
+
+export const vue_config_center: IConfigComponentGroup[] = Object.seal([element_ui_group]);

src/utils/index.ts

@@ -1,5 +1,5 @@
 import { ELineBindAnchors } from '@/config-center/system/types';
-import { IConfigItem } from '@/config-center/types';
+import { EDoneJsonType, IConfigItem } from '@/config-center/types';
 import type { IDoneJson } from '@/store/global/types';
 
 /**
@@ -122,8 +122,29 @@ export const setSvgActualInfo = (done_json: IDoneJson) => {
   const queryBbox = document.querySelector(`#${done_json.id}`);
   // const rectBBox = document.querySelector(`#rect${done_json.id}`);
   if (queryBbox) {
-    const BBox = (queryBbox as SVGGraphicsElement).getBBox();
-    const { x, y, width, height } = BBox;
+    let x = 0,
+      y = 0,
+      width = 0,
+      height = 0;
+    if (done_json.type !== EDoneJsonType.Vue) {
+      const BBox = (queryBbox as SVGGraphicsElement).getBBox();
+      x = BBox.x;
+      y = BBox.y;
+      (width = BBox.width), (height = BBox.height);
+    } else {
+      (width = (queryBbox as HTMLElement).offsetWidth),
+        (height = (queryBbox as HTMLElement).offsetHeight);
+      x = 50 - width / 2;
+      y = 50 - height / 2;
+      const foreignObjectBox = document.querySelector(`#foreign-object${done_json.id}`);
+      if (foreignObjectBox) {
+        foreignObjectBox.setAttribute('x', x.toString());
+        foreignObjectBox.setAttribute('y', y.toString());
+        foreignObjectBox.setAttribute('width', width.toString());
+        foreignObjectBox.setAttribute('height', height.toString());
+      }
+    }
+
     // rectBBox.setAttribute('x', x.toString());
     // rectBBox.setAttribute('y', y.toString());
     // rectBBox.setAttribute('width', width.toString());