pcm-agents 0.3.2 → 0.3.4
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.
- package/LICENSE +21 -21
- package/dist/cjs/{index-BFPEnLbS.js → index-RmBfqEV7.js} +4 -3
- package/dist/cjs/index-RmBfqEV7.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/my-component.cjs.entry.js +2 -2
- package/dist/cjs/my-component.cjs.entry.js.map +1 -1
- package/dist/cjs/my-component.entry.cjs.js.map +1 -1
- package/dist/cjs/pcm-agents.cjs.js +1 -1
- package/dist/cjs/pcm-app-chat-modal.pcm-chat-message.pcm-hr-chat-modal.pcm-jlpp-modal.pcm-mnms-modal.pcm-video-chat-modal.pcm-zygh-modal.entry.cjs.js.map +1 -0
- package/dist/cjs/pcm-app-chat-modal_7.cjs.entry.js +68 -61
- package/dist/cjs/pcm-app-chat-modal_7.cjs.entry.js.map +1 -1
- package/dist/cjs/pcm-chat-modal.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/my-component/my-component.css +3 -3
- package/dist/collection/components/my-component/my-component.js +1 -1
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/collection/components/pcm-app-chat-modal/pcm-app-chat-modal.js +5 -6
- package/dist/collection/components/pcm-app-chat-modal/pcm-app-chat-modal.js.map +1 -1
- package/dist/collection/components/pcm-chat-message/pcm-chat-message.js +26 -2
- package/dist/collection/components/pcm-chat-message/pcm-chat-message.js.map +1 -1
- package/dist/collection/components/pcm-hr-chat-modal/pcm-hr-chat-modal.js +4 -4
- package/dist/collection/components/pcm-hr-chat-modal/pcm-hr-chat-modal.js.map +1 -1
- package/dist/collection/components/{pcm-jlpx-modal/pcm-jlpx-modal.js → pcm-jlpp-modal/pcm-jlpp-modal.js} +21 -21
- package/dist/collection/components/pcm-jlpp-modal/pcm-jlpp-modal.js.map +1 -0
- package/dist/collection/components/pcm-mnms-modal/pcm-mnms-modal.js +16 -16
- package/dist/collection/components/pcm-mnms-modal/pcm-mnms-modal.js.map +1 -1
- package/dist/collection/components/pcm-video-chat-modal/pcm-video-chat-modal.js +4 -4
- package/dist/collection/components/pcm-video-chat-modal/pcm-video-chat-modal.js.map +1 -1
- package/dist/collection/components/pcm-zygh-modal/pcm-zygh-modal.js +22 -18
- package/dist/collection/components/pcm-zygh-modal/pcm-zygh-modal.js.map +1 -1
- package/dist/collection/global/global.css +31 -0
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/utils/utils.js +2 -1
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/index.js +2 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/my-component.js +1 -1
- package/dist/components/my-component.js.map +1 -1
- package/dist/components/{p-LkDC0SN2.js → p-CBMLAbWp.js} +10 -5
- package/dist/components/p-CBMLAbWp.js.map +1 -0
- package/dist/components/{p-BctfuDvG.js → p-VU0niiMk.js} +7 -8
- package/dist/components/p-VU0niiMk.js.map +1 -0
- package/dist/components/pcm-app-chat-modal.js +1 -1
- package/dist/components/pcm-chat-message.js +1 -1
- package/dist/components/pcm-chat-modal.js +1 -1
- package/dist/components/pcm-hr-chat-modal.js +4 -4
- package/dist/components/pcm-hr-chat-modal.js.map +1 -1
- package/dist/components/{pcm-jlpx-modal.d.ts → pcm-jlpp-modal.d.ts} +4 -4
- package/dist/components/{pcm-jlpx-modal.js → pcm-jlpp-modal.js} +27 -27
- package/dist/components/pcm-jlpp-modal.js.map +1 -0
- package/dist/components/pcm-mnms-modal.js +16 -16
- package/dist/components/pcm-mnms-modal.js.map +1 -1
- package/dist/components/pcm-video-chat-modal.js +4 -4
- package/dist/components/pcm-video-chat-modal.js.map +1 -1
- package/dist/components/pcm-zygh-modal.js +20 -16
- package/dist/components/pcm-zygh-modal.js.map +1 -1
- package/dist/esm/{index-nVjZGfA8.js → index-CDtyzi83.js} +4 -3
- package/dist/esm/index-CDtyzi83.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/my-component.entry.js +2 -2
- package/dist/esm/my-component.entry.js.map +1 -1
- package/dist/esm/pcm-agents.js +1 -1
- package/dist/esm/pcm-app-chat-modal.pcm-chat-message.pcm-hr-chat-modal.pcm-jlpp-modal.pcm-mnms-modal.pcm-video-chat-modal.pcm-zygh-modal.entry.js.map +1 -0
- package/dist/esm/pcm-app-chat-modal_7.entry.js +68 -61
- package/dist/esm/pcm-app-chat-modal_7.entry.js.map +1 -1
- package/dist/esm/pcm-chat-modal.entry.js +1 -1
- package/dist/pcm-agents/index.esm.js +1 -1
- package/dist/pcm-agents/my-component.entry.esm.js.map +1 -1
- package/dist/pcm-agents/p-11c829b3.entry.js +2 -0
- package/dist/pcm-agents/p-11c829b3.entry.js.map +1 -0
- package/dist/pcm-agents/{p-f3ca99b4.entry.js → p-430f9a9f.entry.js} +2 -2
- package/dist/pcm-agents/p-CDtyzi83.js +2 -0
- package/dist/pcm-agents/p-CDtyzi83.js.map +1 -0
- package/dist/pcm-agents/p-a0826602.entry.js +2 -0
- package/dist/pcm-agents/p-a0826602.entry.js.map +1 -0
- package/dist/pcm-agents/pcm-agents.esm.js +1 -1
- package/dist/pcm-agents/pcm-app-chat-modal.pcm-chat-message.pcm-hr-chat-modal.pcm-jlpp-modal.pcm-mnms-modal.pcm-video-chat-modal.pcm-zygh-modal.entry.esm.js.map +1 -0
- package/dist/types/components/pcm-app-chat-modal/pcm-app-chat-modal.d.ts +1 -1
- package/dist/types/components/pcm-chat-message/pcm-chat-message.d.ts +4 -0
- package/dist/types/components/pcm-hr-chat-modal/pcm-hr-chat-modal.d.ts +1 -1
- package/dist/types/components/{pcm-jlpx-modal/pcm-jlpx-modal.d.ts → pcm-jlpp-modal/pcm-jlpp-modal.d.ts} +4 -4
- package/dist/types/components/pcm-mnms-modal/pcm-mnms-modal.d.ts +3 -3
- package/dist/types/components/pcm-video-chat-modal/pcm-video-chat-modal.d.ts +1 -1
- package/dist/types/components/pcm-zygh-modal/pcm-zygh-modal.d.ts +8 -4
- package/dist/types/components.d.ts +56 -48
- package/dist/types/utils/utils.d.ts +1 -1
- package/package.json +62 -61
- package/readme.md +307 -307
- package/dist/cjs/index-BFPEnLbS.js.map +0 -1
- package/dist/cjs/pcm-app-chat-modal.pcm-chat-message.pcm-hr-chat-modal.pcm-jlpx-modal.pcm-mnms-modal.pcm-video-chat-modal.pcm-zygh-modal.entry.cjs.js.map +0 -1
- package/dist/collection/components/pcm-jlpx-modal/pcm-jlpx-modal.js.map +0 -1
- package/dist/components/p-BctfuDvG.js.map +0 -1
- package/dist/components/p-LkDC0SN2.js.map +0 -1
- package/dist/components/pcm-jlpx-modal.js.map +0 -1
- package/dist/esm/index-nVjZGfA8.js.map +0 -1
- package/dist/esm/pcm-app-chat-modal.pcm-chat-message.pcm-hr-chat-modal.pcm-jlpx-modal.pcm-mnms-modal.pcm-video-chat-modal.pcm-zygh-modal.entry.js.map +0 -1
- package/dist/pcm-agents/p-55417392.entry.js +0 -2
- package/dist/pcm-agents/p-55417392.entry.js.map +0 -1
- package/dist/pcm-agents/p-a698b59f.entry.js +0 -2
- package/dist/pcm-agents/p-a698b59f.entry.js.map +0 -1
- package/dist/pcm-agents/p-nVjZGfA8.js +0 -2
- package/dist/pcm-agents/p-nVjZGfA8.js.map +0 -1
- package/dist/pcm-agents/pcm-app-chat-modal.pcm-chat-message.pcm-hr-chat-modal.pcm-jlpx-modal.pcm-mnms-modal.pcm-video-chat-modal.pcm-zygh-modal.entry.esm.js.map +0 -1
- /package/dist/collection/components/{pcm-jlpx-modal/pcm-jlpx-modal.css → pcm-jlpp-modal/pcm-jlpp-modal.css} +0 -0
- /package/dist/pcm-agents/{p-f3ca99b4.entry.js.map → p-430f9a9f.entry.js.map} +0 -0
package/readme.md
CHANGED
|
@@ -1,308 +1,308 @@
|
|
|
1
|
-
[](https://stenciljs.com)
|
|
2
|
-
|
|
3
|
-
# Stencil 组件启动器
|
|
4
|
-
|
|
5
|
-
> 这是一个用于使用 Stencil 构建独立 Web 组件的启动项目。
|
|
6
|
-
|
|
7
|
-
Stencil 是一个用于构建快速 Web 应用程序的 Web 组件编译器。
|
|
8
|
-
|
|
9
|
-
Stencil 将最流行的前端框架的最佳概念结合到一个编译时而非运行时工具中。Stencil 采用 TypeScript、JSX、一个微型虚拟 DOM 层、高效的单向数据绑定、异步渲染管道(类似于 React Fiber)以及开箱即用的懒加载,并生成 100% 基于标准的 Web 组件,可在任何支持 Custom Elements 规范的浏览器中运行。
|
|
10
|
-
|
|
11
|
-
Stencil 组件只是 Web 组件,因此它们可以在任何主要框架中工作,或者完全不使用框架。
|
|
12
|
-
|
|
13
|
-
## 创建新组件的步骤
|
|
14
|
-
|
|
15
|
-
在 Stencil 中创建新组件需要遵循以下步骤:
|
|
16
|
-
|
|
17
|
-
### 1. 创建组件文件夹
|
|
18
|
-
|
|
19
|
-
在 `src/components` 目录下创建一个新的文件夹,文件夹名称应该与组件名称相匹配。例如,对于 `pcm-chat-modal` 组件,创建 `src/components/pcm-chat-modal` 文件夹。
|
|
20
|
-
|
|
21
|
-
### 2. 创建组件主文件
|
|
22
|
-
|
|
23
|
-
在组件文件夹中创建一个 TypeScript 文件,命名为 `组件名.tsx`。例如:`pcm-chat-modal.tsx`。
|
|
24
|
-
|
|
25
|
-
这个文件应该包含组件的主要逻辑和结构:
|
|
26
|
-
|
|
27
|
-
```typescript
|
|
28
|
-
import { Component, Prop, h } from '@stencil/core';
|
|
29
|
-
|
|
30
|
-
@Component({
|
|
31
|
-
tag: 'pcm-chat-modal', // 这将是在 HTML 中使用的标签名
|
|
32
|
-
styleUrl: 'pcm-chat-modal.css', // 指向组件的样式文件
|
|
33
|
-
shadow: true, // 启用 Shadow DOM
|
|
34
|
-
})
|
|
35
|
-
export class PcmChatModal {
|
|
36
|
-
// 使用 @Prop 装饰器定义组件的属性
|
|
37
|
-
@Prop() src: string;
|
|
38
|
-
@Prop() alt: string = '默认值';
|
|
39
|
-
|
|
40
|
-
// 组件的渲染方法
|
|
41
|
-
render() {
|
|
42
|
-
return (
|
|
43
|
-
<div>
|
|
44
|
-
<img src={this.src} alt={this.alt} />
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### 3. 创建样式文件
|
|
52
|
-
|
|
53
|
-
创建一个 CSS 文件,命名为 `组件名.css`。例如:`pcm-chat-modal.css`。
|
|
54
|
-
|
|
55
|
-
```css
|
|
56
|
-
:host {
|
|
57
|
-
display: block;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* 组件的其他样式 */
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### 4. 创建测试文件
|
|
64
|
-
|
|
65
|
-
为组件创建单元测试和端到端测试文件:
|
|
66
|
-
|
|
67
|
-
- 单元测试:`组件名.spec.ts`(例如:`pcm-chat-modal.spec.ts`)
|
|
68
|
-
- 端到端测试:`组件名.e2e.ts`(例如:`pcm-chat-modal.e2e.ts`)
|
|
69
|
-
|
|
70
|
-
### 5. 创建自述文件(可选)
|
|
71
|
-
|
|
72
|
-
创建一个 `readme.md` 文件,描述组件的用法和属性。Stencil 会自动更新这个文件中的属性表格。
|
|
73
|
-
|
|
74
|
-
### 6. 构建和测试
|
|
75
|
-
|
|
76
|
-
运行以下命令来构建和测试你的组件:
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm run build
|
|
80
|
-
npm test
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### 7. 在应用中使用
|
|
84
|
-
|
|
85
|
-
构建成功后,你可以在 HTML 中使用你的组件:
|
|
86
|
-
|
|
87
|
-
```html
|
|
88
|
-
<pcm-chat-modal src="path/to/image.jpg" alt="描述文本"></pcm-chat-modal>
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### 8. 测试你的组件
|
|
92
|
-
|
|
93
|
-
要测试你的组件,可以按照以下步骤操作:
|
|
94
|
-
|
|
95
|
-
#### 8.1 在 index.html 中添加组件实例
|
|
96
|
-
|
|
97
|
-
修改 `src/index.html` 文件,添加你的组件实例:
|
|
98
|
-
|
|
99
|
-
```html
|
|
100
|
-
<!DOCTYPE html>
|
|
101
|
-
<html dir="ltr" lang="en">
|
|
102
|
-
<head>
|
|
103
|
-
<meta charset="utf-8">
|
|
104
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
|
|
105
|
-
<title>Stencil Component Starter</title>
|
|
106
|
-
|
|
107
|
-
<script type="module" src="/build/mycomponent.esm.js"></script>
|
|
108
|
-
<script nomodule src="/build/mycomponent.js"></script>
|
|
109
|
-
</head>
|
|
110
|
-
<body>
|
|
111
|
-
<!-- 添加你的组件实例,使用可访问的图片URL -->
|
|
112
|
-
<pcm-chat-modal
|
|
113
|
-
src="https://via.placeholder.com/150"
|
|
114
|
-
alt="客服图片"
|
|
115
|
-
width="80px"
|
|
116
|
-
height="80px">
|
|
117
|
-
</pcm-chat-modal>
|
|
118
|
-
|
|
119
|
-
<!-- 测试点击事件 -->
|
|
120
|
-
<script>
|
|
121
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
122
|
-
// 给组件一些时间来加载
|
|
123
|
-
const PcmChatModal = document.querySelector('pcm-chat-modal');
|
|
124
|
-
if (PcmChatModal) {
|
|
125
|
-
// 监听点击事件
|
|
126
|
-
PcmChatModal.addEventListener('PcmChatModalClick', function() {
|
|
127
|
-
alert('浮窗图片被点击了!');
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
</script>
|
|
132
|
-
</body>
|
|
133
|
-
</html>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
#### 8.2 确保组件类型定义已生成
|
|
137
|
-
|
|
138
|
-
如果你的组件没有显示,可能是因为 `components.d.ts` 文件中没有包含你的组件的类型定义。解决方法:
|
|
139
|
-
|
|
140
|
-
1. 运行构建命令重新生成类型定义:
|
|
141
|
-
```bash
|
|
142
|
-
npm run build
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
2. 如果问题仍然存在,检查 `src/components.d.ts` 文件,确保其中包含你的组件定义。它应该类似于:
|
|
146
|
-
```typescript
|
|
147
|
-
/* ... 其他导入 ... */
|
|
148
|
-
|
|
149
|
-
declare namespace Components {
|
|
150
|
-
/* ... 其他组件 ... */
|
|
151
|
-
|
|
152
|
-
interface PcmChatModal {
|
|
153
|
-
/**
|
|
154
|
-
* 图片的替代文本
|
|
155
|
-
*/
|
|
156
|
-
"alt": string;
|
|
157
|
-
/**
|
|
158
|
-
* 图片的高度
|
|
159
|
-
*/
|
|
160
|
-
"height": string;
|
|
161
|
-
/**
|
|
162
|
-
* 点击图片时的回调函数
|
|
163
|
-
*/
|
|
164
|
-
"onClick": () => void;
|
|
165
|
-
/**
|
|
166
|
-
* 图片的URL地址
|
|
167
|
-
*/
|
|
168
|
-
"src": string;
|
|
169
|
-
/**
|
|
170
|
-
* 图片的宽度
|
|
171
|
-
*/
|
|
172
|
-
"width": string;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/* ... 其他声明 ... */
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
#### 8.3 启动开发服务器
|
|
180
|
-
|
|
181
|
-
运行开发服务器来查看你的组件:
|
|
182
|
-
|
|
183
|
-
```bash
|
|
184
|
-
npm start
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
这将启动一个本地开发服务器,通常在 `http://localhost:3333` 上。在浏览器中打开此地址,你应该能看到你的浮窗图片组件显示在页面的右下角。
|
|
188
|
-
|
|
189
|
-
#### 8.4 调试常见问题
|
|
190
|
-
|
|
191
|
-
如果组件没有正确显示:
|
|
192
|
-
|
|
193
|
-
1. 检查浏览器控制台是否有错误信息
|
|
194
|
-
2. 确认组件的 CSS 样式是否正确加载
|
|
195
|
-
3. 验证图片 URL 是否有效
|
|
196
|
-
4. 尝试添加一些临时样式来确认组件是否已渲染:
|
|
197
|
-
```html
|
|
198
|
-
<style>
|
|
199
|
-
pcm-chat-modal {
|
|
200
|
-
border: 2px solid red;
|
|
201
|
-
}
|
|
202
|
-
</style>
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
## 组件文件结构示例
|
|
206
|
-
|
|
207
|
-
以下是一个完整的组件文件结构示例:
|
|
208
|
-
|
|
209
|
-
```
|
|
210
|
-
src/components/pcm-chat-modal/
|
|
211
|
-
├── pcm-chat-modal.tsx # 组件主文件
|
|
212
|
-
├── pcm-chat-modal.css # 样式文件
|
|
213
|
-
├── pcm-chat-modal.spec.ts # 单元测试
|
|
214
|
-
├── pcm-chat-modal.e2e.ts # 端到端测试
|
|
215
|
-
└── readme.md # 组件文档
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
## 入门指南
|
|
219
|
-
|
|
220
|
-
运行:
|
|
221
|
-
|
|
222
|
-
```bash
|
|
223
|
-
npm install
|
|
224
|
-
npm start
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
要为生产环境构建组件,运行:
|
|
228
|
-
|
|
229
|
-
```bash
|
|
230
|
-
npm run build
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
要运行组件的单元测试,运行:
|
|
234
|
-
|
|
235
|
-
```bash
|
|
236
|
-
npm test
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
需要帮助?请查看我们的文档 [这里](https://stenciljs.com/docs/my-first-component)。
|
|
240
|
-
|
|
241
|
-
## 命名组件
|
|
242
|
-
|
|
243
|
-
在创建新的组件标签时,我们建议_不要_在组件名称中使用 `stencil`(例如:` <stencil-datepicker> `)。这是因为生成的组件与 Stencil 几乎没有关系;它只是一个 Web 组件!
|
|
244
|
-
|
|
245
|
-
相反,使用适合您公司的前缀或相关组件组的任何名称。例如,所有 [Ionic 生成的](https://ionicframework.com/) Web 组件都使用前缀 `ion`。
|
|
246
|
-
|
|
247
|
-
## 使用此组件
|
|
248
|
-
|
|
249
|
-
我们推荐两种策略来使用用 Stencil 构建的 Web 组件。
|
|
250
|
-
|
|
251
|
-
这两种策略的第一步都是 [发布到 NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)。
|
|
252
|
-
|
|
253
|
-
您可以在 [Stencil 文档](https://stenciljs.com/docs/publishing) 中阅读有关这些不同方法的更多信息。
|
|
254
|
-
|
|
255
|
-
### 懒加载
|
|
256
|
-
|
|
257
|
-
如果您的 Stencil 项目是使用 [`dist`](https://stenciljs.com/docs/distribution) 输出目标构建的,您可以导入一个小型引导脚本,它会注册所有组件并允许您懒加载单个组件脚本。
|
|
258
|
-
|
|
259
|
-
例如,假设您的 Stencil 项目命名空间称为 `my-design-system`,要在任何网站上使用 `my-component`,请将此内容注入到您的 HTML 中:
|
|
260
|
-
|
|
261
|
-
```html
|
|
262
|
-
<script type="module" src="https://unpkg.com/my-design-system"></script>
|
|
263
|
-
<!--
|
|
264
|
-
为避免 unpkg.com 重定向到实际文件,您也可以直接导入:
|
|
265
|
-
https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
|
|
266
|
-
-->
|
|
267
|
-
<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
这将只加载渲染 `` 所需的必要脚本。一旦使用了此包的更多组件,它们将自动被懒加载。
|
|
271
|
-
|
|
272
|
-
您也可以在应用程序入口文件中将脚本作为 `node_modules` 的一部分导入:
|
|
273
|
-
|
|
274
|
-
```tsx
|
|
275
|
-
import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
|
|
276
|
-
```
|
|
277
|
-
|
|
278
|
-
查看此 [在线演示](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx)。
|
|
279
|
-
|
|
280
|
-
### 独立使用
|
|
281
|
-
|
|
282
|
-
如果您正在使用带有 `dist-custom-elements` 的 Stencil 组件库,我们建议在需要的文件中单独导入 Stencil 组件。
|
|
283
|
-
|
|
284
|
-
要将 Stencil 组件导出为独立组件,请确保您在 `stencil.config.ts` 中定义了 [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) 输出目标。
|
|
285
|
-
|
|
286
|
-
例如,假设您想将 `` 作为 React 组件的一部分使用,您可以通过以下方式直接导入组件:
|
|
287
|
-
|
|
288
|
-
```tsx
|
|
289
|
-
import 'foobar-design-system/my-component';
|
|
290
|
-
|
|
291
|
-
function App() {
|
|
292
|
-
return (
|
|
293
|
-
<>
|
|
294
|
-
<div>
|
|
295
|
-
<my-component
|
|
296
|
-
first="Stencil"
|
|
297
|
-
middle="'Don't call me a framework'"
|
|
298
|
-
last="JS"
|
|
299
|
-
></my-component>
|
|
300
|
-
</div>
|
|
301
|
-
</>
|
|
302
|
-
);
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
export default App;
|
|
306
|
-
```
|
|
307
|
-
|
|
1
|
+
[](https://stenciljs.com)
|
|
2
|
+
|
|
3
|
+
# Stencil 组件启动器
|
|
4
|
+
|
|
5
|
+
> 这是一个用于使用 Stencil 构建独立 Web 组件的启动项目。
|
|
6
|
+
|
|
7
|
+
Stencil 是一个用于构建快速 Web 应用程序的 Web 组件编译器。
|
|
8
|
+
|
|
9
|
+
Stencil 将最流行的前端框架的最佳概念结合到一个编译时而非运行时工具中。Stencil 采用 TypeScript、JSX、一个微型虚拟 DOM 层、高效的单向数据绑定、异步渲染管道(类似于 React Fiber)以及开箱即用的懒加载,并生成 100% 基于标准的 Web 组件,可在任何支持 Custom Elements 规范的浏览器中运行。
|
|
10
|
+
|
|
11
|
+
Stencil 组件只是 Web 组件,因此它们可以在任何主要框架中工作,或者完全不使用框架。
|
|
12
|
+
|
|
13
|
+
## 创建新组件的步骤
|
|
14
|
+
|
|
15
|
+
在 Stencil 中创建新组件需要遵循以下步骤:
|
|
16
|
+
|
|
17
|
+
### 1. 创建组件文件夹
|
|
18
|
+
|
|
19
|
+
在 `src/components` 目录下创建一个新的文件夹,文件夹名称应该与组件名称相匹配。例如,对于 `pcm-chat-modal` 组件,创建 `src/components/pcm-chat-modal` 文件夹。
|
|
20
|
+
|
|
21
|
+
### 2. 创建组件主文件
|
|
22
|
+
|
|
23
|
+
在组件文件夹中创建一个 TypeScript 文件,命名为 `组件名.tsx`。例如:`pcm-chat-modal.tsx`。
|
|
24
|
+
|
|
25
|
+
这个文件应该包含组件的主要逻辑和结构:
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
import { Component, Prop, h } from '@stencil/core';
|
|
29
|
+
|
|
30
|
+
@Component({
|
|
31
|
+
tag: 'pcm-chat-modal', // 这将是在 HTML 中使用的标签名
|
|
32
|
+
styleUrl: 'pcm-chat-modal.css', // 指向组件的样式文件
|
|
33
|
+
shadow: true, // 启用 Shadow DOM
|
|
34
|
+
})
|
|
35
|
+
export class PcmChatModal {
|
|
36
|
+
// 使用 @Prop 装饰器定义组件的属性
|
|
37
|
+
@Prop() src: string;
|
|
38
|
+
@Prop() alt: string = '默认值';
|
|
39
|
+
|
|
40
|
+
// 组件的渲染方法
|
|
41
|
+
render() {
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<img src={this.src} alt={this.alt} />
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### 3. 创建样式文件
|
|
52
|
+
|
|
53
|
+
创建一个 CSS 文件,命名为 `组件名.css`。例如:`pcm-chat-modal.css`。
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
:host {
|
|
57
|
+
display: block;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* 组件的其他样式 */
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 4. 创建测试文件
|
|
64
|
+
|
|
65
|
+
为组件创建单元测试和端到端测试文件:
|
|
66
|
+
|
|
67
|
+
- 单元测试:`组件名.spec.ts`(例如:`pcm-chat-modal.spec.ts`)
|
|
68
|
+
- 端到端测试:`组件名.e2e.ts`(例如:`pcm-chat-modal.e2e.ts`)
|
|
69
|
+
|
|
70
|
+
### 5. 创建自述文件(可选)
|
|
71
|
+
|
|
72
|
+
创建一个 `readme.md` 文件,描述组件的用法和属性。Stencil 会自动更新这个文件中的属性表格。
|
|
73
|
+
|
|
74
|
+
### 6. 构建和测试
|
|
75
|
+
|
|
76
|
+
运行以下命令来构建和测试你的组件:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npm run build
|
|
80
|
+
npm test
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 7. 在应用中使用
|
|
84
|
+
|
|
85
|
+
构建成功后,你可以在 HTML 中使用你的组件:
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<pcm-chat-modal src="path/to/image.jpg" alt="描述文本"></pcm-chat-modal>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### 8. 测试你的组件
|
|
92
|
+
|
|
93
|
+
要测试你的组件,可以按照以下步骤操作:
|
|
94
|
+
|
|
95
|
+
#### 8.1 在 index.html 中添加组件实例
|
|
96
|
+
|
|
97
|
+
修改 `src/index.html` 文件,添加你的组件实例:
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<!DOCTYPE html>
|
|
101
|
+
<html dir="ltr" lang="en">
|
|
102
|
+
<head>
|
|
103
|
+
<meta charset="utf-8">
|
|
104
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
|
|
105
|
+
<title>Stencil Component Starter</title>
|
|
106
|
+
|
|
107
|
+
<script type="module" src="/build/mycomponent.esm.js"></script>
|
|
108
|
+
<script nomodule src="/build/mycomponent.js"></script>
|
|
109
|
+
</head>
|
|
110
|
+
<body>
|
|
111
|
+
<!-- 添加你的组件实例,使用可访问的图片URL -->
|
|
112
|
+
<pcm-chat-modal
|
|
113
|
+
src="https://via.placeholder.com/150"
|
|
114
|
+
alt="客服图片"
|
|
115
|
+
width="80px"
|
|
116
|
+
height="80px">
|
|
117
|
+
</pcm-chat-modal>
|
|
118
|
+
|
|
119
|
+
<!-- 测试点击事件 -->
|
|
120
|
+
<script>
|
|
121
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
122
|
+
// 给组件一些时间来加载
|
|
123
|
+
const PcmChatModal = document.querySelector('pcm-chat-modal');
|
|
124
|
+
if (PcmChatModal) {
|
|
125
|
+
// 监听点击事件
|
|
126
|
+
PcmChatModal.addEventListener('PcmChatModalClick', function() {
|
|
127
|
+
alert('浮窗图片被点击了!');
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
</script>
|
|
132
|
+
</body>
|
|
133
|
+
</html>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
#### 8.2 确保组件类型定义已生成
|
|
137
|
+
|
|
138
|
+
如果你的组件没有显示,可能是因为 `components.d.ts` 文件中没有包含你的组件的类型定义。解决方法:
|
|
139
|
+
|
|
140
|
+
1. 运行构建命令重新生成类型定义:
|
|
141
|
+
```bash
|
|
142
|
+
npm run build
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
2. 如果问题仍然存在,检查 `src/components.d.ts` 文件,确保其中包含你的组件定义。它应该类似于:
|
|
146
|
+
```typescript
|
|
147
|
+
/* ... 其他导入 ... */
|
|
148
|
+
|
|
149
|
+
declare namespace Components {
|
|
150
|
+
/* ... 其他组件 ... */
|
|
151
|
+
|
|
152
|
+
interface PcmChatModal {
|
|
153
|
+
/**
|
|
154
|
+
* 图片的替代文本
|
|
155
|
+
*/
|
|
156
|
+
"alt": string;
|
|
157
|
+
/**
|
|
158
|
+
* 图片的高度
|
|
159
|
+
*/
|
|
160
|
+
"height": string;
|
|
161
|
+
/**
|
|
162
|
+
* 点击图片时的回调函数
|
|
163
|
+
*/
|
|
164
|
+
"onClick": () => void;
|
|
165
|
+
/**
|
|
166
|
+
* 图片的URL地址
|
|
167
|
+
*/
|
|
168
|
+
"src": string;
|
|
169
|
+
/**
|
|
170
|
+
* 图片的宽度
|
|
171
|
+
*/
|
|
172
|
+
"width": string;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* ... 其他声明 ... */
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
#### 8.3 启动开发服务器
|
|
180
|
+
|
|
181
|
+
运行开发服务器来查看你的组件:
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
npm start
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
这将启动一个本地开发服务器,通常在 `http://localhost:3333` 上。在浏览器中打开此地址,你应该能看到你的浮窗图片组件显示在页面的右下角。
|
|
188
|
+
|
|
189
|
+
#### 8.4 调试常见问题
|
|
190
|
+
|
|
191
|
+
如果组件没有正确显示:
|
|
192
|
+
|
|
193
|
+
1. 检查浏览器控制台是否有错误信息
|
|
194
|
+
2. 确认组件的 CSS 样式是否正确加载
|
|
195
|
+
3. 验证图片 URL 是否有效
|
|
196
|
+
4. 尝试添加一些临时样式来确认组件是否已渲染:
|
|
197
|
+
```html
|
|
198
|
+
<style>
|
|
199
|
+
pcm-chat-modal {
|
|
200
|
+
border: 2px solid red;
|
|
201
|
+
}
|
|
202
|
+
</style>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## 组件文件结构示例
|
|
206
|
+
|
|
207
|
+
以下是一个完整的组件文件结构示例:
|
|
208
|
+
|
|
209
|
+
```
|
|
210
|
+
src/components/pcm-chat-modal/
|
|
211
|
+
├── pcm-chat-modal.tsx # 组件主文件
|
|
212
|
+
├── pcm-chat-modal.css # 样式文件
|
|
213
|
+
├── pcm-chat-modal.spec.ts # 单元测试
|
|
214
|
+
├── pcm-chat-modal.e2e.ts # 端到端测试
|
|
215
|
+
└── readme.md # 组件文档
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
## 入门指南
|
|
219
|
+
|
|
220
|
+
运行:
|
|
221
|
+
|
|
222
|
+
```bash
|
|
223
|
+
npm install
|
|
224
|
+
npm start
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
要为生产环境构建组件,运行:
|
|
228
|
+
|
|
229
|
+
```bash
|
|
230
|
+
npm run build
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
要运行组件的单元测试,运行:
|
|
234
|
+
|
|
235
|
+
```bash
|
|
236
|
+
npm test
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
需要帮助?请查看我们的文档 [这里](https://stenciljs.com/docs/my-first-component)。
|
|
240
|
+
|
|
241
|
+
## 命名组件
|
|
242
|
+
|
|
243
|
+
在创建新的组件标签时,我们建议_不要_在组件名称中使用 `stencil`(例如:` <stencil-datepicker> `)。这是因为生成的组件与 Stencil 几乎没有关系;它只是一个 Web 组件!
|
|
244
|
+
|
|
245
|
+
相反,使用适合您公司的前缀或相关组件组的任何名称。例如,所有 [Ionic 生成的](https://ionicframework.com/) Web 组件都使用前缀 `ion`。
|
|
246
|
+
|
|
247
|
+
## 使用此组件
|
|
248
|
+
|
|
249
|
+
我们推荐两种策略来使用用 Stencil 构建的 Web 组件。
|
|
250
|
+
|
|
251
|
+
这两种策略的第一步都是 [发布到 NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)。
|
|
252
|
+
|
|
253
|
+
您可以在 [Stencil 文档](https://stenciljs.com/docs/publishing) 中阅读有关这些不同方法的更多信息。
|
|
254
|
+
|
|
255
|
+
### 懒加载
|
|
256
|
+
|
|
257
|
+
如果您的 Stencil 项目是使用 [`dist`](https://stenciljs.com/docs/distribution) 输出目标构建的,您可以导入一个小型引导脚本,它会注册所有组件并允许您懒加载单个组件脚本。
|
|
258
|
+
|
|
259
|
+
例如,假设您的 Stencil 项目命名空间称为 `my-design-system`,要在任何网站上使用 `my-component`,请将此内容注入到您的 HTML 中:
|
|
260
|
+
|
|
261
|
+
```html
|
|
262
|
+
<script type="module" src="https://unpkg.com/my-design-system"></script>
|
|
263
|
+
<!--
|
|
264
|
+
为避免 unpkg.com 重定向到实际文件,您也可以直接导入:
|
|
265
|
+
https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
|
|
266
|
+
-->
|
|
267
|
+
<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
这将只加载渲染 `` 所需的必要脚本。一旦使用了此包的更多组件,它们将自动被懒加载。
|
|
271
|
+
|
|
272
|
+
您也可以在应用程序入口文件中将脚本作为 `node_modules` 的一部分导入:
|
|
273
|
+
|
|
274
|
+
```tsx
|
|
275
|
+
import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
查看此 [在线演示](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx)。
|
|
279
|
+
|
|
280
|
+
### 独立使用
|
|
281
|
+
|
|
282
|
+
如果您正在使用带有 `dist-custom-elements` 的 Stencil 组件库,我们建议在需要的文件中单独导入 Stencil 组件。
|
|
283
|
+
|
|
284
|
+
要将 Stencil 组件导出为独立组件,请确保您在 `stencil.config.ts` 中定义了 [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) 输出目标。
|
|
285
|
+
|
|
286
|
+
例如,假设您想将 `` 作为 React 组件的一部分使用,您可以通过以下方式直接导入组件:
|
|
287
|
+
|
|
288
|
+
```tsx
|
|
289
|
+
import 'foobar-design-system/my-component';
|
|
290
|
+
|
|
291
|
+
function App() {
|
|
292
|
+
return (
|
|
293
|
+
<>
|
|
294
|
+
<div>
|
|
295
|
+
<my-component
|
|
296
|
+
first="Stencil"
|
|
297
|
+
middle="'Don't call me a framework'"
|
|
298
|
+
last="JS"
|
|
299
|
+
></my-component>
|
|
300
|
+
</div>
|
|
301
|
+
</>
|
|
302
|
+
);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
export default App;
|
|
306
|
+
```
|
|
307
|
+
|
|
308
308
|
查看此 [在线演示](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx)。
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-BFPEnLbS.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\r\n * API域名配置\r\n */\r\n// export const API_DOMAIN = 'http://192.168.17.194:8000';\r\nexport const API_DOMAIN = 'https://pcm_api.ylzhaopin.com';\r\n\r\n\r\nexport function format(first?: string, middle?: string, last?: string): string {\r\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n\r\n// 添加类型定义\r\nexport interface UserInputMessageType {\r\n message: string;\r\n [key: string]: any;\r\n}\r\n\r\nexport interface WorkFlowNode {\r\n message_id?: string;\r\n conversation_id?: string;\r\n created_at?: string;\r\n event?: string;\r\n answer?: string;\r\n data?: {\r\n outputs?: {\r\n answer?: string;\r\n };\r\n status?: string;\r\n error?: any;\r\n };\r\n}\r\n\r\nexport interface MessageRound extends UserInputMessageType {\r\n id?: string;\r\n conversation_id?: string;\r\n created_at?: string;\r\n answer?: string;\r\n status?: string;\r\n error?: any;\r\n}\r\n\r\n/**\r\n * 将工作流节点转换为消息轮次\r\n * @param message_event 消息事件类型\r\n * @param inputMessage 用户输入消息\r\n * @param streamNode 工作流节点\r\n * @returns 消息轮次\r\n */\r\nexport const convertWorkflowStreamNodeToMessageRound = (\r\n message_event: string,\r\n inputMessage: UserInputMessageType,\r\n streamNode: WorkFlowNode,\r\n): MessageRound => {\r\n const messageRound: MessageRound = {\r\n ...inputMessage,\r\n };\r\n if (message_event === 'workflow_finished') messageRound.answer = streamNode.data?.outputs?.answer;\r\n if (message_event === 'agent_message' || message_event === 'message') messageRound.answer = streamNode?.answer;\r\n messageRound.id = streamNode.message_id;\r\n messageRound.conversation_id = streamNode.conversation_id;\r\n messageRound.created_at = streamNode.created_at;\r\n messageRound.status = streamNode.data?.status;\r\n messageRound.error = streamNode.data?.error;\r\n return messageRound;\r\n};\r\n\r\n/**\r\n * SSE 流式请求配置接口\r\n */\r\nexport interface SSERequestConfig {\r\n url: string;\r\n method: string;\r\n headers?: Record<string, string>;\r\n data?: any;\r\n onMessage?: (data: any) => void;\r\n onError?: (error: any) => void;\r\n onComplete?: () => void;\r\n}\r\n\r\n/**\r\n * 发送 SSE 流式请求\r\n * @param config 请求配置\r\n * @returns Promise<void>\r\n */\r\nexport const sendSSERequest = async (config: SSERequestConfig): Promise<void> => {\r\n const { url, method, headers = {}, data, onMessage, onError, onComplete } = config;\r\n \r\n try {\r\n // 使用 API_DOMAIN 拼接完整的请求URL\r\n const requestUrl = `${API_DOMAIN}${url}`;\r\n \r\n const response = await fetch(requestUrl, {\r\n method,\r\n headers: {\r\n 'Accept': 'text/event-stream',\r\n 'Content-Type': 'application/json',\r\n ...headers\r\n },\r\n body: data ? JSON.stringify(data) : undefined\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`HTTP error! status: ${response.status}`);\r\n }\r\n\r\n const reader = response.body?.getReader();\r\n if (!reader) throw new Error('No reader available');\r\n \r\n const decoder = new TextDecoder();\r\n let buffer = '';\r\n\r\n while (true) {\r\n const { value, done } = await reader.read();\r\n if (done) break;\r\n\r\n buffer += decoder.decode(value, { stream: true });\r\n\r\n // 处理缓冲区中的完整消息\r\n const lines = buffer.split('\\n');\r\n buffer = lines.pop() || ''; // 保留最后一个不完整的行\r\n\r\n for (const line of lines) {\r\n if (line.startsWith('data:')) {\r\n try {\r\n const jsonStr = line.substring(5).trim();\r\n if (!jsonStr) continue;\r\n \r\n const data = JSON.parse(jsonStr);\r\n onMessage?.(data);\r\n } catch (e) {\r\n console.error('解析 SSE 数据错误:', e, '原始数据:', line);\r\n }\r\n }\r\n }\r\n }\r\n \r\n onComplete?.();\r\n } catch (error) {\r\n console.error('SSE 请求错误:', error);\r\n onError?.(error);\r\n }\r\n};\r\n\r\n/**\r\n * HTTP请求配置接口\r\n */\r\nexport interface HttpRequestConfig {\r\n url: string;\r\n method?: string;\r\n headers?: Record<string, string>;\r\n params?: Record<string, any>;\r\n data?: any;\r\n formData?: FormData; // 添加FormData支持\r\n onMessage?: (data: any) => void;\r\n onError?: (error: any) => void;\r\n onComplete?: () => void;\r\n}\r\n\r\n/**\r\n * 统一的API响应接口\r\n */\r\nexport interface ApiResponse<T = any> {\r\n code: number;\r\n message: string;\r\n data?: T;\r\n}\r\n\r\n/**\r\n * HTTP响应接口\r\n */\r\nexport interface HttpResponse<T = any> {\r\n success: boolean;\r\n data?: T;\r\n error?: any;\r\n message?: string;\r\n}\r\n\r\n/**\r\n * 发送HTTP请求\r\n * @param config 请求配置\r\n * @returns Promise<HttpResponse>\r\n */\r\nexport const sendHttpRequest = async <T = any>(config: HttpRequestConfig): Promise<HttpResponse<T>> => {\r\n const { url, method = 'GET', headers = {}, params = {}, data, formData, onMessage } = config;\r\n \r\n try {\r\n // 构建URL和查询参数\r\n const queryParams = new URLSearchParams();\r\n Object.entries(params).forEach(([key, value]) => {\r\n if (value !== undefined && value !== null) {\r\n queryParams.append(key, String(value));\r\n }\r\n });\r\n \r\n // 使用 API_DOMAIN 拼接完整的请求URL\r\n let requestUrl = `${API_DOMAIN}${url}${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;\r\n \r\n // 创建请求配置对象\r\n const requestConfig: RequestInit = {\r\n method,\r\n headers: formData ? { ...headers } : {\r\n 'Content-Type': 'application/json',\r\n ...headers\r\n }\r\n };\r\n\r\n // 处理请求体\r\n if (formData) {\r\n // 如果提供了FormData,直接使用\r\n requestConfig.body = formData;\r\n } else if (method !== 'GET' && method !== 'HEAD' && data) {\r\n // 否则,如果是非GET/HEAD请求且有data,将其JSON序列化\r\n requestConfig.body = JSON.stringify(data);\r\n }\r\n\r\n // 如果是 GET 方法且有 data,将其作为查询参数添加到 URL\r\n if (method === 'GET' && data) {\r\n const dataParams = new URLSearchParams();\r\n Object.entries(data).forEach(([key, value]) => {\r\n if (value !== undefined && value !== null) {\r\n dataParams.append(key, String(value));\r\n }\r\n });\r\n requestUrl += (queryParams.toString() ? '&' : '?') + dataParams.toString();\r\n }\r\n\r\n const response = await fetch(requestUrl, requestConfig);\r\n const responseData: ApiResponse<T> = await response.json();\r\n \r\n // 调用 onMessage 回调\r\n if (onMessage) {\r\n onMessage(responseData);\r\n }\r\n \r\n // 检查响应状态\r\n if (!response.ok) {\r\n console.error(`HTTP错误: ${response.status} ${response.statusText}`);\r\n return {\r\n success: false,\r\n message: responseData.message || `HTTP错误: ${response.status}`,\r\n error: responseData\r\n };\r\n }\r\n \r\n // 检查业务状态码\r\n if (responseData.code !== 0) {\r\n console.error(`API错误: ${responseData.message}`);\r\n return {\r\n success: false,\r\n message: responseData.message,\r\n error: responseData\r\n };\r\n }\r\n \r\n // 直接返回data\r\n return {\r\n success: true,\r\n data: responseData.data\r\n };\r\n } catch (error) {\r\n console.error('HTTP请求错误:', error);\r\n if (config.onError) {\r\n config.onError(error);\r\n }\r\n return {\r\n success: false,\r\n error,\r\n message: error instanceof Error ? error.message : '未知错误'\r\n };\r\n } finally {\r\n if (config.onComplete) {\r\n config.onComplete();\r\n }\r\n }\r\n};\r\n\r\n\r\n\r\n/**\r\n * 文件上传响应数据接口\r\n */\r\nexport interface FileUploadResponse {\r\n /** 文件在对象存储中的唯一标识符 */\r\n cos_key: string;\r\n /** 文件名称 */\r\n file_name: string;\r\n /** 文件大小(带单位的字符串,如 \"1.5MB\") */\r\n file_size: string;\r\n /** 文件的预签名URL */\r\n presigned_url: string;\r\n /** 文件扩展名 */\r\n ext: string;\r\n}\r\n\r\n/**\r\n * 通过后端API上传文件\r\n * @param file 要上传的文件\r\n * @param headers 可选的请求头\r\n * @returns Promise 包含上传结果\r\n */\r\nexport const uploadFileToBackend = async (\r\n file: File,\r\n headers?: Record<string, string>\r\n): Promise<FileUploadResponse> => {\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n \r\n try {\r\n const response = await sendHttpRequest<{cos_key: string, file_name: string, file_size: string,presigned_url: string, ext: string}>({\r\n url: '/sdk/v1/files/upload',\r\n method: 'POST',\r\n headers: {\r\n ...headers\r\n },\r\n formData\r\n });\r\n \r\n if (!response.success || !response.data) {\r\n throw new Error(response.message || '文件上传失败');\r\n }\r\n \r\n return response.data;\r\n } catch (error) {\r\n console.error('文件上传错误:', error);\r\n throw error;\r\n }\r\n};\r\n"],"names":[],"mappings":"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"}
|