py-test-component 2.0.2 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "py-test-component",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "description": "Vue2 + ElementUI 组件库，支持 React 使用",
   "main": "dist/py-component.js",
   "module": "dist/py-component.esm.js",
@@ -21,7 +21,13 @@
   "files": [
     "dist",
     "src/react",
-    "README.md","USAGE.md","DEVELOPER.md","src/vue"
+    "src/components",
+    "src/store",
+    "src/utils",
+    "README.md",
+    "USAGE.md",
+    "DEVELOPER.md",
+    "src/vue"
   ],
   "scripts": {
     "build": "webpack --mode production",

package/src/components/PyTable.vue

@@ -0,0 +1,43 @@
+  <template>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        prop="date"
+        label="日期"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="地址">
+      </el-table-column>
+    </el-table>
+  </template>
+
+<script>
+export default {
+  name: 'PyTable',
+  props: {
+    propData: {
+      default: null
+    }
+  },
+  computed: {
+    tableData() {
+      // el-table 需要数组，如果不是数组则返回空数组
+      return Array.isArray(this.propData) ? this.propData : []
+    }
+  }
+};
+</script>
+
+<style scoped>
+.py-table-wrapper {
+  padding: 10px;
+}
+</style>

package/src/components/PyWeather.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="py-weather">
+    <div class="search-box">
+      <el-input
+        v-model="city"
+        placeholder="请输入城市名称"
+        @keyup.enter.native="handleSearch"
+        clearable
+      />
+      <el-button type="primary" @click="handleSearch" :loading="loading">
+        查询
+      </el-button>
+    </div>
+
+    <div v-if="weatherData" class="weather-info">
+      <h3>{{ weatherData.location.name }}</h3>
+      <div class="weather-detail">
+        <span class="temperature">{{ weatherData.now.temperature }}°C</span>
+        <span class="weather-text">{{ weatherData.now.text }}</span>
+      </div>
+    </div>
+
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryWeather } from '../utils/api';
+
+export default {
+  name: 'PyWeather',
+  data() {
+    return {
+      city: '',
+      loading: false,
+      weatherData: null,
+      error: null
+    };
+  },
+  methods: {
+    async handleSearch() {
+      if (!this.city.trim()) {
+        this.$message?.warning?.('请输入城市名称') || alert('请输入城市名称');
+        return;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await queryWeather(this.city.trim());
+        if (response.results && response.results[0]) {
+          this.weatherData = response.results[0];
+        } else {
+          this.error = '未找到该城市的天气信息';
+          this.weatherData = null;
+        }
+      } catch (err) {
+        this.error = '查询失败，请稍后重试';
+        this.weatherData = null;
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.py-weather {
+  padding: 20px;
+  max-width: 400px;
+}
+.search-box {
+  display: flex;
+  gap: 10px;
+}
+.weather-info {
+  margin-top: 20px;
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+.weather-info h3 {
+  margin: 0 0 15px 0;
+  color: #303133;
+}
+.weather-detail {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+.temperature {
+  font-size: 36px;
+  font-weight: bold;
+  color: #409EFF;
+}
+.weather-text {
+  font-size: 18px;
+  color: #606266;
+}
+.error-message {
+  margin-top: 15px;
+  color: #f56c6c;
+  font-size: 14px;
+}
+</style>

package/src/react/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 
 // 注入 ElementUI CSS（只执行一次）
 let cssInjected = false;
@@ -16,7 +16,7 @@ function usePyComponent() {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     injectElementUICSS();
-    import('../../dist/py-component.esm.js').then(() => setLoaded(true));
+    import('py-test-component').then(() => setLoaded(true));
   }, []);
   return loaded;
 }
@@ -37,7 +37,8 @@ function wrapVueComponent(tagName, dataProp = null) {
       return <div style={{ padding: '20px', textAlign: 'center' }}>{loading}</div>;
     }
 
-    return <tagName ref={ref || elRef} {...props} />;
+    // 使用 createElement 避免 JSX 标签名大小写警告
+    return React.createElement(tagName, { ref: ref || elRef, ...props });
   });
 }
 
@@ -47,7 +48,7 @@ export const PyWeather = wrapVueComponent('py-weather', 'propData');
 
 // 初始化 store（仅设置，不暴露 store 给外部）
 export function initStore(config) {
-  return import('../../dist/py-component.esm.js').then((m) => {
+  return import('py-test-component').then((m) => {
     const PyComponent = m.default || m;
     PyComponent?.initStore?.(config);
   });

package/src/store/index.js

@@ -0,0 +1,75 @@
+import Vue from 'vue';
+
+// 使用 Vue.observable 创建响应式全局状态
+const state = Vue.observable({
+  config: {}
+});
+
+// 订阅者列表（用于非 Vue 环境，如 React）
+const subscribers = new Set();
+
+function notifySubscribers(key, value) {
+  subscribers.forEach(fn => fn(key, value, state.config));
+}
+
+const store = {
+  /**
+   * 获取 store 中的值
+   * @param {string} key - 键名，支持点号路径如 'user.name'
+   * @returns {any} 值
+   */
+  get(key) {
+    if (!key) return state.config;
+    const keys = key.split('.');
+    let value = state.config;
+    for (const k of keys) {
+      if (value === undefined || value === null) return undefined;
+      value = value[k];
+    }
+    return value;
+  },
+
+  /**
+   * 设置 store 中的值
+   * @param {string} key - 键名
+   * @param {any} value - 值
+   */
+  set(key, value) {
+    if (typeof key === 'object') {
+      Object.assign(state.config, key);
+      notifySubscribers(null, state.config);
+    } else {
+      const keys = key.split('.');
+      let target = state.config;
+      for (let i = 0; i < keys.length - 1; i++) {
+        const k = keys[i];
+        if (!(k in target) || typeof target[k] !== 'object') {
+          target[k] = {};
+        }
+        target = target[k];
+      }
+      target[keys[keys.length - 1]] = value;
+      notifySubscribers(key, value);
+    }
+  },
+
+  /**
+   * 订阅 store 变化（供 React 等使用）
+   * @param {function} callback - (key, value, config) => void
+   * @returns {function} 取消订阅函数
+   */
+  subscribe(callback) {
+    subscribers.add(callback);
+    return () => subscribers.delete(callback);
+  },
+
+  /**
+   * 获取整个状态对象（供内部组件使用）
+   * @returns {object}
+   */
+  getState() {
+    return state;
+  }
+};
+
+export default store;

package/src/utils/api.js

@@ -0,0 +1,35 @@
+import { get, post } from './request';
+
+/**
+ * 查询天气
+ * @param {string} city - 城市名称
+ * @returns {Promise<object>}
+ */
+export function queryWeather(city) {
+  // 使用免费的天气 API（心知天气或 OpenWeatherMap 等）
+  // 这里使用一个示例 API，实际使用时可以替换为真实的天气 API
+  const apiKey = 'demo'; // 实际使用时替换为真实的 API Key
+  const url = `https://api.seniverse.com/v3/weather/now.json`;
+
+  // 如果没有真实 API，返回模拟数据
+  if (apiKey === 'demo') {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          results: [{
+            location: { name: city },
+            now: {
+              temperature: Math.floor(Math.random() * 30) + 5,
+              text: ['晴', '多云', '阴', '小雨', '大雨'][Math.floor(Math.random() * 5)]
+            }
+          }]
+        });
+      }, 500);
+    });
+  }
+
+  return get(url, {
+    key: apiKey,
+    location: city
+  });
+}

