web-component-gallery 1.3.12 → 2.0.2

package/plugins/method/AMap.js

@@ -1,368 +0,0 @@
-// amap-plugin.js
-// import AMapLoader from '@amap/amap-jsapi-loader'
-
-/** 入口文件不同 作用域不同 */
-let AMapKey = null
-let AMapStyle = null
-let AMapInstance = null
-/** 默认地图key、样式及安全解码 */
-let AMapConfig = {
-  key: '722d07dd44d442d72a25a1304bac7743',
-  style: 'amap://styles/ff26c7ed32880397f692f5b69b1c1f9f',
-  securityJsCode: '90366326a87f1d0e3ddb43e05cc021b1'
-}
-
-// 安全配置 / 地图样式配置
-export const setAMapSecurity = (config = AMapConfig) => {
-  const { key, style, securityJsCode } = config
-  AMapKey = key
-  AMapStyle = style
-  /** 设置高德地图密钥 */
-  window.forceWebGL = true
-  window._AMapSecurityConfig = { securityJsCode }
-}
-
-
-// 核心地图服务类
-class AMapService {
-  constructor(AMap) {
-    this.AMap = AMap
-    this._iconCache = new Map() // 图标缓存
-
-    /** 常用覆盖物 */
-    this.layers = {
-      setIcon: this.setIcon.bind(this),
-      setMarker: this.setMarker.bind(this),
-      setInfoWindow: this._createInfoWindowHandler()
-    } 
-
-    /** 抛出地图常用方法 */ 
-    this.methods = {
-      getMapAddress: this.getMapAddress.bind(this),
-      getMapSearch: this.getMapSearch.bind(this),
-      setMapDriving: this.setMapDriving.bind(this),
-      drawMapAnimation,
-      parseRouteToPath,
-      getOverlayPos
-    }
-
-  }
-
-  /** 初始化地图 */
-  initMap(container, options = {}) {
-    const map = new this.AMap.Map(container, {
-      zoom: 13,
-      zooms: [3, 20],
-      pitch: 30,
-      rotation: -15,
-      viewMode: '3D',
-      center: [118.868228, 28.892844],
-      mapStyle: AMapStyle,
-      ...options
-    })
-    
-    options.zoomTool && map.addControl(new this.AMap.ToolBar())
-    options.directionTool && map.addControl(new this.AMap.ControlBar())
-    
-    return map
-  }
-
-  /** 格式化地图经纬度 */
-  setLngLat(position) {
-    return new this.AMap.LngLat(position[0], position[1])
-  } 
-
-  /** 创建信息窗口处理器（柯里化函数） */
-  _createInfoWindowHandler() {
-    return (Vue) => {
-      if (!Vue || !Vue.extend) {
-        throw new Error('必须传入有效的Vue构造函数')
-      }
-      
-      return ({component, props, options = {}}) => {
-        if (!component) throw new Error('component参数必填')
-        
-        const InfoWindowComponent = Vue.extend(component)
-        const instance = new InfoWindowComponent({ 
-          propsData: props 
-        }).$mount(document.createElement('div'))
-        
-        return new this.AMap.InfoWindow({
-          isCustom: true,
-          content: instance.$el,
-          ...options
-        })
-      }
-    }
-  }
-
-  /** 带缓存的图标创建方法 */
-  async setIcon(iconUrl) {
-    if (this._iconCache.has(iconUrl)) {
-      return this._iconCache.get(iconUrl)
-    }
-
-    return new Promise((resolve, reject) => {
-      const icon = new this.AMap.Icon({
-        image: iconUrl,
-        imageOffset: new this.AMap.Pixel(0, 0)
-      })
-
-      const img = new Image()
-      img.onload = () => {
-        const size = new this.AMap.Size(img.width, img.height)
-        icon.setSize(size)
-        icon.setImageSize(size)
-        this._iconCache.set(iconUrl, icon)
-        resolve(icon)
-      }
-      img.onerror = () => reject(new Error(`图标加载失败: ${iconUrl}`))
-      img.src = iconUrl
-    })
-  }
-
-  /** 增强的标记点创建方法 */
-  async setMarker(iconUrl, options = {}) { 
-    try {
-      const icon = await this.setIcon(iconUrl)
-      const marker = new this.AMap.Marker({
-        anchor: 'bottom-center',
-        ...options,
-        icon
-      })
-      return marker
-    } catch (error) {
-      console.error('创建标记点失败:', error)
-      throw error
-    }
-  }
-
-  /** 地图逆地理编码 */
-  getMapAddress({longitude, latitude}, callBack) {
-    return new Promise((resolve, reject) => {
-      const geocoder = new this.AMap.Geocoder({
-        city: '全国',
-        extensions: 'all'
-      })
-      
-      geocoder.getAddress([longitude, latitude], (status, result) => {
-        if (status === 'complete' && result.info === 'OK') {
-          const { formattedAddress, pois } = result.regeocode
-          const { district, township } = result.regeocode.addressComponent
-          const division = township && formattedAddress.includes(township) 
-            ? formattedAddress.indexOf(township) + township.length
-            : formattedAddress.indexOf(district) + district.length
-          
-          const addressMsg = {
-            address: formattedAddress.slice(0, division) + (pois[0]?.address || ''),
-            addressInfo: result.regeocode.addressComponent
-          }
-
-          callBack?.(addressMsg)
-          resolve(addressMsg) 
-        } else {
-          reject(new Error('转换失败'))
-        }
-      })
-    })
-  }
-
-  /** 根据地址搜索地图poi点及其他信息 */
-  /**
-   * 
-   * @param {*} keywords 根据关键字搜索
-   * @param {*} callBack 查询成功后过滤信息及转换格式 传递回调函数 兼容老版本代码
-   */
-  getMapSearch(keywords, callBack) {
-    return new Promise((resolve) => {
-      const placeSearch = new this.AMap.PlaceSearch()
-      placeSearch.search(keywords, (status, searchList) => {
-        const options = searchList?.poiList?.pois?.map(node => ({
-          ...node,
-          label: `${node.name}（${node.address}）`
-        })) || []
-        callBack?.(options)
-        resolve(options)
-      })
-    })
-  } 
-
-  /** 道路规划 */
-  /**
-   * 
-   * @param {*} AMapInit 当前地图实例
-   * @param {*} paths 需查询的路径起始点及途径点集合
-   * @param {*} roadOptions 路线规划的其他参数
-   * { paths: 需查询的路径起始点及途径点集合, options: 为查询路线配置项 }
-   * @param {*} callBack 查询成功后回调函数 兼容老版本代码
-   */
-  async setMapDriving(mapInstance, roadOptions, callBack) {
-    const { paths, options = {} } = roadOptions
-    return new Promise((resolve) => {
-      mapInstance.plugin("AMap.Driving", () => {
-        const driving = new this.AMap.Driving({ 
-          map: mapInstance,
-          ...options
-        })
-        
-        driving.search(
-          this.setLngLat(paths[0]),
-          this.setLngLat(paths[paths.length - 1]),
-          { 
-            waypoints: paths.slice(1, -1).map(path => this.setLngLat(path)) 
-          },
-          (status, {routes}) => status === 'complete' && (
-            callBack?.(roadDriving, routes),
-            resolve({ driving, routes })
-          )
-        )
-      })
-    })
-  }
-
-  // 其他方法保持类似改造...
-}
-
-// 获取AMap实例（组件内使用）
-export const getAMapInstance = async (options = {}) => {
-  if (AMapInstance) return AMapInstance
-
-  // 确保key存在
-  if (!AMapKey) {
-    try {
-      setAMapSecurity()
-    } catch (e) {
-      throw new Error('请先设置地图Key！')
-    }
-  }
-
-  const AMapLoader = (await import('@amap/amap-jsapi-loader')).default
-
-  try {
-    const AMap = await AMapLoader.load({
-      key: AMapKey,
-      version: '2.0',
-      plugins: [
-        'AMap.Geocoder',
-        'AMap.PlaceSearch', // 搜索
-        'AMap.MouseTool', // 鼠标
-        'AMap.ControlBar', // 方向盘
-        'AMap.ToolBar', // 缩放
-        ...(options.plugins || [])
-      ]
-    })
-    AMapInstance = new AMapService(AMap)
-    return AMapInstance
-  } catch (e) {
-    throw new Error(`高德地图加载失败: ${e.message}`)
-  }
-}
-
-// 在 Vue 插件中封装高德地图的初始化和常用方法 
-export default {
-  async install(Vue, options = {}) {
-
-    const amap = await getAMapInstance(options)
-
-    const { AMap, methods, layers } = amap
-    
-    Vue.prototype.$amap = AMap
-
-    /** 初始化地图 */
-    Vue.prototype.$initAMap = (mapOptions, callBack) => {
-      const amapInit = amap.initMap(
-        mapOptions.el, 
-        mapOptions.options || {}
-      )
-      /** 兼容之前版本代码 */
-      callBack?.(amapInit)
-      return amapInit
-    }
-
-    /** 地图加载完成 */
-    Vue.prototype.$amapBus.$emit('onAMapMounted')
-
-    /** 常用覆盖物 */
-    Vue.prototype.$amapLayers = {
-      ...layers,
-      setInfoWindow: layers.setInfoWindow(Vue)
-    }
-  
-    /** 抛出地图常用方法 */ 
-    Vue.prototype.$amapMethods = methods || {}
-
-  }
-}
-
-/** 
- * 安全获取覆盖物坐标信息 
- * @param {AMap.Overlay} overlay 地图覆盖物实例
- * @returns {Array<Array<number>>} 坐标点数组
- */
-function getOverlayPos(overlay) {
-  if (!overlay) throw new Error('覆盖物实例不存在')
-  
-  try {
-    return overlay.type === 'AMap.Marker' 
-      ? [overlay.getPosition().lng, overlay.getPosition().lat] 
-      : overlay.getPath().map(({lng, lat}) => [lng, lat])
-  } catch (e) {
-    console.error('转换失败', e)
-    return []
-  }
-}
-
-/**
- * 轨迹动画执行器
- * @param {AMap.Map} AMapInit 地图实例
- * @param {AMap.Marker} animationMarker 动画标记物
- * @param {Array<Array<number>>} paths 路径坐标数组
- * @param {Object} [options] 动画配置
- * @param {Function} [callBack] 动画完成回调
- */
-function drawMapAnimation(AMapInit, animationMarker, paths, options = {}, callBack) {
-  if (!AMapInit || !animationMarker || !paths?.length) {
-    return console.error('缺少参数信息')
-  }
-
-  AMapInit.plugin('AMap.MoveAnimation', () => {
-    const defaultOptions = {
-      duration: 500,
-      autoRotation: true,
-      ...options
-    }
-    
-    animationMarker.moveAlong(paths, defaultOptions)
-    callBack?.(animationMarker)
-  })
-}
-
-/**
- * 转换导航路线为可绘制路径
- * @param {AMap.DrivingRoute} route 导航路线对象
- * @returns {{
-*   path: Array<Array<number>>,
-*   approachPoints: Array<number>
-* }}
-*/
-function parseRouteToPath(route) {
- if (!route?.steps) return { path: [], approachPoints: [] }
-
- const result = {
-   path: [],
-   approachPoints: []
- }
-
- route.steps.forEach((step, stepIndex) => {
-   step.path.forEach((point, pointIndex) => {
-     result.path.push([point.lng, point.lat])
-     
-     if (step.assistant_action === "到达途经地" && 
-         pointIndex === step.path.length - 1) {
-       result.approachPoints.push(result.path.length - 1)
-     }
-   })
- })
-
- return result
-}

