feat: 新增边框05

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

@@ -16,7 +16,7 @@
       :height="h"
       :key="item"
       v-for="item in borders"
-      :class="`${item} border-item`"
+      :class="`border-item ${item}`"
     >
       <polygon
         :fill="colors[0]"
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({

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

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({

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

@@ -99,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { getUUID, alpha } from '@/utils'
 

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

@@ -223,7 +223,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { getUUID } from '@/utils'
 

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

@@ -0,0 +1,19 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Border05Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  borderTitle: '边框-04',
+  borderTitleWidth: 250,
+  borderTitleHeight: 32,
+  borderTitleSize: 18,
+  borderTitleColor: '#fff',
+  colors: ['#1d48c4', '#d3e1f8']
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Border05Config.key
+  public chartConfig = cloneDeep(Border05Config)
+  public option = option
+}

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

@@ -0,0 +1,42 @@
+<template>
+  <CollapseItem name="边框" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/Borders/Border05/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border05.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border05Config: ConfigType = {
+  key: 'Border05',
+  chartKey: 'VBorder05',
+  conKey: 'VCBorder05',
+  title: '边框-05',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="go-border-box"  :style="`box-shadow: inset 0 0 25px 3px ${colors[0]}`">
+    <svg :width="w" :height="h">
+      <polygon fill="transparent" :points="`
+        4, 0 ${w - 4}, 0 ${w}, 4 ${w}, ${h - 4} ${w - 4}, ${h}
+        4, ${h} 0, ${h - 4} 0, 4
+      `"/>
+    </svg>
+
+    <svg
+      :width="w"
+      :height="h"
+      :key="item"
+      v-for="item in border"
+      :class="`border-item ${item}`"
+    >
+      <polygon
+        :fill="colors[1]"
+        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+  .border-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .right-top {
+    right: 0;
+    transform: rotateY(180deg);
+  }
+  .left-bottom {
+    bottom: 0;
+    transform: rotateX(180deg);
+  }
+  .right-bottom {
+    right: 0;
+    bottom: 0;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+}
+</style>

src/packages/components/Decorates/Borders/index.ts

@@ -2,5 +2,12 @@ import { Border01Config } from './Border01/index'
 import { Border02Config } from './Border02/index'
 import { Border03Config } from './Border03/index'
 import { Border04Config } from './Border04/index'
+import { Border05Config } from './Border05/index'
 
-export default [Border01Config, Border02Config, Border03Config, Border04Config]
+export default [
+  Border01Config,
+  Border02Config,
+  Border03Config,
+  Border04Config,
+  Border05Config
+]