weaver-e10-builder 1.0.11-beta → 1.1.0

package/skill-docs/references/components/display-Avatar.md

@@ -0,0 +1,150 @@
+## 基础用法
+
+```js
+import { Component } from 'react';
+import { Avatar, constants } from '@weapp/ui';
+
+const AvatarImage1 = 'https://cdn-static-test1.eteams.cn/build/ui/static/media/avatar_demo_1.jpeg?v=c46ea46f';
+const AvatarImage2 = 'https://cdn-static-test1.eteams.cn/build/ui/static/media/avatar_demo_2.jpg?v=0456c2c7';
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-avatar`;
+
+// avatarConfigList 配置：展示不同的头像效果
+const avatarConfigList = [
+  // 1. 图片显示
+  {
+    description: '图片显示',
+    url: AvatarImage1,
+  },
+  // 2. 默认性别展示 - 男
+  {
+    description: '默认性别 - 男',
+    gender: 'male',
+  },
+  // 3. 默认性别展示 - 女
+  {
+    description: '默认性别 - 女',
+    gender: 'female',
+  },
+  // 4. 默认姓名首字母
+  {
+    description: '默认姓名首字母(女)',
+    name: '王晓晓 (南京)',
+    gender: 'female',
+    defaultAvatarConfig: {
+      avatarType: 'surName',
+      avatarFemaleFontColor: '#FFF',
+      avatarFemaleBgColor: '#EF8BBA',
+    }
+  },
+  // 5. 默认姓名后两字
+  {
+    description: '默认姓名后两字(女)',
+    name: '王晓晓（上海）',
+    gender: 'female',
+    defaultAvatarConfig: {
+      avatarType: 'shortName',
+      avatarFemaleFontColor: '#FFF',
+      avatarFemaleBgColor: '#EF8BBA',
+    }
+  },
+  // 6. 默认固定图片 - 裁剪模式
+  {
+    description: '默认固定图片 - 裁剪模式',
+    gender: 'female',
+    defaultAvatarConfig: {
+      avatarType: 'image',
+      avatarFemaleImage: AvatarImage2,
+      avatarImageEffect: 'crop',
+    }
+  },
+  // 7. 默认固定图片 - 原比例底色填充模式
+  {
+    description: '默认固定图片 - 原比例填充模式',
+    gender: 'female',
+    defaultAvatarConfig: {
+      avatarType: 'image',
+      avatarFemaleImage: AvatarImage2,
+      avatarImageEffect: 'fill',
+      avatarImageBorderColor: '#D7D7D7',
+      avatarImageBgColor: '#FFFFFF',
+    }
+  },
+];
+
+class AvatarDemo extends Component {
+  render() {
+    return (
+      <div className={prefixCls}>
+        <div className={`${prefixCls}-grid`}>
+          <h4>个人头像</h4>
+          {avatarConfigList.map((config, index) => (
+            <div key={index} className={`${prefixCls}-item`}>
+              <div className={`${prefixCls}-item-label`}>{config.description}</div>
+              <div className={`${prefixCls}-item-content`}>
+                <Avatar
+                  size="lg"
+                  shape="circle"
+                  {...config}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AvatarDemo;
+```
+## 具体参数
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+|------|------|------|----------|--------|
+| anonymous | 是否匿名 | boolean | 否 | false |
+| avatarIconProps | 图标属性 | IconProps | 否 | - |
+| className | class 名 | string | 否 | - |
+| customRender | 自定义组件渲染 | `(props: any, ele: ReactElement) => ReactElement` | 否 | - |
+| defaultAvatarConfig | 自定义头像的默认配置（不从统一的配置中读取，但是属性需要按照统一的属性） | object | 否 | - |
+| gender | 性别 | `'male' \| 'female'` | 否 | `'male'` |
+| imgFormat | 请求头像图片尺寸，small 表示压缩后的图片，请求速度会更快，image 表示原图 | `'small' \| 'big' \| 'image'` | 否 | `'small'` |
+| inHrmCard | 是否在人力卡片中使用（处理 ie 浏览器图片自适应问题） | boolean | 否 | false |
+| isGroup | 是否为群组头像 | boolean | 否 | false |
+| loginFree | 是否为免登场景 | boolean | 否 | false |
+| name | 姓名 | string | 人员头像必填 | - |
+| onClick | 自定义头像点击事件 | `(userId?: string) => void` | 否 | - |
+| prefixCls | 默认组件 class 名 | string | 否 | - |
+| shape | 形状 | `'circle' \| 'square'` | 否 | `'circle'` |
+| size | 尺寸 | `'lg' \| 'md' \| 'sm' \| 'xs'` | 否 | `'lg'` |
+| status | 状态 | `'online' \| 'offline'` | 否 | - |
+| statusIcon | 在线状态图标 | `IconName \| ReactNode` | 否 | - |
+| style | 样式 | CSSProperties | 否 | - |
+| url | 图片地址 | string | 人员 \| 群组头像必填 | - |
+| useAnonymous | 强制使用匿名展示 | boolean | 否 | false |
+
+### defaultAvatarConfig 参数配置说明：
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+|------|------|------|----------|--------|
+| avatarFemaleBgColor | 女性头像背景颜色（avatarType 为姓名相关时生效） | string | 否 | `'#EF8BBA'` |
+| avatarFemaleFontColor | 女性头像文字颜色（avatarType 为姓名相关时生效） | string | 否 | `'#FFF'` |
+| avatarFemaleImage | 女性头像默认图片 | string | 否 | - |
+| avatarImageBgColor | 背景色（仅在 avatarImageEffect='fill' 时生效） | string | 否 | `'#FFF'` |
+| avatarImageBorderColor | 边框色（仅在 avatarImageEffect='fill' 时生效） | string | 否 | `'#D7D7D7'` |
+| avatarImageEffect | 图片头像效果 | `'crop' \| 'stretch' \| 'fill'` | 否 | `'crop'` |
+| avatarMaleBgColor | 男性头像背景颜色（avatarType 为姓名相关时生效） | string | 否 | `'#5D9CEC'` |
+| avatarMaleFontColor | 男性头像文字颜色（avatarType 为姓名相关时生效） | string | 否 | `'#FFF'` |
+| avatarMaleImage | 男性头像默认图片 | string | 否 | - |
+| avatarType | 默认头像格式 | `'surName' \| 'shortName' \| 'image'` | 否 | `'surName'` |
+
+> 注意事项：
+1. IconProps、IconName 参数说明： 都是 Icon 图标组件的参数配置，如果未收录相关能力不要随意设置
+2. avatarType 参数说明：
+  - surName: 姓名首字
+  - shortName: 姓名后两字（会自动过滤括号中的备注内容，如"王晓晓 (南京)"会显示为"晓晓"）
+  - image: 固定图片
+3. avatarImageEffect 参数说明：
+  - crop: 裁剪模式，1:1比例，填充整个容器（object-fit: cover）
+  - stretch: 拉伸模式，不管原始图片宽高，统一宽高100%显示（object-fit: fill）
+  - fill: 原比例填充模式，保持原始比例，完整显示，支持设置边框色和背景色（object-fit: contain）

package/skill-docs/references/components/display-Calendar.md

@@ -0,0 +1,263 @@
+## 基础用法
+
+```tsx
+import { Component } from 'react';
+import { Calendar, Button, DateQuickFilter } from '@weapp/ui'
+
+interface State {
+  events?: any[];
+  date?: string | number | Date;
+  dateExtra: any;
+  holidayEndDate: any;
+}
+
+export default class CalendarDemo extends Component<any, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      date: '2021-3-26',
+      holidayEndDate: '2021-06-01',
+      events: [
+        {
+          id: '1',
+          title: '非全天数据',
+          start: '2021-03-01 08:00',
+          end: '2021-03-01 18:00',
+          borderColor: '#81AFE2',
+        },
+        {
+          id: '1.5',
+          title: 'All Day Event',
+          start: '2021-03-02',
+          end: '2021-03-05',
+          backgroundColor: '#DCEDFF',
+          borderColor: '#81AFE2',
+          textColor: 'black',
+          addTitle: '测试追加title'
+        },
+        {
+          id: '2',
+          title: '测试数据001',
+          start: '2021-03-07',
+          end: '2021-03-10',
+          backgroundColor: '#E5E5E5',
+          borderColor: '#A7A7A7'
+        },
+        {
+          id: '3',
+          groupId: 999,
+          title: 'Repeating Event',
+          start: '2021-03-09',
+          end: '2021-03-09',
+          backgroundColor: '#DCEDFF',
+          borderColor: '#81AFE2',
+        },
+        {
+          id: '4',
+          title: 'Conference',
+          start: '2021-03-11',
+          end: '2021-03-13',
+          backgroundColor: '#DCEDFF',
+          borderColor: '#81AFE2',
+        },
+        {
+          id: '5',
+          title: '今日关注',
+          start: '2021-03-12',
+          end: '2021-03-12',
+          backgroundColor: '#FFF1D6',
+          borderColor: '#D7B167'
+        },
+      ],
+      dateExtra: {
+        '2021-03-15': { info: true, sign: { text: '班', textIcon: 'Icon-WeChat03-o', color: '#FAAD14', icon: 'Icon-WeChat03-o' } },
+        '2021-03-16': { info: true, sign: { text: '休', color: '#52C41A', icon: 'Icon-robot' } },
+        '2021-03-17': { info: true, sign: { icon: 'Icon-like', color: '#5d9cec' } },
+        '2021-03-18': { info: true, sign: { text: '休', textIcon: 'Icon-robot', color: '#5d9cec' } },
+        '2021-03-19': { info: true, sign: { text: '假' } },
+        '2021-03-20': { info: true, sign: { icon: 'Icon-Speechless', } },
+        '2021-03-22': { info: true, sign: { icon: ['Icon-WeChat03-o', 'Icon-Speechless'] } },
+        '2021-03-23': {
+          info: true,
+          sign: {
+            icon: [
+              { name: 'Icon-WeChat03-o', color: '#FAAD14' },
+              { name: 'Icon-robot', color: '#52C41A' },
+              'Icon-like'
+            ]
+          }
+        },
+        '2021-03-25': { info: true, sign: { icon: 'Icon-WeChat03-o', text: "休", textIcon: "Icon-Rest-mcolor" } },
+      }
+    };
+  }
+
+  eventClick = (arg?: any) => {}
+  eventDrop = (arg?: any) => {}
+  onCellClick = (arg?: any) => {}
+  onMultiSelect = (dates?: any[]) => {}
+  select = (arg?: any) => {}
+
+  // 当通知事项过多时，会展示
+  moreLinkContent = (arg: any) => {
+    return `<div>更多</div>`
+  }
+
+  changeHolidayEndDate = () => this.setState({ holidayEndDate: '2021-12-31' })
+  onDatePickerChange = (value: any) => this.setState({ date: value as string })
+  eventMouseEnter = (data: any) => console.info('eventMouseEnter', data)
+
+  render() {
+    const { events, date, dateExtra } = this.state;
+    return (<div style={{ height: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <DateQuickFilter type={'month'} value={date} onChange={this.onDatePickerChange} style={{ marginRight: '10px' }} />
+        <Button onClick={this.changeHolidayEndDate} type={'primary'}>改变holidayEndDate</Button>
+      </div>
+      <Calendar date={date}/>
+      <br />
+      <Calendar date={date} mode={'week'}/>
+      <br />
+      <Calendar date={date} mode={'doubleWeek'} weekNames={["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]} contentHeight={800} dateExtra={dateExtra} hideLunar={true} />
+      <br />
+      <Calendar
+        events={events}
+        date={date}
+        eventClick={this.eventClick}
+        contentHeight={800}
+        isDrag={true}
+        eventDrop={this.eventDrop}
+        weekNames={["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]}
+        onMultiSelect={this.onMultiSelect}
+        onCellClick={this.onCellClick}
+        dateExtra={dateExtra}
+        selectable={true}
+        select={this.select}
+        moreLinkContent={this.moreLinkContent}
+        titlePopoverVisible={false}
+        fullcalendarProps={{
+          eventConstraint: {
+            start: '10:00',
+            end: '18:00',
+          },
+        }}
+        holidayStartDate={'2021-1-1'}
+        holidayEndDate={this.state.holidayEndDate}
+      />
+    </div>);
+  }
+}
+```
+
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| allDayText | 自定义全天视图名称 | string | | |
+| contentHeight | 视图高度 | number | | 600 |
+| customHolidayDatas | 自定义节假日数据配置 | any[] | | |
+| customHolidayUrlDatas | 自定义获取节假日接口数据配置 | any | | |
+| date | 展示日期 | Date / string | | |
+| dateExtra | 日期标识，如： 班，休 | any | | |
+| endTime | 周,日模式下结束时间， 如： '18:00' | string | | |
+| eventClick | 点击通知事项回调 | (arg?: any) => void; | | |
+| eventDrop | 拖拽停止并且已经拖拽到其它位置了 | (arg?: any) => void; | | |
+| eventResize | 大小调整完成并已经执行更新时触发 | (arg?: any) => void; | | |
+| events | 通知事项数据源 | any[] | | |
+| fixedWeekCount | 是否显示非本月数据 | boolean | | false |
+| fullcalendarProps | fullcalendar 原有 props 都在此处配置 | any | | |
+| getInstance | 获取 calendar 实例 | (calendar: any ) => void | | |
+| hideLunar | 是否隐藏农历 | boolean | | false |
+| holidayEndDate | 接口内配置：节假日查询的结束日期 | 可被 dayjs()解析的类型 | | |
+| holidayStartDate | 接口内配置：节假日查询的开始日期 | 可被 dayjs()解析的类型 | | |
+| isDrag | 通知事项是否可以拖动 | boolean | | false |
+| lineHeight | 周，日模式下行高 | number | | |
+| lunarFestival | 阴历节日 | string[] | | |
+| mode | 初始模式 | month, doubleWeek, week, day | | |
+| moreLinkContent | 自定义更多标签 | (arg?: any) => string; | | |
+| navLinks | 日期 label 是否可以点击 | boolean | | false |
+| needHoliday | 是否开启节假日模式 | boolean | | true |
+| nowTimeline | 日模式下，当前时间线(红色) | boolean | | false |
+| onCellClick | 点击格子空白区域回 | (arg?: any) => void; | | |
+| onMultiSelect | 多选日期回调 | (dates?: any[]) => void; | | |
+| renderEventContent | 自定义渲染每条数据 | (eventContent?: EventContentArg) => string; | | |
+| renderWeekTopTitle | 周模式下，顶部周信息自定义渲染 | renderWeekTopTitle?:(arg?: Date) => string | | |
+| scrollTime | 日,周模式下滚动区域偏移时间点 | string | | '10:00:00' |
+| select | 点击空白区域/选择区域内容触发 | (arg?: any) => void/boolean | | 使用该属性时， selectable 需为 true,return true 清除选中样式 |
+| selectable | 是否允许长按鼠标选择区域 | boolean | | false |
+| showSolarTerm | 是否展示节气 | boolean | | |
+| slotDuration | 一格时间槽代表多长时间，默认 00:30:00（30 分钟） | string | | |
+| slotEventOverlap | 相同时间段的多个日程视觉上是否允许重叠 | boolean | | true |
+| slotLabelFormat | 周模式下，自定义渲染左侧时间区域 | any[] | | |
+| solarFestival | 阳历节日 | string[] | | |
+| startTime | 周,日模式下起始时间， 如： '08:00' | string | | |
+| titlePopoverVisible | 标题鼠标放上去是否隐藏 title | boolean | | false |
+| useAttendanceHoliday | 是否接入考勤组接口数据 | boolean | | |
+| useAttendanceSameViewHoliday | 是否使用面板内同视图的节假日数据 | boolean | | |
+| weekNames | 月模式下日历周显示标签 | string[] | | |
+| weekStart | 设置一周中显示的第一天是哪天，周日是 0，周一是 1，类推 | number | | 1 |
+
+### 节假日模式说明
+```tsx
+calendar组件耦合了后端节假日接口 /api/attend/web/calendar/queryHolidayByUser,
+请求方式如下
+{
+  url: `/api/attend/web/calendar/queryHolidayByUser`,
+  method: 'post',
+  data: {
+    "userId": id, //此id为 window?.TEAMS?.currentUser?.id
+    "beginDate": holidayStartDate, //当未传值或不合法时，会按照当前日期当月的开始日期传入
+    "endDate": holidayEndDate //当未传值或不合法时，会按照当前日期当月的结束日期传入
+  }
+}
+1.openHoliday默认为ture，会开启节假日模式
+2.holidayDatas数据格式如下
+{
+  "id":"3573169252047636086",//必填
+  "day":1633017600000, //必填
+  "type":"HOLIDAY", //必填
+  "status":"VALID",//必填 -> 当为 'VALID'时，才会添加类名
+}
+3.calendar组件会根据返回结果的status状态和day的日期类型，赋值给fc-daygrid-day的每个单元格以type的class类名，用户可以根据需求自定义复写样式
+4.当传入customHolidayUrlDatas，内部会将customHolidayUrlDatas作为请求参数发起请求，并在内部处理返回数据给内部holidayDatas
+5.当前端直接传入了customHolidayDatas时，会直接将值符给内部holidayDatas，不走接口
+6.当走自定义url或customHolidayDatas时，需要注意返回的数据格式
+```
+### dataExtra说明
+```tsx
+按照以下下数据为例
+const dateExtra = {
+        '2021-03-15': { info: true, sign: { text: '班', textIcon: 'Icon-WeChat03-o', color: '#FAAD14', icon: 'Icon-WeChat03-o' } },
+        '2021-03-16': { info: true, sign: { text: '休', color: '#52C41A', icon: 'Icon-robot' } },
+        '2021-03-17': { info: true, sign: { icon: 'Icon-like', color: '#5d9cec' } },
+        '2021-03-18': { info: true, sign: { text: '休', textIcon: 'Icon-robot', color: '#5d9cec' } },
+        '2021-03-19': { info: true, sign: { text: '假' } },
+        '2021-03-20': { info: true, sign: { icon: 'Icon-Speechless', } },
+        '2021-03-22': { info: true, sign: { icon: ['Icon-WeChat03-o', 'Icon-Speechless'] } },
+        '2021-03-23': {
+          info: true,
+          sign: {
+            icon: [
+              { name: 'Icon-WeChat03-o', color: '#FAAD14' },
+              { name: 'Icon-robot', color: '#52C41A' },
+              'Icon-like'
+            ]
+          }
+        },
+      }
+1.sign表示开启额外数据展示
+2.当sign中的text存在时，开启月模式单元格头部右上角展示（展示文字），当textIcon存在时，右上角展示图标，text内容在鼠标hover时出现
+3.color表示右上角展示底色 
+4.icon表示月模式单元格头部日期右侧的额外图标
+```
+### solarFestival与lunarFestival说明
+```tsx
+按照以下下数据为例
+const solarFestival = ['0303 三月三号节日','0404 四月四号节日']
+const lunarFestival = ['0303 三月初三','0404 四月初四']
+分别代表农历节日与阳历节日
+同时也可以用ecode来控制
+const solarFestival = window?.weapp_ui_sFtv || window?.weapp_ui_solarFestival
+const lunarFestival = window?.weapp_ui_lFtv || window?.weapp_ui_lunarFestival
+const showSolarTerm = window?.weapp_ui_showSolarTerm
+```

package/skill-docs/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
+>
+```