package/plugins/method/PageLoading.jsx

@@ -1,106 +0,0 @@
-import { Spin } from 'ant-design-vue'
-
-export const PageLoading = {
-  name: 'PageLoading',
-  props: {
-    tip: {
-      type: String,
-      default: 'Loading..'
-    },
-    size: {
-      type: String,
-      default: 'large'
-    }
-  },
-  render () {
-    const style = {
-      textAlign: 'center',
-      background: 'rgba(0,0,0,0.6)',
-      position: 'fixed',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      zIndex: 1100
-    } 
-    const spinStyle = {
-      position: 'absolute',
-      left: '50%',
-      top: '40%',
-      transform: 'translate(-50%, -50%)'
-    }
-    return (<div style={style}>
-      <Spin size={this.size} style={spinStyle} tip={this.tip} />
-    </div>)
-  }
-}
-
-const version = '0.0.1'
-const loading = {}
-
-loading.newInstance = (Vue, options) => {
-  let loadingElement = document.querySelector('body>div[type=loading]')
-  if (!loadingElement) {
-    loadingElement = document.createElement('div')
-    loadingElement.setAttribute('type', 'loading')
-    loadingElement.setAttribute('class', 'ant-loading-wrapper')
-    document.body.appendChild(loadingElement)
-  }
-
-  const cdProps = Object.assign({ visible: false, size: 'large', tip: 'Loading...' }, options)
-
-  const instance = new Vue({
-    data () {
-      return {
-        ...cdProps
-      }
-    },
-    render () {
-      const { tip } = this
-      const props = {}
-      this.tip && (props.tip = tip)
-      if (this.visible) {
-        return <PageLoading { ...{ props } } />
-      }
-      return null
-    }
-  }).$mount(loadingElement)
-
-  function update (config) {
-    const { visible, size, tip } = { ...cdProps, ...config }
-    instance.$set(instance, 'visible', visible)
-    if (tip) {
-      instance.$set(instance, 'tip', tip)
-    }
-    if (size) {
-      instance.$set(instance, 'size', size)
-    }
-  }
-
-  return {
-    instance,
-    update
-  }
-}
-
-const api = {
-  show: function (options) {
-    this.instance.update({ ...options, visible: true })
-  },
-  hide: function () {
-    this.instance.update({ visible: false })
-  }
-}
-
-const install = function (Vue, options) {
-  if (Vue.prototype.$loading) {
-    return
-  }
-  api.instance = loading.newInstance(Vue, options)
-  Vue.prototype.$loading = api
-}
-
-export default {
-  version,
-  install
-}

