py-test-components 1.0.1 → 1.0.2

package/src/react/index.js

@@ -1,220 +1,60 @@
-import React, { forwardRef, useEffect, useRef, useState, createElement } from 'react';
-
-// ElementUI CSS URL
-const ELEMENT_UI_CSS = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
-
-// 标记 CSS 是否已注入
-let cssInjected = false;
-
-// 存储 initStore 函数
-let storeInitFn = null;
-
-/**
- * 注入 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;
-}
-
-/**
- * 加载主组件库
- */
-function loadMainLibrary() {
-  return new Promise(function(resolve, reject) {
-    // 如果已经加载过
-    if (typeof window !== 'undefined' && window.PyComponent) {
-      storeInitFn = window.PyComponent.initStore;
-      resolve(window.PyComponent);
-      return;
-    }
-    
-    // 动态加载脚本
-    if (typeof document === 'undefined') {
-      reject(new Error('只能在浏览器环境中使用'));
-      return;
-    }
-    
-    const script = document.createElement('script');
-    // 使用 CDN 或相对路径加载构建产物
-    script.src = '/node_modules/py-test-components/dist/py-component.js';
-    script.onload = function() {
-      if (window.PyComponent) {
-        storeInitFn = window.PyComponent.initStore;
-        resolve(window.PyComponent);
-      } else {
-        reject(new Error('组件库加载失败'));
-      }
-    };
-    script.onerror = function() {
-      // 尝试备用路径
-      const script2 = document.createElement('script');
-      script2.src = './dist/py-component.js';
-      script2.onload = function() {
-        if (window.PyComponent) {
-          storeInitFn = window.PyComponent.initStore;
-          resolve(window.PyComponent);
-        } else {
-          reject(new Error('组件库加载失败'));
-        }
-      };
-      script2.onerror = function() {
-        reject(new Error('无法加载组件库'));
-      };
-      document.head.appendChild(script2);
-    };
-    document.head.appendChild(script);
-  });
-}
-
-/**
- * 包装 Vue Web Component 为 React 组件
- * @param {string} tagName - 自定义元素标签名
- * @param {string} dataProp - 数据属性名
- * @returns {React.Component} React 组件
- */
-function wrapVueComponent(tagName, dataProp) {
-  return forwardRef(function WrappedComponent(props, ref) {
-    var propData = props.propData, 
-        loading = props.loading,
-        onChange = props.onChange,
-        onLoad = props.onLoad,
-        onError = props.onError,
-        onRefresh = props.onRefresh,
-        onSelectionChange = props.onSelectionChange,
-        onEdit = props.onEdit,
-        onDelete = props.onDelete,
-        onSizeChange = props.onSizeChange,
-        onPageChange = props.onPageChange,
-        restProps = {};
-    
-    // 提取其他 props
-    for (var key in props) {
-      if (props.hasOwnProperty(key) && 
-          !['propData', 'loading', 'onChange', 'onLoad', 'onError', 
-            'onRefresh', 'onSelectionChange', 'onEdit', 'onDelete', 
-            'onSizeChange', 'onPageChange'].includes(key)) {
-        restProps[key] = props[key];
-      }
-    }
-
-    var innerRef = useRef(null);
-    var _useState = useState(false);
-    var isReady = _useState[0];
-    var setIsReady = _useState[1];
-
-    // 合并 ref
-    useEffect(function() {
-      if (typeof ref === 'function') {
-        ref(innerRef.current);
-      } else if (ref) {
-        ref.current = innerRef.current;
-      }
-    }, [ref]);
-
-    // 加载组件库和 CSS
-    useEffect(function() {
-      injectElementUICSS();
-      
-      loadMainLibrary()
-        .then(function() {
-          setIsReady(true);
-        })
-        .catch(function(err) {
-          console.error('[PyComponent] 加载失败:', err);
-        });
-    }, []);
-
-    // 设置 propData 到 DOM property
-    useEffect(function() {
-      if (innerRef.current && isReady) {
-        innerRef.current[dataProp] = propData;
-      }
-    }, [propData, isReady, dataProp]);
-
-    // 绑定事件
-    useEffect(function() {
-      var el = innerRef.current;
-      if (!el || !isReady) return;
-
-      var events = {
-        'change': onChange,
-        'load': onLoad,
-        'error': onError,
-        'refresh': onRefresh,
-        'selection-change': onSelectionChange,
-        'edit': onEdit,
-        'delete': onDelete,
-        'size-change': onSizeChange,
-        'page-change': onPageChange
-      };
-
-      Object.keys(events).forEach(function(eventName) {
-        var handler = events[eventName];
-        if (handler) {
-          el.addEventListener(eventName, handler);
-        }
-      });
-
-      return function() {
-        Object.keys(events).forEach(function(eventName) {
-          var handler = events[eventName];
-          if (handler) {
-            el.removeEventListener(eventName, handler);
-          }
-        });
-      };
-    }, [isReady, onChange, onLoad, onError, onRefresh, onSelectionChange, onEdit, onDelete, onSizeChange, onPageChange]);
-
-    // 显示 loading 状态
-    if (!isReady) {
-      return loading || createElement('div', { 
-        style: { padding: 20, textAlign: 'center' } 
-      }, '加载中...');
-    }
-
-    return createElement(tagName, {
-      ref: innerRef,
-      ...restProps
-    });
-  });
-}
-
-// 创建组件
-export var PyTable = wrapVueComponent('py-table', 'propData');
-export var PyWeather = wrapVueComponent('py-weather', 'propData');
-
-/**
- * 初始化 Store
- * @param {object} config - 配置对象
- * @returns {Promise<void>}
- */
-export function initStore(config) {
-  return loadMainLibrary().then(function(module) {
-    if (module.initStore) {
-      module.initStore(config);
-    } else if (storeInitFn) {
-      storeInitFn(config);
-    } else {
-      throw new Error('initStore 不存在');
-    }
-  });
-}
-
-export default {
-  PyTable: PyTable,
-  PyWeather: PyWeather,
-  initStore: initStore
-};
+import { forwardRef, useEffect, useState } from 'react';
+
+const injected = { css: false };
+
+function ensureCSS() {
+  if (injected.css) return;
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = 'https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css';
+  document.head.appendChild(link);
+  injected.css = true;
+}
+
+function wrapVueComponent(tagName) {
+  const Component = forwardRef(function WrappedComponent(
+    { propData, loading, ...props },
+    ref
+  ) {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+      ensureCSS();
+      setMounted(true);
+    }, []);
+
+    if (!mounted) {
+      return loading || null;
+    }
+
+    const tag = document.createElement(tagName);
+    if (propData) {
+      tag.propData = propData;
+    }
+    Object.keys(props).forEach((key) => {
+      if (key.startsWith('on') && typeof props[key] === 'function') {
+        const eventName = key.slice(2).toLowerCase();
+        tag.addEventListener(eventName, props[key]);
+      }
+    });
+
+    if (ref && typeof ref === 'object' && ref.current !== undefined) {
+      ref.current = tag;
+    }
+
+    return tag;
+  });
+
+  Component.displayName = tagName;
+  return Component;
+}
+
+export const PyTable = wrapVueComponent('py-table');
+export const PyWeather = wrapVueComponent('py-weather');
+
+export async function initStore(config) {
+  if (typeof window !== 'undefined' && window.PyComponent?.initStore) {
+    window.PyComponent.initStore(config);
+  }
+  return Promise.resolve();
+}

