@pisell/materials 1.8.38 → 1.8.41

package/lib/components/pisellImport/docs/pisellImport.md

@@ -0,0 +1,174 @@
+---
+nav:
+  title: 组件
+  order: 1
+group:
+  title: Data Entry
+  order: 1
+title: PisellImport
+order: 2
+category: atom
+---
+
+# PisellImport 导入按钮
+
+导入触发器组件，样式与 PisellExport 一致，支持「仅图标」与「图标+文案」两种形态、三种尺寸。点击后打开系统文件选择框，可选择文件并做大小校验，通过后通过 `onImport(files)` 回调将文件列表交给调用方处理上传或解析。
+
+## 何时使用
+
+- 批量导入 Excel/CSV 等文件
+- 与 PisellExport 搭配的导入导出能力
+- 需要限制文件类型、大小或多选的导入场景
+
+## 代码演示
+
+### 基础用法
+
+点击后打开文件选择，选择完成后在 `onImport` 中拿到 `File[]`，由调用方实现上传或解析。
+
+```tsx
+import React from 'react';
+import { PisellImport } from '@pisell/materials';
+
+export default () => {
+  return (
+    <PisellImport
+      onImport={(files) => {
+        console.log('已选文件', files);
+        // 调用方：上传、解析等
+      }}
+    />
+  );
+};
+```
+
+### 限制文件类型与大小
+
+通过 `accept` 限制可选类型，通过 `maxSize`（MB）限制单文件大小；超出时触发 `onError`。
+
+```tsx
+import React from 'react';
+import { PisellImport } from '@pisell/materials';
+import { message } from 'antd';
+
+export default () => {
+  return (
+    <PisellImport
+      accept=".xlsx,.xls,.csv"
+      maxSize={10}
+      onImport={(files) => {
+        message.success(`已选择 ${files.length} 个文件`);
+      }}
+      onError={({ message: msg }) => {
+        message.error(msg);
+      }}
+    />
+  );
+};
+```
+
+### 多选文件
+
+`multiple={true}` 时允许一次选择多个文件。
+
+```tsx
+import React from 'react';
+import { PisellImport } from '@pisell/materials';
+
+export default () => {
+  return (
+    <PisellImport
+      multiple
+      label="选择多个文件"
+      onImport={(files) => {
+        console.log('已选', files.length, '个文件', files.map((f) => f.name));
+      }}
+    />
+  );
+};
+```
+
+### 仅图标与不同尺寸
+
+与 PisellExport 相同，支持 `variant="icon"` 和 `size`。
+
+```tsx
+import React from 'react';
+import { PisellImport } from '@pisell/materials';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <PisellImport variant="icon" onImport={() => {}} />
+      <PisellImport size="small" onImport={() => {}} />
+      <PisellImport size="large" type="primary" onImport={() => {}} />
+    </div>
+  );
+};
+```
+
+### 与导出并排
+
+常与 PisellExport 一起使用。
+
+```tsx
+import React from 'react';
+import { PisellImport, PisellExport } from '@pisell/materials';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <PisellImport
+        accept=".xlsx,.csv"
+        maxSize={10}
+        onImport={(files) => console.log('导入', files)}
+        onError={({ message: msg }) => console.error(msg)}
+      />
+      <PisellExport onExport={() => console.log('导出')} />
+    </div>
+  );
+};
+```
+
+## API
+
+### PisellImport Props
+
+| 参数      | 说明                         | 类型                                                                 | 默认值    | 必填 |
+| --------- | ---------------------------- | -------------------------------------------------------------------- | --------- | ---- |
+| variant   | 展示形态                     | `'icon' \| 'button'`                                                | `'button'` | ❌   |
+| size      | 尺寸                         | `'small' \| 'medium' \| 'large'`                                   | `'medium'` | ❌   |
+| type      | 视觉类型                     | `'default' \| 'primary'`                                            | `'default'` | ❌   |
+| disabled  | 是否禁用                     | `boolean`                                                            | `false`   | ❌   |
+| label     | Button 形态文案               | `ReactNode`                                                          | 国际化默认 | ❌   |
+| icon      | 自定义图标                   | `ReactNode`                                                          | 内置导入图标 | ❌   |
+| accept    | 接受的文件类型               | `string`（如 `.xlsx,.csv`）                                          | -         | ❌   |
+| multiple  | 是否多选                     | `boolean`                                                            | `false`   | ❌   |
+| maxSize   | 单文件最大体积（MB）         | `number`                                                             | -         | ❌   |
+| onImport  | 选择文件并校验通过后回调     | `(files: File[], e: React.ChangeEvent<HTMLInputElement>) => void`   | -         | ❌   |
+| onError   | 校验失败时回调（如文件过大） | `(error: { type: 'MAX_SIZE'; message: string; file: File }) => void` | -         | ❌   |
+| className | 自定义类名                   | `string`                                                             | -         | ❌   |
+| style     | 自定义样式                   | `CSSProperties`                                                      | -         | ❌   |
+
+### onError 参数
+
+当 `maxSize` 校验不通过时，`onError` 会收到：
+
+- `type`: `'MAX_SIZE'`
+- `message`: 提示文案（含体积限制，支持国际化）
+- `file`: 超限的 File 对象
+
+可在回调中使用 `message.error(error.message)` 等方式提示用户。
+
+## 注意事项
+
+1. **回调必传**：实际使用中建议传入 `onImport`，否则选择文件后无法处理
+2. **文件校验**：需限制类型时传 `accept`，需限制大小时传 `maxSize` 并实现 `onError` 提示用户
+3. **多选**：`multiple={true}` 时一次可选多个文件，`onImport` 收到的 `files` 为数组
+4. **搭配使用**：常与 PisellExport 并排使用，形成导入导出能力
+
+## 相关文档
+
+- [设计文档](./pisellImport.$tab-design.md)
+- [开发文档](./pisellImport.$tab-dev.md)
+- [测试文档](./pisellImport.$tab-test.md)

