@pisell/materials 6.0.17 → 6.0.19

package/lib/components/pisellQRScanner/index.less

@@ -0,0 +1,71 @@
+/* 全屏扫码容器 */
+.pisell-qr-scanner-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  z-index: 9999;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 视频容器 */
+.scan-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 视频元素 */
+.scan-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 关闭按钮 */
+.scan-close-left {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 10000;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.15);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+/* 上传按钮 */
+.scan-upload {
+  position: fixed;
+  right: 30px;
+  bottom: 60px;
+  width: 88px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  font-size: 48px;
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* 隐藏的文件输入框 */
+.scan-file-input {
+  display: none;
+} 

package/lib/index.d.ts

@@ -76,6 +76,8 @@ export { default as PisellLoading } from './components/pisellLoading';
 export { default as PisellMenu } from './components/pisellMenu';
 export type { PisellMenuProps } from './components/pisellMenu/types';
 export { default as PisellModal } from './components/pisellModal';
+export { default as PisellQRScanner } from './components/pisellQRScanner';
+export type { PisellQRScannerProps } from './components/pisellQRScanner';
 export { default as PisellRow } from './components/pisellRow';
 export { default as PisellScan } from './components/pisellScan';
 export { default as PisellStatisticList } from './components/pisellStatisticList';

package/lib/index.js

@@ -129,6 +129,7 @@ __export(src_exports, {
   PisellNavigationMenu: () => import_pisellNavigationMenu.default,
   PisellNumberKeyboard: () => import_Number.default,
   PisellPriceKeyboard: () => import_Amount.default,
+  PisellQRScanner: () => import_pisellQRScanner.default,
   PisellRow: () => import_pisellRow.default,
   PisellScan: () => import_pisellScan.default,
   PisellSider: () => import_sider.default,
@@ -264,6 +265,7 @@ var import_sider = __toESM(require("./components/pisellLayout/sider"));
 var import_pisellLoading = __toESM(require("./components/pisellLoading"));
 var import_pisellMenu = __toESM(require("./components/pisellMenu"));
 var import_pisellModal = __toESM(require("./components/pisellModal"));
+var import_pisellQRScanner = __toESM(require("./components/pisellQRScanner"));
 var import_pisellRow = __toESM(require("./components/pisellRow"));
 var import_pisellScan = __toESM(require("./components/pisellScan"));
 var import_pisellStatisticList = __toESM(require("./components/pisellStatisticList"));
@@ -407,6 +409,7 @@ var import_BaseTranslation = __toESM(require("./components/dataSourceComponents/
   PisellNavigationMenu,
   PisellNumberKeyboard,
   PisellPriceKeyboard,
+  PisellQRScanner,
   PisellRow,
   PisellScan,
   PisellSider,

package/lib/locales/en-US.d.ts

@@ -210,5 +210,18 @@ declare const _default: {
     'pisell-data-source-form-app-identifier-start-with-letter': string;
     'pisell-data-source-form-app-identifier-special-ends': string;
     'pisell-data-source-form-app-identifier-consecutive-special': string;
+    'pisell-group-permissions-rule-required': string;
+    'pisell-group-permissions-rule-limit': string;
+    'pisell-data-source-form-app-identifier-letters-only': string;
+    'pisell-data-source-form-app-identifier-alphanumeric': string;
+    "qrscanner-loading": string;
+    "qrscanner-success": string;
+    "qrscanner-success-qrcode": string;
+    "qrscanner-success-barcode": string;
+    "qrscanner-error-upload-image": string;
+    "qrscanner-error-load-failed": string;
+    "qrscanner-error-no-code": string;
+    "qrscanner-error-camera-init": string;
+    "qrscanner-error-process-image": string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -254,5 +254,23 @@ var en_US_default = {
   "pisell-data-source-form-app-identifier-pattern": "Can only contain lowercase letters, numbers, hyphens, dots, and underscores",
   "pisell-data-source-form-app-identifier-start-with-letter": "Must start with a letter",
   "pisell-data-source-form-app-identifier-special-ends": "Cannot end with a hyphen, dot, or underscore",
-  "pisell-data-source-form-app-identifier-consecutive-special": "Cannot contain consecutive hyphens, dots, or underscores"
+  "pisell-data-source-form-app-identifier-consecutive-special": "Cannot contain consecutive hyphens, dots, or underscores",
+  // TODO(reilly): Added new properties to `zh-CN.ts`, so adding them here to avoid errors.
+  // Please update these translations as needed
+  "pisell-group-permissions-rule-required": "Required",
+  "pisell-group-permissions-rule-limit": "Maximum {{num}} characters",
+  "pisell-data-source-form-app-identifier-letters-only": "Must start with a letter",
+  "pisell-data-source-form-app-identifier-alphanumeric": "Can only contain letters, numbers, hyphens, dots, and underscores",
+  "pisell-data-source-form-app-identifier-special-ends": "Cannot end with a hyphen, dot, or underscore",
+  "pisell-data-source-form-app-identifier-consecutive-special": "Cannot contain consecutive hyphens, dots, or underscores",
+  // QR Scanner related texts
+  "qrscanner-loading": "Recognizing QR code...",
+  "qrscanner-success": "Successfully recognized: ",
+  "qrscanner-success-qrcode": "QR code successfully recognized: ",
+  "qrscanner-success-barcode": "Barcode successfully recognized: ",
+  "qrscanner-error-upload-image": "Please upload an image file",
+  "qrscanner-error-load-failed": "Failed to read file",
+  "qrscanner-error-no-code": "No QR code or barcode detected.",
+  "qrscanner-error-camera-init": "Cannot start camera. Please make sure it's authorized.",
+  "qrscanner-error-process-image": "Error processing image"
 };

package/lib/locales/zh-CN.d.ts

@@ -209,5 +209,14 @@ declare const _default: {
     'pisell-data-source-form-app-identifier-start-with-letter': string;
     'pisell-data-source-form-app-identifier-special-ends': string;
     'pisell-data-source-form-app-identifier-consecutive-special': string;
+    "qrscanner-loading": string;
+    "qrscanner-success": string;
+    "qrscanner-success-qrcode": string;
+    "qrscanner-success-barcode": string;
+    "qrscanner-error-upload-image": string;
+    "qrscanner-error-load-failed": string;
+    "qrscanner-error-no-code": string;
+    "qrscanner-error-camera-init": string;
+    "qrscanner-error-process-image": string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -251,5 +251,15 @@ var zh_CN_default = {
   "pisell-data-source-form-app-identifier-pattern": "只能包含小写字母、数字、连字符、点和下划线",
   "pisell-data-source-form-app-identifier-start-with-letter": "必须以字母开头",
   "pisell-data-source-form-app-identifier-special-ends": "不能以连字符、点或下划线结尾",
-  "pisell-data-source-form-app-identifier-consecutive-special": "不能包含连续的连字符、点或下划线"
+  "pisell-data-source-form-app-identifier-consecutive-special": "不能包含连续的连字符、点或下划线",
+  // QR Scanner 相关文案
+  "qrscanner-loading": "正在识别二维码...",
+  "qrscanner-success": "识别成功: ",
+  "qrscanner-success-qrcode": "二维码识别成功: ",
+  "qrscanner-success-barcode": "条形码识别成功: ",
+  "qrscanner-error-upload-image": "请上传图片文件",
+  "qrscanner-error-load-failed": "读取文件失败",
+  "qrscanner-error-no-code": "未检测到二维码或条形码",
+  "qrscanner-error-camera-init": "无法启动摄像头，请确保已授权",
+  "qrscanner-error-process-image": "处理图像时出错"
 };

package/lib/locales/zh-TW.d.ts

@@ -209,5 +209,14 @@ declare const _default: {
     'pisell-data-source-form-app-identifier-start-with-letter': string;
     'pisell-data-source-form-app-identifier-special-ends': string;
     'pisell-data-source-form-app-identifier-consecutive-special': string;
+    "qrscanner-loading": string;
+    "qrscanner-success": string;
+    "qrscanner-success-qrcode": string;
+    "qrscanner-success-barcode": string;
+    "qrscanner-error-upload-image": string;
+    "qrscanner-error-load-failed": string;
+    "qrscanner-error-no-code": string;
+    "qrscanner-error-camera-init": string;
+    "qrscanner-error-process-image": string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -253,5 +253,15 @@ var zh_TW_default = {
   "pisell-data-source-form-app-identifier-pattern": "只能包含小寫字母、數字、連字符、點和下劃線",
   "pisell-data-source-form-app-identifier-start-with-letter": "必須以字母開頭",
   "pisell-data-source-form-app-identifier-special-ends": "不能以連字符、點或下劃線結尾",
-  "pisell-data-source-form-app-identifier-consecutive-special": "不能包含連續的連字符、點或下劃線"
+  "pisell-data-source-form-app-identifier-consecutive-special": "不能包含連續的連字符、點或下劃線",
+  // QR Scanner 相關文案
+  "qrscanner-loading": "正在識別二維碼...",
+  "qrscanner-success": "識別成功: ",
+  "qrscanner-success-qrcode": "二維碼識別成功: ",
+  "qrscanner-success-barcode": "條形碼識別成功: ",
+  "qrscanner-error-upload-image": "請上傳圖片文件",
+  "qrscanner-error-load-failed": "讀取文件失敗",
+  "qrscanner-error-no-code": "未檢測到二維碼或條形碼",
+  "qrscanner-error-camera-init": "無法啟動攝像頭，請確保已授權",
+  "qrscanner-error-process-image": "處理圖像時出錯"
 };

package/lowcode/pisell-qrscanner/meta.ts

@@ -0,0 +1,86 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellQRScanner',
+  title: '二维码扫描器',
+  category: '数据录入',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellQRScanner',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: ''
+  },
+  props: [
+    {
+      name: 'visible',
+      title: { label: '是否可见', tip: '控制扫码界面是否可见' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'showUpload',
+      title: { label: '显示上传图片', tip: '是否显示上传图片按钮，默认开启' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'onClose',
+      title: { label: '关闭回调', tip: '扫码界面关闭时的回调函数' },
+      propType: 'func',
+      setter: {
+        componentName: 'FunctionSetter',
+        props: {
+          template: '() => {\n  // 处理关闭事件\n}',
+        },
+      },
+    },
+    {
+      name: 'onScan',
+      title: { label: '扫码成功回调', tip: '扫码成功时的回调函数，参数为扫描结果字符串' },
+      propType: 'func',
+      setter: {
+        componentName: 'FunctionSetter',
+        props: {
+          template: '(result) => {\n  // 处理扫描结果\n  console.log(\'扫描结果:\', result);\n}',
+        },
+      },
+    },
+    {
+      name: 'className',
+      title: { label: '类名', tip: '自定义类名' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'style',
+      title: { label: '样式', tip: '自定义样式' },
+      propType: 'object',
+      setter: 'StyleSetter'
+    }
+  ],
+  configure: {
+    component: {
+      isContainer: false
+    },
+    supports: {
+      style: true,
+      className: true
+    },
+    events: {
+      onScan: {
+        description: '扫码成功时触发',
+      },
+      onClose: {
+        description: '扫码界面关闭时触发',
+      }
+    }
+  }
+}; 

package/lowcode/pisell-qrscanner/snippets.ts

@@ -0,0 +1,25 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '二维码扫描器',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellQRScanner',
+      props: {
+        visible: false,
+        showUpload: true,
+        onClose: {
+          type: 'JSFunction',
+          value: '() => {\n  // 处理关闭事件\n}'
+        },
+        onScan: {
+          type: 'JSFunction',
+          value: '(result) => {\n  // 处理扫描结果\n  console.log(\'扫描结果:\', result);\n}'
+        }
+      }
+    }
+  }
+];
+
+export default snippets; 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.0.17",
+  "version": "6.0.19",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -67,9 +67,9 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.10",
     "styled-components": "^6.0.0-rc.3",
-    "@pisell/utils": "1.0.42",
+    "@pisell/icon": "0.0.11",
     "@pisell/date-picker": "1.0.100",
-    "@pisell/icon": "0.0.11"
+    "@pisell/utils": "1.0.42"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/es/components/dataSourceComponents/fields/Input/WithMode.less

@@ -1,96 +0,0 @@
-/* 扫描线动画 */
-@keyframes scanAnimation {
-  0% {
-    top: calc(50% - 100px);
-  }
-  50% {
-    top: calc(50% + 100px);
-  }
-  100% {
-    top: calc(50% - 100px);
-  }
-}
-
-/* 扫描全屏容器 */
-.pisell-scan-fullscreen {
-  position: fixed ;
-  top: 0 ;
-  left: 0 ;
-  width: 100vw ;
-  height: 100vh ;
-  background-color: #000 ;
-  z-index: 9999 ;
-  overflow: hidden ;
-}
-
-/* 视频元素 */
-.scan-video {
-  width: 100% ;
-  height: 100% ;
-  object-fit: cover ;
-  object-position: center ;
-}
-.pisell-lowcode-input-group-addon{
-    background-color: var(--Primary-600, #7F56D9);
-}
-/* 扫码按钮 */
-.scan-button {
-  color: #722ED1;
-  font-size: 18px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-/* 关闭按钮 - 左上角 */
-.scan-close-left {
-  position: fixed ;
-  top: 15px ;
-  left: 15px ;
-  z-index: 9999 ;
-  font-size: 24px ;
-  color: #fff ;
-  cursor: pointer ;
-  background-color: rgba(255, 255, 255, 0.15) ;
-  width: 40px ;
-  height: 40px ;
-  display: flex ;
-  align-items: center ;
-  justify-content: center ;
-  border-radius: 50% ;
-}
-
-/* 上传按钮 - 右下角 */
-.scan-upload {
-  position: fixed ;
-  right: 20px ;
-  bottom: 30px ;
-  width: 50px ;
-  height: 50px ;
-  display: flex ;
-  align-items: center ;
-  justify-content: center ;
-  z-index: 9999 ;
-  font-size: 24px ;
-  color: #fff ;
-  background-color: rgba(255, 255, 255, 0.15) ;
-  border-radius: 50% ;
-  cursor: pointer ;
-}
-
-/* 隐藏的文件输入框 */
-.scan-file-input {
-  display: none;
-}
-
-/* iconfont通用样式 */
-.scan-icon {
-  font-size: 24px;
-  color: #fff;
-}
-
-/* 扫码按钮的扫码图标 */
-.scan-button-icon {
-  font-size: 24px;
-  color: #722ED1;
-} 

package/lib/components/dataSourceComponents/fields/Input/WithMode.less

@@ -1,96 +0,0 @@
-/* 扫描线动画 */
-@keyframes scanAnimation {
-  0% {
-    top: calc(50% - 100px);
-  }
-  50% {
-    top: calc(50% + 100px);
-  }
-  100% {
-    top: calc(50% - 100px);
-  }
-}
-
-/* 扫描全屏容器 */
-.pisell-scan-fullscreen {
-  position: fixed ;
-  top: 0 ;
-  left: 0 ;
-  width: 100vw ;
-  height: 100vh ;
-  background-color: #000 ;
-  z-index: 9999 ;
-  overflow: hidden ;
-}
-
-/* 视频元素 */
-.scan-video {
-  width: 100% ;
-  height: 100% ;
-  object-fit: cover ;
-  object-position: center ;
-}
-.pisell-lowcode-input-group-addon{
-    background-color: var(--Primary-600, #7F56D9);
-}
-/* 扫码按钮 */
-.scan-button {
-  color: #722ED1;
-  font-size: 18px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-/* 关闭按钮 - 左上角 */
-.scan-close-left {
-  position: fixed ;
-  top: 15px ;
-  left: 15px ;
-  z-index: 9999 ;
-  font-size: 24px ;
-  color: #fff ;
-  cursor: pointer ;
-  background-color: rgba(255, 255, 255, 0.15) ;
-  width: 40px ;
-  height: 40px ;
-  display: flex ;
-  align-items: center ;
-  justify-content: center ;
-  border-radius: 50% ;
-}
-
-/* 上传按钮 - 右下角 */
-.scan-upload {
-  position: fixed ;
-  right: 20px ;
-  bottom: 30px ;
-  width: 50px ;
-  height: 50px ;
-  display: flex ;
-  align-items: center ;
-  justify-content: center ;
-  z-index: 9999 ;
-  font-size: 24px ;
-  color: #fff ;
-  background-color: rgba(255, 255, 255, 0.15) ;
-  border-radius: 50% ;
-  cursor: pointer ;
-}
-
-/* 隐藏的文件输入框 */
-.scan-file-input {
-  display: none;
-}
-
-/* iconfont通用样式 */
-.scan-icon {
-  font-size: 24px;
-  color: #fff;
-}
-
-/* 扫码按钮的扫码图标 */
-.scan-button-icon {
-  font-size: 24px;
-  color: #722ED1;
-}