package/src/store/index.js

@@ -1,66 +1,17 @@
-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;
+import Vue from 'vue';
+
+const state = Vue.observable({
+  apiKey: '',
+  baseUrl: '',
+});
+
+const store = {
+  get(key) {
+    return state[key];
+  },
+  set(key, value) {
+    state[key] = value;
+  },
+};
+
+export default store;

package/src/utils/api.js

@@ -1,101 +1,13 @@
-/**
- * API 请求封装
- */
-import { get, post } from './request';
-import store from '../store';
-
-// 获取基础 URL
-function getBaseUrl() {
-  return store.get('baseUrl') || '';
-}
-
-// 获取 API Key
-function getApiKey() {
-  return store.get('apiKey') || '';
-}
-
-// 构建带认证的请求头
-function getAuthHeaders() {
-  const apiKey = getApiKey();
-  return apiKey ? { 'X-API-Key': apiKey } : {};
-}
-
-/**
- * 天气相关 API
- */
-export const weatherApi = {
-  /**
-   * 获取天气信息
-   * @param {string} city - 城市名
-   * @returns {Promise} 天气数据
-   */
-  getWeather(city) {
-    return get('/api/weather', { city }, {
-      baseURL: getBaseUrl(),
-      headers: getAuthHeaders()
-    });
-  },
-
-  /**
-   * 获取forecast
-   * @param {string} city - 城市名
-   * @returns {Promise} forecast数据
-   */
-  getForecast(city) {
-    return get('/api/weather/forecast', { city }, {
-      baseURL: getBaseUrl(),
-      headers: getAuthHeaders()
-    });
-  }
-};
-
-/**
- * 数据表格相关 API
- */
-export const tableApi = {
-  /**
-   * 获取表格数据
-   * @param {object} params - 查询参数
-   * @returns {Promise} 表格数据
-   */
-  getData(params = {}) {
-    return get('/api/table/data', params, {
-      baseURL: getBaseUrl(),
-      headers: getAuthHeaders()
-    });
-  },
-
-  /**
-   * 提交表格数据
-   * @param {object} data - 提交的数据
-   * @returns {Promise} 提交结果
-   */
-  submitData(data) {
-    return post('/api/table/data', data, {
-      baseURL: getBaseUrl(),
-      headers: getAuthHeaders()
-    });
-  }
-};
-
-/**
- * 用户相关 API
- */
-export const userApi = {
-  /**
-   * 获取用户信息
-   * @returns {Promise} 用户数据
-   */
-  getUserInfo() {
-    return get('/api/user/info', {}, {
-      baseURL: getBaseUrl(),
-      headers: getAuthHeaders()
-    });
-  }
-};
-
-export default {
-  weather: weatherApi,
-  table: tableApi,
-  user: userApi
-};
+import { post } from './request';
+import store from '../store';
+
+const DEFAULT_BASE_URL = 'https://api.example.com';
+
+export function queryWeather(city) {
+  const baseUrl = store.get('baseUrl') || DEFAULT_BASE_URL;
+  const apiKey = store.get('apiKey');
+  return post(`${baseUrl}/weather/query`, {
+    city,
+    apiKey,
+  });
+}

