Merge branch 'feature/chat' of https://github.com/Tencent/tdesign-miniprogram into feature/chat

Author: zydemail

.eslintignore

@@ -1,3 +1,6 @@
 **/*.wxs
 miniprogram_dist
 node_modules
+
+# special files
+echarts.js

.github/workflows/typos-config.toml

@@ -9,4 +9,4 @@ nd = "nd"
 loosing = "loosing"
 
 [files]
-extend-exclude = ["CHANGELOG*.md", "changelog.json"]
+extend-exclude = ["CHANGELOG*.md", "changelog.json", "echarts.js"]

package.json

@@ -19,9 +19,9 @@
     "build:assets": "cross-env NODE_ENV=production gulp assets:build --gulpfile script/gulpfile.dist.js --cwd ./",
     "update:icons": "pnpm -C packages/tdesign-miniprogram/site update:icons",
     "update:css": "pnpm -C packages/tdesign-miniprogram/site update:css",
-    "lintfix": "eslint '{packages/components,packages/tdesign-miniprogram/example}/**/*.{js,ts}' --fix",
-    "lint": "eslint '{packages/components,packages/tdesign-miniprogram/example}/**/*.{js,ts}'",
-    "format": "prettier {packages/components,packages/tdesign-miniprogram/example,script}/**/*.{js,ts,wxss,less,wxml,html,json,md,wxs} --write",
+    "lintfix": "eslint '{packages/components,packages/pro-components,packages/tdesign-miniprogram/example}/**/*.{js,ts}' --fix",
+    "lint": "eslint '{packages/components,packages/pro-components,packages/tdesign-miniprogram/example}/**/*.{js,ts}'",
+    "format": "prettier {packages/components,packages/pro-components,packages/tdesign-miniprogram/example,script}/**/*.{js,ts,wxss,less,wxml,html,json,md,wxs} --write",
     "site": "pnpm -C packages/tdesign-miniprogram/site site",
     "site:dev": "pnpm -C packages/tdesign-miniprogram/site site:dev",
     "site:prerender": "pnpm -C packages/tdesign-miniprogram/site site:prerender",
@@ -119,4 +119,4 @@
       "eslint --fix"
     ]
   }
-}
+}

packages/components/form-item/form-item.ts

@@ -3,14 +3,12 @@ import { validate, ValidateStatus } from './form-model';
 import config from '../common/config';
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
 
