Merge branch 'ft' into 'main_dev'

perf(external/Componse): 修改小标题1，缩放未居中

See merge request yunteng/thingskit-view!30

@@ -8,6 +8,7 @@
     <SettingItemBox name="内容">
     <SettingItemBox name="内容">
       <SettingItem name="数值">
       <SettingItem name="数值">
         <n-input-number
         <n-input-number
+          :disabled="true"
           v-model:value="item.data[0]"
           v-model:value="item.data[0]"
           :min="0"
           :min="0"
           :step="0.01"
           :step="0.01"

@@ -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,

-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { TitleConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-
-export const option = {
-  dataset: '我是标题',
-  attribute: {
-    titleColor: '#fff',
-    titleSize: 16,
-    svg_7: 'blue',
-    svg_8: 'red',
-    svg_16: 'red',
-    svg_14: 'red',
-    svg_21: 'red',
-    svg_7_opacity: 1,
-    svg_8_opacity: 1,
-    svg_16_opacity: 1,
-    svg_14_opacity: 1,
-    linearGradient: {
-      stop_color1: '#447799',
-      stop_color2: '#224488',
-      svg_21_opacity1: 1,
-      svg_21_opacity2: 1,
-    }
-  }
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = TitleConfig.key
-  public chartConfig = cloneDeep(TitleConfig)
-  public option = cloneDeep(option)
-}

-<template>
-  <CollapseItem name="配置" :expanded="true">
-    <SettingItemBox name="文字">
-      <SettingItem name="内容">
-        <n-input size="small" v-model:value="optionData.dataset"></n-input>
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.titleColor"></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.attribute.titleColor ='#fff'"> 恢复默认 </n-button>
-      </SettingItem>
-      <SettingItem name="大小">
-        <n-input-number v-model:value="optionData.attribute.titleSize" size="small" placeholder="大小"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="左边装饰">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_16"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="透明度">
-        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_16_opacity" size="small" placeholder="透明度1"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="三角装饰">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_14"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="透明度">
-        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_14_opacity" size="small" placeholder="透明度1"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="右边装饰">
-      <SettingItem name="颜色1">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_7"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="颜色2">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.svg_8"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="透明度1">
-        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.svg_7_opacity" size="small" placeholder="透明度1"></n-input-number>
-      </SettingItem>
-      <SettingItem name="透明度2">
-        <n-input-number  :min="0" :max="1" v-model:value="optionData.attribute.svg_8_opacity" size="small" placeholder="透明度2"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="装饰渐变">
-      <SettingItem name="渐变颜色1">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.linearGradient.stop_color1"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="渐变颜色2">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.linearGradient.stop_color2"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="透明度1">
-        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.linearGradient.svg_21_opacity1" size="small" placeholder="透明度1"></n-input-number>
-      </SettingItem>
-      <SettingItem name="透明度2">
-        <n-input-number :min="0" :max="1" v-model:value="optionData.attribute.linearGradient.svg_21_opacity2" size="small" placeholder="透明度1"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
-</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, 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('Title')
-export const TitleConfig: ConfigType = {
-    key,
-    chartKey,
-    conKey,
-    title: '小标题',
-    category: ChatCategoryEnum.MORE,
-    categoryName: ChatCategoryEnumName.MORE,
-    package: EPackagesCategoryEnum.COMPOSES,
-    chartFrame: ChartFrameEnum.NAIVE_UI,
-    image: 'dateTime.png',
-}

-<template>
-  <div class="go-content-box">
-    <svg xmlns="http://www.w3.org/2000/svg" width="782" height="600">
-      <defs>
-        <defs>
-          <linearGradient id="my-cool-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%"
-              :style="{ stopColor: attribute.linearGradient.stop_color1, stopOpacity: attribute.linearGradient.svg_21_opacity1 }" />
-            <stop offset="100%"
-              :style="{ stopColor: attribute.linearGradient.stop_color2, stopOpacity: attribute.linearGradient.svg_21_opacity2 }" />
-          </linearGradient>
-        </defs>
-      </defs>
-      <g>
-        <rect stroke="#000" id="svg_6" height="0" width="2" y="189.5" x="523" fill="#fff" />
-        <path :opacity="attribute.svg_7_opacity" transform="rotate(-137 422.766 284.992)" stroke="#000" id="svg_7"
-          d="m412.87465,287.39672l3.95636,-4.80932l15.82545,0l-3.95636,4.80932l-15.82545,0z" :fill="attribute.svg_7" />
-        <path :opacity="attribute.svg_8_opacity" transform="rotate(44 444.883 283.871)" stroke="#000" id="svg_8"
-          d="m435.52609,286.39738l3.74294,-5.0534l14.97175,0l-3.74294,5.0534l-14.97175,0z" :fill="attribute.svg_8" />
-        <rect id="svg_10" height="0" width="1" y="242.5" x="235" stroke="#000" fill="#fff" />
-        <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" :font-size="attribute.titleSize"
-          stroke-width="0" id="svg_12" y="290.5" x="214" stroke="#000" :fill="attribute.titleColor">{{ dataset }}</text>
-        <path :opacity="attribute.svg_14_opacity" transform="rotate(90 198.922 284.168)" stroke="#000" id="svg_14"
-          d="m193.42189,288.16843l5.50043,-8.00001l5.50043,8.00001l-11.00085,0z" stroke-width="0"
-          :fill="attribute.svg_14" />
-        <path id="svg_15" d="m259.7,311.34437l0.5,-1.00001l0.5,1.00001l-1.00001,0z" stroke-width="0" stroke="#000"
-          fill="#000000" />
-        <rect stroke="#000" id="svg_16" height="33" width="4" y="269" x="181" :fill="attribute.svg_16"
-          :opacity="attribute.svg_16_opacity" />
-        <rect id="svg_17" height="0" width="2" y="368.5" x="187" stroke="#000" fill="#6D97AB" />
-        <rect id="svg_18" height="13" width="0" y="290.5" x="167" stroke="#000" fill="#6D97AB" />
-        <rect id="svg_20" height="0" width="1" y="193.5" x="281" stroke="#000" fill="#6D97AB" />
-        <path stroke="#000" id="svg_21" d="m184,269l299.00001,0l0,33l-299.00001,0l0,-33z" opacity="0.35"
-          fill="url(#my-cool-gradient)" />
-      </g>
-
-    </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
-  }
-})
-
-//修改默认宽高距离位置
-props.chartConfig.attr.w = 600
-props.chartConfig.attr.h = 100
-props.chartConfig.attr.x = 200
-props.chartConfig.attr.y = 200
-
-const { dataset, attribute } = toRefs(props.chartConfig.option)
-
-const { w, h } = toRefs(props.chartConfig.attr)
-
-
-</script>
-
-<style lang="scss" scoped>
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .content {
-    width: v-bind('w + "px"');
-    height: v-bind('h + "px"');
-  }
-}
-</style>

