web-component-gallery 2.3.13 → 2.3.15

package/dist/style.css

@@ -2,14 +2,86 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.weather {
+.weather--compact {
+  display: flex;
+  align-items: center;
+  gap: 0px 8px;
+}
+.weather--card {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 24px 0;
+  flex-direction: column;
+}
+.weather__text {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+.weather__temp {
+  color: #1890ff;
   font-size: 16px;
+}
+.weather__header {
   align-items: center;
   display: flex;
-  gap: 0 8px;
+  gap: 0 12px;
   flex-direction: row;
 }
-.weather i {
+.weather__city-name {
   font-size: 24px;
 }
+.weather__container {
+  flex: 1;
+  justify-content: space-between;
+  display: flex;
+  gap: 0;
+  flex-direction: row;
+}
+.weather__main {
+  flex: 1;
+  justify-content: center;
+  display: flex;
+  gap: 16px 0;
+  flex-direction: column;
+}
+.weather__temp-box {
+  font-size: 32px;
+}
+.weather__detail-grid {
+  width: 280px;
+  flex-wrap: wrap;
+  display: flex;
+  gap: 12px;
+  flex-direction: row;
+}
+.weather__detail-item {
+  width: calc(50% - 6px);
+  align-items: center;
+  display: flex;
+  gap: 0 12px;
+  flex-direction: row;
+}
+.weather__detail-icon {
+  font-size: 16px;
+}
+.weather__detail-info {
+  display: flex;
+  gap: 8px 0px;
+  flex-direction: column;
+}
+.weather__condition-box {
+  align-items: center;
+  font-size: 16px;
+  padding-left: 4px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 0 12px;
+  flex-direction: row;
+}
+.weather__icon-font {
+  font-size: 32px;
+}
 

package/lib/form-comp/ASelectCustom.vue

@@ -154,7 +154,8 @@ export default {
       isSelectOpen: false,       // 选择器是否打开
       isLoadingMore: false,      // 是否正在加载更多
       searchValue: '',           // 搜索值
-      hasPreloadedSelected: false // 是否已预加载选中项
+      hasPreloadedSelected: false, // 是否已预加载选中项
+      prevOptionsHash: null      // 上次 options 的哈希值（用于防抖）
     }
   },
   
@@ -399,7 +400,7 @@ export default {
      * 处理选项变化
      */
     handleOptionsChange(newVal) {
-      this.innerOptions = [...newVal]
+      this.innerOptions = this.deduplicateOptions([...newVal, ...this.innerOptions])
     },
     
     /**
@@ -500,7 +501,7 @@ export default {
         
         let newInnerOptions = []
         this.pagination.current === 1 && isReset
-          ? newInnerOptions = [...records]
+          ? newInnerOptions = [...this.options, ...records]
           : newInnerOptions = [...this.innerOptions, ...this.handleFilter(records)]
         
         // 对合并后的数据进行去重

package/lib/weather/index.vue

@@ -1,97 +1,273 @@
 <template>
-  <div class="weather">
-    <slot name="weatherIcon" :weatherInfo="weatherInfo">
-      <!-- <IconFont scriptUrl="weatherGallery" :type="weatherType" /> -->
-    </slot>
-    <span class="weather__Info">{{ weatherInfo.weather || '--' }}</span>
-    <span class="weather__Temp">温度{{ weatherInfo.temperature || '--' }}°</span>
+<div class="weather" :class="layoutMode">
+    <!-- 紧凑模式 -->
+    <template v-if="mode === 'compact'">
+      <span class="weather__icon">
+        <WeatherIcon 
+          :iconCode="weatherIconCode" 
+          :slotData="{ weatherType: weatherIconCode }"
+        >
+          <template #default="{ iconCode }">
+            <IconFont scriptUrl="weatherGallery" :type="`W${iconCode}`" />
+          </template>
+        </WeatherIcon>
+      </span>
+      <span class="weather__text">{{ condition.condition }}</span>
+      <span class="weather__temp">温度 {{ condition.temp }} °</span>
+    </template>
+    
+    <!-- 卡片模式 -->
+    <template v-else>
+      <!-- 城市信息和日夜标识 -->
+      <WeatherHeader 
+        :city="city.name" 
+        :dayOrNight="dayOrNight" 
+      />
+
+      <div class="weather__container">
+        <!-- 温度和天气状况 -->
+        <WeatherMain 
+          :temp="condition.temp" 
+          :conditionText="condition.condition" 
+          :iconCode="weatherIconCode" 
+        />
+        <!-- 详情数据网格 -->
+        <WeatherDetailGrid 
+          :items="detailItems" 
+          :windData="windData" 
+        />
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
-const WEATHER_TYPES = {
-  '小雨,毛毛雨/细雨,雨,小雨-中雨': 'lightRain',
-  '中雨,大雨,中雨-大雨,大雨-暴雨,暴雨,大暴雨,特大暴雨,极端降雨,暴雨-大暴雨,大暴雨-特大暴雨': 'heavyRain',
-  '阵雨,强阵雨': 'rainShower',
-  '冻雨': 'iceRain',
-  '雷阵雨,强雷阵雨': 'thunderShower',
-  '少云,多云,阴,冷': 'overcast',
-  '雪,小雪,中雪,大雪,小雪-大雪,中雪-大雪,暴雪,大雪-暴雪': 'lightSnow',
-  '阵雪': 'showerySnow',
-  '晴,热': 'clear',
-  '雨雪天气,雨夹雪,阵雨夹雪,雷阵雨并伴有冰雹': 'sleet',
-  '霾,中度霾,雾,轻雾': 'lightFog',
-  '重度霾,严重霾,浓雾,强浓雾,大雾,特强浓雾,未知': 'heavyFog',
-  '晴间多云': 'cloudyToSunny',
-  '有风,平静,微风,和风,清风,强风/劲风,疾风,大风,烈风,风暴,狂爆风,飓风,热带风暴,龙卷风,浮尘,扬沙,沙尘暴,强沙尘暴': 'gale'
-}
-
 import IconFont from '../icon-font'
 
+// 详情项配置常量（防止意外修改）
+const DETAIL_ITEMS_CONFIG = Object.freeze([
+  { name: '风向', icon: '💨', code: 'windDegrees', unit: '°' },
+  { name: '风速', icon: '🌪️', code: 'windSpeed', unit: 'm/s' },
+  { name: '降雨', icon: '🌧️', code: 'precipitation', unit: 'mm/h' },
+  { name: '湿度', icon: '💧', code: 'humidity', unit: '%' }
+])
+
+// 默认天气数据结构
+const DEFAULT_WEATHER_DATA = Object.freeze({
+  condition: {
+    condition: '--',
+    temp: '--',
+    windDir: '',
+    windLevel: '',
+    windDegrees: 0,
+    windSpeed: 0,
+    precipitation: 0,
+    humidity: 0,
+    icon: 0
+  },
+  city: { name: '--' }
+})
+
 export default {
   name: 'Weather',
+  components: {
+    IconFont,
+    // 功能型子组件：天气图标容器
+    WeatherIcon: {
+      functional: true,
+      props: ['iconCode', 'slotData'],
+      render(h, ctx) {
+        const slotContent = ctx.parent.$scopedSlots.weatherIcon?.(ctx.props.slotData)
+        return h('div', {}, [
+          slotContent || ctx.slots().default
+        ])
+      }
+    },
+    // 功能型子组件：城市头部
+    WeatherHeader: {
+      functional: true,
+      props: ['city', 'dayOrNight'],
+      render(h, ctx) {
+        return h('div', { class: 'weather__header' }, [
+          h('span', { class: 'weather__city-name' }, ctx.props.city),
+          h('span', { class: 'weather__day-night' }, ctx.props.dayOrNight)
+        ])
+      }
+    },
+    // 功能型子组件：主区域
+    WeatherMain: {
+      functional: true,
+      props: ['temp', 'conditionText', 'iconCode'],
+      render(h, ctx) {
+        return h('div', { class: 'weather__main' }, [
+          h('div', { class: 'weather__temp-box' }, [
+            h('span', { class: 'weather__temp-value' }, ctx.props.temp),
+            h('span', { class: 'weather__temp-unit' }, ' °C')
+          ]),
+          h('div', { class: 'weather__condition-box' }, [
+            h('span', { class: 'weather__condition-text' }, ctx.props.conditionText),
+            h(IconFont, {
+              props: { scriptUrl: 'weatherGallery', type: `W${ctx.props.iconCode}` },
+              class: { 'weather__icon-font': true }
+            })
+          ])
+        ])
+      }
+    },
+    // 功能型子组件：详情网格
+    WeatherDetailGrid: {
+      functional: true,
+      props: ['items', 'windData'],
+      render(h, ctx) {
+        return h('div', { class: 'weather__detail-grid' },
+          ctx.props.items.map((item, index) =>
+            h('div', { key: index, class: 'weather__detail-item' }, [
+              h('span', { class: 'weather__detail-icon' }, item.icon),
+              h('div', { class: 'weather__detail-info' }, [
+                h('span', { class: 'weather__detail-label' }, item.name),
+                h('span', { class: 'weather__detail-value' },
+                  index === 0
+                    ? [h('span', { class: 'weather__wind-value' }, `${ctx.props.windData.degrees}°`), ` ${ctx.props.windData.direction} ${ctx.props.windData.level}级`]
+                    : `${item.value} ${item.unit}`
+                )
+              ])
+            ])
+          )
+        )
+      }
+    }
+  },
   props: {
-    /** 当前城市高德code编码 */
-    adCode: {
+    // 显示模式：'compact'（紧凑） | 'card'（卡片）
+    mode: {
       type: String,
-      default: '330802'
+      default: 'card',
+      validator: (val) => ['compact', 'card'].includes(val)
     },
-    AMapServiceKey: {
+    // 城市 ID（用于查询天气数据）
+    cityId: {
       type: String,
-      default: '76aa516e74e87a1b9d169e796f2bbdc3'
+      default: '1262'
     }
   },
-  components: {
-    IconFont
-  },
   data() {
     return {
-      weatherInfo: {}
+      weatherData: DEFAULT_WEATHER_DATA,
+      detailItems: [],
+      loading: false  // 加载状态控制
     }
   },
   computed: {
-    weatherType() {
-      if (!this.weatherInfo.weather) return 'clear'
-      
-      const matchedKey = Object.keys(WEATHER_TYPES).find(key => 
-        key.includes(this.weatherInfo.weather)
-      )
-      return WEATHER_TYPES[matchedKey] || 'clear'
+    // 提取 condition 对象，提供默认值保护
+    condition() {
+      return this.weatherData.condition || DEFAULT_WEATHER_DATA.condition
+    },
+    
+    // 提取 city 对象，提供默认值保护
+    city() {
+      return this.weatherData.city || DEFAULT_WEATHER_DATA.city
+    },
+    
+    // 根据当前小时判断白天/夜间（6-18 点为白天）
+    dayOrNight() {
+      const hour = new Date().getHours()
+      return hour >= 6 && hour < 18 ? '白天' : '夜间'
+    },
+    
+    // 天气图标编码（来自 API 返回）
+    weatherIconCode() {
+      return this.condition.icon || 0
+    },
+    
+    // 布局模式类名（用于 CSS 样式切换）
+    layoutMode() {
+      return `weather--${this.mode}`
+    },
+    
+    // 风力数据聚合（角度、方向、等级）
+    windData() {
+      return {
+        degrees: this.condition.windDegrees || 0,
+        direction: this.condition.windDir || '无持续风向',
+        level: this.condition.windLevel || 0
+      }
     }
   },
+  created() {
+    // 初始化详情项数据
+    this.detailItems = DETAIL_ITEMS_CONFIG.map(item => ({
+      ...item,
+      value: '0'
+    }))
+  },
   mounted() {
     this.fetchWeatherData()
   },
   watch: {
-    adCode() {
-      this.fetchWeatherData()
+    // 监听城市变化，自动重新获取数据
+    cityId: {
+      handler() {
+        this.fetchWeatherData()
+      },
+      immediate: false
     }
   },
   methods: {
+    // 获取天气数据（并发请求）
     async fetchWeatherData() {
-      if (!this.adCode || !this.AMapServiceKey) return
+      if (!this.cityId) return
+      
+      this.loading = true
       
       try {
-        const response = await fetch(
-          `https://restapi.amap.com/v3/weather/weatherInfo?key=${this.AMapServiceKey}&city=${this.adCode}`, 
-          {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'application/json'
-            }
-          }
-        )
+        await Promise.all([
+          this.fetchConditionData(),    // 实时天气
+          this.fetchForecastData()      // 24 小时预报
+        ])
         
-        const { infocode, lives } = await response.json()
-        
-        if (infocode === '10000') {
-          this.weatherInfo = { ...lives[0] }
-          return
-        }
-        console.error('天气数据解析失败:', err)
+        this.$emit('update', this.weatherData)
       } catch (err) {
         console.error('获取天气数据失败:', err)
+        this.$emit('error', err)
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    // 获取实时天气数据
+    async fetchConditionData() {
+      const res = await this.$request.get('/weather-service-center/weatherService/weather/conditionV2', {
+        params: { cityId: this.cityId }
+      })
+      
+      if (res.data) {
+        this.weatherData = res.data
+        this.updateDetailItems()
+      }
+    },
+    
+    // 获取 24 小时预报（用于降雨量数据）
+    async fetchForecastData() {
+      const res = await this.$request.get('/weather-service-center/weatherService/weather/forecast24hoursV2', {
+        params: { cityId: this.cityId }
+      })
+      
+      const precipitation = res?.data?.hourly?.[0]?.qpf
+      if (precipitation !== undefined) {
+        this.detailItems[2].value = precipitation
       }
+    },
+    
+    // 更新详情项数值（从 API 数据同步）
+    updateDetailItems() {
+      this.detailItems.forEach(item => {
+        item.value = this.condition[item.code] || 0
+      })
+    },
+    
+    // 手动刷新天气数据
+    refresh() {
+      this.fetchWeatherData()
     }
   }
 }

package/lib/weather/style/index.less

@@ -3,9 +3,86 @@
 @import '../../style/mixins.less';
 
 .weather {
-    font-size: @font-size-lg;
-    align-items: center;
-    .flex-layout(@flexGap: 0 @padding-xs);
+    &--compact {
+        display: flex;
+        align-items: center;
+        gap: 0px 8px;
+    }
+    
+    &--card {
+        padding: @padding-md;
+        box-sizing: border-box;
+        .square(100%);
+        .flex-layout(column, 24px 0);
+    }
 
-    i { font-size: @avatar-size-sm; }
+    //  ====== 紧凑模式 ======
+    &__text {
+        color: @text-color;         
+        font-size: @font-size-base;
+    }
+        
+    &__temp {
+        color: @primary-color;
+        font-size: @font-size-lg; 
+    }
+
+    //  ====== 卡片模式 ======
+
+    &__header {
+      align-items: center;
+      .flex-layout(@flexGap: 0 12px);
+    }
+
+    &__city-name {
+      font-size: @avatar-size-sm;
+    }
+
+    &__container {
+      flex: 1;
+      justify-content: space-between;
+      .flex-layout();
+    }
+
+    &__main {
+      flex: 1;
+      justify-content: center;
+      .flex-layout(column, 16px 0);
+    }
+
+    &__temp-box {
+      font-size: @avatar-size-base;
+    }
+
+    &__detail-grid {
+      width: 280px;
+      flex-wrap: wrap;
+      .flex-layout(@flexGap: 12px);
+    }
+
+    &__detail-item {
+      width: calc(50% - 6px);
+      align-items: center;
+      .flex-layout(@flexGap: 0 12px);
+    }
+
+    &__detail-icon {
+      font-size: @font-size-lg;
+    }
+
+    &__detail-info {
+      .flex-layout(column, 8px 0px);
+    }
+
+    &__condition-box {
+      align-items: center;
+      font-size: @font-size-lg;
+      padding-left: 4px; // 与温度保持左对齐
+      box-sizing: border-box;
+      .flex-layout(@flexGap: 0 12px);
+    }
+
+    &__icon-font {
+      font-size: @avatar-size-base;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.3.13",
+  "version": "2.3.15",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [