From 421d47dbf4e3cd4aa47d162ccd64975a15d23ef9 Mon Sep 17 00:00:00 2001 From: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Date: Tue, 30 Apr 2024 09:34:50 +0800 Subject: [PATCH 01/35] =?UTF-8?q?fix:=20scrollbar=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=85=BC=E5=AE=B9vue-cli4=20(#1782)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: loopzhou --- style/mobile/components/table/mixins/_scrollbar.less | 5 +++-- style/web/mixins/_scrollbar.less | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/style/mobile/components/table/mixins/_scrollbar.less b/style/mobile/components/table/mixins/_scrollbar.less index 4b5b47f006..b790d5f772 100644 --- a/style/mobile/components/table/mixins/_scrollbar.less +++ b/style/mobile/components/table/mixins/_scrollbar.less @@ -6,10 +6,11 @@ .scrollbar(@size: 6px, @borderSize: 0px) { // Firefox 等浏览器标准支持的滚动条样式设置 // Chrome support after v121 https://developer.chrome.com/docs/css-ui/scrollbar-styling - @supports not selector(::-webkit-scrollbar) { + @-moz-document url-prefix() { scrollbar-color: @scrollbar-color transparent; scrollbar-width: thin; } + // Safari/Chrome 中滚动条样式设置 &::-webkit-scrollbar { width: @size; @@ -33,7 +34,7 @@ .hideScrollbar() { /* firefox */ // Chrome support after v121 https://developer.chrome.com/docs/css-ui/scrollbar-styling - @supports not selector(::-webkit-scrollbar) { + @-moz-document url-prefix() { scrollbar-width: none; overflow: -moz-scrollbars-none; } diff --git a/style/web/mixins/_scrollbar.less b/style/web/mixins/_scrollbar.less index 41f5ffc018..797087dd5c 100644 --- a/style/web/mixins/_scrollbar.less +++ b/style/web/mixins/_scrollbar.less @@ -3,7 +3,7 @@ .scrollbar(@size: 6px, @borderSize: 0px) { // Firefox 等浏览器标准支持的滚动条样式设置 // Chrome support after v121 https://developer.chrome.com/docs/css-ui/scrollbar-styling - @supports not selector(::-webkit-scrollbar) { + @-moz-document url-prefix() { scrollbar-color: @scrollbar-color transparent; scrollbar-width: thin; } @@ -31,7 +31,7 @@ .hideScrollbar() { /* firefox */ // Chrome support after v121 https://developer.chrome.com/docs/css-ui/scrollbar-styling - @supports not selector(::-webkit-scrollbar) { + @-moz-document url-prefix() { scrollbar-width: none; overflow: -moz-scrollbars-none; } From 73d281b8a3646f4c80e98c41005e0c3d24318046 Mon Sep 17 00:00:00 2001 From: Lyan-u <46185702+Lyan-u@users.noreply.github.com> Date: Tue, 30 Apr 2024 15:37:31 +0800 Subject: [PATCH 02/35] feat(tree-select): add new component (#1779) --- docs/mobile/api_v2/tree-select.en-US.md | 25 +++++++++++++++++++ docs/mobile/api_v2/tree-select.md | 25 +++++++++++++++++++ .../mobile/components/tree-select/_index.less | 1 + 3 files changed, 51 insertions(+) create mode 100644 docs/mobile/api_v2/tree-select.en-US.md create mode 100644 docs/mobile/api_v2/tree-select.md diff --git a/docs/mobile/api_v2/tree-select.en-US.md b/docs/mobile/api_v2/tree-select.en-US.md new file mode 100644 index 0000000000..e40e7994fe --- /dev/null +++ b/docs/mobile/api_v2/tree-select.en-US.md @@ -0,0 +1,25 @@ +--- +title: TreeSelect +description: Suitable for selecting a tree data structure. +spline: form +isComponent: true +toc: false +--- + +## Code Demo + +### Component Type + +#### Basic TreeSelect + +{{ base }} + +#### Multiple TreeSelect + +{{ multiple }} + +### Component Status + +#### Three-level TreeSelect + +{{ normal }} \ No newline at end of file diff --git a/docs/mobile/api_v2/tree-select.md b/docs/mobile/api_v2/tree-select.md new file mode 100644 index 0000000000..d57365abd6 --- /dev/null +++ b/docs/mobile/api_v2/tree-select.md @@ -0,0 +1,25 @@ +--- +title: TreeSelect 树形选择 +description: 适用于选择树形的数据结构。 +spline: form +isComponent: true +toc: false +--- + +## 代码演示 + +### 组件类型 + +#### 基础树形选择 + +{{ base }} + +#### 多选树形选择 + +{{ multiple }} + +### 组件状态 + +#### 三级树形选择 + +{{ normal }} \ No newline at end of file diff --git a/style/mobile/components/tree-select/_index.less b/style/mobile/components/tree-select/_index.less index c2ddfdb47a..aa2cd1b9ce 100644 --- a/style/mobile/components/tree-select/_index.less +++ b/style/mobile/components/tree-select/_index.less @@ -15,6 +15,7 @@ &--right { flex: 1; + overflow: auto; } ::-webkit-scrollbar { From b010e4cd357863cf0ae8f74d8bb45b499154e542 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Sat, 4 May 2024 18:52:51 +0800 Subject: [PATCH 03/35] Update upload.md (#1786) --- docs/web/api/upload.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/web/api/upload.md b/docs/web/api/upload.md index 74087a8d9f..8edc38b32c 100644 --- a/docs/web/api/upload.md +++ b/docs/web/api/upload.md @@ -33,7 +33,7 @@ spline: form - `allowUploadDuplicateFile` 是否允许上传相同文件名的文件。 - `onSelectChange` 会在文件选择之后，上传请求发起之前触发。 - `onSuccess` 会在上传成功后触发。 -- `onFail` 会在上传失败后出发。 +- `onFail` 会在上传失败后触发。 {{ base }} From c89db9e7b8d3e90aab407600a2cec6efe00ca6d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Tue, 7 May 2024 11:44:53 +0800 Subject: [PATCH 04/35] docs: add flutter design guide (#1787) * docs: add flutter design guide * fix: fix docs --- docs/mobile/design/dialog.md | 2 +- docs/mobile/fultter_design/action-sheet.md | 73 ++++++++++++ docs/mobile/fultter_design/avatar.md | 61 ++++++++++ docs/mobile/fultter_design/back-top.md | 33 ++++++ docs/mobile/fultter_design/badge.md | 68 +++++++++++ docs/mobile/fultter_design/button.md | 79 +++++++++++++ docs/mobile/fultter_design/calendar.md | 51 +++++++++ docs/mobile/fultter_design/cascader.md | 59 ++++++++++ docs/mobile/fultter_design/cell.md | 55 +++++++++ docs/mobile/fultter_design/checkbox.md | 50 +++++++++ docs/mobile/fultter_design/collapse.md | 63 +++++++++++ docs/mobile/fultter_design/count-down.md | 50 +++++++++ .../mobile/fultter_design/date-time-picker.md | 36 ++++++ docs/mobile/fultter_design/dialog.md | 71 ++++++++++++ docs/mobile/fultter_design/divider.md | 53 +++++++++ docs/mobile/fultter_design/drawer.md | 55 +++++++++ docs/mobile/fultter_design/dropdown-menu.md | 40 +++++++ docs/mobile/fultter_design/empty.md | 38 +++++++ docs/mobile/fultter_design/fab.md | 80 +++++++++++++ docs/mobile/fultter_design/footer.md | 59 ++++++++++ docs/mobile/fultter_design/grid.md | 88 +++++++++++++++ docs/mobile/fultter_design/image-viewer.md | 36 ++++++ docs/mobile/fultter_design/image.md | 45 ++++++++ docs/mobile/fultter_design/indexes.md | 53 +++++++++ docs/mobile/fultter_design/input.md | 71 ++++++++++++ docs/mobile/fultter_design/link.md | 44 ++++++++ docs/mobile/fultter_design/loading.md | 57 ++++++++++ docs/mobile/fultter_design/message.md | 50 +++++++++ docs/mobile/fultter_design/navbar.md | 51 +++++++++ docs/mobile/fultter_design/notice-bar.md | 81 +++++++++++++ docs/mobile/fultter_design/picker.md | 39 +++++++ docs/mobile/fultter_design/popup.md | 53 +++++++++ docs/mobile/fultter_design/progress.md | 62 ++++++++++ .../fultter_design/pull-down-refresh.md | 60 ++++++++++ docs/mobile/fultter_design/radio.md | 57 ++++++++++ docs/mobile/fultter_design/rate.md | 51 +++++++++ docs/mobile/fultter_design/result.md | 54 +++++++++ docs/mobile/fultter_design/search.md | 51 +++++++++ docs/mobile/fultter_design/side-bar.md | 50 +++++++++ docs/mobile/fultter_design/skeleton.md | 27 +++++ docs/mobile/fultter_design/slider.md | 59 ++++++++++ docs/mobile/fultter_design/stepper.md | 50 +++++++++ docs/mobile/fultter_design/steps.md | 74 ++++++++++++ docs/mobile/fultter_design/swipe-cell.md | 75 +++++++++++++ docs/mobile/fultter_design/swiper.md | 40 +++++++ docs/mobile/fultter_design/switch.md | 31 +++++ docs/mobile/fultter_design/tab-bar.md | 77 +++++++++++++ docs/mobile/fultter_design/tabs.md | 106 ++++++++++++++++++ docs/mobile/fultter_design/tag.md | 86 ++++++++++++++ docs/mobile/fultter_design/textarea.md | 59 ++++++++++ docs/mobile/fultter_design/toast.md | 43 +++++++ docs/mobile/fultter_design/tree-select.md | 27 +++++ docs/mobile/fultter_design/upload.md | 43 +++++++ 53 files changed, 2925 insertions(+), 1 deletion(-) create mode 100644 docs/mobile/fultter_design/action-sheet.md create mode 100644 docs/mobile/fultter_design/avatar.md create mode 100644 docs/mobile/fultter_design/back-top.md create mode 100644 docs/mobile/fultter_design/badge.md create mode 100644 docs/mobile/fultter_design/button.md create mode 100644 docs/mobile/fultter_design/calendar.md create mode 100644 docs/mobile/fultter_design/cascader.md create mode 100644 docs/mobile/fultter_design/cell.md create mode 100644 docs/mobile/fultter_design/checkbox.md create mode 100644 docs/mobile/fultter_design/collapse.md create mode 100644 docs/mobile/fultter_design/count-down.md create mode 100644 docs/mobile/fultter_design/date-time-picker.md create mode 100644 docs/mobile/fultter_design/dialog.md create mode 100644 docs/mobile/fultter_design/divider.md create mode 100644 docs/mobile/fultter_design/drawer.md create mode 100644 docs/mobile/fultter_design/dropdown-menu.md create mode 100644 docs/mobile/fultter_design/empty.md create mode 100644 docs/mobile/fultter_design/fab.md create mode 100644 docs/mobile/fultter_design/footer.md create mode 100644 docs/mobile/fultter_design/grid.md create mode 100644 docs/mobile/fultter_design/image-viewer.md create mode 100644 docs/mobile/fultter_design/image.md create mode 100644 docs/mobile/fultter_design/indexes.md create mode 100644 docs/mobile/fultter_design/input.md create mode 100644 docs/mobile/fultter_design/link.md create mode 100644 docs/mobile/fultter_design/loading.md create mode 100644 docs/mobile/fultter_design/message.md create mode 100644 docs/mobile/fultter_design/navbar.md create mode 100644 docs/mobile/fultter_design/notice-bar.md create mode 100644 docs/mobile/fultter_design/picker.md create mode 100644 docs/mobile/fultter_design/popup.md create mode 100644 docs/mobile/fultter_design/progress.md create mode 100644 docs/mobile/fultter_design/pull-down-refresh.md create mode 100644 docs/mobile/fultter_design/radio.md create mode 100644 docs/mobile/fultter_design/rate.md create mode 100644 docs/mobile/fultter_design/result.md create mode 100644 docs/mobile/fultter_design/search.md create mode 100644 docs/mobile/fultter_design/side-bar.md create mode 100644 docs/mobile/fultter_design/skeleton.md create mode 100644 docs/mobile/fultter_design/slider.md create mode 100644 docs/mobile/fultter_design/stepper.md create mode 100644 docs/mobile/fultter_design/steps.md create mode 100644 docs/mobile/fultter_design/swipe-cell.md create mode 100644 docs/mobile/fultter_design/swiper.md create mode 100644 docs/mobile/fultter_design/switch.md create mode 100644 docs/mobile/fultter_design/tab-bar.md create mode 100644 docs/mobile/fultter_design/tabs.md create mode 100644 docs/mobile/fultter_design/tag.md create mode 100644 docs/mobile/fultter_design/textarea.md create mode 100644 docs/mobile/fultter_design/toast.md create mode 100644 docs/mobile/fultter_design/tree-select.md create mode 100644 docs/mobile/fultter_design/upload.md diff --git a/docs/mobile/design/dialog.md b/docs/mobile/design/dialog.md index 38d76008bf..d80c58691c 100644 --- a/docs/mobile/design/dialog.md +++ b/docs/mobile/design/dialog.md @@ -64,7 +64,7 @@ -### 何时使用 +### 相似组件 | 组件名 | 何时使用 | | :-------------------- | :----------------------------------------------------------------------------------------- | | [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | diff --git a/docs/mobile/fultter_design/action-sheet.md b/docs/mobile/fultter_design/action-sheet.md new file mode 100644 index 0000000000..597ad8e3c3 --- /dev/null +++ b/docs/mobile/fultter_design/action-sheet.md @@ -0,0 +1,73 @@ + + +### 何时使用 + +需要提供一组与当前场景操作相关的关联操作时使用。 + +### 组件搭配使用 + +##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。 + +
+ +
+ + +### 常见用法 +##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
+ +
+ +
+ +##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 动作面板中的操作项不建议用icon完成替代文字。 + +
+
+ + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------- | :------------------------------------------------------------------------------------------- | +| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/mobile/fultter_design/avatar.md b/docs/mobile/fultter_design/avatar.md new file mode 100644 index 0000000000..f956c8dacb --- /dev/null +++ b/docs/mobile/fultter_design/avatar.md @@ -0,0 +1,61 @@ + + +### 何时使用 + +作为一个用户信息展示，或用来代表某个/某些具体用户。 + +### 组件搭配使用 + +##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 + +
+
+ +
+
+
+ +##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。 + +
+
+ +
+
+ +
+ +##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。 + +
+
+ +
+
+ + +### 常见用法 + +##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/mobile/fultter_design/back-top.md b/docs/mobile/fultter_design/back-top.md new file mode 100644 index 0000000000..2a8a99bfb8 --- /dev/null +++ b/docs/mobile/fultter_design/back-top.md @@ -0,0 +1,33 @@ + + +### 何时使用 + +当页面内容过长，用户有快速返回到页面顶部的诉求时使用 + +### 页面布局相关 + +##### 常驻于页面的右下角，方便用户随时点击返回 + +
+
+ +
+
+ +
+ +### 常见用法 + +##### 当用户滚动页面时，为了不影响到用户对内容的浏览体验，建议可将返回顶部按钮最小化或像右侧收起，当用户停止滚动时，再完全显示按钮 + +
+
+ +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :---------------------------------------------------------- | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | diff --git a/docs/mobile/fultter_design/badge.md b/docs/mobile/fultter_design/badge.md new file mode 100644 index 0000000000..7d95610505 --- /dev/null +++ b/docs/mobile/fultter_design/badge.md @@ -0,0 +1,68 @@ + + +### 何时使用 + +当需要展示特定对象的状态变化或承载运营性质提示时使用。 + +### 组件搭配使用 + +##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。 + +
+
+ +
+
+ + +### 常见用法 + +##### 当用户只需要关注是否有消息，而无需关注消息数量时，可使用红点型徽标；当提示的信息需要精确显示数量时，应使用带数字的徽标。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 建议根据场景和信息类型定义最长字数，不宜出现过长的情况。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------ | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | diff --git a/docs/mobile/fultter_design/button.md b/docs/mobile/fultter_design/button.md new file mode 100644 index 0000000000..d340445ec3 --- /dev/null +++ b/docs/mobile/fultter_design/button.md @@ -0,0 +1,79 @@ + + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
+
+ + +
+
+ +
+ +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :---------------------------------------------------------- | +| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | diff --git a/docs/mobile/fultter_design/calendar.md b/docs/mobile/fultter_design/calendar.md new file mode 100644 index 0000000000..3b975412c0 --- /dev/null +++ b/docs/mobile/fultter_design/calendar.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。 + +
+ +
+ +### 推荐/慎用 + +##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 区间选择尽量使用在较短时间的场景中，当涉及的时间通常在数月、数年的长度时，建议使用其它方式让用户输入。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------- | :------------------------------------- | +| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 | diff --git a/docs/mobile/fultter_design/cascader.md b/docs/mobile/fultter_design/cascader.md new file mode 100644 index 0000000000..ce9802c1ac --- /dev/null +++ b/docs/mobile/fultter_design/cascader.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 组件搭配使用 + +##### 级联选择器与[索引](./indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 + +
+ +
+ + +### 常见用法 + +##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
+
+ + +
+
+ +
+ +##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------------------------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/mobile/fultter_design/cell.md b/docs/mobile/fultter_design/cell.md new file mode 100644 index 0000000000..6697dc590d --- /dev/null +++ b/docs/mobile/fultter_design/cell.md @@ -0,0 +1,55 @@ + + +### 常见用法 + +##### 常用作内容详情入口或功能入口的平铺陈列。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 常用作同类型同格式信息项平铺陈列。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 作为入口时，不建议承载过多过复杂的内容。 + +
+
+ + +
+
+ +
+ +##### 作为入口时，不建议在一个单元格内承载其他操作。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------- | :--------------------------------------------------------------- | +| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。 | diff --git a/docs/mobile/fultter_design/checkbox.md b/docs/mobile/fultter_design/checkbox.md new file mode 100644 index 0000000000..bd169a5055 --- /dev/null +++ b/docs/mobile/fultter_design/checkbox.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当用户需要从一组数据选择多个选项时使用。 + +### 组件搭配使用 + +##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。 + +
+ + +
+ +
+ + +
+ +
+ +##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 + + +
+ + +
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :--------------------------------------- | +| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 | diff --git a/docs/mobile/fultter_design/collapse.md b/docs/mobile/fultter_design/collapse.md new file mode 100644 index 0000000000..405873e998 --- /dev/null +++ b/docs/mobile/fultter_design/collapse.md @@ -0,0 +1,63 @@ + + +### 何时使用 + +当信息较多，需要进行收纳时使用。 + +### 常见用法 + +##### 经常用于信息种类较多的页面，将相对次要的信息收纳起来，让用户能够关注到页面中的主要信息或流程。 + +
+ +
+ +
+ +##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。 + +
+
+ +
+
+ +
+ +##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 当信息层级较多时，不建议嵌套折叠面板，层级过多时建议审视信息结构或使用其它交互方式展示。 + +
+
+ + +
+
+ +
+ +##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------- | :--------------------------------------------------- | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | diff --git a/docs/mobile/fultter_design/count-down.md b/docs/mobile/fultter_design/count-down.md new file mode 100644 index 0000000000..94f0508f01 --- /dev/null +++ b/docs/mobile/fultter_design/count-down.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当需要向用户提示剩余时间时使用。 + +### 常见用法 + +##### 在营销场景下，通过倒计时向用户展示运营活动开始倒计时或距活动结束的剩余时间，从而体现稀缺性吸引目标受众的注意力，勾起足够兴趣以此激励用户参与。 + +
+
+ +
+
+ +
+ +##### 在一些工作流场景下，提示用户还剩余多少时间来完成某项任务或处理某些事项，强化时间概念。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 不建议在同一个页面滥用倒计时，若需要反复使用，建议用较为轻量的样式. + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------- | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 | diff --git a/docs/mobile/fultter_design/date-time-picker.md b/docs/mobile/fultter_design/date-time-picker.md new file mode 100644 index 0000000000..73c04d10bf --- /dev/null +++ b/docs/mobile/fultter_design/date-time-picker.md @@ -0,0 +1,36 @@ + + +### 何时使用 + +在表单中需要输入单个日期或时间时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./Cell)搭配使用，点击后唤起时间选择器。 + +
+ +
+ +### 常见用法 + +##### 当需要输入时间区间时，通常使用两个时间选择器分别选择起、止时间。 + +
+ +
+ +
+ +
+ +### 推荐/慎用示例 + +##### 选择时间后，建议使用标准化格式在表单中书写日期和时间。 + +
+
+ + +
+
diff --git a/docs/mobile/fultter_design/dialog.md b/docs/mobile/fultter_design/dialog.md new file mode 100644 index 0000000000..d77eb78155 --- /dev/null +++ b/docs/mobile/fultter_design/dialog.md @@ -0,0 +1,71 @@ + + +### 何时使用 + +需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。 + +### 组件搭配使用 + +##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。 + +
+ +
+ +
+ +
+ +
+ +
+ + +### 常见用法 + +##### 用于较为重要的信息提示。 + +
+
+ +
+
+ +
+ +##### 用于较为重要的信息提示，且需要用户决定。 + +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 +| 组件名 | 何时使用 | +| :-------------------- | :----------------------------------------------------------------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | + diff --git a/docs/mobile/fultter_design/divider.md b/docs/mobile/fultter_design/divider.md new file mode 100644 index 0000000000..268a317ecb --- /dev/null +++ b/docs/mobile/fultter_design/divider.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +为了区分内容与内容之间的分组、层级关系时可使用。 + +### 与页面布局相关 + +##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。 + +
+
+ + +
+
+ +
+ +##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 + +
+
+ + +
+
+
+ +##### 组合分割线：通栏分割线与内嵌分割线组合布局。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/mobile/fultter_design/drawer.md b/docs/mobile/fultter_design/drawer.md new file mode 100644 index 0000000000..b76b64dded --- /dev/null +++ b/docs/mobile/fultter_design/drawer.md @@ -0,0 +1,55 @@ + + +### 何时使用 + +需要收折展示一组数量较多的菜单时使用 + +### 组件搭配使用 + +##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。 + +
+ +
+ +### 常见用法 + +##### 在网站场景，通常用来收折展示整个网站的菜单导航。 + +
+ +
+ +
+ +##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。 + +
+ +
+ + +### 推荐/慎用示例 + +##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------- | :------------------------------------------------------------------------------------------- | +| [动作面板](./action-sheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/mobile/fultter_design/dropdown-menu.md b/docs/mobile/fultter_design/dropdown-menu.md new file mode 100644 index 0000000000..475da0afec --- /dev/null +++ b/docs/mobile/fultter_design/dropdown-menu.md @@ -0,0 +1,40 @@ + + +### 何时使用 + +当内容较多时，需要通过筛选快速定位某一类内容时使用。 + +### 常见用法 + +##### 常用于单个维度筛选或多个维度复合筛选的场景，可进行单选或多选。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 在单选的筛选场景内，建议将用户选择项替换标题显示于菜单面板内。 + +
+
+ + +
+
+ +
+ +##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。 + +
+ + +
diff --git a/docs/mobile/fultter_design/empty.md b/docs/mobile/fultter_design/empty.md new file mode 100644 index 0000000000..5c7f0d9ee1 --- /dev/null +++ b/docs/mobile/fultter_design/empty.md @@ -0,0 +1,38 @@ + + +### 何时使用 + +当页面或模块数据为空时使用。 + +### 与页面布局相关 + +##### 用于整个页面或某个独立模块的状态展示，在页面、模块内居中。 + +
+
+ +
+ +
+ +
+
+ +### 组件搭配使用 + +##### 空状态与[步骤条](./steps)组合使用，通过步骤展示提示用户如何新建/添加。 +
+
+ +
+
+ +
+ +##### 空状态与[按钮](./button)组合使用，引导用户直接新建/添加。 + +
+
+ +
+
diff --git a/docs/mobile/fultter_design/fab.md b/docs/mobile/fultter_design/fab.md new file mode 100644 index 0000000000..f3560afba0 --- /dev/null +++ b/docs/mobile/fultter_design/fab.md @@ -0,0 +1,80 @@ + + +### 何时使用 + +当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 + +### 与页面布局相关 + +##### 为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。 + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +### 组件搭配使用 + +##### 悬浮按钮与[动作面板](./action-sheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
+ + +
+ + +### 推荐/慎用示例 + +##### 通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------------- | :----------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | +| [返回顶部](./back-top ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | + diff --git a/docs/mobile/fultter_design/footer.md b/docs/mobile/fultter_design/footer.md new file mode 100644 index 0000000000..d5f9f60ceb --- /dev/null +++ b/docs/mobile/fultter_design/footer.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +当页面底部需要放置一些补充信息和链接时使用。 + +### 与页面布局相关 + +##### 页脚通常位于网站每个页面底部或主体内容下方的区域。 + +
+
+ +
+
+ +### 常见用法 + +##### 用于承载版权、隐私政策和使用条款等信息，它们是法律保护所需的。 + +
+
+ +
+
+ +
+ +##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。 + +
+
+ +
+
+ +
+ +##### 用于承载网站导航。 + +
+
+ +
+
+ +
+ +##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。 + +
+
+ +
+ +
+ +
+
diff --git a/docs/mobile/fultter_design/grid.md b/docs/mobile/fultter_design/grid.md new file mode 100644 index 0000000000..4951c13534 --- /dev/null +++ b/docs/mobile/fultter_design/grid.md @@ -0,0 +1,88 @@ + + +### 何时使用 + +当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。 + +### 组件搭配使用 + +##### 可与徽标组合使用，可作为消息提示、或其它相关的数量提示。 + +
+
+ +
+
+ +### 常见用法 + +##### 通常用于金刚区、或底部标签栏等，在页面中较为醒目的位置承载主要的功能入口。 + +
+
+ +
+
+ +
+ +##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当在金刚区使用宫格承载功能入口时，建议梳理功能的优先级，将金刚区控制在3行以内，一些相对次要的功能可通过左右滑动的方式收纳在第二屏。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :------------------------- | +| [单元格](./cell) | 用于各个类别行的信息展示。 | diff --git a/docs/mobile/fultter_design/image-viewer.md b/docs/mobile/fultter_design/image-viewer.md new file mode 100644 index 0000000000..44796c6117 --- /dev/null +++ b/docs/mobile/fultter_design/image-viewer.md @@ -0,0 +1,36 @@ + + +### 何时使用 + +当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 + +### 组件搭配使用 + +##### 图片预览与[图片](./image)组合使用，通过图片作为缩略图，点击后进行图片预览。 + +
+ +
+ +
+ +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./action-sheet)组合使用，对删除操作进行二次确认。 + +
+ +
+ +### 推荐/慎用示例 + +##### 在可点击进入详情的卡片入口中，不建议针对图片添加图片预览能力。 + +
+ + +
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------- | :--------------------------------------------------------------- | +| [图片](./image) | 当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 | diff --git a/docs/mobile/fultter_design/image.md b/docs/mobile/fultter_design/image.md new file mode 100644 index 0000000000..58c343c04a --- /dev/null +++ b/docs/mobile/fultter_design/image.md @@ -0,0 +1,45 @@ + + +### 何时使用 + +当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 + +### 组件搭配使用 + +##### 可使用[宫格](./grid)、[单元格](./cell)承载图片，作为某种功能、某类信息的入口。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 图片与[下拉刷新](./pull-down-refresh)组合使用，用于图片瀑布流时的内容更新。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 当图片仅为展示，不具备预览功能时，应避免图片尺寸过小，从而影响图像信息的浏览和获取。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/mobile/fultter_design/indexes.md b/docs/mobile/fultter_design/indexes.md new file mode 100644 index 0000000000..323bbdd496 --- /dev/null +++ b/docs/mobile/fultter_design/indexes.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +当数据项较多时，为方便用户快速找到目标数据项时使用。 + +### 组件搭配使用 + +##### 索引与[单选框](./radio)、[多选框](./checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 索引项排序应具备一定的逻辑相关性。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :------------------------------------------------------------- | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/mobile/fultter_design/input.md b/docs/mobile/fultter_design/input.md new file mode 100644 index 0000000000..37f5757ebf --- /dev/null +++ b/docs/mobile/fultter_design/input.md @@ -0,0 +1,71 @@ + + +### 何时使用 + +需要进行文字输入，且需填写的字数较少时使用。 + +### 组件搭配使用 + +##### 呈现在单元格中，可与按钮组件相结合，点击按钮触发相关功能。 + +
+
+ +
+
+ + +### 常见用法 + +##### 通常使用在表单中进行文字填写，填写状态下可在右侧显示清空输入的按钮，供用户快速清空已输入的内容。 + +
+ +
+ +
+ +##### 当需要进行较复杂的内容填写，如验证码等，可使用特定类型输入框，结合按钮、图形等辅助元素帮助用户完成流程。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 标签、占位符文本简明扼要地描述用户需要输入的内容，标签超过10个字时请考虑使用其它展示方式。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 当需要输入较长的复杂内容时，建议使用多行文本框输入。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------------- | :------------------------------------------- | +| [搜索框](./search) | 当需要从海量信息中准确提取准确的内容时使用。 | diff --git a/docs/mobile/fultter_design/link.md b/docs/mobile/fultter_design/link.md new file mode 100644 index 0000000000..95047ad36e --- /dev/null +++ b/docs/mobile/fultter_design/link.md @@ -0,0 +1,44 @@ + + +### 何时使用 + +当需要跳转至外链时使用。 + +### 组件搭配使用 + +##### 链接与[消息通知](./message)、[公告栏](./notice-bar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 在同一段文本中如使用多个链接，需要利用纯文本字符等将其区隔开。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/mobile/fultter_design/loading.md b/docs/mobile/fultter_design/loading.md new file mode 100644 index 0000000000..58dfc40690 --- /dev/null +++ b/docs/mobile/fultter_design/loading.md @@ -0,0 +1,57 @@ + + +### 何时使用 + +当打开新页面或操作完成后，等待加载时使用。 + +### 与页面布局相关 + +##### 当展示整个页面、或模块的加载进度时，通常放置在页面、模块的正中间。 + +
+
+ +
+ +
+ +
+
+ + +### 组件搭配使用 + +##### 在信息流页面中，可结合下拉刷新使用，对未展示出来的最新内容进行加载。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 当加载时间较长，尤其是超过10秒的场景中，推荐使用进度条，向用户明确展示当前任务的进展，避免等待时间过长带来焦急的负面体验。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------ | :--------------------------------------------------------------- | +| [下拉刷新](./pull-down-refresh) | 当需要对页面信息进行整体刷新或加载更多同类信息时使用。 | diff --git a/docs/mobile/fultter_design/message.md b/docs/mobile/fultter_design/message.md new file mode 100644 index 0000000000..3ad20366c1 --- /dev/null +++ b/docs/mobile/fultter_design/message.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。 + +### 与页面布局相关 + +##### 通知通常出现在页面顶部，叠加在页面的上层，可在一段时间后自动消失、或用户点击关闭。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 当需要在通知栏中展示按钮时，不建议超过1个。若需要使用更多按钮，建议使用其它交互方式。 + +
+
+ + +
+
+ +
+ +##### 消息通知是一种相对轻量、短时的反馈方式，尽量避免在页面中同时堆叠多个消息通知，用户可能会来不及关注它们。 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 | diff --git a/docs/mobile/fultter_design/navbar.md b/docs/mobile/fultter_design/navbar.md new file mode 100644 index 0000000000..cf4c7f21ae --- /dev/null +++ b/docs/mobile/fultter_design/navbar.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 带图标的导航栏与[抽屉](./drawer)、[动作面板](./action-sheet)组合使用，用于唤起一组操作或功能。 + +
+ +
+ +
+ +
+ +
+ + +### 常见用法 + +##### 通常用来承载页面标题和返回操作，点击跳转回到上一个打开的页面。 + +
+ +
+ +
+ +##### 在应用内，通常用来承载搜索、扫码等功能性高频操作。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 +
+
+ +
+
diff --git a/docs/mobile/fultter_design/notice-bar.md b/docs/mobile/fultter_design/notice-bar.md new file mode 100644 index 0000000000..a9e2831f4e --- /dev/null +++ b/docs/mobile/fultter_design/notice-bar.md @@ -0,0 +1,81 @@ + + +### 何时使用 + +当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发 + +### 页面布局相关 + +##### 公告栏位于页面或模块的顶部，让用户能够快速关注到重要信息 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 经常用于系统状态的通知，如警示或错误信息的展示，告知用户具体的系统状态、出现原因、和解决方式 + +
+
+ +
+
+ +
+ +##### 展示当前场景的重要公告，这类公告通常比较重要，需要用户务必关注 + +
+
+ +
+
+ +
+ +##### 在营销场景，经常用于广告或促销信息的展示，提高用户转化率 + +
+
+ +
+
+ +
+ +##### 当需要同时展示多条公告时，通常使用可滚动的公告栏，依次展示多条公告信息 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 可以同时展示多个公告栏，但不建议超过2个，过多的公告栏会占用过多屏幕空间、分散用户的注意力 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------- | :----------------------------------------------------------------------------------------- | +| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。 | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | + diff --git a/docs/mobile/fultter_design/picker.md b/docs/mobile/fultter_design/picker.md new file mode 100644 index 0000000000..ca26cff139 --- /dev/null +++ b/docs/mobile/fultter_design/picker.md @@ -0,0 +1,39 @@ + + +### 何时使用 + +当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 + +### 推荐/慎用示例 + +##### 选择器若为一组有层级关系的选项时，选项层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
+
+ + +
+
+ +
+ +##### 选择器若为一组有层级关系的选项时，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------------- | :----------------------------------------------------------------------- | +| [时间选择器](./date-time-picker ) | 在表单中需要输入单个日期或时间时使用。 | diff --git a/docs/mobile/fultter_design/popup.md b/docs/mobile/fultter_design/popup.md new file mode 100644 index 0000000000..ae2165a8e5 --- /dev/null +++ b/docs/mobile/fultter_design/popup.md @@ -0,0 +1,53 @@ + + +### 常见用法 + +##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。 + +
+ +
+ +
+ +
+ +
+ +
+ +##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。 + +
+ +
+ +
+ +##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。 + +
+
+ +
+
+ +
+ +##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。 + +
+
+ +
+
+ +
+ +##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。 + +
+
+ +
+
diff --git a/docs/mobile/fultter_design/progress.md b/docs/mobile/fultter_design/progress.md new file mode 100644 index 0000000000..36c5289238 --- /dev/null +++ b/docs/mobile/fultter_design/progress.md @@ -0,0 +1,62 @@ + + +### 何时使用 + +当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 + +### 与页面布局相关 + +##### 当展示页面、模块的加载进度时，通常进度条放置在页面、模块的正中间。 + +
+
+ +
+ +
+ +
+
+ +### 常见用法 + +##### 通常用于任务周期较长的场景中，配有文字或图标显示进度和状态。 + +
+
+ +
+
+ +
+ +##### 当任务时间较短、或难以预估剩余时间时，通常弱化进度的百分比信息，如使用隐藏数值进度条、或微型的环形进度条。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 若任务需要等待的时间很长，可以提供大概的时间估计，让用户更有预期。 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/mobile/fultter_design/pull-down-refresh.md b/docs/mobile/fultter_design/pull-down-refresh.md new file mode 100644 index 0000000000..62ecb09c37 --- /dev/null +++ b/docs/mobile/fultter_design/pull-down-refresh.md @@ -0,0 +1,60 @@ + + +### 何时使用 + +当需要对页面信息进行整体刷新或加载更多同类信息时使用。 + +### 与页面布局相关 + +##### 下拉刷新位于内容最上方；通常在页面最顶部或者选项卡、吸顶模块之下。 + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +### 常见用法 + +##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。 + +
+
+ +
+
+ +
+ +##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。 + +
+
+ + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/mobile/fultter_design/radio.md b/docs/mobile/fultter_design/radio.md new file mode 100644 index 0000000000..a8a64f2fb1 --- /dev/null +++ b/docs/mobile/fultter_design/radio.md @@ -0,0 +1,57 @@ + + +### 何时使用 + +当用户需要从一组数据选择一个选项时使用。 + +### 组件搭配使用 + +##### 单选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不太建议用单选框触发一个弹窗。 + +
+ + +
+ +
+ + +
+ +
+ +##### 不建议用单选框开启/关闭一个功能，建议使用开关组件。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :--------------------------------------- | +| [多选框](./checkbox) | 当用户需要从一组数据选择多个选项时使用。 | diff --git a/docs/mobile/fultter_design/rate.md b/docs/mobile/fultter_design/rate.md new file mode 100644 index 0000000000..affb6df578 --- /dev/null +++ b/docs/mobile/fultter_design/rate.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +当需要对某行为/事物进行简单的星级评定时使用。 + +### 组件搭配使用 + +##### 通常结合多行文本框、标签使用，常见于评论场景，用户对某事物进行星级评定后，可选择预设的文本标签、或在文本框中撰写内容来进行更详细的评价。 + +
+
+ +
+
+ +### 常见用法 + +##### 在较为严谨的评论场景，通常结合辅助文字，帮助用户更好地理解每个星级的含义，避免个体的打分标准不统一。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 可结合业务场景自定义评分图标，如使用品牌的icon，增强品牌透出，但不建议使用过于复杂的图形作为评分图标。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 在同一个评论场景中，评分机制应保持一致，不建议将半星、整星的评分机制混用。 +
+
+ + +
+
diff --git a/docs/mobile/fultter_design/result.md b/docs/mobile/fultter_design/result.md new file mode 100644 index 0000000000..10ee2f0803 --- /dev/null +++ b/docs/mobile/fultter_design/result.md @@ -0,0 +1,54 @@ + + +### 何时使用 + +当需要向用户展示操作后的结果反馈时使用。 + +### 常见用法 + +##### 任务本身在弹窗中进行或仅需要较为轻量的结果反馈时，可使用弹窗承载结果反馈。 + +
+
+ +
+
+ +
+ +##### 当任务结束并给予反馈后，需要推荐其他内容、任务、商品等给用户时，通常使用页面承载结果和推荐。 + +
+
+ +
+
+ +
+ +##### 当任务结果为失败时，通常会告知用户失败原因，甚至提供解决问题的操作。 + +
+
+ +
+
+ +
+ + +##### 当前操作结束后，若还存在一系列用户需关注的流程进度，通常会结合步骤条将流程展示于结果页。 + +
+
+ +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :--------------------------- | +| [空状态](./empty ) | 当页面或模块数据为空时使用。 | diff --git a/docs/mobile/fultter_design/search.md b/docs/mobile/fultter_design/search.md new file mode 100644 index 0000000000..36de059457 --- /dev/null +++ b/docs/mobile/fultter_design/search.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +当需要从海量信息中准确提取准确的内容时使用。 + +### 与页面布局相关 + +##### 位于页面或内容模块的最上方，通过搜索框、搜索icon等方式承载和触发功能。 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 在可搜索内容类型较为单一的场景下，可直接在原页面激活搜索态进行搜索，并通过高亮命中字符的方式展示搜索结果，页面内容组织结构保持不变。 + +
+ +
+ +
+ +##### 在可搜索内容类型较丰富的场景下，通过模态承载搜索态，并在新页面中按分类呈现搜索结果。 + +
+ +
+ +
+ +##### 在用户触发搜索后，对用户即将搜索的内容进行预判和推荐，并需要满足营销的诉求。 + +
+ +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./Input) | 需要进行文字输入，且需填写的字数较少时使用。 | diff --git a/docs/mobile/fultter_design/side-bar.md b/docs/mobile/fultter_design/side-bar.md new file mode 100644 index 0000000000..009678dd2f --- /dev/null +++ b/docs/mobile/fultter_design/side-bar.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 + +### 组件搭配使用 + +##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。 + +
+
+ +
+
+ + +### 正确/慎用示例 + +##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------ | :---------------------------------------------------------------------------- | +| [标签栏](./tab-bar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/mobile/fultter_design/skeleton.md b/docs/mobile/fultter_design/skeleton.md new file mode 100644 index 0000000000..c034dfe200 --- /dev/null +++ b/docs/mobile/fultter_design/skeleton.md @@ -0,0 +1,27 @@ + + +### 何时使用 + +当整个页面需要加载时使用 + +### 推荐/慎用示例 + +##### 建议骨架屏的元素构成和排布方式与页面自身保持一致 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/mobile/fultter_design/slider.md b/docs/mobile/fultter_design/slider.md new file mode 100644 index 0000000000..24a6648541 --- /dev/null +++ b/docs/mobile/fultter_design/slider.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +当用户需要快捷地进行数值/程度选择时使用。 + +### 组件搭配使用 + +##### 滑动选择器与[单元格](./cell)组合使用，单元格作为承载滑动选择器的容器。 + +
+
+ +
+
+ + +### 常见用法 + +##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 + +
+
+ +
+
+ +
+ +##### 用于难以量化的对立数据，以此表示程度。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当有多个刻度区间时，避免区间数值不一致，造成滑动调整不准确。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------ | :----------------------- | +| [步进器](./stepper) | 需要进行数量选择时使用。 | diff --git a/docs/mobile/fultter_design/stepper.md b/docs/mobile/fultter_design/stepper.md new file mode 100644 index 0000000000..fe0c63c356 --- /dev/null +++ b/docs/mobile/fultter_design/stepper.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +需要进行数量选择时使用 + +### 常见用法 + +##### 通常用于数量选择，如选择人数、天数、商品数量等 + +
+
+ +
+
+ +
+ +##### 用户可通过“+”“-”按钮调整数值，或点击数字输入框来输入具体的数值 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 点击“+”“-”按钮时，数值增减的步长相同，不建议进行不同步长的变化 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :------------------------------------------- | +| [滑动选择器](./slider) | 当用户需要快捷地进行数值/程度选择时使用。 | +| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 | diff --git a/docs/mobile/fultter_design/steps.md b/docs/mobile/fultter_design/steps.md new file mode 100644 index 0000000000..c0e7419c6d --- /dev/null +++ b/docs/mobile/fultter_design/steps.md @@ -0,0 +1,74 @@ + + +### 何时使用 + +当需要展示较为复杂的线性流程时使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 步骤不宜过多，过长的步骤建议优化流程或使用其它交互方式。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 每个小步骤建议尽量简洁清晰，以降低用户的理解和操作成本；若小步骤本身已经具有较高的复杂度，建议使用其它方式呈现。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。 + +
+ + +
+ +
+ +##### 尽量避免嵌套步骤条。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :---------------------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/mobile/fultter_design/swipe-cell.md b/docs/mobile/fultter_design/swipe-cell.md new file mode 100644 index 0000000000..b74e83efaa --- /dev/null +++ b/docs/mobile/fultter_design/swipe-cell.md @@ -0,0 +1,75 @@ + + +### 何时使用 + +需要针对列表项目进行某项低频的辅助操作时使用。 + +### 组件搭配使用 + +##### 与[单元格](./cell)、[按钮](./button)组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 通常使用在对话列表、收藏列表、购物车等场景中，承载删除、收藏等辅助操作。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。 + +
+ +
+ + +### 推荐/慎用示例 + +##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。 + +
+ + +
+ +
+ +##### 按钮的顺序、颜色使用需要符合用户预期。 +
+ + +
+ +
+ +##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。 +
+ + +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/mobile/fultter_design/swiper.md b/docs/mobile/fultter_design/swiper.md new file mode 100644 index 0000000000..25c44deea7 --- /dev/null +++ b/docs/mobile/fultter_design/swiper.md @@ -0,0 +1,40 @@ + + +### 何时使用 + +当需要承载一组banner或一组图片时使用。 + +### 常见用法 + +##### 用于放置营销活动或承载平台广告等具有时效性的内容入口。 + +
+
+ +
+ +
+ +
+
+ +
+ + ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
+
+ + +
+
diff --git a/docs/mobile/fultter_design/switch.md b/docs/mobile/fultter_design/switch.md new file mode 100644 index 0000000000..95ab608e62 --- /dev/null +++ b/docs/mobile/fultter_design/switch.md @@ -0,0 +1,31 @@ + + +### 何时使用 + +当需要切换某个功能的开启、关闭时使用。 + +### 推荐/慎用示例 + +##### 开关状态的颜色使用建议符合颜色语义，尽量避免让开启、关闭状态的颜色产生混淆。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。 +
+
+ + +
+
diff --git a/docs/mobile/fultter_design/tab-bar.md b/docs/mobile/fultter_design/tab-bar.md new file mode 100644 index 0000000000..9bfc0da40e --- /dev/null +++ b/docs/mobile/fultter_design/tab-bar.md @@ -0,0 +1,77 @@ + + +### 何时使用 + +目标模块/视图需要从应用的任何地方直接进行访问时使用。 + +### 组件搭配使用 + +##### 标签栏与[徽标](./badge)组合使用，用于告知用户该模块/视图的状态变化。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 避免在同个状态下有不同颜色的文本和图标。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 文本是对标签的简要说明，不建议将文本进行截断或换行，所以应避免使用长文本。 + +
+
+ + +
+
+ +
+ +
+ + +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :---------------------------------------------------------------------------- | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/mobile/fultter_design/tabs.md b/docs/mobile/fultter_design/tabs.md new file mode 100644 index 0000000000..6be7389f77 --- /dev/null +++ b/docs/mobile/fultter_design/tabs.md @@ -0,0 +1,106 @@ + + +### 何时使用 + +当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 + +
+
+ +
+ +
+ +
+
+ +### 组件搭配使用 + +##### 选项卡与[徽标](./badge)组合使用，用于展示户该分类的状态变化或营销信息。 + +
+
+ +
+
+ + +### 常见用法 + +##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 不建议使用选项卡来实现功能模块间的切换。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议文本简明扼要，不建议将文本进行截断或换行；若需要使用较长文本，建议使用等距选项卡。 + +
+ + +
+ +
+ + +
+ +
+ +##### 尽量避免使用多个选项卡进行嵌套，若使用，建议避免使用相同样式进行嵌套；一般情况下选项卡内的信息需要进一步分类，建议使用下拉菜单或标签进行选择过滤。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :------------------------------------------------------------- | +| [标签栏](./tab-bar) | 当目标模块/视图需要从应用的任何地方直接进行访问时使用。 | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/mobile/fultter_design/tag.md b/docs/mobile/fultter_design/tag.md new file mode 100644 index 0000000000..b42ac2bfee --- /dev/null +++ b/docs/mobile/fultter_design/tag.md @@ -0,0 +1,86 @@ + + +### 何时使用 + +当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 + +### 组件搭配使用 + +##### 与[图片](./image)组合使用，图片作为内容、商品等对象的详情入口时，可通过添加标签来展示该对象的属性、状态、类别、营销情况等。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 与[下拉菜单](./dropdown-menu)组合使用，作为菜单面板下拉后的选项，供用户进行选择。 + +
+
+ +
+
+ +### 常见用法 + +##### 常用于展示对象本身的属性、状态、类别、营销情况等信息，且仅作为展示使用。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 常用于内容数据基于某个维度或某些维度的检索、筛选。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 标签颜色和字体颜色在明度、色相上要避免难以区分，保证标签的可读性。 + +
+
+ + +
+
+ +
+ +##### 标签文案需要经过概括和提炼，不建议过长。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------- | :----------------------------------------------------- | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 | diff --git a/docs/mobile/fultter_design/textarea.md b/docs/mobile/fultter_design/textarea.md new file mode 100644 index 0000000000..1d5b15da73 --- /dev/null +++ b/docs/mobile/fultter_design/textarea.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +需要进行文字输入，且需填写的字数较多时使用。 + +### 常见用法 + +##### 常见于表单、内容发布的场景中，用于输入较长的文本内容。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 尽量避免输入过于复杂的文本内容，考虑将内容拆分，让用户分步输入。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议根据待输入的内容决定多行文本框的高度。 +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 | + diff --git a/docs/mobile/fultter_design/toast.md b/docs/mobile/fultter_design/toast.md new file mode 100644 index 0000000000..b7d7d9af5e --- /dev/null +++ b/docs/mobile/fultter_design/toast.md @@ -0,0 +1,43 @@ + + +### 何时使用 + +当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 + +### 与页面布局相关 + +##### 轻提示通常放置在页面正中间，一段时间后自动消失。 + +
+
+ +
+
+ + +### 组件搭配使用 + +##### 轻提示经常和加载搭配使用，在页面内进行某项操作后，用作加载反馈。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 轻提示的文案内容通常不超过30个字，确保用户有充足的时间进行阅读，若需要提示较长的文本内容，建议使用其它交互方式。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/mobile/fultter_design/tree-select.md b/docs/mobile/fultter_design/tree-select.md new file mode 100644 index 0000000000..eda2403196 --- /dev/null +++ b/docs/mobile/fultter_design/tree-select.md @@ -0,0 +1,27 @@ + + + +### 何时使用 + +当一组选项由2-3个层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过3层，层级过多时应调整数据结构或改用级联选择器。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------------- | :--------------------------------------------------------------------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。 | +| [级联选择器](./cascader) | 当一组选项由递进层级构成，且有每个层级有大量的选项需要用户逐级选择使用时。 | diff --git a/docs/mobile/fultter_design/upload.md b/docs/mobile/fultter_design/upload.md new file mode 100644 index 0000000000..085e8de153 --- /dev/null +++ b/docs/mobile/fultter_design/upload.md @@ -0,0 +1,43 @@ + + +### 何时使用 + +当需要进行图片上传时使用。 + +### 组件搭配使用 + +##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./action-sheet)，供用户选择不同渠道进行新的上传。 + +
+ +
+ +
+ +##### 点击已经上传的图片可跳转[图片预览](./image-viewer)，让用户对已上传的图片进行快速查看。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。 + +
+ + +
+ +
+ +##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。 + +
+
+ + +
+
From 0ff86bbc6d1c9c5e8094a4e5b407809b8d928e77 Mon Sep 17 00:00:00 2001 From: Luozf <35024333+Luozf12345@users.noreply.github.com> Date: Tue, 7 May 2024 19:15:32 +0800 Subject: [PATCH 05/35] update flutter_design dir name (#1788) Co-authored-by: zflyluo --- docs/mobile/{fultter_design => flutter_design}/action-sheet.md | 0 docs/mobile/{fultter_design => flutter_design}/avatar.md | 0 docs/mobile/{fultter_design => flutter_design}/back-top.md | 0 docs/mobile/{fultter_design => flutter_design}/badge.md | 0 docs/mobile/{fultter_design => flutter_design}/button.md | 0 docs/mobile/{fultter_design => flutter_design}/calendar.md | 0 docs/mobile/{fultter_design => flutter_design}/cascader.md | 0 docs/mobile/{fultter_design => flutter_design}/cell.md | 0 docs/mobile/{fultter_design => flutter_design}/checkbox.md | 0 docs/mobile/{fultter_design => flutter_design}/collapse.md | 0 docs/mobile/{fultter_design => flutter_design}/count-down.md | 0 .../mobile/{fultter_design => flutter_design}/date-time-picker.md | 0 docs/mobile/{fultter_design => flutter_design}/dialog.md | 0 docs/mobile/{fultter_design => flutter_design}/divider.md | 0 docs/mobile/{fultter_design => flutter_design}/drawer.md | 0 docs/mobile/{fultter_design => flutter_design}/dropdown-menu.md | 0 docs/mobile/{fultter_design => flutter_design}/empty.md | 0 docs/mobile/{fultter_design => flutter_design}/fab.md | 0 docs/mobile/{fultter_design => flutter_design}/footer.md | 0 docs/mobile/{fultter_design => flutter_design}/grid.md | 0 docs/mobile/{fultter_design => flutter_design}/image-viewer.md | 0 docs/mobile/{fultter_design => flutter_design}/image.md | 0 docs/mobile/{fultter_design => flutter_design}/indexes.md | 0 docs/mobile/{fultter_design => flutter_design}/input.md | 0 docs/mobile/{fultter_design => flutter_design}/link.md | 0 docs/mobile/{fultter_design => flutter_design}/loading.md | 0 docs/mobile/{fultter_design => flutter_design}/message.md | 0 docs/mobile/{fultter_design => flutter_design}/navbar.md | 0 docs/mobile/{fultter_design => flutter_design}/notice-bar.md | 0 docs/mobile/{fultter_design => flutter_design}/picker.md | 0 docs/mobile/{fultter_design => flutter_design}/popup.md | 0 docs/mobile/{fultter_design => flutter_design}/progress.md | 0 .../{fultter_design => flutter_design}/pull-down-refresh.md | 0 docs/mobile/{fultter_design => flutter_design}/radio.md | 0 docs/mobile/{fultter_design => flutter_design}/rate.md | 0 docs/mobile/{fultter_design => flutter_design}/result.md | 0 docs/mobile/{fultter_design => flutter_design}/search.md | 0 docs/mobile/{fultter_design => flutter_design}/side-bar.md | 0 docs/mobile/{fultter_design => flutter_design}/skeleton.md | 0 docs/mobile/{fultter_design => flutter_design}/slider.md | 0 docs/mobile/{fultter_design => flutter_design}/stepper.md | 0 docs/mobile/{fultter_design => flutter_design}/steps.md | 0 docs/mobile/{fultter_design => flutter_design}/swipe-cell.md | 0 docs/mobile/{fultter_design => flutter_design}/swiper.md | 0 docs/mobile/{fultter_design => flutter_design}/switch.md | 0 docs/mobile/{fultter_design => flutter_design}/tab-bar.md | 0 docs/mobile/{fultter_design => flutter_design}/tabs.md | 0 docs/mobile/{fultter_design => flutter_design}/tag.md | 0 docs/mobile/{fultter_design => flutter_design}/textarea.md | 0 docs/mobile/{fultter_design => flutter_design}/toast.md | 0 docs/mobile/{fultter_design => flutter_design}/tree-select.md | 0 docs/mobile/{fultter_design => flutter_design}/upload.md | 0 52 files changed, 0 insertions(+), 0 deletions(-) rename docs/mobile/{fultter_design => flutter_design}/action-sheet.md (100%) rename docs/mobile/{fultter_design => flutter_design}/avatar.md (100%) rename docs/mobile/{fultter_design => flutter_design}/back-top.md (100%) rename docs/mobile/{fultter_design => flutter_design}/badge.md (100%) rename docs/mobile/{fultter_design => flutter_design}/button.md (100%) rename docs/mobile/{fultter_design => flutter_design}/calendar.md (100%) rename docs/mobile/{fultter_design => flutter_design}/cascader.md (100%) rename docs/mobile/{fultter_design => flutter_design}/cell.md (100%) rename docs/mobile/{fultter_design => flutter_design}/checkbox.md (100%) rename docs/mobile/{fultter_design => flutter_design}/collapse.md (100%) rename docs/mobile/{fultter_design => flutter_design}/count-down.md (100%) rename docs/mobile/{fultter_design => flutter_design}/date-time-picker.md (100%) rename docs/mobile/{fultter_design => flutter_design}/dialog.md (100%) rename docs/mobile/{fultter_design => flutter_design}/divider.md (100%) rename docs/mobile/{fultter_design => flutter_design}/drawer.md (100%) rename docs/mobile/{fultter_design => flutter_design}/dropdown-menu.md (100%) rename docs/mobile/{fultter_design => flutter_design}/empty.md (100%) rename docs/mobile/{fultter_design => flutter_design}/fab.md (100%) rename docs/mobile/{fultter_design => flutter_design}/footer.md (100%) rename docs/mobile/{fultter_design => flutter_design}/grid.md (100%) rename docs/mobile/{fultter_design => flutter_design}/image-viewer.md (100%) rename docs/mobile/{fultter_design => flutter_design}/image.md (100%) rename docs/mobile/{fultter_design => flutter_design}/indexes.md (100%) rename docs/mobile/{fultter_design => flutter_design}/input.md (100%) rename docs/mobile/{fultter_design => flutter_design}/link.md (100%) rename docs/mobile/{fultter_design => flutter_design}/loading.md (100%) rename docs/mobile/{fultter_design => flutter_design}/message.md (100%) rename docs/mobile/{fultter_design => flutter_design}/navbar.md (100%) rename docs/mobile/{fultter_design => flutter_design}/notice-bar.md (100%) rename docs/mobile/{fultter_design => flutter_design}/picker.md (100%) rename docs/mobile/{fultter_design => flutter_design}/popup.md (100%) rename docs/mobile/{fultter_design => flutter_design}/progress.md (100%) rename docs/mobile/{fultter_design => flutter_design}/pull-down-refresh.md (100%) rename docs/mobile/{fultter_design => flutter_design}/radio.md (100%) rename docs/mobile/{fultter_design => flutter_design}/rate.md (100%) rename docs/mobile/{fultter_design => flutter_design}/result.md (100%) rename docs/mobile/{fultter_design => flutter_design}/search.md (100%) rename docs/mobile/{fultter_design => flutter_design}/side-bar.md (100%) rename docs/mobile/{fultter_design => flutter_design}/skeleton.md (100%) rename docs/mobile/{fultter_design => flutter_design}/slider.md (100%) rename docs/mobile/{fultter_design => flutter_design}/stepper.md (100%) rename docs/mobile/{fultter_design => flutter_design}/steps.md (100%) rename docs/mobile/{fultter_design => flutter_design}/swipe-cell.md (100%) rename docs/mobile/{fultter_design => flutter_design}/swiper.md (100%) rename docs/mobile/{fultter_design => flutter_design}/switch.md (100%) rename docs/mobile/{fultter_design => flutter_design}/tab-bar.md (100%) rename docs/mobile/{fultter_design => flutter_design}/tabs.md (100%) rename docs/mobile/{fultter_design => flutter_design}/tag.md (100%) rename docs/mobile/{fultter_design => flutter_design}/textarea.md (100%) rename docs/mobile/{fultter_design => flutter_design}/toast.md (100%) rename docs/mobile/{fultter_design => flutter_design}/tree-select.md (100%) rename docs/mobile/{fultter_design => flutter_design}/upload.md (100%) diff --git a/docs/mobile/fultter_design/action-sheet.md b/docs/mobile/flutter_design/action-sheet.md similarity index 100% rename from docs/mobile/fultter_design/action-sheet.md rename to docs/mobile/flutter_design/action-sheet.md diff --git a/docs/mobile/fultter_design/avatar.md b/docs/mobile/flutter_design/avatar.md similarity index 100% rename from docs/mobile/fultter_design/avatar.md rename to docs/mobile/flutter_design/avatar.md diff --git a/docs/mobile/fultter_design/back-top.md b/docs/mobile/flutter_design/back-top.md similarity index 100% rename from docs/mobile/fultter_design/back-top.md rename to docs/mobile/flutter_design/back-top.md diff --git a/docs/mobile/fultter_design/badge.md b/docs/mobile/flutter_design/badge.md similarity index 100% rename from docs/mobile/fultter_design/badge.md rename to docs/mobile/flutter_design/badge.md diff --git a/docs/mobile/fultter_design/button.md b/docs/mobile/flutter_design/button.md similarity index 100% rename from docs/mobile/fultter_design/button.md rename to docs/mobile/flutter_design/button.md diff --git a/docs/mobile/fultter_design/calendar.md b/docs/mobile/flutter_design/calendar.md similarity index 100% rename from docs/mobile/fultter_design/calendar.md rename to docs/mobile/flutter_design/calendar.md diff --git a/docs/mobile/fultter_design/cascader.md b/docs/mobile/flutter_design/cascader.md similarity index 100% rename from docs/mobile/fultter_design/cascader.md rename to docs/mobile/flutter_design/cascader.md diff --git a/docs/mobile/fultter_design/cell.md b/docs/mobile/flutter_design/cell.md similarity index 100% rename from docs/mobile/fultter_design/cell.md rename to docs/mobile/flutter_design/cell.md diff --git a/docs/mobile/fultter_design/checkbox.md b/docs/mobile/flutter_design/checkbox.md similarity index 100% rename from docs/mobile/fultter_design/checkbox.md rename to docs/mobile/flutter_design/checkbox.md diff --git a/docs/mobile/fultter_design/collapse.md b/docs/mobile/flutter_design/collapse.md similarity index 100% rename from docs/mobile/fultter_design/collapse.md rename to docs/mobile/flutter_design/collapse.md diff --git a/docs/mobile/fultter_design/count-down.md b/docs/mobile/flutter_design/count-down.md similarity index 100% rename from docs/mobile/fultter_design/count-down.md rename to docs/mobile/flutter_design/count-down.md diff --git a/docs/mobile/fultter_design/date-time-picker.md b/docs/mobile/flutter_design/date-time-picker.md similarity index 100% rename from docs/mobile/fultter_design/date-time-picker.md rename to docs/mobile/flutter_design/date-time-picker.md diff --git a/docs/mobile/fultter_design/dialog.md b/docs/mobile/flutter_design/dialog.md similarity index 100% rename from docs/mobile/fultter_design/dialog.md rename to docs/mobile/flutter_design/dialog.md diff --git a/docs/mobile/fultter_design/divider.md b/docs/mobile/flutter_design/divider.md similarity index 100% rename from docs/mobile/fultter_design/divider.md rename to docs/mobile/flutter_design/divider.md diff --git a/docs/mobile/fultter_design/drawer.md b/docs/mobile/flutter_design/drawer.md similarity index 100% rename from docs/mobile/fultter_design/drawer.md rename to docs/mobile/flutter_design/drawer.md diff --git a/docs/mobile/fultter_design/dropdown-menu.md b/docs/mobile/flutter_design/dropdown-menu.md similarity index 100% rename from docs/mobile/fultter_design/dropdown-menu.md rename to docs/mobile/flutter_design/dropdown-menu.md diff --git a/docs/mobile/fultter_design/empty.md b/docs/mobile/flutter_design/empty.md similarity index 100% rename from docs/mobile/fultter_design/empty.md rename to docs/mobile/flutter_design/empty.md diff --git a/docs/mobile/fultter_design/fab.md b/docs/mobile/flutter_design/fab.md similarity index 100% rename from docs/mobile/fultter_design/fab.md rename to docs/mobile/flutter_design/fab.md diff --git a/docs/mobile/fultter_design/footer.md b/docs/mobile/flutter_design/footer.md similarity index 100% rename from docs/mobile/fultter_design/footer.md rename to docs/mobile/flutter_design/footer.md diff --git a/docs/mobile/fultter_design/grid.md b/docs/mobile/flutter_design/grid.md similarity index 100% rename from docs/mobile/fultter_design/grid.md rename to docs/mobile/flutter_design/grid.md diff --git a/docs/mobile/fultter_design/image-viewer.md b/docs/mobile/flutter_design/image-viewer.md similarity index 100% rename from docs/mobile/fultter_design/image-viewer.md rename to docs/mobile/flutter_design/image-viewer.md diff --git a/docs/mobile/fultter_design/image.md b/docs/mobile/flutter_design/image.md similarity index 100% rename from docs/mobile/fultter_design/image.md rename to docs/mobile/flutter_design/image.md diff --git a/docs/mobile/fultter_design/indexes.md b/docs/mobile/flutter_design/indexes.md similarity index 100% rename from docs/mobile/fultter_design/indexes.md rename to docs/mobile/flutter_design/indexes.md diff --git a/docs/mobile/fultter_design/input.md b/docs/mobile/flutter_design/input.md similarity index 100% rename from docs/mobile/fultter_design/input.md rename to docs/mobile/flutter_design/input.md diff --git a/docs/mobile/fultter_design/link.md b/docs/mobile/flutter_design/link.md similarity index 100% rename from docs/mobile/fultter_design/link.md rename to docs/mobile/flutter_design/link.md diff --git a/docs/mobile/fultter_design/loading.md b/docs/mobile/flutter_design/loading.md similarity index 100% rename from docs/mobile/fultter_design/loading.md rename to docs/mobile/flutter_design/loading.md diff --git a/docs/mobile/fultter_design/message.md b/docs/mobile/flutter_design/message.md similarity index 100% rename from docs/mobile/fultter_design/message.md rename to docs/mobile/flutter_design/message.md diff --git a/docs/mobile/fultter_design/navbar.md b/docs/mobile/flutter_design/navbar.md similarity index 100% rename from docs/mobile/fultter_design/navbar.md rename to docs/mobile/flutter_design/navbar.md diff --git a/docs/mobile/fultter_design/notice-bar.md b/docs/mobile/flutter_design/notice-bar.md similarity index 100% rename from docs/mobile/fultter_design/notice-bar.md rename to docs/mobile/flutter_design/notice-bar.md diff --git a/docs/mobile/fultter_design/picker.md b/docs/mobile/flutter_design/picker.md similarity index 100% rename from docs/mobile/fultter_design/picker.md rename to docs/mobile/flutter_design/picker.md diff --git a/docs/mobile/fultter_design/popup.md b/docs/mobile/flutter_design/popup.md similarity index 100% rename from docs/mobile/fultter_design/popup.md rename to docs/mobile/flutter_design/popup.md diff --git a/docs/mobile/fultter_design/progress.md b/docs/mobile/flutter_design/progress.md similarity index 100% rename from docs/mobile/fultter_design/progress.md rename to docs/mobile/flutter_design/progress.md diff --git a/docs/mobile/fultter_design/pull-down-refresh.md b/docs/mobile/flutter_design/pull-down-refresh.md similarity index 100% rename from docs/mobile/fultter_design/pull-down-refresh.md rename to docs/mobile/flutter_design/pull-down-refresh.md diff --git a/docs/mobile/fultter_design/radio.md b/docs/mobile/flutter_design/radio.md similarity index 100% rename from docs/mobile/fultter_design/radio.md rename to docs/mobile/flutter_design/radio.md diff --git a/docs/mobile/fultter_design/rate.md b/docs/mobile/flutter_design/rate.md similarity index 100% rename from docs/mobile/fultter_design/rate.md rename to docs/mobile/flutter_design/rate.md diff --git a/docs/mobile/fultter_design/result.md b/docs/mobile/flutter_design/result.md similarity index 100% rename from docs/mobile/fultter_design/result.md rename to docs/mobile/flutter_design/result.md diff --git a/docs/mobile/fultter_design/search.md b/docs/mobile/flutter_design/search.md similarity index 100% rename from docs/mobile/fultter_design/search.md rename to docs/mobile/flutter_design/search.md diff --git a/docs/mobile/fultter_design/side-bar.md b/docs/mobile/flutter_design/side-bar.md similarity index 100% rename from docs/mobile/fultter_design/side-bar.md rename to docs/mobile/flutter_design/side-bar.md diff --git a/docs/mobile/fultter_design/skeleton.md b/docs/mobile/flutter_design/skeleton.md similarity index 100% rename from docs/mobile/fultter_design/skeleton.md rename to docs/mobile/flutter_design/skeleton.md diff --git a/docs/mobile/fultter_design/slider.md b/docs/mobile/flutter_design/slider.md similarity index 100% rename from docs/mobile/fultter_design/slider.md rename to docs/mobile/flutter_design/slider.md diff --git a/docs/mobile/fultter_design/stepper.md b/docs/mobile/flutter_design/stepper.md similarity index 100% rename from docs/mobile/fultter_design/stepper.md rename to docs/mobile/flutter_design/stepper.md diff --git a/docs/mobile/fultter_design/steps.md b/docs/mobile/flutter_design/steps.md similarity index 100% rename from docs/mobile/fultter_design/steps.md rename to docs/mobile/flutter_design/steps.md diff --git a/docs/mobile/fultter_design/swipe-cell.md b/docs/mobile/flutter_design/swipe-cell.md similarity index 100% rename from docs/mobile/fultter_design/swipe-cell.md rename to docs/mobile/flutter_design/swipe-cell.md diff --git a/docs/mobile/fultter_design/swiper.md b/docs/mobile/flutter_design/swiper.md similarity index 100% rename from docs/mobile/fultter_design/swiper.md rename to docs/mobile/flutter_design/swiper.md diff --git a/docs/mobile/fultter_design/switch.md b/docs/mobile/flutter_design/switch.md similarity index 100% rename from docs/mobile/fultter_design/switch.md rename to docs/mobile/flutter_design/switch.md diff --git a/docs/mobile/fultter_design/tab-bar.md b/docs/mobile/flutter_design/tab-bar.md similarity index 100% rename from docs/mobile/fultter_design/tab-bar.md rename to docs/mobile/flutter_design/tab-bar.md diff --git a/docs/mobile/fultter_design/tabs.md b/docs/mobile/flutter_design/tabs.md similarity index 100% rename from docs/mobile/fultter_design/tabs.md rename to docs/mobile/flutter_design/tabs.md diff --git a/docs/mobile/fultter_design/tag.md b/docs/mobile/flutter_design/tag.md similarity index 100% rename from docs/mobile/fultter_design/tag.md rename to docs/mobile/flutter_design/tag.md diff --git a/docs/mobile/fultter_design/textarea.md b/docs/mobile/flutter_design/textarea.md similarity index 100% rename from docs/mobile/fultter_design/textarea.md rename to docs/mobile/flutter_design/textarea.md diff --git a/docs/mobile/fultter_design/toast.md b/docs/mobile/flutter_design/toast.md similarity index 100% rename from docs/mobile/fultter_design/toast.md rename to docs/mobile/flutter_design/toast.md diff --git a/docs/mobile/fultter_design/tree-select.md b/docs/mobile/flutter_design/tree-select.md similarity index 100% rename from docs/mobile/fultter_design/tree-select.md rename to docs/mobile/flutter_design/tree-select.md diff --git a/docs/mobile/fultter_design/upload.md b/docs/mobile/flutter_design/upload.md similarity index 100% rename from docs/mobile/fultter_design/upload.md rename to docs/mobile/flutter_design/upload.md From e398021dac2820995b518c1e64f888818448c287 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Fri, 10 May 2024 19:08:34 +0800 Subject: [PATCH 06/35] fix(menu): raise popup__menu priority (#1791) * feat(datepicker): add locale placeholder * fix(menu): raise popup__menu priority --- style/web/components/menu/_index.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index d39ece866c..1112918e57 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -688,13 +688,16 @@ a.@{prefix}-menu__item { &__popup { overflow: hidden; - position: absolute; background: @menu-theme-light; z-index: @menu-outer-zindex; border-radius: @border-radius-medium; opacity: 0; .list-style-none(); + &.@{prefix}-popup__content { + position: absolute; + } + &-wrapper { padding: @pop-padding-m; height: 100%; From 9a57a1aa9ddb54e4f897eb27445a947423ba02cd Mon Sep 17 00:00:00 2001 From: Siubeng Date: Fri, 10 May 2024 22:35:43 +0800 Subject: [PATCH 07/35] fix(Select): avoid .t-is-checked style from overriding disabled style of select option (#1789) Co-authored-by: ringofeng --- style/web/components/select/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less index b936bdff77..971541976b 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -210,7 +210,7 @@ font: @select-font-s; } -.@{prefix}-select-option.@{prefix}-is-selected { +.@{prefix}-select-option.@{prefix}-is-selected:not(.@{prefix}-is-disabled) { color: @select-selected-color; background-color: @select-selected-bg-color; transition: all @anim-duration-base linear; From 5a70236de3eb89ba9a9cf99f761e2033b826c8b3 Mon Sep 17 00:00:00 2001 From: zelmazhou <72006584+zuiaiwanqian@users.noreply.github.com> Date: Sat, 11 May 2024 14:13:24 +0800 Subject: [PATCH 08/35] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0swiper=E7=9A=84?= =?UTF-8?q?outside=E6=A0=B7=E5=BC=8F=20(#1781)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加swiper的outside样式 * fix: 解决lint问题 * feat: 修改css变量名 * fix: 修复pr意见 --------- Co-authored-by: zelmazhou --- .../mobile/components/swiper-nav/v2/_index.less | 17 +++++++++++++++++ style/mobile/components/swiper-nav/v2/_var.less | 2 ++ style/mobile/components/swiper/v2/_index.less | 8 ++++++++ style/mobile/components/swiper/v2/_var.less | 5 +++++ 4 files changed, 32 insertions(+) diff --git a/style/mobile/components/swiper-nav/v2/_index.less b/style/mobile/components/swiper-nav/v2/_index.less index 547ccd8d92..9b6ec48e2e 100644 --- a/style/mobile/components/swiper-nav/v2/_index.less +++ b/style/mobile/components/swiper-nav/v2/_index.less @@ -151,4 +151,21 @@ } } } + + &--outside { + bottom: 0; + + .@{prefix}-swiper-nav { + &__dots, + &__dots-bar { + &-item { + background: @swiper-nav-outside-bg; + + &--active { + background-color: @swiper-nav-outside-bg-active; + } + } + } + } + } } diff --git a/style/mobile/components/swiper-nav/v2/_var.less b/style/mobile/components/swiper-nav/v2/_var.less index 81badafce1..4e2fa8d15f 100644 --- a/style/mobile/components/swiper-nav/v2/_var.less +++ b/style/mobile/components/swiper-nav/v2/_var.less @@ -3,6 +3,8 @@ @swiper-nav-dot-active-color: var(--td-swiper-nav-dot-active-color, @font-white-1); @swiper-nav-dot-size: var(--td-swiper-nav-dot-size, 6px); @swiper-nav-dots-bar-active-width: var(--td-swiper-nav-dots-bar-active-width, 20px); +@swiper-nav-outside-bg: var(--td-swiper-nav-outside-bg, @gray-color-3); +@swiper-nav-outside-bg-active: var(--td-swiper-nav-outside-bg-active, @brand-color-7); // fraction @swiper-nav-fraction-color: var(--td-swiper-nav-fraction-color, @font-white-1); diff --git a/style/mobile/components/swiper/v2/_index.less b/style/mobile/components/swiper/v2/_index.less index b4f52f0fd5..ee4a67a20b 100644 --- a/style/mobile/components/swiper/v2/_index.less +++ b/style/mobile/components/swiper/v2/_index.less @@ -16,6 +16,10 @@ width: 100%; height: 100%; flex-shrink: 0; + + & > * { + border-radius: @swiper-border-radius; + } } // 主要容器 @@ -33,4 +37,8 @@ width: 100%; } } + + &--outside { + padding-bottom: @swiper-placement-outside-padding; + } } diff --git a/style/mobile/components/swiper/v2/_var.less b/style/mobile/components/swiper/v2/_var.less index dda772596f..d91473fc56 100644 --- a/style/mobile/components/swiper/v2/_var.less +++ b/style/mobile/components/swiper/v2/_var.less @@ -1 +1,6 @@ +@import "../../swiper-nav/v2/_var.less"; @swiper-border-radius: var(--td-swiper-border-radius, 8px); +@swiper-placement-outside-padding: var( + --td-swiper-placement-outside-padding, + calc(@spacer-1 + @swiper-nav-dot-size) +); From 32e1b6c5776e2907ca6c5a6487a6a27a5e959415 Mon Sep 17 00:00:00 2001 From: Y Date: Sat, 11 May 2024 14:26:15 +0800 Subject: [PATCH 09/35] style(CountDown): using TCloudNumber font (#1792) --- docs/mobile/api_v2/count-down.en-US.md | 4 ++++ docs/mobile/api_v2/count-down.md | 3 +++ .../components/count-down/v2/_index.less | 2 +- .../mobile/components/count-down/v2/_var.less | 20 ++++++++++++++++--- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/docs/mobile/api_v2/count-down.en-US.md b/docs/mobile/api_v2/count-down.en-US.md index fd1bbdddc3..15138fd00f 100644 --- a/docs/mobile/api_v2/count-down.en-US.md +++ b/docs/mobile/api_v2/count-down.en-US.md @@ -6,6 +6,10 @@ isComponent: true toc: false --- + +> CountDown is used to display the countdown value in real time. If you need to maintain the consistent font style of numbers with the site's design, we recommend downloading the TCloudNumber font from the "Number Font" section of fonts, and importing the TCloudNumberVF.ttf font resource into your project for use. + + ## Code Demo ### Base Countdown diff --git a/docs/mobile/api_v2/count-down.md b/docs/mobile/api_v2/count-down.md index 6efccdd9a0..3d7278448d 100644 --- a/docs/mobile/api_v2/count-down.md +++ b/docs/mobile/api_v2/count-down.md @@ -6,6 +6,9 @@ isComponent: true toc: false --- +> CountDown 组件用于实时展示倒计时数值。 +如果需要与站点演示一致的数字字体效果，推荐您到 数字字体章节，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。 + ## 代码演示 ### 基础倒计时 diff --git a/style/mobile/components/count-down/v2/_index.less b/style/mobile/components/count-down/v2/_index.less index aa36830de8..fdd10f3466 100644 --- a/style/mobile/components/count-down/v2/_index.less +++ b/style/mobile/components/count-down/v2/_index.less @@ -61,7 +61,7 @@ .count-down-size(large); .@{countdown} { - font-family: "DIN Alternate", "Courier New", Courier, monospace; + font-family: @countdown-number-font-family; .@{item}, .@{split} { diff --git a/style/mobile/components/count-down/v2/_var.less b/style/mobile/components/count-down/v2/_var.less index f5429ff9cf..8e60deda8b 100644 --- a/style/mobile/components/count-down/v2/_var.less +++ b/style/mobile/components/count-down/v2/_var.less @@ -26,15 +26,29 @@ @countdown-large-no-unit-font-size: 18px; // 'large'尺寸无单位分割文本大小 // 纯数字倒计时文本颜色 -@countdown-default-text-color: var(--td-countdown-default-color, @text-color-primary); +@countdown-default-text-color: var( + --td-countdown-default-color, + @text-color-primary +); // 方形/圆形底倒计时文本颜色 @countdown-text-color: var(--td-countdown-round-color, @text-color-anti); // 方形/圆形底背景颜色 @countdown-bg-color: var(--td-countdown-bg-color, @error-color-6); // 带方形底倒计时圆角大小 -@countdown-square-border-radius: var(--td-countdown-square-border-radius, @radius-small); +@countdown-square-border-radius: var( + --td-countdown-square-border-radius, + @radius-small +); // 带圆形底倒计时圆角大小 -@countdown-round-border-radius: var(--td-countdown-round-border-radius, @radius-circle); +@countdown-round-border-radius: var( + --td-countdown-round-border-radius, + @radius-circle +); + +@countdown-number-font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, + Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, + Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol; @countdown: ~"@{prefix}-count-down"; @item: ~"@{countdown}__item"; From ae308e9e63551fe510b5dfeaa6425989b41e8f8b Mon Sep 17 00:00:00 2001 From: Siubeng Date: Tue, 14 May 2024 00:37:56 +0800 Subject: [PATCH 10/35] fix: RangeInput & Input style fixes (#1793) * fix(range-input): make prefix text nowrap & keep horizontal padding consistent * fix(range-input): use flex-shrink: 0 instead for fix label wrap * fix(input): remove font-size overrides in prefix/suffix style mixin resolve Tencent/tdesign-vue#3171 --- style/web/components/input/_mixin.less | 1 - style/web/components/range-input/_index.less | 5 +++++ style/web/components/range-input/_var.less | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less index 69abf5eeb6..c23be4a635 100644 --- a/style/web/components/input/_mixin.less +++ b/style/web/components/input/_mixin.less @@ -98,7 +98,6 @@ text-align: center; display: flex; align-items: center; - font-size: @font-size-base; } & > .@{prefix}-input__@{position}-icon { diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less index 673c63a8dc..7484d1b89a 100644 --- a/style/web/components/range-input/_index.less +++ b/style/web/components/range-input/_index.less @@ -60,6 +60,11 @@ border-radius: @border-radius-small; } + // 避免 label 文字被容器内其他元素挤压导致过早换行 + & > .@{prefix}-input__prefix { + flex-shrink: 0; + } + .@{prefix}-input { padding: @range-input-inner-padding; height: 100%; diff --git a/style/web/components/range-input/_var.less b/style/web/components/range-input/_var.less index 09cafb498b..185148f611 100644 --- a/style/web/components/range-input/_var.less +++ b/style/web/components/range-input/_var.less @@ -34,7 +34,7 @@ @range-input-extra-color-error: @error-color; // 间距 -@range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-xs; +@range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-s; @range-input-status-position-right: calc(0px - @comp-margin-xxxl); @range-input-inner-gap: @comp-margin-s; @range-input-inner-padding: 0 @comp-paddingLR-xs; From 2a2902c95c7dafba5e0b3fc106d203f82df108b9 Mon Sep 17 00:00:00 2001 From: kang Date: Thu, 16 May 2024 01:31:11 +0800 Subject: [PATCH 11/35] feat: add time-picker dayjs plugin same as date-picker (#1796) * feat: add time-picker dayjs plugin same as date-picker * fix: remove unuse plugin --- js/time-picker/utils.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/time-picker/utils.ts b/js/time-picker/utils.ts index 23905b1570..5c0b756729 100644 --- a/js/time-picker/utils.ts +++ b/js/time-picker/utils.ts @@ -1,4 +1,9 @@ import dayjs from 'dayjs'; +import advancedFormat from 'dayjs/plugin/advancedFormat'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; + +dayjs.extend(advancedFormat); +dayjs.extend(customParseFormat); // 判断是否输入的值是合法的timepicker的值 export function validateInputValue(value: string, format: string) { From 9dfe4afe7214b6dd45678f3350e6270ec98c349b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Thu, 16 May 2024 11:47:14 +0800 Subject: [PATCH 12/35] fix(Upload): fix upload image error style (#1795) --- style/web/components/upload/_index.less | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less index 4b1f4b4f67..29926c28b1 100644 --- a/style/web/components/upload/_index.less +++ b/style/web/components/upload/_index.less @@ -71,7 +71,6 @@ font: @upload-list-item-font-size; &.@{prefix}-is--error { - .@{prefix}-upload__list-name { color: @upload-list-item-error-color; } @@ -150,7 +149,6 @@ } &.@{prefix}-is--error { - & .@{prefix}-icon-warning_fill { color: @upload-card-item-error-icon-warning-color; margin-bottom: @upload-card-item-error-icon-warning-margin-bottom; @@ -478,6 +476,13 @@ align-items: center; justify-content: center; flex-shrink: 0; + > .@{prefix}-image__wrapper--shape-square { + width: 100%; + + .@{prefix}-space-item { + text-align: center; + } + } > img { max-width: 100%; From d148b55b4d0c9e52d18cd49f16a7db3b2107ee34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Thu, 16 May 2024 19:04:30 +0800 Subject: [PATCH 13/35] docs(upload): fix upload locale config link (#1797) * feat(datepicker): add locale placeholder * fix(menu): raise popup__menu priority * docs(upload): fix upload locale config link --- docs/web/api/upload.en-US.md | 8 ++++---- docs/web/api/upload.md | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/web/api/upload.en-US.md b/docs/web/api/upload.en-US.md index 8f87f910dc..a9572a90e9 100644 --- a/docs/web/api/upload.en-US.md +++ b/docs/web/api/upload.en-US.md @@ -48,7 +48,7 @@ You can set `theme="single-input"`. Drag and drop upload is not supported in thi After the picture is uploaded successfully, the preview picture is displayed;After the image upload fails, the preview image is not displayed. - You can set the attribute `theme="image"`. Drag and drop upload is not supported in this style. If you need to drag and drop upload, please go to the example of drag and drop upload below the document. -- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. +- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. - Image preview URL. By default, the `url` field returned by the upload API is read. If the API does not return the `url` field, you can use `formatResponse` to format the returned value and add the `url` field to the returned value. {{ image }} @@ -57,7 +57,7 @@ After the picture is uploaded successfully, the preview picture is displayed;Aft Drag and drop files to the specified area to trigger upload. Both image and file types are supported. -- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. +- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. - If dragging and uploading a single file, set `theme="file"` and `draggable=true`. - If dragging and uploading a single image, set `theme="image"` and `draggable=true`. - You can use `fileListDisplay` to customize file information to display content. @@ -69,7 +69,7 @@ Drag and drop files to the specified area to trigger upload. Both image and file Bulk uploads are usually presented as a separate function, with uploaded content hosted in a table. Since batch upload takes a long time, in some scenarios, files may be selected first, and then uploaded uniformly after confirmation. - For batch file upload, please set the attributes `theme="file-flow"` and `multiple=true`. -- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. +- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. - When using `allowUploadDuplicateFile` to upload multiple documents, you can select files with duplicate names repeatedly. - Use `uploadAllFilesInOneRequest` and `batchUpload` to implement batch consolidated upload of multiple files. Multiple files can be uploaded and replaced as a whole. No additional files are allowed. @@ -78,7 +78,7 @@ Bulk uploads are usually presented as a separate function, with uploaded content ### Upload Images in Batch - For batch image upload, please set the attributes `theme="image-flow"` and `multiple=true`. -- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. +- All texts in the upload component can be modified via `locale`. Global configuration and document viewing are also supported. {{ img-flow-list }} diff --git a/docs/web/api/upload.md b/docs/web/api/upload.md index 8edc38b32c..211ad8832f 100644 --- a/docs/web/api/upload.md +++ b/docs/web/api/upload.md @@ -48,7 +48,7 @@ spline: form 图片上传成功后，显示预览图片；图片上传失败后，不显示预览图片。 - 设置属性 `theme="image"` 即可，这种风格不支持拖拽上传，如果需要拖拽上传请移步文档下方有拖拽上传的示例。 -- 上传组件中的全部文本，均可通过 `locale` 进行修改，也支持全局配置，查看文档。 +- 上传组件中的全部文本，均可通过 `locale` 进行修改，也支持全局配置，查看文档。 - 图片预览地址，默认会读取上传接口返回的 `url` 字段。如果接口没有返回 `url` 字段，可以使用 `formatResponse` 格式化返回值，在返回值中增加 `url` 字段。 {{ image }} @@ -57,7 +57,7 @@ spline: form 支持拖拽文件到指定区域触发上传，支持图片和文件两种类型。 -- 上传组件中的全部文本，均可通过 `locale` 进行修改，也支持全局配置，查看文档。 +- 上传组件中的全部文本，均可通过 `locale` 进行修改，也支持全局配置，查看文档。 - 如果拖拽上传单个文件，设置 `theme="file"` 和 `draggable=true`。 - 如果拖拽上传单张图片，设置 `theme="image"` 和 `draggable=true`。 - 可以使用 `fileListDisplay` 自定义文件信息呈现内容。 @@ -69,7 +69,7 @@ spline: form 批量上传通常作为一个单独的功能出现，上传的内容用表格来承载。由于批量上传需要的时间较长，某些场景下会出现先选择文件，确认后再统一上传的场景。 - 批量文件上传，请设置属性 `theme="file-flow"` 和 `multiple=true`。 -- 上传组件中的全部文本，均可通过 `locale` 进行修改，同时也支持全局配置，查看文档。 +- 上传组件中的全部文本，均可通过 `locale` 进行修改，同时也支持全局配置，查看文档。 - 使用 `allowUploadDuplicateFile` 实现多文上传时可重复选择重名文件。 - 使用 `uploadAllFilesInOneRequest` 与 `batchUpload` 实现多文件批量合并上传，多文件整体上传，整体替换，不允许追加文件。 @@ -78,7 +78,7 @@ spline: form ### 批量上传图片 - 批量图片上传，请设置属性 `theme="image-flow"` 和 `multiple=true`。 -- 上传组件中的全部文本，均可通过 `locale` 进行修改，同时也支持全局配置，查看文档。 +- 上传组件中的全部文本，均可通过 `locale` 进行修改，同时也支持全局配置，查看文档。 {{ img-flow-list }} From bf95e6a6559515d18f1aebf9b1bc1934b1041a53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Sun, 19 May 2024 16:15:55 +0800 Subject: [PATCH 14/35] fix(cascader): fix filtered items background style (#1798) * feat(datepicker): add locale placeholder * fix(menu): raise popup__menu priority * fix(cascader): add bg color for selected item for filter --- style/web/components/cascader/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less index d2e0610a25..43a43fb793 100644 --- a/style/web/components/cascader/_index.less +++ b/style/web/components/cascader/_index.less @@ -196,6 +196,7 @@ &.@{prefix}-is-selected { color: @cascader-item-color-selected; + background: @cascader-item-background-color-expanded; & .@{prefix}-checkbox__label { color: @cascader-item-color-selected; From 93737c55cb6343222c202c05b4c9ef0dcc33c10a Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 22 May 2024 18:52:27 +0800 Subject: [PATCH 15/35] feat: add drawer calc move size function (#1800) * feat: add drawer calc move size function * fix: format --- js/drawer/utils.ts | 79 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 js/drawer/utils.ts diff --git a/js/drawer/utils.ts b/js/drawer/utils.ts new file mode 100644 index 0000000000..d352334546 --- /dev/null +++ b/js/drawer/utils.ts @@ -0,0 +1,79 @@ +type Placement = 'left' | 'right' | 'top' | 'bottom'; + +interface SizeDragLimit { + max: number; + min: number; +} + +export function getSizeDraggable( + sizeDraggable: boolean | SizeDragLimit, + limit: { max: number; min: number } +) { + if (typeof sizeDraggable === 'boolean') { + return { + allowSizeDraggable: sizeDraggable, + max: limit.max, + min: limit.min, + }; + } + + return { + allowSizeDraggable: true, + max: sizeDraggable.max, + min: sizeDraggable.min, + }; +} + +type IOptions = { + x: number; + y: number; + maxWidth: number; + maxHeight: number; + min: number; + max: number; +}; + +// > min && < max +function calcSizeRange(size: number, min: number, max: number) { + return Math.min(Math.max(size, min), max); +} + +export function calcMoveSize(placement: Placement, opts: IOptions) { + const { x, y, max, min, maxWidth, maxHeight } = opts; + let moveSize: number | undefined; + switch (placement) { + case 'right': + // |<--- x --->| | + // | maxWidth | + // | size | > min && < max + moveSize = calcSizeRange(maxWidth - x, min, max); + break; + case 'left': + // |<-- x -->| | + // x > min && < max + moveSize = calcSizeRange(x, min, max); + break; + case 'top': + // - - - - - - - - + // | y | + // | | + // - - - - - - - - + // > min && < max + // moveSize = Math.min(Math.max(y, min), max); + moveSize = calcSizeRange(y, min, max); + break; + case 'bottom': + // - - - - - - - - + // | y | + // | | maxHeight + // - - - - - - - - + // | size | + // > min && < max + moveSize = calcSizeRange(maxHeight - y, min, max); + break; + default: + // 参数缺失直接返回 + return moveSize; + } + return moveSize; +} From 59dac79a3c7014ea7e8fe880642068956f27c63c Mon Sep 17 00:00:00 2001 From: aaronmhl <130202696+aaronmhl@users.noreply.github.com> Date: Fri, 24 May 2024 15:18:30 +0800 Subject: [PATCH 16/35] =?UTF-8?q?feat(layout):=20=E6=B7=BB=E5=8A=A0mobile?= =?UTF-8?q?=20layout=E5=85=AC=E5=85=B1=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=96=87?= =?UTF-8?q?=E6=A1=A3=20(#1794)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(layout): 添加mobile layout公共样式和文档 * refactor(layout): 优化样式文件 * style(layout): 优化样式文件格式底部添加换行符 * refactor(layout): 优化row样式支持换行 --- docs/mobile/api_v2/col.en-US.md | 21 +++++++++++++++++++++ docs/mobile/api_v2/col.md | 21 +++++++++++++++++++++ style/mobile/components/col/v2/_index.less | 11 +++++++++++ style/mobile/components/col/v2/_mixin.less | 11 +++++++++++ style/mobile/components/row/v2/_index.less | 8 ++++++++ 5 files changed, 72 insertions(+) create mode 100644 docs/mobile/api_v2/col.en-US.md create mode 100644 docs/mobile/api_v2/col.md create mode 100644 style/mobile/components/col/v2/_index.less create mode 100644 style/mobile/components/col/v2/_mixin.less create mode 100644 style/mobile/components/row/v2/_index.less diff --git a/docs/mobile/api_v2/col.en-US.md b/docs/mobile/api_v2/col.en-US.md new file mode 100644 index 0000000000..4bdf5261ac --- /dev/null +++ b/docs/mobile/api_v2/col.en-US.md @@ -0,0 +1,21 @@ +--- +title: Layout Layout +description: Guide and regulate the layout and information distribution on the page with a regular grid array, improve the consistency of the layout within the interface, and save costs. +spline: base +isComponent: true +toc: false +--- + +## Introduction + +## Code Demonstration + +### Component Types + +Basic + +{{ base }} + +Increase Spacing + +{{ offset }} diff --git a/docs/mobile/api_v2/col.md b/docs/mobile/api_v2/col.md new file mode 100644 index 0000000000..e466f73a3f --- /dev/null +++ b/docs/mobile/api_v2/col.md @@ -0,0 +1,21 @@ +--- +title: Layout 布局 +description: 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。 +spline: base +isComponent: true +toc: false +--- + +## 引入 + +## 代码演示 + +### 组件类型 + +基础 + +{{ base }} + +增加间距 + +{{ offset }} diff --git a/style/mobile/components/col/v2/_index.less b/style/mobile/components/col/v2/_index.less new file mode 100644 index 0000000000..56e0ec29b4 --- /dev/null +++ b/style/mobile/components/col/v2/_index.less @@ -0,0 +1,11 @@ +@import "../../../base.less"; + +@import "./_mixin.less"; + +.@{prefix}-col { + display: block; + box-sizing: border-box; + min-height: 1px; +} + +.col-generate(24); diff --git a/style/mobile/components/col/v2/_mixin.less b/style/mobile/components/col/v2/_mixin.less new file mode 100644 index 0000000000..f35cbdb0f9 --- /dev/null +++ b/style/mobile/components/col/v2/_mixin.less @@ -0,0 +1,11 @@ +.col-generate(@n, @i: 1) when(@i <=@n) { + .@{prefix}-col--@{i} { + width: (@i * 100% / @n); + } + + .@{prefix}-col--offset-@{i} { + margin-left: (@i * 100% / @n); + } + + .col-generate(@n, (@i + 1)); +} diff --git a/style/mobile/components/row/v2/_index.less b/style/mobile/components/row/v2/_index.less new file mode 100644 index 0000000000..26f5459a07 --- /dev/null +++ b/style/mobile/components/row/v2/_index.less @@ -0,0 +1,8 @@ +@import "../../../base.less"; + +.@{prefix}-row { + display: flex; + flex-flow: row; + box-sizing: border-box; + flex-wrap: wrap; +} From a3e26cf8ce5053ac790b6dcdaee7190cc39a4281 Mon Sep 17 00:00:00 2001 From: Haixing <65376724+HaixingOoO@users.noreply.github.com> Date: Mon, 27 May 2024 11:12:32 +0800 Subject: [PATCH 17/35] fix(InputNumber): fix value is undefined bug (#1802) --- js/input-number/number.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 7b6bfb09f2..553d13a602 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -183,7 +183,7 @@ export function getMaxOrMinValidateResult(p: { min: NumberType; }): InputNumberErrorType { const { largeNumber, value, max, min } = p; - if (isUndefined(largeNumber)) return undefined; + if (isUndefined(value) || isUndefined(largeNumber)) return undefined; if (largeNumber && isNumber(value)) { log.warn('InputNumber', 'largeNumber value must be a string.'); } From 18edae6d71ac7e59e5ede5726c99ff6626bb3809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Wed, 5 Jun 2024 23:25:53 +0800 Subject: [PATCH 18/35] feat(tabs): supports scrolling operations via wheel or touchpad (#1803) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(tabs): supports scrolling operations via wheel or touchpad * feat(tabs): refine and optimize calculation logic 1.增加用于切换左右滚动的函数 2.优化左边临界计算 --- js/tabs/base.ts | 229 ++++++++-------------------- style/web/components/tabs/_var.less | 2 +- 2 files changed, 62 insertions(+), 169 deletions(-) diff --git a/js/tabs/base.ts b/js/tabs/base.ts index cd59c3947e..afc5b80479 100644 --- a/js/tabs/base.ts +++ b/js/tabs/base.ts @@ -1,6 +1,7 @@ const getDomWidth = (dom: HTMLElement): number => dom?.offsetWidth || 0; +const getDomOffsetLeft = (dom: HTMLElement): number => dom?.offsetLeft || 0; -type navPlacement = 'left' | 'right' | 'top' | 'bottom'; +type scrollPosition = 'auto' | 'start' | 'center' | 'end'; export interface allElementDeps { activeTab?: HTMLElement; @@ -12,174 +13,66 @@ export interface allElementDeps { toRightBtn?: HTMLElement; } -export default { - /** - * 计算滚动条的当前偏移值，用于 resize 时调整 - * @returns number - */ - calcScrollLeft(elements: allElementDeps, scrollLeft: number): number { - const container = elements.navsContainer; - const wrap = elements.navsWrap; - const { rightOperations } = elements; - const rightOperationsZoneWidth = getDomWidth(rightOperations); - - if (!wrap || !container) return scrollLeft; - - const containerWidth = getDomWidth(container); - const wrapWidth = getDomWidth(wrap); - - if (wrapWidth <= containerWidth) { - // 容器大于选项，则设置第一个 nav-item 和容器左边相连 - return 0; - } - - // 一般发生在 window.resize，容器变大，此时设置最后一个 nav-item 和容器右边相连 - if (scrollLeft + containerWidth - rightOperationsZoneWidth > wrapWidth) { - return wrapWidth + rightOperationsZoneWidth - containerWidth; - } - - return scrollLeft; - }, - - /** - * 计算往左滚动按钮是否应该出现 - * @param depElement 计算时依赖的元素 - * @param scrollLeft 当前的 scrollLeft - * @param placement navs 的位置 - * @returns boolean - */ - calculateCanToLeft(depElement: allElementDeps, scrollLeft: number, placement: navPlacement) { - if (['left', 'right'].includes(placement.toLowerCase())) { - return false; - } - const { navsContainer: container, navsWrap: wrap, leftOperations, toLeftBtn } = depElement; - if (!wrap || !container) { - return false; - } - const leftOperationsZoneWidth = getDomWidth(leftOperations); - const leftIconWidth = getDomWidth(toLeftBtn); - - return scrollLeft + Math.round(leftOperationsZoneWidth - leftIconWidth) > 0; - }, - - /** - * 计算往右滚动按钮是否应该出现 - * @param depElement 计算时依赖的元素 - * @param scrollLeft 当前的偏移值 - * @param placement navs 的位置 - * @returns boolean - */ - calculateCanToRight(depElement: allElementDeps, scrollLeft: number, placement: navPlacement) { - if (['left', 'right'].includes(placement.toLowerCase())) { - return false; - } - const { navsContainer: container, navsWrap: wrap, rightOperations, toRightBtn } = depElement; - if (!wrap || !container) { - return false; - } - const rightOperationsZoneWidth = getDomWidth(rightOperations); - const rightIconWidth = getDomWidth(toRightBtn); - return ( - scrollLeft + getDomWidth(container) - (rightOperationsZoneWidth - rightIconWidth) - - getDomWidth(wrap) < -1 - ); // 小数像素不精确，所以这里判断小于-1 - }, - - /** - * 计算将当前 tab 滚动到可视区域的偏移值 - * @param depElement 计算时依赖的元素 - * @param scrollLeft 当前的偏移值 - * @returns number - */ - moveActiveTabIntoView(depElement: allElementDeps, scrollLeft: number): number { - const { - activeTab, - navsContainer: container, - navsWrap, - leftOperations, - toLeftBtn, - rightOperations, - toRightBtn, - } = depElement; - if (!activeTab) return scrollLeft; - const totalWidthBeforeActiveTab = activeTab.offsetLeft; - if (!container) return scrollLeft; - // 如果要当前tab左边对齐左操作栏的右边以展示完整的tab，需要获取左边操作栏的宽度 - const _getLeftCoverWidth = () => { - const leftOperationsZoneWidth = getDomWidth(leftOperations); - const leftIconWidth = getDomWidth(toLeftBtn); - // 判断当前tab是不是第一个tab - if (totalWidthBeforeActiveTab === 0) { - // 如果是第一个tab要移动到最左边，则要减去左箭头的宽度，因为此时左箭头会被隐藏起来 - return leftOperationsZoneWidth - leftIconWidth; - } - return leftOperationsZoneWidth; - }; - const leftCoverWidth = _getLeftCoverWidth(); - // 判断当前tab是不是在左边被隐藏 - const isCurrentTabHiddenInLeftZone = scrollLeft + leftCoverWidth > totalWidthBeforeActiveTab; - if (isCurrentTabHiddenInLeftZone) { - return totalWidthBeforeActiveTab - leftCoverWidth; - } - - // move to right - const activeTabWidth = activeTab.offsetWidth; - if (!container || !navsWrap) return scrollLeft; - const containerWidth = getDomWidth(container); - // 如果要当前tab右边对齐右操作栏的左边以展示完整的tab，需要获取右边操作栏的宽度 - const _getRightCoverWidth = () => { - const rightOperationsZoneWidth = getDomWidth(rightOperations); - const rightIconWidth = getDomWidth(toRightBtn); - const wrapWidth = getDomWidth(navsWrap); - // 判断当前tab是不是最后一个tab，小于1是防止小数像素导致值不相等的情况 - if (Math.abs(totalWidthBeforeActiveTab + activeTabWidth - wrapWidth) < 1) { - // 如果是最后一个tab，则要减去右箭头的宽度，因为此时右箭头会被隐藏 - return rightOperationsZoneWidth - rightIconWidth; - } - return rightOperationsZoneWidth; - }; - const rightCoverWidth = _getRightCoverWidth(); - // 判断当前tab是不是在右边被隐藏 - const isHiddenInRightZone = scrollLeft + containerWidth - rightCoverWidth - < totalWidthBeforeActiveTab + activeTabWidth; - if (isHiddenInRightZone) { - return totalWidthBeforeActiveTab + activeTabWidth - containerWidth + rightCoverWidth; +export function calculateOffset(depElement: allElementDeps, offset: number, scrollPosition: scrollPosition): number { + // 计算当前 activeTab 应该滚动到的位置 + const { navsContainer, activeTab, rightOperations, leftOperations } = depElement; + const tabWidth = getDomWidth(activeTab); + const wrapWidth = getDomWidth(navsContainer); + const tabOffset = getDomOffsetLeft(activeTab); + const rightOperationsWidth = getDomWidth(rightOperations); + const leftOperationsWidth = getDomWidth(leftOperations); + + if (scrollPosition === 'auto') { + if (tabOffset - leftOperationsWidth < offset) { + return tabOffset - leftOperationsWidth; + } if (tabOffset + tabWidth > offset + wrapWidth - rightOperationsWidth) { + return tabOffset + tabWidth - wrapWidth + rightOperationsWidth; } - return scrollLeft; - }, - - /** - * 计算点击“往左按钮”时，需要的偏移值 - * @param depElement 计算时依赖的元素 - * @param scrollLeft 当前的偏移值 - * @returns number - */ - scrollToLeft(depElement: allElementDeps, scrollLeft: number): number { - const { navsContainer: container, leftOperations, toLeftBtn } = depElement; - if (!container) return 0; - const leftOperationsZoneWidth = getDomWidth(leftOperations); - const leftIconWidth = getDomWidth(toLeftBtn); - const containerWidth = getDomWidth(container); + } else if (scrollPosition === 'start') { + return tabOffset - leftOperationsWidth; + } else if (scrollPosition === 'center') { + return tabOffset + (tabWidth - wrapWidth) / 2; + } else if (scrollPosition === 'end') { + return tabOffset + tabWidth - wrapWidth + rightOperationsWidth; + } + return offset; +} - return Math.max(-(leftOperationsZoneWidth - leftIconWidth), scrollLeft - containerWidth); - }, +/** + * 计算上一页或下一页偏移量 + * @param elements 计算时依赖的元素 + * @returns number + */ +export function calcPrevOrNextOffset(elements: allElementDeps, offset: number, action: 'next' | 'prev'): number { + const { navsContainer, activeTab } = elements; + const navsContainerWidth = getDomWidth(navsContainer); + const activeTabWidth = getDomWidth(activeTab); + if (action === 'next') { + return offset + navsContainerWidth - activeTabWidth; + } + return offset - navsContainerWidth + activeTabWidth; +} - /** - * 计算点击“往右按钮”时，需要的偏移值 - * @param depElement 计算时依赖的元素 - * @param scrollLeft 当前的偏移值 - * @returns number - */ - scrollToRight(depElement: allElementDeps, scrollLeft: number): number { - const { navsContainer: container, navsWrap: wrap, rightOperations, toRightBtn } = depElement; - const rightOperationsZoneWidth = getDomWidth(rightOperations); - const rightIconWidth = getDomWidth(toRightBtn); - const containerWidth = getDomWidth(container); - const wrapWidth = getDomWidth(wrap); +/** + * 计算最大偏移量 + * @param elements 计算时依赖的元素 + * @returns number + */ +export function calcMaxOffset(elements: allElementDeps): number { + const { navsWrap, navsContainer, rightOperations, toRightBtn } = elements; + const wrapWidth = getDomWidth(navsWrap); + const containerWidth = getDomWidth(navsContainer); + const rightOperationsWidth = getDomWidth(rightOperations); + const toRightBtnWidth = getDomWidth(toRightBtn); + return wrapWidth - containerWidth + rightOperationsWidth - toRightBtnWidth; +} - return Math.min( - scrollLeft + containerWidth - rightOperationsZoneWidth - rightIconWidth, - wrapWidth - containerWidth + rightOperationsZoneWidth - rightIconWidth, - ); - }, -}; +/** + * 计算合法偏移量 + * @param offset 偏移值 + * @param maxOffset 最大偏移值 + * @returns number + */ +export function calcValidOffset(offset: number, maxOffset: number): number { + return Math.max(0, Math.min(offset, maxOffset)); +} diff --git a/style/web/components/tabs/_var.less b/style/web/components/tabs/_var.less index 58bd6f530c..b603979eca 100644 --- a/style/web/components/tabs/_var.less +++ b/style/web/components/tabs/_var.less @@ -73,7 +73,7 @@ @tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画 @tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画 @tab-nav-warp-is-smooth-transform: transform @anim-duration-moderate - @anim-time-fn-easing; // smooth 过渡动画 + @anim-time-fn-ease-out; // smooth 过渡动画 @tab-nav-item-transition: background-color @anim-time-fn-easing @anim-duration-base; @tab-btn-remove-btn-transition: all .3s cubic-bezier(.645, .045, .355, 1); // 删除按钮动画过渡 From 3b1a6b928872c6e2183e67ba1b1e97d816c72043 Mon Sep 17 00:00:00 2001 From: zhangpaopao Date: Fri, 7 Jun 2024 14:50:00 +0800 Subject: [PATCH 19/35] feat: descriptions support table-layout (#1809) * feat: descriptions support mode * feat: use table-layout --- docs/web/api/descriptions.en-US.md | 13 +++++++++++++ docs/web/api/descriptions.md | 13 +++++++++++++ style/web/components/descriptions/_index.less | 4 ++++ 3 files changed, 30 insertions(+) diff --git a/docs/web/api/descriptions.en-US.md b/docs/web/api/descriptions.en-US.md index 0a2bb055c2..6312fbbf02 100644 --- a/docs/web/api/descriptions.en-US.md +++ b/docs/web/api/descriptions.en-US.md @@ -26,6 +26,19 @@ spline: layout {{ column }} +### Table Layout + +Sets the algorithm used to layout `table` cells, rows, and columns, exactly the same as the native table-layout css property. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。`fixed` by default. + +- `fixed`: In the fixed table layout algorithm, the width of each column is determined as follows: + - A column element with explicit width sets the width for that column. + - Otherwise, a cell in the first row with explicit width determines the width for that column. + - Otherwise, the column gets the width from the shared remaining horizontal space. + +- `auto`: The automatic table layout algorithm is used. The widths of the table and its cells are adjusted to fit the content. + +{{ table-layout }} + ### Custom Style {{ custom-style }} diff --git a/docs/web/api/descriptions.md b/docs/web/api/descriptions.md index 2ff6fbc82a..a6c240f2fd 100644 --- a/docs/web/api/descriptions.md +++ b/docs/web/api/descriptions.md @@ -26,6 +26,19 @@ spline: layout {{ column }} +### Table Layout + +用于设置底层 `table` 单元格、行和列的布局算法，与原生 table-layout css 属性完全一致。详情可参考 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。默认为 `fixed`： + +- `fixed`: 使用固定表格布局算法。此模式下，每列的宽度按以下方式确定： + - 使用显示设定的列宽度 + - 否则，使用第一行中显示设定的的单元格宽度作为对应列的宽度 + - 否则，均分剩余宽度 + +- `auto`: 使用自动表格布局算法。表格及其单元格的宽度会根据内容进行调整。 + +{{ table-layout }} + ### 自定义样式 {{ custom-style }} diff --git a/style/web/components/descriptions/_index.less b/style/web/components/descriptions/_index.less index 5f5aa7ad9f..e511d2273d 100644 --- a/style/web/components/descriptions/_index.less +++ b/style/web/components/descriptions/_index.less @@ -31,6 +31,10 @@ color: @text-color-placeholder; } + &--fixed { + table-layout: fixed; + } + &--border { > tbody { > tr { From 51a7e6b75a1dfaf6338e2b8fbe57763a8a2f4999 Mon Sep 17 00:00:00 2001 From: aaronmhl <130202696+aaronmhl@users.noreply.github.com> Date: Fri, 7 Jun 2024 17:06:28 +0800 Subject: [PATCH 20/35] feat(image-viewer): add algnment doc (#1810) --- docs/mobile/api_v2/image-viewer.en-US.md | 4 ++++ docs/mobile/api_v2/image-viewer.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/mobile/api_v2/image-viewer.en-US.md b/docs/mobile/api_v2/image-viewer.en-US.md index d017b02eac..2f7ae5dd18 100644 --- a/docs/mobile/api_v2/image-viewer.en-US.md +++ b/docs/mobile/api_v2/image-viewer.en-US.md @@ -10,6 +10,10 @@ toc: false {{ base }} +### Basic and alignment ImageViewer + +{{ align }} + ### Operation ImageViewer {{ operation }} diff --git a/docs/mobile/api_v2/image-viewer.md b/docs/mobile/api_v2/image-viewer.md index dda0368371..bb87c6f9cb 100644 --- a/docs/mobile/api_v2/image-viewer.md +++ b/docs/mobile/api_v2/image-viewer.md @@ -10,6 +10,10 @@ toc: false {{ base }} +### 基础图片预览 + 对齐方式 + +{{ align }} + ### 带操作图片预览 {{ operation }} From 06aaeed80dfbd1d0da860ce3286f9bd240ae5e4a Mon Sep 17 00:00:00 2001 From: Dexter <52393227+dexterBo@users.noreply.github.com> Date: Tue, 11 Jun 2024 15:52:50 +0800 Subject: [PATCH 21/35] =?UTF-8?q?loading=20plugin=E6=A0=B7=E5=BC=8F=20(#18?= =?UTF-8?q?04)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * loading plugin样式 * 去除!important * 修复stylelint警告 * feat/mobile/loading --------- Co-authored-by: dexterdai --- style/mobile/components/loading/_index.less | 36 +++++++++++++++++++++ style/mobile/components/loading/_var.less | 2 ++ 2 files changed, 38 insertions(+) diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index c3f291fcec..4a8c60668d 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -111,6 +111,42 @@ animation: none; } } + + &__parent--relative { + position: relative; + } + + &--lock { + overflow: hidden; + } + + &--full { + z-index: @z-index-loading; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + align-items: center; + vertical-align: middle; + justify-content: center; + background-color: @loading-full-bg-color; + } + + &--fullscreen { + position: fixed; + display: flex; + align-items: center; + vertical-align: middle; + justify-content: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: @z-index-loading; + background-color: @loading-full-bg-color; + } } .generate-spinner(@n, @i: 1) when (@i =< @n) { diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index 5b46a18964..6c3bcc8a8f 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -7,3 +7,5 @@ @loading-text-line-height: var(--td-loading-text-line-height, 20px); @loading-dot-size: var(--td-loading-dot-size, 8px); @loading-line-bg-color: var(--td-loading-line-bg-color, @text-color-primary); +@loading-z-index: var(--td-loading-z-index, 3500); +@loading-full-bg-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 60%)); From d7e26442599aacbcc0118314ccebcd85726ddf7a Mon Sep 17 00:00:00 2001 From: Dexter <52393227+dexterBo@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:38:56 +0800 Subject: [PATCH 22/35] =?UTF-8?q?mobile=20vue=20loading=20=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E5=90=8D=E7=A7=B0=E8=B0=83=E6=95=B4=20(#1813)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: dexterdai --- style/mobile/components/loading/_index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index 4a8c60668d..07683b9b2f 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -121,7 +121,7 @@ } &--full { - z-index: @z-index-loading; + z-index: @loading-z-index; position: absolute; top: 0; left: 0; @@ -144,7 +144,7 @@ left: 0; width: 100%; height: 100%; - z-index: @z-index-loading; + z-index: @loading-z-index; background-color: @loading-full-bg-color; } } From b09ab736990e8a29c26472a20039fc06fb23c1d9 Mon Sep 17 00:00:00 2001 From: Dexter <52393227+dexterBo@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:58:20 +0800 Subject: [PATCH 23/35] Feature/mobile/loading (#1814) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * mobile vue loading 变量名称调整 * mobile vue loading 增加fullscreen、attach、service示例 --------- Co-authored-by: dexterdai --- docs/mobile/api_v2/loading.en-US.md | 12 ++++++++++++ docs/mobile/api_v2/loading.md | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/docs/mobile/api_v2/loading.en-US.md b/docs/mobile/api_v2/loading.en-US.md index 92720dbfae..30675444bc 100644 --- a/docs/mobile/api_v2/loading.en-US.md +++ b/docs/mobile/api_v2/loading.en-US.md @@ -31,3 +31,15 @@ toc: false ### Loading Speed {{ speed }} + +### Full-screen Loading + +{{ fullscreen }} + +### Attached to a Specific Element + +{{ attach }} + +### Function Call + +{{ service }} \ No newline at end of file diff --git a/docs/mobile/api_v2/loading.md b/docs/mobile/api_v2/loading.md index 2135cb1ba8..99ddcc4ccb 100644 --- a/docs/mobile/api_v2/loading.md +++ b/docs/mobile/api_v2/loading.md @@ -31,3 +31,15 @@ toc: false ### 加载速度 {{ speed }} + +### 全屏加载 + +{{ fullscreen }} + +### 挂载到指定元素 + +{{ attach }} + +### 函数方式调用 + +{{ service }} \ No newline at end of file From cf4211837da86e5aa327309b2318d19412aefc5e Mon Sep 17 00:00:00 2001 From: Y Date: Wed, 19 Jun 2024 15:29:25 +0800 Subject: [PATCH 24/35] feat(TreeSelect): add disabled style (#1815) Co-authored-by: anlyyao --- style/mobile/components/side-bar/v2/_index.less | 4 ++-- style/mobile/components/side-bar/v2/_var.less | 11 +++++++++-- style/mobile/components/tree-select/_index.less | 6 ++++++ style/mobile/components/tree-select/_var.less | 4 ++++ 4 files changed, 21 insertions(+), 4 deletions(-) diff --git a/style/mobile/components/side-bar/v2/_index.less b/style/mobile/components/side-bar/v2/_index.less index bae5f07c79..0089d3df09 100644 --- a/style/mobile/components/side-bar/v2/_index.less +++ b/style/mobile/components/side-bar/v2/_index.less @@ -13,9 +13,9 @@ &-item { display: flex; align-items: center; - justify-content: center; + justify-content: start; position: relative; - padding: 16px; + padding: @side-bar-item-padding; font-size: @side-bar-font-size; color: @side-bar-color; background: @side-bar-bg-color; diff --git a/style/mobile/components/side-bar/v2/_var.less b/style/mobile/components/side-bar/v2/_var.less index 05ddd0df87..199f714a4d 100644 --- a/style/mobile/components/side-bar/v2/_var.less +++ b/style/mobile/components/side-bar/v2/_var.less @@ -5,10 +5,17 @@ @side-bar-color: var(--td-side-bar-color, @text-color-primary); @side-bar-font-size: var(--td-side-bar-font-size, 16px); @side-bar-item-height: var(--td-side-bar-item-height, 56px); +@side-bar-item-padding: var(--td-side-bar-item-padding, @spacer-2); @side-bar-item-line-height: var(--td-side-bar-item-line-height, 24px); @side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer); -@side-bar-disabled-color: var(--td-side-bar-disabled-color, @text-color-disabled); +@side-bar-disabled-color: var( + --td-side-bar-disabled-color, + @text-color-disabled +); @side-bar-active-color: var(--td-side-bar-active-color, @brand-color); @side-bar-border-radius: var(--td-side-bar-border-radius, 9px); @side-bar-icon-size: var(--td-side-bar-icon-size, 20px); -@side-bar-prefix-bg-color: var(--td-side-bar-prefix-bg-color, @bg-color-container); +@side-bar-prefix-bg-color: var( + --td-side-bar-prefix-bg-color, + @bg-color-container +); diff --git a/style/mobile/components/tree-select/_index.less b/style/mobile/components/tree-select/_index.less index aa2cd1b9ce..ed24c9ea76 100644 --- a/style/mobile/components/tree-select/_index.less +++ b/style/mobile/components/tree-select/_index.less @@ -36,6 +36,12 @@ font-weight: 600; color: @tree-item-active-color; } + + &--disabled { + pointer-events: none; + cursor: not-allowed; + color: @tree-item-disabled-color; + } } &-column { diff --git a/style/mobile/components/tree-select/_var.less b/style/mobile/components/tree-select/_var.less index a9ca4c3481..693086efd0 100644 --- a/style/mobile/components/tree-select/_var.less +++ b/style/mobile/components/tree-select/_var.less @@ -1,6 +1,10 @@ @tree-bg-color: var(--td-tree-bg-color, @bg-color-container); @tree-root-bg-color: var(--td-tree-root-bg-color, @bg-color-secondarycontainer); @tree-item-active-color: var(--td-tree-item-active-color, @brand-color); +@tree-item-disabled-color: var( + --td-tree-item-disabled-color, + @text-color-disabled +); @tree-item-height: var(--td-tree-item-height, 56px); @tree-item-font-size: var(--td-tree-item-font-size, 16px); @tree-colum-width: var(--td-tree-colum-width, 103px); From f53e0079a26caf6be32d97c17176c1f3b7fbce8e Mon Sep 17 00:00:00 2001 From: Y Date: Wed, 19 Jun 2024 16:47:07 +0800 Subject: [PATCH 25/35] docs(Layout): update (#1816) Co-authored-by: anlyyao --- docs/mobile/api_v2/col.en-US.md | 8 ++------ docs/mobile/api_v2/col.md | 8 ++------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/docs/mobile/api_v2/col.en-US.md b/docs/mobile/api_v2/col.en-US.md index 4bdf5261ac..cb43dd0c1f 100644 --- a/docs/mobile/api_v2/col.en-US.md +++ b/docs/mobile/api_v2/col.en-US.md @@ -6,16 +6,12 @@ isComponent: true toc: false --- -## Introduction - -## Code Demonstration - ### Component Types -Basic +#### Basic {{ base }} -Increase Spacing +#### Increase Spacing {{ offset }} diff --git a/docs/mobile/api_v2/col.md b/docs/mobile/api_v2/col.md index e466f73a3f..d0c03561c1 100644 --- a/docs/mobile/api_v2/col.md +++ b/docs/mobile/api_v2/col.md @@ -6,16 +6,12 @@ isComponent: true toc: false --- -## 引入 - -## 代码演示 - ### 组件类型 -基础 +#### 基础 {{ base }} -增加间距 +#### 增加间距 {{ offset }} From 13dbba032124b2dd6194f0b6433d75b21027366c Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Thu, 20 Jun 2024 15:59:05 +0800 Subject: [PATCH 26/35] feat(image-viewer): svg example (#1817) * feat(image-viewer): svg example * chore: description update --- docs/web/api/image-viewer.en-US.md | 6 ++++++ docs/web/api/image-viewer.md | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/docs/web/api/image-viewer.en-US.md b/docs/web/api/image-viewer.en-US.md index e1f0400e02..733b69893a 100644 --- a/docs/web/api/image-viewer.en-US.md +++ b/docs/web/api/image-viewer.en-US.md @@ -55,3 +55,9 @@ A placeholder image is used to show images that fail to load, and a description Click on a related button in the operation bar to view the image. {{ albumIcons }} + +### Support native SVG + +Insert SVG into Shadow DOM to avoid interference from external styles, enabling support for interactions such as links within the SVG + +{{ svg }} diff --git a/docs/web/api/image-viewer.md b/docs/web/api/image-viewer.md index 471b78cfee..e9c9f61172 100644 --- a/docs/web/api/image-viewer.md +++ b/docs/web/api/image-viewer.md @@ -58,3 +58,9 @@ spline: base 通过操作栏相关按钮，点击查看图片。 {{ albumIcons }} + +### 支持SVG原生查看 + +开启 `isSvg` 配置，可将SVG插入Shadow不受外部样式干扰，可以支持到SVG内的链接等交互，有些SVG图片背景会是完全透明，使用时再展示的盒子处理即可 + +{{ svg }} \ No newline at end of file From 04cd5155dca3e44d264d82fe3d0a632a8dc2a019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Thu, 27 Jun 2024 12:24:01 +0800 Subject: [PATCH 27/35] feat: add plugin entrance file (#1819) --- style/web/_plugin.less | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 style/web/_plugin.less diff --git a/style/web/_plugin.less b/style/web/_plugin.less new file mode 100644 index 0000000000..fe0a5704e7 --- /dev/null +++ b/style/web/_plugin.less @@ -0,0 +1,7 @@ +@import "./components/dialog/_index.less"; + +@import "./components/loading/_index.less"; + +@import "./components/message/_index.less"; + +@import "./components/notification/_index.less"; From b45041cb192f970c34cecf276b8be3c31aba303f Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Fri, 5 Jul 2024 10:18:52 +0800 Subject: [PATCH 28/35] fix(mobile): style prefix (#1829) --- style/mobile/components/badge/v2/_index.less | 2 +- style/mobile/components/cascader/_index.less | 2 +- style/mobile/components/image-viewer/_index.less | 6 +++--- style/mobile/components/pull-down-refresh/_index.less | 2 +- style/mobile/components/pull-down-refresh/v2/_index.less | 2 +- style/mobile/components/table/_index.less | 6 +++--- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less index 20c2b6ac78..c7b7f08898 100644 --- a/style/mobile/components/badge/v2/_index.less +++ b/style/mobile/components/badge/v2/_index.less @@ -89,7 +89,7 @@ border-radius: calc(@badge-large-height / 2); } - &__content:not(:empty) + .t-has-count { + &__content:not(:empty) + .@{prefix}-has-count { transform: translate(50%, -50%); position: absolute; right: 0; diff --git a/style/mobile/components/cascader/_index.less b/style/mobile/components/cascader/_index.less index 652fa53193..0b91c56875 100644 --- a/style/mobile/components/cascader/_index.less +++ b/style/mobile/components/cascader/_index.less @@ -68,7 +68,7 @@ border: 1px solid @cascader-step-dot-color; box-sizing: border-box; - &:not(.t-cascader__step-dot--last)::after { + &:not(.@{prefix}-cascader__step-dot--last)::after { content: ""; display: block; position: absolute; diff --git a/style/mobile/components/image-viewer/_index.less b/style/mobile/components/image-viewer/_index.less index ae74de68bf..abca5afbc4 100644 --- a/style/mobile/components/image-viewer/_index.less +++ b/style/mobile/components/image-viewer/_index.less @@ -32,19 +32,19 @@ width: 100%; } - .t-swiper { + .@{prefix}-swiper { width: 100%; height: 100%; position: relative; } - .t-swiper-item { + .@{prefix}-swiper-item { position: relative; width: 100%; flex-shrink: 0; } - .t-swiper__pagination { + .@{prefix}-swiper__pagination { bottom: @image-viewer-pagination-bottom; } } diff --git a/style/mobile/components/pull-down-refresh/_index.less b/style/mobile/components/pull-down-refresh/_index.less index d17b66b506..d9ac5fdb9b 100644 --- a/style/mobile/components/pull-down-refresh/_index.less +++ b/style/mobile/components/pull-down-refresh/_index.less @@ -33,7 +33,7 @@ } &__loading-icon { - .t-loading__text { + .@{prefix}-loading__text { font-size: @font-size-base; color: @pull-down-refresh-text-color; } diff --git a/style/mobile/components/pull-down-refresh/v2/_index.less b/style/mobile/components/pull-down-refresh/v2/_index.less index 8a05c7050d..7e20ae3e2a 100644 --- a/style/mobile/components/pull-down-refresh/v2/_index.less +++ b/style/mobile/components/pull-down-refresh/v2/_index.less @@ -36,7 +36,7 @@ align-items: center; justify-content: center; - .t-loading__text { + .@{prefix}-loading__text { font-size: @font-size-base; color: @pull-down-refresh-text-color; } diff --git a/style/mobile/components/table/_index.less b/style/mobile/components/table/_index.less index 53dae0d764..2ae821fb3f 100644 --- a/style/mobile/components/table/_index.less +++ b/style/mobile/components/table/_index.less @@ -617,7 +617,7 @@ border-top: @border; padding: @comp-paddingTB-l @comp-paddingLR-l; - .t-button + .t-button { + .@{prefix}-button + .@{prefix}-button { margin-left: @comp-margin-l; } } @@ -722,7 +722,7 @@ } .@{prefix}-table__th-row-select { - .t-table__th-cell-inner { + .@{prefix}-table__th-cell-inner { display: inline-flex; align-items: center; } @@ -1135,7 +1135,7 @@ } } -.t-table .@{prefix}-table__sort-column { +.@{prefix}-table .@{prefix}-table__sort-column { background-color: @table-sort-bg-color; } From e54ac1f56d25d987042b6b84538e9497ad05c274 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Fri, 5 Jul 2024 17:24:51 +0800 Subject: [PATCH 29/35] fix: unexpected whitespace (#1828) --- style/web/components/menu/_index.less | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 1112918e57..972c848e48 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -593,9 +593,7 @@ a.@{prefix}-menu__item { color: @menu-item-active-color--light; } - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not( - .@{prefix}-is-disabled - ) { + &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { background-color: @menu-item-hover-bg--light; } @@ -643,9 +641,7 @@ a.@{prefix}-menu__item { color: @menu-item-disabled-color-dark; } - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not( - .@{prefix}-is-disabled - ) { + &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { background-color: @menu-item-hover-bg--dark; } From 246fe1ec5c18a176abfd6b179b8fe0c42cfa51a3 Mon Sep 17 00:00:00 2001 From: Mike <1576271227@qq.com> Date: Fri, 5 Jul 2024 17:42:38 +0800 Subject: [PATCH 30/35] =?UTF-8?q?feat(collapse):=20collapse-pannel?= =?UTF-8?q?=E4=B8=8A=E7=9A=84border-less=E6=A0=B7=E5=BC=8F=E7=94=9F?= =?UTF-8?q?=E6=95=88=20(#1826)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(collapse): collapse-pannel上的border-less样式生效 * refactor: use borderless --- style/web/components/collapse/_index.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/style/web/components/collapse/_index.less b/style/web/components/collapse/_index.less index d5c5901298..566f4cf7cf 100644 --- a/style/web/components/collapse/_index.less +++ b/style/web/components/collapse/_index.less @@ -65,6 +65,17 @@ &__wrapper { overflow: hidden; + &.@{prefix}--borderless { + .@{collapse-panel-cls}__header { + border-bottom: none; + } + + .@{collapse-panel-cls}__body { + background: @bg-color-container; + border: none; + } + } + .@{collapse-panel-cls}__header { padding: @collapse-panel-header-padding; border-bottom: @collapse-border-size; From 26299fef514131890f78fbb48b531fdafb66c5b8 Mon Sep 17 00:00:00 2001 From: Mike <1576271227@qq.com> Date: Fri, 5 Jul 2024 17:51:22 +0800 Subject: [PATCH 31/35] =?UTF-8?q?feat(slider):=20web=20components=20?= =?UTF-8?q?=E4=B8=8B=20vertical=20=E6=A0=B7=E5=BC=8F=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E7=94=9F=E6=95=88=20(#1827)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/slider/_index.less | 31 +++++++++++++------------ 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/style/web/components/slider/_index.less b/style/web/components/slider/_index.less index b476d4cdb5..f256ba57d1 100644 --- a/style/web/components/slider/_index.less +++ b/style/web/components/slider/_index.less @@ -191,22 +191,23 @@ margin-top: @slider-vertical-text-margin-top; margin-left: @slider-vertical-text-margin-left; } +} - .@{prefix}-slider__button-wrapper { - top: auto; - position: absolute; - z-index: 2; - left: 50%; - transform: translate(-50%, 50%); - background-color: transparent; - text-align: center; - user-select: none; - line-height: normal; - outline: none; - cursor: pointer; - display: flex; - align-items: center; - } +.@{prefix}-slider--vertical .@{prefix}-slider__button-wrapper, +.@{prefix}-slider__button-wrapper--vertical { + top: auto; + position: absolute; + z-index: 2; + left: 50%; + transform: translate(-50%, 50%); + background-color: transparent; + text-align: center; + user-select: none; + line-height: normal; + outline: none; + cursor: pointer; + display: flex; + align-items: center; } .@{prefix}-is-disabled { From cb58a30afdf34c74c74b4780be076a73c6b47e85 Mon Sep 17 00:00:00 2001 From: Aaron <130202696+aaronmhl@users.noreply.github.com> Date: Mon, 8 Jul 2024 18:15:29 +0800 Subject: [PATCH 32/35] refactor(avatar): support web component avatar style. (#1830) --- style/web/components/avatar/_index.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/style/web/components/avatar/_index.less b/style/web/components/avatar/_index.less index 4176995f5c..3884751ff9 100644 --- a/style/web/components/avatar/_index.less +++ b/style/web/components/avatar/_index.less @@ -54,7 +54,8 @@ &.@{prefix}-avatar--offset-right { - & .@{prefix}-avatar { + & .@{prefix}-avatar, + & @{prefix}-avatar-light-dom { &:not(:last-child) { .avatar-group-offset-right(@avatar-group-offset-medium); @@ -72,7 +73,8 @@ &.@{prefix}-avatar--offset-left { .generate-z-index(@avatar-group-init-zIndex); - & .@{prefix}-avatar { + & .@{prefix}-avatar, + & @{prefix}-avatar-light-dom { &:not(:first-child) { .avatar-group-size--left(); } From 4b509a7f31836de37fa1abeb87e8bc5cedb54640 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Thu, 11 Jul 2024 15:24:30 +0800 Subject: [PATCH 33/35] fix(Input): fix text ellipsis when disabled (#1831) * fix(Input): fix text ellipsis when disabled * chore: fix lint * chore: fix lint * chore: fix lint --- style/web/components/input/_mixin.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less index c23be4a635..29029d786f 100644 --- a/style/web/components/input/_mixin.less +++ b/style/web/components/input/_mixin.less @@ -49,6 +49,7 @@ .@{prefix}-input__inner { cursor: not-allowed; color: @input-text-color-disabled; + text-overflow: initial; &::placeholder { color: @input-text-color-disabled; From 19099ac97d350f5e37f9036d9c8bb4ad41f3057f Mon Sep 17 00:00:00 2001 From: Y Date: Thu, 11 Jul 2024 18:14:27 +0800 Subject: [PATCH 34/35] fix(ImageViewer): keep the icon always occupied (#1832) Co-authored-by: anlyyao --- style/mobile/components/image-viewer/v2/_index.less | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/style/mobile/components/image-viewer/v2/_index.less b/style/mobile/components/image-viewer/v2/_index.less index d6b1baee32..e4679c8250 100644 --- a/style/mobile/components/image-viewer/v2/_index.less +++ b/style/mobile/components/image-viewer/v2/_index.less @@ -53,21 +53,15 @@ &-close { margin-left: @image-viewer-close-margin-left; // 关闭操作按钮左部间距 - - &:empty { - display: none; - } } &-delete { margin-right: @image-viewer-delete-margin-right; // 删除操作按钮右部间距 - &:empty { - display: none; - } } &-close, &-delete { + width: @image-viewer-icon-font-size; font-size: @image-viewer-icon-font-size; } From a49c6c9a1c980be2ca3c83976e8fd537b5b59f87 Mon Sep 17 00:00:00 2001 From: Miya <1054055589@qq.com> Date: Fri, 12 Jul 2024 21:18:11 +0800 Subject: [PATCH 35/35] feat(chat): add chat component (#1801) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 新增chat样式 * feat(chat): 更新chat样式 * feat: chat组件样式调整 * feat(chat): 增加清空历史和模型切换功能 * feat: chat对话框增加边框背景色等样式配置 * feat: 问答loading加载时骨架屏添加 * feat(chat): 优化示例 * feat(chat): 补充示例文档 * feat(chat): 修复暗黑模式样式适配 * feat(chat): 模型切换css替换 * feat(chat): 完善文档 * feat(chat): 完善文档 * feat(chat): css格式lint * feat(chat): 第三方库样式lint禁用 * chore: fix lint * feat(chat): 样式优化 * feat(chat): 删除无用css * feat(chat): markdown样式增加prefix * feat(chat): 避免重复引入同样的css * feat: 代码块部分样式调整 * feat(chat): 完善文档 * feat(chat): 走查样式修改 * feat: 组件样式调整 * feat: 组件样式调整 * feat(chat): 走查样式修改 * feat: 组件样式调整 * feat: 页面样式调整 * feat(chat): 文档优化 * feat(chat): 走查问题修改 * feat: 头像尺寸修改 * feat(chat): 修复头像尺寸问题 * feat(chat): 操作按钮封装为组件 * feat(chat): 操作按钮封装为组件 * feat: 操作按钮框及代码块样式调整 * feat(chat): 完善文档 * feat(chat): 完善文档 * feat(chat): 修改走查问题 * feat(chat): 文档优化 * fix(chat): 错误提示样式显示异常 * feat(chat): footer的margin-top覆盖 * feat(chat): 样式优化 * feat: chatitem最大宽度调整 * feat: chatitem最大宽度调整 * fix: 组件走查样式调整 * fix: 组件走查样式调整 * chore: replace variables * feat(chat): 走查问题修复 * chore: fix lint * feat(chat): variant不生效修复 * feat: 删除指南 * feat: 完善文档 * fix: 对话框宽度调整 * fix(chat): 修复模型切换提示 * feat(chat): 完善文档 * fix: 输入问题过长不会换行问题修复 * feat: 文档优化 * chore: update spline * chore: update spline * chore: update spline * chore: update spline * chore: update spline * chore: update spline * feat: 优化文档 --------- Co-authored-by: yeonzhou Co-authored-by: jiedding Co-authored-by: dingJieWork <1013331689@qq.com> Co-authored-by: wū yāng --- .../_design/\350\201\212\345\244\251 Chat.md" | 68 +++ docs/web/api/chat-action.md | 15 + docs/web/api/chat-ai.md | 60 +++ docs/web/api/chat-content.md | 21 + docs/web/api/chat-input.md | 19 + docs/web/api/chat-item.md | 38 ++ docs/web/api/chat.md | 36 ++ style/web/components/chat/_doc.less | 10 + style/web/components/chat/_index.less | 386 ++++++++++++++++++ style/web/components/chat/_mixin.less | 0 style/web/components/chat/_var.less | 57 +++ style/web/components/chat/atom-one-dark.less | 108 +++++ 12 files changed, 818 insertions(+) create mode 100644 "docs/web/_design/\350\201\212\345\244\251 Chat.md" create mode 100644 docs/web/api/chat-action.md create mode 100644 docs/web/api/chat-ai.md create mode 100644 docs/web/api/chat-content.md create mode 100644 docs/web/api/chat-input.md create mode 100644 docs/web/api/chat-item.md create mode 100644 docs/web/api/chat.md create mode 100644 style/web/components/chat/_doc.less create mode 100644 style/web/components/chat/_index.less create mode 100644 style/web/components/chat/_mixin.less create mode 100644 style/web/components/chat/_var.less create mode 100644 style/web/components/chat/atom-one-dark.less diff --git "a/docs/web/_design/\350\201\212\345\244\251 Chat.md" "b/docs/web/_design/\350\201\212\345\244\251 Chat.md" new file mode 100644 index 0000000000..0a7936a8de --- /dev/null +++ "b/docs/web/_design/\350\201\212\345\244\251 Chat.md" @@ -0,0 +1,68 @@ +### 何时使用 + +当页面需要提供聊天对话，客服对话，智能机器人，大模型聊天。 + +### 与布局相关 + +#### 布局一般位于所讨论内容的下方，可根据需要选择通栏、非通栏不同布局。 + +
+
+ + 图示：评论通栏布局 +
+
+ + 图示：评论非通栏布局 +
+ +
+ +
+ +### 与组件搭配使用 + +##### 与dialog搭配使用。这种组合通常用于创建可拖拽的智能的、由AI驱动的虚拟助手或聊天机器人。 + +
+
+ + +
+ +
+ +
+ +##### 与 drawer组合使用。这种组合通常用于创建在悬窗展示智能的、由AI驱动的虚拟助手或聊天机器人。 + +
+
+ + 图示：基础评论与加载搭配 +
+
+ + 图示：带回复的评论与加载搭配 +
+ +
+ +
+ +##### 与加载 Loading 组合使用，当流式数据请求加载时，按一定数量逐步加载显示，提高用户阅读信息的效率和准确性。 + +
+
+ + 图示：基础评论与加载搭配 +
+
+ + 图示：带回复的评论与加载搭配 +
+ +
+ +
+ diff --git a/docs/web/api/chat-action.md b/docs/web/api/chat-action.md new file mode 100644 index 0000000000..e5aa7685ad --- /dev/null +++ b/docs/web/api/chat-action.md @@ -0,0 +1,15 @@ +--- +title: ChatAction +description: ChatAction 是一个vue组件，它包含重新生成，点赞，点踩，复制按钮。它内置Clipboard可以复制聊天内容，提供按钮的交互样式，监听operation事件由业务层实现具体逻辑 +isComponent: true +usage: { title: '', description: '' } +spline: ai +--- + +### 聊天操作按钮 +可以通过`operationBtn`配置操作按钮选项和顺序 +{{ chat-action }} + + + + diff --git a/docs/web/api/chat-ai.md b/docs/web/api/chat-ai.md new file mode 100644 index 0000000000..6e9a6cfa1d --- /dev/null +++ b/docs/web/api/chat-ai.md @@ -0,0 +1,60 @@ +--- +title: ChatAI +description: 用于AI大模型聊天。 +isComponent: true +usage: { title: '', description: '' } +spline: ai +--- + +### hunyuan大模型&快速接入 +下面是一个开箱即用的hunyuan大模型流式调用示例,默认支持`单轮对话` + +### hunyuan Key 申请 +首先你要去申请key，[开通并获取 API-Key](https://hunyuanaide.taiji.woa.com/web/home_api?wsId=10144) + +### hunyuan大模型最佳实践 + +前端传入apiKey参数，直接调用hunyuan的api流式接口服务。该用法仅用于快速体验组件效果，在前端明文传递密钥并不是一种推荐的做法，主要存在安全风险问题。 +为了避免安全风险，推荐由业务侧传入代理的大模型接口服务请求，前端按照指定的出参格式返回数据，使用`chatRequest`传入流式接口请求，组件内部会根据hunyuan流式接口数据结构去解析 +{{ chat-ai }} +### 入参设计 + +这是hunyuan的大模型入参，可以看到参数非常多，组件内不关注hunyuan大模型接口的参数，由业务侧自定义模型配置选项，第一个参数 messages，当前对话的上下文，里面 role 和 content 是最关键的 +```js +/** + * ChatRequest是一个函数类型，表示对聊天API的请求。 + * 它接受ChatRequestParams对象并返回一个Promise，该Promise在解析时返回一个Response对象。 + */ +export type ChatRequest = (params: ChatRequestParams ) => Promise; +export interface ChatRequestParams { + messages: message[]; // 消息列表 + signal?: AbortSignal; // 中止请求 +} +/** + * 表示聊天消息对象的角色和提问内容。 + */ +export interface message { + role: string; + content: string; +} + +``` + +### hunyuan大模型配置参数如下： + +```json +{ + "Model": "hunyuan", + "Messages": [ + { + "role": "user", + "content": "hi " + } + ], + "Stream": true, + "StreamModeration": null, + "TopP": null, + "Temperature": null, + "EnableEnhancement": null +} +``` diff --git a/docs/web/api/chat-content.md b/docs/web/api/chat-content.md new file mode 100644 index 0000000000..a5484b8bed --- /dev/null +++ b/docs/web/api/chat-content.md @@ -0,0 +1,21 @@ +--- +title: ChatContent +description: 支持markdown渲染。 +isComponent: true +usage: { title: '', description: '' } +spline: ai +--- + +### 默认聊天格式 + +对大模型返回的markdown数据自动渲染。 + +{{ markdown }} + +### 纯文本聊天 + +用户发送的消息保持默认格式显示，没有高亮效果 + +{{ text-message }} + + diff --git a/docs/web/api/chat-input.md b/docs/web/api/chat-input.md new file mode 100644 index 0000000000..674842093e --- /dev/null +++ b/docs/web/api/chat-input.md @@ -0,0 +1,19 @@ +--- +title: ChatInput +description: 用于AI聊天输入。 +isComponent: true +usage: { title: '', description: '' } +spline: ai +--- + +### 基础输入框 + +{{ chat-input }} + +### 输入框自定义 + +通过`suffixIcon` 可以调整输入框发送按钮。 + +{{ chat-input-slot }} + + diff --git a/docs/web/api/chat-item.md b/docs/web/api/chat-item.md new file mode 100644 index 0000000000..b1015ef556 --- /dev/null +++ b/docs/web/api/chat-item.md @@ -0,0 +1,38 @@ +--- +title: ChatItem +description: ChatItem 是一个vue组件，它在聊天对话中显示单个item。它可以展示用户的头像、昵称、时间、聊天内容。AI聊天场景下提供模型切换提示，如果消息仍在发送过程中，它还可以显示一个loading效果。 +isComponent: true +usage: { title: '', description: '' } +spline: ai +--- + +### 聊天气泡框 + +聊天气泡框样式，基础、线框、文字，默认为文字 + +{{ bubble }} + +### 模型切换 +- `role`角色：用户、助手、错误、模型切换，可选项：`user/assistant/error/model-change/system` + +{{ change-model-message }} + +### 错误提示 + +{{ error-message }} + +### 可配置头像，昵称，时间 + +{{ chat-avatar-name }} + +### 自定义头像，昵称，时间，内容，操作按钮样式 + +- 通过`avatar`可以调整头像，通过`name`可以调整昵称，通过`datetime`可以调整日期时间， 通过`content`可以调整内容(注意`markdown`数据必须通过`t-chat-content`传入`content`属性)， 通过`actions`可以调整操作按钮内容。 + +- 当role为`assistant`时一般是不显示操作按钮的，所以很多场景下，针对AI助手回复的自定义内容，`t-chat-item`组件可以根据角色role去区分 + + +{{ chat-item-slot }} + + + diff --git a/docs/web/api/chat.md b/docs/web/api/chat.md new file mode 100644 index 0000000000..06c138413d --- /dev/null +++ b/docs/web/api/chat.md @@ -0,0 +1,36 @@ +--- +title: Chat +description: 用于AI聊天或者普通聊天。 +isComponent: true +usage: { title: '', description: '' } +spline: ai +--- + +### 基础问答 + +- chat最基本的组件，包括头像、作者、时间、聊天内容，输入框，适用于各种需要进行聊天的场景。 +属性`reverse`置为true倒序渲染，布局采用flex翻转布局`flex-direction: column-reverse;`，实现新消息自动滚动到底部，所以新消息数据要存在消息列表的头部，即数组的第一个元素，可以使用数组的unshift() 方法向数组的开头添加一个或更多新数据 +- 如果不想用倒序渲染，请将`reverse`置为false，可以使用数组的push() 方法向数组的尾部添加一个或更多新数据，通过ref调用chat组件的实例方法`scrollToBottom`实现滚动到底部 + + +{{ base }} + +### 自定义底部 +通过`footer` 可以调整chat的底部内容。 + +{{ chat-loading }} + +### 流式与非流式 + +{{ sse }} + +### AI助手可拖拽 +搭配`Dialog`非模态类对话框对话框组件 + +{{ chat-drag }} + +### AI助手悬窗 +搭配`Drawer` 抽屉组件 + +{{ chat-drawer }} + diff --git a/style/web/components/chat/_doc.less b/style/web/components/chat/_doc.less new file mode 100644 index 0000000000..872a8e4635 --- /dev/null +++ b/style/web/components/chat/_doc.less @@ -0,0 +1,10 @@ +// TDesign 站点中有代码code元素的相关样式 为正常展示需要覆盖为typography样式 +div[name="DEMO"] .t-chat__text pre { + background: transparent; + border: none; + padding: 0; +} + +div[name="DEMO"] .chat-action-content { + display: flex; +} diff --git a/style/web/components/chat/_index.less b/style/web/components/chat/_index.less new file mode 100644 index 0000000000..1d73e7fb08 --- /dev/null +++ b/style/web/components/chat/_index.less @@ -0,0 +1,386 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +@import "./_mixin.less"; + +@import "./_doc.less"; + +@import "../../mixins/_reset.less"; + +.@{prefix}-chat { + .reset; + + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + color: @comment-text-color-default; + // 聊天列表 + &__list { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + + &--reverse { + display: flex; + flex-direction: column-reverse; + } + + .place-holder { + flex-grow: 1; + flex-shrink: 1; + } + + .clear-btn { + color: @text-color-secondary; + font-size: @font-size-s; + cursor: pointer; + + .@{prefix}-divider__inner-text { + display: flex; + align-items: center; + } + + .clear-btn-text { + margin-left: @comp-margin-xs; + } + + &:hover { + color: @text-color-primary; + } + } + } + // 输入框插槽 + &__footer { + position: relative; + + &__content { + width: 100%; + position: relative; + display: flex; + padding-right: 0; + } + .@{prefix}-chat__footer__content { + margin-top: @comp-margin-xl; + } + + &__textarea { + flex-grow: 1; + position: relative; + border-radius: @border-radius-round; + + .@{prefix}-textarea { + width: 100%; + + .@{prefix}-textarea__inner { + background: @bg-color-secondarycontainer; + padding: @comp-size-xxs @comp-size-xxxxxl @comp-size-xxs @comp-size-xs; + border-radius: 32px; + scrollbar-width: none; + } + + .@{prefix}-textarea__inner.@{prefix}-is-focused { + border-color: @brand-color; + background: @bg-color-container; + } + + .@{prefix}-textarea__inner::placeholder { + color: @text-color-secondary; + } + + .@{prefix}-textarea__inner:hover { + box-shadow: @chat-input-hover; + } + } + + &__icon { + position: absolute; + bottom: @comp-paddingTB-s; + right: @comp-paddingLR-s; + text-align: center; + cursor: pointer; + height: @comp-size-xxl; + display: flex; + align-items: center; + justify-content: center; + + & &__default { + transform: rotate(-90deg); + width: @comp-size-xxl; + height: @comp-size-xxl; + border-radius: @border-radius-circle; + color: @text-color-disabled; + } + + & &--focus { + background: @brand-color; + color: @text-color-anti; + } + + .@{prefix}-button.@{prefix}-size-s .@{prefix}-icon { + font-size: @font-size-xl; + } + } + } + + &__stopbtn { + flex: 0 0 auto; + margin-left: @comp-margin-l; + + .@{prefix}-button { + width: 100px; + height: @comp-size-xxxxl; + border-radius: @border-radius-round; + background: @bg-color-secondarycontainer; + color: @text-color-primary; + font-size: @font-size-l; + + &__text { + align-items: center; + } + + .@{prefix}-icon { + font-size: @font-size-xl; + margin-right: @comp-margin-s; + } + } + } + } + + &__inner { + display: flex; + margin-bottom: @comp-margin-l; + .@{prefix}-chat__avatar { + flex: 0 0 auto; + } + .@{prefix}-chat__content { + flex: 1 1 auto; + width: 100%; + + &--base { + padding-top: @comp-paddingTB-xl; + } + } + .@{prefix}-chat__detail { + max-width: calc(100% - @comp-size-xl); + box-sizing: border-box; + } + + &.model-change { + justify-content: center; + margin-top: @comp-margin-xxl; + } + + &.error { + .@{prefix}-chat__text__content { + color: @error-color; + } + } + .@{prefix}-chat__notice { + // 水平居中 + background: @bg-color-secondarycontainer; + padding: @comp-paddingTB-xxs @comp-paddingLR-s; + font-size: @font-size-s; + color: @text-color-disabled; + border-radius: @border-radius-default; + box-sizing: border-box; + line-height: 20px; + text-align: center; + + span { + color: @text-color-placeholder; + } + } + } + // chat布局 + &--normal { + .@{prefix}-chat__inner.user { + flex-direction: row-reverse; + .@{prefix}-chat__avatar { + margin-right: 0; + // margin-left: @comment-avatar-margin-right; + } + .@{prefix}-chat__content { + align-items: flex-end; + .@{prefix}-chat__base { + justify-content: flex-end; + } + } + } + .@{prefix}-chat__detail { + max-width: ~"min(calc(100% - 40px), 800px)"; + } + } + + &__avatar { + flex-shrink: 0; + cursor: pointer; + display: flex; + margin: 0 @comp-margin-xs; + padding-top: @comp-paddingTB-xl; + + &__box { + padding-top: @pop-padding-m; + } + + &-image { + width: @comp-size-m; + height: @comp-size-m; + border-radius: @border-radius-circle; + } + } + + &__content { + font: @comment-content-text-size; + display: flex; + flex-direction: column; + align-items: flex-start; + + .@{prefix}-skeleton { + width: 100%; + padding: @pop-padding-xxl; + } + } + + &__base { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: baseline; + font: @font-title-small; + color: @text-color-placeholder; + padding-left: @pop-padding-xxl; + } + + &__name { + padding-right: @comp-margin-s; + cursor: pointer; + } + // 消息样式 + &__text { + padding: @pop-padding-xl @pop-padding-xxl; + font: @font-body-large; + word-break: break-all; + + & &__user pre { + color: @text-color-secondary; + margin: 0; + white-space: pre-wrap; + } + + &__assistant { + color: @text-color-primary; + + ol { + padding-inline-start: 20px; + + li { + list-style: decimal; + } + } + + img { + max-width: 100%; + margin: @comp-margin-xs 0; + border-radius: @border-radius-default; + } + } + + & &__assistant &__content .hljs { + background-color: @code-bg-color-page; + border-radius: @border-radius-large; + } + + &--error { + color: @error-color; + } + + &--variant--base { + .@{prefix}-chat__text { + background-color: @bg-color-secondarycontainer; + border-radius: @border-radius-extraLarge; + } + } + + &--variant--outline { + .@{prefix}-chat__text { + border: 1px solid @border-level-2-color; + border-radius: @border-radius-extraLarge; + } + } + } + + &__actions-margin { + margin-left: @comp-margin-l; + } + + &__actions { + margin-top: @comp-margin-xs; + display: flex; + list-style: none; + padding: @chat-action-icon-padding; + background-color: @bg-color-secondarycontainer; + border-radius: @border-radius-medium; + border: 1px solid @border-level-2-color; + overflow: hidden; + + & .@{prefix}-button { + padding: @pop-padding-s; + width: @comp-size-xxxs; + height: @comp-size-xxxs; + box-sizing: content-box; + color: @text-color-primary; + background-color: @bg-color-secondarycontainer; + border: 0; + margin-right: @comp-margin-xs; + .@{prefix}-icon { + font-size: @font-size-l; + } + } + & .@{prefix}-chat-button--active { + color: @brand-color; + } + & .@{prefix}-button:hover { + background-color: @chat-actions-hover; + } + & .@{prefix}-space .@{prefix}-space-item { + height: @comp-size-xs; + } + } + + &__refresh { + display: flex; + align-items: center; + + &-line { + width: 1px; + height: @comp-size-xxxs; + background-color: @chat-refresh-line; + margin-right: @comp-margin-xs; + } + } + + &__code-header { + display: flex; + padding: 0 @pop-padding-xl; + padding-top: @pop-padding-xl; + justify-content: space-between; + } + + &__language-txt { + color: @code-font-color-base; + } + + &__copy-btn { + color: @code-font-color-base; + // margin-left: auto; + cursor: pointer; + } + + :where(code):not(:where(pre *)) { + color: @error-color; + } +} diff --git a/style/web/components/chat/_mixin.less b/style/web/components/chat/_mixin.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/style/web/components/chat/_var.less b/style/web/components/chat/_var.less new file mode 100644 index 0000000000..5b67607136 --- /dev/null +++ b/style/web/components/chat/_var.less @@ -0,0 +1,57 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[type]-[attrtype]--[status] + +// component: 组件名，如 button +// type: 组件类型，如 button 的次要按钮（line） +// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 +// attr: 属性名称，如 color、height、radius 等 +// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 + +// 如：@button-line-bg-color-hover +// 如：@button-line-height-s + +@import "../../_variables.less"; + +// :root[theme-mode="light"] { +// --td-code-bg-color-page: @gray-color-14; +// --td-code-font-base: @font-white-1; +// } + +// :root[theme-mode="dark"] { +// --td-code-bg-color-page: @gray-color-14; +// --td-code-font-base: @font-white-1; +// } + +// 颜色 +@comment-bg-color-secondary: @bg-color-secondarycontainer; +@comment-text-color-default: @text-color-primary; +@comment-text-color-secondary: @text-color-placeholder; +@comment-text-color-hover: @text-color-link; +@comment-border-color-default: @component-stroke; + +// 字体尺寸、行高 +@comment-author-text-size: @font-title-medium; +@comment-content-text-size: @font-body-medium; +@comment-secondary-text-size: @font-body-small; + +// 盒模型尺寸 +@comment-padding-s: @comp-paddingTB-s @comp-paddingLR-s; +@comment-avatar-margin-right: @comp-margin-xxl; +@comment-author-margin-bottom: @comp-margin-s; +@comment-author-time-padding-right: @comp-paddingLR-s; +@comment-author-name-padding-right: @comp-paddingLR-s; +@comment-actions-margin-top: @comp-margin-s; +@comment-actions-gap: @comp-margin-s; +@comment-quote-margin-top: @comp-margin-l; +@comment-quote-padding-left: @comp-margin-l; +@comment-reply-margin-left: calc(@comp-size-xxxl + @comp-margin-xxl); +@comment-reply-margin-top: @comp-margin-l; +@comment-reply-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@comment-avatar-size: @comp-size-xxxl; +@code-bg-color-page: @gray-color-14; +@code-font-color-base: @font-white-1; +@chat-refresh-line: #e7e7e7; +@chat-input-hover: inset 0px 2px 4px -1px rgba(0, 0, 0, .12), 0px 4px 5px 0px rgba(0, 0, 0, .08), 0px 1px 10px 0px rgba(0, 0, 0, .05); +@chat-actions-hover: rgba(238, 238, 238, 1); +@chat-action-icon-padding: 3px; diff --git a/style/web/components/chat/atom-one-dark.less b/style/web/components/chat/atom-one-dark.less new file mode 100644 index 0000000000..4ee1961d33 --- /dev/null +++ b/style/web/components/chat/atom-one-dark.less @@ -0,0 +1,108 @@ +@import "./_var.less"; +/* stylelint-disable */ +@prefix: t; +.@{prefix}-chat__text__content { + pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; + } + + code.hljs { + padding: 3px 5px; + } + + /* + + Atom One Dark by Daniel Gamage + Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax + + base: #282c34 + mono-1: #abb2bf + mono-2: #818896 + mono-3: #5c6370 + hue-1: #56b6c2 + hue-2: #61aeee + hue-3: #c678dd + hue-4: #98c379 + hue-5: #e06c75 + hue-5-2: #be5046 + hue-6: #d19a66 + hue-6-2: #e6c07b + +*/ + .hljs { + color: @code-font-color-base; + background: @code-bg-color-page; + } + + .hljs-comment, + .hljs-quote { + color: #5c6370; + font-style: italic; + } + + .hljs-doctag, + .hljs-keyword, + .hljs-formula { + color: #c678dd; + } + + .hljs-section, + .hljs-name, + .hljs-selector-tag, + .hljs-deletion, + .hljs-subst { + color: #e06c75; + } + + .hljs-literal { + color: #56b6c2; + } + + .hljs-string, + .hljs-regexp, + .hljs-addition, + .hljs-attribute, + .hljs-meta .hljs-string { + color: #98c379; + } + + .hljs-attr, + .hljs-variable, + .hljs-template-variable, + .hljs-type, + .hljs-selector-class, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-number { + color: #d19a66; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-link, + .hljs-meta, + .hljs-selector-id, + .hljs-title { + color: #61aeee; + } + + .hljs-built_in, + .hljs-title.class_, + .hljs-class .hljs-title { + color: #e6c07b; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } + + .hljs-link { + text-decoration: underline; + } +} \ No newline at end of file