package/plugins/method/Theme.js

@@ -1,88 +0,0 @@
-import {toggleTheme} from "@zougt/theme-css-extract-webpack-plugin/dist/toggleTheme"
-
-import message from 'ant-design-vue/es/message'
-
-const watchTheme = {
-    created() {
-        /** 全局添加标志变量来控制是否已经添加过监听器 */
-        if (!window._storageListenerAdded) {
-            /** 监听storage变化 */
-            window.addEventListener('storage', this.handleStorageChange)
-            window._storageListenerAdded = true
-        }
-    },
-    methods: {
-        handleStorageChange(event) {
-            // console.log('Storage changed:', event.newValue)
-            /** 判断是否为主题key更改并执行资源切换 */
-            event.key === 'projectTheme' && this.$setTheme(event.newValue)
-        }
-    },
-    beforeDestroy() {
-        /** 销毁标志变量及监听器 */
-        if (window._storageListenerAdded) {
-            window.removeEventListener('storage', this.handleStorageChange)
-            window._storageListenerAdded = false
-        }
-    }
-}
-
-export default {
-    install(Vue) {
-        /** 判断是否属于内嵌项目 */
-        const isHas = window.parent !== window
-
-        Vue.prototype.$setTheme = function(theme) {
-            /** 子项目则只需切换主题资源 */
-            if(isHas) {
-                return ToggleThemeSource(theme)
-            }
-            ToggleTheme(theme)
-        }
-        /** 子项目需挂载监听主题变化自动执行切换 */
-        isHas && Vue.mixin(watchTheme) 
-
-        /** 切换当前主题 */
-        function ToggleTheme(scopeName) {
-            /** 切换主题loading */
-            const hideMessage = message.loading('正在切换主题！', 0)
-
-            ToggleThemeSource(scopeName)
-
-            const loadingTimer=setTimeout(() => {
-              hideMessage()
-              clearTimeout(loadingTimer)
-            }, 10)
-
-            Vue.prototype.$store.commit('SET_THEME',scopeName)
-        }
-
-        /** 切换主题资源 */
-        function ToggleThemeSource(scopeName) {
-            /** 获取初始配置项 */
-            // env.themeConfig 来源 vue.config.js define (webpack的DefinePlugin)
-            const themeConfig = env.themeConfig
-            /** 主题配置
-             *  @scopeName 名称
-             *  @multipleScopeVars 主题项
-             *  @extract 是否提取
-             *  @publicPath 资源输出路径
-             *  @outputDir 提取的 css 文件存放目录
-             */ 
-            toggleTheme({ 
-              scopeName: `theme-${scopeName}`,
-              multipleScopeVars: themeConfig.multipleScopeVars,
-              extract: themeConfig.extract,
-              publicPath: themeConfig.publicPath,
-              outputDir: themeConfig.extractCssOutputDir
-            })
-
-            /** 加载主题对应样式文件 */
-            // const requireLess = require.context('@/theme/styles', false, /\.less$/)
-            // requireLess(`./${scopeName}.less`)
-            let themeLink = document.getElementById('theme-stylesheet')
-            themeLink.href = `${process.env.BASE_URL}static/style/${scopeName}.css`
-        }
-
-    }
-}

