feat(src/packages): 优化天气组件ts类型定义

 <script lang="ts" setup name="WeatherContent">
-import { toRefs } from 'vue'
+import { toRefs, PropType, computed } from 'vue'
 import SelectCity from './SelectCity.vue'
 import { useUtils } from '../hooks/useUtils'
 import weatherBg from '@/assets/external/weather/bg.png'
+import { weatherInfoInterface, selectValueType } from '../config'
 
 const props = defineProps({
   data: {
-    type: Array as any
+    type: Array as PropType<weatherInfoInterface[]>,
+    required: true
   }
 })
 
@@ -16,21 +18,31 @@ const { loadWeatherImg, loadWeatherLevel } = useUtils()
 
 const { casts } = toRefs(props.data[0])
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: selectValueType) => {
   emits('submit', values)
 }
+
+const nCardComputed = computed(() => {
+  return {
+    backgroundImage: `url('${weatherBg}')`
+  }
+})
+
+const segmentedComputed = computed(() => {
+  return {
+    content: true,
+    footer: 'soft'
+  }
+})
+
+const indexMapDayFunc = (index: number) => {
+  return index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '外天'
+}
 </script>
 
 <template>
   <div>
-    <n-card
-      :segmented="{
-        content: true,
-        footer: 'soft'
-      }"
-      :style="{ backgroundImage: `url('${weatherBg}')` }"
-      class="n-card"
-    >
+    <n-card :segmented="segmentedComputed" :style="nCardComputed" class="n-card">
       <template #header>
         <div class="card-header">
           <div class="city-text">{{ data[0]?.city }}</div>
@@ -59,7 +71,7 @@ const onHandleSelectValues = (values: any) => {
       </div>
       <template #footer>
         <div v-for="(item, index) in casts" :key="index" class="footer-content">
-          <div>{{ index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '外天' }}</div>
+          <div>{{ indexMapDayFunc(index) }}</div>
           <div>
             <img :src="loadWeatherImg(item?.dayweather)" />
           </div>

@@ -7,6 +7,8 @@ import clearDay from '@/assets/external/weather/clearDay.png'
 import cloudy from '@/assets/external/weather/cloudy.png'
 import cloudyDay from '@/assets/external/weather/cloudyDay.png'
 import lightRain from '@/assets/external/weather/lightRain.png'
+import thunderstorm from '@/assets/external/weather/thunderstorm.png'
+import shower from '@/assets/external/weather/shower.png'
 
 //第三方 天气接口key值和api配置(高德)
 export class ThirdPartyWeatherConnfig {
@@ -23,7 +25,7 @@ export const enum areaEnum {
   COUNTY = 'COUNTY'
 }
 
-//天气文字映射图片
+//天气文字图片映射
 export const weatherTextMapImg = [
   {
     text: '晴',
@@ -40,10 +42,17 @@ export const weatherTextMapImg = [
   {
     text: '小雨',
     img: lightRain
+  },
+  {
+    text: '雷阵雨',
+    img: thunderstorm
+  },
+  {
+    text: '阵雨',
+    img: shower
   }
 ]
 
-console.log(clearDay, cloudy)
 //风力等级文字映射
 export const weatherSpeedMapText = [
   {
@@ -100,6 +109,36 @@ export const weatherSpeedMapText = [
   }
 ]
 
+export type selectValueType = {
+  provinceValue: null
+  cityValue: string
+  countyValue: null
+}
+
+export interface castsInterface {
+  date: string
+  week: string
+  dayweather: string
+  nightweather: string
+  daytemp: string
+  nighttemp: string
+  daywind: string
+  nightwind: string
+  daypower: string
+  nightpower: string
+  daytemp_float: string
+  nighttemp_float: string
+}
+export interface weatherInfoInterface {
+  city: string
+  adcode: string
+  province: string
+  reporttime: string
+  casts: castsInterface[]
+}
+
+export type weatherTextMapType = { text: string; img: string; level: Fn }
+
 export const option = {
   dataset: {
     provinceValue: null,

@@ -6,6 +6,8 @@
       <SettingItem name="颜色">
         <n-color-picker v-model:value="optionData.weatherCss.backgroundColor" />
       </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景">
       <SettingItem>
         <n-button size="small" @click="optionData.weatherCss.backgroundColor = 'transparent'"> 恢复默认颜色 </n-button>
       </SettingItem>
@@ -73,7 +75,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
+import { option, selectValueType } from './config'
 import SelectCity from './componnets/SelectCity.vue'
 
 const props = defineProps({
@@ -83,7 +85,7 @@ const props = defineProps({
   }
 })
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: selectValueType) => {
   props.optionData.dataset = values
 }
 </script>

-import { weatherSpeedMapText, weatherTextMapImg } from '../config'
+import { weatherSpeedMapText, weatherTextMapImg, weatherTextMapType } from '../config'
 import clearDay from '@/assets/external/weather/clearDay.png'
 
 export const useUtils = () => {
   const loadWeatherImg = (text: string) => {
-    return weatherTextMapImg.find((item: any) => item.text === text)?.img || clearDay
+    return weatherTextMapImg.find((item: Omit<weatherTextMapType, 'level'>) => item.text === text)?.img || clearDay
   }
 
   //风力等级 ≤3 3
@@ -14,7 +14,7 @@ export const useUtils = () => {
     } else {
       handleSpeed = speed
     }
-    return weatherSpeedMapText.find((item: any) => item.level(Number(handleSpeed)))?.text
+    return weatherSpeedMapText.find((item: { text: string; level: Fn }) => item.level(Number(handleSpeed)))?.text
   }
   return {
     loadWeatherImg,

 <script lang="ts" setup name="Weather">
 import { PropType, toRefs, onMounted, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { option, ThirdPartyWeatherConnfig } from './config'
+import { option, ThirdPartyWeatherConnfig, selectValueType, weatherInfoInterface } from './config'
 import axios from 'axios'
 import WeatherContent from './componnets/WeatherContent.vue'
 import { useUtils } from './hooks/useUtils'
@@ -19,11 +19,15 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 const { weatherCss } = toRefs(props.chartConfig.option)
 
-const weatherInfoValues = reactive<any>({
+type weatherInfoValuesType = {
+  weatherInfo: weatherInfoInterface[]
+}
+
+const weatherInfoValues = reactive<weatherInfoValuesType>({
   weatherInfo: []
 })
 
-const getWeatherInfos = async (area: any) => {
+const getWeatherInfos = async (area: selectValueType) => {
   const { cityValue, countyValue } = area || props.chartConfig.option.dataset
   const params = {
     key: ThirdPartyWeatherConnfig.ak,
@@ -52,7 +56,7 @@ watch(
   }
 )
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: selectValueType) => {
   getWeatherInfos(values)
 }
 </script>