perf(external/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 + ')', height: h + 'px' }"
+      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
         <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
-          }}</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 }}</span
+        >
       </n-grid-item>
       </n-grid-item>
       <n-grid-item>
       <n-grid-item>
-        <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' }">{{
-            newData
-          }}</span>
+        <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'
+          }"
+          >{{ newData }}</span
+        >
       </n-grid-item>
       </n-grid-item>
     </n-grid>
     </n-grid>
   </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: {
@@ -47,42 +65,40 @@ let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 
 
 let timer: any = null
 let timer: any = null
+const { w, h } = toRefs(props.chartConfig.attr)
 
 
 //修改默认宽高
 //修改默认宽高
-props.chartConfig.attr.w=1920
-props.chartConfig.attr.h=180
-
+props.chartConfig.attr.w = 1920
+props.chartConfig.attr.h = 100
 
 
 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) => {
   option.configOption = newData
   option.configOption = newData
 })
 })
 
 
-
 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
 onMounted(() => {
 onMounted(() => {
-//格式化当前时间
+  //格式化当前时间
   timer = setInterval(() => {
   timer = setInterval(() => {
-    const
-        weeks = {
-          "0": '星期日',
-          "1": '星期一',
-          "2": '星期二',
-          "3": '星期三',
-          "4": '星期四',
-          "5": '星期五',
-          "6": '星期六',
-        } as any
+    const 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
@@ -90,7 +106,7 @@ onMounted(() => {
     const hh = datetime.getHours() // 时
     const hh = datetime.getHours() // 时
     const mm = datetime.getMinutes() // 分
     const mm = datetime.getMinutes() // 分
     const ss = datetime.getSeconds() // 分
     const ss = datetime.getSeconds() // 分
-    let weekIndex = datetime.getDay();
+    let weekIndex = datetime.getDay()
     let time = ''
     let time = ''
     if (hh < 10) time += '0'
     if (hh < 10) time += '0'
     time += hh + ':'
     time += hh + ':'
@@ -106,14 +122,15 @@ onMounted(() => {
 onUnmounted(() => {
 onUnmounted(() => {
   clearInterval(timer)
   clearInterval(timer)
 })
 })
-
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 @include go('text-box') {
 @include go('text-box') {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
   display: flex;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: start;
+  justify-content: start;
   .n-gradient-text {
   .n-gradient-text {
     white-space: initial;
     white-space: initial;
   }
   }