package/src/utils/request.js

@@ -1,113 +1,10 @@
-/**
- * 封装的 fetch 请求工具
- */
-
-// 默认配置
-const defaultConfig = {
-  baseURL: '',
-  timeout: 10000,
-  headers: {
-    'Content-Type': 'application/json'
-  }
-};
-
-/**
- * 发起 HTTP 请求
- * @param {string} url - 请求地址
- * @param {object} options - 请求选项
- * @returns {Promise} 响应结果
- */
-export function request(url, options = {}) {
-  const config = {
-    ...defaultConfig,
-    ...options,
-    headers: {
-      ...defaultConfig.headers,
-      ...options.headers
-    }
-  };
-
-  // 处理 URL
-  const fullUrl = config.baseURL ? `${config.baseURL}${url}` : url;
-
-  // 创建 AbortController 用于超时控制
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), config.timeout);
-
-  return fetch(fullUrl, {
-    ...config,
-    signal: controller.signal
-  })
-    .then(response => {
-      clearTimeout(timeoutId);
-      
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      
-      // 根据返回类型解析数据
-      const contentType = response.headers.get('content-type');
-      if (contentType && contentType.includes('application/json')) {
-        return response.json();
-      }
-      return response.text();
-    })
-    .catch(error => {
-      clearTimeout(timeoutId);
-      
-      if (error.name === 'AbortError') {
-        throw new Error('Request timeout');
-      }
-      throw error;
-    });
-}
-
-/**
- * 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 request(fullUrl, {
-    method: 'GET',
-    ...options
-  });
-}
-
-/**
- * POST 请求
- * @param {string} url - 请求地址
- * @param {object} data - 请求数据
- * @param {object} options - 其他选项
- * @returns {Promise} 响应结果
- */
-export function post(url, data = {}, options = {}) {
-  return request(url, {
-    method: 'POST',
-    body: JSON.stringify(data),
-    ...options
-  });
-}
-
-/**
- * 设置默认配置
- * @param {object} config - 配置对象
- */
-export function setDefaultConfig(config) {
-  Object.assign(defaultConfig, config);
-}
-
-export default {
-  request,
-  get,
-  post,
-  setDefaultConfig
-};
+export function post(url, data, headers = {}) {
+  return fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+    body: JSON.stringify(data),
+  }).then((res) => res.json());
+}

package/src/vue/index.js

@@ -1,32 +1,25 @@
-// Vue 入口 - 直接导出 Vue 组件
-
-import PyTable from '../components/PyTable.vue';
-import PyWeather from '../components/PyWeather.vue';
-import store from '../store';
-
-/**
- * 初始化 Store
- * @param {object} config - 配置对象
- */
-function initStore(config) {
-  if (!config || typeof config !== 'object') {
-    console.warn('[PyComponent] initStore 需要传入配置对象');
-    return;
-  }
-  
-  Object.keys(config).forEach(key => {
-    store.set(key, config[key]);
-  });
-  
-  console.log('[PyComponent] Store 已初始化');
-}
-
-// 导出组件和函数
-export { PyTable, PyWeather, initStore };
-
-// 默认导出
-export default {
-  PyTable,
-  PyWeather,
-  initStore
-};
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import store from '../store';
+
+import PyTable from '../components/PyTable.vue';
+import PyWeather from '../components/PyWeather.vue';
+
+Vue.use(ElementUI);
+
+function initStore(config) {
+  if (config) {
+    Object.keys(config).forEach((key) => {
+      store.set(key, config[key]);
+    });
+  }
+}
+
+export { PyTable, PyWeather, initStore };
+
+export default {
+  PyTable,
+  PyWeather,
+  initStore,
+};