package/plugins/method/index.js

@@ -1,12 +0,0 @@
-/** 全局便捷弹出框 */
-import Dialog from "./Dialog"
-/** 全局页面加载框 */
-import PageLoading from "./PageLoading"
-
-/** 加载便捷弹窗等 */
-export default {
-    install(Vue) {
-      Vue.use(Dialog)
-      Vue.use(PageLoading)  
-    }
-}

package/plugins/store/auth.js

@@ -1,31 +0,0 @@
-import storage from '../utils/Storage.js'
-/** 存储方式 */
-const storageMode = process.env.NODE_ENV === 'development' ? 'cookies' : 'local'
-
-const state = {
-    /** 登录token存储 */
-    token: storage[storageMode].get('token'), 
-    /** 登录用户信息 */
-    userInfo: storage[storageMode].getJson('userInfo')
-}
- 
-const mutations = {
-    SET_USER_INFO(state, userInfo) {
-       state.userInfo = userInfo
-       storage[storageMode].setJson('userInfo', userInfo)
-    },  
-    SET_TOKEN(state, token) {
-       state.token = token
-       storage[storageMode].set('token', token)
-    },
-    REMOVE_TOKEN(state, token) {
-      state.token = null
-      storage[storageMode].remove('token')
-      storage[storageMode].remove('userInfo')
-    }
-}
-
-export default {
-   state,
-   mutations
-}