package/lib/components/pisellImport/index.d.ts

@@ -0,0 +1,2 @@
+import { ImportButtonType, PisellImportProps, SizeType, VariantType } from "./types.js";
+import { PisellImport } from "./PisellImport.js";

package/lib/components/pisellImport/types.d.ts

@@ -0,0 +1,89 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/pisellImport/types.d.ts
+/**
+ * 展示形态
+ * @description icon：仅图标；button：图标 + 文案
+ */
+type VariantType = 'icon' | 'button';
+/**
+ * 尺寸
+ * @description 小、中、大三种尺寸，对应设计稿 padding 与字体
+ */
+type SizeType = 'small' | 'medium' | 'large';
+/**
+ * 视觉类型
+ * @description default：默认边框/灰字；primary：主色描边或填充
+ */
+type ImportButtonType = 'default' | 'primary';
+/**
+ * PisellImport 组件 Props
+ * @description 导入触发器 UI 组件，仅负责展示与点击回调，不内置导入逻辑
+ */
+interface PisellImportProps {
+  /**
+   * 展示形态
+   * @default 'button'
+   */
+  variant?: VariantType;
+  /**
+   * 尺寸
+   * @default 'medium'
+   */
+  size?: SizeType;
+  /**
+   * 视觉类型（默认样式 / 主色样式）
+   * @default 'default'
+   */
+  type?: ImportButtonType;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Button 形态下的文案，不传时使用国际化默认文案
+   */
+  label?: ReactNode;
+  /**
+   * 自定义图标，不传时使用内置上传/导入图标
+   */
+  icon?: ReactNode;
+  /**
+   * 接受的文件类型
+   * @description 与 input[type=file] 的 accept 一致，如 ".xlsx,.csv" 或 "application/vnd.ms-excel"
+   */
+  accept?: string;
+  /**
+   * 是否允许多选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 单文件最大体积（MB），超出时不会调用 onImport，并调用 onError
+   */
+  maxSize?: number;
+  /**
+   * 选择文件并校验通过后回调
+   * @description 用户选择文件后触发，e 为 input 的 change 事件
+   */
+  onImport?: (files: File[], e: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * 校验失败时回调（如文件过大）
+   */
+  onError?: (error: {
+    type: 'MAX_SIZE';
+    message: string;
+    file: File;
+  }) => void;
+  /**
+   * 自定义类名
+   */
+  className?: string;
+  /**
+   * 自定义样式
+   */
+  style?: CSSProperties;
+}
+//#endregion
+export { ImportButtonType, PisellImportProps, SizeType, VariantType };

package/lib/components/pisellLongText/PisellLongText.js

@@ -1,10 +1,12 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_pisell_components = require("../../theme/pisell-components.js");
 const require_ReadOnlyView = require("./components/ReadOnlyView.js");
 const require_EditView = require("./components/EditView.js");
 const require_DisabledView = require("./components/DisabledView.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
+let antd = require("antd");
 require("./PisellLongText.less");
 //#region src/components/pisellLongText/PisellLongText.tsx
 /**
@@ -42,12 +44,17 @@ require("./PisellLongText.less");
 */
 const PisellLongText = (props) => {
 	const { mode = "edit", disabled = false } = props;
-	switch ((0, _pisell_utils.getDisplayState)(mode, disabled)) {
-		case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
-		case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
-		case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
-		default: return null;
-	}
+	const displayState = (0, _pisell_utils.getDisplayState)(mode, disabled);
+	const render = () => {
+		switch (displayState) {
+			case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
+			case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
+			case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
+			default: return null;
+		}
+	};
+	const theme = require_pisell_components.getPisellComponentsThemeConfig();
+	return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, render());
 };
 var PisellLongText_default = react.default.memo(PisellLongText, (prevProps, nextProps) => {
 	return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;

package/lib/components/pisellLongText/PisellLongText.less

@@ -7,73 +7,6 @@
   &-edit {
     position: relative;
     width: 100%;
-
-    // TextArea 样式（Figma 设计规范，覆盖时使用 pisell-lowcode-xxx）
-    .pisell-lowcode-input {
-      // 基础样式
-      font-size: 16px !important;
-      line-height: 24px !important;
-
-      // 边框和圆角
-      border-radius: 8px !important;
-      border: 1px solid #d0d5dd !important; // Gray/300
-
-      // 内边距（Figma: 垂直 12px，水平 14px）
-      padding: 12px 14px !important;
-      min-height: 80px !important; // 多行最小高度，由 rows 进一步控制
-
-      // 颜色
-      color: #101828 !important; // Gray/900
-      background-color: #ffffff !important;
-
-      &::placeholder {
-        color: #667085 !important; // Gray/500
-      }
-
-      // 聚焦态
-      &:focus,
-      &:focus-within {
-        border-color: #d6bbfb !important; // Primary/300
-        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
-        outline: none !important;
-      }
-
-      // Hover 态
-      &:hover:not(:focus):not(:focus-within):not([disabled]) {
-        border-color: #b692f6 !important; // Primary/400
-      }
-
-      // 禁用态
-      &[disabled],
-      &.pisell-lowcode-input-disabled {
-        background-color: #f9fafb !important; // Gray/50
-        color: #98a2b3 !important; // Gray/400
-        border-color: #d0d5dd !important;
-        cursor: not-allowed !important;
-      }
-    }
-
-    // 字数统计样式（TextArea showCount）
-    .pisell-lowcode-input-data-count,
-    .pisell-lowcode-input-show-count-suffix {
-      color: #667085 !important; // Gray/500
-      font-size: 14px !important;
-    }
-
-    // 错误状态
-    .pisell-lowcode-input-status-error {
-      border-color: #fda29b !important; // Error/300
-
-      &:focus,
-      &:focus-within {
-        border-color: #f97066 !important; // Error/400
-        box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
-      }
-
-      &:hover:not(:focus):not(:focus-within) {
-        border-color: #f97066 !important; // Error/400
-      }
-    }
   }
 
   &-error {

package/lib/components/pisellLookup/PisellLookup.less

@@ -612,7 +612,7 @@
 
 .pisell-lookup-modal-custom-container {
   position: absolute !important;
-  top: var(env(safe-area-inset-top), 0) !important;
+  top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;

package/lib/components/pisellLookup/components/LookupTrigger.js

@@ -59,8 +59,9 @@ const LookupTriggerComponent = (0, react.forwardRef)((props, ref) => {
 	*/
 	const getAppScanBarcodePlugin = () => {
 		if (getApp) {
+			var _app$getPlugin;
 			const app = getApp();
-			const scanBarcode = app === null || app === void 0 ? void 0 : app.getPlugin("webScan");
+			const scanBarcode = app === null || app === void 0 || (_app$getPlugin = app.getPlugin("scan")) === null || _app$getPlugin === void 0 ? void 0 : _app$getPlugin.scanBarcode;
 			if (scanBarcode) return scanBarcode;
 		}
 		return null;
@@ -74,11 +75,12 @@ const LookupTriggerComponent = (0, react.forwardRef)((props, ref) => {
 	const appScan = () => {
 		const app = getApp();
 		try {
-			getAppScanBarcodePlugin().scan({
-				type: "capacitor",
-				params: { hint: 17 }
-			}).then((res) => {
-				onScan === null || onScan === void 0 || onScan(res);
+			getAppScanBarcodePlugin()({ hint: 17 }).then((res) => onScan === null || onScan === void 0 ? void 0 : onScan(res === null || res === void 0 ? void 0 : res.ScanResult)).catch((err) => {
+				app.logger.addLog({
+					type: "info",
+					title: "扫码失败",
+					metadata: { err }
+				});
 			});
 		} catch (err) {
 			app.logger.addLog({

package/lib/components/pisellLookup/docs/pisellLookup.md

@@ -3,7 +3,7 @@ nav:
   title: 组件
   order: 1
 group:
-  title: Form Fields
+  title: Data Entry
   order: 1
 title: PisellLookup
 order: 1

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.js

@@ -1,5 +1,6 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+const require_pisell_components = require("../../theme/pisell-components.js");
 const require_EditView = require("./components/EditView.js");
 const require_DisabledView = require("./components/DisabledView.js");
 const require_ReadOnlyView = require("./components/ReadOnlyView.js");
@@ -51,14 +52,15 @@ const PisellMultipleSelect = (0, react.forwardRef)((props, ref) => {
 		addValue: (val) => state.addValue(val),
 		removeValue: (val) => state.removeValue(val)
 	}));
-	if (disabled) return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props), {}, { ref: selectRef }));
-	if (readOnly) return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
-	return /* @__PURE__ */ react.default.createElement(require_EditView.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props), {}, {
+	const theme = require_pisell_components.getPisellComponentsThemeConfig();
+	if (disabled) return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, /* @__PURE__ */ react.default.createElement(require_DisabledView.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props), {}, { ref: selectRef })));
+	if (readOnly) return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props));
+	return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, /* @__PURE__ */ react.default.createElement(require_EditView.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props), {}, {
 		value: state.value,
 		state,
 		onChangeInternal: handleChange,
 		ref: selectRef
-	}));
+	})));
 });
 PisellMultipleSelect.displayName = "PisellMultipleSelect";
 //#endregion

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -4,7 +4,6 @@
  */
 
 .pisell-multiple-select {
-  height: 48px !important;
   width: 100%;
 
   .pisell-lowcode-select-clear {
@@ -22,88 +21,11 @@
     }
   }
 
