py-test-components 1.0.1 → 1.0.2

package/src/components/PyWeather.vue

@@ -1,387 +1,48 @@
-<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>
+<template>
+  <div class="py-weather">
+    <el-input v-model="city" placeholder="请输入城市" />
+    <el-button @click="handleQuery" style="margin-left: 10px">查询天气</el-button>
+    <div v-if="weather" class="weather-result" style="margin-top: 20px">
+      <p>城市: {{ weather.city }}</p>
+      <p>天气: {{ weather.weather }}</p>
+      <p>温度: {{ weather.temperature }}°C</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryWeather } from '../utils/api';
+
+export default {
+  name: 'PyWeather',
+  props: {
+    propData: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      city: '',
+      weather: null,
+    };
+  },
+  methods: {
+    async handleQuery() {
+      if (!this.city) return;
+      try {
+        const result = await queryWeather(this.city);
+        this.weather = result;
+        this.$emit('change', result);
+      } catch (e) {
+        console.error('查询天气失败', e);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.py-weather {
+  padding: 20px;
+}
+</style>

package/src/index.js

@@ -1,51 +1,20 @@
-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 };
+import Vue from 'vue';
+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';
+import store from './store';
+import { initStore } from './vue/index.js';
+
+Vue.use(ElementUI);
+
+// 注册 Web Components
+Vue.customElement('py-table', PyTable, { shadow: false });
+Vue.customElement('py-weather', PyWeather, { shadow: false });
+
+if (typeof window !== 'undefined') {
+  window.PyComponent = {
+    initStore,
+  };
+}