fix(button): fix button icon size

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

@@ -48,6 +48,20 @@ export default class FormItem extends SuperComponent {
     form: {},
     colon: false,
     innerShowErrorMessage: true,
+    innerContentAlign: '',
+    contentStyle: '',
+  };
+
+  observers = {
+    contentAlign(val: string) {
+      // 自身传了 contentAlign 时，优先使用自身值
+      if (val) {
+        this.setData({
+          innerContentAlign: val,
+          contentStyle: `text-align: ${val}`,
+        });
+      }
+    },
   };
 
   relations: RelationsOptions = {
@@ -61,11 +75,16 @@ export default class FormItem extends SuperComponent {
         const formRules = target.data.rules?.[this.properties.name];
         const isRequired = formRules?.some((rule) => rule.required);
 
+        const { contentAlign } = this.properties;
+        const innerContentAlign = contentAlign || target.data.contentAlign || '';
+
         this.setData({
           formRules: formRules || [],
           colon: target.data.colon,
           innerLabelAlign: labelAlign || target.data.labelAlign,
           innerLabelWidth: normalizeLabelWidth(labelWidth || target.data.labelWidth),
+          innerContentAlign,
+          contentStyle: innerContentAlign ? `text-align: ${innerContentAlign}` : '',
           innerRequiredMark: requiredMark || target.data.requiredMark || globalConfig.requiredMark || isRequired,
           innerShowErrorMessage:
             typeof showErrorMessage === 'boolean' ? showErrorMessage : target.properties.showErrorMessage,

packages/components/form-item/form-item.wxml

@@ -17,21 +17,24 @@
 
     <!-- 内容区域 -->
     <view class="{{formClass}}__controls {{errorClasses}} {{prefix}}-class-controls">
-      <view class="{{formClass}}__controls-content {{formClass}}__controls--{{contentAlign}}" style="{{contentStyle}}">
+      <view
+        class="{{formClass}}__controls-content {{formClass}}__controls--{{innerContentAlign}}"
+        style="{{contentStyle}}"
+      >
         <slot />
       </view>
       <!-- 帮助信息 -->
       <view
         wx:if="{{help}}"
-        class="{{formItemClass}}-help {{formClass}}__controls--{{contentAlign}} {{prefix}}-class-help"
+        class="{{formItemClass}}-help {{formClass}}__controls--{{innerContentAlign}} {{prefix}}-class-help"
       >
         {{ help }}
       </view>
 
       <!-- 校验提示信息 -->
       <view
         wx:if="{{(errorList.length > 0 && innerShowErrorMessage) || successList.length > 0}}"
-        class="{{formItemClass}}-extra {{formClass}}__controls--{{contentAlign}} {{prefix}}-class-extra"
+        class="{{formItemClass}}-extra {{formClass}}__controls--{{innerContentAlign}} {{prefix}}-class-extra"
       >
         {{errorList.length > 0 && innerShowErrorMessage ? errorList[0].message : successList[0].message}}
       </view>

packages/components/form-item/props.ts

@@ -11,6 +11,10 @@ const props: TdFormItemProps = {
     type: Boolean,
     value: false,
   },
+  /** 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign */
+  contentAlign: {
+    type: String,
+  },
   /** 表单项说明内容 */
   help: {
     type: String,

packages/components/form-item/type.ts

@@ -15,6 +15,13 @@ export interface TdFormItemProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign
+   */
+  contentAlign?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 表单项说明内容
    */

packages/components/form/README.en-US.md

@@ -9,6 +9,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 colon | Boolean | false | \- | N
+content-align | String | left | options: left/right | N
 data | Object | {} | Typescript: `FormData` | N
 error-message | Object | - | Typescript: `FormErrorMessage` | N
 label-align | String | right | options: left/right/top | N
@@ -26,7 +27,7 @@ submit-with-warning-message | Boolean | false | \- | N
 name | params | description
 -- | -- | --
 reset | `(detail: { e?: FormResetEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)
-submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+submit | `(detail: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
 validate | `(result: ValidateResultContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
 
 ### FormInstanceFunctions 组件实例方法
@@ -47,6 +48,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 arrow | Boolean | false | \- | N
+content-align | String | - | options: left/right | N
 help | String | - | \- | N
 label | String | '' | \- | N
 label-align | String | - | options: left/right/top | N

packages/components/form/README.md

@@ -52,6 +52,7 @@ toc: false
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
+content-align | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
 data | Object | {} | 表单数据。TS 类型：`FormData` | N
 error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
 label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
@@ -69,7 +70,7 @@ submit-with-warning-message | Boolean | false | 【讨论中】当校验结果
 名称 | 参数 | 描述
 -- | -- | --
 reset | `(detail: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)
-submit | `(context: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+submit | `(detail: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
 validate | `(result: ValidateResultContext<FormData>)` | 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
 
 ### FormInstanceFunctions 组件实例方法
@@ -90,6 +91,7 @@ validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormDat
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 arrow | Boolean | false | 是否显示右侧箭头 | N
+content-align | String | - | 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign。可选项：left/right | N
 help | String | - | 表单项说明内容 | N
 label | String | '' | 字段标签名称 | N
 label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N

packages/components/form/props.ts

@@ -11,6 +11,11 @@ const props: TdFormProps = {
     type: Boolean,
     value: false,
   },
+  /** 表单内容对齐方式：左对齐、右对齐 */
+  contentAlign: {
+    type: String,
+    value: 'left',
+  },
   /** 表单数据 */
   data: {
     type: Object,

packages/components/form/type.ts

@@ -16,6 +16,14 @@ export interface TdFormProps<FormData extends Data = Data> {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 表单内容对齐方式：左对齐、右对齐
+   * @default left
+   */
+  contentAlign?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 表单数据
    * @default {}

packages/components/upload/README.en-US.md

@@ -58,7 +58,8 @@ Name | Default Value | Description
 --td-upload-add-disabled-bg-color | @bg-color-component-disabled | -
 --td-upload-add-icon-disabled-color | @text-color-disabled | -
 --td-upload-add-icon-size | 56rpx | -
---td-upload-disabled-mask | rgba(0, 0, 0, 0.6) | -
+--td-upload-background | @upload-add-bg-color | -
+--td-upload-disabled-mask | @mask-disabled | -
 --td-upload-drag-transition-duration | --td-upload-drag-transition-duration | -
 --td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | -
 --td-upload-drag-z-index | 999 | -

packages/components/upload/README.md

@@ -121,7 +121,8 @@ add-content | 自定义 `add-content` 显示内容
 --td-upload-add-disabled-bg-color | @bg-color-component-disabled | -
 --td-upload-add-icon-disabled-color | @text-color-disabled | -
 --td-upload-add-icon-size | 56rpx | -
---td-upload-disabled-mask | rgba(0, 0, 0, 0.6) | -
+--td-upload-background | @upload-add-bg-color | -
+--td-upload-disabled-mask | @mask-disabled | -
 --td-upload-drag-transition-duration | --td-upload-drag-transition-duration | -
 --td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | -
 --td-upload-drag-z-index | 999 | -

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

@@ -151,10 +151,18 @@
   }
 
   // 表格样式
+  .@{chat-markdown-table} {
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+
   .@{chat-markdown-table}__container {
     display: table;
-    width: 100%;
+    min-width: 100%;
+    max-width: max-content;
     border-collapse: collapse;
+    white-space: nowrap;
 
     // 表头组
     &-thead {

packages/tdesign-miniprogram/.changelog/pr-4506.md

@@ -0,0 +1,6 @@
+---
+pr_number: 4506
+contributor: novlan1
+---
+
+- feat(Form): 新增 `contentAlign ` 属性，支持配置表单内容对齐方式 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))

packages/tdesign-uniapp-chat/.changelog/pr-4506.md

@@ -0,0 +1,6 @@
+---
+pr_number: 4506
+contributor: novlan1
+---
+
+- fix(ChatMarkdown): 支持表格横向滚动 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))

packages/tdesign-uniapp/.changelog/pr-4506.md

@@ -0,0 +1,9 @@
+---
+pr_number: 4506
+contributor: novlan1
+---
+
+- fix(Button): 修复图标尺寸变量错误问题 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- feat(ActionSheet): 新增 `preventScrollThrough` 属性 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- feat(ImageViewer): 新增 `maxZoom ` 属性，支持缩放 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- feat(Form): 新增 `contentAlign ` 属性，支持配置表单内容对齐方式 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))

packages/uniapp-components/action-sheet/README.en-US.md

@@ -13,12 +13,13 @@ count | Number | 8 | \- | N
 description | String | - | \- | N
 items | Array | [] | Typescript: `Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; description?: string; color?: string; disabled?: boolean; icon?: string \| object; suffixIcon?: string \| object }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
 popup-props | Object | {} | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
+prevent-scroll-through | Boolean | true | \- | N
 show-cancel | Boolean | true | \- | N
 show-overlay | Boolean | true | \- | N
 theme | String | list | options: list/grid | N
 using-custom-navbar | Boolean | false | \- | N
-visible | Boolean | false | `v-model:visible` is supported | N
-default-visible | Boolean | false | uncontrolled property | N
+visible | Boolean | false | `v-model:visible` is supported。Typescript: `boolean \| null` | N
+default-visible | Boolean | false | uncontrolled property。Typescript: `boolean \| null` | N
 
 ### ActionSheet Events
 
@@ -45,7 +46,7 @@ t-class-content | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-action-sheet-border-color | @component-stroke | -
 --td-action-sheet-border-radius | @radius-extraLarge | -

packages/uniapp-components/action-sheet/README.md

@@ -89,12 +89,13 @@ count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有
 description | String | - | 动作面板描述文字 | N
 items | Array | [] | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; description?: string; color?: string; disabled?: boolean; icon?: string \| object; suffixIcon?: string \| object }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
 popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
 show-cancel | Boolean | true | 是否显示取消按钮 | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
-visible | Boolean | false | 显示与隐藏。支持语法糖 `v-model:visible` | N
-default-visible | Boolean | false | 显示与隐藏。非受控属性 | N
+visible | Boolean | false | 显示与隐藏。支持语法糖 `v-model:visible`。TS 类型：`boolean \| null` | N
+default-visible | Boolean | false | 显示与隐藏。非受控属性。TS 类型：`boolean \| null` | N
 
 ### ActionSheet Events
 
@@ -121,7 +122,7 @@ t-class-content | 内容样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-action-sheet-border-color | @component-stroke | -
 --td-action-sheet-border-radius | @radius-extraLarge | -

packages/uniapp-components/action-sheet/action-sheet.vue

@@ -10,6 +10,7 @@
       :using-custom-navbar="dataUsingCustomNavbar"
       :custom-navbar-height="customNavbarHeight"
       :show-overlay="dataShowOverlay"
+      :prevent-scroll-through="dataPreventScrollThrough"
       :z-index="(dataPopupProps && dataPopupProps.zIndex) || defaultPopUpzIndex"
       :overlay-props="(dataPopupProps && dataPopupProps.overlayProps) || defaultOverlayProps"
       @visible-change="onPopupVisibleChange"
@@ -302,6 +303,7 @@ export default {
           'description',
           'items',
           'popupProps',
+          'preventScrollThrough',
           'showCancel',
           'showOverlay',
           'theme',

packages/uniapp-components/action-sheet/props.ts

@@ -40,6 +40,11 @@ export default {
     type: Object,
     default: () => ({}),
   },
+  /** 防止滚动穿透，即不允许点击和滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,

packages/uniapp-components/action-sheet/type.ts

@@ -37,6 +37,11 @@ export interface TdActionSheetProps {
    * @default {}
    */
   popupProps?: PopupProps;
+  /**
+   * 防止滚动穿透，即不允许点击和滚动
+   * @default true
+   */
+  preventScrollThrough?: boolean;
   /**
    * 是否显示取消按钮
    * @default true
@@ -66,7 +71,7 @@ export interface TdActionSheetProps {
    * 显示与隐藏，非受控属性
    * @default false
    */
-  defaultVisible?: boolean;
+  defaultVisible?: boolean | null;
   /**
    * 点击取消按钮时触发
    */

packages/uniapp-components/avatar/README.en-US.md

@@ -75,7 +75,7 @@ t-class-image | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
 --td-avatar-group-line-spacing | 4rpx | -

packages/uniapp-components/avatar/README.md

@@ -127,7 +127,7 @@ t-class-image | 图片样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
 --td-avatar-group-line-spacing | 4rpx | -