@pisell/materials 6.0.16 → 6.0.17

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 (40) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +2 -2
  6. package/build/lowcode/preview.js +13 -21
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +21 -35
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +21 -35
  11. package/dist/umd/materials.min.css +1 -0
  12. package/dist/umd/materials.min.js +1 -0
  13. package/dist/umd/static/DotsSix.57d66266.svg +1 -0
  14. package/dist/umd/static/arrow-left.e542294f.svg +1 -0
  15. package/dist/umd/static/arrow-right.763f03e0.svg +1 -0
  16. package/dist/umd/static/filter-lines.04a54ae9.svg +1 -0
  17. package/dist/umd/static/help-circle.31c9be40.svg +1 -0
  18. package/dist/umd/static/switch-vertical-01.7ebe3ba8.svg +1 -0
  19. package/es/components/Pagination/index.d.ts +1 -1
  20. package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +3 -3
  21. package/es/components/dataSourceComponents/fields/Input/WithMode.d.ts +1 -0
  22. package/es/components/dataSourceComponents/fields/Input/WithMode.js +605 -5
  23. package/es/components/dataSourceComponents/fields/Input/WithMode.less +96 -0
  24. package/es/components/dataSourceComponents/fields/Input/type.d.ts +1 -0
  25. package/es/components/dataSourceComponents/fields/index.d.ts +1 -1
  26. package/es/components/iconfont/index.d.ts +1 -0
  27. package/es/components/iconfont/index.js +1 -1
  28. package/lib/components/Pagination/index.d.ts +1 -1
  29. package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +3 -3
  30. package/lib/components/dataSourceComponents/fields/Input/WithMode.d.ts +1 -0
  31. package/lib/components/dataSourceComponents/fields/Input/WithMode.js +383 -1
  32. package/lib/components/dataSourceComponents/fields/Input/WithMode.less +96 -0
  33. package/lib/components/dataSourceComponents/fields/Input/type.d.ts +1 -0
  34. package/lib/components/dataSourceComponents/fields/index.d.ts +1 -1
  35. package/lib/components/iconfont/index.d.ts +1 -0
  36. package/lib/components/iconfont/index.js +1 -1
  37. package/lowcode/_utils/defaultSchema.ts +18 -0
  38. package/lowcode/form-item-input/meta.ts +1 -0
  39. package/lowcode/form-item-input/snippets.ts +1 -0
  40. package/package.json +3 -3