-  // Select 触发器（Figma 设计规范，与 SingleSelect / Input 体系一致）
-  .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input) {
-    .pisell-lowcode-select-selector {
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border-radius: 8px !important;
-      border: 1px solid #d0d5dd !important; // Gray/300
-      padding: 12px 16px !important;
-      min-height: 48px !important;
-      color: #101828 !important; // Gray/900
-      background-color: #ffffff !important;
-    }
-
-    // 多选模式：内边距适配标签，高度保持 48px
-    &.pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
-      padding: 6px 16px !important;
-      min-height: 48px !important;
-    }
-
-    &.pisell-lowcode-select-open .pisell-lowcode-select-selector {
-      border-color: #d6bbfb !important; // Primary/300
-      box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
-    }
-
-    &:not(.pisell-lowcode-select-open):not(.pisell-lowcode-select-disabled)
-    .pisell-lowcode-select-selector:hover {
-      border-color: #b692f6 !important; // Primary/400
-    }
-
-    &.pisell-lowcode-select-disabled .pisell-lowcode-select-selector {
-      background-color: #f9fafb !important; // Gray/50
-      color: #98a2b3 !important; // Gray/400
-      border-color: #d0d5dd !important;
-      cursor: not-allowed !important;
-    }
-
-    .pisell-lowcode-select-selection-placeholder {
-      color: #667085 !important; // Gray/500
-    }
-
-    .pisell-lowcode-select-arrow {
-      color: #667085;
-    }
-
-
-    // 多选标签（选择后展示的 item）高度 36px
-    .pisell-lowcode-select-selection-item {
-      border-radius: 6px !important;
-      padding: 0 10px !important;
-      margin-inline-end: 4px !important;
-      height: 36px !important;
-      min-height: 36px !important;
-      line-height: 36px !important;
-
-      &-content {
-        line-height: 36px !important;
-      }
-
-      &-remove {
-        margin-left: 4px !important;
-
-        &:hover {
-          background-color: transparent !important;
-        }
-      }
-    }
-  }
-
   &-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
     position: relative;
