From 3d4e05b514ca179981ad6a8fbb5f04bea254525e Mon Sep 17 00:00:00 2001
From: Wang sc <1044262505@qq.com>
Date: Fri, 26 May 2023 18:07:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=AE=A1=E9=81=93?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/decorates/Pipeline_H.png     | Bin 0 -> 999 bytes
 .../images/chart/decorates/Pipeline_V.png     | Bin 0 -> 983 bytes
 .../Decorates/Mores/PipelineH/config.ts       |  19 +++
 .../Decorates/Mores/PipelineH/config.vue      |  77 ++++++++++
 .../Decorates/Mores/PipelineH/index.ts        |  13 ++
 .../Decorates/Mores/PipelineH/index.vue       | 141 ++++++++++++++++++
 .../Decorates/Mores/PipelineV/config.ts       |  19 +++
 .../Decorates/Mores/PipelineV/config.vue      |  77 ++++++++++
 .../Decorates/Mores/PipelineV/index.ts        |  14 ++
 .../Decorates/Mores/PipelineV/index.vue       | 115 ++++++++++++++
 .../components/Decorates/Mores/index.ts       |   4 +-
 11 files changed, 478 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/chart/decorates/Pipeline_H.png
 create mode 100644 src/assets/images/chart/decorates/Pipeline_V.png
 create mode 100644 src/packages/components/Decorates/Mores/PipelineH/config.ts
 create mode 100644 src/packages/components/Decorates/Mores/PipelineH/config.vue
 create mode 100644 src/packages/components/Decorates/Mores/PipelineH/index.ts
 create mode 100644 src/packages/components/Decorates/Mores/PipelineH/index.vue
 create mode 100644 src/packages/components/Decorates/Mores/PipelineV/config.ts
 create mode 100644 src/packages/components/Decorates/Mores/PipelineV/config.vue
 create mode 100644 src/packages/components/Decorates/Mores/PipelineV/index.ts
 create mode 100644 src/packages/components/Decorates/Mores/PipelineV/index.vue

