简柏林 / thingskit-view · Commits

Commit 457979888759e96d369165c924767d5ff25218d0

Authored by fengwotao
1 parent d5b71105

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

Inline Side-by-side
Showing 3 changed files with 20 additions and 77 deletions
@@ -146,18 +146,12 @@ export const option = { @@ -146,18 +146,12 @@ export const option = {
146 countyValue: null 146 countyValue: null
147 }, 147 },
148 weatherCss: { 148 weatherCss: {
149 - temperatureTextSize: '16',  
150 - temperatureTextColor: '#000000',  
151 - cityTextSize: '16',  
152 - cityTextColor: '#000000',  
153 - weatherIconSizeWidth: '24',  
154 - weatherIconSizeHeight: '24',  
155 - airSpeedTextSize: '16',  
156 - airSpeedTextColor: '#000000',  
157 - airSpeedLevelTextSize: '16',  
158 - airSpeedLevelTextColor: '#000000', 149 + text: 16,
  150 + color: 'black',
159 backgroundColor: 'transparent', 151 backgroundColor: 'transparent',
160 - borderRadius: '5' 152 + borderRadius: '5',
  153 + weatherIconSizeWidth: '24',
  154 + weatherIconSizeHeight: '24'
161 } 155 }
162 } 156 }
163 157
@@ -12,61 +12,26 @@ @@ -12,61 +12,26 @@
12 <n-button size="small" @click="optionData.weatherCss.backgroundColor = 'transparent'"> 恢复默认颜色 </n-button> 12 <n-button size="small" @click="optionData.weatherCss.backgroundColor = 'transparent'"> 恢复默认颜色 </n-button>
13 </SettingItem> 13 </SettingItem>
14 <SettingItem name="圆角"> 14 <SettingItem name="圆角">
15 - <n-input v-model:value="optionData.weatherCss.borderRadius" /> 15 + <n-input-number v-model:value="optionData.weatherCss.borderRadius" />
16 </SettingItem> 16 </SettingItem>
17 </SettingItemBox> 17 </SettingItemBox>
18 - <SettingItemBox name="温度文字">  
19 - <SettingItem name="大小">  
20 - <n-input v-model:value="optionData.weatherCss.temperatureTextSize" />  
21 - </SettingItem>  
22 - <SettingItem name="颜色">  
23 - <n-color-picker v-model:value="optionData.weatherCss.temperatureTextColor" />  
24 - </SettingItem>  
25 - <SettingItem>  
26 - <n-button size="small" @click="optionData.weatherCss.temperatureTextColor = '#000000'"> 恢复默认颜色 </n-button>  
27 - </SettingItem>  
28 - </SettingItemBox>  
29 - <SettingItemBox name="城市名">  
30 - <SettingItem name="大小">  
31 - <n-input v-model:value="optionData.weatherCss.cityTextSize" />  
32 - </SettingItem>  
33 - <SettingItem name="颜色">  
34 - <n-color-picker v-model:value="optionData.weatherCss.cityTextColor" />  
35 - </SettingItem>  
36 - <SettingItem>  
37 - <n-button size="small" @click="optionData.weatherCss.cityTextColor = '#000000'"> 恢复默认颜色 </n-button>  
38 - </SettingItem>  
39 - </SettingItemBox>  
40 - <SettingItemBox name="天气图标"> 18 + <SettingItemBox name="图标">
41 <SettingItem name="宽度"> 19 <SettingItem name="宽度">
42 - <n-input v-model:value="optionData.weatherCss.weatherIconSizeWidth" /> 20 + <n-input-number :min="0" v-model:value="optionData.weatherCss.weatherIconSizeWidth" />
43 </SettingItem> 21 </SettingItem>
44 <SettingItem name="高度"> 22 <SettingItem name="高度">
45 - <n-input v-model:value="optionData.weatherCss.weatherIconSizeHeight" />  
46 - </SettingItem>  
47 - </SettingItemBox>  
48 - <SettingItemBox name="风速文字">  
49 - <SettingItem name="大小">  
50 - <n-input v-model:value="optionData.weatherCss.airSpeedTextSize" />  
51 - </SettingItem>  
52 - <SettingItem name="颜色">  
53 - <n-color-picker v-model:value="optionData.weatherCss.airSpeedTextColor" />  
54 - </SettingItem>  
55 - <SettingItem>  
56 - <n-button size="small" @click="optionData.weatherCss.airSpeedTextColor = '#000000'"> 恢复默认颜色 </n-button> 23 + <n-input-number :min="0" v-model:value="optionData.weatherCss.weatherIconSizeHeight" />
57 </SettingItem> 24 </SettingItem>
58 </SettingItemBox> 25 </SettingItemBox>
59 - <SettingItemBox name="风速等级"> 26 + <SettingItemBox name="文字">
60 <SettingItem name="大小"> 27 <SettingItem name="大小">
61 - <n-input v-model:value="optionData.weatherCss.airSpeedLevelTextSize" /> 28 + <n-input-number :min="1" v-model:value="optionData.weatherCss.text" />
62 </SettingItem> 29 </SettingItem>
63 <SettingItem name="颜色"> 30 <SettingItem name="颜色">
64 - <n-color-picker v-model:value="optionData.weatherCss.airSpeedLevelTextColor" /> 31 + <n-color-picker v-model:value="optionData.weatherCss.color" />
65 </SettingItem> 32 </SettingItem>
66 <SettingItem> 33 <SettingItem>
67 - <n-button size="small" @click="optionData.weatherCss.airSpeedLevelTextColor = '#000000'">  
68 - 恢复默认颜色  
69 - </n-button> 34 + <n-button size="small" @click="optionData.weatherCss.color = 'black'"> 恢复默认颜色 </n-button>
70 </SettingItem> 35 </SettingItem>
71 </SettingItemBox> 36 </SettingItemBox>
72 </CollapseItem> 37 </CollapseItem>
@@ -67,11 +67,11 @@ const onHandleSelectValues = (values: selectValueType) => { @@ -67,11 +67,11 @@ const onHandleSelectValues = (values: selectValueType) => {
67 <template #trigger> 67 <template #trigger>
68 <n-card class="card" :bordered="false"> 68 <n-card class="card" :bordered="false">
69 <div class="card-content" v-for="(item, index) in weatherInfoValues.weatherInfo" :key="index"> 69 <div class="card-content" v-for="(item, index) in weatherInfoValues.weatherInfo" :key="index">
70 - <div class="weather-temp">{{ item?.casts[0]?.daytemp }}°C</div>  
71 - <div class="weather-city">{{ item?.city }}</div> 70 + <div class="weather-text">{{ item?.casts[0]?.daytemp }}°C</div>
  71 + <div class="weather-text">{{ item?.city }}</div>
72 <div><img class="weather-img" :src="loadWeatherImg(item?.casts[0]?.dayweather)" /></div> 72 <div><img class="weather-img" :src="loadWeatherImg(item?.casts[0]?.dayweather)" /></div>
73 - <div class="weather-speed">{{ item?.casts[0]?.daywind }}</div>  
74 - <div class="weather-speed-level">{{ loadWeatherLevel(item?.casts[0]?.daypower) }}</div> 73 + <div class="weather-text">{{ item?.casts[0]?.daywind }}</div>
  74 + <div class="weather-text">{{ loadWeatherLevel(item?.casts[0]?.daypower) }}</div>
75 </div> 75 </div>
76 </n-card> 76 </n-card>
77 </template> 77 </template>
@@ -95,29 +95,13 @@ const onHandleSelectValues = (values: selectValueType) => { @@ -95,29 +95,13 @@ const onHandleSelectValues = (values: selectValueType) => {
95 .card-content { 95 .card-content {
96 display: flex; 96 display: flex;
97 justify-content: space-between; 97 justify-content: space-between;
98 - .weather-temp {  
99 - font-size: v-bind('`${weatherCss.temperatureTextSize}px`');  
100 - color: v-bind('weatherCss.temperatureTextColor');  
101 - }  
102 - .weather-city {  
103 - text-overflow: ellipsis;  
104 - overflow: hidden;  
105 - word-break: break-all;  
106 - white-space: nowrap;  
107 - font-size: v-bind('`${weatherCss.cityTextSize}px`');  
108 - color: v-bind('weatherCss.cityTextColor');  
109 - }  
110 .weather-img { 98 .weather-img {
111 width: v-bind('`${weatherCss.weatherIconSizeWidth}px`'); 99 width: v-bind('`${weatherCss.weatherIconSizeWidth}px`');
112 height: v-bind('`${weatherCss.weatherIconSizeHeight}px`'); 100 height: v-bind('`${weatherCss.weatherIconSizeHeight}px`');
113 } 101 }
114 - .weather-speed {  
115 - font-size: v-bind('`${weatherCss.airSpeedTextSize}px`');  
116 - color: v-bind('weatherCss.airSpeedTextColor');  
117 - }  
118 - .weather-speed-level {  
119 - font-size: v-bind('`${weatherCss.airSpeedLevelTextSize}px`');  
120 - color: v-bind('weatherCss.airSpeedLevelTextColor'); 102 + .weather-text{
  103 + font-size: v-bind('`${weatherCss.text}px`');
  104 + color: v-bind('weatherCss.color');
121 } 105 }
122 img { 106 img {
123 width: 24px; 107 width: 24px;