@@ -5,16 +5,16 @@
         <n-input v-model:value="optionData.dataset" />
         <n-input v-model:value="optionData.dataset" />
       </SettingItem>
       </SettingItem>
       <SettingItem name="大小">
       <SettingItem name="大小">
-        <n-input v-model:value="optionData.attribute.fontSize" />
+        <n-input-number v-model:value="optionData.attribute.fontSize" />
       </SettingItem>
       </SettingItem>
       <SettingItem name="颜色">
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem name="x轴位置">
       <SettingItem name="x轴位置">
-        <n-input v-model:value="optionData.attribute.fontPos.x" />
+        <n-input-number v-model:value="optionData.attribute.fontPos.x" />
       </SettingItem>
       </SettingItem>
       <SettingItem name="y轴位置">
       <SettingItem name="y轴位置">
-        <n-input v-model:value="optionData.attribute.fontPos.y" />
+        <n-input-number v-model:value="optionData.attribute.fontPos.y" />
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox
     <SettingItemBox
@@ -32,7 +32,7 @@
       <SettingItem>
       <SettingItem>
         <n-button
         <n-button
           size="small"
           size="small"
-          @click="optionData.attribute.linearColors[index] = optionData.attribute.linearColors[index]"
+          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
         >
         >
           恢复默认
           恢复默认
         </n-button>
         </n-button>
@@ -46,6 +46,7 @@ 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'
 
 
+
 defineProps({
 defineProps({
   optionData: {
   optionData: {
     type: Object as PropType<typeof option>,
     type: Object as PropType<typeof option>,

@@ -24,9 +24,13 @@
           fill="url(#linear_0)"
           fill="url(#linear_0)"
           transform="translate(0 0)  rotate(0 246 15)"
           transform="translate(0 0)  rotate(0 246 15)"
           opacity="1"
           opacity="1"
-          :d="`M0,${h / 2.933333333333333} L${w},${h / 2.933333333333333} L${w},0 L0,0 L0,${h / 2.933333333333333} Z`"
+          :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`"
         />
         />
-        <g opacity="1" transform="translate(34 2)  rotate(0 46 13)">
+        <g
+          opacity="1"
+          :transform="`translate(34 ${(h/2)-26/2
+          })  rotate(0 46 13)`"
+        >
           <text>
           <text>
             <tspan
             <tspan
               :x="attribute.fontPos.x"
               :x="attribute.fontPos.x"
@@ -48,9 +52,12 @@
           style="fill: #2affff"
           style="fill: #2affff"
           transform="translate(0 0)  rotate(0 0.5 15)"
           transform="translate(0 0)  rotate(0 0.5 15)"
           opacity="1"
           opacity="1"
-          :d="`M0,${h / 2.933333333333333}L1,${h / 2.933333333333333}L1,0L0,0L0,${h / 2.933333333333333}Z`"
+          :d="`M0,${h}L1,${h }L1,0L0,0L0,${h}Z`"
         />
         />
-        <g opacity="1" :transform="`translate(14 8)  rotate(0 6.5 7)`">
+        <g
+          opacity="1"
+          :transform="`translate(14 ${(h/2)-8/2})  rotate(0 6.5 7)`"
+        >
           <path
           <path
             id="矩形 22"
             id="矩形 22"
             fill-rule="evenodd"
             fill-rule="evenodd"
@@ -76,7 +83,7 @@
             :d="`M6,0L0,7L5,7L11,0L6,0Z `"
             :d="`M6,0L0,7L5,7L11,0L6,0Z `"
           />
           />
         </g>
         </g>
-        <g opacity="1" transform="translate(396 2)  rotate(0 46.5 13.5)">
+        <g opacity="1" :transform="`translate(396 ${(h/2)-2/2})  rotate(0 46.5 13.5)`">
           <path
           <path
             id="并集"
             id="并集"
             fill-rule="evenodd"
             fill-rule="evenodd"
@@ -108,6 +115,8 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .go-content-box {
 .go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;

 import { ButtonConfig } from './Button/index'
 import { ButtonConfig } from './Button/index'
 import { Title1Config } from './Title1/index'
 import { Title1Config } from './Title1/index'
-import { TitleConfig } from './Title/index'
 import { CameraConfig } from './Camera/index'
 import { CameraConfig } from './Camera/index'
 
 
-export default [ButtonConfig, Title1Config, TitleConfig, CameraConfig]
+export default [ButtonConfig, Title1Config, CameraConfig]