-
-    // 下拉选项高度 48px（通过 getPopupContainer 挂到 wrapper 内，无需 :global）
-    .pisell-multiple-select-dropdown .pisell-lowcode-select-item {
-      min-height: 48px !important;
-      height: 48px !important;
-      line-height: 48px !important;
-      padding: 0 16px !important;
-      font-size: 16px !important;
-    }
   }
 
   &-label {
@@ -147,42 +69,25 @@
     margin-left: 8px;
   }
 
-  // 错误状态（Figma 设计体系 Error 色）
-  &-error {
-    .pisell-lowcode-select .pisell-lowcode-select-selector {
-      border-color: #fda29b !important; // Error/300
-
-      &:hover {
-        border-color: #f97066 !important; // Error/400
-      }
-    }
-
-    .pisell-lowcode-select.pisell-lowcode-select-focused .pisell-lowcode-select-selector,
-    .pisell-lowcode-select.pisell-lowcode-select-open .pisell-lowcode-select-selector {
-      border-color: #f97066 !important; // Error/400
-      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
-    }
-  }
-
   // 聚合标签（maxTagPlaceholder）
-  &-more-tag {
-    display: inline-flex;
-    align-items: center;
-    background-color: #eaecf0;
-    color: #344054; // Gray/700
-    border: none;
-    border-radius: 6px;
-    padding: 6px 10px;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: #d0d5dd; // Gray/300
-    }
-  }
+  //&-more-tag {
+  //  display: inline-flex;
+  //  align-items: center;
+  //  background-color: #eaecf0;
+  //  color: #344054; // Gray/700
+  //  border: none;
+  //  border-radius: 6px;
+  //  padding: 6px 10px;
+  //  font-size: 16px;
+  //  font-weight: 500;
+  //  line-height: 24px;
+  //  cursor: pointer;
+  //  transition: background-color 0.2s ease;
+  //
+  //  &:hover {
+  //    background-color: #d0d5dd; // Gray/300
+  //  }
+  //}
 
   // 只读状态
   &-readonly {
@@ -228,32 +133,6 @@
   }
 }
 
