web-component-gallery 2.1.3 → 2.1.4

package/lib/browse/index.jsx

@@ -63,7 +63,7 @@ function renderContent(h, {url, name}, images) {
       IMAGE: 'img'
     }
 
-    const ICON_TYPE = "icon-file_thumb"
+    const ICON_TYPE = "file_thumb"
 
     const CustomTag = getCustomTag(url)
 

package/lib/icon-font/index.js

@@ -1,33 +1,58 @@
 import { Icon } from 'ant-design-vue/es'
+import { handleEnvURL } from '../../utils/Utils'
 
 const IconFont = {
-    name: 'IconFont',
-    props: {
-      scriptUrl: {
-        type: String,
-        default: '//at.alicdn.com/t/c/font_4641025_nxf7ygyw03.js'
-      },
-      type: {
-        type: String,
-        required: true
-      }
+  name: 'IconFont',
+  props: {
+    scriptUrl: {
+      type: String,
+      default: 'webCompGallery'
     },
-    computed: {
-      iconType() {
-        return Icon.createFromIconfontCN({
-          scriptUrl: this.scriptUrl
+    type: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      _iconTypeCache: null
+    }
+  },
+  computed: {
+    iconType() {
+      if (this._iconTypeCache?.scriptUrl === this.scriptUrl) {
+        return this._iconTypeCache
+      }
+
+      try {
+        const iconType = Icon.createFromIconfontCN({
+          scriptUrl: handleEnvURL(`/iconfont/${this.scriptUrl}.js`, 'file')
         })
-      } 
-    },
-    render() {
-      const {$props: props = {}, $attrs: attrs = {} } = this
-      const IconComponent = this.iconType
-      return <IconComponent {...{ props, attrs }} on={{ ...this.$listeners }} />
+        this._iconTypeCache = iconType
+        return iconType
+      } catch (error) {
+        console.error('icon文件不存在', error)
+        return null
+      }
     }
+  },
+  render() {
+    const { $props, $attrs = {}, type } = this
+    const IconComponent = this.iconType
+    return (
+      <IconComponent
+        {...{
+          props: { ...$props, type: `icon-${type}` },
+          attrs: $attrs,
+          on: { ...this.$listeners }
+        }}
+      />
+    )
+  }
 }
 
 IconFont.install = function (Vue) {
-    Vue.component('IconFont', IconFont)
+  Vue.component('IconFont', IconFont)
 }
 
 export default IconFont

package/lib/modal/index.jsx

@@ -58,13 +58,13 @@ const ModalComp = {
             <span>{this.title}</span> 
             <div class="AntModal__Title__Blank">
               <IconFont
-                type="icon-modal_convert"
+                type="modal_convert"
                 on={{ click: this.handleConvert }}
               />
               {
                 $attrs.blankUrl &&
                 <IconFont
-                  type="icon-modal_blank"
+                  type="modal_blank"
                   on={{ click: this.handleBlank }}
                 />
               }

package/lib/no-data/index.vue

@@ -4,7 +4,7 @@
     class="no-data-container"
   >
     <div slot="image">
-        <IconFont :type="`icon-noData_${type}`" />
+        <IconFont :type="`noData_${type}`" />
     </div>
     <slot></slot>
   </Empty>

package/lib/table/index.vue

@@ -124,7 +124,7 @@ export default {
         rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange },
         locale: {
           emptyText: <div class="WebComponentTable__List__Empty">
-            <IconFont type="icon-noData_data" />
+            <IconFont type="noData_data" />
             <span>暂无数据</span>
           </div>
         },

package/lib/weather/index.vue

@@ -1,49 +1,98 @@
-  <template>
-    <div class="weather">
-        <slot name="weatherIcon" :weatherInfo="weatherInfo" />
-        <span class="weather__Info">{{ weatherInfo.weather }}</span>
-        <span class="weather__Temp">温度{{ weatherInfo.temperature }}°</span>
-    </div> 
+<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>
 </template>
 
 <script>
+const WEATHER_TYPES = {
+  '小雨,毛毛雨/细雨,雨,小雨-中雨': 'lightRain',
+  '中雨,大雨,中雨-大雨,大雨-暴雨,暴雨,大暴雨,特大暴雨,极端降雨,暴雨-大暴雨,大暴雨-特大暴雨': 'heavyRain',
+  '阵雨,强阵雨': 'rainShower',
+  '冻雨': 'iceRain',
+  '雷阵雨,强雷阵雨': 'thunderShower',
+  '少云,多云,阴,冷': 'overcast',
+  '雪,小雪,中雪,大雪,小雪-大雪,中雪-大雪,暴雪,大雪-暴雪': 'lightSnow',
+  '阵雪': 'showerySnow',
+  '晴,热': 'clear',
+  '雨雪天气,雨夹雪,阵雨夹雪,雷阵雨并伴有冰雹': 'sleet',
+  '霾,中度霾,雾,轻雾': 'lightFog',
+  '重度霾,严重霾,浓雾,强浓雾,大雾,特强浓雾,未知': 'heavyFog',
+  '晴间多云': 'cloudyToSunny',
+  '有风,平静,微风,和风,清风,强风/劲风,疾风,大风,烈风,风暴,狂爆风,飓风,热带风暴,龙卷风,浮尘,扬沙,沙尘暴,强沙尘暴': 'gale'
+}
+
+import { IconFont } from '../index'
 
 export default {
   name: 'Weather',
   props: {
     /** 当前城市高德code编码 */
-    adCode: String,
+    adCode: {
+      type: String,
+      default: '330802'
+    },
     AMapServiceKey: {
       type: String,
       default: '76aa516e74e87a1b9d169e796f2bbdc3'
     }
   },
-  data() { 
+  components: {
+    IconFont
+  },
+  data() {
     return {
-        weatherInfo: {}
+      weatherInfo: {}
+    }
+  },
+  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'
     }
   },
   mounted() {
-    this.getWeatherInfo()
+    this.fetchWeatherData()
+  },
+  watch: {
+    adCode() {
+      this.fetchWeatherData()
+    }
   },
   methods: {
-    async getWeatherInfo() {
-      await fetch(
-        `https://restapi.amap.com/v3/weather/weatherInfo?key=${this.AMapServiceKey}&city=${this.adCode}`, 
-        {
+    async fetchWeatherData() {
+      if (!this.adCode || !this.AMapServiceKey) return
+      
+      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'
+              'Content-Type': 'application/json'
             }
-        })
-      .then(response => response.json())
-      .then(({infocode, lives}) => {
-        infocode == '10000' && (this.weatherInfo = { ...lives[0] })
-      })
-      .catch(error => {
-        console.error('Error:', error)
-      })
+          }
+        )
+        
+        const { infocode, lives } = await response.json()
+        
+        if (infocode === '10000') {
+          this.weatherInfo = { ...lives[0] }
+          return
+        }
+        console.error('天气数据解析失败:', err)
+      } catch (err) {
+        console.error('获取天气数据失败:', err)
+      }
     }
   }
 }
