feat: 新增边框

package.json

@@ -8,8 +8,10 @@
     "new": "plop --plopfile ./plop/plopfile.js"
   },
   "dependencies": {
+    "@types/color": "^3.0.3",
     "animate.css": "^4.1.1",
     "axios": "0.23.0",
+    "color": "^4.2.1",
     "crypto-ts": "^1.0.2",
     "highlight.js": "^11.5.0",
     "naive-ui": "^2.25.2",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@types/color': ^3.0.3
   '@types/node': ^16.11.1
   '@typescript-eslint/eslint-plugin': ^5.6.0
   '@typescript-eslint/parser': ^5.6.0
@@ -12,6 +13,7 @@ specifiers:
   '@vueuse/core': ^7.3.0
   animate.css: ^4.1.1
   axios: 0.23.0
+  color: ^4.2.1
   crypto-ts: ^1.0.2
   default-passive-events: ^2.0.0
   echarts: ^5.3.0
@@ -45,8 +47,10 @@ specifiers:
   vue3-sketch-ruler: ^1.3.3
 
 dependencies:
+  '@types/color': registry.npmjs.org/@types/color/3.0.3
   animate.css: r2.cnpmjs.org/animate.css/4.1.1
   axios: rg.cnpmjs.org/axios/0.23.0
+  color: registry.npmjs.org/color/4.2.1
   crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
   highlight.js: registry.npmjs.org/highlight.js/11.5.0
   naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24
@@ -1764,6 +1768,28 @@ packages:
     version: 0.8.0
     dev: false
 
+  registry.npmjs.org/@types/color-convert/2.0.0:
+    resolution: {integrity: sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz}
+    name: '@types/color-convert'
+    version: 2.0.0
+    dependencies:
+      '@types/color-name': registry.npmjs.org/@types/color-name/1.1.1
+    dev: false
+
+  registry.npmjs.org/@types/color-name/1.1.1:
+    resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz}
+    name: '@types/color-name'
+    version: 1.1.1
+    dev: false
+
+  registry.npmjs.org/@types/color/3.0.3:
+    resolution: {integrity: sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz}
+    name: '@types/color'
+    version: 3.0.3
+    dependencies:
+      '@types/color-convert': registry.npmjs.org/@types/color-convert/2.0.0
+    dev: false
+
   registry.npmjs.org/@types/jest/27.4.0:
     resolution: {integrity: sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/jest/-/jest-27.4.0.tgz}
     name: '@types/jest'
@@ -1870,6 +1896,25 @@ packages:
     name: color-name
     version: 1.1.4
 
+  registry.npmjs.org/color-string/1.9.0:
+    resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz}
+    name: color-string
+    version: 1.9.0
+    dependencies:
+      color-name: registry.npmjs.org/color-name/1.1.4
+      simple-swizzle: registry.npmjs.org/simple-swizzle/0.2.2
+    dev: false
+
+  registry.npmjs.org/color/4.2.1:
+    resolution: {integrity: sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/color/-/color-4.2.1.tgz}
+    name: color
+    version: 4.2.1
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: registry.npmjs.org/color-convert/2.0.1
+      color-string: registry.npmjs.org/color-string/1.9.0
+    dev: false
+
   registry.npmjs.org/commander/9.1.0:
     resolution: {integrity: sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/commander/-/commander-9.1.0.tgz}
     name: commander
@@ -2163,6 +2208,12 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: false
 
+  registry.npmjs.org/is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz}
+    name: is-arrayish
+    version: 0.3.2
+    dev: false
+
   registry.npmjs.org/jest-diff/27.5.1:
     resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz}
     name: jest-diff
@@ -2284,6 +2335,14 @@ packages:
       '@types/jest': registry.npmjs.org/@types/jest/27.4.0
     dev: false
 
+  registry.npmjs.org/simple-swizzle/0.2.2:
+    resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz}
+    name: simple-swizzle
+    version: 0.2.2
+    dependencies:
+      is-arrayish: registry.npmjs.org/is-arrayish/0.3.2
+    dev: false
+
   registry.npmjs.org/supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz}
     name: supports-color

