Pre Merge pull request !97 from nowhy-char/tsukimi-fetch

src/packages/components/Informations/Texts/TextAuto/config.ts

@@ -0,0 +1,42 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TextAutoConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export enum WritingModeEnum {
+  HORIZONTAL = '水平',
+  VERTICAL = '垂直',
+}
+
+export const WritingModeObject = {
+  [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+  [WritingModeEnum.VERTICAL]: 'vertical-rl',
+}
+
+export const option = {
+  dataset: '我是文本',
+  fontSize: 20,
+  fontColor: '#ffffff',
+  paddingX: 10,
+  paddingY: 10,
+  fontWeight: 400,
+
+  // 边框
+  borderWidth: 0,
+  borderColor: '#ffffff',
+  borderRadius: 5,
+
+  // 字间距
+  letterSpacing: 5,
+  backgroundColor: '#00000000',
+
+  // 动画时长
+  animation: 5,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  public key = TextAutoConfig.key
+  public chartConfig = cloneDeep(TextAutoConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Texts/TextAuto/config.vue

@@ -0,0 +1,96 @@
+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="边框">
+      <setting-item name="宽度">
+        <n-input-number
+          v-model:value="optionData.borderWidth"
+          size="small"
+          :min="0"
+          placeholder="宽度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="动画时长">
+      <setting-item name="单位: s">
+        <n-input-number
+          v-model:value="optionData.animation"
+          size="small"
+          :min="0"
+          placeholder="单位: s"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="背景" :alone="true">
+      <setting-item name="背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, WritingModeEnum, WritingModeObject } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const verticalOptions = [{
+  label: WritingModeEnum.HORIZONTAL,
+  value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+}, {
+  label: WritingModeEnum.VERTICAL,
+  value: WritingModeObject[WritingModeEnum.VERTICAL]
+}]
+
+
+</script>

src/packages/components/Informations/Texts/TextAuto/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/informations/text_static.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const TextAutoConfig: ConfigType = {
+  key: 'TextAuto',
+  chartKey: 'VTextAuto',
+  conKey: 'VCTextAuto',
+  title: '滚动文字',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  image
+}

src/packages/components/Informations/Texts/TextAuto/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="sizeScroll go-text-box">
+    <div class="content">
+      <div ref="textAutoBox" id="inner" class="innerActive">
+        <div id="textAutoBox" v-html="option.dataset"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, ref, onMounted, nextTick } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  dataset,
+  fontColor,
+  fontSize,
+  letterSpacing,
+  paddingY,
+  paddingX,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  writingMode,
+  backgroundColor,
+  animation
+} = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+let textAutoBox = ref()
+let showDown = false
+onMounted(() => {
+  if (textAutoBox.value.clientHeight > props.chartConfig.attr.h) {
+    showDown = true
+  }
+  if (!showDown) {
+    nextTick(() => {textAutoBox.value.style.animationDuration = '0s'})
+  }
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+    if (textAutoBox.value !== undefined) {
+      showDown = false
+      nextTick(() => {
+        if (textAutoBox.value.clientHeight > props.chartConfig.attr.h) {
+          showDown = true
+        }
+        if (!showDown) {
+          setTimeout(() => {
+            textAutoBox.value.style.animationDuration = `0s`
+          }, 200);
+        } else {
+          setTimeout(() => {
+            textAutoBox.value.style.animationDuration = `${animation.value}s`
+          }, 200);
+        }
+      })
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .content {
+    color: v-bind('fontColor');
+    padding: v-bind('`${paddingY}px ${paddingX}px`');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    writing-mode: v-bind('writingMode');
+    font-weight: v-bind('fontWeight');
+    border-style: solid;
+    border-width: v-bind('borderWidth + "px"');
+    border-radius: v-bind('borderRadius + "px"');
+    border-color: v-bind('borderColor');
+    background-color: v-bind('backgroundColor');
+    .innerActive {
+      width: 100%;
+      animation: slide v-bind('animation + "s"') linear infinite;
+      #textAutoBox {
+        display: inline-block;
+        width: 100%;
+        height: auto;
+        overflow: auto;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        white-space: pre-wrap;
+      }
+    }
+  }
+  @keyframes slide {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+}
+h1 {
+  font-weight: bold;
+}
+.sizeScroll {
+  overflow: hidden;
+  .content {
+    overflow: hidden;
+    position: relative;
+    white-space: nowrap;
+  }
+}
+</style>

src/packages/components/Informations/Texts/index.ts

@@ -1,5 +1,6 @@
 import { TextCommonConfig } from './TextCommon/index'
 import { TextBarrageConfig } from './TextBarrage/index'
 import { TextGradientConfig } from './TextGradient/index'
+import { TextAutoConfig } from './TextAuto'
 
-export default [TextCommonConfig, TextGradientConfig, TextBarrageConfig]
+export default [TextCommonConfig, TextGradientConfig, TextBarrageConfig, TextAutoConfig]