diff --git a/src/assets/images/chart/decorates/Pipeline_H.png b/src/assets/images/chart/decorates/Pipeline_H.png
new file mode 100644
index 0000000000000000000000000000000000000000..f28bac9aaa90ce94da15b3388f44a6a5a9bfc31e
GIT binary patch
literal 999
zcmeAS@N?(olHy`uVBq!ia0vp^JwTko!2~34Z}o2jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$Aj3=GUQo-U3d6>)Fxp7p<6AanfVx9eqVa(Wsv
zJQN&ilvX@^aJW%`KWop6yOaMh{)_*|8+WDo<BN+g8U^H)qy$O~+>T#U-~YBwaYtiA
z+2Z+6K6gdl(vQBn?{ZLt#<QI(Bb$p(Z|OM^Ue#LEGm$|?MAP=jpIcQo?p$2`a`Bp1
ziPc3nCTvQZ+IIX)((E_i@6Ot!Q~qn$$~O!C1xJ=uXNYRQyHaBn6W*6S!>g?<bBjf#
zZeG>N)hQWAs;sAQ21^!R5!KAn+-*?vIxzKL;>$}(8@As1_0h18snc-Rk0mzc=jZOY
z6catoukb>No7(w%wN@303k%X#ZQUkgX7+R|(2P!#pyx03a^8p>OTRmFc3r7!*y-u{
z(%XbhZOfmz6+T+U^Y-D#g*&Z{CfYyk=H8^`{BwehquSfvfNi_%)NlH2*eh5WYUwq_
zSiybLnJKD=zn<{tla2hkJuG#SPRRb#i+P?pe`@(Q!RUJBuF0RL*2r<~^<8bTW%sAN
z--lP9$dAZd`t^18og33~zAiPtcPaa+$ePBW4LgO*Y=c++`aS*L^6j5Y_KKeJs@nDX
zS5lbXrAGnr*ID<;L=^3vpyOWm;%Z80+q7t-HAzN1<xjt?Xm1vEw)}J}#V^ux{TBZJ
zea<qf{Xs?cl4U+e8l6wMNWJ_pSNr$g>g)0n&8<~Ezr`7p852|(dRQ7JG8hOkxG^2@
z*qN^7c53gt?OGb`5}cUQ3>bo^Z1=rnZ^-}Uh%l(3?*6uA|9-T_Ifd1g#p{2)C1~&B
zw)3C|gWtoFbgON~AD_$G^<DZk=g!K6{fEx%h_jOWf7|U1dzETxe`rW$z<L?y4T0US
zez}R-+znI*ISOK{#a#U~|B^`6Z+ff0{rNBUMCr1O#lhbDkJ7T=|Jraqy!=n!;r$O(
zElOW~pBOT?Zo%{ky)~8VrdPcU@hdMevbnnu;XtrYF}(t}39HHzN<qKPF9n@X5$xQb
zzU}yqdPZoFAq<*Qz2~V3!@VLYCPcU{DR(i{-RovK<<7RWPkZ77PfeT{_ipx?|CjdX
ke+c>4fBgF2^Ts{**E`5_RDL)S56qklp00i_>zopr00w=!!2kdN

literal 0
HcmV?d00001

diff --git a/src/assets/images/chart/decorates/Pipeline_V.png b/src/assets/images/chart/decorates/Pipeline_V.png
new file mode 100644
index 0000000000000000000000000000000000000000..cffc5d8d07507b6c3162c7db36a68f489cfdd998
GIT binary patch
literal 983
zcmeAS@N?(olHy`uVBq!ia0vp^JwTko!2~34Z}o2jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$Aj3=GUUo-U3d6>)Fx`ukrlkU9SG+x5~lIZcZM
zgg6BL3tlPsaK2H1FKf?>yR-QZEIxm-eIfhfi;FKZD^^VqC^*H|lb3z{+WTGi50>~?
zioAUO{Q1<h%>8$ly_-Aj;iPl(A|tk~*pPF)%Xz8!iUSgy2RtWUa@Mg~<9;`J@63Cr
zmdWv{EpD4)zTB$Pbv@sS*Y_+#`X1}v+Zwv^`mdF9E+xDOQQOmcwIm{ZUHVP0wxzE^
zQvdl~`ue+n(!!}Po-d5Kamwq_LXW})UQbW5pH~l?ADX}BJ6~Dz`}j#a)D4$ii@y>k
zS6#e)S9SCy&6lNjy+2>>kL!z%){c+k__l3PS+Lyd`Rzp$-A>JWx9D48W!cT>UGiqz
zQa6_sAJ*Dgc>VjdccIVnPH!-=tWJEo&?jYOZ2V+j$y0hen|;{)oqkIFni*15?QWm6
zU(vm@==c+lNi&O5BKi;iTc|wy;lXu2zqEU0cTQdSW|B2e+mzjJUizI2|5U8;X|~@}
zr}W>CFFxO1c%y7jXTtyJOLmiT)}H<T@0s<}X>&Jbt=}nIS{uFc+H&)M*ZGUg|LRPc
z{-wnH%jq?HJiV3v?pr5*s!{d5_^;Q65<lBFX*wTY9p$&wzQ?Ml>dN7doZdS>-S{`>
z)1-Zu<^J09dEVJSb<+OHiD^oHGC_KmJQl~tRNifm|0SHf;ezDj*W3*g84QFN+?Wn{
zFf`bI$=0zeHIIAQdogSM{1>J!^_ARytp`0?)3x2S_B`y@TG8Oskuv@Cxi3f0Ecz~a
zu*ah>cx{T<-t!zbcNr5@7<yQcOq1YbP=*K|Xz}nAa6LX3s>d-TKMkmd;m-wr2Kz6~
zK#Rdj4HPG>s(iZiCP-DIJJd-CLr_d^;GFm<%=*sF^Ey@Y1$itdO;R|aQ`Ih5v5OgD
znvlLAL&J2A1)q;YEx>dj(3px&28Pa?(>Wfz<YR(57iiNAfzIh17Oe-(FI}3+_)l%q
zf2RGNJgf+LXo$5Q_x59cpt@WU7J?F-4!;6h-@ee*T41py{n`3gybEI_Uw*Au`)>c`
mynlt>|6`Y>|Gkd9rtia%Z4&%;%T-`zWbkzLb6Mw<&;$UAdA8I5

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Mores/PipelineH/config.ts b/src/packages/components/Decorates/Mores/PipelineH/config.ts
new file mode 100644
index 00000000..6df11312
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/config.ts
@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { PipelineHConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  color_type: 1,
+  o_color: '#0a7ae2',
+  i_color: '#119bfa',
+  line_class: 'svg_ani_flow'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = PipelineHConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 15, zIndex: -1 }
+  public chartConfig = cloneDeep(PipelineHConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Decorates/Mores/PipelineH/config.vue b/src/packages/components/Decorates/Mores/PipelineH/config.vue
new file mode 100644
index 00000000..bc039e8e
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/config.vue
@@ -0,0 +1,77 @@
+<template>
+  <CollapseItem name="管道" :expanded="true">
+    <SettingItemBox name="默认颜色">
+      <SettingItem>
+        <n-select v-model:value="optionData.color_type" :options="colorOptions" @update:value="handleColorChange" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="管道颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.o_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="水流颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.i_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="流向">
+      <SettingItem>
+        <n-select v-model:value="optionData.line_class" :options="options" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const options = ref([
+  {
+    value: 'svg_ani_flow',
+    label: '正向'
+  },
+  {
+    value: 'svg_ani_flow_back',
+    label: '反向'
+  },
+  {
+    value: 'svg_ani_flow_stop',
+    label: '停止'
+  }
+])
+
+const colorOptions = ref([
+  {
+    value: 1,
+    label: '蓝'
+  },
+  {
+    value: 2,
+    label: '黄'
+  }
+])
+
+// 默认颜色
+const handleColorChange = (e: number) => {
+  switch (e) {
+    case 1:
+      props.optionData.o_color = '#0a7ae2'
+      props.optionData.i_color = '#119bfa'
+      break
+    case 2:
+      props.optionData.o_color = '#ff9d00'
+      props.optionData.i_color = '#f7ea37'
+      break
+  }
+}
+</script>
diff --git a/src/packages/components/Decorates/Mores/PipelineH/index.ts b/src/packages/components/Decorates/Mores/PipelineH/index.ts
new file mode 100644
index 00000000..5f612871
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/index.ts
@@ -0,0 +1,13 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PipelineHConfig: ConfigType = {
+  key: 'PipelineH',
+  chartKey: 'VPipelineH',
+  conKey: 'VCPipelineH',
+  title: '管道-横向',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image: 'Pipeline_H.png'
+}
diff --git a/src/packages/components/Decorates/Mores/PipelineH/index.vue b/src/packages/components/Decorates/Mores/PipelineH/index.vue
new file mode 100644
index 00000000..15da8449
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="go-decorates-line">
+    <svg :width="w" :height="h">
+      <line :x1="0" :y1="h / 2" :x2="w" :y2="h / 2" :stroke="o_color" :stroke-width="h"></line>
+      <line :x1="0" :y1="h / 2" :x2="w" :y2="h / 2" :stroke="i_color" :stroke-width="h / 2" :class="line_class"></line>
+    </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 { o_color, i_color, line_class } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-decorates-line {
+  font-size: 0;
+}
+
+/* 正向流动效果 */
+.svg_ani_flow {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+@-webkit-keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+
+/* 停止流动效果 */
+.svg_ani_flow_stop {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_stop 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_stop 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+/* 反向流动效果 */
+.svg_ani_flow_back {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_back 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_back 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_back {
+  from {
+    stroke-dasharray: 13, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+/* 以最大40高度填充 */
+.svg_ani_fill_h40 {
+  animation: ani_fill_h40 5s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_fill_h40 5s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_fill_h40 {
+  from {
+    height: 0px;
+  }
+
+  to {
+    height: 40px;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+</style>
diff --git a/src/packages/components/Decorates/Mores/PipelineV/config.ts b/src/packages/components/Decorates/Mores/PipelineV/config.ts
new file mode 100644
index 00000000..e3029751
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/config.ts
@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { PipelineVConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  color_type: 1,
+  o_color: '#0a7ae2',
+  i_color: '#119bfa',
+  line_class: 'svg_ani_flow'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = PipelineVConfig.key
+  public attr = { ...chartInitConfig, w: 15, h: 500, zIndex: -1 }
+  public chartConfig = cloneDeep(PipelineVConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Decorates/Mores/PipelineV/config.vue b/src/packages/components/Decorates/Mores/PipelineV/config.vue
new file mode 100644
index 00000000..bc039e8e
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/config.vue
@@ -0,0 +1,77 @@
+<template>
+  <CollapseItem name="管道" :expanded="true">
+    <SettingItemBox name="默认颜色">
+      <SettingItem>
+        <n-select v-model:value="optionData.color_type" :options="colorOptions" @update:value="handleColorChange" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="管道颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.o_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="水流颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.i_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="流向">
+      <SettingItem>
+        <n-select v-model:value="optionData.line_class" :options="options" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const options = ref([
+  {
+    value: 'svg_ani_flow',
+    label: '正向'
+  },
+  {
+    value: 'svg_ani_flow_back',
+    label: '反向'
+  },
+  {
+    value: 'svg_ani_flow_stop',
+    label: '停止'
+  }
+])
+
+const colorOptions = ref([
+  {
+    value: 1,
+    label: '蓝'
+  },
+  {
+    value: 2,
+    label: '黄'
+  }
+])
+
+// 默认颜色
+const handleColorChange = (e: number) => {
+  switch (e) {
+    case 1:
+      props.optionData.o_color = '#0a7ae2'
+      props.optionData.i_color = '#119bfa'
+      break
+    case 2:
+      props.optionData.o_color = '#ff9d00'
+      props.optionData.i_color = '#f7ea37'
+      break
+  }
+}
+</script>
diff --git a/src/packages/components/Decorates/Mores/PipelineV/index.ts b/src/packages/components/Decorates/Mores/PipelineV/index.ts
new file mode 100644
index 00000000..e99f81a1
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PipelineVConfig: ConfigType = {
+  key: 'PipelineV',
+  chartKey: 'VPipelineV',
+  conKey: 'VCPipelineV',
+  title: '管道-纵向',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image: 'Pipeline_V.png'
+}
+
diff --git a/src/packages/components/Decorates/Mores/PipelineV/index.vue b/src/packages/components/Decorates/Mores/PipelineV/index.vue
new file mode 100644
index 00000000..108a3c1f
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="go-decorates-line">
+    <svg :width="w" :height="h">
+      <line :x1="w / 2" :y1="0" :x2="w / 2" :y2="h" :stroke="o_color" :stroke-width="w"></line>
+      <line :x1="w / 2" :y1="0" :x2="w / 2" :y2="h" :stroke="i_color" :stroke-width="w / 2" :class="line_class"></line>
+    </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 { o_color, i_color, line_class } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-decorates-line {
+  font-size: 0;
+}
+
+/* 正向流动效果 */
+.svg_ani_flow {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+@-webkit-keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+
+/* 停止流动效果 */
+.svg_ani_flow_stop {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_stop 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_stop 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+/* 反向流动效果 */
+.svg_ani_flow_back {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_back 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_back 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_back {
+  from {
+    stroke-dasharray: 13, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_back {
+  from {
+    stroke-dasharray: 13, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+</style>
diff --git a/src/packages/components/Decorates/Mores/index.ts b/src/packages/components/Decorates/Mores/index.ts
index 855f6e27..7223832b 100644
--- a/src/packages/components/Decorates/Mores/index.ts
+++ b/src/packages/components/Decorates/Mores/index.ts
@@ -3,5 +3,7 @@ import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
 import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
+import { PipelineHConfig } from './PipelineH/index'
+import { PipelineVConfig } from './PipelineV/index'
 
-export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig]
+export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]