Merge branch 'ft' into 'main'

feat(external/Compose): 组合组件新增头部组合1，2，3

See merge request yunteng/thingskit-view!11

@@ -7,14 +7,15 @@ export const option = {
   dataset: '物联网平台数据统计',
   dataset: '物联网平台数据统计',
   bgSrc: 'src/assets/external/headbackground/bg_top.png',
   bgSrc: 'src/assets/external/headbackground/bg_top.png',
   fontSize: 36,
   fontSize: 36,
-  showRight: true,
-  textColor: '#00f6ff',
-  textRightSizeColor: '#ffffff',
-  textRightFontSize: 14,
-  x: 0,
-  y: 0,
-  xT: 0,
-  yT: 0,
+  showRight:true,
+  textColor:'#00f6ff',
+  textRightSizeColor:'#ffffff',
+  textRightFontSize:14,
+  x:0,
+  y:0,
+  xT:0,
+  yT:0,
+  backgroundImage:''
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
 <template>
   <collapse-item name="信息" :expanded="true">
   <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="背景上传" :alone="true">
+      <setting-item>
+        <n-card class="upload-box">
+          <n-upload
+            :show-file-list="false"
+            v-model:file-list="uploadFileListRef"
+            :customRequest="customRequest"
+            :onBeforeUpload="beforeUploadHandle"
+          >
+            <n-upload-dragger>
+              <img v-if="optionData.backgroundImage" class="upload-show" :src="optionData.backgroundImage" alt="背景" />
+              <div class="upload-img" v-show="!optionData.backgroundImage">
+                <img src="@/assets/images/canvas/noImage.png" />
+                <n-text class="upload-desc" depth="3">
+                  背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
+                </n-text>
+              </div>
+            </n-upload-dragger>
+          </n-upload>
+        </n-card>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-text>背景控制</n-text>
+          <n-button class="clear-btn" size="small" :disabled="!optionData.backgroundImage" @click="clearImage">
+            清除上传背景
+          </n-button>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="背景选择" :alone="true">
     <setting-item-box name="背景选择" :alone="true">
       <setting-item>
       <setting-item>
-        <n-select size="small" placeholder="请选择您要使用的背景" style="width: 250px" v-model:value="selectValue"
-          :options="selectBgOptions" @update:value="selectBgValueHandle" />
+        <n-select
+          size="small"
+          placeholder="请选择您要使用的背景"
+          style="width: 250px"
+          v-model:value="selectValue"
+          :options="selectBgOptions"
+          @update:value="selectBgValueHandle"
+        />
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>
     <setting-item-box name="文字" :alone="true">
     <setting-item-box name="文字" :alone="true">
@@ -42,7 +78,11 @@
     </setting-item-box>
     </setting-item-box>
     <setting-item-box name="文字">
     <setting-item-box name="文字">
       <setting-item name="字体大小">
       <setting-item name="字体大小">
-        <n-input-number v-model:value="optionData.textRightFontSize" size="small" placeholder="字体大小"></n-input-number>
+        <n-input-number
+          v-model:value="optionData.textRightFontSize"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
       </setting-item>
       </setting-item>
       <setting-item name="字体位置x轴">
       <setting-item name="字体位置x轴">
         <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
         <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
@@ -60,14 +100,14 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, ref } from 'vue'
+import { PropType, ref, nextTick } from 'vue'
 import { option } from './config'
 import { option } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
-import { SelectOption } from "naive-ui";
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { SelectOption, UploadCustomRequestOptions } from 'naive-ui'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { fetchRouteParamsLocation } from '@/utils'
 
 
 const props = defineProps({
 const props = defineProps({
   optionData: {
   optionData: {
@@ -75,6 +115,7 @@ const props = defineProps({
     required: true
     required: true
   }
   }
 })
 })
+const uploadFileListRef = ref()
 
 
 const selectBgOptions = ref<Array<SelectOption>>([])
 const selectBgOptions = ref<Array<SelectOption>>([])
 
 
@@ -95,7 +136,86 @@ const selectBgValueHandle = (value: string) => {
   props.optionData.bgSrc = value
   props.optionData.bgSrc = value
 }
 }
 
 
+// 上传图片前置处理
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  uploadFileListRef.value = []
+  const type = file.file.type
+  const size = file.file.size
+
+  if (size > 1024 * 1024 * backgroundImageSize) {
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+    return false
+  }
+  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      // 修改名称
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (uploadRes) {
+        props.optionData.backgroundImage = uploadRes?.fileStaticUri
+        props.optionData.bgSrc = uploadRes?.fileStaticUri
+        window['$message'].success('添加图片成功！')
+      }
+    } else {
+      window['$message'].error('添加图片失败，请稍后重试！')
+    }
+  })
+}
 const handleChange = (value: boolean) => {
 const handleChange = (value: boolean) => {
   props.optionData.showRight = value
   props.optionData.showRight = value
 }
 }
