feat: 增加管道组件

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)
+}

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>

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'
+}

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>

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)
+}

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>

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'
+}
+

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>

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]