@cniot/android-pda-components 2.0.0-beta.1 → 2.0.0-beta.10

package/doc/all-v2-components/index.jsx

@@ -22,118 +22,126 @@ import {
   InputV2,
   TableV2,
   PageFlowSystemPagesV2,
-} from '../../packages';
+  DatePickerV2,
+  InputFieldV2,
+} from "../../packages";
 import { Button, List } from "antd-mobile";
-import './index.less'
-
+import "./index.less";
 
 const typePropsMap = {
   normal: {
-    header: < div > 标题内容</div>,
-    headerExtra:
-    {
+    header: <div> 标题内容</div>,
+    headerExtra: {
       tag: {
-        text: '进行中',
+        text: "进行中",
         // type: 'normal'
       },
-      desc: 'A1-098',
-      showRightIcon: true
+      desc: "A1-098",
+      showRightIcon: true,
     },
     footer: [
       {
-        type: 'primary',
-        buttonText: 'primary',
+        type: "primary",
+        buttonText: "primary",
         // disabled:true,
         fullWidth: true,
       },
 
       {
-        type: 'secondary',
-        buttonText: 'secondary',
+        type: "secondary",
+        buttonText: "secondary",
         // disabled:true,
       },
       {
-        type: 'normal',
-        buttonText: 'normal',
+        type: "normal",
+        buttonText: "normal",
         // disabled:true,
       },
       {
-        type: 'primary',
-        buttonText: 'primary',
-        text: true
+        type: "primary",
+        buttonText: "primary",
+        text: true,
       },
       {
-        type: 'normal',
-        buttonText: 'normal',
-        text: true
+        type: "normal",
+        buttonText: "normal",
+        text: true,
       },
       {
-        type: 'warning',
-        buttonText: 'warning',
-        text: true
+        type: "warning",
+        buttonText: "warning",
+        text: true,
       },
       {
-        type: 'warning',
-        buttonText: 'warning',
+        type: "warning",
+        buttonText: "warning",
       },
       {
-        type: 'warning-secondary',
-        buttonText: 'warning-secondary',
+        type: "warning-secondary",
+        buttonText: "warning-secondary",
       },
-    ]
-
+    ],
   },
   goods: {
     header: {
-      goodsImage: 'https://gw.alicdn.com/imgextra/i1/O1CN01PemlAa1msAsAIrq7j_!!6000000005009-0-tps-500-500.jpg',
-      goodsName: '礼盒套装CXW-358-EMG',
-      goodsCode: '10290010010',
+      goodsImage:
+        "https://gw.alicdn.com/imgextra/i1/O1CN01PemlAa1msAsAIrq7j_!!6000000005009-0-tps-500-500.jpg",
+      goodsName: "礼盒套装CXW-358-EMG",
+      goodsCode: "10290010010",
       // extra:'单位：件',
-      attrs: ['单位：件', '常温 | 避光 | 贵品',],
+      attrs: ["单位：件", "常温 | 避光 | 贵品"],
       tags: [
         {
-          text: '唯一码',
-          type: 'warning',
-          backgroundColor: '#FEF0D6'
-        }, {
-          text: '单元',
-          type: 'success'
-        }
+          text: "唯一码",
+          type: "warning",
+          backgroundColor: "#FEF0D6",
+        },
+        {
+          text: "单元",
+          type: "success",
+        },
       ],
     },
     footer: {
-      label: '',
+      label: "",
       realNum: 8,
       planNum: 10,
-    }
+    },
   },
   list: {
-    footer: 'A-9-087'
+    footer: "A-9-087",
   },
   tip: {
     content: {
-      label: '标题',
-      value: 'A-01-0908',
+      label: "标题",
+      value: "A-01-0908",
       tag: {
-        type: 'time',
-        text: '01:24',
+        type: "time",
+        text: "01:24",
         // icon:''
-      }
-    }
-  }
-}
+      },
+    },
+  },
+};
 
 export default function (props) {
-  const { data, onNext = (message) => { console.log(`message:======`, message); } } = props;
+  const {
+    data,
+    onNext = (message) => {
+      console.log(`message:======`, message);
+    },
+  } = props;
+  const [val, setVal] = useState();
+  const [val1, setVal1] = useState();
   const [showConfirm, setShowConfirm] = useState(false);
   const [showToast, setShowToast] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
   const [showPrompt, setShowPrompt] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
   let type;
-  type = 'normal'
+  type = "normal";
   // type = 'goods'
-  type = 'list'
+  type = "list";
   // type = 'tip'
 
   const showMap = {
@@ -144,6 +152,7 @@ export default function (props) {
     ButtonV2Group: true,
     TagV2: true,
     NumberPickerV2: true,
+    InputFieldV2: true,
     InputV2: true,
     ProgressBarV2: true,
     CardV2: true,
@@ -159,10 +168,26 @@ export default function (props) {
     ImageUploaderV2: true,
     TableV2: true,
     PageFlowSystemPagesV2: true,
-  }
+    DatePickerV2: true,
+  };
   const ImageUploaderV2Component = () => {
     const [images, setImg] = React.useState([]);
-    setTimeout(() => { setImg([{ id: 1, url: "https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80", }, { id: 2, url: "https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80", }, { id: 3, url: "https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60", },]); }, 1000);
+    setTimeout(() => {
+      setImg([
+        {
+          id: 1,
+          url: "https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80",
+        },
+        {
+          id: 2,
+          url: "https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80",
+        },
+        {
+          id: 3,
+          url: "https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60",
+        },
+      ]);
+    }, 1000);
     return (
       <div>
         <p>ImageUploader 图片上传</p>
@@ -184,373 +209,706 @@ export default function (props) {
         />
       </div>
     );
-  }
+  };
   const components = {
-    LatticeMouthV2: <>投篮指引<LatticeMouthV2 row={3} col={3} dataSource={[{ value: "highlight", label: "2", color: "highlight" }, { value: "active", label: "2", color: "active" }, { value: "default", label: "2", color: "default" }, { value: "complete", label: "2", color: "complete" }, { value: "error", label: "2", color: "error" }, { value: "自定义", label: "2", style: { "--font-size": "18px", "--background-color": "#ffffff", "--color": "#f30f30", "--label-background-color": "rgba(0,0,0,0.3)" } }]} /></>,
-    ImageUploaderV2: <ImageUploaderV2Component />,
-    HeaderV2: <HeaderV2
-      onBack={() => { }}
-      actions={[
-        {
-          label: "功能1",
-          value: "",
-          onClick() {
-            alert("功能1");
+    HeaderV2: (
+      <HeaderV2
+        onBack={() => {}}
+        actions={[
+          {
+            label: "功能1",
+            value: "",
+            onClick() {
+              alert("功能1");
+            },
           },
-        },
-        {
-          label: "功能2",
-          value: "",
-          onClick() {
-            alert("功能2");
+          {
+            label: "功能2",
+            value: "",
+            onClick() {
+              alert("功能2");
+            },
           },
-        },
-      ]}
-    >
-      标准页面
-    </HeaderV2>,
-
-    ButtonV2FullWidth: <div style={{ backgroundColor: '#ffffff', height: 90, padding: 10, margin: '10px 0' }}>
-      ButtonV2FullWidth
-      <ButtonV2 type='primary' fullWidth onClick={() => { console.log(`primary button click===`); }}>提交</ButtonV2>
-    </div>,
-
-    ButtonV2Group: <div style={{ backgroundColor: '#ffffff', height: 90, padding: '10px 0', margin: '10px 0' }}>
-      ButtonV2Group
-      <ButtonV2.Group>
-        <ButtonV2 type='primary' fullWidth onClick={() => { console.log(`primary button click===`); }}>提交</ButtonV2>
-        <ButtonV2 fullWidth onClick={() => { console.log(`primary button click===`); }}>取消</ButtonV2>
-      </ButtonV2.Group>
-    </div>,
+        ]}
+      >
+        标准页面
+      </HeaderV2>
+    ),
+    // ScanV2: (
+    //   <ScanV2
+    //     label="扫描"
+    //     placeholder="请扫描"
+    //     onScan={(value) => {
+    //       console.log("scan value", value);
+    //     }}
+    //   ></ScanV2>
+    // ),
+    InputFieldV2: (
+      <div>
+        独立输入框
+        {/* <input
+          value={val}
+          onChange={(val) => {
+            setVal(val?.target?.value);
+          }}
+        />
+        <button
+          onClick={() => {
+            setVal(null);
+          }}
+        >
+          dddd
+        </button> */}
+        <InputFieldV2
+          label="文本输入框"
+          // labelRowCharNum={4}
+          // component={() => {
+          //   // return <input placeholder="独立输入框"></input>;
+          //   // return <input>component 可能需要自己维护 校验逻辑等</input>;
+          // }}
+          type="input"
+          componentProps={{}}
+          validator={(val) => {
+            // return Number(val) > 9 ? "不能大于9" : null;
+            return Number(val) > 9
+              ? {
+                  title: "输入错误",
+                  level: "error",
+                  message: "不能大于9",
+                  duration: 5000,
+                }
+              : null;
+          }}
+          validateTriggerType="onBlur" // onChange
+          onChange={(val) => {
+            setVal(val);
+          }}
+          value={val}
+          clearWhenValidateError
+        />
+        <InputFieldV2
+          showIcon={false}
+          label="选择"
+          // labelRowCharNum={4}
+          // component={() => {
+          //   // return <input placeholder="独立输入框"></input>;
+          //   // return <input>component 可能需要自己维护 校验逻辑等</input>;
+          // }}
+          type="select"
+          componentProps={{
+            dataSource: [
+              { label: "1", value: "1" },
+              { label: "2", value: "2" },
+            ],
+          }}
+          validator={(val) => {
+            // return Number(val) <= 0 ? "必须大于0" : null;
+            return val === "1"
+              ? {
+                  title: "输入错误",
+                  level: "error",
+                  message: "必须大于0",
+                  duration: 5000,
+                }
+              : null;
+          }}
+          validateTriggerType="onChange" // onChange
+          clearWhenValidateError
+          onChange={(val) => {
+            console.log(`val:======`, val);
+            setVal1(val);
+          }}
+          value={val1}
+        />
+        <InputFieldV2
+          label="数字输入"
+          // labelRowCharNum={6}
+          // component={() => {
+          //   // return <input placeholder="独立输入框"></input>;
+          //   // return <input>component 可能需要自己维护 校验逻辑等</input>;
+          // }}
+          // componentProps={{}}
+          type="number"
+          validator={(val) => {
+            console.log(`val:======`, val, typeof val);
+            return val > 100 ? "不能大于9" : null;
+            // return Number(val) > 9
+            //   ? {
+            //       title: "输入错误",
+            //       level: "error",
+            //       message: "不能大于9",
+            //       duration: 5000,
+            //     }
+            //   : null;
+          }}
+          validateTriggerType="onChange" // onChange
+          onChange={(val) => {
+            setVal(val);
+          }}
+          value={val}
+          clearWhenValidateError
+        />
+        ;
+      </div>
+    ),
+    LatticeMouthV2: (
+      <>
+        投篮指引
+        <LatticeMouthV2
+          row={3}
+          col={3}
+          dataSource={[
+            { value: "highlight", label: "2", color: "highlight" },
+            { value: "active", label: "2", color: "active" },
+            { value: "default", label: "2", color: "default" },
+            { value: "complete", label: "2", color: "complete" },
+            { value: "error", label: "2", color: "error" },
+            {
+              value: "自定义",
+              label: "2",
+              style: {
+                "--font-size": "18px",
+                "--background-color": "#ffffff",
+                "--color": "#f30f30",
+                "--label-background-color": "rgba(0,0,0,0.3)",
+              },
+            },
+          ]}
+        />
+      </>
+    ),
+    ImageUploaderV2: <ImageUploaderV2Component />,
+    ButtonV2FullWidth: (
+      <div
+        style={{
+          backgroundColor: "#ffffff",
+          height: 90,
+          padding: 10,
+          margin: "10px 0",
+        }}
+      >
+        ButtonV2FullWidth
+        <ButtonV2
+          type="primary"
+          fullWidth
+          onClick={() => {
+            console.log(`primary button click===`);
+          }}
+        >
+          提交
+        </ButtonV2>
+      </div>
+    ),
 
-    TagV2: <div style={{ backgroundColor: '#ffffff', display: 'flex', flexWrap: 'wrap', gap: 4, padding: 10, margin: '10px 0' }}>
-      TagV2
-      <TagV2 type='data-change'>data-change</TagV2>
-      <TagV2 type='normal'>normal'</TagV2>
-      <TagV2 type='warning'>warning'</TagV2>
-      <TagV2 type='almost-warning'>almost-warning</TagV2>
-      <TagV2 type='warning-end'>warning-end</TagV2>
-    </div>,
+    ButtonV2Group: (
+      <div
+        style={{
+          backgroundColor: "#ffffff",
+          height: 90,
+          padding: "10px 0",
+          margin: "10px 0",
+        }}
+      >
+        ButtonV2Group
+        <ButtonV2.Group>
+          <ButtonV2
+            type="primary"
+            fullWidth
+            onClick={() => {
+              console.log(`primary button click===`);
+            }}
+          >
+            提交
+          </ButtonV2>
+          <ButtonV2
+            fullWidth
+            onClick={() => {
+              console.log(`primary button click===`);
+            }}
+          >
+            取消
+          </ButtonV2>
+        </ButtonV2.Group>
+      </div>
+    ),
 
-    NumberPickerV2: <div style={{ backgroundColor: '#ffffff', padding: 10, margin: '10px 0' }}>
-      NumberPickerV2
-      <NumberPickerV2
-        max={10}
-        min={0}
-      />
-    </div>,
+    TagV2: (
+      <div
+        style={{
+          backgroundColor: "#ffffff",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 4,
+          padding: 10,
+          margin: "10px 0",
+        }}
+      >
+        TagV2
+        <TagV2 type="data-change">data-change</TagV2>
+        <TagV2 type="normal">normal'</TagV2>
+        <TagV2 type="warning">warning'</TagV2>
+        <TagV2 type="almost-warning">almost-warning</TagV2>
+        <TagV2 type="warning-end">warning-end</TagV2>
+      </div>
+    ),
 
-    InputV2: <>输入框<InputV2
-      hasBorder
-    // style={{ '--text-align': 'right' }}
-    /></>,
+    NumberPickerV2: (
+      <div
+        style={{ backgroundColor: "#ffffff", padding: 10, margin: "10px 0" }}
+      >
+        NumberPickerV2
+        <NumberPickerV2 max={10} min={0} />
+      </div>
+    ),
 
-    ProgressBarV2: <div style={{ backgroundColor: '#ffffff', padding: 10, margin: '10px 0' }}>
-      ProgressBarV2
-      <ProgressBarV2 percent={40} />
-    </div>,
+    InputV2: (
+      <>
+        输入框
+        <InputV2
+          hasBorder
+          // style={{ '--text-align': 'right' }}
+        />
+      </>
+    ),
 
-    SelectV2: <>下拉选择<SelectV2
-      label="Select Reason"
-      placeholder="Please select"
-      dataSource={[
-        { label: "Item code", value: "1" },
-        { label: "DIS", value: "2" },
-        { label: "Barcode", value: "3" },
-        { label: "Category", value: "4" },
-        { label: "Qty", value: "5" },
-        { label: "Item Name", value: "6" },
-        { label: "DIS", value: "7" },
-      ]}
-    /></>,
+    DatePickerV2: (
+      <>
+        时间选择器
+        <DatePickerV2
+          className="aaaaaaa"
+          placeholder="请选择时间"
+          value={new Date("2024-08-26")}
+          onChange={(val) => {
+            console.log(`val:======时间`, val, typeof val);
+          }}
+          format="YY-MM-DD"
+          // showFormat='YYYY-MM-DD'
+          // defaultValue={new Date('2024-08-26')}
+        />
+      </>
+    ),
 
-    CardV2: <CardV2
-      type={type}
-      {...typePropsMap[type]}
-      // noPadding
+    ProgressBarV2: (
+      <div
+        style={{ backgroundColor: "#ffffff", padding: 10, margin: "10px 0" }}
+      >
+        ProgressBarV2
+        <ProgressBarV2 percent={40} />
+      </div>
+    ),
 
-      dataSource={[
-        { label: "", value: "value", className: "high", display: false },
-        { label: "", value: "value", className: "highlight", display: false },
-        { label: "输入", value: <NumberPickerV2 /> },
-        { label: "输入", value: <InputV2 /> },
-        { label: "最多六个字符", value: "2022-09-08 12:00:00" },
-        { label: "最多六个字符123", value: "2022-09-08 12:00:00" },
-        { label: "入库单号", value: "17836397", },
-        { label: "渠道", value: "电商", },
-        { label: "数量/总数", value: "12/98", type: 'error', tip: '实收数量少于应收数量，请仔细核对后再结束该入库订单' },
-        // { label: "label", value: "value,valuevalue,valuevalue,value" },
-        // { label: "入库单号", value: "17836397", className: "tag" },
-        // { label: "渠道", value: "电商", className: "tag" },
-        // { label: "数量/总数", value: "12/98", className: "tag" },
-        // { label: "多次收货", value: "允许", className: "tag" },
+    SelectV2: (
+      <>
+        下拉选择
+        <SelectV2
+          readOnly
+          disabled
+          value="1"
+          label="Select Reason"
+          placeholder="Please select"
+          dataSource={[
+            { label: "Item code", value: "1" },
+            { label: "DIS", value: "2" },
+            { label: "Barcode", value: "3" },
+            { label: "Category", value: "4" },
+            { label: "Qty", value: "5" },
+            { label: "Item Name", value: "6" },
+            { label: "DIS", value: "7" },
+          ]}
+        />
+      </>
+    ),
 
-      ]}
-      extend={
-        <Button size="medium" color="primary" fill="outline">
-          Start
-        </Button>
-      }
-    ></CardV2>,
+    CardV2: (
+      <CardV2
+        type={type}
+        {...typePropsMap[type]}
+        // noPadding
 
-    ScanV2: <ScanV2
-      label="扫描"
-      placeholder="请扫描"
-      onScan={(value) => {
-        console.log("scan value", value);
-      }}
-    ></ScanV2>,
+        dataSource={[
+          { label: "", value: "value", className: "high", display: false },
+          { label: "", value: "value", className: "highlight", display: false },
+          { label: "输入", value: <NumberPickerV2 /> },
+          { label: "输入", value: <InputV2 /> },
+          { label: "最多六个字符", value: "2022-09-08 12:00:00" },
+          { label: "最多六个字符123", value: "2022-09-08 12:00:00" },
+          { label: "入库单号", value: "17836397" },
+          { label: "渠道", value: "电商" },
+          {
+            label: "数量/总数",
+            value: "12/98",
+            type: "error",
+            tip: "实收数量少于应收数量，请仔细核对后再结束该入库订单",
+          },
+          // { label: "label", value: "value,valuevalue,valuevalue,value" },
+          // { label: "入库单号", value: "17836397", className: "tag" },
+          // { label: "渠道", value: "电商", className: "tag" },
+          // { label: "数量/总数", value: "12/98", className: "tag" },
+          // { label: "多次收货", value: "允许", className: "tag" },
+        ]}
+        extend={
+          <Button size="medium" color="primary" fill="outline">
+            Start
+          </Button>
+        }
+      ></CardV2>
+    ),
 
-    ScanV2Only: <ScanV2
-      label="只输入"
-      placeholder="Input code"
-      scanAllowed={false}
-      onScan={(value) => {
-        console.log("scan value", value);
-      }}
-      onChange={(value) => {
-        console.log("change", value);
-      }}
-      noEnter={true}
-    ></ScanV2>,
+    ScanV2Only: (
+      <ScanV2
+        label="只输入"
+        placeholder="Input code"
+        scanAllowed={false}
+        onScan={(value) => {
+          console.log("scan value", value);
+        }}
+        onChange={(value) => {
+          console.log("change", value);
+        }}
+        noEnter={true}
+      ></ScanV2>
+    ),
 
-    ListV2: <><ListV2 header="可点击列表" className="body-card" style={{ '--pda-card-margin-bottom': 0 }}>
-      <ListV2.Item onClick={() => {
-        setShowToast(false);
-        onNext("toast success");
-        setTimeout(() => {
-          setShowToast({
-            title: 'toast',
-            message: 'message',
-            // message: <div style={{ backgroundColor: 'red', }}>message</div>,
-            level: 'success',
-            duration: 3000,
-          });
-        }, 300);
-      }}>成功 Toast</ListV2.Item>
-      <ListV2.Item onClick={() => {
-        setShowToast(false);
-        onNext("toast success");
-        setTimeout(() => {
-          setShowToast({
-            title: 'toast',
-            message: 'message',
-            // message: <div style={{ backgroundColor: 'red', }}>message</div>,
-            level: 'warning',
-            duration: 3000,
-          });
-        }, 300);
-      }}>警告 Toast</ListV2.Item>
-      <ListV2.Item onClick={() => {
-        setShowToast(false);
-        onNext("toast error");
-        setTimeout(() => {
-          setShowToast({
-            title: '异常',
-            // title: <div style={{ backgroundColor: '#ffffff', color: '#000000' }}>title</div>,
-            message: <div style={{ backgroundColor: 'red', }}>message</div>,
-            message: 'message',
-            message: [{ label: '入库单号', value: '73683638' }, { label: '入库数量', value: '22' }],
-            level: 'error',
-            duration: 500000,
-          });
-        }, 300);
-      }}>错误 Toast</ListV2.Item>
-      <ListV2.Item onClick={() => {
-        onNext("alert");
-        setShowAlert({
-          title: <div style={{ backgroundColor: '#ffffff', color: '#000000' }}>title</div>,
-          message: <div >message</div>,
-          message: [{ label: '入库单号', value: '73683638' }, { label: '入库数量', value: '22' }],
-          // message: <div style={{ backgroundColor: 'red', }}>message</div>,
-          okText: '点击确认',
-        });
-      }}>alert</ListV2.Item>
-      <ListV2.Item onClick={() => {
-        onNext("confirm");
-        setShowConfirm({
-          title: '确认移动？',
-          message: 'message',
-          message: [{ label: '入库单号', value: '73683638' }, { label: '入库数量', value: '22' }],
-          // message: <div style={{ backgroundColor: 'red', }}>message</div>,
-          okText: '确认',
-          cancelText: '取消',
-          okButtonType: 'error'
-        });
-      }}>confirm</ListV2.Item>
-      <ListV2.Item onClick={() => {
-        onNext("prompt");
-        setShowPrompt({
-          title: '输入下架数量',
-          placeholder: '输入下架数量',
-          inputTip: '这里是输入提示',
-          defaultValue: 2,
-          okText: '确认',
-          cancelText: '取消',
-        })
-      }}>prompt</ListV2.Item>
-      <ListV2.Item onClick={() => {
-        onNext("popup table");
-        setShowPopup({
-          columns: [
-            { title: '序号', dataIndex: 'a', },
-            { title: 'SN', dataIndex: 'b', },
-            { title: '状态', dataIndex: 'c', },
-          ],
-          dataSource: [
-            { a: '1', b: '1234', c: '待扫' },
-            { a: '2', b: '234', c: '待扫' },
-            { a: '3', b: '444', c: '待扫' },
-            { a: 'a2', b: '442', c: '待扫' },
-            { a: 'a2', b: '2323', c: '待扫' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            // { a: 'a2', b: 'b2' },
-            { a: 'a2', b: 'b4' },
-          ],
-        })
-      }}>Popup Table</ListV2.Item>
-      {/* <ListV2.Item ><CardV2  type={'tip'}  {...typePropsMap[type]} ></CardV2></ListV2.Item> 
+    ListV2: (
+      <>
+        <ListV2
+          header="可点击列表"
+          className="body-card"
+          style={{ "--pda-card-margin-bottom": 0 }}
+        >
+          <ListV2.Item
+            onClick={() => {
+              setShowToast(false);
+              onNext("toast success");
+              setTimeout(() => {
+                setShowToast({
+                  title: "toast",
+                  message: "message",
+                  // message: <div style={{ backgroundColor: 'red', }}>message</div>,
+                  level: "success",
+                  duration: 3000,
+                });
+              }, 300);
+            }}
+          >
+            成功 Toast
+          </ListV2.Item>
+          <ListV2.Item
+            onClick={() => {
+              setShowToast(false);
+              onNext("toast success");
+              setTimeout(() => {
+                setShowToast({
+                  title: "toast",
+                  message: "message",
+                  // message: <div style={{ backgroundColor: 'red', }}>message</div>,
+                  level: "warning",
+                  duration: 3000,
+                });
+              }, 300);
+            }}
+          >
+            警告 Toast
+          </ListV2.Item>
+          <ListV2.Item
+            onClick={() => {
+              setShowToast(false);
+              onNext("toast error");
+              setTimeout(() => {
+                setShowToast({
+                  title: "异常",
+                  // title: <div style={{ backgroundColor: '#ffffff', color: '#000000' }}>title</div>,
+                  message: (
+                    <div style={{ backgroundColor: "red" }}>message</div>
+                  ),
+                  message: "message",
+                  message: [
+                    { label: "入库单号", value: "73683638" },
+                    { label: "入库数量", value: "22" },
+                  ],
+                  level: "error",
+                  duration: 500000,
+                });
+              }, 300);
+            }}
+          >
+            错误 Toast
+          </ListV2.Item>
+          <ListV2.Item
+            onClick={() => {
+              onNext("alert");
+              setShowAlert({
+                title: (
+                  <div style={{ backgroundColor: "#ffffff", color: "#000000" }}>
+                    title
+                  </div>
+                ),
+                message: <div>message</div>,
+                message: [
+                  { label: "入库单号", value: "73683638" },
+                  { label: "入库数量", value: "22" },
+                ],
+                // message: <div style={{ backgroundColor: 'red', }}>message</div>,
+                okText: "点击确认",
+              });
+            }}
+          >
+            alert
+          </ListV2.Item>
+          <ListV2.Item
+            onClick={() => {
+              onNext("confirm");
+              setShowConfirm({
+                title: "确认移动？",
+                message: "message",
+                message: [
+                  { label: "入库单号", value: "73683638" },
+                  { label: "入库数量", value: "22" },
+                ],
+                // message: <div style={{ backgroundColor: 'red', }}>message</div>,
+                okText: "确认",
+                cancelText: "取消",
+                okButtonType: "error",
+              });
+            }}
+          >
+            confirm
+          </ListV2.Item>
+          <ListV2.Item
+            onClick={() => {
+              onNext("prompt");
+              setShowPrompt({
+                title: "输入下架数量",
+                placeholder: "输入下架数量",
+                inputTip: "这里是输入提示",
+                defaultValue: 2,
+                okText: "确认",
+                cancelText: "取消",
+              });
+            }}
+          >
+            prompt
+          </ListV2.Item>
+          <ListV2.Item
+            onClick={() => {
+              onNext("popup table");
+              setShowPopup({
+                columns: [
+                  { title: "序号", dataIndex: "a" },
+                  { title: "SN", dataIndex: "b" },
+                  { title: "状态", dataIndex: "c" },
+                ],
+                dataSource: [
+                  { a: "1", b: "1234", c: "待扫" },
+                  { a: "2", b: "234", c: "待扫" },
+                  { a: "3", b: "444", c: "待扫" },
+                  { a: "a2", b: "442", c: "待扫" },
+                  { a: "a2", b: "2323", c: "待扫" },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  // { a: 'a2', b: 'b2' },
+                  { a: "a2", b: "b4" },
+                ],
+              });
+            }}
+          >
+            Popup Table
+          </ListV2.Item>
+          {/* <ListV2.Item ><CardV2  type={'tip'}  {...typePropsMap[type]} ></CardV2></ListV2.Item> 
       <ListV2.Item><CardV2  type={'tip'}  {...typePropsMap[type]} ></CardV2></ListV2.Item>
       <ListV2.Item><CardV2  type={'tip'}  {...typePropsMap[type]} ></CardV2></ListV2.Item> */}
-    </ListV2>
-      <CardV2 type={'tip'}  {...typePropsMap.tip} ></CardV2>
-      <CardV2 type={'tip'}  {...typePropsMap.tip} ></CardV2>
-      <CardV2 type={'tip'}  {...typePropsMap.tip} ></CardV2>
-    </>
-    ,
-
+        </ListV2>
+        <CardV2 type={"tip"} {...typePropsMap.tip}></CardV2>
+        <CardV2 type={"tip"} {...typePropsMap.tip}></CardV2>
+        <CardV2 type={"tip"} {...typePropsMap.tip}></CardV2>
+      </>
+    ),
     IllustrationV2: <IllustrationV2 />,
 
-    TaskCardV2: <TaskCardV2
-      data={{
-        title: "Trip ID.",
-        content: "TK2021012700002",
-        tags: [
-          { label: "SKU", value: "6" },
-          // { label: "QTY", value: "2" },
-          // { label: "QTY1", value: "2" },
-          // { label: "SKU", value: "6/7" },
-          // { label: "QTY", value: "2/2" },
-        ],
-        progress: {
-          desc: "MLP progress",
-          current: "1",
-          total: 10,
-        },
-      }}
-    ></TaskCardV2>,
+    TaskCardV2: (
+      <TaskCardV2
+        data={{
+          title: "Trip ID.",
+          content: "TK2021012700002",
+          tags: [
+            { label: "SKU", value: "6" },
+            // { label: "QTY", value: "2" },
+            // { label: "QTY1", value: "2" },
+            // { label: "SKU", value: "6/7" },
+            // { label: "QTY", value: "2/2" },
+          ],
+          progress: {
+            desc: "MLP progress",
+            current: "1",
+            total: 10,
+          },
+        }}
+      ></TaskCardV2>
+    ),
 
-    TaskInputV2: <TaskInputV2
-      label="只输入"
-      placeholder="Input code"
-      scanAllowd={false}
-      onChange={(value) => {
-        console.log("scan value", value);
-      }}
-      decimal={3}
-    // unit={'EA'}
-    // max={5}
-    // min={1}
-    ></TaskInputV2>,
+    TaskInputV2: (
+      <TaskInputV2
+        label="只输入"
+        placeholder="Input code"
+        scanAllowd={false}
+        onChange={(value) => {
+          console.log("scan value", value);
+        }}
+        decimal={3}
+        // unit={'EA'}
+        // max={5}
+        // min={1}
+      ></TaskInputV2>
+    ),
 
-    MenuListV2: <MenuListV2
-      dataSource={[
-        {
-          label: "Assigned packing tasks",
-          value: 10,
-          key: "assigned",
-          backgroundColor: "#5dc8a6",
-          img: "https://img.alicdn.com/imgextra/i3/O1CN01UiB43o1HEYTkJDkGW_!!6000000000726-2-tps-124-128.png",
-        },
-        {
-          label: "Available Packing Tasks",
-          value: 20,
-          key: "available",
-          backgroundColor: "#4c80f8",
-          img: "https://img.alicdn.com/imgextra/i2/O1CN013UzJVm262gcLeDKjQ_!!6000000007604-2-tps-118-128.png",
-        },
-      ]}
-      onSelect={console.log}
-    ></MenuListV2>,
+    MenuListV2: (
+      <MenuListV2
+        dataSource={[
+          {
+            label: "Assigned packing tasks",
+            value: 10,
+            key: "assigned",
+            backgroundColor: "#5dc8a6",
+            img: "https://img.alicdn.com/imgextra/i3/O1CN01UiB43o1HEYTkJDkGW_!!6000000000726-2-tps-124-128.png",
+          },
+          {
+            label: "Available Packing Tasks",
+            value: 20,
+            key: "available",
+            backgroundColor: "#4c80f8",
+            img: "https://img.alicdn.com/imgextra/i2/O1CN013UzJVm262gcLeDKjQ_!!6000000007604-2-tps-118-128.png",
+          },
+        ]}
+        onSelect={console.log}
+      ></MenuListV2>
+    ),
 
-    FooterV2: <FooterV2>
-      <ButtonV2.Group>
-        <ButtonV2 type='primary' text fullWidth onClick={() => { console.log(`primary button click===`); }}>提交</ButtonV2>
-        <ButtonV2 fullWidth onClick={() => { console.log(`primary button click===`); }}>取消</ButtonV2>
-        <ButtonV2 type='warning' fullWidth onClick={() => { console.log(`warning button click===`); }}>warning</ButtonV2>
-        <ButtonV2 type='secondary' fullWidth onClick={() => { console.log(`secondary button click===`); }}>secondary</ButtonV2>
-      </ButtonV2.Group>
-    </FooterV2>,
-  }
+    FooterV2: (
+      <FooterV2>
+        <ButtonV2.Group>
+          <ButtonV2
+            type="primary"
+            text
+            fullWidth
+            onClick={() => {
+              console.log(`primary button click===`);
+            }}
+          >
+            提交
+          </ButtonV2>
+          <ButtonV2
+            fullWidth
+            onClick={() => {
+              console.log(`primary button click===`);
+            }}
+          >
+            取消
+          </ButtonV2>
+          <ButtonV2
+            type="warning"
+            fullWidth
+            onClick={() => {
+              console.log(`warning button click===`);
+            }}
+          >
+            warning
+          </ButtonV2>
+          <ButtonV2
+            type="secondary"
+            fullWidth
+            onClick={() => {
+              console.log(`secondary button click===`);
+              console.log(`val:======`, val);
+            }}
+          >
+            secondary
+          </ButtonV2>
+        </ButtonV2.Group>
+      </FooterV2>
+    ),
+  };
 
   return (
     <div className="debug-father-container">
-      <LayoutV2 style={{ display: showMap['LayoutV2'] ? undefined : 'none' }}>
-        {
-          Object.entries(components).map(([key, value]) => {
-            return showMap[key] ? value : null;
-          })
-        }
-      </LayoutV2 >
-      <div style={{ display: showMap['FinishCardV2'] ? undefined : 'none' }}>
+      <LayoutV2 style={{ display: showMap["LayoutV2"] ? undefined : "none" }}>
+        {Object.entries(components).map(([key, value]) => {
+          return showMap[key] ? value : null;
+        })}
+      </LayoutV2>
+      <div style={{ display: showMap["FinishCardV2"] ? undefined : "none" }}>
         <FinishCardV2
-          title={'收货完成!'}
-          okText={'返回'}
-          cancelText={'取消'}
-          infoTitle={'入库单号：12838383'}
+          title={"收货完成!"}
+          okText={"返回"}
+          cancelText={"取消"}
+          infoTitle={"入库单号：12838383"}
           infoList={[
             {
-              label: '入库单号',
-              value: '7788038939',
+              label: "入库单号",
+              value: "7788038939",
             },
             {
-              label: 'SKU',
+              label: "SKU",
               value: 30,
             },
             {
-              label: '数量',
-              value: '200 件',
+              label: "数量",
+              value: "200 件",
             },
           ]}
         />
       </div>
-      {
-        showToast && <PageFlowSystemPagesV2.Toast data={showToast}
-          onNext={() => { onNext(); }}
+      {showToast && (
+        <PageFlowSystemPagesV2.Toast
+          data={showToast}
+          onNext={() => {
+            onNext();
+          }}
         />
-      }
-      {
-        showAlert && <PageFlowSystemPagesV2.Alert data={showAlert}
-          onNext={() => { onNext(); setShowAlert(false) }}
+      )}
+      {showAlert && (
+        <PageFlowSystemPagesV2.Alert
+          data={showAlert}
+          onNext={() => {
+            onNext();
+            setShowAlert(false);
+          }}
         />
-      }
-      {
-        showConfirm && <PageFlowSystemPagesV2.Confirm data={showConfirm}
-          onNext={() => { onNext(); setShowConfirm(false) }} />
-      }
-      {
-        showPrompt && <PageFlowSystemPagesV2.Prompt data={showPrompt}
-          onNext={() => { onNext(); setShowPrompt(false) }}
+      )}
+      {showConfirm && (
+        <PageFlowSystemPagesV2.Confirm
+          data={showConfirm}
+          onNext={() => {
+            onNext();
+            setShowConfirm(false);
+          }}
         />
-      }
-      {
-        showPopup && <PopupV2>
+      )}
+      {showPrompt && (
+        <PageFlowSystemPagesV2.Prompt
+          data={showPrompt}
+          onNext={() => {
+            onNext();
+            setShowPrompt(false);
+          }}
+        />
+      )}
+      {showPopup && (
+        <PopupV2>
           <TableV2 {...(showPopup || {})} />
         </PopupV2>
-      }
-    </div >
+      )}
+    </div>
   );
-}
+}