简柏林 / thingskit-view · Commits

Commit 22a1a2d2de4c342784625897d1265f8debb49e63

Authored by ww
1 parent d22eabd2

fix(packages/compoents/external): 修复拓展组件生产环境无法使用问题

Inline Side-by-side
Showing 14 changed files with 82 additions and 412 deletions
@@ -10,7 +10,7 @@ export const LeftCenterRightHeadConfig: ConfigType = { @@ -10,7 +10,7 @@ export const LeftCenterRightHeadConfig: ConfigType = {
10 key, 10 key,
11 chartKey, 11 chartKey,
12 conKey, 12 conKey,
13 - title: '头部组合1', 13 + title: '大标题',
14 category: ChatCategoryEnum.HEADCOMBINATION, 14 category: ChatCategoryEnum.HEADCOMBINATION,
15 categoryName: ChatCategoryEnumName.HEADCOMBINATION, 15 categoryName: ChatCategoryEnumName.HEADCOMBINATION,
16 package: EPackagesCategoryEnum.COMPOSES, 16 package: EPackagesCategoryEnum.COMPOSES,
@@ -10,10 +10,10 @@ export const LeftCenterRightHeadAnimatConfig: ConfigType = { @@ -10,10 +10,10 @@ export const LeftCenterRightHeadAnimatConfig: ConfigType = {
10 key, 10 key,
11 chartKey, 11 chartKey,
12 conKey, 12 conKey,
13 - title: '头部组合3', 13 + title: '大标题2',
14 category: ChatCategoryEnum.HEADCOMBINATION, 14 category: ChatCategoryEnum.HEADCOMBINATION,
15 categoryName: ChatCategoryEnumName.HEADCOMBINATION, 15 categoryName: ChatCategoryEnumName.HEADCOMBINATION,
16 package: EPackagesCategoryEnum.COMPOSES, 16 package: EPackagesCategoryEnum.COMPOSES,
17 chartFrame: ChartFrameEnum.COMMON, 17 chartFrame: ChartFrameEnum.COMMON,
18 - image: 'left_center_rightHead.png', 18 + image: 'decorates02.png',
19 } 19 }
1 -import { PublicConfigClass } from '@/packages/public'  
2 -import { CreateComponentType } from '@/packages/index.d'  
3 -import { LeftCenterRightHeadCommonConfig } from './index'  
4 -import cloneDeep from 'lodash/cloneDeep'  
5 -  
6 -export const option = {  
7 - //左边颜色  
8 - colorLefts: ['#1dc1f5', '#1dc1f5'],  
9 - //中间标题颜色  
10 - colorTexts: ['#1DC1F533', '#1DC1F5FF'],  
11 - //右边颜色  
12 - colorRights: ['#1dc1f5', '#1dc1f5'],  
13 - //头部左边尺寸位置配置  
14 - headLeftInfo: {  
15 - w: 700,  
16 - h: 300,  
17 - ml: 0,  
18 - mt: 0,  
19 - headLeftReverse: false  
20 - },  
21 - //头部中间尺寸位置配置  
22 - headCenterInfo: {  
23 - w: 500,  
24 - h: 70,  
25 - ml: 235,  
26 - mt: 125,  
27 - dataset: '我是标题',  
28 - textColor: '#fff',  
29 - textSize: 32  
30 - },  
31 - //头部右边尺寸位置配置  
32 - headRightInfo: {  
33 - w: 700,  
34 - h: 300,  
35 - ml: 245,  
36 - mt: 0,  
37 - headRightReverse: true  
38 - }  
39 -}  
40 -  
41 -export default class Config extends PublicConfigClass implements CreateComponentType {  
42 - public key = LeftCenterRightHeadCommonConfig.key  
43 - public chartConfig = cloneDeep(LeftCenterRightHeadCommonConfig)  
44 - public option = cloneDeep(option)  
45 -}  
1 -<template>  
2 - <CollapseItem name="头部左侧配置" :expanded="true">  
3 - <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorLefts" :key="index">  
4 - <SettingItem name="颜色">  
5 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorLefts[index]"></n-color-picker>  
6 - </SettingItem>  
7 - <SettingItem>  
8 - <n-button size="small" @click="optionData.colorLefts[index] = option.colorLefts[index]"> 恢复默认 </n-button>  
9 - </SettingItem>  
10 - </SettingItemBox>  
11 - <SettingItemBox name="大小">  
12 - <SettingItem name="宽度">  
13 - <n-input-number size="small" v-model:value="optionData.headLeftInfo.w"></n-input-number>  
14 - </SettingItem>  
15 - <SettingItem name="高度">  
16 - <n-input-number size="small" v-model:value="optionData.headLeftInfo.h"></n-input-number>  
17 - </SettingItem>  
18 - </SettingItemBox>  
19 - <SettingItemBox name="间距">  
20 - <SettingItem name="左间距">  
21 - <n-input-number size="small" v-model:value="optionData.headLeftInfo.ml"></n-input-number>  
22 - </SettingItem>  
23 - <SettingItem name="上间距">  
24 - <n-input-number size="small" v-model:value="optionData.headLeftInfo.mt"></n-input-number>  
25 - </SettingItem>  
26 - </SettingItemBox>  
27 - <SettingItemBox name="方向">  
28 - <SettingItem>  
29 - <n-space>  
30 - <n-switch v-model:value="optionData.headLeftInfo.headLeftReverse" size="small" />  
31 - <n-text>开启反向</n-text>  
32 - </n-space>  
33 - </SettingItem>  
34 - </SettingItemBox>  
35 - </CollapseItem>  
36 - <CollapseItem name="头部中间配置" :expanded="true">  
37 - <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorTexts" :key="index">  
38 - <SettingItem name="颜色">  
39 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorTexts[index]"></n-color-picker>  
40 - </SettingItem>  
41 - <SettingItem>  
42 - <n-button size="small" @click="optionData.colorTexts[index] = option.colorTexts[index]"> 恢复默认 </n-button>  
43 - </SettingItem>  
44 - </SettingItemBox>  
45 - <SettingItemBox name="文字" alone>  
46 - <SettingItem>  
47 - <n-input v-model:value="optionData.headCenterInfo.dataset" size="small"></n-input>  
48 - </SettingItem>  
49 - </SettingItemBox>  
50 - <SettingItemBox name="样式">  
51 - <SettingItem name="颜色">  
52 - <n-color-picker  
53 - size="small"  
54 - :modes="['hex']"  
55 - v-model:value="optionData.headCenterInfo.textColor"  
56 - ></n-color-picker>  
57 - </SettingItem>  
58 - <SettingItem name="大小">  
59 - <n-input-number v-model:value="optionData.headCenterInfo.textSize" size="small" :min="12"></n-input-number>  
60 - </SettingItem>  
61 - </SettingItemBox>  
62 - <SettingItemBox name="大小">  
63 - <SettingItem name="宽度">  
64 - <n-input-number size="small" v-model:value="optionData.headCenterInfo.w"></n-input-number>  
65 - </SettingItem>  
66 - <SettingItem name="高度">  
67 - <n-input-number size="small" v-model:value="optionData.headCenterInfo.h"></n-input-number>  
68 - </SettingItem>  
69 - </SettingItemBox>  
70 - <SettingItemBox name="间距">  
71 - <SettingItem name="左间距">  
72 - <n-input-number size="small" v-model:value="optionData.headCenterInfo.ml"></n-input-number>  
73 - </SettingItem>  
74 - <SettingItem name="上间距">  
75 - <n-input-number size="small" v-model:value="optionData.headCenterInfo.mt"></n-input-number>  
76 - </SettingItem>  
77 - </SettingItemBox>  
78 - </CollapseItem>  
79 - <CollapseItem name="头部右侧配置" :expanded="true">  
80 - <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorRights" :key="index">  
81 - <SettingItem name="颜色">  
82 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorRights[index]"></n-color-picker>  
83 - </SettingItem>  
84 - <SettingItem>  
85 - <n-button size="small" @click="optionData.colorRights[index] = option.colorRights[index]"> 恢复默认 </n-button>  
86 - </SettingItem>  
87 - </SettingItemBox>  
88 - <SettingItemBox name="大小">  
89 - <SettingItem name="宽度">  
90 - <n-input-number size="small" v-model:value="optionData.headRightInfo.w"></n-input-number>  
91 - </SettingItem>  
92 - <SettingItem name="高度">  
93 - <n-input-number size="small" v-model:value="optionData.headRightInfo.h"></n-input-number>  
94 - </SettingItem>  
95 - </SettingItemBox>  
96 - <SettingItemBox name="间距">  
97 - <SettingItem name="左间距">  
98 - <n-input-number size="small" v-model:value="optionData.headRightInfo.ml"></n-input-number>  
99 - </SettingItem>  
100 - <SettingItem name="上间距">  
101 - <n-input-number size="small" v-model:value="optionData.headRightInfo.mt"></n-input-number>  
102 - </SettingItem>  
103 - </SettingItemBox>  
104 - <SettingItemBox name="方向">  
105 - <SettingItem>  
106 - <n-space>  
107 - <n-switch v-model:value="optionData.headRightInfo.headRightReverse" size="small" />  
108 - <n-text>开启反向</n-text>  
109 - </n-space>  
110 - </SettingItem>  
111 - </SettingItemBox>  
112 - </CollapseItem>  
113 -</template>  
114 -  
115 -<script setup lang="ts">  
116 -import { PropType } from 'vue'  
117 -import { option } from './config'  
118 -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'  
119 -  
120 -defineProps({  
121 - optionData: {  
122 - type: Object as any as PropType<typeof option>,  
123 - required: true  
124 - }  
125 -})  
126 -</script>  
1 -import { ChartFrameEnum, ConfigType } from '@/packages/index.d'  
2 -import { EPackagesCategoryEnum } from '@/packages/components/external/types'  
3 -import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'  
4 -import { useWidgetKey } from '@/packages/external/useWidgetKey'  
5 -  
6 -const { key, chartKey, conKey } = useWidgetKey('LeftCenterRightHeadCommon')  
7 -export const LeftCenterRightHeadCommonConfig: ConfigType = {  
8 - key,  
9 - chartKey,  
10 - conKey,  
11 - title: '头部组合2',  
12 - category: ChatCategoryEnum.HEADCOMBINATION,  
13 - categoryName: ChatCategoryEnumName.HEADCOMBINATION,  
14 - package: EPackagesCategoryEnum.COMPOSES,  
15 - chartFrame: ChartFrameEnum.COMMON,  
16 - image: 'customHead2.png',  
17 -}  
1 -<template>  
2 - <div style="display: flex">  
3 - <n-grid :x-gap="12" :y-gap="12" :cols="4" layout-shift-disabled>  
4 - <n-gi>  
5 - <div :style="{ marginLeft: headLeftInfo.ml + 'px', marginTop: headLeftInfo.mt + 'px' }">  
6 - <svg :width="headLeftInfo.w + 'px'" :height="headLeftInfo.h + 'px'">  
7 - <polyline  
8 - :stroke="colorLefts[0]"  
9 - stroke-width="2"  
10 - fill="transparent"  
11 - :points="`${xLeftPos(0)}, 0 ${xLeftPos(30)}, ${headLeftInfo.h / 2}`"  
12 - />  
13 - <polyline  
14 - :stroke="colorLefts[0]"  
15 - stroke-width="2"  
16 - fill="transparent"  
17 - :points="`${xLeftPos(20)}, 0 ${xLeftPos(50)}, ${headLeftInfo.h / 2} ${xLeftPos(headLeftInfo.w)}, ${  
18 - headLeftInfo.h / 2  
19 - }`"  
20 - />  
21 - <polyline  
22 - :stroke="colorLefts[1]"  
23 - fill="transparent"  
24 - stroke-width="3"  
25 - :points="`${xLeftPos(0)}, ${headLeftInfo.h - 3}, ${xLeftPos(200)}, ${headLeftInfo.h - 3}`"  
26 - />  
27 - </svg>  
28 - </div>  
29 - </n-gi>  
30 - <n-gi>  
31 - <div :style="{ top: headCenterInfo.mt + 'px', left: headCenterInfo.ml + 'px' }" class="go-border-06">  
32 - <svg xmlns="http://www.w3.org/2000/svg" :width="headCenterInfo.w" :height="headCenterInfo.h">  
33 - <polygon class="stroke fill" :points="`15.5 6.5 20.5 0.5 50.5 0.5 55.5 6.5 15.5 6.5`" />  
34 - <polygon  
35 - class="stroke fill"  
36 - :points="`15.5 ${headCenterInfo.h - 6.5} 20.5 ${headCenterInfo.h - 0.5} 50.5 ${  
37 - headCenterInfo.h - 0.5  
38 - } 55.5 ${headCenterInfo.h - 6.5} 15.5 ${headCenterInfo.h - 6.5}`"  
39 - />  
40 - <polygon  
41 - class="stroke fill"  
42 - :points="`${headCenterInfo.w - 15.5} 6.5 ${headCenterInfo.w - 20.5} 0.5 ${headCenterInfo.w - 50.5} 0.5 ${  
43 - headCenterInfo.w - 55.5  
44 - } 6.5 ${headCenterInfo.w - 15.5} 6.5`"  
45 - />  
46 - <polygon  
47 - class="stroke fill"  
48 - :points="`${headCenterInfo.w - 15.5} ${headCenterInfo.h - 6.5} ${headCenterInfo.w - 20.5} ${  
49 - headCenterInfo.h - 0.5  
50 - } ${headCenterInfo.w - 50.5} ${headCenterInfo.h - 0.5} ${headCenterInfo.w - 55.5} ${  
51 - headCenterInfo.h - 6.5  
52 - } ${headCenterInfo.w - 15.5} ${headCenterInfo.h - 6.5}`"  
53 - />  
54 - <polygon  
55 - class="stroke fill"  
56 - :points="`15.5 6.5 0.5 ${headCenterInfo.h / 2} 15.5 ${headCenterInfo.h - 6.5} ${  
57 - headCenterInfo.w - 15.5  
58 - } ${headCenterInfo.h - 6.5} ${headCenterInfo.w - 0.5} ${headCenterInfo.h / 2} ${  
59 - headCenterInfo.w - 15.5  
60 - } 6.5 15.5 6.5`"  
61 - />  
62 - <polyline  
63 - class="stroke fill-none"  
64 - :points="`20.5 14.5 8.5 ${headCenterInfo.h / 2} 20.5 ${headCenterInfo.h - 14.5}`"  
65 - />  
66 - <polyline  
67 - class="stroke fill-none"  
68 - :points="`${headCenterInfo.w - 20.5} 14.5 ${headCenterInfo.w - 8.5} ${headCenterInfo.h / 2} ${  
69 - headCenterInfo.w - 20.5  
70 - } ${headCenterInfo.h - 14.5}`"  
71 - />  
72 - </svg>  
73 - <span class="text">{{ headCenterInfo.dataset }}</span>  
74 - </div>  
75 - </n-gi>  
76 - <n-gi>  
77 - <div :style="{ marginLeft: headRightInfo.ml + 'px', marginTop: headRightInfo.mt + 'px' }">  
78 - <svg :width="headRightInfo.w" :height="headRightInfo.h">  
79 - <polyline  
80 - :stroke="colorRights[0]"  
81 - stroke-width="2"  
82 - fill="transparent"  
83 - :points="`${xRightPos(0)}, 0 ${xRightPos(30)}, ${headRightInfo.h / 2}`"  
84 - />  
85 - <polyline  
86 - :stroke="colorRights[0]"  
87 - stroke-width="2"  
88 - fill="transparent"  
89 - :points="`${xRightPos(20)}, 0 ${xRightPos(50)}, ${headRightInfo.h / 2} ${xRightPos(headRightInfo.w)}, ${  
90 - headRightInfo.h / 2  
91 - }`"  
92 - />  
93 - <polyline  
94 - :stroke="colorRights[1]"  
95 - fill="transparent"  
96 - stroke-width="3"  
97 - :points="`${xRightPos(0)}, ${headRightInfo.h - 3}, ${xRightPos(200)}, ${headRightInfo.h - 3}`"  
98 - />  
99 - </svg>  
100 - </div>  
101 - </n-gi>  
102 - </n-grid>  
103 - </div>  
104 -</template>  
105 -<script setup lang="ts">  
106 -import { PropType, toRefs } from 'vue'  
107 -import { CreateComponentType } from '@/packages/index.d'  
108 -  
109 -const props = defineProps({  
110 - chartConfig: {  
111 - type: Object as PropType<CreateComponentType>,  
112 - required: true  
113 - }  
114 -})  
115 -  
116 -//默认设置宽高距离位置  
117 -props.chartConfig.attr.w = 1920  
118 -props.chartConfig.attr.h = 300  
119 -props.chartConfig.attr.x = 0  
120 -props.chartConfig.attr.y = 0  
121 -  
122 -const { headLeftInfo, headCenterInfo, headRightInfo, colorLefts, colorRights, colorTexts } = toRefs(  
123 - props.chartConfig.option  
124 -)  
125 -  
126 -const xLeftPos = (pos: number) => {  
127 - if (!headLeftInfo.value.headLeftReverse) return pos  
128 - return headLeftInfo.value.w - pos  
129 -}  
130 -  
131 -const xRightPos = (pos: number) => {  
132 - if (!headRightInfo.value.headRightReverse) return pos  
133 - return headRightInfo.value.w - pos  
134 -}  
135 -</script>  
136 -  
137 -<style lang="scss" scoped>  
138 -@include go('border-06') {  
139 - position: relative;  
140 - display: flex;  
141 - justify-content: center;  
142 - align-items: center;  
143 -  
144 - svg {  
145 - position: absolute;  
146 - z-index: -1;  
147 - }  
148 -  
149 - .fill {  
150 - fill: v-bind('colorTexts[0]');  
151 - }  
152 - .fill-none {  
153 - fill: none;  
154 - }  
155 - .stroke {  
156 - stroke: v-bind('colorTexts[1]');  
157 - }  
158 -  
159 - .text {  
160 - color: v-bind('headCenterInfo.textColor');  
161 - font-size: v-bind('headCenterInfo.textSize+"px"');  
162 - }  
163 -}  
164 -</style>  
1 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index' 1 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index'
2 -import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index'  
3 import { LeftCenterRightHeadAnimatConfig } from './LeftCenterRightHeadAnimat/index' 2 import { LeftCenterRightHeadAnimatConfig } from './LeftCenterRightHeadAnimat/index'
4 3
5 -export default [LeftCenterRightHeadConfig, LeftCenterRightHeadCommonConfig,LeftCenterRightHeadAnimatConfig] 4 +export default [LeftCenterRightHeadConfig, LeftCenterRightHeadAnimatConfig]
@@ -4,24 +4,24 @@ import { TitleConfig } from './index' @@ -4,24 +4,24 @@ import { TitleConfig } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 export const option = { 6 export const option = {
7 - dataset:'我是标题',  
8 - attribute:{  
9 - titleColor:'#fff',  
10 - titleSize:'16',  
11 - svg_7:'blue',  
12 - svg_8:'red',  
13 - svg_16:'red',  
14 - svg_14:'red',  
15 - svg_21:'red',  
16 - svg_7_opacity:1,  
17 - svg_8_opacity:1,  
18 - svg_16_opacity:1,  
19 - svg_14_opacity:1,  
20 - linearGradient:{  
21 - stop_color1:'#447799',  
22 - stop_color2:'#224488',  
23 - svg_21_opacity1:1,  
24 - svg_21_opacity2:1, 7 + dataset: '我是标题',
  8 + attribute: {
  9 + titleColor: '#fff',
  10 + titleSize: 16,
  11 + svg_7: 'blue',
  12 + svg_8: 'red',
  13 + svg_16: 'red',
  14 + svg_14: 'red',
  15 + svg_21: 'red',
  16 + svg_7_opacity: 1,
  17 + svg_8_opacity: 1,
  18 + svg_16_opacity: 1,
  19 + svg_14_opacity: 1,
  20 + linearGradient: {
  21 + stop_color1: '#447799',
  22 + stop_color2: '#224488',
  23 + svg_21_opacity1: 1,
  24 + svg_21_opacity2: 1,
25 } 25 }
26 } 26 }
27 } 27 }
@@ -8,7 +8,7 @@ export const TitleConfig: ConfigType = { @@ -8,7 +8,7 @@ export const TitleConfig: ConfigType = {
8 key, 8 key,
9 chartKey, 9 chartKey,
10 conKey, 10 conKey,
11 - title: '标题', 11 + title: '小标题',
12 category: ChatCategoryEnum.MORE, 12 category: ChatCategoryEnum.MORE,
13 categoryName: ChatCategoryEnumName.MORE, 13 categoryName: ChatCategoryEnumName.MORE,
14 package: EPackagesCategoryEnum.COMPOSES, 14 package: EPackagesCategoryEnum.COMPOSES,
1 <template> 1 <template>
2 - <div class="go-content-box" >  
3 -<svg xmlns="http://www.w3.org/2000/svg" width="782" height="600">  
4 - <defs>  
5 - <defs>  
6 - <linearGradient id="my-cool-gradient" x1="0%" y1="0%" x2="100%" y2="0%">  
7 - <stop offset="0%" :style="{stopColor:attribute.linearGradient.stop_color1,stopOpacity:attribute.linearGradient.svg_21_opacity1 }"/>  
8 - <stop offset="100%" :style="{stopColor:attribute.linearGradient.stop_color2,stopOpacity:attribute.linearGradient.svg_21_opacity2}"/>  
9 - </linearGradient>  
10 - </defs>  
11 - </defs>  
12 - <g>  
13 - <rect stroke="#000" id="svg_6" height="0" width="2" y="189.5" x="523" fill="#fff"/>  
14 - <path :opacity="attribute.svg_7_opacity" transform="rotate(-137 422.766 284.992)" stroke="#000" id="svg_7" d="m412.87465,287.39672l3.95636,-4.80932l15.82545,0l-3.95636,4.80932l-15.82545,0z" :fill="attribute.svg_7"/>  
15 - <path :opacity="attribute.svg_8_opacity" transform="rotate(44 444.883 283.871)" stroke="#000" id="svg_8" d="m435.52609,286.39738l3.74294,-5.0534l14.97175,0l-3.74294,5.0534l-14.97175,0z" :fill="attribute.svg_8"/>  
16 - <rect id="svg_10" height="0" width="1" y="242.5" x="235" stroke="#000" fill="#fff"/>  
17 - <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" :font-size="attribute.titleSize" stroke-width="0" id="svg_12" y="290.5" x="214" stroke="#000" :fill="attribute.titleColor">{{ dataset }}</text>  
18 - <path :opacity="attribute.svg_14_opacity" transform="rotate(90 198.922 284.168)" stroke="#000" id="svg_14" d="m193.42189,288.16843l5.50043,-8.00001l5.50043,8.00001l-11.00085,0z" stroke-width="0" :fill="attribute.svg_14"/>  
19 - <path id="svg_15" d="m259.7,311.34437l0.5,-1.00001l0.5,1.00001l-1.00001,0z" stroke-width="0" stroke="#000" fill="#000000"/>  
20 - <rect stroke="#000" id="svg_16" height="33" width="4" y="269" x="181" :fill="attribute.svg_16" :opacity="attribute.svg_16_opacity"/>  
21 - <rect id="svg_17" height="0" width="2" y="368.5" x="187" stroke="#000" fill="#6D97AB"/>  
22 - <rect id="svg_18" height="13" width="0" y="290.5" x="167" stroke="#000" fill="#6D97AB"/>  
23 - <rect id="svg_20" height="0" width="1" y="193.5" x="281" stroke="#000" fill="#6D97AB"/>  
24 - <path stroke="#000" id="svg_21" d="m184,269l299.00001,0l0,33l-299.00001,0l0,-33z" opacity="0.35" fill="url(#my-cool-gradient)"/>  
25 - </g> 2 + <div class="go-content-box">
  3 + <svg xmlns="http://www.w3.org/2000/svg" width="782" height="600">
  4 + <defs>
  5 + <defs>
  6 + <linearGradient id="my-cool-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
  7 + <stop offset="0%"
  8 + :style="{ stopColor: attribute.linearGradient.stop_color1, stopOpacity: attribute.linearGradient.svg_21_opacity1 }" />
  9 + <stop offset="100%"
  10 + :style="{ stopColor: attribute.linearGradient.stop_color2, stopOpacity: attribute.linearGradient.svg_21_opacity2 }" />
  11 + </linearGradient>
  12 + </defs>
  13 + </defs>
  14 + <g>
  15 + <rect stroke="#000" id="svg_6" height="0" width="2" y="189.5" x="523" fill="#fff" />
  16 + <path :opacity="attribute.svg_7_opacity" transform="rotate(-137 422.766 284.992)" stroke="#000" id="svg_7"
  17 + d="m412.87465,287.39672l3.95636,-4.80932l15.82545,0l-3.95636,4.80932l-15.82545,0z" :fill="attribute.svg_7" />
  18 + <path :opacity="attribute.svg_8_opacity" transform="rotate(44 444.883 283.871)" stroke="#000" id="svg_8"
  19 + d="m435.52609,286.39738l3.74294,-5.0534l14.97175,0l-3.74294,5.0534l-14.97175,0z" :fill="attribute.svg_8" />
  20 + <rect id="svg_10" height="0" width="1" y="242.5" x="235" stroke="#000" fill="#fff" />
  21 + <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" :font-size="attribute.titleSize"
  22 + stroke-width="0" id="svg_12" y="290.5" x="214" stroke="#000" :fill="attribute.titleColor">{{ dataset }}</text>
  23 + <path :opacity="attribute.svg_14_opacity" transform="rotate(90 198.922 284.168)" stroke="#000" id="svg_14"
  24 + d="m193.42189,288.16843l5.50043,-8.00001l5.50043,8.00001l-11.00085,0z" stroke-width="0"
  25 + :fill="attribute.svg_14" />
  26 + <path id="svg_15" d="m259.7,311.34437l0.5,-1.00001l0.5,1.00001l-1.00001,0z" stroke-width="0" stroke="#000"
  27 + fill="#000000" />
  28 + <rect stroke="#000" id="svg_16" height="33" width="4" y="269" x="181" :fill="attribute.svg_16"
  29 + :opacity="attribute.svg_16_opacity" />
  30 + <rect id="svg_17" height="0" width="2" y="368.5" x="187" stroke="#000" fill="#6D97AB" />
  31 + <rect id="svg_18" height="13" width="0" y="290.5" x="167" stroke="#000" fill="#6D97AB" />
  32 + <rect id="svg_20" height="0" width="1" y="193.5" x="281" stroke="#000" fill="#6D97AB" />
  33 + <path stroke="#000" id="svg_21" d="m184,269l299.00001,0l0,33l-299.00001,0l0,-33z" opacity="0.35"
  34 + fill="url(#my-cool-gradient)" />
  35 + </g>
26 36
27 -</svg> 37 + </svg>
28 </div> 38 </div>
29 </template> 39 </template>
30 <script setup lang="ts"> 40 <script setup lang="ts">
@@ -44,7 +54,7 @@ props.chartConfig.attr.h = 100 @@ -44,7 +54,7 @@ props.chartConfig.attr.h = 100
44 props.chartConfig.attr.x = 200 54 props.chartConfig.attr.x = 200
45 props.chartConfig.attr.y = 200 55 props.chartConfig.attr.y = 200
46 56
47 -const { dataset,attribute }= toRefs(props.chartConfig.option) 57 +const { dataset, attribute } = toRefs(props.chartConfig.option)
48 58
49 const { w, h } = toRefs(props.chartConfig.attr) 59 const { w, h } = toRefs(props.chartConfig.attr)
50 60
@@ -56,9 +66,10 @@ const { w, h } = toRefs(props.chartConfig.attr) @@ -56,9 +66,10 @@ const { w, h } = toRefs(props.chartConfig.attr)
56 display: flex; 66 display: flex;
57 align-items: center; 67 align-items: center;
58 justify-content: center; 68 justify-content: center;
59 - .content{  
60 - width:v-bind('w + "px"');  
61 - height:v-bind('h + "px"'); 69 +
  70 + .content {
  71 + width: v-bind('w + "px"');
  72 + height: v-bind('h + "px"');
62 } 73 }
63 } 74 }
64 </style> 75 </style>
@@ -2,11 +2,20 @@ @@ -2,11 +2,20 @@
2 import { ConfigType } from "../index.d" 2 import { ConfigType } from "../index.d"
3 import { matchExternalPrefixReg } from "./useWidgetKey" 3 import { matchExternalPrefixReg } from "./useWidgetKey"
4 4
  5 +const getAllConfigFile = async () => {
  6 + return import.meta.glob('../components/**/config.ts')
  7 +}
  8 +
  9 +const getChartConfigFile = async (path: string) => {
  10 + const fileList = await getAllConfigFile()
  11 + return fileList[path]() as any
  12 +}
5 13
6 export const createComponent = async (configType: ConfigType) => { 14 export const createComponent = async (configType: ConfigType) => {
7 const { key, chartKey, category, package: packageName } = configType 15 const { key, chartKey, category, package: packageName } = configType
8 const hasExternalPrefix = matchExternalPrefixReg.test(chartKey) 16 const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
9 - const chart = await import(`../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`) 17 + const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`
  18 + const chart = await getChartConfigFile(filePath)
10 return new chart.default() 19 return new chart.default()
11 } 20 }
12 21
@@ -101,6 +101,7 @@ const dblclickHandle = async (item: ConfigType) => { @@ -101,6 +101,7 @@ const dblclickHandle = async (item: ConfigType) => {
101 chartEditStore.setTargetSelectChart(newComponent.id) 101 chartEditStore.setTargetSelectChart(newComponent.id)
102 loadingFinish() 102 loadingFinish()
103 } catch (error) { 103 } catch (error) {
  104 + console.log(error)
104 loadingError() 105 loadingError()
105 window['$message'].warning(`图表正在研发中, 敬请期待...`) 106 window['$message'].warning(`图表正在研发中, 敬请期待...`)
106 } 107 }
@@ -161,6 +161,7 @@ const selectChartHandle = async (item: ConfigType) => { @@ -161,6 +161,7 @@ const selectChartHandle = async (item: ConfigType) => {
161 closeHandle() 161 closeHandle()
162 loadingFinish() 162 loadingFinish()
163 } catch (error) { 163 } catch (error) {
  164 + console.log(error)
164 loadingError() 165 loadingError()
165 window['$message'].warning(`图表正在研发中, 敬请期待...`) 166 window['$message'].warning(`图表正在研发中, 敬请期待...`)
166 } 167 }
@@ -32,13 +32,14 @@ export const dragHandle = async (e: DragEvent) => { @@ -32,13 +32,14 @@ export const dragHandle = async (e: DragEvent) => {
32 const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString) 32 const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
33 33
34 // 创建新图表组件 34 // 创建新图表组件
35 - let newComponent: CreateComponentType = await createComponent(dropData) 35 + const newComponent: CreateComponentType = await createComponent(dropData)
36 36
37 setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2) 37 setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
38 chartEditStore.addComponentList(newComponent, false, true) 38 chartEditStore.addComponentList(newComponent, false, true)
39 chartEditStore.setTargetSelectChart(newComponent.id) 39 chartEditStore.setTargetSelectChart(newComponent.id)
40 loadingFinish() 40 loadingFinish()
41 } catch (error) { 41 } catch (error) {
  42 + console.log(error)
42 loadingError() 43 loadingError()
43 window['$message'].warning(`图表正在研发中, 敬请期待...`) 44 window['$message'].warning(`图表正在研发中, 敬请期待...`)
44 } 45 }
@@ -225,7 +226,7 @@ export const useMouseHandle = () => { @@ -225,7 +226,7 @@ export const useMouseHandle = () => {
225 const startY = e.screenY 226 const startY = e.screenY
226 227
227 // 记录历史位置 228 // 记录历史位置
228 - let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = [] 229 + const prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
229 chartEditStore.getTargetChart.selectId.forEach(id => { 230 chartEditStore.getTargetChart.selectId.forEach(id => {
230 if (!targetMap.has(id)) return 231 if (!targetMap.has(id)) return
231 232
@@ -243,8 +244,8 @@ export const useMouseHandle = () => { @@ -243,8 +244,8 @@ export const useMouseHandle = () => {
243 chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY) 244 chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
244 245
245 // 当前偏移量，处理 scale 比例问题 246 // 当前偏移量，处理 scale 比例问题
246 - let offsetX = (moveEvent.screenX - startX) / scale  
247 - let offsetY = (moveEvent.screenY - startY) / scale 247 + const offsetX = (moveEvent.screenX - startX) / scale
  248 + const offsetY = (moveEvent.screenY - startY) / scale
248 249
249 chartEditStore.getTargetChart.selectId.forEach(id => { 250 chartEditStore.getTargetChart.selectId.forEach(id => {
250 if (!targetMap.has(id)) return 251 if (!targetMap.has(id)) return
@@ -354,8 +355,8 @@ export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCrea @@ -354,8 +355,8 @@ export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCrea
354 const mousemove = throttle((moveEvent: MouseEvent) => { 355 const mousemove = throttle((moveEvent: MouseEvent) => {
355 chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY) 356 chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
356 357
357 - let currX = Math.round((moveEvent.screenX - startX) / scale)  
358 - let currY = Math.round((moveEvent.screenY - startY) / scale) 358 + const currX = Math.round((moveEvent.screenX - startX) / scale)
  359 + const currY = Math.round((moveEvent.screenY - startY) / scale)
359 360
360 const isTop = /t/.test(point) 361 const isTop = /t/.test(point)
361 const isBottom = /b/.test(point) 362 const isBottom = /b/.test(point)