-</script>
+</script>

package/package.json

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

package/utils/Utils.js

@@ -1,4 +1,6 @@
 import message from 'ant-design-vue/es/message'
+import { verifyIPStr } from './Validate'
+import { findNthOccurrence } from './Filter'
 
 /**
  * 下载文件
@@ -58,4 +60,60 @@ export function getPictureAttrs(url, astrictH) {
         // 错误处理
         image.onerror = () => resolve({ width: 0, height: 0 })
     })
+}
+
+
+/**
+ * 根据环境配置处理URL
+ * @param {string} url - 原始URL
+ * @param {string} [processType='url'] - 处理类型('url'|'image'|'file')
+ * @returns {string} 处理后的URL
+ * @throws {Error} 当processType不支持时抛出错误
+ */
+export function handleEnvURL(url, processType = 'url') {
+  // 图片格式正则（预编译提升性能）
+  const imagePattern = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff?)$/i
+  // 判断当前是否为开发环境
+  const isDev = process.env.NODE_ENV === 'development'
+  
+  // 基础校验
+  if (verifyIPStr(url) || !url) return url
+
+  // 环境变量解构
+  const { origin } = window.location
+  const { VUE_APP_ROUTE_PORT, VUE_APP_API_BASE_URL } = process.env
+
+  // URL处理策略
+  const urlStrategies = {
+    url: {
+      dev: () => constructUrl(
+        `${origin.slice(0, -4)}${VUE_APP_ROUTE_PORT}`,
+        url.slice(findNthOccurrence(url, '/', 1))
+      ),
+      prod: () => constructUrl(origin, url)
+    },
+    image: {
+      dev: () => 
+        imagePattern.test(url)
+         ? constructUrl(VUE_APP_API_BASE_URL, url)
+         : url,
+      prod: () => 
+        imagePattern.test(url)
+         ? constructUrl(origin, url)
+         : url
+    },
+    file: {
+      dev: () => constructUrl(VUE_APP_API_BASE_URL, url),
+      prod: () => constructUrl(origin, url)
+    }
+  } 
+
+  // 构造URL辅助函数
+  const constructUrl = (base, path) => 
+    `${base}${path}`
+
+  // 获取处理策略
+  const strategy = urlStrategies[processType]
+
+  return isDev ? strategy.dev() : strategy.prod()
 }