From 3b1a8e62bdc45b6402e938e2b814c3804c4d5a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Fri, 29 Mar 2024 14:55:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/components/decoration3/src/main.vue | 186 +++++++++----------
 lib/components/decoration6/src/main.vue | 227 +++++++++++-------------
 2 files changed, 189 insertions(+), 224 deletions(-)

diff --git a/lib/components/decoration3/src/main.vue b/lib/components/decoration3/src/main.vue
index 9928231..1f82160 100644
--- a/lib/components/decoration3/src/main.vue
+++ b/lib/components/decoration3/src/main.vue
@@ -2,25 +2,11 @@
   <div class="dv-decoration-3" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
 
-      <template
-        v-for="(point, i) in points"
-      >
-        <rect
-          :key="i"
-          :fill="mergedColor[0]"
-          :x="point[0] - halfPointSideLength"
-          :y="point[1] - halfPointSideLength"
-          :width="pointSideLength"
-          :height="pointSideLength"
-        >
-          <animate
-            v-if="Math.random() > 0.6"
-            attributeName="fill"
-            :values="`${mergedColor.join(';')}`"
-            :dur="Math.random() + 1 + 's'"
-            :begin="Math.random() * 2"
-            repeatCount="indefinite"
-          />
+      <template v-for="(point, i) in points" :key="i">
+        <rect :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength"
+          :width="pointSideLength" :height="pointSideLength">
+          <animate v-if="Math.random() > 0.6" attributeName="fill" :values="`${mergedColor.join(';')}`"
+            :dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
         </rect>
       </template>
     </svg>
@@ -28,101 +14,101 @@
 </template>
 
 <script>
-import autoResize from '../../../mixin/autoResize'
+  import autoResize from '../../../mixin/autoResize'
 
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+  import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+  import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-export default {
-  name: 'DvDecoration3',
-  mixins: [autoResize],
-  props: {
-    color: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data () {
-    const pointSideLength = 7
+  export default {
+    name: 'DvDecoration3',
+    mixins: [autoResize],
+    props: {
+      color: {
+        type: Array,
+        default: () => ([])
+      }
+    },
+    data() {
+      const pointSideLength = 7
 
-    return {
-      ref: 'decoration-3',
+      return {
+        ref: 'decoration-3',
 
-      svgWH: [300, 35],
+        svgWH: [300, 35],
 
-      svgScale: [1, 1],
+        svgScale: [1, 1],
 
-      rowNum: 2,
-      rowPoints: 25,
+        rowNum: 2,
+        rowPoints: 25,
 
-      pointSideLength,
-      halfPointSideLength: pointSideLength / 2,
+        pointSideLength,
+        halfPointSideLength: pointSideLength / 2,
 
-      points: [],
+        points: [],
 
-      defaultColor: ['#7acaec', 'transparent'],
+        defaultColor: ['#7acaec', 'transparent'],
 
-      mergedColor: []
-    }
-  },
-  watch: {
-    color () {
+        mergedColor: []
+      }
+    },
+    watch: {
+      color() {
+        const { mergeColor } = this
+
+        mergeColor()
+      }
+    },
+    methods: {
+      afterAutoResizeMixinInit() {
+        const { calcSVGData } = this
+
+        calcSVGData()
+      },
+      calcSVGData() {
+        const { calcPointsPosition, calcScale } = this
+
+        calcPointsPosition()
+
+        calcScale()
+      },
+      calcPointsPosition() {
+        const { svgWH, rowNum, rowPoints } = this
+
+        const [w, h] = svgWH
+
+        const horizontalGap = w / (rowPoints + 1)
+        const verticalGap = h / (rowNum + 1)
+
+        let points = new Array(rowNum).fill(0).map((foo, i) =>
+          new Array(rowPoints).fill(0).map((foo, j) => [
+            horizontalGap * (j + 1), verticalGap * (i + 1)
+          ]))
+
+        this.points = points.reduce((all, item) => [...all, ...item], [])
+      },
+      calcScale() {
+        const { width, height, svgWH } = this
+
+        const [w, h] = svgWH
+
+        this.svgScale = [width / w, height / h]
+      },
+      onResize() {
+        const { calcSVGData } = this
+
+        calcSVGData()
+      },
+      mergeColor() {
+        const { color, defaultColor } = this
+
+        this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+      }
+    },
+    mounted() {
       const { mergeColor } = this
 
       mergeColor()
     }
-  },
-  methods: {
-    afterAutoResizeMixinInit () {
-      const { calcSVGData } = this
-
-      calcSVGData()
-    },
-    calcSVGData () {
-      const { calcPointsPosition, calcScale } = this
-
-      calcPointsPosition()
-
-      calcScale()
-    },
-    calcPointsPosition () {
-      const { svgWH, rowNum, rowPoints } = this
-
-      const [w, h] = svgWH
-
-      const horizontalGap = w / (rowPoints + 1)
-      const verticalGap = h / (rowNum + 1)
-
-      let points = new Array(rowNum).fill(0).map((foo, i) =>
-        new Array(rowPoints).fill(0).map((foo, j) => [
-          horizontalGap * (j + 1), verticalGap * (i + 1)
-        ]))
-
-      this.points = points.reduce((all, item) => [...all, ...item], [])
-    },
-    calcScale () {
-      const { width, height, svgWH } = this
-
-      const [w, h] = svgWH
-
-      this.svgScale = [width / w, height / h]
-    },
-    onResize () {
-      const { calcSVGData } = this
-
-      calcSVGData()
-    },
-    mergeColor () {
-      const { color, defaultColor } = this
-
-      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-    }
-  },
-  mounted () {
-    const { mergeColor } = this
-
-    mergeColor()
   }
-}
 </script>
\ No newline at end of file
diff --git a/lib/components/decoration6/src/main.vue b/lib/components/decoration6/src/main.vue
index b044326..a514e06 100644
--- a/lib/components/decoration6/src/main.vue
+++ b/lib/components/decoration6/src/main.vue
@@ -1,37 +1,16 @@
 <template>
   <div class="dv-decoration-6" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
-      <template
-        v-for="(point, i) in points"
-      >
-        <rect
-          :key="i"
-          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
-          :x="point[0] - halfRectWidth"
-          :y="point[1] - heights[i] / 2"
-          :width="rectWidth"
-          :height="heights[i]"
-        >
-          <animate
-            attributeName="y"
+      <template v-for="(point, i) in points" :key="i">
+        <rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :x="point[0] - halfRectWidth"
+          :y="point[1] - heights[i] / 2" :width="rectWidth" :height="heights[i]">
+          <animate attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
-            :dur="`${randoms[i]}s`"
-            keyTimes="0;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-          <animate
-            attributeName="height"
-            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
-            :dur="`${randoms[i]}s`"
-            keyTimes="0;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
+            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            begin="0s" repeatCount="indefinite" />
+          <animate attributeName="height" :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
+            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            begin="0s" repeatCount="indefinite" />
         </rect>
       </template>
     </svg>
@@ -39,115 +18,115 @@
 </template>
 
 <script>
-import autoResize from '../../../mixin/autoResize'
+  import autoResize from '../../../mixin/autoResize'
 
-import { randomExtend } from '../../../util'
+  import { randomExtend } from '../../../util'
 
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+  import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+  import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-export default {
-  name: 'DvDecoration6',
-  mixins: [autoResize],
-  props: {
-    color: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data () {
-    const rectWidth = 7
+  export default {
+    name: 'DvDecoration6',
+    mixins: [autoResize],
+    props: {
+      color: {
+        type: Array,
+        default: () => ([])
+      }
+    },
+    data() {
+      const rectWidth = 7
 
-    return {
-      ref: 'decoration-6',
+      return {
+        ref: 'decoration-6',
 
-      svgWH: [300, 35],
+        svgWH: [300, 35],
 
-      svgScale: [1, 1],
+        svgScale: [1, 1],
 
-      rowNum: 1,
-      rowPoints: 40,
+        rowNum: 1,
+        rowPoints: 40,
 
-      rectWidth,
-      halfRectWidth: rectWidth / 2,
+        rectWidth,
+        halfRectWidth: rectWidth / 2,
 
-      points: [],
-      heights: [],
-      minHeights: [],
-      randoms: [],
+        points: [],
+        heights: [],
+        minHeights: [],
+        randoms: [],
 
-      defaultColor: ['#7acaec', '#7acaec'],
+        defaultColor: ['#7acaec', '#7acaec'],
 
-      mergedColor: []
-    }
-  },
-  watch: {
-    color () {
+        mergedColor: []
+      }
+    },
+    watch: {
+      color() {
+        const { mergeColor } = this
+
+        mergeColor()
+      }
+    },
+    methods: {
+      afterAutoResizeMixinInit() {
+        const { calcSVGData } = this
+
+        calcSVGData()
+      },
+      calcSVGData() {
+        const { calcPointsPosition, calcScale } = this
+
+        calcPointsPosition()
+
+        calcScale()
+      },
+      calcPointsPosition() {
+        const { svgWH, rowNum, rowPoints } = this
+
+        const [w, h] = svgWH
+
+        const horizontalGap = w / (rowPoints + 1)
+        const verticalGap = h / (rowNum + 1)
+
+        let points = new Array(rowNum).fill(0).map((foo, i) =>
+          new Array(rowPoints).fill(0).map((foo, j) => [
+            horizontalGap * (j + 1), verticalGap * (i + 1)
+          ]))
+
+        this.points = points.reduce((all, item) => [...all, ...item], [])
+        const heights = this.heights = new Array(rowNum * rowPoints)
+          .fill(0).map(foo =>
+            Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
+
+        this.minHeights = new Array(rowNum * rowPoints)
+          .fill(0).map((foo, i) => heights[i] * Math.random())
+
+        this.randoms = new Array(rowNum * rowPoints)
+          .fill(0).map(foo => Math.random() + 1.5)
+      },
+      calcScale() {
+        const { width, height, svgWH } = this
+
+        const [w, h] = svgWH
+
+        this.svgScale = [width / w, height / h]
+      },
+      onResize() {
+        const { calcSVGData } = this
+
+        calcSVGData()
+      },
+      mergeColor() {
+        const { color, defaultColor } = this
+
+        this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+      }
+    },
+    mounted() {
       const { mergeColor } = this
 
       mergeColor()
     }
-  },
-  methods: {
-    afterAutoResizeMixinInit () {
-      const { calcSVGData } = this
-
-      calcSVGData()
-    },
-    calcSVGData () {
-      const { calcPointsPosition, calcScale } = this
-
-      calcPointsPosition()
-
-      calcScale()
-    },
-    calcPointsPosition () {
-      const { svgWH, rowNum, rowPoints } = this
-
-      const [w, h] = svgWH
-
-      const horizontalGap = w / (rowPoints + 1)
-      const verticalGap = h / (rowNum + 1)
-
-      let points = new Array(rowNum).fill(0).map((foo, i) =>
-        new Array(rowPoints).fill(0).map((foo, j) => [
-          horizontalGap * (j + 1), verticalGap * (i + 1)
-        ]))
-
-      this.points = points.reduce((all, item) => [...all, ...item], [])
-      const heights = this.heights = new Array(rowNum * rowPoints)
-        .fill(0).map(foo =>
-          Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
-
-      this.minHeights = new Array(rowNum * rowPoints)
-        .fill(0).map((foo, i) => heights[i] * Math.random())
-
-      this.randoms = new Array(rowNum * rowPoints)
-        .fill(0).map(foo => Math.random() + 1.5)
-    },
-    calcScale () {
-      const { width, height, svgWH } = this
-
-      const [w, h] = svgWH
-
-      this.svgScale = [width / w, height / h]
-    },
-    onResize () {
-      const { calcSVGData } = this
-
-      calcSVGData()
-    },
-    mergeColor () {
-      const { color, defaultColor } = this
-
-      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-    }
-  },
-  mounted () {
-    const { mergeColor } = this
-
-    mergeColor()
   }
-}
 </script>
\ No newline at end of file