package/src/utils/request.js

@@ -0,0 +1,68 @@
+/**
+ * 封装 fetch POST 请求
+ * @param {string} url - 请求地址
+ * @param {object} data - 请求数据
+ * @param {object} options - 其他配置
+ * @returns {Promise}
+ */
+export function post(url, data = {}, options = {}) {
+  const defaultOptions = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    ...options
+  };
+
+  // 如果 data 是 FormData，不设置 Content-Type
+  if (data instanceof FormData) {
+    delete defaultOptions.headers['Content-Type'];
+  } else {
+    defaultOptions.body = JSON.stringify(data);
+  }
+
+  return fetch(url, defaultOptions)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .catch(error => {
+      console.error('Request failed:', error);
+      throw error;
+    });
+}
+
+/**
+ * 封装 fetch GET 请求
+ * @param {string} url - 请求地址
+ * @param {object} params - URL 参数
+ * @param {object} options - 其他配置
+ * @returns {Promise}
+ */
+export function get(url, params = {}, options = {}) {
+  const queryString = Object.keys(params)
+    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+    .join('&');
+
+  const fullUrl = queryString ? `${url}?${queryString}` : url;
+
+  return fetch(fullUrl, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    ...options
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .catch(error => {
+      console.error('Request failed:', error);
+      throw error;
+    });
+}