@@ -0,0 +1,96 @@
1
+ /* 扫描线动画 */
2
+ @keyframes scanAnimation {
3
+ 0% {
4
+ top: calc(50% - 100px);
5
+ }
6
+ 50% {
7
+ top: calc(50% + 100px);
8
+ }
9
+ 100% {
10
+ top: calc(50% - 100px);
11
+ }
12
+ }
13
+
14
+ /* 扫描全屏容器 */
15
+ .pisell-scan-fullscreen {
16
+ position: fixed ;
17
+ top: 0 ;
18
+ left: 0 ;
19
+ width: 100vw ;
20
+ height: 100vh ;
21
+ background-color: #000 ;
22
+ z-index: 9999 ;
23
+ overflow: hidden ;
24
+ }
25
+
26
+ /* 视频元素 */
27
+ .scan-video {
28
+ width: 100% ;
29
+ height: 100% ;
30
+ object-fit: cover ;
31
+ object-position: center ;
32
+ }
33
+ .pisell-lowcode-input-group-addon{
34
+ background-color: var(--Primary-600, #7F56D9);
35
+ }
36
+ /* 扫码按钮 */
37
+ .scan-button {
38
+ color: #722ED1;
39
+ font-size: 18px;
40
+ cursor: pointer;
41
+ display: flex;
42
+ align-items: center;
43
+ }
44
+
45
+ /* 关闭按钮 - 左上角 */
46
+ .scan-close-left {
47
+ position: fixed ;
48
+ top: 15px ;
49
+ left: 15px ;
50
+ z-index: 9999 ;
51
+ font-size: 24px ;
52
+ color: #fff ;
53
+ cursor: pointer ;
54
+ background-color: rgba(255, 255, 255, 0.15) ;
55
+ width: 40px ;
56
+ height: 40px ;
57
+ display: flex ;
58
+ align-items: center ;
59
+ justify-content: center ;
60
+ border-radius: 50% ;
61
+ }
62
+
63
+ /* 上传按钮 - 右下角 */
64
+ .scan-upload {
65
+ position: fixed ;
66
+ right: 20px ;
67
+ bottom: 30px ;
68
+ width: 50px ;
69
+ height: 50px ;
70
+ display: flex ;
71
+ align-items: center ;
72
+ justify-content: center ;
73
+ z-index: 9999 ;
74
+ font-size: 24px ;
75
+ color: #fff ;
76
+ background-color: rgba(255, 255, 255, 0.15) ;
77
+ border-radius: 50% ;
78
+ cursor: pointer ;
79
+ }
80
+
81
+ /* 隐藏的文件输入框 */
82
+ .scan-file-input {
83
+ display: none;
84
+ }
85
+
86
+ /* iconfont通用样式 */
87
+ .scan-icon {
88
+ font-size: 24px;
89
+ color: #fff;
90
+ }
91
+
92
+ /* 扫码按钮的扫码图标 */
93
+ .scan-button-icon {
94
+ font-size: 24px;
95
+ color: #722ED1;
96
+ }
@@ -4,4 +4,5 @@ import { ModeType } from "../../dataSourceForm/type";
4
4
  export interface InputProps extends AntInputProps {
5
5
  renderMode: ModeType;
6
6
  innerRef: Ref<any>;
7
+ enableQRScanner?: boolean;
7
8
  }
@@ -60,7 +60,7 @@ declare const formFieldMap: {
60
60
  FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
61
61
  FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
62
62
  };
63
- declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
63
+ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<any> | (import("react").FC<{}> & {
64
64
  Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
65
65
  } & {
66
66
  Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -2,6 +2,7 @@ import { IconComponentProps } from '@ant-design/icons/es/components/Icon';
2
2
  import React from 'react';
3
3
  interface IconFontProps extends IconComponentProps {
4
4
  type: string;
5
+ onClick?: React.MouseEventHandler<HTMLSpanElement>;
5
6
  }
6
7
  declare const IconFont: React.FC<IconFontProps>;
7
8
  export default IconFont;
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import { createFromIconfontCN } from '@ant-design/icons';
3
3
  import React from 'react';
4
4
  var MyIcon = createFromIconfontCN({
5
- scriptUrl: 'https://static.pisellcdn.com/pisell2/iconfont_1.0.js' // 在 iconfont.cn 上生成
5
+ scriptUrl: 'https://static.pisellcdn.com/pisell2iconfont1.3.js' // 在 iconfont.cn 上生成
6
6
  });
7
7
 
8
8
  var IconFont = function IconFont(props) {
@@ -5,7 +5,7 @@ export declare const paginationConfig: {
5
5
  className: string;
6
6
  defaultCurrent: number;
7
7
  showTotal: (total: number, range: [number, number]) => string;
8
- itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
8
+ itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
9
9
  responsive: boolean;
10
10
  size: string;
11
11
  };
@@ -17,7 +17,7 @@ interface UseTablePropsProps {
17
17
  * @returns
18
18
  */
19
19
  declare const useTableProps: (props: UseTablePropsProps) => {
20
- title: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
20
+ title: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
21
21
  pagination: {
22
22
  total: number;
23
23
  current: number;
@@ -26,7 +26,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
26
26
  showSizeChanger: boolean;
27
27
  };
28
28
  columns: import("./useColumns").Column[];
29
- subTitle: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
29
+ subTitle: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
30
30
  buttons: any[] | null;
31
31
  filter: React.JSX.Element | null;
32
32
  onRow: (record: any) => any;
@@ -52,7 +52,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
52
52
  width: number;
53
53
  align: "center" | "left" | "right";
54
54
  fixed: false | "left" | "right";
55
- type: "link" | "button";
55
+ type: "button" | "link";
56
56
  items: OperationItem[];
57
57
  } | undefined;
58
58
  operationContent?: {
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
2
  import { InputProps } from './type';
3
+ import './WithMode.less';
3
4
  declare const InputWithMode: React.FC<InputProps & import("../../dataSourceForm/utils").WithModeProps>;
4
5
  export default InputWithMode;
@@ -34,10 +34,392 @@ __export(WithMode_exports, {
34
34
  module.exports = __toCommonJS(WithMode_exports);
35
35
  var import_antd = require("antd");
36
36
  var import_react = __toESM(require("react"));
37
+ var import_library = require("@zxing/library");
38
+ var import_iconfont = __toESM(require("./../../../../components/iconfont"));
37
39
  var import_ReadPretty = __toESM(require("./ReadPretty"));
38
40
  var import_utils = require("../../dataSourceForm/utils");
41
+ var import_WithMode = require("./WithMode.less");
39
42
  var Input = (props) => {
40
- return /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { ...props, ref: props.innerRef || void 0 });
43
+ const { enableQRScanner, value: propValue, onChange, ...restProps } = props;
44
+ const [inputValue, setInputValue] = (0, import_react.useState)(propValue || "");
45
+ (0, import_react.useEffect)(() => {
46
+ if (propValue !== void 0 && propValue !== inputValue) {
47
+ setInputValue(propValue);
48
+ }
49
+ }, [propValue]);
50
+ const [scanVisible, setScanVisible] = (0, import_react.useState)(false);
51
+ const [uploading, setUploading] = (0, import_react.useState)(false);
52
+ const videoRef = (0, import_react.useRef)(null);
53
+ const fileInputRef = (0, import_react.useRef)(null);
54
+ const codeReaderRef = (0, import_react.useRef)(null);
55
+ const setValue = (value) => {
56
+ console.log("设置输入框值:", value);
57
+ setInputValue(value);
58
+ if (typeof onChange === "function") {
59
+ try {
60
+ const syntheticEvent = {
61
+ target: { value },
62
+ currentTarget: { value },
63
+ preventDefault: () => {
64
+ },
65
+ stopPropagation: () => {
66
+ }
67
+ };
68
+ onChange(syntheticEvent);
69
+ } catch (err) {
70
+ console.error("调用onChange失败:", err);
71
+ }
72
+ }
73
+ };
74
+ const handleInputChange = (e) => {
75
+ const newValue = e.target.value;
76
+ setInputValue(newValue);
77
+ if (typeof onChange === "function") {
78
+ onChange(e);
79
+ }
80
+ };
81
+ const handleScanClick = () => {
82
+ setScanVisible(true);
83
+ };
84
+ const handleScanClose = () => {
85
+ var _a;
86
+ setScanVisible(false);
87
+ (_a = codeReaderRef.current) == null ? void 0 : _a.reset();
88
+ if (videoRef.current && videoRef.current.srcObject) {
89
+ const stream = videoRef.current.srcObject;
90
+ const tracks = stream.getTracks();
91
+ tracks.forEach((track) => {
92
+ track.stop();
93
+ });
94
+ videoRef.current.srcObject = null;
95
+ }
96
+ };
97
+ (0, import_react.useEffect)(() => {
98
+ return () => {
99
+ var _a;
100
+ (_a = codeReaderRef.current) == null ? void 0 : _a.reset();
101
+ };
102
+ }, []);
103
+ const handleUploadClick = () => {
104
+ var _a;
105
+ (_a = fileInputRef.current) == null ? void 0 : _a.click();
106
+ };
107
+ const handleFileChange = async (event) => {
108
+ const files = event.target.files;
109
+ if (!files || files.length === 0)
110
+ return;
111
+ setUploading(true);
112
+ try {
113
+ const file = files[0];
114
+ if (!file.type.startsWith("image/")) {
115
+ import_antd.message.error("请上传图片文件");
116
+ setUploading(false);
117
+ return;
118
+ }
119
+ const reader = new FileReader();
120
+ reader.onload = async (e) => {
121
+ if (!e.target || !e.target.result)
122
+ return;
123
+ try {
124
+ const img = document.createElement("img");
125
+ img.style.position = "absolute";
126
+ img.style.top = "-9999px";
127
+ img.style.left = "-9999px";
128
+ const canvas = document.createElement("canvas");
129
+ canvas.style.position = "absolute";
130
+ canvas.style.top = "-9999px";
131
+ canvas.style.left = "-9999px";
132
+ document.body.appendChild(img);
133
+ document.body.appendChild(canvas);
134
+ await new Promise((resolve, reject) => {
135
+ var _a;
136
+ img.onload = resolve;
137
+ img.onerror = reject;
138
+ img.src = ((_a = e.target) == null ? void 0 : _a.result) || "";
139
+ });
140
+ try {
141
+ const hints = /* @__PURE__ */ new Map();
142
+ hints.set(2, true);
143
+ if (!codeReaderRef.current) {
144
+ codeReaderRef.current = new import_library.BrowserMultiFormatReader(hints, 500);
145
+ }
146
+ let result;
147
+ try {
148
+ result = await codeReaderRef.current.decodeFromImageElement(img);
149
+ } catch (directError) {
150
+ console.log("直接解码失败,尝试预处理图像...");
151
+ const width = img.naturalWidth || img.width;
152
+ const height = img.naturalHeight || img.height;
153
+ canvas.width = width;
154
+ canvas.height = height;
155
+ const ctx = canvas.getContext("2d");
156
+ if (!ctx)
157
+ throw new Error("无法创建Canvas上下文");
158
+ ctx.drawImage(img, 0, 0, width, height);
159
+ const imageData = ctx.getImageData(0, 0, width, height);
160
+ const data = imageData.data;
161
+ for (let i = 0; i < data.length; i += 4) {
162
+ data[i] = data[i] < 128 ? 0 : 255;
163
+ data[i + 1] = data[i + 1] < 128 ? 0 : 255;
164
+ data[i + 2] = data[i + 2] < 128 ? 0 : 255;
165
+ }
166
+ ctx.putImageData(imageData, 0, 0);
167
+ try {
168
+ const dataUrl = canvas.toDataURL("image/png");
169
+ const canvasImg = document.createElement("img");
170
+ document.body.appendChild(canvasImg);
171
+ await new Promise((resolve, reject) => {
172
+ canvasImg.onload = resolve;
173
+ canvasImg.onerror = reject;
174
+ canvasImg.src = dataUrl;
175
+ });
176
+ result = await codeReaderRef.current.decodeFromImageElement(canvasImg);
177
+ document.body.removeChild(canvasImg);
178
+ } catch (canvasError) {
179
+ console.log("Canvas增强解码失败,尝试最后方法...");
180
+ const newImg = document.createElement("img");
181
+ document.body.appendChild(newImg);
182
+ await new Promise((resolve, reject) => {
183
+ newImg.onload = resolve;
184
+ newImg.onerror = reject;
185
+ newImg.src = canvas.toDataURL("image/png");
186
+ });
187
+ result = await codeReaderRef.current.decodeFromImageElement(newImg);
188
+ document.body.removeChild(newImg);
189
+ }
190
+ }
191
+ if (result && result.getText) {
192
+ const text = result.getText();
193
+ setValue(text);
194
+ handleScanClose();
195
+ } else {
196
+ throw new Error("未能获取有效的二维码文本");
197
+ }
198
+ } catch (decodeError) {
199
+ console.error("二维码识别失败", decodeError);
200
+ import_antd.message.error("无法识别二维码,请上传清晰的二维码图片");
201
+ } finally {
202
+ if (document.body.contains(img)) {
203
+ document.body.removeChild(img);
204
+ }
205
+ if (document.body.contains(canvas)) {
206
+ document.body.removeChild(canvas);
207
+ }
208
+ }
209
+ } catch (imgError) {
210
+ console.error("图片加载失败", imgError);
211
+ import_antd.message.error("图片加载失败");
212
+ } finally {
213
+ setUploading(false);
214
+ if (fileInputRef.current) {
215
+ fileInputRef.current.value = "";
216
+ }
217
+ }
218
+ };
219
+ reader.onerror = () => {
220
+ import_antd.message.error("读取文件失败");
221
+ setUploading(false);
222
+ };
223
+ reader.readAsDataURL(file);
224
+ } catch (error) {
225
+ console.error("处理图片出错", error);
226
+ setUploading(false);
227
+ import_antd.message.error("处理图片时出错");
228
+ }
229
+ };
230
+ (0, import_react.useEffect)(() => {
231
+ if (scanVisible && videoRef.current) {
232
+ initCamera();
233
+ }
234
+ }, [scanVisible]);
235
+ const initCamera = async () => {
236
+ try {
237
+ if (codeReaderRef.current) {
238
+ try {
239
+ codeReaderRef.current.reset();
240
+ } catch (err) {
241
+ console.log("重置之前的实例出错", err);
242
+ }
243
+ }
244
+ codeReaderRef.current = new import_library.BrowserMultiFormatReader(void 0, 100);
245
+ console.log("创建二维码阅读器实例成功");
246
+ const constraints = {
247
+ video: {
248
+ facingMode: "environment"
249
+ }
250
+ };
251
+ console.log("正在请求摄像头权限...");
252
+ const stream = await navigator.mediaDevices.getUserMedia(constraints);
253
+ console.log("获取摄像头流成功");
254
+ if (videoRef.current) {
255
+ videoRef.current.srcObject = stream;
256
+ await new Promise((resolve) => {
257
+ if (!videoRef.current) {
258
+ resolve();
259
+ return;
260
+ }
261
+ videoRef.current.onloadedmetadata = () => {
262
+ if (!videoRef.current)
263
+ return;
264
+ console.log("视频元数据加载完成");
265
+ videoRef.current.play().then(() => {
266
+ console.log("视频开始播放成功");
267
+ resolve();
268
+ }).catch((err) => {
269
+ console.error("视频播放失败", err);
270
+ import_antd.message.error("摄像头播放失败");
271
+ resolve();
272
+ });
273
+ };
274
+ setTimeout(resolve, 3e3);
275
+ });
276
+ console.log("准备开始扫描...");
277
+ if (codeReaderRef.current && videoRef.current) {
278
+ try {
279
+ codeReaderRef.current.decodeFromVideoDevice(
280
+ null,
281
+ videoRef.current,
282
+ (result, error) => {
283
+ if (result) {
284
+ const text = result.getText();
285
+ console.log("扫描成功:", text);
286
+ try {
287
+ setValue(text);
288
+ setTimeout(() => handleScanClose(), 500);
289
+ } catch (e) {
290
+ console.error("设置值出错", e);
291
+ handleScanClose();
292
+ }
293
+ }
294
+ }
295
+ );
296
+ console.log("扫描器初始化完成,等待二维码...");
297
+ } catch (e) {
298
+ console.error("初始化扫描器失败", e);
299
+ import_antd.message.error("初始化二维码扫描失败");
300
+ handleScanClose();
301
+ }
302
+ }
303
+ } else {
304
+ throw new Error("视频元素不存在");
305
+ }
306
+ } catch (err) {
307
+ console.error("摄像头初始化错误", err);
308
+ import_antd.message.error("无法启动摄像头,请确保已授权");
309
+ handleScanClose();
310
+ }
311
+ };
312
+ const scanSuffix = enableQRScanner ? /* @__PURE__ */ import_react.default.createElement(
313
+ import_iconfont.default,
314
+ {
315
+ type: "pisell2-scan2",
316
+ className: "scan-button-icon",
317
+ style: { fontSize: 24, color: "#fff", cursor: "pointer" },
318
+ onClick: handleScanClick
319
+ }
320
+ ) : null;
321
+ const fullscreenStyle = {
322
+ position: "fixed",
323
+ top: 0,
324
+ left: 0,
325
+ width: "100vw",
326
+ height: "100vh",
327
+ backgroundColor: "#000",
328
+ zIndex: 9999,
329
+ overflow: "hidden",
330
+ display: "flex",
331
+ justifyContent: "center",
332
+ alignItems: "center"
333
+ };
334
+ const videoContainerStyle = {
335
+ position: "relative",
336
+ width: "100%",
337
+ height: "100%",
338
+ overflow: "hidden"
339
+ };
340
+ const videoStyle = {
341
+ width: "100%",
342
+ height: "100%",
343
+ objectFit: "cover"
344
+ };
345
+ const closeButtonStyle = {
346
+ position: "fixed",
347
+ top: 20,
348
+ left: 20,
349
+ zIndex: 9999,
350
+ fontSize: 24,
351
+ color: "#fff",
352
+ cursor: "pointer",
353
+ backgroundColor: "rgba(255, 255, 255, 0.15)",
354
+ width: 44,
355
+ height: 44,
356
+ display: "flex",
357
+ alignItems: "center",
358
+ justifyContent: "center",
359
+ borderRadius: "50%"
360
+ };
361
+ const uploadButtonStyle = {
362
+ position: "fixed",
363
+ right: 30,
364
+ bottom: 60,
365
+ width: 88,
366
+ height: 88,
367
+ display: "flex",
368
+ alignItems: "center",
369
+ justifyContent: "center",
370
+ zIndex: 9999,
371
+ fontSize: 48,
372
+ color: "#fff",
373
+ backgroundColor: "rgba(255, 255, 255, 0.15)",
374
+ borderRadius: "50%",
375
+ cursor: "pointer"
376
+ };
377
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
378
+ import_antd.Input,
379
+ {
380
+ ...restProps,
381
+ ref: props.innerRef || void 0,
382
+ addonAfter: scanSuffix,
383
+ value: inputValue,
384
+ onChange: handleInputChange
385
+ }
386
+ ), scanVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-scan-fullscreen", style: fullscreenStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: videoContainerStyle }, /* @__PURE__ */ import_react.default.createElement(
387
+ "video",
388
+ {
389
+ ref: videoRef,
390
+ className: "scan-video",
391
+ style: videoStyle,
392
+ autoPlay: true,
393
+ playsInline: true,
394
+ muted: true
395
+ }
396
+ )), /* @__PURE__ */ import_react.default.createElement(
397
+ import_iconfont.default,
398
+ {
399
+ type: "pisell2-arrow-left",
400
+ className: "scan-close-left",
401
+ style: closeButtonStyle,
402
+ onClick: handleScanClose
403
+ }
404
+ ), /* @__PURE__ */ import_react.default.createElement(
405
+ import_iconfont.default,
406
+ {
407
+ type: "pisell2-image-01",
408
+ className: "scan-upload",
409
+ style: uploadButtonStyle,
410
+ onClick: handleUploadClick
411
+ }
412
+ ), /* @__PURE__ */ import_react.default.createElement(
413
+ "input",
414
+ {
415
+ type: "file",
416
+ ref: fileInputRef,
417
+ onChange: handleFileChange,
418
+ accept: "image/*",
419
+ className: "scan-file-input",
420
+ style: { display: "none" }
421
+ }
422
+ )));
41
423
  };
42
424
  var InputWithMode = (0, import_utils.withMode)(Input, import_ReadPretty.default);
43
425
  var WithMode_default = InputWithMode;
@@ -0,0 +1,96 @@
1
+ /* 扫描线动画 */
2
+ @keyframes scanAnimation {
3
+ 0% {
4
+ top: calc(50% - 100px);
5
+ }
6
+ 50% {
7
+ top: calc(50% + 100px);
8
+ }
9
+ 100% {
10
+ top: calc(50% - 100px);
11
+ }
12
+ }
13
+
14
+ /* 扫描全屏容器 */
15
+ .pisell-scan-fullscreen {
16
+ position: fixed ;
17
+ top: 0 ;
18
+ left: 0 ;
19
+ width: 100vw ;
20
+ height: 100vh ;
21
+ background-color: #000 ;
22
+ z-index: 9999 ;
23
+ overflow: hidden ;
24
+ }
25
+
26
+ /* 视频元素 */
27
+ .scan-video {
28
+ width: 100% ;
29
+ height: 100% ;
30
+ object-fit: cover ;
31
+ object-position: center ;
32
+ }
33
+ .pisell-lowcode-input-group-addon{
34
+ background-color: var(--Primary-600, #7F56D9);
35
+ }
36
+ /* 扫码按钮 */
37
+ .scan-button {
38
+ color: #722ED1;
39
+ font-size: 18px;
40
+ cursor: pointer;
41
+ display: flex;
42
+ align-items: center;
43
+ }
44
+
45
+ /* 关闭按钮 - 左上角 */
46
+ .scan-close-left {
47
+ position: fixed ;
48
+ top: 15px ;
49
+ left: 15px ;
50
+ z-index: 9999 ;
51
+ font-size: 24px ;
52
+ color: #fff ;
53
+ cursor: pointer ;
54
+ background-color: rgba(255, 255, 255, 0.15) ;
55
+ width: 40px ;
56
+ height: 40px ;
57
+ display: flex ;
58
+ align-items: center ;
59
+ justify-content: center ;
60
+ border-radius: 50% ;
61
+ }
62
+
63
+ /* 上传按钮 - 右下角 */
64
+ .scan-upload {
65
+ position: fixed ;
66
+ right: 20px ;
67
+ bottom: 30px ;
68
+ width: 50px ;
69
+ height: 50px ;
70
+ display: flex ;
71
+ align-items: center ;
72
+ justify-content: center ;
73
+ z-index: 9999 ;
74
+ font-size: 24px ;
75
+ color: #fff ;
76
+ background-color: rgba(255, 255, 255, 0.15) ;
77
+ border-radius: 50% ;
78
+ cursor: pointer ;
79
+ }
80
+
81
+ /* 隐藏的文件输入框 */
82
+ .scan-file-input {
83
+ display: none;
84
+ }
85
+
86
+ /* iconfont通用样式 */
87
+ .scan-icon {
88
+ font-size: 24px;
89
+ color: #fff;
90
+ }
91
+
92
+ /* 扫码按钮的扫码图标 */
93
+ .scan-button-icon {
94
+ font-size: 24px;
95
+ color: #722ED1;
96
+ }
@@ -4,4 +4,5 @@ import { ModeType } from "../../dataSourceForm/type";
4
4
  export interface InputProps extends AntInputProps {
5
5
  renderMode: ModeType;
6
6
  innerRef: Ref<any>;
7
+ enableQRScanner?: boolean;
7
8
  }
@@ -60,7 +60,7 @@ declare const formFieldMap: {
60
60
  FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
61
61
  FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
62
62
  };
63
- declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
63
+ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<any> | (import("react").FC<{}> & {
64
64
  Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
65
65
  } & {
66
66
  Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -2,6 +2,7 @@ import { IconComponentProps } from '@ant-design/icons/es/components/Icon';
2
2
  import React from 'react';
3
3
  interface IconFontProps extends IconComponentProps {
4
4
  type: string;
5
+ onClick?: React.MouseEventHandler<HTMLSpanElement>;
5
6
  }
6
7
  declare const IconFont: React.FC<IconFontProps>;
7
8
  export default IconFont;