-
 const { prefix } = config;
 const name = `${prefix}-form-item`;
 
 @wxComponent()
 export default class FormItem extends SuperComponent {
   externalClasses = [
-
     `${prefix}-class`,
     `${prefix}-class-label`,
     `${prefix}-class-controls`,
@@ -21,7 +19,6 @@ export default class FormItem extends SuperComponent {
   properties = props as any;
 
   data = {
-
     prefix,
     classPrefix: name,
     errorList: [],
@@ -36,7 +33,6 @@ export default class FormItem extends SuperComponent {
   };
 
   relations: RelationsOptions = {
-
     '../form/form': {
       type: 'parent',
       linked(target) {
@@ -78,7 +74,6 @@ export default class FormItem extends SuperComponent {
   };
 
   lifetimes = {
-
     ready() {
       this.initFormItem();
     },
@@ -90,7 +85,6 @@ export default class FormItem extends SuperComponent {
   };
 
   methods = {
-
     // 处理描述信息链接点击事件
     handlePreviewImage(e) {
       const { url } = e.currentTarget.dataset;
@@ -272,4 +266,3 @@ export default class FormItem extends SuperComponent {
     },
   };
 }
-

packages/components/form-item/props.ts

@@ -19,7 +19,6 @@ const props: TdFormItemProps = {
   /** 表单项说明内容 */
   help: {
     type: String,
-
   },
   /** 字段标签名称 */
   label: {
@@ -52,7 +51,6 @@ const props: TdFormItemProps = {
   showErrorMessage: {
     type: null,
     value: undefined,
-
   },
 };
 

packages/components/form/_example/horizontal/index.js

@@ -206,8 +206,8 @@ Component({
     },
 
     onRemove(e) {
-      const {index} = e.detail;
-      const {photo} = this.data.formData;
+      const { index } = e.detail;
+      const { photo } = this.data.formData;
       photo.splice(index, 1);
       this.setData({
         'formData.photo': photo,

packages/components/form/_example/vertical/index.js

@@ -202,8 +202,8 @@ Component({
     },
 
     onRemove(e) {
-      const {index} = e.detail;
-      const {photo} = this.data.formData;
+      const { index } = e.detail;
+      const { photo } = this.data.formData;
       photo.splice(index, 1);
       this.setData({
         'formData.photo': photo,

packages/components/upload/__test__/__snapshots__/demo.test.js.snap

@@ -97,6 +97,7 @@ exports[`Upload Upload multiple demo works fine 1`] = `
     class="wrapper"
   >
     <t-upload
+      disabled="{{true}}"
       files="{{
         Array [
           Object {

packages/pro-components/chat/attachments/attachments.less

@@ -23,6 +23,14 @@
   width: 100%;
   height: auto;
 
+  // 可滚动内容区域
+  &__scrollable {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
   // 滚动容器样式
   .scroll-x {
     white-space: nowrap;
@@ -46,39 +54,32 @@
   }
 
   // 左侧内容区域
-  &__left-content {
+  &__left {
     flex: 1;
     overflow: hidden;
   }
 
   // 文件状态样式
-  &__file-status {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    border-radius: @radius-extraLarge;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-      // 图标样式
+  &__file {
+    &--pending,
+    &--fail,
+    &--error,
+    &--success {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      border-radius: @radius-extraLarge;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
   }
 
-  // 可滚动内容区域
-  &__scrollable-content {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
   // 文件包装器
-  &__file-wrap {
+  &__files {
     box-sizing: border-box;
     margin-left: @attachments-file-margin;
 
@@ -96,7 +97,7 @@
     background-color: @attachments-background-color;
 
     // 删除按钮样式
-    .cancel {
+    .@{attachments}__remove {
       color: @text-color-primary;
       position: absolute;
       right: -4px;
@@ -141,7 +142,7 @@
         }
       }
 
-      .content {
+      .@{attachments}__content {
         flex: 1;
         overflow: hidden;
         display: flex;
@@ -150,7 +151,7 @@
         justify-content: center;
         margin-left: @attachments-file-margin;
 
-        .title {
+        .@{attachments}__title {
           width: 100%;
           color: @attachments-title-color;
           font-size: @attachments-title-font-size;
@@ -166,7 +167,7 @@
           padding: 0;
         }
 
-        .desc {
+        .@{attachments}__desc {
           width: 100%;
           color: @attachments-desc-color;
           font-size: @attachments-desc-font-size;
@@ -180,7 +181,7 @@
 }
 
 // 对话中附件样式覆盖
-.inChat {
+.@{attachments}--chatting {
   .@{attachments}__file {
     margin-top: 0;
     margin-bottom: @attachments-file-margin;
@@ -218,10 +219,10 @@
         border-radius: @radius-extraLarge;
       }
     }
-    .@{attachments}__file-wrap {
+    .@{attachments}__files {
       margin-left: 0;
     }
-    .@{attachments}__scrollable-content {
+    .@{attachments}__scrollable {
       display: contents;
     }
     .file.@{attachments}__file {
@@ -232,7 +233,7 @@
 
 // 右侧布局下的附件样式
 .@{prefix}-chat__inner.right {
-  .inChat {
+  .@{attachments}--chatting {
     .file-image.@{attachments}__file {
       text-align: right;
     }

packages/pro-components/chat/attachments/attachments.wxml

@@ -2,18 +2,18 @@
 <wxs src="../../../components/common/utils.wxs" module="_" />
 
 <view
-  class="{{[''+classPrefix, inChat ? 'inChat' : '', _this.getFileTypeClass(inChat, files)]}}"
+  class="{{classPrefix}} {{[inChat ? classPrefix + '--chatting' : '', _this.getFileTypeClass(inChat, files)]}}"
   style="{{_._style([style, customStyle])}}"
 >
-  <view class="{{[classPrefix+'__left-content']}}">
-    <view class="{{[classPrefix+'__scrollable-content','scroll-x']}}">
+  <view class="{{classPrefix}}__left">
+    <view class="{{classPrefix}}__scrollable scroll-x">
       <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
-        <view class="{{[classPrefix+'__file-wrap']}}" bindtap="onFileWrapTap" data-index="{{index}}">
+        <view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
           <block wx:if="{{item.fileType==='image'}}">
-            <view class="{{['file-image',classPrefix+'__file']}}">
-              <block wx:if="{{item.status==='pending'||item.status==='fail'||item.status==='error'}}">
-                <view class="{{[item.status,classPrefix+'__file-status']}}">
-                  <t-loading theme="circular" size="24px" class="wrapper" />
+            <view class="file-image {{classPrefix}}__file">
+              <block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}">
+                <view class="{{item.status}} {{classPrefix}}__file--{{item.status}}">
+                  <t-loading theme="circular" size="48rpx" />
                 </view>
               </block>
               <block wx:else>
@@ -29,49 +29,51 @@
                 <t-icon
                   catchtap="onRemoveTap"
                   data-index="{{index}}"
-                  class="cancel"
+                  class="{{classPrefix}}__remove"
                   name="close-circle-filled"
                   size="16px"
                 />
               </block>
             </view>
           </block>
           <block wx:else>
-            <view class="{{['file',classPrefix+'__file']}}">
+            <view class="file {{classPrefix}}__file">
               <view class="image">
                 <block wx:if="{{item.status==='pending'}}">
-                  <view class="{{['loading',classPrefix+'__file-status']}}">
-                    <t-loading theme="circular" size="24px" class="wrapper" />
+                  <view class="loading {{classPrefix}}__file--pending">
+                    <t-loading theme="circular" size="48rpx" />
                   </view>
                 </block>
                 <block wx:elif="{{item.status==='fail'}}">
-                  <view class="{{['fail',classPrefix+'__file-status']}}">
-                    <t-loading theme="circular" size="24px" class="wrapper" />
+                  <view class="fail {{classPrefix}}__file--fail">
+                    <t-loading theme="circular" size="48rpx" />
                   </view>
                 </block>
                 <block wx:elif="{{item.status==='error'}}">
-                  <view class="{{['error',classPrefix+'__file-status']}}">
-                    <t-loading theme="circular" size="24px" class="wrapper" />
+                  <view class="error {{classPrefix}}__file--error">
+                    <t-loading theme="circular" size="48rpx" />
                   </view>
                 </block>
                 <block wx:else>
-                  <t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="24"></t-icon>
+                  <t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon>
                 </block>
               </view>
-              <view class="content">
-                <view class="title">{{item.name}}</view>
+              <view class="{{classPrefix}}__content">
+                <view class="{{classPrefix}}__title">{{item.name}}</view>
                 <block>
-                  <view wx:if="{{item.status==='pending'}}" class="desc">上传中...{{item.progress || 0+"%"}}</view>
-                  <view wx:elif="{{item.status==='fail'}}" class="desc">上传失败</view>
-                  <view wx:elif="{{item.status==='error'}}" class="desc">{{item.errorMessage}}</view>
-                  <view wx:else class="desc">{{item.desc}}</view>
+                  <view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc"
+                    >上传中...{{item.progress || 0+"%"}}</view
+                  >
+                  <view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc">上传失败</view>
+                  <view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view>
+                  <view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view>
                 </block>
               </view>
               <block wx:if="{{removable}}">
                 <t-icon
                   catchtap="onRemoveTap"
                   data-index="{{index}}"
-                  class="cancel"
+                  class="{{classPrefix}}__remove"
                   name="close-circle-filled"
                   size="16px"
                 />