weaver-work-cli 0.1.24 → 0.1.26

package/skills/weaver-e10-builder/references/components/display-Carousel.md

@@ -0,0 +1,115 @@
+## 基础用法
+
+```tsx
+import React from "react";
+import { Carousel, constants } from "@weapp/ui";
+
+const s1 = "https://scpic.chinaz.net/files/pic/pic9/201801/zzpic9638.jpg";
+const s2 =
+  "https://scpic3.chinaz.net/Files/pic/pic9/201801/zzpic9478_s_w285.jpg";
+const s3 =
+  "https://scpic3.chinaz.net/Files/pic/pic9/201806/zzpic12518_s_w285.jpg";
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-carousel`;
+
+export default class CarouselDemo extends React.Component {
+  onImagesReady = (swiper: any) => {};
+
+  render() {
+    return (
+      <div className={prefixCls}>
+        <h2>横向滚动</h2>
+        <div style={{ background: "gray" }}>
+          <Carousel
+            fillWays="imgFill"
+            navigation={true}
+            speed={2000}
+            effect="slide"
+            pagination={{ type: "bullets" }}
+            onSlideChange={this.onSlideChange}
+            onSwiper={this.onSwiper}
+          >
+            <div style={{ height: "200px" }}>横向滚动 1</div>
+            <div style={{ height: "200px" }}>横向滚动 2</div>
+            <div style={{ height: "200px" }}>横向滚动 3</div>
+            <div style={{ height: "200px" }}>横向滚动 4</div>
+          </Carousel>
+        </div>
+        <h2>横向滚动</h2>
+        <Carousel
+          fillWays="backgroundFill"
+          effect="fade"
+          fadeEffect={{ crossFade: true }}
+          navigation
+          loop
+          autoHeight
+          effect="cube"
+          onImagesReady={this.onImagesReady}
+        >
+          <img src={s1} alt="" />
+          <img src={s2} alt="" />
+          <img src={s3} alt="" />
+        </Carousel>
+        <h2>纵向滚动</h2>
+        <Carousel
+          style={{ height: "300px" }}
+          fillWays="backgroundFill"
+          fadeEffect={{ crossFade: true }}
+          navigation
+          loop
+          autoHeight
+          direction="vertical"
+        >
+          <img src={s1} alt="" />
+          <img src={s2} alt="" />
+          <img src={s3} alt="" />
+        </Carousel>
+      </div>
+    );
+  }
+}
+```
+
+## 参数说明
+
+### 组件参数说明如下
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| autoplay | 自动切换 | boolean/Object | false | false |
+| effect | 切换方式 | slide\| fade\| cube\| coverflow\| flip | false | slide |
+| effects | 切换效果 | string | false | slide |
+| fadeEffect | fade 效果参数。可选参数：crossFade。 默认：false。关闭淡出。过渡时，原 slide 透明度为 1（不淡出），过渡中的 slide 透明度从 0->1（淡入），其他 slide 透明度 0。可选值：true。开启淡出。过渡时，原 slide 透明度从 1->0（淡出），过渡中的 slide 透明度从 0->1（淡入），其他 slide 透明度 0。 | boolean | false | false |
+| fillWays | 填充方式 | imgFill \| backgroundFill | false | backgroundFill |
+| loop | 是否轮播 | boolean | boolean | false |
+| navigation | 前进后退按钮 | boolean/Object | false | false |
+| onSlideChanger | 切换图片时的回调函数 | (swiperInstance)=>void | false | |
+| onSwiper | swiper加载完后执行 | (swiperInstance)=>void | false | |
+| pagination | 分页器 | boolea/Object | false | false |
+| slidesPerView | 设置 slider 容器能够同时显示的 slides 数量(carousel 模式) | number \| auto | false | 1 |
+| speed | 切换动画速度，即 slider 自动滑动开始到结束的时间（单位 ms），也是触摸滑动时释放至贴合的时间。 | number | false | 300 |
+
+### pagination配置说明
+```tsx
+pagination={{ type: 'bullets' }}
+1、横向滚动分页器类型，可选 bullets 圆点 fraction 分式 progress 进度条 custom 自定义
+2、纵向滚动分页器类型，可选fraction 分式 progress 进度条 custom 自定义
+```
+## 注意事项
+1、使用effect=fade时防止图片重叠请添加以下代码
+```tsx
+fadeEffect={{ crossFade: true }}
+```
+2、swiper默认会监听浏览器窗口的变化,如果carousel组件需要监听父级容器的视口变化请添加resizeObserver属性
+```tsx
+<Carousel
+    fillWays="backgroundFill"
+    weId={`${this.props.weId || ''}_013hkd`}
+    effect='fade'
+    fadeEffect={{ crossFade: true }}
+    navigation
+    loop
+    autoHeight
+    resizeObserver
+>
+```

package/skills/weaver-e10-builder/references/components/display-Collapse.md

@@ -0,0 +1,299 @@
+## 代码演示
+### 基础用法
+```tsx
+import React from "react";
+import { Collapse, Switch, Icon } from "@weapp/ui";
+
+export default class BasicDemo extends React.Component<{}> {
+  state = {
+    activeKey: "1",
+    bg: true,
+    accordion: false,
+    iconPosition: "right",
+  };
+
+  handleChange = (activeKey: any) => {
+    this.setState({
+      activeKey,
+    });
+  };
+
+  handleBgChange = (bg: boolean) => {
+    this.setState({ bg });
+  };
+
+  handleAccordionChange = (accordion: boolean) => {
+    this.setState({ accordion, activeKey: "1" });
+  };
+
+  handlePositionChange = (v: boolean) => {
+    this.setState({ iconPosition: v ? "right" : "left" });
+  };
+
+  customIconRender = (props: ICollapsePanelProps) => {
+    return (
+      <Icon
+        name={props.active ? "Icon-reduce03" : "Icon-add-to03"}
+        style={{ marginRight: "15px" }}
+      />
+    );
+  };
+
+  render() {
+    const { activeKey, bg, accordion } = this.state;
+    const titleBg = bg ? "default" : "none";
+
+    return (
+      <div>
+        <div style={{ margin: "20px 0" }}>
+          <span>
+            <Switch value={this.state.bg} onChange={this.handleBgChange} />
+            <span>&nbsp;&nbsp;底色</span>
+          </span>
+          <span style={{ marginLeft: 20 }}>
+            <Switch
+              value={this.state.accordion}
+              onChange={this.handleAccordionChange}
+            />
+            <span>&nbsp;&nbsp;手风琴</span>
+          </span>
+          <span style={{ marginLeft: 20 }}>
+            <Switch
+              value={this.state.iconPosition === "right"}
+              onChange={this.handlePositionChange}
+            />
+            <span>&nbsp;&nbsp;图标位置</span>
+          </span>
+        </div>
+        <Collapse
+          accordion={accordion}
+          panelTitleBackground={titleBg}
+          activeKey={activeKey}
+          onChange={this.handleChange}
+          bordered={false}
+          customIconRender={this.customIconRender}
+        >
+          <Collapse.Panel
+            title="标题一"
+            key="1"
+            iconPosition={this.state.iconPosition as "left" | "right"}
+          >
+            标题一内容标题一内容标题一内容标题一内容标题一内容
+          </Collapse.Panel>
+          <Collapse.Panel
+            title="标题二"
+            key="2"
+            iconPosition={this.state.iconPosition as "left" | "right"}
+          >
+            标题二内容标题二内容标题二内容标题二内容标题二内容标题二内容
+          </Collapse.Panel>
+          <Collapse.Panel
+            title="标题三"
+            key="3"
+            disabled
+            iconPosition={this.state.iconPosition as "left" | "right"}
+          >
+            标题三内容标题三内容标题三内容标题三内容标题三内容标题三内容
+          </Collapse.Panel>
+        </Collapse>
+      </div>
+    );
+  }
+}
+```
+### 编辑分组
+```tsx
+import React, { MouseEventHandler, ReactNode, ReactText } from 'react';
+import { Collapse, Icon, utils, ICollapsePanelProps } from '@weapp/ui';
+
+const { moveItem } = utils;
+
+interface CustomIconProps {
+  id?: string;
+  onClick?: (id?: string) => void;
+}
+
+class CustomIcon extends React.Component<CustomIconProps> {
+  onClick: MouseEventHandler = (e) => {
+    const { id, onClick } = this.props;
+    onClick?.(id);
+    e && e.stopPropagation();
+  }
+  render() {
+    return (<div>
+      <Icon name="Icon-N-Deleted" onClick={this.onClick} />
+    </div>)
+  }
+}
+
+export default class BasicDemo extends React.Component<{}> {
+  state = {
+    activeKey: '1',
+    bg: true,
+    accordion: false,
+    iconPosition: 'right',
+    groups: [
+      { id: '1', name: '标题1', defaultEditable: false },
+      { id: '2', name: '标题2', defaultEditable: false },
+      { id: '3', name: '标题3', defaultEditable: false },
+    ]
+  };
+
+  handleChange = (activeKey: any) => {
+    this.setState({
+      activeKey,
+    });
+  };
+
+  handleBgChange = (bg: boolean) => {
+    this.setState({ bg });
+  };
+
+  handleAccordionChange = (accordion: boolean) => {
+    this.setState({ accordion, activeKey: '1' });
+  };
+
+  handlePositionChange = (v: boolean) => {
+    this.setState({ iconPosition: v ? 'right' : 'left' });
+  };
+
+  onSortEnd = (evt: any) => {
+    const { oldIndex, newIndex, from, to } = evt;
+    if (from.dataset.index === to.dataset.index) {
+      // 分组内拖拽
+      const result = [...this.state.groups];
+      // 执行排序操作，更新result数据
+      moveItem(result, oldIndex, newIndex)
+      this.setState({ groups: result });
+    }
+  }
+
+  onEdit = (key?: string, value?: ReactText) => {
+    const result = [...this.state.groups]?.map((g) => {
+      if (g.id === key) {
+        return { ...g,name: value }
+      }
+      return g;
+    });
+    this.setState({ groups: result });
+  }
+
+  onAdd = () => {
+    const maxIds = this.state.groups.map((g) => Number(g.id));
+    const length = maxIds?.length > 0 ? Math.max(...maxIds) + 1 : 1;
+    const groups = [
+      ...this.state.groups,
+      { id: `${length}`, name: `标题${length}`, defaultEditable: true },
+    ]
+    this.setState({ groups });
+  }
+  
+  onDelete = (id?: string) => {
+    const groups = this.state.groups?.filter((g) => g.id !== id);
+    this.setState({ groups });
+  }
+
+  renderCustomIcon = (props: ICollapsePanelProps) => {
+    return (<CustomIcon id={props?.panelKey} onClick={this.onDelete}/>)
+  }
+  
+  customRenderTitle = (props: ICollapsePanelProps, com: ReactNode) => {
+    return (<div>{com}{this.renderCustomIcon(props)}</div>)
+  }
+
+  render() {
+    const { activeKey, bg, accordion } = this.state;
+    const titleBg = bg ? 'default' : 'none';
+    return (
+      <div>
+        <Collapse
+          accordion={accordion}
+          panelTitleBackground={titleBg}
+          activeKey={activeKey}
+          onChange={this.handleChange}
+          bordered={false}
+          editable
+          sortable
+          onSortEnd={this.onSortEnd}
+          onEdit={this.onEdit}
+          type="group"
+        >
+          {
+            this.state.groups?.map((group) => (
+              <Collapse.Panel
+                title={group?.name}
+                key={group.id}
+                iconPosition={this.state.iconPosition as 'left' | 'right'}
+                defaultEditable={group.defaultEditable}
+                customRenderTitle={this.customRenderTitle}
+              >
+                {group?.name}内容
+              </Collapse.Panel>
+            ))
+          }
+        </Collapse>
+        <div onClick={this.onAdd} >
+          <Icon name="Icon-add-to02" />
+          <span>添加数据</span>
+        </div>
+      </div>
+    );
+  }
+}
+```
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| accordion | 手风琴模式，一次只能有一个 active 的面板 | boolean | 否 | - |
+| activeKey | 当前打开的面板 id | string \| string[] | 否 | - |
+| bordered | 是否有外边框 | boolean | 否 | - |
+| className | 复写类名 | string | 否 | - |
+| customIconRender | 自定义渲染箭头图标 | props: ICollapsePanelProps => React.ReactNode | 否 | - |
+| direction | 折叠方向 | 'up'\|'down' | 否 | 'up' |
+| editable | 启用可编辑状态(仅分组标题为string类型支持) | boolean | 否 | - |
+| editableIcon | 自定义可编辑图标 | IconNames | 否 | - |
+| isClickOnRow | 是否点击整行折叠收缩 | boolean | 否 | true |
+| onChange | 切换面板的回调函数 | (value: string \| string[]) => any; | 否 | - |
+| onEdit | 编辑分组名称回调事件 | (key?: string, title?: ReactText) => void | 否 | - |
+| onSortEnd | 排序回调事件 | (evt: any) => void | 否 | - |
+| panelTitleBackground | Panel 标题底色 | string | 否 | - |
+| sortable | 启用排序 | boolean | 否 | - |
+| sortableIcon | 自定义排序图标 | IconNames | 否 | - |
+| sortableOptions | 自定义排序配置 | AnyObj | 否 | - |
+| type | 展示模式 | 'normal' \| 'group' | 否 | 'normal' |
+### 子组件 Collapse.Panel 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| bordered | 是否有边框 | boolean | 否 | - |
+| className | 复写类名 | string | 否 | - |
+| customIconRender | 自定义渲染箭头图标 | props: ICollapsePanelProps => React.ReactNode | 否 | - |
+| customRenderTitle | 渲染自定义标题区域 | (props: ICollapsePanelProps, com: React.ReactNode) => React.ReactNode | 否 | - |
+| defaultEditable | 默认可编辑 | boolean | 否 | - |
+| direction | 折叠方向 | 'up'\|'down' | 否 | 'up' |
+| disabled | 禁用 | boolean | 否 | - |
+| editable | 启用可编辑状态(仅分组标题为string类型支持) | boolean | 否 | - |
+| editableIcon | 自定义可编辑图标 | IconNames | 否 | - |
+| iconPosition | 图标位置 | 'right' \| 'left' | 否 | 'right' |
+| id | 面板 id | string | 否 | - |
+| isMobile | 是否移动端 | boolean | 否 | - |
+| onEdit | 编辑分组名称回调事件 | (key?: string, title?: ReactText) => void | 否 | - |
+| onSortEnd | 排序回调事件 | (evt: any) => void | 否 | - |
+| renderCustomIcon | 渲染自定义图标 | (props: ICollapsePanelProps) => React.ReactNode | 否 | - |
+| showArrow | 是否显示箭头图标 | boolean | 否 | true |
+| sortable | 启用排序 | boolean | 否 | - |
+| sortableIcon | 自定义排序图标 | IconNames | 否 | - |
+| style | 复写样式 | React.CSSProperties | 否 | - |
+| title | 面板标题 | React.ReactNode | 是 | - |
+### IAnimateHeightBaseProps类型如下
+```tsx
+export type IAnimateHeightOverflow = 'hidden' | 'scroll' | 'auto' | 'unset';
+export interface IAnimateHeightBaseProps {
+  appear?: boolean;
+  duration?: number;
+  easing?: string;
+  className?: string;
+  style?: CSSProperties;
+  overflow?: IAnimateHeightOverflow;
+}
+```

package/skills/weaver-e10-builder/references/components/display-FilePreview.md

@@ -0,0 +1,49 @@
+## 文件预览组件的使用
+
+```js
+import React from 'react';
+import { CorsComponent } from '@weapp/ui';
+
+export default class FilePreviewDemo extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <CorsComponent
+                app={'@weapp/file'}
+                compName={'FilePreview'}
+                id={'3084136555520685109'}
+                style={{ width: '100%', height: '200px' }}
+            />
+        );
+    }
+}
+```
+
+### 参数说明
+
+| 参数 | 说明 |
+|------|------|
+| `app` | 固定为 `'@weapp/file'` |
+| `compName` | 固定为 `'FilePreview'` |
+| `id` | 文件 ID（字符串），从附件字段的 `fileid` 获取 |
+| `style` | 容器样式，建议设置 `width` 和 `height` |
+
+### 获取文件 ID
+
+附件字段（FileComponent）的 `fileid` 可通过以下方式获取：
+
+**1. 从表单数据读取** — `getSimpleData` 对 FileComponent 字段返回 `fieldOptionId`（即 fileid）：
+```js
+var fileId = item[F.attachment];
+// 多文件时为逗号分隔，取第一个
+var firstFileId = (fileId || '').split(',')[0];
+```
+
+**2. 上传时** — 从 `uploadedFiles` 状态中获取：
+```js
+var fileId = uploadedFiles[0].fileid;
+```

package/skills/weaver-e10-builder/references/components/display-Icon.md

@@ -0,0 +1,66 @@
+# Icon - 图标组件
+
+> **重要：严禁自行编造图标名称！** 所有图标名必须通过 `e10-cli icon search {关键词}` 搜索获得，搜索结果中不存在的一律不准使用。不得凭记忆或猜测填写 name 属性。
+
+## 组件说明
+
+图标组件，支持内置图标、自定义SVG图标、iconfont图标等多种类型。
+
+## Props 参数
+
+| 参数名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| name | `IconNames` | 否 | - | 图标名称 |
+| component | `React.ReactNode` | 否 | - | 自定义图标组件 |
+| size | `'xxs' \| 'xs' \| 's' \| 'sm' \| 'md' \| 'lg'` | 否 | `md` | 图标大小 |
+| url | `string` | 否 | - | 图标图片地址 |
+| moduleColor | `moduleType` | 否 | - | 模块颜色 |
+| fromIconfontCN | `CustomIconOptions` | 否 | - | iconfont图标配置 |
+
+## 用法示例
+
+### 基础用法
+
+```tsx
+import { Icon } from '@weapp/ui';
+
+const App = () => {
+  return <Icon name="Icon-md02-mcolor" />;
+};
+```
+
+### 自定义大小
+
+```tsx
+<Icon name="Icon-md02-mcolor" size="lg" />
+```
+
+### 自定义颜色
+
+```tsx
+<Icon name="Icon-md02-mcolor" style={{ color: '#1890ff' }} />
+```
+
+### 自定义图标组件
+
+```tsx
+<Icon component={<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>} />
+```
+
+### Iconfont 图标
+
+```tsx
+<Icon
+  fromIconfontCN={{
+    scriptUrl: '//at.alicdn.com/t/font_xxx.js',
+  }}
+  name="icon-name"
+/>
+```
+
+## 注意事项
+
+1. `name` 为内置图标名称，具体参考图标库文档
+2. `size` 支持6种尺寸：xxs(12px)、xs(14px)、s(16px)、sm(18px)、md(20px)、lg(24px)
+3. `component` 优先级最高，其次是 `url`，最后是 `name`
+4. `fromIconfontCN` 用于加载 iconfont 图标