plain-design 1.0.0-beta.33 → 1.0.0-beta.35

package/src/pages/index/components/service/DemoDialogService.tsx

@@ -1,249 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$dialog, $message, Button, Input, useDialog} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button label="show dialog message" onClick={() => $dialog('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')}/>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  return () => (
-    <DemoRow title="超长文本，最大宽高">
-      <Button label="show dialog message" onClick={() => $dialog({
-        message: new Array(100).fill('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。').join(''),
-        maxWidth: '50vw',
-        maxHeight: '80vh',
-      })}/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  return () => (
-    <DemoRow title="状态">
-      <DemoLine>
-        <Button label="default" onClick={() => $dialog('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')}/>
-        <Button label="Primary" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', status: 'primary' })} status="primary" mode="fill"/>
-        <Button label="Success" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '提交成功', status: 'success' })} status="success" mode="fill"/>
-        <Button label="Warn" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '请先完成登记', status: 'warn' })} status="warn" mode="fill"/>
-        <Button label="Error" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '提交失败', status: 'error' })} status="error" mode="fill"/>
-        <Button label="Secondary" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '系统提示', status: 'secondary' })} status="secondary" mode="fill"/>
-      </DemoLine>
-      <br/>
-      <DemoLine>
-        <Button label="$dialog.primary" onClick={() => $dialog.primary('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="primary" mode="fill"/>
-        <Button label="$dialog.success" onClick={() => $dialog.success('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="success" mode="fill"/>
-        <Button label="$dialog.warn" onClick={() => $dialog.warn('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="warn" mode="fill"/>
-        <Button label="$dialog.error" onClick={() => $dialog.error('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="error" mode="fill"/>
-        <Button label="$dialog.secondary" onClick={() => $dialog.secondary('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="secondary" mode="fill"/>
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const removeData = async () => {
-    await $dialog.confirm('确定要删除该订单信息吗？', { title: '删除确认' });
-    console.log('remove');
-  };
-
-  return () => (
-    <DemoRow title="确认对话框">
-      <Button label="删除确认" onClick={removeData}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo5 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const custom = () => {
-    const close = $dialog({
-      position: 'right',
-      confirmButton: true,
-      cancelButton: true,
-      width: '400px',
-      render: () => <>
-        <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
-        <Button label="我知道了" onClick={close}/>
-      </>,
-      renderFoot: () => <Button label="取消订阅" onClick={close}/>,
-    });
-  };
-
-  return () => (
-    <DemoRow title="自定义参数以及内容">
-      <Button label="手动关闭" onClick={custom}/>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const newDlg = async () => {
-    await $dialog({
-      render: () => <>
-        <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
-        <br/>
-        <br/>
-        <Button block label="新弹框" onClick={newDlg}/>
-        <br/>
-        <Button block label="关闭所有弹框服务" onClick={() => $dialog.closeAll()}/>
-      </>
-    });
-  };
-
-  return () => (
-    <DemoRow title="多实例&关闭所有对话框">
-      <Button label="新弹框" onClick={newDlg}/>
-    </DemoRow>
-  );
-});
-
-export const demo7 = designPage(() => {
-  return () => (
-    <DemoRow title="默认的关闭按钮">
-      <Button label="square close button" onClick={() => {
-        $dialog({
-          closeType: null as any,
-          render: () => <>
-            <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
-          </>
-        });
-      }}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo_1 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const showDialog = () => {
-    $dialog({
-      onClose: () => {$message('close');},
-      render: () => (
-        <>
-          <Input modelValue="hello world"/>
-          <br/>
-          <Button label="open dialog" block onClick={showDialog}/>
-        </>
-      )
-    });
-  };
-
-  return () => (
-    <DemoRow title="监听onClose">
-      <Button label="open dialog" onClick={showDialog}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo_9 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const showDialog = $dialog.useHoldDialog({
-    render: () => (
-      <>
-        <Input modelValue="hello world"/>
-        <br/>
-        <Button label="open dialog" block onClick={showDialog}/>
-      </>
-    )
-  });
-
-  return () => (
-    <DemoRow title="占用服务实例">
-      <p>会保留持有dialog组件实例，关闭的时候不会销毁内容，其他地方在复用组件服务的时候会略过被持有的dialog实例</p>
-      <p>需要保留option，不能每次用新的option来调用</p>
-      <p>当页面销毁的时候，会自动销毁持有的dialog服务实例</p>
-      <Button label="open dialog" onClick={showDialog}/>
-    </DemoRow>
-  );
-});
-
-export const demoInput = designPage(() => {
-
-  let inputValue: string | number | null | undefined = '默认文本';
-
-  return () => (
-    <DemoRow title={'输入对话框'}>
-      <Button label={'input'} onClick={() => $dialog({
-        editType: 'input',
-        editValue: inputValue,
-        editRequired: true,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'input readonly'} onClick={() => $dialog({
-        editType: 'input',
-        editValue: inputValue,
-        editReadonly: true,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'textarea'} onClick={() => $dialog({
-        editType: 'textarea',
-        editValue: inputValue,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'textarea readonly'} onClick={() => $dialog({
-        editType: 'textarea',
-        editValue: inputValue,
-        editReadonly: true,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'number'} onClick={() => $dialog({
-        editType: 'number',
-        editValue: 100,
-        handleConfirm: ({ editValue }) => {
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/service/DemoFileService.tsx

@@ -1,110 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$file, Button, FileServiceChooseFileConfig, FileServiceSingleFile} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const getSingleFile = async (option?: FileServiceChooseFileConfig) => {
-    const file = await $file.chooseFile(option);
-    console.log('success', file);
-  };
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <Button label={'获取单个文件'} onClick={() => getSingleFile()}/>
-    </DemoRow>
-  );
-});
-export const demo2 = designPage(() => {
-
-  const getSingleFile = async (option?: FileServiceChooseFileConfig) => {
-    const file = await $file.chooseFile(option);
-    console.log('success', file);
-  };
-
-  return () => (
-    <DemoRow title={'其他'}>
-      <Button onClick={() => getSingleFile({ multiple: true })} label="获取多个文件"/>
-      <Button onClick={() => getSingleFile({ max: 5 })} label="获取单个文件，最大5M"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true })} label="获取多个文件，最大5M"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true, accept: 'image' })} label="获取多个文件，类型为图片"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true, accept: 'excel' })} label="获取多个文件，类型为Excel文档"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true, accept: 'image/png' })} label="获取多个文件，类型为自定义"/>
-    </DemoRow>
-  );
-});
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    base64: null as null | string,
-  });
-
-
-  const showImage = async () => {
-    const file = await $file.chooseImage();
-    const base64 = await $file.readAsDataURL(file as FileServiceSingleFile);
-    state.base64 = base64 as string;
-  };
-
-  return () => (
-    <DemoRow title={'获取图片base64字符串'}>
-      <Button label={'获取图片之后展示图片'} onClick={() => showImage()}/>
-      <div>
-        {!!state.base64 && <img src={state.base64} style={{ maxWidth: '100px', maxHeight: '100px' }}/>}
-      </div>
-    </DemoRow>
-  );
-});
-export const demo4 = designPage(() => {
-
-  async function uploadFile() {
-    const file = await $file.chooseFile();
-    await $file.upload({
-      action: 'http://1.116.13.72:7001/uploadFile',
-      file,
-      filename: 'file',
-      data: {
-        headId: '123',
-        module: 'single',
-      },
-      onProgress(data) {
-        console.log('progress', data);
-      },
-      onSuccess(...args) {
-        console.log('success', ...args);
-      },
-      onError(...args) {
-        console.log('error', ...args);
-      },
-    });
-  }
-
-  async function uploadFiles() {
-    const file = await $file.chooseFile({ multiple: true });
-    await $file.upload({
-      action: 'http://193.112.75.134/server/upload/uploadFiles',
-      file,
-      filename: 'files',
-      data: {
-        headId: '456',
-        module: 'multiple',
-      },
-      onProgress(data) {
-        console.log('progress', data);
-      },
-      onSuccess(...args) {
-        console.log('success', ...args);
-      },
-      onError(...args) {
-        console.log('error', ...args);
-      },
-    });
-  }
-
-  return () => (
-    <DemoRow title={'获取文件，然后上传文件'}>
-      <Button label={'上传文件'} onClick={uploadFile}/>
-      <Button label={'上传多个文件'} onClick={uploadFiles}/>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/service/DemoImagePreviewer.tsx

@@ -1,185 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$previewer} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-import {ImagePreviewer} from "../../../../packages/components/ImagePreviewer";
-import {createImagePreviewerOption} from "../../../../packages/components/ImagePreviewer/image-previewer.utils";
-
-export const DemoDocument = designPage(() => {
-  return () => (
-    <DemoRow title="使用手册">
-      <p>1、默认情况下ImagePreviewer会撑满宽度，然后高度由图片自动撑开；下边第一个示例设置了宽度800px，高度自动由图片撑开，如果多张图片高度不一致，则由高度最大的图片撑开；</p>
-      <p>2、ImagePreviewer分为三个区域，一个是顶部的按钮栏，中间图片展示栏，底部的画廊栏；</p>
-      <p>3、可以使用鼠标滚动，或者点击按钮栏的放大缩小按钮对当前展示的图片进行缩放；</p>
-      <p>4、可以点击旋转按钮，对图片进行旋转；</p>
-      <p>5、缩放或者旋转之后可以拖拽图片调整查看具体的图片位置；</p>
-      <p>6。在没有缩放或者旋转的状态下，左右滑动来切换浏览的图片；</p>
-      <p>7、点击按钮栏的重置按钮，或者缩放图片为原始大小，会自动令图片回正，回正就是原始状态，此时可以左右滑动切换浏览图片；</p>
-      <p>8、点击左右按钮切换图片也会令图片回正；</p>
-      <p>9、底部画廊在超长溢出的情况下可以拖拽左右滚动，也可以使用鼠标滚动上下滚动，触摸板左右滚动也可以支持；</p>
-      <p>10、触摸板左右的按钮点击可以自动滚动到上一页，下一页；每次滚动距离为半页距离；</p>
-      <p>11、快捷键：ESC（关闭全屏浏览）；左按键（上一张图）；右按键（下一张图）；滚轮向上（放大）；滚轮向下（缩小）；</p>
-    </DemoRow>
-  );
-});
-
-export const DemoImagePreviewer = designPage(() => {
-
-  const imageList = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/1.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/2.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/3.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/4.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/5.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/6.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/7.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/8.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/9.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/10.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/11.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/12.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/13.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/14.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/15.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/16.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/17.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/18.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/19.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/20.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/21.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/22.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
-  ];
-
-  const option = createImagePreviewerOption(imageList);
-  option.button = { close: false };
-  option.galleryHeight = 60;
-
-  return () => (
-    <DemoRow title="基本用法">
-      <div style={{ width: '500px', maxWidth: '100%' }}>
-        <ImagePreviewer option={option}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoImagePreview = designPage(() => {
-
-  const imageList = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/mountains.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-262367.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-athena-1586795.jpg?x-oss-process=image/resize,h_1080,m_lfit"
-  ];
-
-  return () => (
-    <DemoRow title="图片预览">
-      <DemoLine>
-        <p>1. 调用预览服务的时候如果传入原始的imageElement这个dom对象的话，初始会有一个放大动画</p>
-        <p>2. 双击可以关闭预览，或者ESC按键或者点击顶部的关闭按钮都可以关闭预览</p>
-      </DemoLine>
-      <DemoLine>
-        {imageList.map((item, index) => (
-          <img style={{ height: '100px' }} src={item} key={index} onClick={e => $previewer.preview({ current: index, urls: imageList }, e.currentTarget as any)}/>
-        ))}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-
-export const demoImagePreview2 = designPage(() => {
-
-  const imageList = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/mountains.jpg??x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-262367.jpg??x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-athena-1586795.jpg?x-oss-process=image/resize,h_1080,m_lfit&?v=1"
-  ];
-
-  return () => (
-    <DemoRow title="关闭时没有原始图片">
-      <p>关闭时没有原始图片的情况下，关闭动画会往底部缩小并且关闭</p>
-      {imageList.map((item, index) => (
-        index == 0 ? null : <img style={{ height: '100px' }} src={item} key={index} onClick={e => $previewer.preview({ current: index, urls: imageList }, e.currentTarget as any)}/>
-      ))}
-    </DemoRow>
-  );
-});
-
-export const demoImagePreview3 = designPage(() => {
-
-  const imageList = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/1.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/2.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/3.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/4.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/5.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/6.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/7.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/8.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/9.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/10.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/11.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/12.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/13.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/14.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/15.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/16.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/17.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/18.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/19.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/20.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/21.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/22.jpg?x-oss-process=image/resize,h_1080,m_lfit",
-  ];
-
-  return () => (
-    <DemoRow title="多图预览示例">
-      {imageList.map((item, index) => (
-        <img style={{ height: '100px' }} src={item} key={index} onClick={e => $previewer.preview({ current: index, urls: imageList }, e.currentTarget as any)}/>
-      ))}
-    </DemoRow>
-  );
-});
-
-
-export const demoImagePreview4 = designPage(() => {
-
-  const imageList = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/1.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/2.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/3.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/4.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/5.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/6.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/7.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/8.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/9.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/10.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/11.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/12.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/13.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/14.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/15.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/16.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/17.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/18.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/19.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/20.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/21.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/22.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
-  ];
-
-  return () => (
-    <DemoRow title="无原始图预览示例">
-      <p>1. 没有加载过的图片url，第一次预览的时候会显示加载状态；</p>
-      <p>2. 画廊使用的是虚拟滚动，所以并不是所有图片会立即加载，画廊滚动的时候会预初始化下一页图片，也就是会预加载下一页</p>
-      <ul>
-        {imageList.map((item, index) => (
-          <li key={index} onClick={() => $previewer.preview({ current: index, urls: imageList })} style={{ lineHeight: '40px' }}>
-            ITEM_${item}
-          </li>
-        ))}
-      </ul>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/service/DemoMessageService.tsx

@@ -1,100 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {Button, useMessage} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {MessageDirection} from "../../../../packages/components/useMessage/message.service.utils";
-import {FixInput} from "../../../../packages/utils/FixInput";
-
-export const demo1 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button label="show message" onClick={() => [$message('保存完毕！'), $message('保存完毕！222')]}/>
-    </DemoRow>
-  );
-});
-export const demo2 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="带状态的消息提示">
-      <Button label="Primary" onClick={() => $message.primary('保存完毕！')} mode="fill" status="primary"/>
-      <Button label="Success" onClick={() => $message.success('保存完毕！')} mode="fill" status="success"/>
-      <Button label="Warn" onClick={() => $message.warn('保存完毕！')} mode="fill" status="warn"/>
-      <Button label="Error" onClick={() => $message.error('保存完毕！')} mode="fill" status="error"/>
-      <Button label="Secondary" onClick={() => $message.secondary('保存完毕！')} mode="fill" status="secondary"/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="自定义停留时长">
-      <Button label="1s" onClick={() => $message({ message: '保存完毕！', time: 1000 })}/>
-      <Button label="手动关闭" onClick={() => $message({ message: '保存完毕！', time: null })}/>
-    </DemoRow>
-  );
-});
-export const demo4 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title={'位置'}>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.start, vertical: MessageDirection.start })} label="左上"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.center, vertical: MessageDirection.start })} label="中上"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.end, vertical: MessageDirection.start })} label="右上"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.start, vertical: MessageDirection.center })} label="左中"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.center, vertical: MessageDirection.center })} label="中中"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.end, vertical: MessageDirection.center })} label="右中"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.start, vertical: MessageDirection.end })} label="左下"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.center, vertical: MessageDirection.end })} label="中下"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.end, vertical: MessageDirection.end })} label="右下"/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button onClick={() => $message('提示信息！', { time: 1000, onClose: () => console.log('close') })} label="一秒后自动关闭"/>
-      <Button onClick={() => $message('提示信息！', { time: null })} label="不自动关闭"/>
-      <Button onClick={() => $message('提示信息！', { onClose: () => console.log('done') })} label="监听结束事件"/>
-      <Button onClick={() => $message('提示信息！', { onClick: () => console.log('click') })} label="监听点击事件"/>
-    </DemoRow>
-  );
-});
-export const demo6 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  const state = reactive({
-    text: '自定义编辑文本'
-  });
-
-  const closeDemo = () => {
-    const close = $message({
-      render: () => (
-        <div>
-          <FixInput style={{ marginRight: '10px' }} v-model={state.text}/>
-          <Button label="close" mode="text" onClick={() => close()}/>
-        </div>
-      )
-    });
-  };
-
-  return () => (
-    <DemoRow title="自定义内容">
-      <Button onClick={closeDemo} label="show"/>
-      {state.text}
-    </DemoRow>
-  );
-});