+// 清除背景
+const clearImage = () => {
+  props.optionData.backgroundImage = ''
+  props.optionData.bgSrc = ''
+}
 </script>
 </script>
+<style lang="scss" scoped>
+$uploadWidth: 215px;
+$uploadHeight: 193px;
+.upload-box {
+  cursor: pointer;
+  margin-bottom: 20px;
+  @include deep() {
+    .n-card__content {
+      padding: 0;
+      overflow: hidden;
+    }
+    .n-upload-dragger {
+      padding: 5px;
+      width: $uploadWidth;
+    }
+  }
+  .upload-show {
+    width: -webkit-fill-available;
+    height: $uploadHeight;
+    border-radius: 5px;
+  }
+  .upload-img {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      height: 150px;
+    }
+    .upload-desc {
+      padding: 10px 0;
+    }
+  }
+}
+</style>

@@ -10,7 +10,7 @@ export const LeftCenterRightHeadConfig: ConfigType = {
     key,
     key,
     chartKey,
     chartKey,
     conKey,
     conKey,
-    title: '通用头部',
+    title: '头部组合1',
     category: ChatCategoryEnum.HEADCOMBINATION,
     category: ChatCategoryEnum.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     package: EPackagesCategoryEnum.COMPOSES,
     package: EPackagesCategoryEnum.COMPOSES,

 <template>
 <template>
   <div class="go-text-box">
   <div class="go-text-box">
-    <n-grid :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')' }" class="go-n-grid" :x-gap="12" :y-gap="3"
-      :cols="3" layout-shift-disabled>
+    <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3"
+            :cols="3" layout-shift-disabled>
       <n-grid-item>
       <n-grid-item>
         <!--        占位-->
         <!--        占位-->
         <div></div>
         <div></div>
       </n-grid-item>
       </n-grid-item>
       <n-grid-item>
       <n-grid-item>
-        <span style="position:relative"
-          :style="{ top: option.configOption.y + 'px', marginLeft: option.configOption.x + 'px', color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
+        <span
+            style="position:relative"
+            :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
             option.configOption.dataset
             option.configOption.dataset
           }}</span>
           }}</span>
       </n-grid-item>
       </n-grid-item>
       <n-grid-item>
       <n-grid-item>
         <span style="position:relative" v-if="option.configOption.showRight"
         <span style="position:relative" v-if="option.configOption.showRight"
-          :style="{ top: option.configOption.yT + 'px', marginLeft: option.configOption.xT + 'px', color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
+              :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
             newData
             newData
           }}</span>
           }}</span>
       </n-grid-item>
       </n-grid-item>
