perf(src/packages): 小组件里优化天气自定义样式

@@ -146,18 +146,12 @@ export const option = {
     countyValue: null
   },
   weatherCss: {
-    temperatureTextSize: '16',
-    temperatureTextColor: '#000000',
-    cityTextSize: '16',
-    cityTextColor: '#000000',
-    weatherIconSizeWidth: '24',
-    weatherIconSizeHeight: '24',
-    airSpeedTextSize: '16',
-    airSpeedTextColor: '#000000',
-    airSpeedLevelTextSize: '16',
-    airSpeedLevelTextColor: '#000000',
+    text: 16,
+    color: 'black',
     backgroundColor: 'transparent',
-    borderRadius: '5'
+    borderRadius: '5',
+    weatherIconSizeWidth: '24',
+    weatherIconSizeHeight: '24'
   }
 }
 

@@ -12,61 +12,26 @@
         <n-button size="small" @click="optionData.weatherCss.backgroundColor = 'transparent'"> 恢复默认颜色 </n-button>
       </SettingItem>
       <SettingItem name="圆角">
-        <n-input v-model:value="optionData.weatherCss.borderRadius" />
+        <n-input-number v-model:value="optionData.weatherCss.borderRadius" />
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="温度文字">
-      <SettingItem name="大小">
-        <n-input v-model:value="optionData.weatherCss.temperatureTextSize" />
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker v-model:value="optionData.weatherCss.temperatureTextColor" />
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.weatherCss.temperatureTextColor = '#000000'"> 恢复默认颜色 </n-button>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="城市名">
-      <SettingItem name="大小">
-        <n-input v-model:value="optionData.weatherCss.cityTextSize" />
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker v-model:value="optionData.weatherCss.cityTextColor" />
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.weatherCss.cityTextColor = '#000000'"> 恢复默认颜色 </n-button>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="天气图标">
+    <SettingItemBox name="图标">
       <SettingItem name="宽度">
-        <n-input v-model:value="optionData.weatherCss.weatherIconSizeWidth" />
+        <n-input-number :min="0" v-model:value="optionData.weatherCss.weatherIconSizeWidth" />
       </SettingItem>
       <SettingItem name="高度">
-        <n-input v-model:value="optionData.weatherCss.weatherIconSizeHeight" />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="风速文字">
-      <SettingItem name="大小">
-        <n-input v-model:value="optionData.weatherCss.airSpeedTextSize" />
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker v-model:value="optionData.weatherCss.airSpeedTextColor" />
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.weatherCss.airSpeedTextColor = '#000000'"> 恢复默认颜色 </n-button>
+        <n-input-number :min="0" v-model:value="optionData.weatherCss.weatherIconSizeHeight" />
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="风速等级">
+    <SettingItemBox name="文字">
       <SettingItem name="大小">
-        <n-input v-model:value="optionData.weatherCss.airSpeedLevelTextSize" />
+        <n-input-number :min="1" v-model:value="optionData.weatherCss.text" />
       </SettingItem>
       <SettingItem name="颜色">
-        <n-color-picker v-model:value="optionData.weatherCss.airSpeedLevelTextColor" />
+        <n-color-picker v-model:value="optionData.weatherCss.color" />
       </SettingItem>
       <SettingItem>
-        <n-button size="small" @click="optionData.weatherCss.airSpeedLevelTextColor = '#000000'">
-          恢复默认颜色
-        </n-button>
+        <n-button size="small" @click="optionData.weatherCss.color = 'black'"> 恢复默认颜色 </n-button>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>

@@ -67,11 +67,11 @@ const onHandleSelectValues = (values: selectValueType) => {
       <template #trigger>
         <n-card class="card" :bordered="false">
           <div class="card-content" v-for="(item, index) in weatherInfoValues.weatherInfo" :key="index">
-            <div class="weather-temp">{{ item?.casts[0]?.daytemp }}°C</div>
-            <div class="weather-city">{{ item?.city }}</div>
+            <div class="weather-text">{{ item?.casts[0]?.daytemp }}°C</div>
+            <div class="weather-text">{{ item?.city }}</div>
             <div><img class="weather-img" :src="loadWeatherImg(item?.casts[0]?.dayweather)" /></div>
-            <div class="weather-speed">{{ item?.casts[0]?.daywind }}</div>
-            <div class="weather-speed-level">{{ loadWeatherLevel(item?.casts[0]?.daypower) }}</div>
+            <div class="weather-text">{{ item?.casts[0]?.daywind }}</div>
+            <div class="weather-text">{{ loadWeatherLevel(item?.casts[0]?.daypower) }}</div>
           </div>
         </n-card>
       </template>
@@ -95,29 +95,13 @@ const onHandleSelectValues = (values: selectValueType) => {
   .card-content {
     display: flex;
     justify-content: space-between;
-    .weather-temp {
-      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('`${weatherCss.cityTextSize}px`');
-      color: v-bind('weatherCss.cityTextColor');
-    }
     .weather-img {
       width: v-bind('`${weatherCss.weatherIconSizeWidth}px`');
       height: v-bind('`${weatherCss.weatherIconSizeHeight}px`');
     }
-    .weather-speed {
-      font-size: v-bind('`${weatherCss.airSpeedTextSize}px`');
-      color: v-bind('weatherCss.airSpeedTextColor');
-    }
-    .weather-speed-level {
-      font-size: v-bind('`${weatherCss.airSpeedLevelTextSize}px`');
-      color: v-bind('weatherCss.airSpeedLevelTextColor');
+    .weather-text{
+      font-size: v-bind('`${weatherCss.text}px`');
+      color: v-bind('weatherCss.color');
     }
     img {
       width: 24px;