perf(external/Composes): 小组件下新增天气

@@ -5,7 +5,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 
 //第三方 天气接口key值和api配置(高德)
-export class ThirdPartyWeather {
+export class ThirdPartyWeatherConnfig {
   static ak = '0551a87b45e0363ae6c7a2242e8ac944'
   static api = 'https://restapi.amap.com/v3/weather/weatherInfo'
   // ((all,预报天气),(base,实况天气))

 <script lang="ts" setup name="Weather">
 import { PropType, toRefs, onMounted, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { option, ThirdPartyWeather } from './config'
+import { option, ThirdPartyWeatherConnfig } from './config'
 import axios from 'axios'
 import WeatherContent from './componnets/WeatherContent.vue'
 import { useUtils } from './hooks/useUtils'
@@ -17,35 +17,22 @@ const { loadWeatherImg, loadWeatherLevel } = useUtils()
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const {
-  temperatureTextSize,
-  temperatureTextColor,
-  cityTextSize,
-  cityTextColor,
-  weatherIconSizeWidth,
-  weatherIconSizeHeight,
-  airSpeedTextSize,
-  airSpeedTextColor,
-  airSpeedLevelTextSize,
-  airSpeedLevelTextColor,
-  backgroundColor,
-  borderRadius
-} = toRefs(props.chartConfig.option.weatherCss)
+const { weatherCss } = toRefs(props.chartConfig.option)
 
-const weatherInfoValues: any = reactive({
+const weatherInfoValues = reactive<any>({
   weatherInfo: []
 })
 
-const getWeatherInfos = async (cityObj: any) => {
-  const { cityValue, countyValue } = cityObj || props.chartConfig.option.dataset
+const getWeatherInfos = async (area: any) => {
+  const { cityValue, countyValue } = area || props.chartConfig.option.dataset
   const params = {
-    key: ThirdPartyWeather.ak,
+    key: ThirdPartyWeatherConnfig.ak,
     city: !countyValue ? cityValue : countyValue,
-    extensions: ThirdPartyWeather.extensions
-  } as any
+    extensions: ThirdPartyWeatherConnfig.extensions
+  }
   const {
     data: { forecasts }
-  } = await axios.get(ThirdPartyWeather.api, { params })
+  } = await axios.get(ThirdPartyWeatherConnfig.api, { params })
   if (!forecasts) return
   weatherInfoValues.weatherInfo = forecasts
 }
@@ -99,34 +86,34 @@ const onHandleSelectValues = (values: any) => {
 .card {
   width: v-bind('w+"px"');
   height: v-bind('h+"px"');
-  background-color: v-bind('backgroundColor');
-  border-radius: v-bind('`${borderRadius}px`');
+  background-color: v-bind('weatherCss.backgroundColor');
+  border-radius: v-bind('`${weatherCss.borderRadius}px`');
   .card-content {
     display: flex;
     justify-content: space-between;
     .weather-temp {
-      font-size: v-bind('`${temperatureTextSize}px`');
-      color: v-bind('temperatureTextColor');
+      font-size: v-bind('`${weatherCss.temperatureTextSize}px`');
+      color: v-bind('weatherCss.temperatureTextColor');
     }
     .weather-city {
       text-overflow: ellipsis;
       overflow: hidden;
       word-break: break-all;
       white-space: nowrap;
-      font-size: v-bind('`${cityTextSize}px`');
-      color: v-bind('cityTextColor');
+      font-size: v-bind('`${weatherCss.cityTextSize}px`');
+      color: v-bind('weatherCss.cityTextColor');
     }
     .weather-img {
-      width: v-bind('`${weatherIconSizeWidth}px`');
-      height: v-bind('`${weatherIconSizeHeight}px`');
+      width: v-bind('`${weatherCss.weatherIconSizeWidth}px`');
+      height: v-bind('`${weatherCss.weatherIconSizeHeight}px`');
     }
     .weather-speed {
-      font-size: v-bind('`${airSpeedTextSize}px`');
-      color: v-bind('airSpeedTextColor');
+      font-size: v-bind('`${weatherCss.airSpeedTextSize}px`');
+      color: v-bind('weatherCss.airSpeedTextColor');
     }
     .weather-speed-level {
-      font-size: v-bind('`${airSpeedLevelTextSize}px`');
-      color: v-bind('airSpeedLevelTextColor');
+      font-size: v-bind('`${weatherCss.airSpeedLevelTextSize}px`');
+      color: v-bind('weatherCss.airSpeedLevelTextColor');
     }
     img {
       width: 24px;