py-test-components 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CLAUDE.md +8 -0
  2. package/DEVELOPER.md +541 -0
  3. package/README.md +60 -214
  4. package/dist/py-component.esm.js +1 -1
  5. package/dist/py-component.esm.js.LICENSE.txt +0 -6
  6. package/dist/py-component.js +1 -1
  7. package/dist/py-component.js.LICENSE.txt +0 -6
  8. package/package.json +29 -42
  9. package/src/components/PyTable.vue +40 -280
  10. package/src/components/PyWeather.vue +48 -387
  11. package/src/index.js +20 -51
  12. package/src/react/index.js +60 -156
  13. package/src/store/index.js +17 -66
  14. package/src/utils/api.js +13 -101
  15. package/src/utils/request.js +10 -113
  16. package/src/vue/index.js +25 -32
  17. package/webpack.config.js +48 -0
  18. package//350/246/201/346/261/202.txt +17 -0
package/README.md CHANGED
@@ -1,214 +1,60 @@
1
- # PyComponent 组件库
2
-
3
- 跨框架组件库 - Vue 2 组件可被 React 使用，基于 Web Components 技术实现。
4
-
5
- ## 特性
6
-
7
- - 🚀 **跨框架**：Vue 2 组件可被 React 无缝使用
8
- - 📦 **零配置**：React 用户无需安装 Vue 和 ElementUI
9
- - 🎯 **单一入口**：所有组件统一使用 `propData` 接收参数
10
- - 🔒 **状态隔离**：组件库内部 store 不暴露给外部
11
- - 🎨 **基于 ElementUI**：使用成熟的 UI 组件库
12
-
13
- ## 安装
14
-
15
- ```bash
16
- npm install py-test-component
17
- ```
18
-
19
- ## 快速开始
20
-
21
- ### React 中使用
22
-
23
- ```jsx
24
- import { PyTable, PyWeather, initStore } from 'py-test-component/react';
25
-
26
- // 初始化配置
27
- initStore({
28
- apiKey: 'your-api-key',
29
- baseUrl: 'https://api.example.com'
30
- });
31
-
32
- function App() {
33
- const tableData = {
34
- title: '用户列表',
35
- columns: [
36
- { prop: 'name', label: '姓名' },
37
- { prop: 'age', label: '年龄' },
38
- { prop: 'email', label: '邮箱' }
39
- ],
40
- data: [
41
- { name: '张三', age: 25, email: 'zhangsan@example.com' },
42
- { name: '李四', age: 30, email: 'lisi@example.com' }
43
- ]
44
- };
45
-
46
- return (
47
- <div>
48
- <PyTable propData={tableData} />
49
- <PyWeather propData={{ city: '北京', showForecast: true }} />
50
- </div>
51
- );
52
- }
53
- ```
54
-
55
- ### Vue 中使用
56
-
57
- ```vue
58
- <template>
59
- <div>
60
- <PyTable :propData="tableData" />
61
- <PyWeather :propData="weatherConfig" />
62
- </div>
63
- </template>
64
-
65
- <script>
66
- import { PyTable, PyWeather, initStore } from 'py-test-component/vue';
67
-
68
- // 初始化配置
69
- initStore({
70
- apiKey: 'your-api-key',
71
- baseUrl: 'https://api.example.com'
72
- });
73
-
74
- export default {
75
- components: { PyTable, PyWeather },
76
- data() {
77
- return {
78
- tableData: {
79
- title: '用户列表',
80
- columns: [
81
- { prop: 'name', label: '姓名' }
82
- ],
83
- data: [
84
- { name: '张三' }
85
- ]
86
- },
87
- weatherConfig: {
88
- city: '北京'
89
- }
90
- };
91
- }
92
- };
93
- </script>
94
- ```
95
-
96
- ### 浏览器直接使用
97
-
98
- ```html
99
- <!DOCTYPE html>
100
- <html>
101
- <head>
102
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
103
- </head>
104
- <body>
105
- <py-table id="myTable"></py-table>
106
- <py-weather id="myWeather"></py-weather>
107
-
108
- <script src="./dist/py-component.js"></script>
109
- <script>
110
- // 初始化配置
111
- PyComponent.initStore({
112
- apiKey: 'your-api-key'
113
- });
114
-
115
- // 设置数据
116
- document.getElementById('myTable').propData = {
117
- title: '用户列表',
118
- columns: [{ prop: 'name', label: '姓名' }],
119
- data: [{ name: '张三' }]
120
- };
121
-
122
- document.getElementById('myWeather').propData = {
123
- city: '北京'
124
- };
125
- </script>
126
- </body>
127
- </html>
128
- ```
129
-
130
- ## 组件列表
131
-
132
- ### PyTable 表格组件
133
-
134
- 数据展示表格，支持分页、排序、选择等功能。
135
-
136
- **propData 参数：**
137
-
138
- | 属性 | 类型 | 默认值 | 说明 |
139
- |------|------|--------|------|
140
- | title | string | '数据表格' | 表格标题 |
141
- | columns | array | [] | 列配置数组 |
142
- | data | array | - | 表格数据（不传则通过 API 获取） |
143
- | stripe | boolean | true | 是否显示斑马纹 |
144
- | border | boolean | false | 是否显示边框 |
145
- | pagination | boolean | true | 是否显示分页 |
146
- | showIndex | boolean | true | 是否显示序号列 |
147
- | showSelection | boolean | false | 是否显示选择列 |
148
- | showActions | boolean | true | 是否显示操作列 |
149
- | api | boolean | true | 是否通过 API 获取数据 |
150
- | params | object | {} | API 请求参数 |
151
-
152
- **事件：**
153
-
154
- | 事件名 | 说明 | 参数 |
155
- |--------|------|------|
156
- | refresh | 刷新数据 | - |
157
- | selection-change | 选择变化 | 选中行数组 |
158
- | edit | 点击编辑 | 行数据 |
159
- | delete | 点击删除 | 行数据 |
160
- | size-change | 分页大小变化 | 新页大小 |
161
- | page-change | 页码变化 | 新页码 |
162
-
163
- ### PyWeather 天气组件
164
-
165
- 天气信息展示组件。
166
-
167
- **propData 参数：**
168
-
169
- | 属性 | 类型 | 默认值 | 说明 |
170
- |------|------|--------|------|
171
- | city | string | '北京' | 城市名称 |
172
- | showForecast | boolean | false | 是否显示预报 |
173
- | mockData | object | - | 模拟天气数据 |
174
-
175
- **事件：**
176
-
177
- | 事件名 | 说明 | 参数 |
178
- |--------|------|------|
179
- | load | 数据加载完成 | 天气数据 |
180
- | error | 加载失败 | 错误对象 |
181
-
182
- ## Store 配置
183
-
184
- 通过 `initStore` 初始化全局配置：
185
-
186
- ```javascript
187
- initStore({
188
- apiKey: 'your-api-key', // API 认证密钥
189
- baseUrl: 'https://api.example.com', // API 基础地址
190
- userInfo: { // 用户信息
191
- name: '张三'
192
- }
193
- });
194
- ```
195
-
196
- **注意：** Store 完全内部化，外部只能设置，无法读取和订阅。
197
-
198
- ## 浏览器兼容性
199
-
200
- - Chrome/Edge 60+
201
- - Firefox 63+
202
- - Safari 13.1+
203
- - 需要支持 Web Components 和 ES6
204
-
205
- ## 技术栈
206
-
207
- - Vue 2.7
208
- - ElementUI 2.15
209
- - vue-custom-element
210
- - Webpack 5
211
-
212
- ## License
213
-
214
- MIT
1
+ # py-test-component
2
+
3
+ Vue2 + ElementUI 组件库，支持 Vue 和 React。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install py-test-component
9
+ ```
10
+
11
+ ## Vue 项目使用
12
+
13
+ ```js
14
+ import { PyTable, PyWeather, initStore } from 'py-test-component/vue';
15
+
16
+ // 初始化配置
17
+ initStore({
18
+ apiKey: 'your-api-key',
19
+ baseUrl: 'https://api.example.com'
20
+ });
21
+ ```
22
+
23
+ ## React 项目使用
24
+
25
+ ```js
26
+ // 在入口文件加载 Web Components
27
+ import 'py-test-component';
28
+
29
+ // 然后使用 React 组件
30
+ import { PyTable, PyWeather, initStore } from 'py-test-component/react';
31
+ import 'py-test-component/react'; // 确保 CSS 加载
32
+
33
+ // 初始化配置
34
+ initStore({
35
+ apiKey: 'your-api-key',
36
+ baseUrl: 'https://api.example.com'
37
+ });
38
+ ```
39
+
40
+ ## 组件
41
+
42
+ ### PyTable
43
+
44
+ 表格展示组件。
45
+
46
+ ```html
47
+ <PyTable :propData="{
48
+ columns: [{ prop: 'name', label: '姓名' }],
49
+ data: [{ name: '张三' }],
50
+ config: { border: true }
51
+ }" />
52
+ ```
53
+
54
+ ### PyWeather
55
+
56
+ 天气查询组件。
57
+
58
+ ```html
59
+ <PyWeather @change="handleWeatherChange" />
60
+ ```