-// 下拉内搜索框（在 dropdown 内）
-.pisell-select-search-wrapper {
-  padding: 6px;
-  border-bottom: 1px solid #eaecf0;
-}
-
-.pisell-select-search-input {
-  padding: 9px 10px !important;
-  font-size: 14px;
-
-  .pisell-lowcode-input {
-    font-size: 14px !important;
-    color: #344054 !important;
-
-    &::placeholder {
-      color: #98a2b3 !important;
-      font-size: 12px !important;
-    }
-  }
-
-  &:hover,
-  &:focus-within {
-    background-color: transparent !important;
-  }
-}
-
 @keyframes pisell-multiple-select-fadeIn {
   from {
     opacity: 0;

package/lib/components/pisellMultipleSelect/components/EditView.js

@@ -101,6 +101,7 @@ const EditView = (0, react.forwardRef)((props, ref) => {
 		style
 	}, label && /* @__PURE__ */ react.default.createElement("label", { className: (0, classnames.default)("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ react.default.createElement(antd.Select, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, restProps), {}, {
 		ref,
+		open: true,
 		mode: "multiple",
 		value,
 		options: filteredAntdOptions,

package/lib/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -52,6 +52,10 @@ const PisellNavigationMenu = ({ value = [], allowDrag = true, allowDelete = true
 				text: require_index.getText("pisell-lowcode-navigation-menu-tag-pisell1"),
 				color: "#ee837a"
 			},
+			dynamicRoute: {
+				text: require_index.getText("pisell-lowcode-navigation-menu-tag-dynamic-route"),
+				color: "#ffc53d"
+			},
 			group: {
 				text: require_index.getText("pisell-lowcode-navigation-menu-tag-group"),
 				color: "#7f56d9"