feat: 新增装饰组件01

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

@@ -4,8 +4,10 @@ import { Decorates01Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#4fd2dd', '#235fa7'],
+  colors: ['#3faacb', '#fff'],
-  backgroundColor: '#00000000'
+  dur: 3,
+  lineHeight: 2,
+  endWidth: 5
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

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

@@ -1,6 +1,69 @@
 <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>
+    <SettingItemBox name="具体">
+      <SettingItem name="线条高度">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.lineHeight"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="末端长度">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.endWidth"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="速度">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></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/Decorates01/index.vue

@@ -1,24 +1,47 @@
 <template>
-  <div>
+  <svg :width="w" :height="h">
-    装饰
+    <rect :x="rectX" :y="rectY" :width="w" :height="lineHeight" :fill="colors[0]">
-  </div>
+      <animate
+        attributeName="width"
+        from="0"
+        :to="w"
+        :dur="`${dur}s`"
+        calcMode="spline"
+        keyTimes="0;1"
+        keySplines=".42,0,.58,1"
+        repeatCount="indefinite"
+      />
+    </rect>
+
+    <rect :x="rectX" :y="rectY" :width="endWidth" :height="lineHeight" :fill="colors[1]">
+      <animate
+        attributeName="x"
+        from="0"
+        :to="w"
+        :dur="`${dur}s`"
+        calcMode="spline"
+        keyTimes="0;1"
+        keySplines="0.42,0,0.58,1"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, computed, toRefs, reactive } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true
+    required: true,
-  }
+  },
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dur, endWidth, lineHeight } = toRefs(props.chartConfig.option)
 
+const rectX = computed(() => 0)
+const rectY = computed(() => h.value / 2)
 </script>
-
-<style lang="scss" scoped>
-
-</style>