package/plugins/store/cache.js

@@ -1,56 +0,0 @@
-// import Vue from 'vue'
-
-const state = {
-   menuRouteTime: {},
-   // 缓存时长，单位为分钟
-   menuCacheDuration: 5,
-   menuCacheLength: 20
-}
-
-const mutations = {
-   SET_MENU_ROUTE_TIME(state, route) {
-      state.menuRouteTime = {
-         ...state.menuRouteTime,
-         [route]: new Date().getTime()
-      } 
-      // Vue.set(state.menuRouteTime, route, new Date().getTime())
-   },
-   SET_MENU_ROUTE(state, key) {
-      state.menuRouteTime[key] && delete state.menuRouteTime[key]
-   }
-}
-
-const actions = {
-    // 当缓存超出限制数量，将自动根据时间比对出最早入栈菜单并移除
-    RemoveFirstMenu({commit,state}, length) {
-      let menuKeys = Object.keys(state.menuRouteTime)
-      let menuLength = length ?? state.menuCacheLength
-      if(menuKeys.length > menuLength) {
-        const key = menuKeys.reduce((last, next) => {
-          return state.menuRouteTime[next] < state.menuRouteTime[last] ? 
-                 next : last 
-        }, menuKeys[0])
-        commit('SET_MENU_ROUTE', key)
-      }
-    },
-    JudgeMenuCache({commit,state}, duration) {
-      let menuKeys = Object.keys(state.menuRouteTime)
-      let menuDuration = duration ?? state.menuCacheDuration
-      menuKeys.forEach(key => {
-        let targetTimestamp = state.menuRouteTime[key]
-        let currentTimestamp = Date.now()
-        let fiveMinutesAgo = currentTimestamp - menuDuration * 60 * 1000
-        if (targetTimestamp >= fiveMinutesAgo && targetTimestamp <= currentTimestamp) {
-            console.log(`目标时间戳在过去${menuDuration}分钟内`)
-        } else {
-            commit('SET_MENU_ROUTE', key)
-        }
-      } )
-    }
-}
-
-export default {
-  state,
-  mutations,
-  actions
-}