py-test-components 1.0.0 → 1.0.2

package/src/react/index.js

@@ -1,156 +1,60 @@
-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
-};
+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,
+};

package/webpack.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+
+const baseConfig = {
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+    },
+  },
+  module: {
+    rules: [
+      { test: /\.vue$/, loader: 'vue-loader' },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+    ],
+  },
+  plugins: [new VueLoaderPlugin()],
+};
+
+// UMD build
+const umdConfig = {
+  ...baseConfig,
+  entry: './src/index.js',
+  output: {
+    filename: 'py-component.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: 'PyComponent',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  },
+};
+
+// ESM build
+const esmConfig = {
+  ...baseConfig,
+  entry: './src/index.js',
+  output: {
+    filename: 'py-component.esm.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: {
+      type: 'module',
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+
+module.exports = [umdConfig, esmConfig];

package//350/246/201/346/261/202.txt

@@ -0,0 +1,17 @@
+在当前文件夹下构建一个基于vue2+elementui的组件库，发布到npm仓库的名称为py-test-component
+使用时，安装 nm install py-test-component
+vue2工程可以使用该组件，通过import { PyTable, PyWeather, initStore } from 'py-test-component/vue';即可按需导入使用
+react工程也能够使用该组件库，并且使用时不需要额外的适配成本（无需安装vue和elementUI），通过import { PyTable, PyWeather, initStore } from 'py-test-component/react';即可按需导入使用
+每个组件都有一个
+
+功能要求：
+1、组件库包含两个组件:
+	一个表格展示组件PyTable（只有一个传入参数propData）;
+	一个天气查询组件PyWheather（一个输入框输入城市、一个查询按钮发起查询、展示查询的天气情况）
+2、创建一个request.js封装post方法，使得组件库能够自行发送请求不受外部工程影响，请求使用fetch实现
+3、创建一个api.js，用来封装一些api请求，比如查询天气时的请求queryWheather，使用request.js里的post方法
+4、组件库有自己的全局store机制，使用Vue.observable实现，只需要简单实现get和set方法，在组件内部可以随时访问，但是外部工程无法访问
+5、在引用组件时暴露一个initStore()方法，外部工程可以传入一些参数，存储到组件库的全局store中
+
+
+实现越简洁清晰越好，不要过度设计