src/hooks/useTheme.hook.ts

@@ -2,7 +2,7 @@ import { computed, toRefs } from 'vue'
 import { darkTheme, GlobalThemeOverrides } from 'naive-ui'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { borderRadius } from '@/settings/designSetting'
-import { toLight } from '@/utils'
+import { alpha, lighten } from '@/utils'
 
 /**
  * * 设置全局主题
@@ -16,8 +16,8 @@ export const useThemeOverridesHook = () => {
       const commonObj = {
         common: {
           primaryColor: getAppTheme.value,
-          primaryColorHover: toLight(getAppTheme.value, 6),
-          primaryColorPressed: toLight(getAppTheme.value, 6),
+          primaryColorHover: lighten(alpha(getAppTheme.value), 0.1),
+          primaryColorPressed: lighten(alpha(getAppTheme.value), 0.1),
           primaryColorSuppl: getAppTheme.value,
           borderRadius
         }

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

@@ -1,15 +1,15 @@
 import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import {BorderFirstConfig} from './index'
+import { Border01Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   dur: 0.5,
   colors: ['#4fd2dd', '#235fa7']
-} 
+}
 
 export default class Config extends publicConfig implements CreateComponentType {
-  public key = BorderFirstConfig.key
-  public chartConfig = cloneDeep(BorderFirstConfig)
+  public key = Border01Config.key
+  public chartConfig = cloneDeep(Border01Config)
   public option = option
 }

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

@@ -1,11 +1,11 @@
-import image from '@/assets/images/chart/decorates/border_first.png'
+import image from '@/assets/images/chart/decorates/border01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const BorderFirstConfig: ConfigType = {
-  key: 'BorderFirst',
-  chartKey: 'VBorderFirst',
-  conKey: 'VCBorderFirst',
+export const Border01Config: ConfigType = {
+  key: 'Border01',
+  chartKey: 'VBorder01',
+  conKey: 'VCBorder01',
   title: '边框-01',
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,

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

@@ -72,14 +72,7 @@ const props = defineProps({
 const borders = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
 
 const { w, h } = toRefs(props.chartConfig.attr)
-
-const colors = computed(() => {
-  return props.chartConfig.option.colors
-})
-
-const dur = computed(() => {
-  return props.chartConfig.option.dur
-})
+const { colors, dur } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,6 @@
 import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { BorderThirteenthConfig } from './index'
+import { Border02Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
@@ -9,7 +9,7 @@ export const option = {
 
 export default class Config extends publicConfig
   implements CreateComponentType {
-  public key = BorderThirteenthConfig.key
-  public chartConfig = cloneDeep(BorderThirteenthConfig)
+  public key = Border02Config.key
+  public chartConfig = cloneDeep(Border02Config)
   public option = option
 }

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

@@ -1,12 +1,12 @@
-import image from '@/assets/images/chart/decorates/border_thirteenth.png'
+import image from '@/assets/images/chart/decorates/border02.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const BorderThirteenthConfig: ConfigType = {
-  key: 'BorderThirteenth',
-  chartKey: 'VBorderThirteenth',
-  conKey: 'VCBorderThirteenth',
-  title: '边框-13',
+export const Border02Config: ConfigType = {
+  key: 'Border02',
+  chartKey: 'VBorder02',
+  conKey: 'VCBorder02',
+  title: '边框-02',
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,

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

@@ -48,10 +48,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-
-const colors = computed(() => {
-  return props.chartConfig.option.colors
-})
+const { colors } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

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

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

src/packages/components/Decorates/Borders/Border03/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/Border03/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border03.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border03Config: ConfigType = {
+  key: 'Border03',
+  chartKey: 'VBorder03',
+  conKey: 'VCBorder03',
+  title: '边框-03',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,122 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology
+            operator="dilate"
+            radius="1"
+            in="SourceAlpha"
+            result="thicken"
+          />
+          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
+          <feFlood :flood-color="alpha(colors[1], 0.7)" result="glowColor">
+            <animate
+              attributeName="flood-color"
+              :values="`
+                ${alpha(colors[1], 0.7)};
+                ${alpha(colors[1], 0.3)};
+                ${alpha(colors[1], 0.7)};
+              `"
+              dur="3s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </feFlood>
+          <feComposite
+            in="glowColor"
+            in2="blurred"
+            operator="in"
+            result="softGlowColored"
+          />
+          <feMerge>
+            <feMergeNode in="softGlowColored" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <path
+        v-if="w && h"
+        fill="transparent"
+        stroke-width="2"
+        :stroke="colors[0]"
+        :d="`
+          M15 5 L ${w - 15} 5 Q ${w - 5} 5, ${w - 5} 15
+          L ${w - 5} ${h - 15} Q ${w - 5} ${h - 5}, ${w - 15} ${h - 5}
+          L 15, ${h - 5} Q 5 ${h - 5} 5 ${h - 15} L 5 15
+          Q 5 5 15 5
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="colors[1]"
+        :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="colors[1]"
+        :d="`M ${w - 20} 5 L ${w - 15} 5 Q ${w - 5} 5 ${w - 5} 15 L ${
+          w - 5
+        } 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="colors[1]"
+        :d="`
+          M ${w - 20} ${h - 5} L ${w - 15} ${h - 5}
+          Q ${w - 5} ${h - 5} ${w - 5} ${h - 15}
+          L ${w - 5} ${h - 20}
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="colors[1]"
+        :d="`
+          M 20 ${h - 5} L 15 ${h - 5}
+          Q 5 ${h - 5} 5 ${h - 15}
+          L 5 ${h - 20}
+        `"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID, alpha } from '@/utils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+const filterId = `border-box-03-filterId-${getUUID()}`
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors } = toRefs(props.chartConfig.option)
+
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+}
+</style>

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

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

src/packages/components/Decorates/Borders/Border04/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/Border04/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border04.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border04Config: ConfigType = {
+  key: 'Border04',
+  chartKey: 'VBorder04',
+  conKey: 'VCBorder04',
+  title: '边框-04',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,245 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <defs>
+        <filter :id="filterId" h="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology
+            operator="dilate"
+            radius="2"
+            in="SourceAlpha"
+            result="thicken"
+          />
+          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+          <feFlood :flood-color="colors[1]" result="glowColor" />
+          <feComposite
+            in="glowColor"
+            in2="blurred"
+            operator="in"
+            result="softGlowColored"
+          />
+          <feMerge>
+            <feMergeNode in="softGlowColored" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <polygon
+        fill="transparent"
+        :points="`
+        20, 32 ${w * 0.5 - borderTitleWidth / 2}, 32 ${w * 0.5 - borderTitleWidth / 2 + 20}, 53
+        ${w * 0.5 + borderTitleWidth / 2 - 20}, 53 ${w * 0.5 + borderTitleWidth / 2}, 32
+        ${w - 20}, 32 ${w - 8}, 48 ${w - 8}, ${h - 25} ${w - 20}, ${h - 8}
+        20, ${h - 8} 8, ${h - 25} 8, 50
+      `"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="colors[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(w - borderTitleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (h - 167) / 2}
+          13, ${55 + (h - 167) / 2} 13, ${135 + (h - 167) / 2}
+          7, ${140 + (h - 167) / 2} 7, ${h - 27}
+          20, ${h - 7} ${w - 20}, ${h - 7} ${w - 7}, ${h - 27}
+          ${w - 7}, ${140 + (h - 167) / 2} ${w - 13}, ${135 + (h - 167) / 2}
+          ${w - 13}, ${55 + (h - 167) / 2} ${w - 7}, ${50 + (h - 167) / 2}
+          ${w - 7}, 50 ${w - 20}, 30 ${(w + borderTitleWidth) / 2}, 30
+          ${(w + borderTitleWidth) / 2 - 20}, 7 ${(w - borderTitleWidth) / 2 + 20}, 7
+          ${(w - borderTitleWidth) / 2}, 30 ${(w - borderTitleWidth) / 2 + 20}, 52
+          ${(w + borderTitleWidth) / 2 - 20}, 52 ${(w + borderTitleWidth) / 2}, 30
+        `"
+      />
+
+      <polygon
+        :stroke="colors[0]"
+        fill="transparent"
+        :points="`
+          ${(w + borderTitleWidth) / 2 - 5}, 30 ${(w + borderTitleWidth) / 2 - 21}, 11
+          ${(w + borderTitleWidth) / 2 - 27}, 11 ${(w + borderTitleWidth) / 2 - 8}, 34
+        `"
+      />
+
+      <polygon
+        :stroke="colors[0]"
+        fill="transparent"
+        :points="`
+          ${(w - borderTitleWidth) / 2 + 5}, 30 ${(w - borderTitleWidth) / 2 + 22}, 49
+          ${(w - borderTitleWidth) / 2 + 28}, 49 ${(w - borderTitleWidth) / 2 + 8}, 26
+        `"
+      />
+
+      <polygon
+        :stroke="colors[0]"
+        :fill="colors[1]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(w + borderTitleWidth) / 2 - 11}, 37 ${(w + borderTitleWidth) / 2 - 32}, 11
+          ${(w - borderTitleWidth) / 2 + 23}, 11 ${(w - borderTitleWidth) / 2 + 11}, 23
+          ${(w - borderTitleWidth) / 2 + 33}, 49 ${(w + borderTitleWidth) / 2 - 22}, 49
+        `"
+      />
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="colors[0]"
+        opacity="1"
+        :points="`
+          ${(w - borderTitleWidth) / 2 - 10}, 37 ${(w - borderTitleWidth) / 2 - 31}, 37
+          ${(w - borderTitleWidth) / 2 - 25}, 46 ${(w - borderTitleWidth) / 2 - 4}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="colors[0]"
+        opacity="0.7"
+        :points="`
+          ${(w - borderTitleWidth) / 2 - 40}, 37 ${(w - borderTitleWidth) / 2 - 61}, 37
+          ${(w - borderTitleWidth) / 2 - 55}, 46 ${(w - borderTitleWidth) / 2 - 34}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="colors[0]"
+        opacity="0.5"
+        :points="`
+          ${(w - borderTitleWidth) / 2 - 70}, 37 ${(w - borderTitleWidth) / 2 - 91}, 37
+          ${(w - borderTitleWidth) / 2 - 85}, 46 ${(w - borderTitleWidth) / 2 - 64}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="colors[0]"
+        opacity="1"
+        :points="`
+          ${(w + borderTitleWidth) / 2 + 30}, 37 ${(w + borderTitleWidth) / 2 + 9}, 37
+          ${(w + borderTitleWidth) / 2 + 3}, 46 ${(w + borderTitleWidth) / 2 + 24}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="colors[0]"
+        opacity="0.7"
+        :points="`
+          ${(w + borderTitleWidth) / 2 + 60}, 37 ${(w + borderTitleWidth) / 2 + 39}, 37
+          ${(w + borderTitleWidth) / 2 + 33}, 46 ${(w + borderTitleWidth) / 2 + 54}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="colors[0]"
+        opacity="0.5"
+        :points="`
+          ${(w + borderTitleWidth) / 2 + 90}, 37 ${(w + borderTitleWidth) / 2 + 69}, 37
+          ${(w + borderTitleWidth) / 2 + 63}, 46 ${(w + borderTitleWidth) / 2 + 84}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <text
+        :x="`${w / 2}`"
+        :y="borderTitleHeight"
+        :fill="borderTitleColor"
+        :font-size="borderTitleSize"
+        text-anchor="middle"
+        dominant-baseline="middle"
+      >
+        {{ borderTitle }}
+      </text>
+
+      <polygon
+        :fill="colors[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          7, ${53 + (h - 167) / 2} 11, ${57 + (h - 167) / 2}
+          11, ${133 + (h - 167) / 2} 7, ${137 + (h - 167) / 2}
+        `"
+      />
+
+      <polygon
+        :fill="colors[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${w - 7}, ${53 + (h - 167) / 2} ${w - 11}, ${57 + (h - 167) / 2}
+          ${w - 11}, ${133 + (h - 167) / 2} ${w - 7}, ${137 + (h - 167) / 2}
+        `"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID } from '@/utils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const filterId = `border-box-04-filterId-${getUUID()}`
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, borderTitle, borderTitleColor, borderTitleSize, borderTitleHeight, borderTitleWidth} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+}
+</style>

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

@@ -1,4 +1,6 @@
-import { BorderThirteenthConfig } from './BorderThirteenth/index'
-import { BorderFirstConfig } from './BorderFirst/index'
+import { Border01Config } from './Border01/index'
+import { Border02Config } from './Border02/index'
+import { Border03Config } from './Border03/index'
+import { Border04Config } from './Border04/index'
 
-export default [BorderFirstConfig, BorderThirteenthConfig]
+export default [Border01Config, Border02Config, Border03Config, Border04Config]

src/utils/style.ts

@@ -1,4 +1,48 @@
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import Color from 'color'
+
+/**
+ * * hsla 转换 
+ * @param color 颜色
+ * @param alpha 默认1
+ * @returns 
+ */
+export function alpha(color: string, alpha = 1 ) {
+  return Color(color).alpha(alpha).toString()
+}
+
+/**
+ * * 颜色透明
+ * rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
+ * @param color 颜色
+ * @param concentration 0~1 浓度
+ * @returns 
+ */
+export function fade(color: string, fade: number) {
+  return Color(color).fade(fade).toString()
+}
+
+/**
+ * * 颜色变亮
+ * hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
+ * @param color 颜色
+ * @param concentration 0~1 浓度
+ * @returns 
+ */
+export function lighten(color: string, concentration: number) {
+  return Color(color).lighten(concentration).toString()
+}
+
+/**
+ * * 颜色变暗
+ * hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
+ * @param color 颜色
+ * @param concentration 0~1 浓度
+ * @returns 
+ */
+export function darken(color: string, concentration: number) {
+  return Color(color).darken(concentration).toString()
+}
 
 /**
  * * 修改主题色
@@ -13,31 +57,4 @@ export const setHtmlTheme = (themeName?: string) => {
   }
   const designStore = useDesignStore()
   e.setAttribute('data-theme', designStore.themeName)
-}
-
-/**
- * * 将通过的百分比与十六进制颜色的R、G或B相加
- * @param {string} color
- * @param {number} amount
- * @returns {string} color
- */
-const addLight = (color: string, amount: number): string => {
-  const cc = parseInt(color, 16) + amount
-  const c = cc > 255 ? 255 : cc
-  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
-}
-
-/**
- * * 根据通过的百分比点亮6个字符的十六进制颜色
- * @param {string} color
- * @param {number} amount
- * @returns {string} color
- */
-export const toLight = (color: string, amount: number): string => {
-  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
-  amount = Math.trunc((255 * amount) / 100)
-  return `#${addLight(color.substring(0, 2), amount)}${addLight(
-    color.substring(2, 4),
-    amount
-  )}${addLight(color.substring(4, 6), amount)}`
-}
+}

src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@@ -74,7 +74,7 @@ const selectId = computed(() => chartEditStore.getTargetChart.selectId)
 const selectTatget = computed(
   () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
 )
-const selectAttr = computed(() => selectTatget.value.attr || {})
+const selectAttr = computed(() => selectTatget.value?.attr || {})
 
 // * 画布坐标
 const canvasPositionList = computed(() => {