@@ -22,11 +23,11 @@
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref } 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'
+import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} 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({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -54,14 +55,14 @@ props.chartConfig.attr.x = 0
 props.chartConfig.attr.y = 0
 props.chartConfig.attr.y = 0
 
 
 watch(
 watch(
-  () => props.chartConfig.option,
-  (newData: any) => {
-    option.configOption = newData
-  },
-  {
-    immediate: true,
-    deep: false
-  }
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.configOption = newData
+    },
+    {
+      immediate: true,
+      deep: false
+    }
 )
 )
 
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
@@ -71,18 +72,18 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 
 
 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
 onMounted(() => {
 onMounted(() => {
-  //格式化当前时间
+//格式化当前时间
   timer = setInterval(() => {
   timer = setInterval(() => {
     const
     const
-      weeks = {
-        "0": '星期日',
-        "1": '星期一',
-        "2": '星期二',
-        "3": '星期三',
-        "4": '星期四',
-        "5": '星期五',
-        "6": '星期六',
-      } as any
+        weeks = {
+          "0": '星期日',
+          "1": '星期一',
+          "2": '星期二',
+          "3": '星期三',
+          "4": '星期四',
+          "5": '星期五',
+          "6": '星期六',
+        } as any
     const datetime = new Date()
     const datetime = new Date()
     const year = datetime.getFullYear()
     const year = datetime.getFullYear()
     const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
     const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -114,7 +115,6 @@ onUnmounted(() => {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
-
   .n-gradient-text {
   .n-gradient-text {
     white-space: initial;
     white-space: initial;
   }
   }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { LeftCenterRightHeadAnimatConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  animat: {
+    text: '我是标题',
+    colors: ['#00CED1', '#FAD400'],
+    x: 0,
+    y: 0,
+    w: 1920,
+    h: 100,
+    size: 40,
+    textPos:{
+      x: 50,
+      y: 0,
+    },
+    gradient: {
+      from: '#0000FFFF',
+      to: '#00FF00FF',
+      deg: 45
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = LeftCenterRightHeadAnimatConfig.key
+  public chartConfig = cloneDeep(LeftCenterRightHeadAnimatConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="配置" :expanded="true">
+    <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.animat.colors" :key="index">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.animat.colors[index] = optionData.animat.colors[index]">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="大小">
+      <SettingItem name="宽度">
+        <n-input-number size="small" v-model:value="optionData.animat.w"></n-input-number>
+      </SettingItem>
+      <SettingItem name="高度">
+        <n-input-number size="small" v-model:value="optionData.animat.h"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="间距">
+      <SettingItem name="左间距">
+        <n-input-number size="small" v-model:value="optionData.animat.x"></n-input-number>
+      </SettingItem>
+      <SettingItem name="上间距">
+        <n-input-number size="small" v-model:value="optionData.animat.y"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.animat.text" 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.animat.size" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="渐变色参数">
+      <setting-item name="起始值">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.from"></n-color-picker>
+      </setting-item>
+      <setting-item name="结束值">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker>
+      </setting-item>
+      <setting-item name="偏移角度">
+        <n-input-number
+          v-model:value="optionData.animat.gradient.deg"
+          size="small"
+          placeholder="颜色旋转"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="间距">
+      <setting-item name="字体左间距">
+        <n-input-number v-model:value="optionData.animat.textPos.x" size="small" placeholder="间距"></n-input-number>
+      </setting-item>
+      <setting-item name="字体上间距">
+        <n-input-number v-model:value="optionData.animat.textPos.y" size="small" placeholder="间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChartFrameEnum } from '@/packages/index.d'
+import { ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('LeftCenterRightHeadAnimat')
+
+export const LeftCenterRightHeadAnimatConfig: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '头部组合3',
+    category: ChatCategoryEnum.HEADCOMBINATION,
+    categoryName: ChatCategoryEnumName.HEADCOMBINATION,
+    package: EPackagesCategoryEnum.COMPOSES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'left_center_rightHead.png',
+}

+<template>
+  <div class="go-animat">
+    <div class="go-animat-item" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
+      <svg :width="animat.w + 'px'" :height="animat.h + 'px'">
+        <polyline
+          fill="transparent"
+          stroke-width="3"
+          :points="`0,20 ${animat.w / 5.555555555555556},20   ${animat.w / 5},40  ${animat.w / 4},40  ${
+            animat.w / 3.703703703703704
+          },60  ${animat.w / 1.388888888888889},60  ${animat.w / 1.333333333333333},40  ${animat.w / 1.25},40  ${
+            animat.w / 1.219512195121951
+          },20  ${animat.w},20`"
+          :stroke="animat.colors[0]"
+        >
+          <animate
+            attributeName="stroke-dasharray"
+            attributeType="XML"
+            :from="`0, 969.031002232793, 0, 969.031002232793`"
+            :to="`0, 0, 1938.062004465586, 0`"
+            dur="3s"
+            begin="0s"
+            calcMode="spline"
+            keyTimes="0;1"
+            keySplines="0.4,1,0.49,0.98"
+            repeatCount="indefinite"
+          ></animate>
+        </polyline>
+        <polyline
+          fill="transparent"
+          stroke-width="2"
+          :points="`${animat.w / 3.333333333333333},80 ${animat.w / 1.428571428571429},80`"
+          :stroke="animat.colors[1]"
+        >
+          <animate
+            attributeName="stroke-dasharray"
+            attributeType="XML"
+            from="0, 384, 0, 384"
+            to="0, 0, 768, 0"
+            dur="3s"
+            begin="0s"
+            calcMode="spline"
+            keyTimes="0;1"
+            keySplines=".4,1,.49,.98"
+            repeatCount="indefinite"
+          ></animate>
+        </polyline>
+      </svg>
+      <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }">
+        <n-gradient-text :size="animat.size" :gradient="animat.gradient">
+          {{ animat.text }}
+        </n-gradient-text>
+      </div>
+    </div>
+  </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
+  }
+})
+
+//默认设置宽高距离位置
+props.chartConfig.attr.w = 1920
+props.chartConfig.attr.h = 300
+props.chartConfig.attr.x = 0
+props.chartConfig.attr.y = 0
+
+const { animat } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-animat {
+  width: 1920px;
+  height: 1080px;
+  display: flex;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+  .go-animat-item {
+    position: relative;
+  }
+  .go-text {
+    position: absolute;
+  }
+}
+</style>

@@ -4,15 +4,42 @@ import { LeftCenterRightHeadCommonConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 
 
 export const option = {
 export const option = {
-    colorLefts: ['#1dc1f5', '#1dc1f5'],
-    colorRights: ['#1dc1f5', '#1dc1f5'],
-    // 是否翻转,组合头部，默认开启
-    reverse: true,
-    defaultReverse: false,
+  //左边颜色
+  colorLefts: ['#1dc1f5', '#1dc1f5'],
+  //中间标题颜色
+  colorTexts: ['#1DC1F533', '#1DC1F5FF'],
+  //右边颜色
+  colorRights: ['#1dc1f5', '#1dc1f5'],
+  //头部左边尺寸位置配置
+  headLeftInfo: {
+    w: 700,
+    h: 300,
+    ml: 0,
+    mt: 0,
+    headLeftReverse: false
+  },
+  //头部中间尺寸位置配置
+  headCenterInfo: {
+    w: 500,
+    h: 70,
+    ml: 235,
+    mt: 125,
+    dataset: '我是标题',
+    textColor: '#fff',
+    textSize: 32
+  },
+  //头部右边尺寸位置配置
+  headRightInfo: {
+    w: 700,
+    h: 300,
+    ml: 245,
+    mt: 0,
+    headRightReverse: true
+  }
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
-    public key = LeftCenterRightHeadCommonConfig.key
-    public chartConfig = cloneDeep(LeftCenterRightHeadCommonConfig)
-    public option = cloneDeep(option)
+  public key = LeftCenterRightHeadCommonConfig.key
+  public chartConfig = cloneDeep(LeftCenterRightHeadCommonConfig)
+  public option = cloneDeep(option)
 }
 }

 <template>
 <template>
-  <CollapseItem name="头部左侧样式" :expanded="true">
+  <CollapseItem name="头部左侧配置" :expanded="true">
     <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorLefts" :key="index">
     <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorLefts" :key="index">
       <SettingItem name="颜色">
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorLefts[index]"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorLefts[index]"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem>
       <SettingItem>
-        <n-button size="small" @click="optionData.colorLefts[index] = option.colorLefts[index]">
-          恢复默认
-        </n-button>
+        <n-button size="small" @click="optionData.colorLefts[index] = option.colorLefts[index]"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="大小">
+      <SettingItem name="宽度">
+        <n-input-number size="small" v-model:value="optionData.headLeftInfo.w"></n-input-number>
+      </SettingItem>
+      <SettingItem name="高度">
+        <n-input-number size="small" v-model:value="optionData.headLeftInfo.h"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="间距">
+      <SettingItem name="左间距">
+        <n-input-number size="small" v-model:value="optionData.headLeftInfo.ml"></n-input-number>
+      </SettingItem>
+      <SettingItem name="上间距">
+        <n-input-number size="small" v-model:value="optionData.headLeftInfo.mt"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="方向">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.headLeftInfo.headLeftReverse" size="small" />
+          <n-text>开启反向</n-text>
+        </n-space>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
   </CollapseItem>
   </CollapseItem>
-  <CollapseItem name="头部右侧样式" :expanded="true">
+  <CollapseItem name="头部中间配置" :expanded="true">
+    <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorTexts" :key="index">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorTexts[index]"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.colorTexts[index] = option.colorTexts[index]"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="文字" alone>
+      <SettingItem>
+        <n-input v-model:value="optionData.headCenterInfo.dataset" size="small"></n-input>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="样式">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.headCenterInfo.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.headCenterInfo.textSize" size="small" :min="12"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="大小">
+      <SettingItem name="宽度">
+        <n-input-number size="small" v-model:value="optionData.headCenterInfo.w"></n-input-number>
+      </SettingItem>
+      <SettingItem name="高度">
+        <n-input-number size="small" v-model:value="optionData.headCenterInfo.h"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="间距">
+      <SettingItem name="左间距">
+        <n-input-number size="small" v-model:value="optionData.headCenterInfo.ml"></n-input-number>
+      </SettingItem>
+      <SettingItem name="上间距">
+        <n-input-number size="small" v-model:value="optionData.headCenterInfo.mt"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="头部右侧配置" :expanded="true">
     <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorRights" :key="index">
     <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorRights" :key="index">
       <SettingItem name="颜色">
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorRights[index]"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorRights[index]"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem>
       <SettingItem>
-        <n-button size="small" @click="optionData.colorRights[index] = option.colorRights[index]">
-          恢复默认
-        </n-button>
+        <n-button size="small" @click="optionData.colorRights[index] = option.colorRights[index]"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="大小">
+      <SettingItem name="宽度">
+        <n-input-number size="small" v-model:value="optionData.headRightInfo.w"></n-input-number>
+      </SettingItem>
+      <SettingItem name="高度">
+        <n-input-number size="small" v-model:value="optionData.headRightInfo.h"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="间距">
+      <SettingItem name="左间距">
+        <n-input-number size="small" v-model:value="optionData.headRightInfo.ml"></n-input-number>
+      </SettingItem>
+      <SettingItem name="上间距">
+        <n-input-number size="small" v-model:value="optionData.headRightInfo.mt"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="方向">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.headRightInfo.headRightReverse" size="small" />
+          <n-text>开启反向</n-text>
+        </n-space>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
   </CollapseItem>
   </CollapseItem>
@@ -28,18 +115,12 @@
 <script setup lang="ts">
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { PropType } from 'vue'
 import { option } from './config'
 import { option } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 
-const props = defineProps({
+defineProps({
   optionData: {
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as any as PropType<typeof option>,
     required: true
     required: true
   }
   }
 })
 })
-
-
 </script>
 </script>

@@ -8,7 +8,7 @@ export const LeftCenterRightHeadCommonConfig: ConfigType = {
     key,
     key,
     chartKey,
     chartKey,
     conKey,
     conKey,
-    title: '头部',
+    title: '头部组合2',
     category: ChatCategoryEnum.HEADCOMBINATION,
     category: ChatCategoryEnum.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,
     package: EPackagesCategoryEnum.COMPOSES,
     package: EPackagesCategoryEnum.COMPOSES,

 <template>
 <template>
-  <div>
-    <n-grid :x-gap="12" :cols="3" layout-shift-disabled>
-      <n-grid-item>
-        <svg :width="w" :height="h">
-          <polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent"
-            :points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`" />
-
-          <polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent" :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${h / 2
-            }`" />
-
-          <polyline :stroke="colorLefts[1]" fill="transparent" stroke-width="3"
-            :points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`" />
-        </svg>
-      </n-grid-item>
-      <n-grid-item>
-        <!--        <div style="width:300px;height: 30px"></div>-->
-      </n-grid-item>
-      <n-grid-item>
-        <!--        <svg :width="w" :height="h">-->
-        <!--          <polyline-->
-        <!--              :stroke="colorRights[0]"-->
-        <!--              stroke-width="2"-->
-        <!--              fill="transparent"-->
-        <!--              :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->
-        <!--          />-->
-
-        <!--          <polyline-->
-        <!--              :stroke="colorRights[0]"-->
-        <!--              stroke-width="2"-->
-        <!--              fill="transparent"-->
-        <!--              :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->
-        <!--          h / 2-->
-        <!--        }`"-->
-        <!--          />-->
-
-        <!--          <polyline-->
-        <!--              :stroke="colorRights[1]"-->
-        <!--              fill="transparent"-->
-        <!--              stroke-width="3"-->
-        <!--              :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->
-        <!--          />-->
-        <!--        </svg>-->
-      </n-grid-item>
+  <div style="display: flex">
+    <n-grid :x-gap="12" :y-gap="12" :cols="4" layout-shift-disabled>
+      <n-gi>
+        <div :style="{ marginLeft: headLeftInfo.ml + 'px', marginTop: headLeftInfo.mt + 'px' }">
+          <svg :width="headLeftInfo.w + 'px'" :height="headLeftInfo.h + 'px'">
+            <polyline
+              :stroke="colorLefts[0]"
+              stroke-width="2"
+              fill="transparent"
+              :points="`${xLeftPos(0)}, 0 ${xLeftPos(30)}, ${headLeftInfo.h / 2}`"
+            />
+            <polyline
+              :stroke="colorLefts[0]"
+              stroke-width="2"
+              fill="transparent"
+              :points="`${xLeftPos(20)}, 0 ${xLeftPos(50)}, ${headLeftInfo.h / 2} ${xLeftPos(headLeftInfo.w)}, ${
+                headLeftInfo.h / 2
+              }`"
+            />
+            <polyline
+              :stroke="colorLefts[1]"
+              fill="transparent"
+              stroke-width="3"
+              :points="`${xLeftPos(0)}, ${headLeftInfo.h - 3}, ${xLeftPos(200)}, ${headLeftInfo.h - 3}`"
+            />
+          </svg>
+        </div>
+      </n-gi>
+      <n-gi>
+        <div :style="{ top: headCenterInfo.mt + 'px', left: headCenterInfo.ml + 'px' }" class="go-border-06">
+          <svg xmlns="http://www.w3.org/2000/svg" :width="headCenterInfo.w" :height="headCenterInfo.h">
+            <polygon class="stroke fill" :points="`15.5 6.5 20.5 0.5 50.5 0.5 55.5 6.5 15.5 6.5`" />
+            <polygon
+              class="stroke fill"
+              :points="`15.5 ${headCenterInfo.h - 6.5} 20.5 ${headCenterInfo.h - 0.5} 50.5 ${
+                headCenterInfo.h - 0.5
+              } 55.5 ${headCenterInfo.h - 6.5} 15.5 ${headCenterInfo.h - 6.5}`"
+            />
+            <polygon
+              class="stroke fill"
+              :points="`${headCenterInfo.w - 15.5} 6.5 ${headCenterInfo.w - 20.5} 0.5 ${headCenterInfo.w - 50.5} 0.5 ${
+                headCenterInfo.w - 55.5
+              } 6.5 ${headCenterInfo.w - 15.5} 6.5`"
+            />
+            <polygon
+              class="stroke fill"
+              :points="`${headCenterInfo.w - 15.5} ${headCenterInfo.h - 6.5} ${headCenterInfo.w - 20.5} ${
+                headCenterInfo.h - 0.5
+              } ${headCenterInfo.w - 50.5} ${headCenterInfo.h - 0.5} ${headCenterInfo.w - 55.5} ${
+                headCenterInfo.h - 6.5
+              } ${headCenterInfo.w - 15.5} ${headCenterInfo.h - 6.5}`"
+            />
+            <polygon
+              class="stroke fill"
+              :points="`15.5 6.5 0.5 ${headCenterInfo.h / 2} 15.5 ${headCenterInfo.h - 6.5} ${
+                headCenterInfo.w - 15.5
+              } ${headCenterInfo.h - 6.5} ${headCenterInfo.w - 0.5} ${headCenterInfo.h / 2} ${
+                headCenterInfo.w - 15.5
+              } 6.5 15.5 6.5`"
+            />
+            <polyline
+              class="stroke fill-none"
+              :points="`20.5 14.5 8.5 ${headCenterInfo.h / 2} 20.5 ${headCenterInfo.h - 14.5}`"
+            />
+            <polyline
+              class="stroke fill-none"
+              :points="`${headCenterInfo.w - 20.5} 14.5 ${headCenterInfo.w - 8.5} ${headCenterInfo.h / 2} ${
+                headCenterInfo.w - 20.5
+              } ${headCenterInfo.h - 14.5}`"
+            />
+          </svg>
+          <span class="text">{{ headCenterInfo.dataset }}</span>
+        </div>
+      </n-gi>
+      <n-gi>
+        <div :style="{ marginLeft: headRightInfo.ml + 'px', marginTop: headRightInfo.mt + 'px' }">
+          <svg :width="headRightInfo.w" :height="headRightInfo.h">
+            <polyline
+              :stroke="colorRights[0]"
+              stroke-width="2"
+              fill="transparent"
+              :points="`${xRightPos(0)}, 0 ${xRightPos(30)}, ${headRightInfo.h / 2}`"
+            />
+            <polyline
+              :stroke="colorRights[0]"
+              stroke-width="2"
+              fill="transparent"
+              :points="`${xRightPos(20)}, 0 ${xRightPos(50)}, ${headRightInfo.h / 2} ${xRightPos(headRightInfo.w)}, ${
+                headRightInfo.h / 2
+              }`"
+            />
+            <polyline
+              :stroke="colorRights[1]"
+              fill="transparent"
+              stroke-width="3"
+              :points="`${xRightPos(0)}, ${headRightInfo.h - 3}, ${xRightPos(200)}, ${headRightInfo.h - 3}`"
+            />
+          </svg>
+        </div>
+      </n-gi>
     </n-grid>
     </n-grid>
   </div>
   </div>
 </template>
 </template>
@@ -57,22 +114,51 @@ const props = defineProps({
 })
 })
 
 
 //默认设置宽高距离位置
 //默认设置宽高距离位置
-// props.chartConfig.attr.w = 1920
-// props.chartConfig.attr.h = 148
-// props.chartConfig.attr.x = 0
-// props.chartConfig.attr.y = 0
-const { w, h } = toRefs(props.chartConfig.attr)
-const { colorLefts, colorRights, reverse, defaultReverse } = toRefs(props.chartConfig.option)
+props.chartConfig.attr.w = 1920
+props.chartConfig.attr.h = 300
+props.chartConfig.attr.x = 0
+props.chartConfig.attr.y = 0
 
 
-const xPos = (pos: number) => {
-  if (!reverse.value) return pos
-  return w.value - pos
+const { headLeftInfo, headCenterInfo, headRightInfo, colorLefts, colorRights, colorTexts } = toRefs(
+  props.chartConfig.option
+)
+
+const xLeftPos = (pos: number) => {
+  if (!headLeftInfo.value.headLeftReverse) return pos
+  return headLeftInfo.value.w - pos
 }
 }
-const xFalsePos = (pos: number) => {
-  if (!defaultReverse.value) return pos
-  return w.value - pos
+
+const xRightPos = (pos: number) => {
+  if (!headRightInfo.value.headRightReverse) return pos
+  return headRightInfo.value.w - pos
 }
 }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+@include go('border-06') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+
+  .fill {
+    fill: v-bind('colorTexts[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colorTexts[1]');
+  }
+
+  .text {
+    color: v-bind('headCenterInfo.textColor');
+    font-size: v-bind('headCenterInfo.textSize+"px"');
+  }
+}
 </style>
 </style>

 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index'
 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index'
 import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index'
 import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index'
+import { LeftCenterRightHeadAnimatConfig } from './LeftCenterRightHeadAnimat/index'
 
 
-export default [LeftCenterRightHeadConfig, LeftCenterRightHeadCommonConfig]
+export default [LeftCenterRightHeadConfig, LeftCenterRightHeadCommonConfig,LeftCenterRightHeadAnimatConfig]