py-test-components 1.0.0

package/src/components/PyWeather.vue

@@ -0,0 +1,387 @@
+<template>
+  <div class="py-weather">
+    <el-card class="weather-card" :body-style="{ padding: '0px' }">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-wrapper">
+        <i class="el-icon-loading"></i>
+        <span>加载天气数据...</span>
+      </div>
+
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error-wrapper">
+        <i class="el-icon-warning-outline"></i>
+        <span>{{ error }}</span>
+        <el-button type="text" @click="loadWeather">重试</el-button>
+      </div>
+
+      <!-- 天气内容 -->
+      <div v-else class="weather-content">
+        <!-- 头部：城市和日期 -->
+        <div class="weather-header">
+          <div class="location">
+            <i class="el-icon-location"></i>
+            <span class="city">{{ displayCity }}</span>
+          </div>
+          <div class="date">{{ currentDate }}</div>
+        </div>
+
+        <!-- 主体：温度和天气 -->
+        <div class="weather-main">
+          <div class="temperature">
+            <span class="temp-value">{{ weatherData.temperature }}</span>
+            <span class="temp-unit">°C</span>
+          </div>
+          <div class="weather-desc">
+            <i :class="weatherIcon"></i>
+            <span>{{ weatherData.description }}</span>
+          </div>
+        </div>
+
+        <!-- 详情：湿度、风速等 -->
+        <div class="weather-details">
+          <div class="detail-item">
+            <i class="el-icon-moisture"></i>
+            <span class="label">湿度</span>
+            <span class="value">{{ weatherData.humidity }}%</span>
+          </div>
+          <div class="detail-item">
+            <i class="el-icon-wind-power"></i>
+            <span class="label">风速</span>
+            <span class="value">{{ weatherData.windSpeed }} km/h</span>
+          </div>
+          <div class="detail-item">
+            <i class="el-icon-view"></i>
+            <span class="label">能见度</span>
+            <span class="value">{{ weatherData.visibility }} km</span>
+          </div>
+        </div>
+
+        <!-- 预报 -->
+        <div v-if="config.showForecast && forecast.length > 0" class="weather-forecast">
+          <div class="forecast-title">未来预报</div>
+          <div class="forecast-list">
+            <div 
+              v-for="(item, index) in forecast" 
+              :key="index"
+              class="forecast-item"
+            >
+              <span class="day">{{ item.day }}</span>
+              <i :class="getWeatherIcon(item.weather)"></i>
+              <span class="temp">{{ item.low }}° - {{ item.high }}°</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import store from '../store';
+import { weatherApi } from '../utils/api';
+
+export default {
+  name: 'PyWeather',
+
+  props: {
+    propData: {
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      loading: false,
+      error: '',
+      weatherData: {
+        temperature: '--',
+        description: '--',
+        humidity: '--',
+        windSpeed: '--',
+        visibility: '--'
+      },
+      forecast: []
+    };
+  },
+
+  computed: {
+    config() {
+      return this.propData || {};
+    },
+
+    displayCity() {
+      return this.config.city || this.weatherData.city || '北京';
+    },
+
+    currentDate() {
+      const date = new Date();
+      const options = { 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric',
+        weekday: 'long'
+      };
+      return date.toLocaleDateString('zh-CN', options);
+    },
+
+    weatherIcon() {
+      const iconMap = {
+        '晴': 'el-icon-sunny',
+        '多云': 'el-icon-cloudy-and-sunny',
+        '阴': 'el-icon-cloudy',
+        '雨': 'el-icon-heavy-rain',
+        '雪': 'el-icon-light-snow',
+        '雾': 'el-icon-foggy',
+        '霾': 'el-icon-foggy'
+      };
+      return iconMap[this.weatherData.description] || 'el-icon-sunny';
+    }
+  },
+
+  mounted() {
+    this.loadWeather();
+  },
+
+  watch: {
+    'config.city': {
+      handler() {
+        this.loadWeather();
+      }
+    }
+  },
+
+  methods: {
+    // 加载天气数据
+    async loadWeather() {
+      // 如果有传入的模拟数据，直接使用
+      if (this.config.mockData) {
+        this.weatherData = { ...this.config.mockData };
+        if (this.config.forecast) {
+          this.forecast = this.config.forecast;
+        }
+        return;
+      }
+
+      try {
+        this.loading = true;
+        this.error = '';
+
+        const city = this.config.city || '北京';
+        
+        // 获取当前天气
+        const currentRes = await weatherApi.getWeather(city);
+        this.weatherData = {
+          city: city,
+          temperature: currentRes.temperature || 25,
+          description: currentRes.weather || '晴',
+          humidity: currentRes.humidity || 60,
+          windSpeed: currentRes.windSpeed || 10,
+          visibility: currentRes.visibility || 10,
+          ...currentRes
+        };
+
+        // 获取预报
+        if (this.config.showForecast) {
+          const forecastRes = await weatherApi.getForecast(city);
+          this.forecast = forecastRes.data || this.getDefaultForecast();
+        }
+
+        // 触发加载完成事件
+        this.$emit('load', this.weatherData);
+      } catch (err) {
+        console.error('[PyWeather] 加载天气失败:', err);
+        this.error = '获取天气数据失败';
+        this.$emit('error', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 获取默认预报数据
+    getDefaultForecast() {
+      const days = ['明天', '后天', '周三', '周四', '周五'];
+      return days.map(day => ({
+        day,
+        weather: '晴',
+        high: 28,
+        low: 18
+      }));
+    },
+
+    // 获取天气图标
+    getWeatherIcon(weather) {
+      const iconMap = {
+        '晴': 'el-icon-sunny',
+        '多云': 'el-icon-cloudy-and-sunny',
+        '阴': 'el-icon-cloudy',
+        '雨': 'el-icon-heavy-rain',
+        '雪': 'el-icon-light-snow'
+      };
+      return iconMap[weather] || 'el-icon-sunny';
+    }
+  }
+};
+</script>
+
+<style scoped>
+.py-weather {
+  width: 100%;
+  max-width: 400px;
+}
+
+.weather-card {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.loading-wrapper,
+.error-wrapper {
+  padding: 40px;
+  text-align: center;
+  color: #909399;
+}
+
+.error-wrapper i {
+  font-size: 48px;
+  color: #F56C6C;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.loading-wrapper i {
+  font-size: 32px;
+  margin-right: 8px;
+}
+
+.weather-content {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 24px;
+}
+
+.weather-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.location {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+}
+
+.location i {
+  margin-right: 8px;
+}
+
+.city {
+  font-weight: 500;
+}
+
+.date {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.weather-main {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.temperature {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.temp-value {
+  font-size: 72px;
+  font-weight: 300;
+  line-height: 1;
+}
+
+.temp-unit {
+  font-size: 24px;
+  margin-top: 8px;
+  opacity: 0.8;
+}
+
+.weather-desc {
+  margin-top: 12px;
+  font-size: 18px;
+  opacity: 0.9;
+}
+
+.weather-desc i {
+  font-size: 24px;
+  margin-right: 8px;
+}
+
+.weather-details {
+  display: flex;
+  justify-content: space-around;
+  padding: 16px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.detail-item i {
+  font-size: 20px;
+  opacity: 0.8;
+}
+
+.detail-item .label {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.detail-item .value {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.weather-forecast {
+  margin-top: 16px;
+}
+
+.forecast-title {
+  font-size: 14px;
+  margin-bottom: 12px;
+  opacity: 0.9;
+}
+
+.forecast-list {
+  display: flex;
+  justify-content: space-between;
+}
+
+.forecast-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.forecast-item .day {
+  opacity: 0.8;
+}
+
+.forecast-item i {
+  font-size: 20px;
+}
+
+.forecast-item .temp {
+  opacity: 0.9;
+}
+</style>

package/src/index.js

@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import VueCustomElement from 'vue-custom-element';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+// 引入组件
+import PyTable from './components/PyTable.vue';
+import PyWeather from './components/PyWeather.vue';
+
+// 引入 store
+import store from './store';
+
+// 使用插件
+Vue.use(ElementUI);
+Vue.use(VueCustomElement);
+
+// 注册 Web Components（必须禁用 Shadow DOM）
+Vue.customElement('py-table', PyTable, {
+  shadow: false
+});
+
+Vue.customElement('py-weather', PyWeather, {
+  shadow: false
+});
+
+// initStore 函数 - 外部唯一入口
+function initStore(config) {
+  if (!config || typeof config !== 'object') {
+    console.warn('[PyComponent] initStore 需要传入配置对象');
+    return;
+  }
+  
+  // 将配置设置到 store 中
+  Object.keys(config).forEach(key => {
+    store.set(key, config[key]);
+  });
+  
+  console.log('[PyComponent] Store 已初始化');
+}
+
+// 挂载到 window（浏览器环境）
+if (typeof window !== 'undefined') {
+  window.PyComponent = {
+    initStore
+    // 注意：不暴露 store 实例
+  };
+}
+
+// 默认导出
+export { initStore };
+export default { initStore };

package/src/react/index.js

@@ -0,0 +1,156 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+// ElementUI CSS URL
+const ELEMENT_UI_CSS = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
+
+// 标记 CSS 是否已注入
+let cssInjected = false;
+
+/**
+ * 注入 ElementUI CSS
+ */
+function injectElementUICSS() {
+  if (cssInjected || typeof document === 'undefined') return;
+  
+  // 检查是否已存在
+  const existing = document.querySelector(`link[href="${ELEMENT_UI_CSS}"]`);
+  if (existing) {
+    cssInjected = true;
+    return;
+  }
+  
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = ELEMENT_UI_CSS;
+  document.head.appendChild(link);
+  cssInjected = true;
+}
+
+/**
+ * 包装 Vue Web Component 为 React 组件
+ * @param {string} tagName - 自定义元素标签名
+ * @param {string} dataProp - 数据属性名
+ * @returns {React.Component} React 组件
+ */
+function wrapVueComponent(tagName, dataProp = 'propData') {
+  return forwardRef(function WrappedComponent({ 
+    propData, 
+    loading,
+    onChange,
+    onLoad,
+    onError,
+    onRefresh,
+    onSelectionChange,
+    onEdit,
+    onDelete,
+    onSizeChange,
+    onPageChange,
+    ...props 
+  }, ref) {
+    const innerRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+
+    // 合并 ref
+    useEffect(() => {
+      if (typeof ref === 'function') {
+        ref(innerRef.current);
+      } else if (ref) {
+        ref.current = innerRef.current;
+      }
+    }, [ref]);
+
+    // 加载组件库和 CSS
+    useEffect(() => {
+      injectElementUICSS();
+      
+      // 动态加载组件库构建产物
+      import('../../dist/py-component.esm.js')
+        .then(() => {
+          setIsReady(true);
+        })
+        .catch(err => {
+          console.error(`[PyComponent] 加载失败:`, err);
+        });
+    }, []);
+
+    // 设置 propData 到 DOM property
+    useEffect(() => {
+      if (innerRef.current && isReady) {
+        innerRef.current[dataProp] = propData;
+      }
+    }, [propData, isReady, dataProp]);
+
+    // 绑定事件
+    useEffect(() => {
+      const el = innerRef.current;
+      if (!el || !isReady) return;
+
+      const events = {
+        'change': onChange,
+        'load': onLoad,
+        'error': onError,
+        'refresh': onRefresh,
+        'selection-change': onSelectionChange,
+        'edit': onEdit,
+        'delete': onDelete,
+        'size-change': onSizeChange,
+        'page-change': onPageChange
+      };
+
+      Object.entries(events).forEach(([eventName, handler]) => {
+        if (handler) {
+          el.addEventListener(eventName, handler);
+        }
+      });
+
+      return () => {
+        Object.entries(events).forEach(([eventName, handler]) => {
+          if (handler) {
+            el.removeEventListener(eventName, handler);
+          }
+        });
+      };
+    }, [isReady, onChange, onLoad, onError, onRefresh, onSelectionChange, onEdit, onDelete, onSizeChange, onPageChange]);
+
+    // 显示 loading 状态
+    if (!isReady) {
+      return loading || <div style={{ padding: 20, textAlign: 'center' }}>加载中...</div>;
+    }
+
+    return React.createElement(tagName, {
+      ref: innerRef,
+      ...props
+    });
+  });
+}
+
+// 创建组件
+export const PyTable = wrapVueComponent('py-table', 'propData');
+export const PyWeather = wrapVueComponent('py-weather', 'propData');
+
+/**
+ * 初始化 Store
+ * @param {object} config - 配置对象
+ * @returns {Promise<void>}
+ */
+export function initStore(config) {
+  return new Promise((resolve, reject) => {
+    import('../../dist/py-component.esm.js')
+      .then((module) => {
+        const { initStore: init } = module;
+        if (init) {
+          init(config);
+          resolve();
+        } else {
+          reject(new Error('initStore 不存在'));
+        }
+      })
+      .catch(reject);
+  });
+}
+
+export default {
+  PyTable,
+  PyWeather,
+  initStore
+};

package/src/store/index.js

@@ -0,0 +1,66 @@
+import Vue from 'vue';
+
+// 创建响应式 store 对象
+const state = Vue.observable({
+  // 默认配置
+  apiKey: '',
+  baseUrl: '',
+  userInfo: null,
+  // 可扩展更多全局配置
+});
+
+// Store API
+const store = {
+  /**
+   * 获取 store 中的值
+   * @param {string} key - 键名
+   * @returns {any} 值
+   */
+  get(key) {
+    return state[key];
+  },
+
+  /**
+   * 设置 store 中的值
+   * @param {string} key - 键名
+   * @param {any} value - 值
+   */
+  set(key, value) {
+    state[key] = value;
+  },
+
+  /**
+   * 批量设置值
+   * @param {object} config - 配置对象
+   */
+  setMultiple(config) {
+    Object.assign(state, config);
+  },
+
+  /**
+   * 订阅 store 变化（仅供内部使用）
+   * @param {function} callback - 回调函数
+   * @returns {function} 取消订阅函数
+   */
+  subscribe(callback) {
+    // 使用 Vue watch 实现订阅
+    const unwatch = Vue.watch(
+      () => state,
+      (newVal, oldVal) => {
+        callback(newVal, oldVal);
+      },
+      { deep: true }
+    );
+    return unwatch;
+  },
+
+  /**
+   * 获取整个 state（慎用，主要用于调试）
+   * @returns {object} state 对象
+   */
+  getState() {
+    return state;
+  }
+};
+
+export default store;