feat: 新增 border

src/packages/components/Decorates/Borders/borderCommon/config.ts

@@ -0,0 +1,12 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import {BorderCommonConfig} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = BorderCommonConfig.key
+  public chartConfig = cloneDeep(BorderCommonConfig)
+  public borderOptions = {
+    colors: ['#6586ec', '#2cf7fe']
+  }
+}

src/packages/components/Decorates/Borders/borderCommon/config.vue

@@ -1,6 +1,35 @@
 <template>
+  <CollapseItem name="颜色" :expanded="true">
+    <!-- <SettingItemBox
+      name="图形"
+      v-for="(item, index) in optionData.borderOptions.colors"
+      :key="index"
+    >
+      <SettingItem :name="`颜色-${index + 1}`">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.borderOptions.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox> -->
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+import Config from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<Config>,
+    required: true
+  }
+})
+console.log(props.optionData)
 </script>

src/packages/components/Decorates/Borders/borderCommon/index.vue

@@ -1,70 +1,60 @@
 <template>
-<div></div>
-  <!-- <div class="bv-border-box-13" ref="domRef">
-    <svg class="bv-border-svg-container" :width="width" :height="height">
+  <div class="bv-border-box-13" ref="domRef">
+    <svg class="bv-border-svg-container" :width="w" :height="h">
       <path
-        :fill="backgroundColor"
-        :stroke="mergedColor[0]"
+        fill="transparent"
+        :stroke="colors[0]"
         :d="`
           M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
-          L ${width - 20} 10 L ${width - 5} 25
-          L ${width - 5} ${height - 5} L 20 ${height - 5}
-          L 5 ${height - 20} L 5 20
+          L ${w - 20} 10 L ${w - 5} 25
+          L ${w - 5} ${h - 5} L 20 ${h - 5}
+          L 5 ${h - 20} L 5 20
         `"
       />
 
       <path
         fill="transparent"
-        stroke-width="3"
+        stroke-w="3"
         stroke-linecap="round"
         stroke-dasharray="10, 5"
-        :stroke="mergedColor[0]"
+        :stroke="colors[0]"
         :d="`M 16 9 L 61 9`"
       />
 
       <path
         fill="transparent"
-        :stroke="mergedColor[1]"
+        :stroke="colors[1]"
         :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
       />
 
       <path
         fill="transparent"
-        :stroke="mergedColor[1]"
-        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${
-          width - 30
-        } ${height - 5}`"
+        :stroke="colors[1]"
+        :d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${
+          w - 30
+        } ${h - 5}`"
       />
     </svg>
 
     <div class="border-box-content">
       <slot></slot>
     </div>
-  </div> -->
+  </div>
 </template>
 
 <script setup lang="ts">
-// import { useBorderBox } from '@/hooks'
-// const props = defineProps({
-//   width: {
-//     type: Number,
-//     default: 200
-//   },
-//   height: {
-//     type: Number,
-//     default: 200
-//   },
-//   color: {
-//     type: Array,
-//     default: () => []
-//   },
-//   backgroundColor: {
-//     type: String,
-//     default: 'transparent'
-//   }
-// })
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
 
-//  const {defaultColor, mergedColor} = useBorderBox(props, ['#6586ec', '#2cf7fe'])
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  },
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors } = toRefs(props.chartConfig.borderOptions)
 </script>
 
 <style lang="scss" scoped></style>