ct-answer-designer 1.0.0

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 (16) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +285 -0
  3. package/dist/ct-answer-designer.es.js +3675 -0
  4. package/dist/ct-answer-designer.umd.js +30 -0
  5. package/dist/static/AuthingSSO.umd.min.js +1 -0
  6. package/dist/style.css +1 -0
  7. package/fcDesignerPro/dist/index.es.js +61523 -0
  8. package/fcDesignerPro/dist/index.umd.js +1568 -0
  9. package/fcDesignerPro/dist/pc/index.es.js +60130 -0
  10. package/fcDesignerPro/dist/pc/index.umd.js +1553 -0
  11. package/fcDesignerPro/dist/render/element-plus/form-create.es.js +16856 -0
  12. package/fcDesignerPro/dist/render/element-plus/form-create.umd.js +89 -0
  13. package/fcDesignerPro/dist/render/vant/form-create.es.js +17239 -0
  14. package/fcDesignerPro/dist/render/vant/form-create.umd.js +104 -0
  15. package/package.json +57 -0
  16. package/public/static/AuthingSSO.umd.min.js +1 -0
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
package/README.md ADDED
@@ -0,0 +1,285 @@
1
+ # ct-answer-designer
2
+
3
+ > Vue3 工单组件库，包含 PC 端和移动端工单组件
4
+
5
+ [![npm version](https://img.shields.io/npm/v/ct-answer-designer.svg)](https://www.npmjs.com/package/ct-answer-designer)
6
+ [![license](https://img.shields.io/npm/l/ct-answer-designer.svg)](https://github.com/your-username/ct-answer-designer/blob/main/LICENSE)
7
+
8
+ ## 版本
9
+
10
+ 当前版本：**1.0.0**
11
+
12
+ ## 安装
13
+
14
+ ### 方式 1：从 npm 安装（推荐）
15
+
16
+ ```bash
17
+ npm install ct-answer-designer
18
+ ```
19
+
20
+ ### 方式 2：本地开发引用
21
+
22
+ ```bash
23
+ npm install file:../ctAnswerDesigner
24
+ ```
25
+
26
+ ### 方式 3：直接使用 dist 文件
27
+
28
+ 将 `dist` 文件夹复制到你的项目中，然后直接引入。
29
+
30
+ ## 依赖要求
31
+
32
+ **必须安装以下 peer dependencies：**
33
+
34
+ ```bash
35
+ npm install vue@^3.3.0 \
36
+ axios@^1.6.0 \
37
+ element-plus@^2.4.0 \
38
+ vant@^4.9.21 \
39
+ @element-plus/icons-vue@^2.3.1 \
40
+ @form-create/element-ui@^3.2.27 \
41
+ @form-create/vant@^3.2.28 \
42
+ js-cookie@^3.0.5
43
+ ```
44
+
45
+ **或一次性安装所有依赖：**
46
+
47
+ ```json
48
+ {
49
+ "dependencies": {
50
+ "vue": "^3.3.0",
51
+ "axios": "^1.6.0",
52
+ "element-plus": "^2.4.0",
53
+ "vant": "^4.9.21",
54
+ "@element-plus/icons-vue": "^2.3.1",
55
+ "@form-create/element-ui": "^3.2.27",
56
+ "@form-create/vant": "^3.2.28",
57
+ "js-cookie": "^3.0.5",
58
+ "ct-answer-designer": "^1.0.0"
59
+ }
60
+ }
61
+ ```
62
+
63
+ ## 使用方法
64
+
65
+ ### 1. 引入静态资源（重要！）
66
+
67
+ #### 步骤 1：复制静态文件到 public 目录
68
+
69
+ ```bash
70
+ # 从 node_modules 复制 AuthingSSO 到你的 public 目录
71
+ cp -r node_modules/ct-answer-designer/public/static public/
72
+ ```
73
+
74
+ #### 步骤 2：在 HTML 中引入 Authing SSO SDK
75
+
76
+ ```html
77
+ <!DOCTYPE html>
78
+ <html lang="zh-CN">
79
+ <head>
80
+ <meta charset="UTF-8">
81
+ <title>工单系统</title>
82
+ <!-- 引入 Authing SSO SDK（SSO 登录必需） -->
83
+ <script src="/static/AuthingSSO.umd.min.js"></script>
84
+ </head>
85
+ <body>
86
+ <div id="app"></div>
87
+ </body>
88
+ </html>
89
+ ```
90
+
91
+ **重要说明：**
92
+ - ✅ `static/AuthingSSO.umd.min.js` 必须复制到 public 目录
93
+ - ✅ `fcDesignerPro` 文件不需要复制，直接从 node_modules 引用即可
94
+
95
+ ### 2. 完整引入
96
+
97
+ ```javascript
98
+ import { createApp } from 'vue'
99
+ import ElementPlus from 'element-plus'
100
+ import 'element-plus/dist/index.css'
101
+ import Vant from 'vant'
102
+ import 'vant/lib/index.css'
103
+
104
+ // 引入 form-create 相关（直接从 node_modules 引用）
105
+ import FcDesigner from 'ct-answer-designer/fcDesignerPro/dist/index.es.js'
106
+ import formCreateMobile from 'ct-answer-designer/fcDesignerPro/dist/render/vant/form-create.es.js'
107
+
108
+ // 引入组件库
109
+ import CtAnswerDesigner from 'ct-answer-designer'
110
+ import 'ct-answer-designer/dist/style.css'
111
+
112
+ const app = createApp(App)
113
+
114
+ // 注册 form-create（PC端 和 移动端）
115
+ app.use(FcDesigner)
116
+ app.use(FcDesigner.formCreate)
117
+ app.use(formCreateMobile)
118
+
119
+ // 注册 ElementPlus 和 Vant
120
+ app.use(ElementPlus)
121
+ app.use(Vant)
122
+
123
+ // 注册工单组件
124
+ app.use(CtAnswerDesigner)
125
+
126
+ app.mount('#app')
127
+ ```
128
+
129
+ **引用路径说明：**
130
+ - ✅ `ct-answer-designer/fcDesignerPro/dist/index.es.js` - PC端表单设计器
131
+ - ✅ `ct-answer-designer/fcDesignerPro/dist/render/vant/form-create.es.js` - 移动端表单（Vant）
132
+ - ✅ `ct-answer-designer/fcDesignerPro/dist/render/element-plus/form-create.es.js` - PC端表单（Element Plus）
133
+
134
+ ### 3. 按需引入组件
135
+
136
+ ```javascript
137
+ import { WorkOrderPc, WorkOrderMobile } from 'ct-answer-designer'
138
+ import 'ct-answer-designer/dist/style.css'
139
+
140
+ // 在组件中使用
141
+ export default {
142
+ components: {
143
+ WorkOrderPc,
144
+ WorkOrderMobile
145
+ }
146
+ }
147
+ ```
148
+
149
+ ### 4. 在模板中使用
150
+
151
+ #### PC 端工单组件
152
+
153
+ ```vue
154
+ <template>
155
+ <work-order-pc
156
+ :order-info="orderInfo"
157
+ @login-success="handleLoginSuccess"
158
+ @logout="handleLogout"
159
+ @submit-success="handleSubmitSuccess"
160
+ @submit-error="handleSubmitError"
161
+ />
162
+ </template>
163
+
164
+ <script setup>
165
+ import { ref } from 'vue'
166
+
167
+ const orderInfo = ref({
168
+ paperUuid: 'xxx-xxx-xxx', // 工单 UUID（必需）
169
+ testId: 'xxx', // 测试 ID（查看模式时需要）
170
+ result: '1' // 是否为查看模式（'1' 表示查看已提交的工单）
171
+ })
172
+
173
+ const handleLoginSuccess = (userInfo) => {
174
+ console.log('登录成功:', userInfo)
175
+ }
176
+
177
+ const handleLogout = () => {
178
+ console.log('已退出登录')
179
+ }
180
+
181
+ const handleSubmitSuccess = (data) => {
182
+ console.log('提交成功:', data)
183
+ }
184
+
185
+ const handleSubmitError = (error) => {
186
+ console.error('提交失败:', error)
187
+ }
188
+ </script>
189
+ ```
190
+
191
+ #### 移动端工单组件
192
+
193
+ ```vue
194
+ <template>
195
+ <work-order-mobile
196
+ :order-info="orderInfo"
197
+ @login-success="handleLoginSuccess"
198
+ @logout="handleLogout"
199
+ @submit-success="handleSubmitSuccess"
200
+ @submit-error="handleSubmitError"
201
+ />
202
+ </template>
203
+
204
+ <script setup>
205
+ import { ref } from 'vue'
206
+
207
+ const orderInfo = ref({
208
+ paperUuid: 'xxx-xxx-xxx', // 工单 UUID（必需）
209
+ testId: 'xxx', // 测试 ID（查看模式时需要）
210
+ result: '1' // 是否为查看模式
211
+ })
212
+
213
+ // 事件处理方法同上...
214
+ </script>
215
+ ```
216
+
217
+ ## Props 参数说明
218
+
219
+ ### orderInfo
220
+
221
+ | 参数 | 说明 | 类型 | 必填 | 默认值 |
222
+ |------|------|------|------|--------|
223
+ | paperUuid | 工单 UUID | String | 是 | - |
224
+ | testId | 测试 ID（查看模式时需要） | String | 否 | - |
225
+ | result | 是否为查看模式（'1' 表示查看已提交） | String | 否 | - |
226
+
227
+ ## Events 事件说明
228
+
229
+ | 事件名 | 说明 | 回调参数 |
230
+ |--------|------|----------|
231
+ | login-success | 登录成功时触发 | userInfo: 用户信息对象 |
232
+ | logout | 退出登录时触发 | - |
233
+ | submit-success | 工单提交成功时触发 | data: { formData, response } |
234
+ | submit-error | 工单提交失败时触发 | error: 错误对象 |
235
+
236
+ ## 特性
237
+
238
+ - ✅ 支持 PC 端和移动端
239
+ - ✅ 内置 SSO 单点登录
240
+ - ✅ 支持动态表单（基于 form-create）
241
+ - ✅ 移动端支持图片查看和表单填写
242
+ - ✅ 美观的现代化 UI 设计
243
+ - ✅ 响应式布局
244
+ - ✅ 完整的 TypeScript 支持
245
+
246
+ ## 注意事项
247
+
248
+ 1. **引入 Authing SSO SDK**
249
+
250
+ 如果使用 SSO 登录，需要在 HTML 中引入 Authing SSO SDK：
251
+
252
+ ```html
253
+ <script src="/static/AuthingSSO.umd.min.js"></script>
254
+ ```
255
+
256
+ 2. **API 配置**
257
+
258
+ 组件内部使用 `src/utils/setting.js` 中的配置，请根据实际情况修改 API 地址。
259
+
260
+ 3. **依赖版本**
261
+
262
+ - Vue 3.3+
263
+ - Element Plus 2.4+
264
+ - Vant 4.9.21
265
+ - Axios 1.6+
266
+
267
+ ## 开发
268
+
269
+ ```bash
270
+ # 安装依赖
271
+ npm install
272
+
273
+ # 开发模式
274
+ npm run dev
275
+
276
+ # 构建
277
+ npm run build
278
+
279
+ # 预览
280
+ npm run preview
281
+ ```
282
+
283
+ ## License
284
+
285
+ MIT