feat: 新增装饰4 -5

src/packages/components/Decorates/Decorates/Decorates03/config.vue

@@ -24,7 +24,7 @@
     </SettingItemBox>
   </CollapseItem>
 
-  <CollapseItem name="装饰" :expanded="true">
+  <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"
       v-for="(item, index) in optionData.colors"

src/packages/components/Decorates/Decorates/Decorates04/config.ts

@@ -0,0 +1,16 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates04Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#1dc1f5', '#1dc1f5'],
+  // 是否翻转
+  reverse: false
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates04Config.key
+  public chartConfig = cloneDeep(Decorates04Config)
+  public option = option
+}

src/packages/components/Decorates/Decorates/Decorates04/config.vue

@@ -0,0 +1,51 @@
+<template>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="方向">
+      <SettingItem >
+        <n-space>
+        <n-switch v-model:value="optionData.reverse" size="small" />
+          <n-text>开启反向</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <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/Decorates/Decorates04/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates04.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates04Config: ConfigType = {
+  key: 'Decorates04',
+  chartKey: 'VDecorates04',
+  conKey: 'VCDecorates04',
+  title: '装饰-04',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Decorates/Decorates04/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="go-border-04">
+    <svg :width="w" :height="h">
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"
+      />
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${
+          h / 2
+        }`"
+      />
+
+      <polyline
+        :stroke="colors[1]"
+        fill="transparent"
+        stroke-width="3"
+        :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 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 { w, h } = toRefs(props.chartConfig.attr)
+const { colors, reverse } = toRefs(props.chartConfig.option)
+
+const xPos = (pos: number) => {
+  if (!reverse.value) return pos
+  return w.value - pos
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('border-04') {
+}
+</style>

src/packages/components/Decorates/Decorates/Decorates05/config.ts

@@ -0,0 +1,15 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates05Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#00c2ff', '#00c2ff4d'],
+  dur: 3,
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates05Config.key
+  public chartConfig = cloneDeep(Decorates05Config)
+  public option = option
+}

src/packages/components/Decorates/Decorates/Decorates05/config.vue

@@ -0,0 +1,55 @@
+<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>
+
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="速度(s)">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="1"
+          :min="2"
+        ></n-input-number>
+      </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/Decorates/Decorates05/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates05.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates05Config: ConfigType = {
+  key: 'Decorates05',
+  chartKey: 'VDecorates05',
+  conKey: 'VCDecorates05',
+  title: '装饰-05',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Decorates/Decorates05/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="go-border-05">
+    <svg :width="w" :height="h">
+      <polyline
+        :stroke="colors[1]"
+        stroke-width="2"
+        :points="`0, ${h / 2} ${w}, ${h / 2}`"
+      />
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        :points="`5, ${h / 2} ${w * 0.2 - 3}, ${h / 2}`"
+        :stroke-dasharray="`0, ${w * 0.2}`"
+        fill="freeze"
+      >
+        <animate
+          :id="animationId2"
+          attributeName="stroke-dasharray"
+          :values="`0, ${w * 0.2};${w * 0.2}, 0;`"
+          :dur="dur"
+          :begin="`${animationId1}.end`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${w * 0.2}, 0;0, ${w * 0.2}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        :points="`${w * 0.2 + 3}, ${h / 2} ${w * 0.8 - 3}, ${h / 2}`"
+        :stroke-dasharray="`0, ${w * 0.6}`"
+      >
+        <animate
+          :id="animationId4"
+          attributeName="stroke-dasharray"
+          :values="`0, ${w * 0.6};${w * 0.6}, 0`"
+          :dur="dur"
+          :begin="`${animationId3}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${w * 0.6}, 0;0, ${w * 0.6}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        :points="`${w * 0.8 + 3}, ${h / 2} ${w - 5}, ${h / 2}`"
+        :stroke-dasharray="`0, ${w * 0.2}`"
+      >
+        <animate
+          :id="animationId6"
+          attributeName="stroke-dasharray"
+          :values="`0, ${w * 0.2};${w * 0.2}, 0`"
+          :dur="dur"
+          :begin="`${animationId5}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${w * 0.2}, 0;0, ${w * 0.3}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <circle cx="2" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId1"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`0s;${animationId7}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="w * 0.2" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId3"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`${animationId2}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="w * 0.8" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId5"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`${animationId4}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="w - 2" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId7"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`${animationId6}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID } from '@/utils'
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+const id = getUUID()
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dur } = toRefs(props.chartConfig.option)
+const animationId1 = `d10ani1${id}`
+const animationId2 = `d10ani2${id}`
+const animationId3 = `d10ani3${id}`
+const animationId4 = `d10ani4${id}`
+const animationId5 = `d10ani5${id}`
+const animationId6 = `d10ani6${id}`
+const animationId7 = `d10ani7${id}`
+</script>
+
+<style lang="scss" scoped>
+@include go('border-04') {
+}
+</style>

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

@@ -1,5 +1,13 @@
 import { Decorates01Config } from './Decorates01/index'
 import { Decorates02Config } from './Decorates02/index'
 import { Decorates03Config } from './Decorates03/index'
+import { Decorates04Config } from './Decorates04/index'
+import { Decorates05Config } from './Decorates05/index'
 
-export default [Decorates01Config, Decorates02Config, Decorates03Config]
+export default [
+  Decorates01Config,
+  Decorates02Config,
+  Decorates03Config,
+  Decorates04Config,
+  Decorates05Config,
+]