From 50079beeb397385765b0b50b5152f5627219d735 Mon Sep 17 00:00:00 2001 From: Summer-Shen <1563407190@qq.com> Date: Sat, 5 Nov 2022 20:31:10 +0800 Subject: [PATCH 001/312] fix: dialog style --- style/web/components/dialog/_index.less | 1 + style/web/components/dialog/_var.less | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index b22b84a9bf..d033b13534 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -45,6 +45,7 @@ &__header { color: @dialog-header-text-color; font: @dialog-header-font; + font-size: @font-title-medium; font-weight: @dialog-header-weight; display: flex; align-items: center; diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less index ac1b7b1fde..638a52082d 100644 --- a/style/web/components/dialog/_var.less +++ b/style/web/components/dialog/_var.less @@ -51,7 +51,7 @@ @dialog-body-padding-fullscreen: 24px 32px 0; @dialog-body-icon-padding: @spacer-2 0 @spacer-3 @spacer-4; @dialog-footer-button-margin-left: @spacer; -@dialog-footer-padding: @spacer-2 0 0; +@dialog-footer-padding: @spacer-3 0 0; @dialog-footer-padding-fullscreen: 16px 32px 32px; @dialog-word-spacing: -6px; From 3d199a1947f651c84ce4c79b5d1aa5d7fb4c90e8 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 7 Nov 2022 10:05:47 +0800 Subject: [PATCH 002/312] fix(web): pagination autowidth (#968) --- style/web/components/pagination/_index.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index 2123cf4d5f..644e92aa68 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -238,3 +238,11 @@ } } } + +/** IE 兼容 **/ +.@{prefix}-pagination-ie { + /** 在 IE11 以下浏览器，input autoWidth 计算无法依赖 observer，因而加上最小宽度，避免分页信息出现 0 的情况 */ + .@{prefix}-select .@{prefix}-input__inner { + min-width: 54px; + } +} From be220839ccea3211421e7c111128569d829f580a Mon Sep 17 00:00:00 2001 From: Ranger <32590310+southorange1228@users.noreply.github.com> Date: Mon, 7 Nov 2022 10:15:22 +0800 Subject: [PATCH 003/312] fix: fix timeline styles (#954) Co-authored-by: southorange1228 <15280970040@163.com> --- style/web/components/timeline/_index.less | 6 ++++++ style/web/components/timeline/_var.less | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less index fc592a4f66..5f17acd3b7 100644 --- a/style/web/components/timeline/_index.less +++ b/style/web/components/timeline/_index.less @@ -89,9 +89,15 @@ } } + &__label { + color: @timeline-label-font-color; + font-size: @timeline-label-font; + } + &__content { flex: 1; padding-left: 16px; + font-size: @timeline-content-font; } &--last { diff --git a/style/web/components/timeline/_var.less b/style/web/components/timeline/_var.less index 0f696f2f07..b72083e8c1 100644 --- a/style/web/components/timeline/_var.less +++ b/style/web/components/timeline/_var.less @@ -8,3 +8,8 @@ @timeline-border-width: 2px; @timeline-line-height: 1.7143; + +@timeline-content-font: @font-size-l; + +@timeline-label-font: @font-size-base; +@timeline-label-font-color: @text-color-secondary; From f244399b9927beba6972d05fd6ac45121086a3c0 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 7 Nov 2022 10:19:11 +0800 Subject: [PATCH 004/312] fix: input-number with theme=column autoWidth (#969) Co-authored-by: sheepluo --- style/web/components/input-number/_index.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less index b5486e9eed..4d8044a096 100644 --- a/style/web/components/input-number/_index.less +++ b/style/web/components/input-number/_index.less @@ -61,7 +61,12 @@ width: auto; &.@{prefix}-is-controls-right { - min-width: 88px; + min-width: auto; + width: auto; + } + + .@{prefix}-input__inner { + min-width: 42px; } &:not(.@{inputNumberCls}--column) .@{prefix}-input-number__increase { From 3883e90a6d450d52355dfa7f9df1cd1909614c81 Mon Sep 17 00:00:00 2001 From: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Date: Mon, 7 Nov 2022 10:25:33 +0800 Subject: [PATCH 005/312] fix(form): date-range-picker validate style (#965) Co-authored-by: loopzhou --- style/web/components/form/_mixin.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/form/_mixin.less b/style/web/components/form/_mixin.less index cd5f311335..32a61b693d 100644 --- a/style/web/components/form/_mixin.less +++ b/style/web/components/form/_mixin.less @@ -9,6 +9,7 @@ .@{prefix}-select, .@{prefix}-radio-button, .@{prefix}-cascader, + .@{prefix}-range-input, .@{prefix}-textarea__inner { border-color: @@borderColor; @borderColor: "input-border-color-@{status}"; From 6f151ed6eba11ddaa41fd49fb46d2df8e2afe157 Mon Sep 17 00:00:00 2001 From: "longhe.li" Date: Mon, 7 Nov 2022 10:41:21 +0800 Subject: [PATCH 006/312] =?UTF-8?q?fix(input-number):=20=E6=A3=80=E6=9F=A5?= =?UTF-8?q?=E6=95=B0=E5=AD=97=E6=97=B6=E9=80=BB=E8=BE=91=E5=86=B2=E7=AA=81?= =?UTF-8?q?#1613=20(#966)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/input-number/large-number.ts | 2 +- js/input-number/number.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/input-number/large-number.ts b/js/input-number/large-number.ts index 9c5db00181..94bd92ca7a 100644 --- a/js/input-number/large-number.ts +++ b/js/input-number/large-number.ts @@ -9,7 +9,7 @@ export function fillZero(length: number) { */ export function isInputNumber(num: number | string): boolean { if (!num) return true; - if (typeof num === 'number') return Number.isNaN(num); + if (typeof num === 'number') return !Number.isNaN(num); const r = /^[0-9|e|E|-]+\.*[0-9|e|E|-]*$/.test(num); if (!r) return false; // only allow one [.e] and two [-] diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 30af3c08e8..792562a9de 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -175,7 +175,7 @@ export function getStepValue(p: { lastValue?: NumberType; largeNumber?: boolean; }) { - const { op, step, lastValue = 0, max, min, largeNumber } = p; + const { op, step, lastValue, max, min, largeNumber } = p; if (step <= 0) { log.error('InputNumber', 'step must be larger than 0.'); return lastValue; From 484b9121877ffef5f28cf1e24bbe6d96c9fb5450 Mon Sep 17 00:00:00 2001 From: "longhe.li" Date: Mon, 7 Nov 2022 10:52:07 +0800 Subject: [PATCH 007/312] fix(transfer): multiline text style (#964) --- style/web/components/transfer/_index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/web/components/transfer/_index.less b/style/web/components/transfer/_index.less index 9a9abc3e39..856b6c60a5 100644 --- a/style/web/components/transfer/_index.less +++ b/style/web/components/transfer/_index.less @@ -100,9 +100,11 @@ &__label { margin: 0; + flex: 1; > span { margin-left: @transfer-list-item-text-margin-left; + display: inline-block; } } From a38d5da324969dbe81b59b529788d8b4387495b9 Mon Sep 17 00:00:00 2001 From: Summer-Shen <1563407190@qq.com> Date: Mon, 7 Nov 2022 15:06:18 +0800 Subject: [PATCH 008/312] fix: apply var to font --- style/web/components/dialog/_index.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index d033b13534..8cee0ce489 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -44,8 +44,7 @@ &__header { color: @dialog-header-text-color; - font: @dialog-header-font; - font-size: @font-title-medium; + font: @font-title-medium; font-weight: @dialog-header-weight; display: flex; align-items: center; From a73562f1ce38bc364cd07ad9ef3a60536a93fcfd Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 7 Nov 2022 15:13:14 +0800 Subject: [PATCH 009/312] fix(select): option ellipsis (#972) --- 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 0d452f6ac0..50346d9c74 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -136,10 +136,10 @@ color: @select-option-color; transition: background-color @anim-duration-base @anim-time-fn-easing; box-sizing: border-box; - .text-ellipsis(); span { position: relative; + .text-ellipsis(); } &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-selected):hover { From 96771d2fbf48d4e44290210f37b1c40a7c79802d Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 7 Nov 2022 15:18:26 +0800 Subject: [PATCH 010/312] fix: resolve type error (#970) --- js/utils/helper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/utils/helper.ts b/js/utils/helper.ts index 98d77c0bae..895c6f7236 100644 --- a/js/utils/helper.ts +++ b/js/utils/helper.ts @@ -154,7 +154,7 @@ export function limitUnicodeMaxLength( oldStr?: string ): string { // 旧字符满足字数要求则返回 - if ([...(oldStr ?? '')].slice().length === maxLength) return oldStr; + if ([...(oldStr ?? '')].slice().length === maxLength) return oldStr || ''; return [...(str ?? '')].slice(0, maxLength).join(''); } From 68a7a451fde5d3d437d2b6afdabe4f2666d316a1 Mon Sep 17 00:00:00 2001 From: zhongyuan Date: Mon, 7 Nov 2022 16:22:32 +0800 Subject: [PATCH 011/312] fix(action-sheet): update md (#962) --- docs/mobile/api/action-sheet.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/mobile/api/action-sheet.md b/docs/mobile/api/action-sheet.md index bac7934939..7e7518b9f5 100644 --- a/docs/mobile/api/action-sheet.md +++ b/docs/mobile/api/action-sheet.md @@ -1,6 +1,6 @@ --- title: ActionSheet 动作面板 -description: 从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 spline: base isComponent: true toc: false @@ -22,3 +22,7 @@ toc: false 菜单项的数量超过 8 个时，可作翻页处理。 {{ grid }} + +### 宫格型-多页 + +{{ grid-multiple }} From 5bdcf88bd37039340783298d9487ef154a0227cd Mon Sep 17 00:00:00 2001 From: zhongyuan Date: Mon, 7 Nov 2022 16:22:50 +0800 Subject: [PATCH 012/312] fix(collapse): update md (#961) --- docs/mobile/api/collapse.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/mobile/api/collapse.md b/docs/mobile/api/collapse.md index f419034ad5..daf5649623 100644 --- a/docs/mobile/api/collapse.md +++ b/docs/mobile/api/collapse.md @@ -1,12 +1,12 @@ --- title: Collapse 折叠面板 -description: 可以折叠/展开的内容区域。 +description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等 spline: base isComponent: true toc: false --- -### 基础型 +### 基础折叠面板 主要用于对复杂区域进行分组和隐藏 常用于订单信息展示等 {{ base }} @@ -14,7 +14,8 @@ toc: false ### 带操作说明 {{ action }} -### 手风琴模式 + +### 手风琴式 对信息进行分组展示和隐藏，每次只展示一组信息 -{{ accordion }} \ No newline at end of file +{{ accordion }} From 0dc4302ab11065f82efe264f7461ff98bfb5583f Mon Sep 17 00:00:00 2001 From: zhongyuan Date: Mon, 7 Nov 2022 16:23:09 +0800 Subject: [PATCH 013/312] fix(upload): update md (#960) --- docs/mobile/api/upload.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/mobile/api/upload.md b/docs/mobile/api/upload.md index 840ac6b55f..ec1538fb85 100644 --- a/docs/mobile/api/upload.md +++ b/docs/mobile/api/upload.md @@ -1,12 +1,15 @@ --- title: Upload 上传 -description: 单选、多选上传图片 +description: 用于相册读取或拉起拍照的图片上传功能。 spline: base isComponent: true toc: false --- -### 基础用法 +### 单选上传图片 {{ base }} +### 多选上传图片 + +{{ multiple }} From 02f9246e258cfe5b335ce82a58dae663d0123411 Mon Sep 17 00:00:00 2001 From: WenKang Date: Tue, 8 Nov 2022 17:07:01 +0800 Subject: [PATCH 014/312] feat: add size design token (#977) --- style/web/theme/_size.less | 61 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 style/web/theme/_size.less diff --git a/style/web/theme/_size.less b/style/web/theme/_size.less new file mode 100644 index 0000000000..9538258aa8 --- /dev/null +++ b/style/web/theme/_size.less @@ -0,0 +1,61 @@ +// size/margin/padding相关 token +:root { + --td-size-1: 2px; + --td-size-2: 4px; + --td-size-3: 6px; + --td-size-4: 8px; + --td-size-5: 12px; + --td-size-6: 16px; + --td-size-7: 20px; + --td-size-8: 24px; + --td-size-9: 28px; + --td-size-10: 32px; + --td-size-11: 36px; + --td-size-12: 40px; + --td-size-13: 48px; + --td-size-14: 56px; + --td-size-15: 64px; + --td-size-16: 72px; + + //全局 component 组件尺寸高度相关 token + --td-comp-size-xs: var(--td-size-7); + --td-comp-size-s: var(--td-size-8); + --td-comp-size-m: var(--td-size-10); + --td-comp-size-l: var(--td-size-11); + --td-comp-size-xl: var(--td-size-12); + --td-comp-size-xxl: var(--td-size-13); + --td-comp-size-xxxl: var(--td-size-14); + + //全局 popup 弹出层整体边距 token + --td-pop-padding-s: var(--td-size-2); + --td-pop-padding-m: var(--td-size-3); + --td-pop-padding-l: var(--td-size-4); + --td-pop-padding-xl: var(--td-size-5); + --td-pop-padding-xxl: var(--td-size-6); + + //全局 component 组件左右边距 token + --td-comp-paddingLR-xs: var(--td-size-2); + --td-comp-paddingLR-s: var(--td-size-4); + --td-comp-paddingLR-m: var(--td-size-5); + --td-comp-paddingLR-l: var(--td-size-6); + --td-comp-paddingLR-xl: var(--td-size-8); + --td-comp-paddingLR-xxl: var(--td-size-10); + + //全局 component 组件上下边距 token + --td-comp-paddingTB-xxs: var(--td-size-1); + --td-comp-paddingTB-xs: var(--td-size-2); + --td-comp-paddingTB-s: var(--td-size-4); + --td-comp-paddingTB-m: var(--td-size-5); + --td-comp-paddingTB-l: var(--td-size-6); + --td-comp-paddingTB-xl: var(--td-size-8); + --td-comp-paddingTB-xxl: var(--td-size-10); + + //全局 component 组件间距 token + --td-comp-margin-xs: var(--td-size-2); + --td-comp-margin-s: var(--td-size-4); + --td-comp-margin-m: var(--td-size-5); + --td-comp-margin-l: var(--td-size-6); + --td-comp-margin-xl: var(--td-size-7); + --td-comp-margin-xxl: var(--td-size-8); + --td-comp-margin-xxxl: var(--td-size-12); +} From 584e53163c6b41b874b7b8c1225cd08862992939 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 8 Nov 2022 18:58:38 +0800 Subject: [PATCH 015/312] feat: add size less vars (#978) * chore(inputNumber): add unit test * feat: add size token less map * chore: remove change --- style/web/_variables.less | 61 ++++++++++++++++++- .../input-number/compareLargeNumber.test.js | 1 + 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/style/web/_variables.less b/style/web/_variables.less index 131d02f7ff..84eca06e57 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -188,7 +188,66 @@ @shadow-2-inset: @shadow-2, @shadow-inset; @shadow-3-inset: @shadow-3, @shadow-inset; -// Spacer +@size-1: var(--td-size-1); +@size-2: var(--td-size-2); +@size-3: var(--td-size-3); +@size-4: var(--td-size-4); +@size-5: var(--td-size-5); +@size-6: var(--td-size-6); +@size-7: var(--td-size-7); +@size-8: var(--td-size-8); +@size-9: var(--td-size-9); +@size-10: var(--td-size-10); +@size-11: var(--td-size-11); +@size-12: var(--td-size-12); +@size-13: var(--td-size-13); +@size-14: var(--td-size-14); +@size-15: var(--td-size-15); +@size-16: var(--td-size-16); + +// component 组件尺寸高度相关 token +@comp-size-xs: var(--td-comp-size-xs); +@comp-size-s: var(--td-comp-size-s); +@comp-size-m: var(--td-comp-size-m); +@comp-size-l: var(--td-comp-size-l); +@comp-size-xl: var(--td-comp-size-xl); +@comp-size-xxl: var(--td-comp-size-xxl); +@comp-size-xxxl: var(--td-comp-size-xxxl); + +// popup 弹出层整体边距 token +@pop-padding-s: var(--td-pop-padding-s); +@pop-padding-m: var(--td-pop-padding-m); +@pop-padding-l: var(--td-pop-padding-l); +@pop-padding-xl: var(--td-pop-padding-xl); +@pop-padding-xxl: var(--td-pop-padding-xxl); + +// component 组件左右边距 token +@comp-paddingLR-xs: var(--td-comp-paddingLR-xs); +@comp-paddingLR-s: var(--td-comp-paddingLR-s); +@comp-paddingLR-m: var(--td-comp-paddingLR-m); +@comp-paddingLR-l: var(--td-comp-paddingLR-l); +@comp-paddingLR-xl: var(--td-comp-paddingLR-xl); +@comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl); + +// component 组件上下边距 token +@comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs); +@comp-paddingTB-xs: var(--td-comp-paddingTB-xs); +@comp-paddingTB-s: var(--td-comp-paddingTB-s); +@comp-paddingTB-m: var(--td-comp-paddingTB-m); +@comp-paddingTB-l: var(--td-comp-paddingTB-l); +@comp-paddingTB-xl: var(--td-comp-paddingTB-xl); +@comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl); + +// component 组件间距 token +@comp-margin-xs: var(--td-comp-margin-xs); +@comp-margin-s: var(--td-comp-margin-s); +@comp-margin-m: var(--td-comp-margin-m); +@comp-margin-l: var(--td-comp-margin-l); +@comp-margin-xl: var(--td-comp-margin-xl); +@comp-margin-xxl: var(--td-comp-margin-xxl); +@comp-margin-xxxl: var(--td-comp-margin-xxxl); + +// Spacer 【deprecated】 @spacer: 8px; @spacer-s: @spacer * .5; // 间距-4 @spacer-m: @spacer * .75; // 间距-6 diff --git a/test/unit/input-number/compareLargeNumber.test.js b/test/unit/input-number/compareLargeNumber.test.js index 684a327846..6013fbe0e5 100644 --- a/test/unit/input-number/compareLargeNumber.test.js +++ b/test/unit/input-number/compareLargeNumber.test.js @@ -93,6 +93,7 @@ describe('compareLargeNumber', () => { it('4241234, 41234534', () => { expect(compareLargeNumber('4241234', '41234534')).toBe(-1); }); + }); describe('isInputNumber', () => { From 03fb517cb8a4a74993c315866b9ec98414cb5dd3 Mon Sep 17 00:00:00 2001 From: zhongyuan Date: Tue, 8 Nov 2022 19:15:36 +0800 Subject: [PATCH 016/312] fix(pull-down-refresh): update md (#974) --- docs/mobile/api/pull-down-refresh.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/docs/mobile/api/pull-down-refresh.md b/docs/mobile/api/pull-down-refresh.md index 64e19eeb49..def615f79c 100644 --- a/docs/mobile/api/pull-down-refresh.md +++ b/docs/mobile/api/pull-down-refresh.md @@ -6,14 +6,10 @@ isComponent: true toc: false --- -### 基础用法 +### 顶部下拉刷新 下拉刷新会触发 refresh 事件 -{{ base }} - -### 自定义文案和loading属性 - 通过 `loadingTexts` 属性可以自定义多个状态的文案，默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] 通过 `loadingBarHeight` 属性可以自定义下拉区域高度，默认为 50px @@ -22,10 +18,6 @@ toc: false 通过 `loadingProps` 属性可以自定义 loading 图标的属性 -{{ loading-texts }} - -### 超时事件 - 通过 `refreshTimeout` 属性可以自定义加载超时时间，默认为 3000ms。超时后会触发 timeout 事件，可传入回调函数 -{{ timeout }} +{{ base }} From 20f36971cd034a48cb6b8c1c5ed881e4fd3fbd66 Mon Sep 17 00:00:00 2001 From: zhongyuan Date: Tue, 8 Nov 2022 19:15:53 +0800 Subject: [PATCH 017/312] Fix/back top md (#973) * fix(back-top): update md * fix(back-top): update md --- docs/mobile/api/back-top.md | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/docs/mobile/api/back-top.md b/docs/mobile/api/back-top.md index 49e6a710e7..b22cfb6ced 100644 --- a/docs/mobile/api/back-top.md +++ b/docs/mobile/api/back-top.md @@ -1,29 +1,23 @@ --- title: BackTop 返回顶部 -description: 用于当页面过长往下滑动时，帮助用户快速回到顶部。 +description: 当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部。 spline: base isComponent: true toc: false --- -### 基础用法 +### 圆型返回顶部 基础用法默认为白底圆形，固定在页面右下角，点击后返回页面顶部 -{{ base }} - -### 返回按钮形状 - 通过 theme 属性可以设置按钮形状，可选项有 `round` / `half-round` / `round-dark` / `half-round-dark` 通过 `text` 属性可以自定义按钮文案 通过 `icon` 属性可以自定义按钮 icon -{{ theme }} - -#### 返回位置 +{{ round }} -通过 `target` 属性可以自定义页面滚动到某个元素 +### 半圆型返回顶部 -{{ target }} +{{ half-round }} From 663acfe40481dbda5cf51e2da7c8a88805fa28a3 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 8 Nov 2022 19:32:19 +0800 Subject: [PATCH 018/312] chore: import size vars (#979) * chore: import size vars * Update _index.less --- style/web/theme/_index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/web/theme/_index.less b/style/web/theme/_index.less index 9b31a895f6..515a8995a9 100644 --- a/style/web/theme/_index.less +++ b/style/web/theme/_index.less @@ -5,3 +5,5 @@ @import "./_radius.less"; @import "./_font.less"; + +@import "./_size.less"; From ee00ede9a56fb42b9feb2b200fd74d928a47c828 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 9 Nov 2022 10:55:16 +0800 Subject: [PATCH 019/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20select=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#980)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 修复 select 样式问题 * feat: 修复 select 样式问题 * feat: 修复 select 样式问题 --- style/web/components/input/_index.less | 16 +++++++++------ style/web/components/input/_mixin.less | 10 --------- style/web/components/input/_var.less | 1 + style/web/components/select/_index.less | 24 ++++++++++++++++++++-- style/web/components/select/_polyfill.less | 10 --------- style/web/components/tag-input/_index.less | 20 +++++++++++++----- style/web/components/tag-input/_var.less | 3 +++ style/web/components/tag/_var.less | 2 +- 8 files changed, 52 insertions(+), 34 deletions(-) diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less index 45c1c3c171..32c6dfefe2 100644 --- a/style/web/components/input/_index.less +++ b/style/web/components/input/_index.less @@ -17,8 +17,6 @@ height: @input-height-default; .input-base(); - line-height: @input-height-default; // TODO: 需要调整目前用line height撑开的方式 - &--focused { border-color: @input-border-color-default-focus; box-shadow: @input-box-shadow-focus; @@ -101,15 +99,12 @@ &.@{prefix}-size-l { height: @input-height-l; font: @input-font-l; - padding-top: @spacer; - padding-bottom: @spacer; + padding: @input-padding-horizontal-l; } &.@{prefix}-size-s { height: @input-height-s; font: @input-font-s; - padding-top: (@spacer / 4); - padding-bottom: (@spacer / 4); } .@{prefix}-input__prefix, @@ -121,14 +116,23 @@ .@{prefix}-input__prefix { > .t-icon { + font-size: @icon-default; color: @input-inner-prefix-icon-color; } + + &:not(:empty) { + margin-right: @spacer; + } } .@{prefix}-input__suffix { > .t-icon { color: @input-inner-suffix-icon-color; } + + &:not(:empty) { + margin-left: @spacer; + } } // 输入框被聚焦 diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less index f8f6500805..90420959ee 100644 --- a/style/web/components/input/_mixin.less +++ b/style/web/components/input/_mixin.less @@ -88,15 +88,6 @@ .input-fix-position(@position) { &.@{prefix}-input--@{position} { - & > .@{prefix}-input__@{position}-icon { - & when (@position = prefix) { - padding-right: @spacer; - } - & when (@position = suffix) { - padding-left: @spacer; - } - } - & > .@{prefix}-input__@{position} { z-index: 2; height: 100%; @@ -117,7 +108,6 @@ &.@{prefix}-size-l { & > .@{prefix}-input__inner { height: @input-height-l; - line-height: @input-height-l; } } } diff --git a/style/web/components/input/_var.less b/style/web/components/input/_var.less index 7196db19c1..b2a9d7aa12 100644 --- a/style/web/components/input/_var.less +++ b/style/web/components/input/_var.less @@ -49,6 +49,7 @@ @input-fix-position: @spacer; // 间距 +@input-padding-horizontal-l: @spacer-l; @input-padding-horizontal-default: @spacer; @input-margin-distance-default: @spacer; @input-status-position-right: -@spacer-3; diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less index 50346d9c74..cc8f2cc701 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -29,6 +29,11 @@ } &-inner { + // 嵌套无需 padding + .@{prefix}-select__list .@{prefix}-select__list { + padding: 0; + } + .@{prefix}-select__list, .@{prefix}-tree { padding: @select-dropdown-padding; @@ -98,7 +103,20 @@ } .@{prefix}-select-option-group__divider + .@{prefix}-select-option-group__divider { - border-top: 1px @select-optiongroup-border-color solid; + position: relative; + + &::before { + content: ""; + width: 100%; + height: 1px; + padding: @select-option-padding-default; + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + background-color: @select-optiongroup-border-color; + background-clip: content-box; + } } .@{prefix}-select-option-group__header { @@ -107,7 +125,7 @@ color: @select-option-group-header-color; display: block; height: @select-option-height-default; - line-height: @select-option-line-height; + line-height: @select-option-height-default; padding: @select-option-padding-default; box-sizing: border-box; .text-ellipsis(); @@ -116,11 +134,13 @@ .@{prefix}-select-option-group__header.@{prefix}-size-l { height: @select-option-height-l; + line-height: @select-option-height-l; padding: @select-option-padding-l; } .@{prefix}-select-option-group__header.@{prefix}-size-s { height: @select-option-height-s; + line-height: @select-option-height-s; padding: @select-option-padding-s; } diff --git a/style/web/components/select/_polyfill.less b/style/web/components/select/_polyfill.less index 3c4243eb43..07f1f11135 100644 --- a/style/web/components/select/_polyfill.less +++ b/style/web/components/select/_polyfill.less @@ -128,16 +128,6 @@ font: @select-font-l; } } - - .@{prefix}-tag, - + .@{prefix}-tag { - margin: @select-tag-margin; - } - - .@{prefix}-tag { - height: @select-tag-height-default; - line-height: (@select-tag-height-default - 2px); - } } .@{prefix}-select.@{prefix}-is-active:not(.@{prefix}-is-disabled) { diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index 53c18bc1d1..c0797c4428 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -9,16 +9,27 @@ .@{prefix}-tag-input { .reset; .@{prefix}-tag { - margin-right: @spacer-s; animation: t-fade-in .1s ease-in-out; } + .@{prefix}-tag + .@{prefix}-tag { + margin-left: @spacer-s; + } + .@{prefix}-tag-input__drag_wrapper + .@{prefix}-tag-input__drag_wrapper { + margin-left: @spacer-s; + } .@{prefix}-input { padding-left: @spacer-s; overflow: hidden; + min-height: @tag-input-height-default; &.@{prefix}-size-s { padding-left: @spacer-s * .5; + min-height: @tag-input-height-s; + } + + &.@{prefix}-size-l { + min-height: @tag-input-height-l; } } @@ -30,7 +41,7 @@ } .@{prefix}-tag-input__prefix, - .@{prefix}-input__prefix:not(:empty) { + .@{prefix}-input__prefix:empty + input { margin-left: @spacer-s; } @@ -47,12 +58,11 @@ .@{prefix}-tag-input--break-line { .@{prefix}-input { - display: block; - height: auto; + flex-wrap: nowrap; padding-right: @spacer-3; &.@{prefix}-input--prefix > .@{prefix}-input__prefix { - display: inline; + display: inline-flex; text-align: left; } diff --git a/style/web/components/tag-input/_var.less b/style/web/components/tag-input/_var.less index e69de29bb2..bee37394f6 100644 --- a/style/web/components/tag-input/_var.less +++ b/style/web/components/tag-input/_var.less @@ -0,0 +1,3 @@ +@tag-input-height-s: 24px; +@tag-input-height-default: 32px; +@tag-input-height-l: 40px; diff --git a/style/web/components/tag/_var.less b/style/web/components/tag/_var.less index 49d474dd2f..079747c160 100644 --- a/style/web/components/tag/_var.less +++ b/style/web/components/tag/_var.less @@ -58,7 +58,7 @@ @tag-default-border-width: 1px; // height -@tag-height-small: 22px; +@tag-height-small: 20px; @tag-height-medium: 24px; @tag-height-large: 32px; From d59973d3a547426bbfe03d0d66f8bc348bfdfed2 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 9 Nov 2022 16:07:53 +0800 Subject: [PATCH 020/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20select=20?= =?UTF-8?q?=E6=97=A0=E8=BE=B9=E6=A1=86=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20(#981)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/select-input/_index.less | 11 +++++++---- style/web/components/select-input/_var.less | 1 + 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/style/web/components/select-input/_index.less b/style/web/components/select-input/_index.less index a816cff23b..62314f3977 100644 --- a/style/web/components/select-input/_index.less +++ b/style/web/components/select-input/_index.less @@ -17,18 +17,21 @@ /** 无边框模式 */ .@{prefix}-select-input--borderless { .@{prefix}-input { - border: 0; box-shadow: none; - transition: background-color @anim-duration-base linear; + border: 1px solid transparent; + transition: all @anim-duration-base linear; - &:hover { + &:hover:not(.@{prefix}-input--focused) { + border-color: @component-border; background-color: @select-input-focus-bg; border-radius: @select-input-border-radius; } } .@{prefix}-input--focused { - background-color: @select-input-focus-bg; + border-color: @brand-color; + box-shadow: @select-input-shadow; + background-color: @bg-color-specialcomponent; } /** 无边框模式的多选 */ diff --git a/style/web/components/select-input/_var.less b/style/web/components/select-input/_var.less index e4db1d48dc..b4e9c84220 100644 --- a/style/web/components/select-input/_var.less +++ b/style/web/components/select-input/_var.less @@ -1,2 +1,3 @@ @select-input-focus-bg: @bg-color-container-hover; @select-input-border-radius: @border-radius-default; +@select-input-shadow: 0 0 0 2px @brand-color-focus; From 874b667dd7a962ada496e57a585def9bdc095113 Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 9 Nov 2022 16:31:20 +0800 Subject: [PATCH 021/312] feat: button/ dialog size token (#982) --- style/web/_variables.less | 6 ++++ style/web/components/button/_mixin.less | 4 +-- style/web/components/button/_var.less | 18 +++++------ style/web/components/dialog/_index.less | 43 +++++++++++-------------- style/web/components/dialog/_var.less | 41 +++++++++++------------ style/web/theme/_size.less | 8 ++++- 6 files changed, 64 insertions(+), 56 deletions(-) diff --git a/style/web/_variables.less b/style/web/_variables.less index 84eca06e57..3367488d29 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -206,6 +206,7 @@ @size-16: var(--td-size-16); // component 组件尺寸高度相关 token +@comp-size-xxs: var(--td-size-xxs); @comp-size-xs: var(--td-comp-size-xs); @comp-size-s: var(--td-comp-size-s); @comp-size-m: var(--td-comp-size-m); @@ -213,6 +214,8 @@ @comp-size-xl: var(--td-comp-size-xl); @comp-size-xxl: var(--td-comp-size-xxl); @comp-size-xxxl: var(--td-comp-size-xxxl); +@comp-size-xxxxl: var(--td-comp-size-xxxxl); +@comp-size-xxxxxl: var(--td-comp-size-xxxxxl); // popup 弹出层整体边距 token @pop-padding-s: var(--td-pop-padding-s); @@ -222,6 +225,7 @@ @pop-padding-xxl: var(--td-pop-padding-xxl); // component 组件左右边距 token +@comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs); @comp-paddingLR-xs: var(--td-comp-paddingLR-xs); @comp-paddingLR-s: var(--td-comp-paddingLR-s); @comp-paddingLR-m: var(--td-comp-paddingLR-m); @@ -239,6 +243,7 @@ @comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl); // component 组件间距 token +@comp-margin-xxs: var(--td-comp-margin-xxs); @comp-margin-xs: var(--td-comp-margin-xs); @comp-margin-s: var(--td-comp-margin-s); @comp-margin-m: var(--td-comp-margin-m); @@ -246,6 +251,7 @@ @comp-margin-xl: var(--td-comp-margin-xl); @comp-margin-xxl: var(--td-comp-margin-xxl); @comp-margin-xxxl: var(--td-comp-margin-xxxl); +@comp-margin-xxxxl: var(--td-comp-margin-xxxxl); // Spacer 【deprecated】 @spacer: 8px; diff --git a/style/web/components/button/_mixin.less b/style/web/components/button/_mixin.less index 5650d89ce9..24eab4428e 100644 --- a/style/web/components/button/_mixin.less +++ b/style/web/components/button/_mixin.less @@ -24,8 +24,8 @@ .button-size(@btn-height, @btn-font-size, @btn-icon-size, @padding-horizontal) { height: @btn-height; font: @btn-font-size; - padding-left: @padding-horizontal - @btn-border-width; - padding-right: @padding-horizontal - @btn-border-width; + padding-left: calc(@padding-horizontal - @btn-border-width); + padding-right: calc(@padding-horizontal - @btn-border-width); .t-icon, .@{prefix}-loading { diff --git a/style/web/components/button/_var.less b/style/web/components/button/_var.less index c4302a7d2f..9023a1ef39 100644 --- a/style/web/components/button/_var.less +++ b/style/web/components/button/_var.less @@ -1,13 +1,13 @@ // 尺寸 -@btn-height-s: 24px; -@btn-height-default: 32px; -@btn-height-l: 40px; +@btn-height-s: @comp-size-s; +@btn-height-default: @comp-size-m; +@btn-height-l: @comp-size-l; // 圆角 @btn-border-radius: @border-radius-default; -@btn-shape-border-radius-s: (@btn-height-s / 2); -@btn-shape-border-radius-default: (@btn-height-default / 2); -@btn-shape-border-radius-l: (@btn-height-l / 2); +@btn-shape-border-radius-s: calc(@btn-height-s / 2); +@btn-shape-border-radius-default: calc(@btn-height-default / 2); +@btn-shape-border-radius-l: calc(@btn-height-l / 2); //字号 @btn-font-s: @font-body-small; @@ -24,9 +24,9 @@ @btn-icon-text-margin-left: @spacer; // padding -@btn-padding-horizontal-s: @spacer; -@btn-padding-horizontal-default: (@spacer * 2); -@btn-padding-horizontal-l: (@spacer * 3); +@btn-padding-horizontal-s: @comp-paddingLR-s; +@btn-padding-horizontal-default: @comp-paddingLR-l; +@btn-padding-horizontal-l: @comp-paddingLR-xl; @btn-border-width: 1px; diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index b22b84a9bf..e354b268ba 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -47,12 +47,20 @@ font: @dialog-header-font; font-weight: @dialog-header-weight; display: flex; - align-items: center; + align-items: flex-start; word-break: break-word; - padding-right: 10px; + + .@{prefix}-dialog__header-content { + display: flex; + align-items: flex-start; + margin-right: @dialog-header-content-margin-right; + width: 100%; + } .t-icon:not(.t-icon-close) { font-size: @dialog-icon-size; + display: inline-flex; + align-items: center; margin-right: @dialog-header-icon-margin-right; flex-shrink: 0; } @@ -61,13 +69,14 @@ &__header--fullscreen { background-color: @dialog-header-bg-color-fullscreen; min-height: @dialog-header-height-fullscreen; - padding-right: 0; - justify-content: center; - position: relative; + justify-content: flex-end; + display: flex; + align-items: center; + flex-direction: row; + padding: @dialog-header-padding-fullscreen; .@{prefix}-dialog__header-content { box-sizing: border-box; - padding: @dialog-header-content-padding-fullscreen; display: flex; justify-content: center; align-items: center; @@ -98,8 +107,6 @@ width: 100%; text-align: right; padding: @dialog-footer-padding; - // remove space between inline-block elements. - word-spacing: @dialog-word-spacing; .@{prefix}-button + .@{prefix}-button { margin-left: @dialog-footer-button-margin-left; @@ -116,28 +123,17 @@ padding: @dialog-default-spacer; } - &--primary { - padding: @dialog-primary-spacer; - - .@{prefix}-dialog__body { - padding: @dialog-parimary-body-spacer; - } - } - &__close { - position: absolute; - top: @dialog-close-position-top; - right: @dialog-close-position-right; font-size: @dialog-close-icon-size; color: @dialog-close-color; display: flex; width: @dialog-close-icon-size; height: @dialog-close-icon-size; align-items: center; - justify-content: center; border-radius: @border-radius-default; background: @dialog-bg-color; transition: all @anim-duration-base linear; + padding: @dialog-closebtn-padding; &:hover { cursor: pointer; @@ -150,17 +146,16 @@ } &__close--fullscreen { - top: 50%; - transform: translateY(-50%); + display: flex; background: transparent; &:hover { cursor: pointer; - background: #eee; + background: @dialog-close-icon-fullscreen-hover; } &:active { - background: #dcdcdc; + background: @dialog-close-icon-fullscreen-active; } } diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less index ac1b7b1fde..13a17ee4b3 100644 --- a/style/web/components/dialog/_var.less +++ b/style/web/components/dialog/_var.less @@ -15,7 +15,9 @@ @dialog-border-color: transparent; @dialog-bg-color: @bg-color-container; @dialog-header-text-color: @text-color-primary; -@dialog-header-bg-color-fullscreen: #F3F3F3; +@dialog-header-bg-color-fullscreen: @bg-color-secondarycontainer; +@dialog-close-icon-fullscreen-hover: @bg-color-secondarycontainer-hover; +@dialog-close-icon-fullscreen-active: @bg-color-secondarycontainer-active; @dialog-body-text-color: @text-color-secondary; @dialog-close-icon-hover: @bg-color-container-hover; @dialog-close-icon-active: @bg-color-container-active; @@ -28,32 +30,31 @@ // 字体 @dialog-header-font: @font-title-medium; -@dialog-header-weight: 700; +@dialog-header-weight: 600; @dialog-body-text-font: @font-body-medium; // 尺寸 @dialog-width: 480px; -@dialog-header-height: 50px; -@dialog-header-height-fullscreen: 56px; -@dialog-icon-size: 24px; -@dialog-close-icon-size: 20px; -@dialog-footer-height-fullscreen: 80px; +@dialog-header-height-fullscreen: @comp-size-xxxl; +@dialog-icon-size: @comp-size-s; +@dialog-close-icon-size: @comp-size-xs; +@dialog-footer-height-fullscreen: @comp-size-xxxxl; // 间距 -@dialog-spacer: @spacer-4; -@dialog-default-spacer: 28px @spacer-4 @spacer-4 @spacer-4; -@dialog-primary-spacer: @dialog-spacer; -@dialog-parimary-body-spacer: @dialog-spacer 28px @dialog-spacer 28px; +@dialog-spacer: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@dialog-default-spacer: @comp-paddingTB-xxl @comp-paddingLR-xxl; @dialog-default-padding: @dialog-spacer; -@dialog-header-icon-margin-right: @spacer; -@dialog-header-content-padding-fullscreen: 0 56px; -@dialog-body-padding: @spacer-2 0 0; -@dialog-body-padding-fullscreen: 24px 32px 0; -@dialog-body-icon-padding: @spacer-2 0 @spacer-3 @spacer-4; -@dialog-footer-button-margin-left: @spacer; -@dialog-footer-padding: @spacer-2 0 0; -@dialog-footer-padding-fullscreen: 16px 32px 32px; -@dialog-word-spacing: -6px; +@dialog-header-icon-margin-right: @comp-margin-s; +@dialog-header-icon-margin-top: @size-1; +@dialog-header-content-margin-right: @comp-margin-s; +@dialog-header-padding-fullscreen: 0 @comp-paddingLR-xxl; +@dialog-closebtn-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; +@dialog-body-padding: @comp-paddingTB-l 0; +@dialog-body-padding-fullscreen: @comp-paddingTB-xl @comp-paddingLR-xxl; +@dialog-body-icon-padding: @comp-paddingTB-l 0; +@dialog-footer-button-margin-left: @comp-margin-s; +@dialog-footer-padding: @comp-paddingTB-l 0 0; +@dialog-footer-padding-fullscreen: 0 @comp-paddingLR-xxl @comp-paddingTB-xxl; // 边框 @dialog-border: 1px solid @border-level-1-color; diff --git a/style/web/theme/_size.less b/style/web/theme/_size.less index 9538258aa8..201dab4ff3 100644 --- a/style/web/theme/_size.less +++ b/style/web/theme/_size.less @@ -18,6 +18,7 @@ --td-size-16: 72px; //全局 component 组件尺寸高度相关 token + --td-comp-size-xxs: var(--td-size-6); --td-comp-size-xs: var(--td-size-7); --td-comp-size-s: var(--td-size-8); --td-comp-size-m: var(--td-size-10); @@ -25,6 +26,8 @@ --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); + --td-comp-size-xxxxl: var(--td-size-15); + --td-comp-size-xxxxxl: var(--td-size-16); //全局 popup 弹出层整体边距 token --td-pop-padding-s: var(--td-size-2); @@ -34,6 +37,7 @@ --td-pop-padding-xxl: var(--td-size-6); //全局 component 组件左右边距 token + --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); @@ -51,11 +55,13 @@ --td-comp-paddingTB-xxl: var(--td-size-10); //全局 component 组件间距 token + --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); - --td-comp-margin-xxxl: var(--td-size-12); + --td-comp-margin-xxxl: var(--td-size-10); + --td-comp-margin-xxxxl: var(--td-size-12); } From 860bcf68cc793428597f291092d18a74b5fc9daf Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 9 Nov 2022 17:28:33 +0800 Subject: [PATCH 022/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20tree-selec?= =?UTF-8?q?t=20=E6=B5=AE=E5=B1=82=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#?= =?UTF-8?q?984)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/tree-select/_index.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/style/web/components/tree-select/_index.less b/style/web/components/tree-select/_index.less index f544ea96d8..93772ab9cd 100644 --- a/style/web/components/tree-select/_index.less +++ b/style/web/components/tree-select/_index.less @@ -31,3 +31,10 @@ color: @text-color-placeholder; } } + +// 浮层样式 +.@{prefix}-tree-select-popup { + .@{prefix}-popup__content { + padding: @pop-padding-m; + } +} From 9f4b754ddcb9c11300b326ab373e70a86c3c9a02 Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 9 Nov 2022 17:28:52 +0800 Subject: [PATCH 023/312] feat: message size token (#983) --- style/web/_variables.less | 2 +- style/web/components/message/_index.less | 2 +- style/web/components/message/_var.less | 17 +++++++---------- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/style/web/_variables.less b/style/web/_variables.less index 3367488d29..236b4353b1 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -206,7 +206,7 @@ @size-16: var(--td-size-16); // component 组件尺寸高度相关 token -@comp-size-xxs: var(--td-size-xxs); +@comp-size-xxs: var(--td-comp-size-xxs); @comp-size-xs: var(--td-comp-size-xs); @comp-size-s: var(--td-comp-size-s); @comp-size-m: var(--td-comp-size-m); diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less index bb0f4dbf9c..087ccaf05e 100644 --- a/style/web/components/message/_index.less +++ b/style/web/components/message/_index.less @@ -51,7 +51,7 @@ color: @msg-close-icon-color; .t-icon-close { - font-size: @msg-close-font-size; + font-size: @msg-close-size; border-radius: @border-radius-default; transition: all @anim-duration-base linear; diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less index c6051d8772..53001de346 100644 --- a/style/web/components/message/_var.less +++ b/style/web/components/message/_var.less @@ -23,11 +23,9 @@ @msg-close-bg-color-hover: @bg-color-container-hover; @msg-close-bg-color-active: @bg-color-container-active; -// 位置 -@msg-icon-position-right: @spacer-4; - // 尺寸 -@msg-icon-size: @font-size-xl; +@msg-icon-size: @comp-size-xs; +@msg-close-size: @comp-size-xxs; @msg-border-width: 1px; // 圆角 @@ -38,14 +36,13 @@ //字号 @msg-font-default: @font-body-medium; -@msg-close-font-size: @font-size-l; // 间距 -@msg-padding-horizontal-default: @spacer-2; -@msg-padding-vertical-default: 13px; -@msg-icon-margin-right: @spacer; -@msg-close-icon-margin-left: @spacer-3; -@msg-list-margin-bottom: @spacer-1; +@msg-padding-horizontal-default: @comp-paddingLR-l; +@msg-padding-vertical-default: @comp-paddingTB-m; +@msg-icon-margin-right: @comp-margin-s; +@msg-close-icon-margin-left: @comp-margin-xxl; +@msg-list-margin-bottom: @comp-margin-s; // Angular Icon 组件会多一层容器，这层容器用 [data-t-icon] 命中 @msg-icon-selector: ~"> .t-icon, > [data-@{prefix}-icon] > .t-icon, .@{prefix}-loading"; From 503d4ff3c98995b6d1bd47ee034b0b589594b1a6 Mon Sep 17 00:00:00 2001 From: Shine <791405318@qq.com> Date: Thu, 10 Nov 2022 11:21:16 +0800 Subject: [PATCH 024/312] docs(button): update button demo (#986) * style(mobile/message): update style * docs: update button demo docs Co-authored-by: anlyyao --- docs/mobile/api/button.md | 54 ++++++++------------------------------- 1 file changed, 11 insertions(+), 43 deletions(-) diff --git a/docs/mobile/api/button.md b/docs/mobile/api/button.md index ac17740a95..f2d5726530 100644 --- a/docs/mobile/api/button.md +++ b/docs/mobile/api/button.md @@ -6,64 +6,32 @@ isComponent: true toc: false --- -### 基础按钮 +### 类型 -基础类型分为主按钮、次按钮、文字按钮。 +#### 基础按钮 -#### 次按钮 +##### 次按钮 使用场景：在用户进行的操作为流程中的辅助操作，或者进行不那么重要的交互行为时，选择用次按钮；次要按钮通常和主要按钮一起出现 -#### 主按钮 +##### 主按钮 使用场景：大部分场景都可以使用，例如反馈页、表单页、对话框，一个页面建议最多只出现一个主按钮； -#### 文字按钮 +##### 文字按钮 使用场景：它的操作通常和其旁边内容相关，通常出现在标题旁、字段旁、列表最下方 {{ base }} -### 图标按钮 +### 状态 -图标按钮分为图标加文字形式、纯图标形式 +#### 按钮禁用态 -使用场景：希望增加按钮识别性，图标表意需贴合文字内容；纯icon图标建议只使用已有一定认知共识的操作上 +{{ status }} -{{ icon }} +### 规格 -### 置底按钮 +#### 按钮尺寸 -图标按钮可以分为单按钮形式，主次组合按钮形式，多个文字按钮组合形式 - -使用场景：用于用户在浏览过程中可随时触发的操作，常见于长信息、表单页 - -{{ bottom }} - -### 组件样式 - -### 尺寸 - -提供大、中、小 3 种不同大小按钮 - -{{ size }} - -### 形状 - -提供小、无、大 3 种不同的圆角 - -{{ shape }} - -### 组件使用 - -### 使用规范 - -（1）主按钮通常单独使用，是页面里的最主要的视觉焦点，在一个页面中，建议最多只出现一个主按钮 - -（2）纯 icon 图标建议只使用已有一定认知共识的操作上 - -### 正确/错误范例 - -（1）用户在使用主要按钮次要按钮，需要表达主次关系，不建议同时使用多个主按钮 - -{{ test }} +{{ size }} \ No newline at end of file From 1c4ae7888a90f1f02703d6d581c1f367824c4727 Mon Sep 17 00:00:00 2001 From: xxxlj <39047758+xxxlj@users.noreply.github.com> Date: Thu, 10 Nov 2022 11:21:40 +0800 Subject: [PATCH 025/312] feat(progress): update progress docs and demo (#975) --- docs/mobile/api/progress.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api/progress.md b/docs/mobile/api/progress.md index 45dceb92be..67fcffb4f9 100644 --- a/docs/mobile/api/progress.md +++ b/docs/mobile/api/progress.md @@ -16,12 +16,18 @@ toc: false 相比基础进度条更轻量，一般用于任务提示较短的场景 -{{ text }} +{{ noText }} -### 颜色 +### 自定义样式 -{{ color }} +{{ custom }} + +### 自定义线宽 + +{{ strokeWidth }} + +### 状态 + +{{ status }} -### 自定义样式 -{{ type }} From d2649716548213c93980fd31862b5036f37bf573 Mon Sep 17 00:00:00 2001 From: WenKang Date: Thu, 10 Nov 2022 11:28:55 +0800 Subject: [PATCH 026/312] feat: adjust size token for basic/nav/message type components (#987) * feat: replace margin padding with size token * feat: alert * feat: popconfirm notication message size token Co-authored-by: Uyarn --- style/web/_variables.less | 11 +- style/web/components/alert/_index.less | 18 ++- style/web/components/alert/_var.less | 29 ++-- style/web/components/anchor/_index.less | 14 +- style/web/components/anchor/_var.less | 32 ++--- style/web/components/breadcrumb/_index.less | 8 +- style/web/components/breadcrumb/_var.less | 4 +- style/web/components/button/_var.less | 4 +- style/web/components/dialog/_var.less | 4 +- style/web/components/divider/_var.less | 4 +- style/web/components/dropdown-new/_index.less | 13 +- style/web/components/dropdown-new/_var.less | 12 +- style/web/components/dropdown/_index.less | 99 ------------- style/web/components/dropdown/_mixin.less | 0 style/web/components/dropdown/_var.less | 22 --- style/web/components/dropdown/index.html | 132 ------------------ style/web/components/form/_index.less | 2 +- style/web/components/layout/_var.less | 7 +- style/web/components/link/_var.less | 10 +- style/web/components/message/_var.less | 4 +- style/web/components/notification/_index.less | 5 - style/web/components/notification/_var.less | 20 ++- style/web/components/popconfirm/_index.less | 6 +- style/web/components/popconfirm/_var.less | 23 +-- style/web/components/swiper/_mixin.less | 2 +- style/web/theme/_size.less | 7 +- 26 files changed, 116 insertions(+), 376 deletions(-) delete mode 100644 style/web/components/dropdown/_index.less delete mode 100644 style/web/components/dropdown/_mixin.less delete mode 100644 style/web/components/dropdown/_var.less delete mode 100644 style/web/components/dropdown/index.html diff --git a/style/web/_variables.less b/style/web/_variables.less index 236b4353b1..34ff1a53a4 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -206,6 +206,7 @@ @size-16: var(--td-size-16); // component 组件尺寸高度相关 token +@comp-size-xxxs: var(--td-comp-size-xxxs); @comp-size-xxs: var(--td-comp-size-xxs); @comp-size-xs: var(--td-comp-size-xs); @comp-size-s: var(--td-comp-size-s); @@ -269,11 +270,11 @@ @spacer-9: @spacer * 9; // 间距-大-48 @spacer-10: @spacer * 10; // 间距-大-80 -@text-line-height-s: 20px; -@text-line-height-base: 22px; -@text-line-height-l: 24px; -@text-line-height-xl: 28px; -@text-line-height-xxl: 44px; +@text-line-height-s: var(--td-line-height-body-small); +@text-line-height-base: var(--td-line-height-body-medium); +@text-line-height-l: var(--td-line-height-body-large); +@text-line-height-xl: var(--td-line-height-title-large); +@text-line-height-xxl: var(--td-line-height-headline-large); // Font @font-size: 10px; diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less index 0ddde28c58..65cc328dfc 100644 --- a/style/web/components/alert/_index.less +++ b/style/web/components/alert/_index.less @@ -13,6 +13,7 @@ .reset; display: flex; + align-items: flex-start; padding: @alert-padding; opacity: 1; transition: opacity .2s; @@ -93,6 +94,7 @@ } .@{prefix}-alert__icon { + padding: @alert-icon-padding; font-size: @alert-icon-size; display: inherit; } @@ -105,7 +107,7 @@ .@{prefix}-alert__content { flex: 1 1 0; - font: @font-body-medium; + font: @alert-font-size; overflow: hidden; } @@ -120,7 +122,7 @@ font-weight: bold; + .@{prefix}-alert__message { - margin-top: @spacer; + margin-top: @alert-description-margin-top; } } @@ -132,7 +134,7 @@ .@{prefix}-alert__operation { flex: 0 0 auto; - padding: 0 @spacer; + padding: @alert-operation-padding; color: @brand-color; cursor: pointer; transition: color @anim-duration-base; @@ -147,17 +149,21 @@ } .@{prefix}-alert__icon + .@{prefix}-alert__content { - margin-left: 10px; + margin-left: @alert-margin-left; } .@{prefix}-alert__collapse { - margin-top: 12px; + margin-top: @alert-collapse-margin-top; color: @brand-color; cursor: pointer; } .@{prefix}-alert__close { - font-size: @font-size-base; + display: inline-flex; + align-items: center; + margin-left: @alert-close-margin-left; + font-size: @alert-close-size; color: @alert-close-color; + padding: @alert-close-padding; cursor: pointer; } diff --git a/style/web/components/alert/_var.less b/style/web/components/alert/_var.less index bdadbf5a2d..07d3cce9ed 100644 --- a/style/web/components/alert/_var.less +++ b/style/web/components/alert/_var.less @@ -12,10 +12,10 @@ // 如：@button-line-height-s // color -@alert-success-bg-color: @success-color-2; +@alert-success-bg-color: @success-color-focus; @alert-info-bg-color: @brand-color-focus; -@alert-warning-bg-color: @warning-color-2; -@alert-error-bg-color: @error-color-2; +@alert-warning-bg-color: @warning-color-focus; +@alert-error-bg-color: @error-color-focus; @alert-title-color: @text-color-primary; @alert-description-color: @text-color-secondary; @@ -26,18 +26,27 @@ @alert-close-color: @text-color-secondary; -@alert-success-trigger-color: @success-color-2; +@alert-success-trigger-color: @success-color-focus; @alert-info-trigger-color: @brand-color; -@alert-warning-trigger-color: @warning-color-2; -@alert-error-trigger-color: @error-color-2; +@alert-warning-trigger-color: @warning-color-focus; +@alert-error-trigger-color: @error-color-focus; @alert-success-trigger-active-color: @success-color; @alert-info-trigger-active-color: @brand-color; @alert-warning-trigger-active-color: @warning-color; @alert-error-trigger-active-color: @error-color; -// 间距 -@alert-padding: 14px 24px; - // size -@alert-icon-size: 20px; +@alert-font-size: @font-body-medium; +@alert-icon-size: calc(@font-size-base + 6px); +@alert-close-size: calc(@font-size-base + 2px); + +// 间距 +@alert-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@alert-operation-padding: 0 @comp-paddingLR-s; +@alert-margin-left: @comp-margin-s; +@alert-close-margin-left: @comp-margin-l; +@alert-icon-padding: calc((@text-line-height-base - @alert-icon-size) / 2 ) 0; +@alert-close-padding: calc((@text-line-height-base - @alert-close-size) / 2 ) 0; +@alert-description-margin-top: @comp-margin-s; +@alert-collapse-margin-top: @comp-margin-m; diff --git a/style/web/components/anchor/_index.less b/style/web/components/anchor/_index.less index e64b1f53c2..3a6a882c15 100644 --- a/style/web/components/anchor/_index.less +++ b/style/web/components/anchor/_index.less @@ -13,7 +13,7 @@ background: @anchor-bg-color; width: @anchor-width-default; color: @anchor-text-color-default; - font-size: @anchor-font-size; + font: @anchor-font; //锚点 item 被选中 .@{prefix}-is-active > a { @@ -63,19 +63,14 @@ &__item-link { display: inline-block; position: relative; - line-height: @anchor-item-line-height; - max-height: @anchor-item-max-height; overflow: hidden; word-break: break-all; color: @anchor-text-color-default; text-decoration: none; text-align: justify; - margin-right: -4px; - padding-right: 10px; } a { - line-height: @anchor-item-height; transition: color @anim-duration-base linear; } @@ -99,8 +94,7 @@ .@{prefix}-anchor__target { cursor: pointer; - font-size: @anchor-font-size; - line-height: @anchor-item-height; + font: @anchor-font; color: @anchor-text-color-default; @keyframes fadeOut { @@ -126,8 +120,8 @@ display: inline-block; } - //激活锚点 滚动到指定锚点 标题后边出现定位提示 - //target属性参考文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target + // 激活锚点 滚动到指定锚点 标题后边出现定位提示 + //target属性参考文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target &:target::after { display: inline-block; content: ""; diff --git a/style/web/components/anchor/_var.less b/style/web/components/anchor/_var.less index 3d07063609..a47ffe33f0 100644 --- a/style/web/components/anchor/_var.less +++ b/style/web/components/anchor/_var.less @@ -1,41 +1,27 @@ //颜色 @anchor-text-color-default: @text-color-primary; @anchor-text-color-hover: @brand-color; -@anchor-text-color-current: @brand-color; -// 被选中的字体、左侧竖线色值 +@anchor-text-color-current: @brand-color; // 被选中的字体、左侧竖线色值 @anchor-text-color-active: @brand-color-active; @anchor-bg-color: @bg-color-container; -// anchor左侧竖线颜色 -@anchor-border-color: @component-stroke; - -// 位置 -// 固定模式时的top值 -@anchor-affix-top: 20px; +@anchor-border-color: @component-stroke; // anchor左侧竖线颜色 // 尺寸 @anchor-width-s: 120px; @anchor-width-default: 200px; @anchor-width-l: 320px; -@anchor-item-height: 24px; -// 锚点最大高度，可折行，最大3行 -@anchor-item-max-height: (@anchor-item-height * 3); -@anchor-item-line-height: 22px; -// 选中竖线的宽度 -@anchor-point-width: 1px; -// 选中竖线的高度 -@anchor-point-height: 22px; +@anchor-point-width: 1px; // 选中竖线的宽度 @anchor-target-width: 6px; -//字号 -@anchor-font-size: @font-size-base; +// 字体 +@anchor-font: @font-body-medium; // 间距 -// 一级锚点padding -@anchor-item-padding: 0 @spacer-1 0 @spacer-2; -// 二级锚点padding -@anchor-sub-item-padding: 0 @spacer-1 0 @spacer-2; +@anchor-item-padding: @comp-paddingTB-xxs @comp-paddingTB-l; // 一级锚点padding + +@anchor-sub-item-padding: @comp-paddingTB-xxs @comp-paddingTB-l; // 二级锚点padding -@anchor-target-copy-margin: 0 0 0 4px; +@anchor-target-copy-margin: 0 0 0 @comp-margin-xs; // 动画 @anchor-point-transition: all @anim-duration-base diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less index d7abb87ce5..ac4469040e 100644 --- a/style/web/components/breadcrumb/_index.less +++ b/style/web/components/breadcrumb/_index.less @@ -11,7 +11,7 @@ .breadcrumb; &__separator { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; display: flex; align-items: center; } @@ -70,7 +70,7 @@ //箭头型 &--arrow { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; line-height: 0; color: @breadcrumb-icon-arrow-color-default; .v-inlineblock; @@ -78,7 +78,7 @@ //斜杠型 &--slash { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; line-height: 0; color: @breadcrumb-icon-slash-color-default; .v-inlineblock; @@ -91,7 +91,7 @@ .v-inlineblock; .t-icon { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; } } diff --git a/style/web/components/breadcrumb/_var.less b/style/web/components/breadcrumb/_var.less index 755fc4a917..0b5457a05c 100644 --- a/style/web/components/breadcrumb/_var.less +++ b/style/web/components/breadcrumb/_var.less @@ -31,8 +31,8 @@ @breadcrumb-option-box-bg: @bg-color-container; //间距 -@breadcrumb-spacer-half: (@spacer * .5); -@breadcrumb-content-icon-margin-bottom: 2px; +@breadcrumb-separator-margin: 0 @comp-margin-xs; +@breadcrumb-content-icon-margin-bottom: @comp-margin-xxs; // 尺寸 @breadcrumb-icon-size: @font-size-l; diff --git a/style/web/components/button/_var.less b/style/web/components/button/_var.less index 9023a1ef39..7111ff234e 100644 --- a/style/web/components/button/_var.less +++ b/style/web/components/button/_var.less @@ -1,7 +1,7 @@ // 尺寸 -@btn-height-s: @comp-size-s; +@btn-height-s: @comp-size-xs; @btn-height-default: @comp-size-m; -@btn-height-l: @comp-size-l; +@btn-height-l: @comp-size-xl; // 圆角 @btn-border-radius: @border-radius-default; diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less index 13a17ee4b3..6b269cb308 100644 --- a/style/web/components/dialog/_var.less +++ b/style/web/components/dialog/_var.less @@ -36,8 +36,8 @@ // 尺寸 @dialog-width: 480px; @dialog-header-height-fullscreen: @comp-size-xxxl; -@dialog-icon-size: @comp-size-s; -@dialog-close-icon-size: @comp-size-xs; +@dialog-icon-size: calc(@font-size-l + 8px); +@dialog-close-icon-size: calc(@font-size-l + 4px); @dialog-footer-height-fullscreen: @comp-size-xxxxl; // 间距 diff --git a/style/web/components/divider/_var.less b/style/web/components/divider/_var.less index ddf7b12442..bad74c6f98 100644 --- a/style/web/components/divider/_var.less +++ b/style/web/components/divider/_var.less @@ -19,8 +19,8 @@ @divider-font: @font-body-medium; // 间距 -@divider-horizontal-margin: @spacer-3 0; -@divider-vertical-margin: 0 (@spacer * 1.5); +@divider-horizontal-margin: @comp-margin-xxl 0; +@divider-vertical-margin: 0 @comp-margin-m; @divider-inner-text-padding: 0 1em; // 尺寸 diff --git a/style/web/components/dropdown-new/_index.less b/style/web/components/dropdown-new/_index.less index 3c43a26481..d6153bf46f 100644 --- a/style/web/components/dropdown-new/_index.less +++ b/style/web/components/dropdown-new/_index.less @@ -34,12 +34,12 @@ .@{prefix}-divider { margin: @dropdown-item-divider-margin; color: @dropdown-active-bg-color; - width: calc(100% - @spacer-2); + width: calc(100% - @dropdown-item-divider-horizon-margin * 2); } &--right { .@{prefix}-dropdown__item-direction { - margin: 0 0 0 @spacer; + margin: 0 0 0 @comp-margin-s; } } @@ -53,7 +53,7 @@ } .@{prefix}-dropdown__item-direction { - margin: 0 @spacer 0 0; + margin: 0 @comp-margin-s 0 0; } } } @@ -83,7 +83,7 @@ left: calc(100% - 6px); .@{prefix}-dropdown__item-direction { - margin: 0 0 0 @spacer; + margin: 0 0 0 @comp-margin-s; } } @@ -99,7 +99,7 @@ } .@{prefix}-dropdown__item-direction { - margin: 0 @spacer 0 0; + margin: 0 @comp-margin-s 0 0; } } } @@ -114,12 +114,13 @@ white-space: nowrap; display: flex; align-items: center; + height: @dropdown-item-height; padding: @dropdown-item-padding; &-icon { display: flex; color: currentcolor; - margin-right: @spacer; + margin-right: @comp-margin-s; font-size: @dropdown-text-icon-size; } diff --git a/style/web/components/dropdown-new/_var.less b/style/web/components/dropdown-new/_var.less index da665125b8..da4e245106 100644 --- a/style/web/components/dropdown-new/_var.less +++ b/style/web/components/dropdown-new/_var.less @@ -16,12 +16,16 @@ @dropdown-theme-success-bg-color: @success-color-light; @dropdown-theme-warning-color: @warning-color; @dropdown-theme-warning-bg-color: @warning-color-light; + // border @dropdown-border: .5px solid @component-border; +// height +@dropdown-item-height: @comp-size-s; + // padding -@dropdown-item-padding: 3px @spacer; -@dropdown-item-margin: 2px 6px; -@dropdown-item-divider-margin: @spacer*.5 auto 2px; +@dropdown-item-padding: 0 @comp-paddingLR-s; +@dropdown-item-divider-horizon-margin: @comp-margin-s; +@dropdown-item-divider-margin: @comp-margin-xs @dropdown-item-divider-horizon-margin @comp-margin-xxs @dropdown-item-divider-horizon-margin; +@dropdown-menu-padding: @pop-padding-m; @dropdown-menu-gap: 2px; -@dropdown-menu-padding: 6px; diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less deleted file mode 100644 index d881aefa8a..0000000000 --- a/style/web/components/dropdown/_index.less +++ /dev/null @@ -1,99 +0,0 @@ -// 组件允许单个组件打包，因此默认引入公共基础样式 - -@import "../../base.less"; - -@import "./_var.less"; - -@import "./_mixin.less"; - -@import "../../mixins/_reset.less"; - -.@{prefix}-dropdown { - .reset; - - .@{prefix}-popup__content { - background-color: @dropdown-bg-color; - position: relative; - padding: 0; - } - - &__menu { - display: flex; - justify-content: flex-start; - - &-column { - font-size: @dropdown-text-font-size; - color: @dropdown-text-color; - text-align: left; - overflow-y: auto; - - &:not(:first-child) { - border-left: @dropdown-border; - } - } - - .@{prefix}-divider { - margin: @dropdown-item-divider-margin; - } - } - - &__item { - position: relative; - display: flex; - align-items: center; - cursor: pointer; - border-radius: @border-radius-default; - color: @dropdown-text-color; - padding: @dropdown-item-padding; - margin: @dropdown-item-margin; - transition: background-color @anim-duration-base @anim-time-fn-ease-in; - - &:first-child, - &:last-child { - margin: @dropdown-item-ends-margin; - } - - &:hover { - background-color: @dropdown-hover-bg-color; - } - - &.@{prefix}-is-active { - color: @dropdown-active-color; - background-color: @dropdown-active-bg-color; - } - - &.@{prefix}-is-disabled { - color: @dropdown-disable-color; - cursor: not-allowed; - } - - &-content { - display: flex; - flex: 1; - align-items: center; - max-width: 100%; - } - - &-text { - font: @dropdown-item-text-font; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.@{prefix}-dropdown--suffix { - .@{prefix}-dropdown__item-content { - max-width: calc( - 100% - @dropdown-text-icon-size - @dropdown-item-icon-margin-left - ); - } - .@{prefix}-dropdown__item-icon { - color: currentcolor; - font-size: @dropdown-text-icon-size; - margin-left: @dropdown-item-icon-margin-left; - } - } - - --ripple-color: @bg-color-container-active; - } -} diff --git a/style/web/components/dropdown/_mixin.less b/style/web/components/dropdown/_mixin.less deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/style/web/components/dropdown/_var.less b/style/web/components/dropdown/_var.less deleted file mode 100644 index f1d5917486..0000000000 --- a/style/web/components/dropdown/_var.less +++ /dev/null @@ -1,22 +0,0 @@ -// color -@dropdown-bg-color: @bg-color-container; -@dropdown-suffix-color: @text-color-placeholder; -@dropdown-active-color: @brand-color; -@dropdown-active-bg-color: @brand-color-light; -@dropdown-hover-bg-color: @bg-color-container-hover; -@dropdown-disable-color: @text-color-disabled; -@dropdown-text-color: @text-color-primary; -@dropdown-scrollbar-color: @border-level-2-color; -@dropdown-split-color: @border-level-2-color; -@dropdown-text-font-size: @font-size-base; -@dropdown-text-icon-size: @font-size-l; -// border -@dropdown-border: solid 1px @border-level-1-color; - -// padding -@dropdown-item-padding: 9px @spacer; -@dropdown-item-margin: @spacer*.5 @spacer; -@dropdown-item-icon-margin-left: @spacer; -@dropdown-item-ends-margin: @spacer; -@dropdown-item-divider-margin: @spacer*.5 0; -@dropdown-item-text-font: @font-body-medium; diff --git a/style/web/components/dropdown/index.html b/style/web/components/dropdown/index.html deleted file mode 100644 index d40948cd4f..0000000000 --- a/style/web/components/dropdown/index.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - Dropdown - - - - - - -
- - -
-

Dropdown 下拉菜单

-

开发者：terrancewan

-

创建日期：2020-07-22

-

说明：TDesign Dropdown 组件的基本样式

-
- - - - - -
-

类型

-

下拉菜单类型当前只有两种：单层级类型和多层级类型。

- -
- - -
-

单层级类型

-
-
-
操作一
-
操作二
-
-
额外操作三
-
-
-
- -
-

多层级类型

-
-
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
-
-
二级操作
-
二级操作
-
-
-
- - - -
-
- - -
-

状态

-

下拉菜单的状态有normal态、hover态、active态、disable态。

- -
- - - - -
-
-
-
normal态
-
hover态
-
normal态
-
active态
-
normal态
-
-
disable态
-
normal态
-
-
-
- - - -
-
- - -
-

大小

-

默认高度由内容指定，但不超过380px。

-
-
-
-
-
选项1
-
选项2
-
选项3
-
选项4
-
选项5
-
选项6
-
选项7
-
选项8
-
选项9
-
选项10
-
选项11
-
选项12
-
选项13
-
选项14
-
选项15
-
-
-
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/form/_index.less b/style/web/components/form/_index.less index 8e96240394..4f238fe8dd 100644 --- a/style/web/components/form/_index.less +++ b/style/web/components/form/_index.less @@ -153,7 +153,7 @@ .@{prefix}-input__extra { position: absolute; - bottom: -@form-item-help-line-height; + bottom: calc(-@form-item-help-line-height); max-width: 100%; overflow: hidden; text-overflow: ellipsis; diff --git a/style/web/components/layout/_var.less b/style/web/components/layout/_var.less index cc2c4f3b22..26d73a642b 100644 --- a/style/web/components/layout/_var.less +++ b/style/web/components/layout/_var.less @@ -24,11 +24,8 @@ @layout-footer-color: @text-color-placeholder; // 尺寸 -@layout-header-height: 64px; +@layout-header-height: @comp-size-xxxl; @layout-sider-width: 232px; -// 间距 -@layout-footer-spacer: @spacer-3; - // 动画 -@layout-sider-anim-duration: .22s; +@layout-sider-anim-duration: @anim-duration-base; diff --git a/style/web/components/link/_var.less b/style/web/components/link/_var.less index 4b13672c75..2ad4c6b70f 100644 --- a/style/web/components/link/_var.less +++ b/style/web/components/link/_var.less @@ -3,13 +3,13 @@ @link-font-default: @font-link-medium; @link-font-l: @font-link-large; -@link-icon-margin-s: @spacer-s; -@link-icon-margin-default: @spacer-1; -@link-icon-margin-l: @spacer-l; +@link-icon-margin-s: @comp-margin-xs; +@link-icon-margin-default: @comp-margin-s; +@link-icon-margin-l: @comp-margin-m; // 按钮中icon和文字的间距 -@link-icon-text-margin-left: @spacer-s; -@link-icon-text-margin-right: @spacer-s; +@link-icon-text-margin-left: @comp-margin-xs; +@link-icon-text-margin-right: @comp-margin-xs; @link-color-default: @text-color-primary; @link-color-default-hover: @brand-color-hover; diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less index 53001de346..d9b579dab4 100644 --- a/style/web/components/message/_var.less +++ b/style/web/components/message/_var.less @@ -24,8 +24,8 @@ @msg-close-bg-color-active: @bg-color-container-active; // 尺寸 -@msg-icon-size: @comp-size-xs; -@msg-close-size: @comp-size-xxs; +@msg-icon-size: calc(@font-size-base + 6px); +@msg-close-size: calc(@font-size-base + 2px); @msg-border-width: 1px; // 圆角 diff --git a/style/web/components/notification/_index.less b/style/web/components/notification/_index.less index 3bd601cbb8..c67f0bc8fa 100644 --- a/style/web/components/notification/_index.less +++ b/style/web/components/notification/_index.less @@ -73,7 +73,6 @@ margin-top: @notification-content-margin-top; max-height: @notification-content-max-height; overflow: hidden; - padding-right: @notification-content-padding-right; text-overflow: ellipsis; word-break: break-all; // 需要排查兼容性 @@ -94,21 +93,17 @@ } &__detail-item { - padding: @notification-detail-item-padding; - color: @notification-detail-item-color; cursor: pointer; } &__detail-item:hover { color: @notification-detail-item-color-hover; background: @notification-detail-item-bg-color-hover; - border-radius: @notification-detail-item-border-radius; } &__detail-item:active { color: @notification-detail-item-color-active; background: @notification-detail-item-bg-color-active; - border-radius: @notification-detail-item-border-radius; } &__detail-item + &__detail-item { diff --git a/style/web/components/notification/_var.less b/style/web/components/notification/_var.less index 531a9a872f..ccb8fac709 100644 --- a/style/web/components/notification/_var.less +++ b/style/web/components/notification/_var.less @@ -30,9 +30,11 @@ @notification-close-bg-color-active: @bg-color-container-active; // 尺寸 -@notification-width-default: 400px; +@notification-width-default: 360px; @notification-content-max-height: 66px; -@notification-icon-width: @icon-l; +@notification-icon-width: calc(@font-size-l + 8px); +@notification-icon-font-size: calc(@font-size-l + 8px); +@notification-icon-close-font-size: @font-size-l; // 圆角 @notification-detail-item-border-radius: @border-radius-medium; @@ -45,17 +47,13 @@ @notification-font: @font-body-medium; @notification-detail-font: @font-body-medium; @notification-content-font: @font-body-medium; -@notification-icon-font-size: (@font-size * 2.4); -@notification-icon-close-font-size: @font-size-l; @notification-title-font: @font-title-medium; // padding -@notification-detail-item-padding: 5px 16px; -@notification-content-padding-right: 5px; -@notification-padding-default: 20px @spacer-3 @spacer-3 @spacer-3; +@notification-padding-default: @comp-paddingTB-l @comp-paddingLR-l; //margin -@notification-detail-margin-top: 21px; -@notification-content-margin-top: @spacer; -@notification-icon-margin-right: @spacer; -@notification-detail-item-margin-left: @spacer; +@notification-detail-margin-top: @comp-margin-l; +@notification-content-margin-top: @comp-margin-s; +@notification-icon-margin-right: @comp-margin-s; +@notification-detail-item-margin-left: @comp-margin-s; diff --git a/style/web/components/popconfirm/_index.less b/style/web/components/popconfirm/_index.less index 222967510d..518e6d9c23 100644 --- a/style/web/components/popconfirm/_index.less +++ b/style/web/components/popconfirm/_index.less @@ -31,13 +31,14 @@ > .t-icon { display: inline-block; - margin: @popconfirm-icon-margin; + margin-right: @popconfirm-icon-margin-right; + padding: @popconfirm-icon-padding; font-size: @popconfirm-icon-size; } } &__confirm { - margin-left: 8px; + margin-left: @popconfirm-confirm-margin-right; } &__inner { @@ -46,7 +47,6 @@ max-width: @popconfirm-max-width; font: @font-title-small; color: @text-color-primary; - margin-right: @popconfirm-title-margin-right; } &__icon--warning { diff --git a/style/web/components/popconfirm/_var.less b/style/web/components/popconfirm/_var.less index 63c82e50ba..49a08aedc4 100644 --- a/style/web/components/popconfirm/_var.less +++ b/style/web/components/popconfirm/_var.less @@ -13,26 +13,23 @@ @popconfirm-cls: ~"@{prefix}-popconfirm"; -@popconfirm-spacer: @spacer; +@popconfirm-spacer: @comp-margin-s; // popconfirm @popconfirm-shadow1: 0 10px 10px -5px rgba(0, 0, 0, .04); @popconfirm-shadow2: 0 12px 26px 5px rgba(0, 0, 0, .1); -@popconfirm-padding: @spacer-2; +@popconfirm-padding: @comp-paddingTB-l @comp-paddingLR-l; @popconfirm-position: relative; // TODO: position 最后应该是absolute // TODO: 建议设置最大宽度 -@popconfirm-max-width: 300px; - -// popconfirm title -@popconfirm-title-margin-right: @popconfirm-spacer; +@popconfirm-max-width: 320px; // popconfirm buttons -@popconfirm-buttons-margin-top: 16px; -@popconfirm-button-margin: 8px; +@popconfirm-buttons-margin-top: @comp-margin-l; +@popconfirm-button-margin: @popconfirm-spacer; // 小三角 -@popconfirm-arrow-margin: @spacer-3; +@popconfirm-arrow-margin: @comp-margin-xxl; @popconfirm-arrow-absolute-offset: -4px; @popconfirm-arrow-border-width: 4px; @popconfirm-arrow-size: (@popconfirm-arrow-border-width * 2); @@ -47,9 +44,13 @@ @popconfirm-arrow-right-shadow: -2px 2px 5px rgba(0, 0, 0, .06); // 间距 -@popconfirm-icon-margin: 1px @spacer 1px 0; +@popconfirm-icon-margin-right: @comp-margin-s; +@popconfirm-icon-padding: calc((@text-line-height-base - @popconfirm-icon-size) / 2) 0; +@popconfirm-confirm-margin-right: @comp-margin-s; + // 尺寸 -@popconfirm-icon-size: @font-size-xl; +@popconfirm-icon-size: calc(@font-size-base + 6px); + // 圆角 @popconfirm-border-radius: @border-radius-medium; diff --git a/style/web/components/swiper/_mixin.less b/style/web/components/swiper/_mixin.less index 7e220f4d40..1c4b6e7209 100644 --- a/style/web/components/swiper/_mixin.less +++ b/style/web/components/swiper/_mixin.less @@ -100,7 +100,7 @@ top: auto; right: auto; - bottom: -@@fractionLineHeight - 12; + bottom: calc(-@@fractionLineHeight - 12); height: @@fractionLineHeight; line-height: @@fractionLineHeight; diff --git a/style/web/theme/_size.less b/style/web/theme/_size.less index 201dab4ff3..14539a7790 100644 --- a/style/web/theme/_size.less +++ b/style/web/theme/_size.less @@ -18,9 +18,10 @@ --td-size-16: 72px; //全局 component 组件尺寸高度相关 token - --td-comp-size-xxs: var(--td-size-6); - --td-comp-size-xs: var(--td-size-7); - --td-comp-size-s: var(--td-size-8); + --td-comp-size-xxxs: var(--td-size-6); + --td-comp-size-xxs: var(--td-size-7); + --td-comp-size-xs: var(--td-size-8); + --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); From 41d6d5199a5f88072b5edfcfc3a011cef15689c1 Mon Sep 17 00:00:00 2001 From: Shine <791405318@qq.com> Date: Thu, 10 Nov 2022 14:17:16 +0800 Subject: [PATCH 027/312] refactor(navbar): refactor navbar (#955) * docs: update cascader docs * refactor(navbar): update navbar docs and style --- docs/mobile/api/cascader.md | 10 +++++++++- docs/mobile/api/navbar.md | 12 ++++++------ style/mobile/components/navbar/_index.less | 3 +++ 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/docs/mobile/api/cascader.md b/docs/mobile/api/cascader.md index 4c5de80d08..7abdbf6754 100644 --- a/docs/mobile/api/cascader.md +++ b/docs/mobile/api/cascader.md @@ -6,6 +6,14 @@ isComponent: true toc: false --- -### 基础级联选择器 +### 基础 + +#### 基本用法 {{ base }} + +### 状态 + +#### 禁用可选项 + +{{ status }} diff --git a/docs/mobile/api/navbar.md b/docs/mobile/api/navbar.md index 6a33140125..2e3e077d20 100644 --- a/docs/mobile/api/navbar.md +++ b/docs/mobile/api/navbar.md @@ -6,15 +6,15 @@ isComponent: true toc: false --- - -### 基础导航栏 +### 类型 +#### 基础导航栏 {{ base }} -### 带图标导航栏 +#### 左侧双操作导航栏 -{{ icon }} +{{ left-icon }} -### 事件反馈 +#### 右侧双操作导航栏 -{{ event }} +{{ right-icon }} diff --git a/style/mobile/components/navbar/_index.less b/style/mobile/components/navbar/_index.less index 89bf9af4c9..f5d1a6fb7c 100644 --- a/style/mobile/components/navbar/_index.less +++ b/style/mobile/components/navbar/_index.less @@ -10,6 +10,9 @@ align-items: center; justify-content: center; font-size: @navbar-font-size; + top: 0; + left: 0; + width: 100%; & .@{prefix}-icon { font-size: @navbar-icon-font-size; From 4c8db3fbde497bbf32f0ce4e83881db9fdac2132 Mon Sep 17 00:00:00 2001 From: Shine <791405318@qq.com> Date: Thu, 10 Nov 2022 16:21:26 +0800 Subject: [PATCH 028/312] docs: update cascader docs (#952) From 3f38acde585902471f676ea9098a9a3f2f001b2e Mon Sep 17 00:00:00 2001 From: omnis <39907007+aomnisz@users.noreply.github.com> Date: Thu, 10 Nov 2022 17:30:47 +0800 Subject: [PATCH 029/312] =?UTF-8?q?fix(alert):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#971)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(alert): 优化样式 * fix(alert): 优化样式 --- style/web/components/alert/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/alert/_var.less b/style/web/components/alert/_var.less index 07d3cce9ed..3cec7e8591 100644 --- a/style/web/components/alert/_var.less +++ b/style/web/components/alert/_var.less @@ -49,4 +49,4 @@ @alert-icon-padding: calc((@text-line-height-base - @alert-icon-size) / 2 ) 0; @alert-close-padding: calc((@text-line-height-base - @alert-close-size) / 2 ) 0; @alert-description-margin-top: @comp-margin-s; -@alert-collapse-margin-top: @comp-margin-m; +@alert-collapse-margin-top: @comp-margin-s; From 4abed9b92f8d7b8ba41e116f0251a320ba0beaee Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Thu, 10 Nov 2022 18:37:05 +0800 Subject: [PATCH 030/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20radio=20?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=E3=80=81=E5=9C=86=E8=A7=92=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20(#988)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 修复 radio 高度、圆角问题 * feat: 修复 radio 高度、圆角问题 * feat: 修复 select-input 间距问题 --- style/web/components/radio/_index.less | 26 ++++++++++++++++++++++ style/web/components/radio/_var.less | 5 ++++- style/web/components/tag-input/_index.less | 9 ++++---- 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/style/web/components/radio/_index.less b/style/web/components/radio/_index.less index 5375e11f8b..b7bbe01f6b 100644 --- a/style/web/components/radio/_index.less +++ b/style/web/components/radio/_index.less @@ -31,7 +31,33 @@ flex-wrap: wrap; row-gap: @spacer-s; + &.@{prefix}-size-s { + .@{radio-button--cls} { + height: @radio-outline-height-small; + } + } + + &.@{prefix}-size-m { + .@{radio-button--cls} { + height: @radio-outline-height-medium; + } + } + + &.@{prefix}-size-l { + .@{radio-button--cls} { + height: @radio-outline-height-large; + } + } + .@{radio-button--cls} { + &:first-child { + border-radius: @border-radius-default 0 0 @border-radius-default; + } + + &:last-child { + border-radius: 0 @border-radius-default @border-radius-default 0; + } + &.@{prefix}-is-checked { color: @radio-button-color-outline-checked; } diff --git a/style/web/components/radio/_var.less b/style/web/components/radio/_var.less index ca3d406ac3..bce276d041 100644 --- a/style/web/components/radio/_var.less +++ b/style/web/components/radio/_var.less @@ -52,6 +52,9 @@ @radio-dot-size: (@radio-size / 2); @radio-margin-right: (@spacer * 3); @radio-button-border-radius: @border-radius-small; +@radio-outline-height-small: 24px; +@radio-outline-height-medium: 32px; +@radio-outline-height-large: 40px; @radio-height-small: 20px; @radio-height-medium: 28px; @radio-height-large: 36px; @@ -65,7 +68,7 @@ // padding @radio-input-label-spacer: @spacer; -@radio-button-padding-small: 0px @spacer-s; +@radio-button-padding-small: 0px @spacer; @radio-button-padding-medium: @spacer-s @spacer-2; @radio-button-padding-large: @spacer @spacer-3; @radio-button-before-left: 0px; diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index c0797c4428..ef20b17ec3 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -19,12 +19,13 @@ } .@{prefix}-input { - padding-left: @spacer-s; overflow: hidden; min-height: @tag-input-height-default; + padding: @spacer-s; + height: fit-content; &.@{prefix}-size-s { - padding-left: @spacer-s * .5; + padding: @spacer-s * .5; min-height: @tag-input-height-s; } @@ -58,11 +59,11 @@ .@{prefix}-tag-input--break-line { .@{prefix}-input { - flex-wrap: nowrap; + display: block; padding-right: @spacer-3; &.@{prefix}-input--prefix > .@{prefix}-input__prefix { - display: inline-flex; + display: inline; text-align: left; } From 3a6464124bc93e9bd78e70d4f7c157b9cbc8638a Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 10 Nov 2022 19:22:51 +0800 Subject: [PATCH 031/312] fix: fix var calc error (#991) --- style/web/components/form/_index.less | 2 +- style/web/components/swiper/_mixin.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/web/components/form/_index.less b/style/web/components/form/_index.less index 4f238fe8dd..5c33d1f3d2 100644 --- a/style/web/components/form/_index.less +++ b/style/web/components/form/_index.less @@ -153,7 +153,7 @@ .@{prefix}-input__extra { position: absolute; - bottom: calc(-@form-item-help-line-height); + bottom: calc(0px - @form-item-help-line-height); max-width: 100%; overflow: hidden; text-overflow: ellipsis; diff --git a/style/web/components/swiper/_mixin.less b/style/web/components/swiper/_mixin.less index 1c4b6e7209..6aaedc7554 100644 --- a/style/web/components/swiper/_mixin.less +++ b/style/web/components/swiper/_mixin.less @@ -100,7 +100,7 @@ top: auto; right: auto; - bottom: calc(-@@fractionLineHeight - 12); + bottom: calc(0px - calc(@@fractionLineHeight + 12px)); height: @@fractionLineHeight; line-height: @@fractionLineHeight; From 18dbc7520f7565bee48045c87c4537455a0057f8 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 10 Nov 2022 19:34:01 +0800 Subject: [PATCH 032/312] feat: replace size token (#990) * feat: replace size token * feat: tree drawer guidesize token Co-authored-by: wenkang --- style/web/components/drawer/_index.less | 3 +- style/web/components/drawer/_var.less | 19 +- style/web/components/guide/_index.less | 16 +- style/web/components/guide/_var.less | 10 + style/web/components/menu/_index-v2.less | 52 +- style/web/components/menu/_index.less | 50 +- style/web/components/menu/_var.less | 8 +- style/web/components/pagination/_index.less | 2 +- style/web/components/pagination/_var.less | 16 +- style/web/components/rate/_index.less | 5 +- style/web/components/rate/_var.less | 10 +- style/web/components/steps/_index.css | 645 -------------------- style/web/components/steps/_index.less | 8 +- style/web/components/steps/_mixin.less | 21 +- style/web/components/steps/_var.less | 31 +- style/web/components/tabs/_var.less | 4 +- style/web/components/tree/_index.less | 16 +- style/web/components/tree/_var.less | 30 +- 18 files changed, 146 insertions(+), 800 deletions(-) delete mode 100644 style/web/components/steps/_index.css diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less index 2f26fe11fc..c1a70143fe 100644 --- a/style/web/components/drawer/_index.less +++ b/style/web/components/drawer/_index.less @@ -121,6 +121,8 @@ } &__header { + display: flex; + align-items: center; min-height: @drawer-header-height; padding: @drawer-header-padding; font: @drawer-header-font-size; @@ -138,7 +140,6 @@ &__footer { width: 100%; - min-height: @drawer-footer-height; padding: @drawer-footer-padding; text-align: @drawer-footer-text-align; border-top: 1px solid @drawer-border-color; diff --git a/style/web/components/drawer/_var.less b/style/web/components/drawer/_var.less index b666f93b14..99e092ee46 100644 --- a/style/web/components/drawer/_var.less +++ b/style/web/components/drawer/_var.less @@ -29,10 +29,9 @@ /** * 尺寸 */ -@drawer-icon-size: @font-size-l; -@drawer-header-height: 56px; -@drawer-footer-height: 56px; -@drawer-close-btn-size: @icon-l; +@drawer-icon-size: calc(@font-size-base + 2px); +@drawer-header-height: @comp-size-xxxl; +@drawer-close-btn-size: @comp-size-xs; @drawer-content-wrapper-size: 300px; /** @@ -51,16 +50,16 @@ /** * 间距 */ -@drawer-footer-padding: 10px @spacer-2; -@drawer-header-padding: @spacer-2 @spacer-2; -@drawer-body-padding: @spacer-2; -@drawer-footer-btn-margin-left: @spacer-1; +@drawer-footer-padding: @comp-paddingTB-l @comp-paddingLR-l; +@drawer-header-padding: 0 @comp-paddingLR-l; +@drawer-body-padding: @comp-paddingTB-l @comp-paddingLR-l; +@drawer-footer-btn-margin-left: @comp-margin-s; /** * 位置 */ -@drawer-close-btn-position-top: 16px; -@drawer-close-btn-position-right: 16px; +@drawer-close-btn-position-top: @comp-margin-s; +@drawer-close-btn-position-right: @comp-margin-s; @drawer-footer-text-align: left; /** diff --git a/style/web/components/guide/_index.less b/style/web/components/guide/_index.less index 190c6c2b7d..562209328b 100644 --- a/style/web/components/guide/_index.less +++ b/style/web/components/guide/_index.less @@ -34,7 +34,7 @@ &__highlight { z-index: @guide-highlight-z-index; - transition: .3s ease-out; + transition: @anim-duration-base @anim-time-fn-ease-out; border-radius: @border-radius-default; &--dialog { @@ -76,7 +76,7 @@ &__dialog { min-width: 320px; max-width: 500px; - padding: @spacer-3 @spacer-4 @spacer-4; + padding: @guide-dialog-padding; border-radius: @border-radius-large; background: @bg-color-container; animation: tGuideDialogFadeIn .3s ease-out; @@ -92,13 +92,13 @@ } .@{prefix}-@{componentName}__desc { - margin-top: @spacer-l; + margin-top: @guide-dialog-desc-margin-top; font: @font-body-medium; } } &__tooltip { - padding: @spacer-l @spacer; + padding: @guide-tooltip-padding; min-width: 240px; max-width: 600px; max-height: 300px; @@ -112,7 +112,7 @@ } &__desc { - margin-top: @spacer; + margin-top: @guide-tooltip-desc-margin-top; text-align: left; color: @text-color-secondary; font: @font-body-small; @@ -123,7 +123,7 @@ align-items: center; button { - margin-right: @spacer; + margin-right: @guide-action-margin-right; } button:last-child { @@ -136,7 +136,7 @@ align-items: center; &--popup { - margin-top: @spacer-2; + margin-top: @guide-footer-popup-margin-top; } &--dialog { @@ -152,7 +152,7 @@ } &__counter { - color: @font-gray-3; + color: @text-color-placeholder; text-align: left; font: @font-body-small; flex: 1; diff --git a/style/web/components/guide/_var.less b/style/web/components/guide/_var.less index 2fd54c1fb4..c71d2f045e 100644 --- a/style/web/components/guide/_var.less +++ b/style/web/components/guide/_var.less @@ -2,3 +2,13 @@ @guide-overlay-z-index: @z-index-guide - 2; @guide-highlight-z-index: @z-index-guide - 1; @guide-reference-z-index: @z-index-guide; + +// margin 间距相关 +@guide-footer-popup-margin-top: @comp-margin-l; +@guide-dialog-desc-margin-top: @comp-margin-l; +@guide-tooltip-desc-margin-top: @comp-margin-s; +@guide-action-margin-right: @comp-margin-s; + +// padding 边距 +@guide-dialog-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@guide-tooltip-padding: @comp-paddingTB-m @comp-paddingLR-s; diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index 074bf94f7c..1c58c5be8f 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -33,19 +33,19 @@ a.@{prefix}-menu__item { height: 64px; li + li { - margin-left: 4px; + margin-left: @comp-margin-xs; } .@{prefix}-menu { &:first-child { - margin-left: 24px; + margin-left: @comp-margin-xxl; } } } .@{prefix}-menu__logo:not(:empty) { height: 100%; - margin-right: 32px; + margin-right: @comp-margin-xxxl; } .@{prefix}-menu { @@ -63,14 +63,14 @@ a.@{prefix}-menu__item { height: 64px; line-height: 64px; text-align: right; - margin-right: 8px; + margin-right: @comp-margin-s; overflow: hidden; } &-icon { width: 40px; height: 40px; - padding: 8px; + padding: @comp-paddingTB-s @comp-paddingLR-s; line-height: 40px; } } @@ -150,8 +150,8 @@ a.@{prefix}-menu__item { align-items: center; justify-content: flex-start; white-space: nowrap; - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; min-width: 100%; margin-left: 0; color: @head-menu-popup-item-color; @@ -159,17 +159,17 @@ a.@{prefix}-menu__item { } li + li { - margin-top: 4px; + margin-top: @comp-margin-xs; margin-left: 0; } } .@{prefix}-submenu-icon { // to remove - margin-left: 8px; + margin-left: @comp-margin-s; } .@{prefix}-fake-arrow { - margin-left: 8px; + margin-left: @comp-margin-s; } // 多层情况 @@ -183,7 +183,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { text-align: left; - padding: 0 16px; + padding: 0 @comp-paddingLR-l; justify-content: space-between; } @@ -380,7 +380,7 @@ a.@{prefix}-menu__item { } .@{prefix}-menu { - padding: 16px 8px; + padding: @comp-paddingTB-l @comp-paddingLR-s; position: relative; // overflow: hidden auto; flex: 1; @@ -404,7 +404,7 @@ a.@{prefix}-menu__item { } .@{prefix}-submenu { - margin-bottom: 4px; + margin-bottom: @comp-margin-xs; position: relative; } @@ -412,7 +412,7 @@ a.@{prefix}-menu__item { &:not(:empty) { width: 100%; position: relative; - padding: 8px 16px; + padding: @comp-paddingTB-s @comp-paddingLR-l; top: 0; left: 0; text-align: left; @@ -423,7 +423,7 @@ a.@{prefix}-menu__item { &-icon { width: 32px; height: 32px; - padding: 8px; + padding: @comp-paddingTB-s @comp-paddingLR-s; cursor: pointer; color: @menu-operations-color; box-sizing: border-box; @@ -433,7 +433,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { &.@{prefix}-is-opened { - margin: 4px 0; + margin: @comp-margin-xs 0; color: @menu-light-active-color; background-color: unset; @@ -481,7 +481,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { position: relative; - margin: 4px 0; + margin: @comp-margin-xs 0; padding: 0 10px 0 16px; height: @default-menu-item-height; line-height: @default-menu-item-height; @@ -523,7 +523,7 @@ a.@{prefix}-menu__item { background: @menu-light-active-bg; & + .@{prefix}-menu__item { - margin-top: 4px; + margin-top: @comp-margin-xs; } } } @@ -692,7 +692,7 @@ a.@{prefix}-menu__item { .t-icon + &__content, .t-icon + &__item-link { - margin-left: 8px; + margin-left: @comp-margin-s; } &--dark { @@ -789,14 +789,14 @@ a.@{prefix}-menu__item { .list-style-none(); &-wrapper { - padding: 8px; + padding: @comp-paddingTB-s @comp-paddingLR-s; height: 100%; list-style: none; margin: 0; } .@{prefix}-fake-arrow { - margin-left: 8px; + margin-left: @comp-margin-s; } &.@{prefix}-is-vertical { @@ -808,16 +808,16 @@ a.@{prefix}-menu__item { } .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; margin: 4px 0; } } &.@{prefix}-is-horizontal { .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; white-space: nowrap; } @@ -896,7 +896,7 @@ a.@{prefix}-menu__item { &__operations { &-icon { - margin-right: 16px; + margin-right: @comp-margin-l; border-radius: @border-radius-default; color: @menu-item-color--light; transition: background-color @anim-duration-moderate @anim-time-fn-easing; diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 9b94cae739..4ae95213a8 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -33,19 +33,19 @@ a.@{prefix}-menu__item { height: 64px; li + li { - margin-left: 4px; + margin-left: @comp-margin-xs; } .@{prefix}-menu { &:first-child { - margin-left: 24px; + margin-left: @comp-margin-xxl; } } } .@{prefix}-menu__logo:not(:empty) { height: 100%; - margin-right: 32px; + margin-right: @comp-margin-xxxl; } .@{prefix}-menu { @@ -63,14 +63,14 @@ a.@{prefix}-menu__item { height: 64px; line-height: 64px; text-align: right; - margin-right: 8px; + margin-right: @comp-margin-s; overflow: hidden; } &-icon { width: 40px; height: 40px; - padding: 8px; + padding: @comp-paddingTB-s @comp-paddingLR-s; line-height: 40px; box-sizing: border-box; } @@ -148,8 +148,8 @@ a.@{prefix}-menu__item { align-items: center; justify-content: flex-start; white-space: nowrap; - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; min-width: 100%; margin-left: 0; color: @head-menu-popup-item-color; @@ -164,11 +164,11 @@ a.@{prefix}-menu__item { .@{prefix}-submenu-icon { // to remove - margin-left: 8px; + margin-left: @comp-margin-s; } .@{prefix}-fake-arrow { - margin-left: 8px; + margin-left: @comp-margin-s; } // 多层情况 @@ -376,7 +376,7 @@ a.@{prefix}-menu__item { } .@{prefix}-menu { - padding: 16px 8px; + padding: @comp-paddingTB-l @comp-paddingLR-s; position: relative; // overflow: hidden auto; flex: 1; @@ -399,7 +399,7 @@ a.@{prefix}-menu__item { } .@{prefix}-submenu { - margin-bottom: 4px; + margin-bottom: @comp-margin-xs; position: relative; } @@ -407,7 +407,7 @@ a.@{prefix}-menu__item { &:not(:empty) { width: 100%; position: relative; - padding: 8px 16px; + padding: @comp-paddingTB-s @comp-paddingLR-l; top: 0; left: 0; text-align: left; @@ -418,7 +418,7 @@ a.@{prefix}-menu__item { &-icon { width: 32px; height: 32px; - padding: 8px; + padding: @comp-paddingTB-s @comp-paddingLR-s; cursor: pointer; color: @menu-operations-color; box-sizing: border-box; @@ -427,7 +427,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { &.@{prefix}-is-opened { - margin: 4px 0; + margin: @comp-margin-xs 0; color: @menu-light-active-color; background-color: unset; @@ -476,7 +476,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { position: relative; - margin: 4px 0; + margin: @comp-margin-xs 0; padding: 0 10px 0 16px; height: @default-menu-item-height; line-height: @default-menu-item-height; @@ -517,7 +517,7 @@ a.@{prefix}-menu__item { background: @menu-light-active-bg; & + .@{prefix}-menu__item { - margin-top: 4px; + margin-top: @comp-margin-xs; } } } @@ -677,7 +677,7 @@ a.@{prefix}-menu__item { .t-icon + &__content, .t-icon + &__item-link { - margin-left: 8px; + margin-left: @comp-margin-s; } &--dark { @@ -794,14 +794,14 @@ a.@{prefix}-menu__item { .list-style-none(); &-wrapper { - padding: 8px; + padding: @comp-paddingLR-s; height: 100%; list-style: none; margin: 0; } .@{prefix}-fake-arrow { - margin-left: 8px; + margin-left: @comp-margin-s; } &.@{prefix}-is-vertical { @@ -813,21 +813,21 @@ a.@{prefix}-menu__item { } .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; margin: 4px 0; } } &.@{prefix}-is-horizontal { .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; white-space: nowrap; } li + li { - margin-top: 4px; + margin-top: @comp-margin-xs; } } @@ -874,7 +874,7 @@ a.@{prefix}-menu__item { &__operations { &-icon { - margin-right: 16px; + margin-right: @comp-margin-l; border-radius: @border-radius-default; color: @menu-item-color--light; transition: background-color @anim-duration-moderate @anim-time-fn-easing; diff --git a/style/web/components/menu/_var.less b/style/web/components/menu/_var.less index 265752cbdf..62a94b68e0 100644 --- a/style/web/components/menu/_var.less +++ b/style/web/components/menu/_var.less @@ -81,13 +81,7 @@ @default-menu-item-height: 36px; // popup -@popup-item-padding-left: 16px; - -// 边距 -@menu-padding-horizontal-default: @spacer; -@menu-padding-horizontal-high: (@spacer * 1.5); - -@textarea-limited-padding: (@spacer * 4); +@popup-item-padding-left: @comp-paddingTB-l @comp-paddingLR-l; // 高度 @menu-height-default: 32px; // low diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index 644e92aa68..0188241813 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -98,7 +98,7 @@ .pagination-number--size( @pagination-height-default; @pagination-font-default; - @pagination-padding-horizontal-default; @pagination-height-default - 2; + @pagination-padding-horizontal-default; calc(@pagination-height-default - 2px); ); &:hover { diff --git a/style/web/components/pagination/_var.less b/style/web/components/pagination/_var.less index 2e93c7251f..f8c9190911 100644 --- a/style/web/components/pagination/_var.less +++ b/style/web/components/pagination/_var.less @@ -17,8 +17,8 @@ @pagination-border-radius-base: @border-radius-default; // 尺寸 -@pagination-height-s: 24px; -@pagination-height-default: 32px; +@pagination-height-s: @comp-size-xs; +@pagination-height-default: @comp-size-m; @pagination-input-width: 48px; // 字号 @@ -27,12 +27,12 @@ @pagination-btn-font-size: @font-body-large; // 间距 -@pagination-padding-horizontal-s: (@spacer / 4); -@pagination-padding-horizontal-default: (@spacer / 2); -@pagination-btn-margin: @spacer; -@pagination-jump-margin: @spacer; -@pagination-select-margin: (@spacer * 2); -@pagination-pager-margin: @spacer; +@pagination-padding-horizontal-s: @comp-paddingLR-xxs; +@pagination-padding-horizontal-default: @comp-paddingLR-xs; +@pagination-btn-margin: @comp-margin-s; +@pagination-jump-margin: @comp-margin-s; +@pagination-select-margin: @comp-margin-l; +@pagination-pager-margin: @comp-margin-s; // 过渡 @pagination-hover-transition: all @anim-duration-base @anim-time-fn-ease-in; diff --git a/style/web/components/rate/_index.less b/style/web/components/rate/_index.less index bf330c9c89..95d06a1f4d 100644 --- a/style/web/components/rate/_index.less +++ b/style/web/components/rate/_index.less @@ -8,6 +8,7 @@ .@{rate-cls} { display: flex; + align-items: center; .@{rate-cls}__star-top { position: absolute; @@ -54,9 +55,7 @@ &__text { color: @rate-text-primary; - font-size: @rate-text-font; + font: @rate-text-font; margin-left: @rate-text-before; - font-weight: @rate-text-font-weight; - line-height: @rate-text-line-height; } } diff --git a/style/web/components/rate/_var.less b/style/web/components/rate/_var.less index 05decb1e82..0f8f703eb3 100644 --- a/style/web/components/rate/_var.less +++ b/style/web/components/rate/_var.less @@ -15,16 +15,10 @@ @rate-cls: ~"@{prefix}-rate"; // 字号 -@rate-text-font: @font-size-base; - -// 字重 -@rate-text-font-weight: 700; +@rate-text-font: @font-mark-medium; // margin -@rate-text-before: 16px; - -// 行高 -@rate-text-line-height: 22px; +@rate-text-before: @comp-margin-l; // 动画 @rate-hover-transform: scale(1.33); diff --git a/style/web/components/steps/_index.css b/style/web/components/steps/_index.css deleted file mode 100644 index 848291fa11..0000000000 --- a/style/web/components/steps/_index.css +++ /dev/null @@ -1,645 +0,0 @@ -.default-step-icon { - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps { - font: var(--td-font-body-medium); - color: var(--td-text-color-primary); - box-sizing: border-box; - margin: 0; - padding: 0; - list-style: none; - display: flex; - width: 100%; -} - -.t-steps .t-steps-item { - flex: 1; - overflow: hidden; - vertical-align: top; - margin-right: 8px; - position: relative; - display: flex; -} - -.t-steps .t-steps-item:last-child { - flex: none; -} - -.t-steps .t-steps-item__inner { - width: fit-content; - position: relative; - display: flex; -} - -.t-steps .t-steps-item__inner.t-steps-item--clickable { - cursor: pointer; -} - -.t-steps .t-steps-item--finish .t-steps-item__icon .t-icon { - color: var(--td-brand-color); -} - -.t-steps .t-steps-item--finish .t-steps-item__icon--number { - border-color: var(--td-brand-color); -} - -.t-steps .t-steps-item--finish .t-steps-item__title { - color: var(--td-text-color-primary); - font-weight: normal; -} - -.t-steps .t-steps-item--finish .t-steps-item__description { - color: var(--td-text-color-secondary); -} - -.t-steps .t-steps-item--process .t-steps-item__icon .t-icon { - color: var(--td-brand-color); -} - -.t-steps .t-steps-item--process .t-steps-item__icon--number { - border-color: var(--td-brand-color); - background-color: var(--td-brand-color); - color: var(--td-text-color-anti); - font-weight: bold; -} - -.t-steps .t-steps-item--process .t-steps-item__title { - color: var(--td-brand-color); - font-weight: bold; -} - -.t-steps .t-steps-item--process .t-steps-item__description { - color: var(--td-text-color-secondary); -} - -.t-steps .t-steps-item--error .t-steps-item__icon .t-icon { - color: var(--td-error-color); -} - -.t-steps .t-steps-item--error .t-steps-item__icon--number { - color: var(--td-error-color); - border-color: var(--td-error-color); -} - -.t-steps .t-steps-item--error .t-steps-item__title { - color: var(--td-error-color); -} - -.t-steps .t-steps-item--error .t-steps-item__description { - color: var(--td-text-color-secondary); -} - -.t-steps .t-steps-item__icon { - vertical-align: top; - font-size: var(--td-font-size-body-medium); - margin-right: 8px; - color: var(--td-text-color-placeholder); -} - -.t-steps .t-steps-item__icon--number { - color: var(--td-text-color-placeholder); - border: 1px solid var(--td-text-color-placeholder); - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps .t-steps-item__icon--finish { - border: 1px solid var(--td-brand-color); - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps .t-steps-item__icon--error { - border: 1px solid var(--td-error-color-6); - color: #000; - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps .t-steps-item__icon > .t-icon { - font-size: 24px; -} - -.t-steps .t-steps-item__title { - position: relative; - padding-right: 8px; - color: var(--td-text-color-placeholder); - font-size: var(--td-font-size-body-large); - line-height: 24px; -} - -.t-steps .t-steps-item__description { - color: var(--td-text-color-placeholder); - font-size: var(--td-font-size-body-medium); - margin-bottom: 4px; - line-height: 22px; -} - -.t-steps--line-separator .t-steps-item::before, -.t-steps--line-separator .t-steps-item::after, -.t-steps--line-separator .t-steps-item__title::after { - border-style: solid; -} - -.t-steps--dashed-separator .t-steps-item::before, -.t-steps--dashed-separator .t-steps-item::after, -.t-steps--dashed-separator .t-steps-item__title::after { - border-style: dashed; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__content { - margin-top: 4px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__title { - width: fit-content; - margin-bottom: 4px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number { - width: steps-circle-width; - height: 24px; - margin-top: 4px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon { - font-size: 24px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title::after { - content: ""; - display: block; - width: 9999px; - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: 100%; - top: 50%; - transform: translateY(-50%); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - height: 24px; - content: "^"; - transform: rotateZ(90deg); - display: inline-flex; - justify-content: center; - align-items: flex-end; - border: 0; - font-size: 16px; - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title::after { - border-bottom-width: 2px; - border-bottom-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title::after { - content: ""; - display: block; - width: 9999px; - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: 100%; - top: 50%; - transform: translateY(-50%); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - height: 24px; - content: "^"; - transform: rotateZ(90deg); - display: inline-flex; - justify-content: center; - align-items: flex-end; - border: 0; - font-size: 16px; - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - transform: rotateZ(-90deg); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after, -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title::after { - border-bottom-width: 2px; - border-bottom-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title::after, -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title::after { - border-bottom-width: 2px; - border-bottom-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item { - overflow: visible; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title { - padding-right: 0; - margin-bottom: 4px; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon { - border-color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon { - background: var(--td-brand-color); - border-color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon { - background: var(--td-error-color); - border-color: var(--td-error-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__inner { - display: flex; - flex-direction: column; - align-items: center; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon { - display: block; - width: 8px; - height: 8px; - border: 2px solid var(--td-text-color-placeholder); - border-radius: var(--td-radius-circle); - margin-bottom: 4px; - position: relative; - box-sizing: border-box; - flex-shrink: 0; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content { - text-align: center; - width: 140px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - content: "^"; - display: inline-flex; - justify-content: center; - align-items: flex-start; - border: 0; - font-size: 16px; - transform: rotateZ(90deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child)::after { - content: ""; - display: block; - width: calc(100% - 16px); - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: calc(140px / 2 + 8px); - top: 2.5px; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); - border-bottom-color: var(--td-brand-color); - border-bottom-width: 2px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - content: "^"; - display: inline-flex; - justify-content: center; - align-items: flex-start; - border: 0; - font-size: 16px; - transform: rotateZ(90deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - transform: rotateZ(-90deg); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after, -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child)::after { - content: ""; - display: block; - width: calc(100% - 16px); - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: calc(140px / 2 + 8px); - top: 2.5px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); - border-bottom-color: var(--td-brand-color); - border-bottom-width: 2px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child)::after, -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); - border-bottom-color: var(--td-brand-color); - border-bottom-width: 2px; -} - -.t-steps--vertical { - width: fit-content; - flex-direction: column; -} - -.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 24px); - position: absolute; - top: 24px; - left: 6px; - display: flex; - align-items: center; - font-size: 16px; - transform: rotateZ(180deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--positive .t-steps-item { - padding-bottom: 24px; - margin-bottom: 5px; -} - -.t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-left: 0; - border-top: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - top: 35px; - left: 11px; -} - -.t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child)::before { - border-right-width: 2px; - border-right-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--default-anchor .t-steps-item__content { - margin-top: 2px; - margin-left: 0; -} - -.t-steps--vertical.t-steps--default-anchor .t-steps-item__title { - margin-bottom: 4px; -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 4px); - position: absolute; - top: 8px; - left: 0; - display: flex; - align-items: center; - font-size: 14px; - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-bottom: 0; - border-left: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - left: 3.5px; - top: 17px; -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); - border-right-color: var(--td-brand-color); - border-right-width: 2px; -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item { - margin-bottom: 0; -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon { - border-color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon { - background: var(--td-brand-color); - border-color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon { - background: var(--td-error-color); - border-color: var(--td-error-color); -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon { - display: block; - width: 8px; - height: 8px; - border: 2px solid var(--td-text-color-placeholder); - border-radius: var(--td-radius-circle); - margin-bottom: 4px; - position: relative; - box-sizing: border-box; - flex-shrink: 0; - top: 5px; -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 24px); - position: absolute; - top: 24px; - left: 6px; - display: flex; - align-items: center; - font-size: 16px; - transform: rotateZ(180deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - transform: rotateZ(0); - margin-top: 4px; -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse .t-steps-item { - padding-bottom: 24px; - margin-bottom: 5px; -} - -.t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-left: 0; - border-bottom: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - top: 35px; - left: 11px; -} - -.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child)::before { - border-right-width: 2px; - border-right-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 4px); - position: absolute; - top: 8px; - left: 0; - display: flex; - align-items: center; - font-size: 14px; - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item { - margin-bottom: 0; -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-bottom: 0; - border-left: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - left: 3.5px; - top: 17px; -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child::before { - display: none; -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::before { - border-right-width: 2px; - border-right-color: var(--td-brand-color); - color: var(--td-brand-color); -} diff --git a/style/web/components/steps/_index.less b/style/web/components/steps/_index.less index 1cbfd44e0f..fb3fd1c681 100644 --- a/style/web/components/steps/_index.less +++ b/style/web/components/steps/_index.less @@ -37,10 +37,6 @@ // 默认锚点 &.@{prefix}-steps--default-anchor { - .@{prefix}-steps-item__content { - margin-top: @steps-item-content-margin-top; - } - .@{prefix}-steps-item__title { width: fit-content; margin-bottom: @steps-item-title-margin-bottom; @@ -48,14 +44,12 @@ .@{prefix}-steps-item__icon { &__number { - width: steps-circle-width; + width: @steps-circle-width; height: @steps-circle-height; - margin-top: @steps-item-icon-number-margin-top; } & > .t-icon { font-size: @steps-item-t-icon-font-size-default; - margin-top: 4px; } } diff --git a/style/web/components/steps/_mixin.less b/style/web/components/steps/_mixin.less index 2fc42a5955..a2b2a407fb 100644 --- a/style/web/components/steps/_mixin.less +++ b/style/web/components/steps/_mixin.less @@ -86,7 +86,6 @@ height: @steps-circle-height; text-align: center; border-radius: @border-radius-circle; - margin-top: @steps-item-default-icon-margin-top; font-size: @steps-default-step-icon-font-size; } @@ -234,7 +233,7 @@ justify-content: center; align-items: flex-end; border: 0; - font-size: @spacer-2; + font-size: @font-size-l; color: @steps-line-bg-color-horizontal-default; } @@ -280,13 +279,13 @@ .@{prefix}-steps-item:not(:last-child)::before { content: "^"; border: 0; - height: calc(100% - @spacer-3); + height: calc(100% - 24px); position: absolute; - top: @spacer-3; - left: @spacer-m; + top: 24px; + left: 6px; display: flex; align-items: center; - font-size: @spacer-2; + font-size: @font-size-l; transform: rotateZ(180deg); color: @steps-line-bg-color-vertical-default; } @@ -298,7 +297,7 @@ & when(@isReverse = true) { .@{prefix}-steps-item:not(:last-child)::before { transform: rotateZ(0); - margin-top: @spacer-s; + margin-top: @comp-margin-xs; } .@{prefix}-steps-item--process:not(:last-child)::before, @@ -372,7 +371,7 @@ justify-content: center; align-items: flex-start; border: 0; - font-size: @spacer-2; + font-size: @font-size-l; transform: rotateZ(90deg); color: @steps-line-bg-color-horizontal-default; } @@ -433,13 +432,13 @@ .@{prefix}-steps-item:not(:last-child)::before { content: "^"; border: 0; - height: calc(100% - @spacer-s); + height: calc(100% - 4px); position: absolute; - top: @spacer; + top: 8px; left: 0; display: flex; align-items: center; - font-size: 14px; + font-size: @font-size-base; color: @steps-line-bg-color-vertical-default; } diff --git a/style/web/components/steps/_var.less b/style/web/components/steps/_var.less index 36e48aab45..1e40848301 100644 --- a/style/web/components/steps/_var.less +++ b/style/web/components/steps/_var.less @@ -12,24 +12,23 @@ // 如：@button-line-height-s // 点状步骤条相关 -@steps-circle-height: 24px; -@steps-circle-width: 24px; -@steps-item-title-margin-bottom: 4px; -@steps-item-description-margin: 4px; -@steps-item-content-margin-top: 4px; -@steps-item-content-margin-top-vertical: 2px; -@steps-item-margin-right: @spacer; -@steps-item-icon-margin-right: @spacer; -@steps-item-default-icon-margin-top: 3px; -@steps-title-padding-right: @spacer; -@steps-dot-item-icon-margin-bottom: 4px; +@steps-circle-height: 22px; +@steps-circle-width: 22px; +@steps-item-title-margin-bottom: @comp-margin-xs; +@steps-item-description-margin: @comp-margin-xs; +@steps-item-content-margin-top: @comp-margin-xs; +@steps-item-content-margin-top-vertical: @comp-margin-xxs; +@steps-item-margin-right: @comp-margin-s; +@steps-item-icon-margin-right: @comp-margin-s; +@steps-title-padding-right: @comp-margin-s; +@steps-dot-item-icon-margin-bottom: @comp-margin-xs; @steps-item-content-margin-left-vertical: 0px; -@steps-item-padding-bottom-vertical: @spacer-3; +@steps-item-padding-bottom-vertical: @comp-margin-xxl; @steps-item-margin-bottom-vertical: 5px; @steps-item-icon-number-line-height: 1px; @steps-item-icon-number-line-width: 1px; @steps-item-icon-number-line-top: 35px; -@steps-item-connector-line-width: calc(100% - @spacer-2); +@steps-item-connector-line-width: calc(100% - 16px); @steps-title-line-height: 24px; @steps-description-line-height: 22px; @steps-dot-item-icon-height: 8px; @@ -42,7 +41,6 @@ @steps-dot-connector-position-top-vertical: 17px; @steps-dot-connector-position-left-vertical: 3.5px; @steps-dot-connector-position-left-vertical-reverse: 3.5px; -@steps-item-icon-number-margin-top: 4px; // 描边宽度 @step-stroke-width: 1px; @@ -52,9 +50,8 @@ @steps-title-font-weight: normal; //add //字体 -@steps-item-t-icon-font-size: 35px; @steps-item-icon-font-size: @font-size-base; -@steps-item-t-icon-font-size-default: 24px; +@steps-item-t-icon-font-size-default: calc(@font-size-base + 10px); @steps-title-font-size-anchor: @font-size-l; @steps-description-font-size: @font-size-base; @steps-default-step-icon-font-size: @font-size-l; @@ -79,7 +76,7 @@ @steps-item-icon-color: @text-color-placeholder; @steps-item-icon-border-color-default: @text-color-placeholder; @steps-item-icon-border-color-finish: @brand-color; -@steps-item-icon-border-color-error: @error-color-6; +@steps-item-icon-border-color-error: @error-color; // item-icon anchor 状态 @steps-item-icon-anchor-number-color-error: @error-color; diff --git a/style/web/components/tabs/_var.less b/style/web/components/tabs/_var.less index 242c5dc3f6..d2cdeadbd5 100644 --- a/style/web/components/tabs/_var.less +++ b/style/web/components/tabs/_var.less @@ -45,8 +45,8 @@ @tab-card-stroke: @component-stroke; // 其他 -@tab-height-middle: 48px; -@tab-height-large: 64px; +@tab-height-middle: @comp-size-xxl; +@tab-height-large: @comp-size-xxxxl; @tab-btn-width: 40px; @tab-nav-item-margin-left: 8px; @tab-nav-item-margin-right: 8px; diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index 1e16d034f8..e1b4c6bbe4 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -60,19 +60,18 @@ position: relative; display: flex; flex-wrap: nowrap; - padding: 4px 0 4px @tree-node-item-padding-left; + padding: @tree-node-item-padding; cursor: default; transform: translateZ(0); // 开启硬件加速 backface-visibility: hidden; // 防止Chrome、Safari中，使用 transforms/animations，可能造成的页面闪烁 perspective: 1000; // 防止Chrome、Safari中，使用 transforms/animations，可能造成的页面闪烁 - line-height: @tree-node-item-line-height; .t-icon, .@{prefix}-loading { display: inline-block; position: relative; z-index: 2; - font-size: @font-size-l; + font-size: @tree-node-icon-size; } .t-icon { @@ -197,7 +196,7 @@ align-items: center; // 图标居中 text-align: center; - width: 16px; + width: @tree-node-icon-size; // 当子元素只有一个且为image类型时，会有隐藏占位，因此将font-size设0 font-size: 0; user-select: none; @@ -210,16 +209,17 @@ content: ""; display: block; position: absolute; - left: 0; - top: 5px; + left: calc((@tree-node-icon-size - @tree-node-icon-svg-size) / 2); width: @tree-node-icon-svg-size; height: @tree-node-icon-svg-size; border-radius: @border-radius-default; + transition: @anim-duration-base linear; } // 仅在有图标时呈现背景 &__icon:not(:empty):hover::after { background-color: @tree-node-bg-hover-color; + transition: @anim-duration-base linear; } // 没有图标是不呈现指针 @@ -232,8 +232,8 @@ flex-wrap: nowrap; flex: 0 0 auto; - padding: 2px 4px; - margin-left: 4px; + padding: @tree-label-padding; + margin-left: @tree-label-margin-left; border-radius: @border-radius-default; cursor: pointer; transition: background-color @anim-duration-moderate @anim-time-fn-easing; diff --git a/style/web/components/tree/_var.less b/style/web/components/tree/_var.less index f27d2813d2..4724759eb6 100644 --- a/style/web/components/tree/_var.less +++ b/style/web/components/tree/_var.less @@ -25,23 +25,27 @@ //字体 @tree-font: @font-body-medium; +@tree-font-size: @font-size-base; +@tree-font-line-height: @text-line-height-base; // 间距 -@tree-node-padding-basic: @spacer-3; -@tree-node-item-padding-left: calc(@tree-node-padding-basic * var(--level) + 8px); -@tree-line-position-bottom: 17px; -@tree-line-position-left: calc(@tree-node-padding-basic * var(--level) - 8px); +@tree-node-padding-basic: @comp-margin-xxl; +@tree-node-item-padding-left: calc(@tree-node-padding-basic * var(--level)); +@tree-node-item-padding: @comp-paddingTB-xs 0 @comp-paddingTB-xs @tree-node-item-padding-left; +@tree-line-position-bottom: @comp-margin-l; +@tree-line-position-left: calc(@tree-node-padding-basic * var(--level) - @comp-margin-l); +@tree-label-margin-left: @comp-margin-xs; +@tree-label-padding: @comp-paddingTB-xxs @comp-paddingLR-xs; //尺寸 @tree-line-width: 1px; -@tree-node-item-height: 34px; -@tree-node-icon-size: 28px; -@tree-node-icon-svg-size: @icon-default; -@tree-node-item-line-height: 22px; -@tree-line-before-width: 12px; -@tree-line-leaf-width: 12px; -@tree-line-first-height: 22px; +@tree-node-item-height: 100%; +@tree-node-icon-svg-size: calc(@tree-font-size + 6px); +@tree-line-before-width: @comp-margin-m; +@tree-line-leaf-width: @comp-margin-m; +@tree-line-first-height: @tree-font-line-height; @tree-node-item-origin-height: calc(@tree-node-item-height * var(--hscale) + 0px); +@tree-node-icon-size: calc(@tree-font-size + 2px); // 动画 @tree-node-animation-time: 300ms; @@ -49,5 +53,5 @@ // 拖拽 @tree-node-drag-tip-height: 2px; -@tree-node-drag-tip-bg: var(--td-brand-color-6); -@tree-node-drag-bg-highlight: var(--td-brand-color-light); +@tree-node-drag-tip-bg: @brand-color; +@tree-node-drag-bg-highlight: @brand-color-light; From 9ddb9f442e00e6e404942659c2a42bfa7deacaae Mon Sep 17 00:00:00 2001 From: yuyang Date: Fri, 11 Nov 2022 11:19:37 +0800 Subject: [PATCH 033/312] Feat/size token (#993) * feat: replace padding margin with size token * feat: replace padding margin with size token --- style/web/components/cascader/_index.less | 10 +----- style/web/components/cascader/_var.less | 22 ++++++------- style/web/components/checkbox/_var.less | 2 +- style/web/components/color-picker/_var.less | 12 +++---- style/web/components/date-picker/_index.less | 22 ++++++------- style/web/components/date-picker/_var.less | 10 +++--- style/web/components/form/_var.less | 28 ++++++++--------- .../components/input-adornment/_mixin.less | 2 +- .../web/components/input-adornment/_var.less | 2 +- style/web/components/input-number/_index.less | 13 +++----- style/web/components/input-number/_var.less | 31 +++++++++---------- style/web/components/input/_index.less | 6 ++-- style/web/components/input/_mixin.less | 2 +- style/web/components/input/_var.less | 17 +++++----- style/web/components/radio/_var.less | 24 +++++++------- style/web/components/tabs/_index.less | 6 ++-- style/web/components/tabs/_var.less | 21 +++++++------ 17 files changed, 109 insertions(+), 121 deletions(-) diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less index 4fdef4a403..d2e0610a25 100644 --- a/style/web/components/cascader/_index.less +++ b/style/web/components/cascader/_index.less @@ -97,20 +97,12 @@ height: @cascader-item-height-s; font: @cascader-font-s; padding: @cascader-item-padding-s; - - .@{prefix}-cascader__item-label { - padding: 1px 0; - } } &.@{prefix}-size-l { height: @cascader-item-height-l; font: @cascader-font-l; padding: @cascader-item-padding-l; - - .@{prefix}-cascader__item-label { - padding: 6px 0; - } } &.@{prefix}-is-disabled { @@ -186,7 +178,7 @@ display: block; position: relative; white-space: nowrap; - padding: 3px 0; + padding: 0; &--ellipsis { .text-ellipsis(); diff --git a/style/web/components/cascader/_var.less b/style/web/components/cascader/_var.less index cf843a3a6a..64341b74ff 100644 --- a/style/web/components/cascader/_var.less +++ b/style/web/components/cascader/_var.less @@ -20,9 +20,9 @@ // menu面板 @cascader-menu-segment-color: @component-stroke; -@cascader-menu-padding: 6px; -@cascader-menu-padding-s: 4px; -@cascader-menu-padding-l: 8px; +@cascader-menu-padding: @pop-padding-m; +@cascader-menu-padding-s: @pop-padding-s; +@cascader-menu-padding-l: @pop-padding-l; @cascader-color-empty: @text-color-disabled; @@ -31,15 +31,15 @@ @cascader-item-color-hover: @bg-color-container-hover; @cascader-item-color-disabled: @text-color-disabled; @cascader-item-background-color-expanded: @brand-color-light; -@cascader-item-height-s: 22px; -@cascader-item-height-default: 28px; -@cascader-item-height-l: 36px; -@cascader-item-margin-top: 2px; +@cascader-item-height-s: @comp-size-xs; +@cascader-item-height-default: @comp-size-s; +@cascader-item-height-l: @comp-size-m; +@cascader-item-margin-top: @comp-margin-xxs; @cascader-item-border-radius: @border-radius-default; -@cascader-item-padding-with-icon: 0 22px 0 8px; -@cascader-item-padding: 0 8px; -@cascader-item-padding-s: 0px 8px; -@cascader-item-padding-l: 0 12px; +@cascader-item-padding-with-icon: 0 @comp-paddingLR-s; +@cascader-item-padding: 0 @comp-paddingLR-s; +@cascader-item-padding-s: 0px @comp-paddingLR-s; +@cascader-item-padding-l: 0 @comp-paddingLR-m; // icon @cascader-icon-color: @text-color-placeholder; diff --git a/style/web/components/checkbox/_var.less b/style/web/components/checkbox/_var.less index c812e5f834..46c0735ab1 100644 --- a/style/web/components/checkbox/_var.less +++ b/style/web/components/checkbox/_var.less @@ -35,7 +35,7 @@ // 尺寸 @checkbox-size: 16px; @checkbox-border-radius: @border-radius-default; -@checkbox-margin-right: @spacer; +@checkbox-margin-right: @comp-margin-s; @checkbox-check-width: 5px; @checkbox-check-height: 9px; diff --git a/style/web/components/color-picker/_var.less b/style/web/components/color-picker/_var.less index 0b9484459c..d1fa9194e0 100644 --- a/style/web/components/color-picker/_var.less +++ b/style/web/components/color-picker/_var.less @@ -13,12 +13,12 @@ @color-picker-border-radius: 6px; @color-picker-panel-width: 254px; -@color-picker-panel-padding: 12px; -@color-picker-panel-radius: 6px; +@color-picker-panel-padding: @pop-padding-xl; +@color-picker-panel-radius: @border-radius-medium; @color-picker-saturation-height: 168px; -@color-picker-saturation-radius: 4px; +@color-picker-saturation-radius: @border-radius-default; @color-picker-saturation-thumb-size: 18px; -@color-picker-margin: 12px; +@color-picker-margin: @comp-margin-m; @color-picker-slider-height: 8px; @color-picker-slider-thumb-size: 18px; @color-picker-slider-thumb-transform-x: @color-picker-slider-thumb-size * -.5; @@ -26,7 +26,7 @@ @color-picker-input-format-width: 64px; @color-picker-font: @font-body-small; @color-picker-icon-size: 20px; -@color-picker-icon-radius: 3px; +@color-picker-icon-radius: @border-radius-default; @color-picker-icon-font-size: 16px; @color-picker-degree-width: 42px; @color-picker-gradient-preview-width: 32px; @@ -34,7 +34,7 @@ @color-picker-gradient-preview-radius: @border-radius-default; @color-picker-swatch-width: 18px; @color-picker-swatch-height: 18px; -@color-picker-swatch-radius: 50%; +@color-picker-swatch-radius: @border-radius-circle; @color-picker-swatch-padding: 0; @color-picker-swatch-border-size: 1px; @color-picker-swatch-columns: 10; diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less index 614c9eacfb..36cdce8461 100644 --- a/style/web/components/date-picker/_index.less +++ b/style/web/components/date-picker/_index.less @@ -65,12 +65,12 @@ display: flex; align-items: center; justify-content: space-between; - gap: @spacer-l; + gap: @comp-margin-m; width: 100%; &-controller { display: inline-flex; - gap: @spacer; + gap: @comp-margin-s; .@{prefix}-date-picker__header-controller-month { width: @datepicker-month-controller-width; @@ -135,7 +135,7 @@ top: 3px; z-index: 10; height: 24px; - border-radius: 3px; + border-radius: @border-radius-default; transition: @datepicker-transition; pointer-events: none; } @@ -236,14 +236,14 @@ .@{prefix}-date-range-picker__panel-time { display: flex; flex-direction: column; - gap: 2px; + gap: @comp-margin-xxs; padding: @datepicker-time-panel-padding; border-left: 1px solid @datepicker-panel-divider-color; &-viewer { display: flex; - height: 32px; - line-height: 22px; + height: @comp-size-m; + line-height: @text-line-height-base; align-items: center; justify-content: center; color: @text-color-primary; @@ -262,8 +262,8 @@ display: flex; flex-direction: column; width: 100%; - padding: @spacer-l; - gap: @spacer-l; + padding: @comp-paddingTB-m @comp-paddingLR-m; + gap: @comp-margin-m; max-width: @datepicker-panel-max-width; } @@ -305,7 +305,7 @@ tbody { width: 100%; display: flex; - gap: @spacer-2; + gap: @comp-margin-l; flex-direction: column; tr { @@ -348,7 +348,7 @@ z-index: 1; height: @datepicker-cell-height; transform: translateY(-50%); - transition: all .2s @anim-time-fn-easing; + transition: all @anim-duration-base @anim-time-fn-easing; } &:hover { @@ -449,7 +449,7 @@ &--disabled + &--disabled { &::before { - left: -@spacer-4; + left: calc(0px - calc(@datepicker-cell-min-width + @comp-margin-s)); background-color: @datepicker-cell-disable-background-color; } } diff --git a/style/web/components/date-picker/_var.less b/style/web/components/date-picker/_var.less index c7b67f744e..c64c1a96b3 100644 --- a/style/web/components/date-picker/_var.less +++ b/style/web/components/date-picker/_var.less @@ -23,16 +23,16 @@ @datepicker-year-controller-width: 78px; @datepicker-month-controller-width: 80px; -@datepicker-cell-min-width: 24px; -@datepicker-cell-height: 24px; -@datepicker-cell-min-width-l: 48px; +@datepicker-cell-min-width: @comp-size-xs; +@datepicker-cell-height: @comp-size-xs; +@datepicker-cell-min-width-l: @comp-size-xxl; @datepicker-th-font-weight: 400; @datepicker-font-weight-medium: 500; @datepicker-panel-border-radius: @border-radius-default; -@datepicker-presets-padding: @spacer-l; -@datepicker-presets-gap: @spacer; +@datepicker-presets-padding: @comp-paddingTB-m @comp-paddingLR-m; +@datepicker-presets-gap: @comp-margin-s; // cell @datepicker-cell-hover-background: @bg-color-container-hover; diff --git a/style/web/components/form/_var.less b/style/web/components/form/_var.less index a04d00d993..534d55f8d4 100644 --- a/style/web/components/form/_var.less +++ b/style/web/components/form/_var.less @@ -26,21 +26,21 @@ @form-color-extra: @text-color-placeholder; // 间距 -@form-item-margin-bottom: @spacer-3; -@form-item-with-help-margin-bottom: @spacer-s; -@form-item-control-height: @spacer-4; -@form-item-row-gap: @spacer-2; -@form-item-padding-bottom: @spacer-s; -@form-item-margin-right-inline: @spacer-3; - -@form-label-line-height: 22px; -@form-label-padding-right: @spacer-3; -@form-label-margin-right-required: (@spacer / 2); -@form-label-margin-colon: 0 @spacer 0 (@spacer / 4); -@form-status-position-right: -@spacer-4; -@form-status-margin-left: @spacer; +@form-item-margin-bottom: @comp-margin-xxl; +@form-item-with-help-margin-bottom: @comp-margin-xs; +@form-item-control-height: @comp-margin-xxxl; +@form-item-row-gap: @comp-margin-l; +@form-item-padding-bottom: @comp-paddingTB-xs; +@form-item-margin-right-inline: @comp-margin-xxl; + +@form-label-line-height: @text-line-height-base; +@form-label-padding-right: @comp-paddingLR-xl; +@form-label-margin-right-required: @comp-margin-xs; +@form-label-margin-colon: 0 @comp-margin-xxs; +@form-status-position-right: -32px; +@form-status-margin-left: @comp-margin-s; @form-status-button-width: 32px; -@from-help-text-margin-top: (@spacer / 2); +@from-help-text-margin-top: @comp-margin-xs; // status @input-border-color-success: @success-color; diff --git a/style/web/components/input-adornment/_mixin.less b/style/web/components/input-adornment/_mixin.less index 04a17838db..2a42660f97 100644 --- a/style/web/components/input-adornment/_mixin.less +++ b/style/web/components/input-adornment/_mixin.less @@ -25,7 +25,7 @@ .@{prefix}-select__wrap { width: auto; - margin: 0 -12px; + margin: 0 calc(0px - @comp-margin-m); } .@{prefix}-input, diff --git a/style/web/components/input-adornment/_var.less b/style/web/components/input-adornment/_var.less index ba489114ec..8d1a88520c 100644 --- a/style/web/components/input-adornment/_var.less +++ b/style/web/components/input-adornment/_var.less @@ -15,4 +15,4 @@ @import "../input/_var.less"; -@input-adornment-item-padding: 0 (@spacer-3 / 2); +@input-adornment-item-padding: 0 @comp-paddingLR-m; diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less index 4d8044a096..07de35a8e3 100644 --- a/style/web/components/input-number/_index.less +++ b/style/web/components/input-number/_index.less @@ -207,8 +207,7 @@ .@{inputCls} { height: @input-number-inner-height-l; line-height: @input-number-inner-height-l; - padding-right: @input-number-right-button-width-l + - @input-number-padding-horizontal-default; + padding-right: calc(@input-number-right-button-width-l + @input-number-padding-horizontal-default); } .@{inputNumberCls}__decrease, @@ -259,9 +258,7 @@ width: 100%; box-sizing: border-box; margin: 0; - padding-right: ( - @input-number-right-button-width + @input-number-padding-horizontal-default - ); + padding-right: calc(@input-number-right-button-width + @input-number-padding-horizontal-default); border-radius: @border-radius-default; } @@ -320,7 +317,7 @@ } .@{inputNumberCls}__decrease { - top: @input-number-button-column-height + 3px; + top: calc(@input-number-button-column-height + 3px); border-bottom-right-radius: calc(@border-radius-default - 1px); } @@ -332,7 +329,7 @@ height: @input-number-button-column-height-l; } .@{inputNumberCls}__decrease { - top: @input-number-button-column-height-l + 3px; + top: calc(@input-number-button-column-height-l + 3px); } } @@ -344,7 +341,7 @@ height: @input-number-button-column-height-s; } .@{inputNumberCls}__decrease { - top: @input-number-button-column-height-s + 3px; + top: calc(@input-number-button-column-height-s + 3px); } } } diff --git a/style/web/components/input-number/_var.less b/style/web/components/input-number/_var.less index 83ad0c7a74..03db90cc7d 100644 --- a/style/web/components/input-number/_var.less +++ b/style/web/components/input-number/_var.less @@ -44,31 +44,30 @@ @input-number-width: 144px; // 数字输入组件宽度 中 @input-number-width-l: 168px; // 数字输入组件宽度 大 -@input-number-button-width-s: 24px; // 数字输入框操作按钮宽度 小 -@input-number-button-width: 32px; // 数字输入框操作按钮的宽度 中 -@input-number-button-width-l: 40px; // 数字输入框操作按钮宽度 大 +@input-number-button-width-s: @comp-size-xs; // 数字输入框操作按钮宽度 小 +@input-number-button-width: @comp-size-m; // 数字输入框操作按钮的宽度 中 +@input-number-button-width-l: @comp-size-xl; // 数字输入框操作按钮宽度 大 -@input-number-button-height-s: 24px; // 数字输入框操作按钮高度 小 -@input-number-button-height: 32px; // 数字输入框操作按钮的高度 中 -@input-number-button-height-l: 40px; // 数字输入框操作按钮高度 大 +@input-number-button-height-s: @comp-size-xs; // 数字输入框操作按钮高度 小 +@input-number-button-height: @comp-size-m; // 数字输入框操作按钮的高度 中 +@input-number-button-height-l: @comp-size-xl; // 数字输入框操作按钮高度 大 -@input-number-inner-height-s: 24px; // 数字输入框高度 小 -@input-number-inner-height: 32px; // 数字输入框高度 中 -@input-number-inner-height-l: 40px; // 数字输入框高度 大 +@input-number-inner-height-s: @comp-size-xs; // 数字输入框高度 小 +@input-number-inner-height: @comp-size-m; // 数字输入框高度 中 +@input-number-inner-height-l: @comp-size-xl; // 数字输入框高度 大 @input-number-right-width-s: 88px; // 右侧调整数字输入组件宽度 小 @input-number-right-width: 96px; // 右侧调整数字输入组件宽度 中 @input-number-right-width-l: 120px; // 右侧调整数字输入组件宽度 大 -@input-number-right-button-width-s: 32px; // 右侧调整数字输入框操作按钮宽度 小 -@input-number-right-button-width: 32px; // 右侧调整数字输入框操作按钮宽度 中 -@input-number-right-button-width-l: 40px; // 右侧调整数字输入框操作按钮宽度 大 +@input-number-right-button-width: @comp-size-m; // 右侧调整数字输入框操作按钮宽度 中 +@input-number-right-button-width-l: @comp-size-xl; // 右侧调整数字输入框操作按钮宽度 大 -@input-number-button-column-height-s: 10px; // 右侧调整数字操作按钮的高度 中 -@input-number-button-column-height: 14px; // 右侧调整数字操作按钮的高度 中 -@input-number-button-column-height-l: 18px; // 右侧调整数字操作按钮的高度 大 +@input-number-button-column-height-s: calc(calc(@comp-size-xs / 2) - 2px); // 右侧调整数字操作按钮的高度 中 +@input-number-button-column-height: calc(calc(@comp-size-m / 2) - 2px); // 右侧调整数字操作按钮的高度 中 +@input-number-button-column-height-l: calc(calc(@comp-size-xl / 2) - 2px); // 右侧调整数字操作按钮的高度 大 -@input-number-padding-horizontal-default: @spacer; +@input-number-padding-horizontal-default: @comp-paddingLR-s; // 字号 @input-number-font-size: @font-size-l; // 数字输入框操作按钮字号 diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less index 32c6dfefe2..da76ad6e66 100644 --- a/style/web/components/input/_index.less +++ b/style/web/components/input/_index.less @@ -99,7 +99,7 @@ &.@{prefix}-size-l { height: @input-height-l; font: @input-font-l; - padding: @input-padding-horizontal-l; + padding: @input-padding-l; } &.@{prefix}-size-s { @@ -121,7 +121,7 @@ } &:not(:empty) { - margin-right: @spacer; + margin-right: @comp-margin-s; } } @@ -131,7 +131,7 @@ } &:not(:empty) { - margin-left: @spacer; + margin-left: @comp-margin-s; } } diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less index 90420959ee..a6172cbd7a 100644 --- a/style/web/components/input/_mixin.less +++ b/style/web/components/input/_mixin.less @@ -3,7 +3,7 @@ border-style: solid; border-radius: @input-border-radius; border-color: @input-border-color-default; - padding: 0 @input-padding-horizontal-default; + padding: @input-padding-default; background-color: @input-bg-color-default; outline: none; color: @input-text-color-default; diff --git a/style/web/components/input/_var.less b/style/web/components/input/_var.less index b2a9d7aa12..f472161ef3 100644 --- a/style/web/components/input/_var.less +++ b/style/web/components/input/_var.less @@ -49,19 +49,16 @@ @input-fix-position: @spacer; // 间距 -@input-padding-horizontal-l: @spacer-l; -@input-padding-horizontal-default: @spacer; -@input-margin-distance-default: @spacer; -@input-status-position-right: -@spacer-3; -@input-fix-padding: @spacer-4; +@input-padding-l: @comp-paddingTB-m @comp-paddingLR-m; +@input-padding-default: 0 @comp-paddingLR-s; +@input-margin-distance-default: @comp-margin-xxxl; +@input-status-position-right: -24px; @input-group-first-child-margin-left: -1px; -@textarea-limited-padding: (@spacer * 4); - // 尺寸 -@input-height-s: 24px; -@input-height-default: 32px; -@input-height-l: 40px; +@input-height-s: @comp-size-xs; +@input-height-default: @comp-size-m; +@input-height-l: @comp-size-xl; @input-inner-icon-font-size: inherit; @input-tips-min-height: @text-line-height-s; diff --git a/style/web/components/radio/_var.less b/style/web/components/radio/_var.less index bce276d041..647f6db18f 100644 --- a/style/web/components/radio/_var.less +++ b/style/web/components/radio/_var.less @@ -50,14 +50,14 @@ // 尺寸 @radio-size: 16px; @radio-dot-size: (@radio-size / 2); -@radio-margin-right: (@spacer * 3); +@radio-margin-right: @comp-margin-xxl; @radio-button-border-radius: @border-radius-small; -@radio-outline-height-small: 24px; -@radio-outline-height-medium: 32px; -@radio-outline-height-large: 40px; -@radio-height-small: 20px; -@radio-height-medium: 28px; -@radio-height-large: 36px; +@radio-outline-height-small: @comp-size-xs; +@radio-outline-height-medium: @comp-size-m; +@radio-outline-height-large: @comp-size-xl; +@radio-height-small: calc(@comp-size-xs - @comp-paddingTB-xs); +@radio-height-medium: calc(@comp-size-m - @comp-paddingTB-xs); +@radio-height-large: calc(@comp-size-xl - @comp-paddingTB-xs); @radio-button-before-width: 1px; // 字号 @@ -67,15 +67,15 @@ @radio-button-font-large: @font-body-large; // padding -@radio-input-label-spacer: @spacer; -@radio-button-padding-small: 0px @spacer; -@radio-button-padding-medium: @spacer-s @spacer-2; -@radio-button-padding-large: @spacer @spacer-3; +@radio-input-label-spacer: @comp-margin-s; +@radio-button-padding-small: 0px @comp-paddingLR-s; +@radio-button-padding-medium: @comp-paddingTB-xs @comp-paddingLR-l; +@radio-button-padding-large: @comp-paddingTB-s @comp-paddingLR-xl; @radio-button-before-left: 0px; @radio-button-before-top: 50%; @radio-button-border: 1px solid; -@radio-group-padding: 2px; +@radio-group-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; @radio-group-filled-bg-block-left: 2px; @radio-group-filled-bg-block-top: 2px; diff --git a/style/web/components/tabs/_index.less b/style/web/components/tabs/_index.less index cf267cf94e..f84b3e556e 100644 --- a/style/web/components/tabs/_index.less +++ b/style/web/components/tabs/_index.less @@ -231,11 +231,12 @@ transition: @tab-nav-item-transition; &-wrapper { - display: block; + display: flex; + align-items: center; + height: @tab-nav-item-wrapper-height; padding: @tab-nav-item-wrapper-padding; margin-left: @tab-nav-item-margin-left; margin-right: @tab-nav-item-margin-right; - line-height: @tab-nav-item-line-height; border-radius: @border-radius-default; transition: @tab-nav-item-transition; @@ -246,6 +247,7 @@ font: @tab-nav-item-font; .@{prefix}-tabs__nav-item-wrapper { + height: @tab-nav-item-wrapper-height-large; padding: @tab-nav-item-wrapper-padding-large; } } diff --git a/style/web/components/tabs/_var.less b/style/web/components/tabs/_var.less index d2cdeadbd5..58bd6f530c 100644 --- a/style/web/components/tabs/_var.less +++ b/style/web/components/tabs/_var.less @@ -47,21 +47,22 @@ // 其他 @tab-height-middle: @comp-size-xxl; @tab-height-large: @comp-size-xxxxl; +@tab-nav-item-wrapper-height: @comp-size-m; +@tab-nav-item-wrapper-height-large: @comp-size-xxl; @tab-btn-width: 40px; -@tab-nav-item-margin-left: 8px; -@tab-nav-item-margin-right: 8px; -@tab-nav-item-wrapper-padding: 5px 8px; -@tab-nav-item-wrapper-padding-large: 9px 12px; -@tab-btn-remove-btn-margin-left: 8px; -@tab-nav-card-nav-item-padding-right: 16px; -@tab-nav-card-nav-item-padding-left: 16px; -@tab-nav-card-nav-item-padding-right-large: 24px; -@tab-nav-card-nav-item-padding-left-large: 24px; +@tab-nav-item-margin-left: @comp-margin-s; +@tab-nav-item-margin-right: @comp-margin-s; +@tab-nav-item-wrapper-padding: 0 @comp-paddingLR-s; +@tab-nav-item-wrapper-padding-large: 0 @comp-paddingLR-m; +@tab-btn-remove-btn-margin-left: @comp-margin-s; +@tab-nav-card-nav-item-padding-right: @comp-paddingLR-l; +@tab-nav-card-nav-item-padding-left: @comp-paddingLR-l; +@tab-nav-card-nav-item-padding-right-large: @comp-paddingLR-xl; +@tab-nav-card-nav-item-padding-left-large: @comp-paddingLR-xl; // 尺寸 @tab-icon-size: @font-size-l; // icon尺寸 @tab-nav-item-font: @font-body-large; // tab文本字体大小 -@tab-nav-item-line-height: 22px; // tab文字行高 // 圆角&边框 @tab-btn-border: 1px solid @tab-card-stroke; // 按钮边框 From 697ac4b22d1013fd771357323279f223508db47d Mon Sep 17 00:00:00 2001 From: Y Date: Fri, 11 Nov 2022 17:51:35 +0800 Subject: [PATCH 034/312] fix: fix loading (#997) --- js/loading/circle-adapter.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/loading/circle-adapter.ts b/js/loading/circle-adapter.ts index 748c17d6c6..1649e4be51 100644 --- a/js/loading/circle-adapter.ts +++ b/js/loading/circle-adapter.ts @@ -16,9 +16,9 @@ export default function circleAdapter(circleElem: HTMLElement) { const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua); // 判断是否为 iOS 下的微信和企业微信 const isIosWechat = /(?=.*iPhone)[?=.*MicroMessenger]/.test(ua) && !/Chrome/.test(ua); - // 判断是否为 Mobile - const isMobile = /Mobile/.test(ua); - if ((isSafari || isIosWechat) && !isMobile) { + + // 注意：chrome上调试mobile/ipad端时，loading出现异常，属于正常现象，不需要修改。 + if (isSafari || isIosWechat) { basicStyle = { transformOrigin: '-1px -1px', transform: `scale(${parseInt(fontSize, 10) / 14})`, From fbd6e7c8f8c68473a6a6ff2d206415ed0a077c45 Mon Sep 17 00:00:00 2001 From: yuyang Date: Fri, 11 Nov 2022 18:30:42 +0800 Subject: [PATCH 035/312] feat: breadcrumb ellipsis (#998) --- style/web/components/breadcrumb/_index.less | 5 ++--- style/web/components/{dropdown-new => dropdown}/_index.less | 0 style/web/components/{dropdown-new => dropdown}/_mixin.less | 0 style/web/components/{dropdown-new => dropdown}/_var.less | 0 style/web/components/{dropdown-new => dropdown}/index.html | 0 5 files changed, 2 insertions(+), 3 deletions(-) rename style/web/components/{dropdown-new => dropdown}/_index.less (100%) rename style/web/components/{dropdown-new => dropdown}/_mixin.less (100%) rename style/web/components/{dropdown-new => dropdown}/_var.less (100%) rename style/web/components/{dropdown-new => dropdown}/index.html (100%) diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less index ac4469040e..d52b513a56 100644 --- a/style/web/components/breadcrumb/_index.less +++ b/style/web/components/breadcrumb/_index.less @@ -189,10 +189,9 @@ display: flex; align-items: center; - .t-icon { - vertical-align: text-bottom; + &-text { + .t-overflow; } - .t-overflow; &:hover { color: @breadcrumb-text-color-hover; diff --git a/style/web/components/dropdown-new/_index.less b/style/web/components/dropdown/_index.less similarity index 100% rename from style/web/components/dropdown-new/_index.less rename to style/web/components/dropdown/_index.less diff --git a/style/web/components/dropdown-new/_mixin.less b/style/web/components/dropdown/_mixin.less similarity index 100% rename from style/web/components/dropdown-new/_mixin.less rename to style/web/components/dropdown/_mixin.less diff --git a/style/web/components/dropdown-new/_var.less b/style/web/components/dropdown/_var.less similarity index 100% rename from style/web/components/dropdown-new/_var.less rename to style/web/components/dropdown/_var.less diff --git a/style/web/components/dropdown-new/index.html b/style/web/components/dropdown/index.html similarity index 100% rename from style/web/components/dropdown-new/index.html rename to style/web/components/dropdown/index.html From e8c9ec567aea7624881c204108ef57607a27eb4b Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Fri, 11 Nov 2022 19:44:11 +0800 Subject: [PATCH 036/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20tag-input?= =?UTF-8?q?=20=E6=8D=A2=E8=A1=8C=E9=97=B4=E8=B7=9D=E9=97=AE=E9=A2=98=20(#9?= =?UTF-8?q?96)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/tag-input/_index.less | 5 ++++- style/web/components/tag-input/_var.less | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index ef20b17ec3..f572522099 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -21,16 +21,19 @@ .@{prefix}-input { overflow: hidden; min-height: @tag-input-height-default; - padding: @spacer-s; + line-height: @tag-input-line-height-default; + padding: 0 @spacer-s; height: fit-content; &.@{prefix}-size-s { padding: @spacer-s * .5; min-height: @tag-input-height-s; + line-height: @tag-input-line-height-s; } &.@{prefix}-size-l { min-height: @tag-input-height-l; + line-height: @tag-input-line-height-l; } } diff --git a/style/web/components/tag-input/_var.less b/style/web/components/tag-input/_var.less index bee37394f6..21fcdfe5cf 100644 --- a/style/web/components/tag-input/_var.less +++ b/style/web/components/tag-input/_var.less @@ -1,3 +1,7 @@ @tag-input-height-s: 24px; @tag-input-height-default: 32px; @tag-input-height-l: 40px; + +@tag-input-line-height-s: 20px; +@tag-input-line-height-default: 28px; +@tag-input-line-height-l: 36px; From 02992a140bf349e39c65d01b82c2068b686f874f Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 14 Nov 2022 10:28:06 +0800 Subject: [PATCH 037/312] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81=20(#1002)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/input/_mixin.less | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less index a6172cbd7a..b4454e2565 100644 --- a/style/web/components/input/_mixin.less +++ b/style/web/components/input/_mixin.less @@ -102,19 +102,3 @@ } } } - -.input-size(@size) { - & when(@size = l) { - &.@{prefix}-size-l { - & > .@{prefix}-input__inner { - height: @input-height-l; - } - } - } - & when not (@size = l) { - &.@{prefix}-size-@{size} { - width: @@width-size; - @width-size: "input-width-@{size}"; - } - } -} From effa0ab1628bd0702453b3b6d3274cfdfed49046 Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 14 Nov 2022 16:22:23 +0800 Subject: [PATCH 038/312] feat: table popup tag tooltip size token. fix: table tooltip style bug (#1003) --- style/web/components/image-viewer/_index.less | 53 +++---- style/web/components/image-viewer/_var.less | 18 ++- style/web/components/list/_index.less | 5 +- style/web/components/list/_var.less | 38 ++--- style/web/components/loading/_var.less | 14 +- style/web/components/popup/_var.less | 8 +- style/web/components/progress/_index.less | 8 +- style/web/components/progress/_var.less | 8 +- style/web/components/skeleton/_index.less | 4 +- style/web/components/swiper/_mixin.less | 3 + style/web/components/swiper/_var.less | 8 +- style/web/components/table/_index.less | 135 +++++++++++------- style/web/components/table/_var.less | 29 ++-- style/web/components/tag/_index.less | 8 +- style/web/components/tag/_var.less | 32 +++-- style/web/components/tooltip/_index.less | 19 ++- style/web/components/tooltip/_var.less | 6 +- 17 files changed, 242 insertions(+), 154 deletions(-) diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index acbf5bdf71..5e30c1a693 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -25,10 +25,10 @@ justify-content: center; align-items: center; align-content: center; - font-size: 14px; + font-size: @image-viewer-error-font; .@{prefix}-image-viewer__img-error-text { - margin-top: 10px; + margin-top: @comp-margin-s; } } } @@ -100,8 +100,8 @@ left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 40%); - border-radius: 3px; - padding: 4px 8px; + border-radius: @border-radius-default; + padding: @image-viewer-modal-padding; z-index: 1; } @@ -154,7 +154,7 @@ align-items: center; justify-content: center; background-color: @bg-color-container; - padding-bottom: 8px; + padding-bottom: @image-viewer-modal-header-padding-bottom; @keyframes preview-icon-range { 0% { @@ -179,6 +179,7 @@ .@{prefix}-image-viewer__header-pre-bt { width: auto; height: auto; + padding: @image-viewer-modal-header-pre-bt-padding; position: absolute; left: 50%; bottom: 0; @@ -186,8 +187,12 @@ background-color: @bg-color-container; color: @text-color-primary; border-radius: 50%; - border: .5px solid @bg-color-secondarycontainer; - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-icon-unrange; + box-shadow: @shadow-inset; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-unrange; + + > .t-icon { + font-size: @font-size-l; + } &:hover { background-color: inherit; @@ -200,13 +205,13 @@ } to { - height: 54px; + height: @image-viewer-modal-header-size; } } @keyframes preview-image-hide { 0% { - height: 54px; + height: @image-viewer-modal-header-size; } to { @@ -216,11 +221,11 @@ &.@{prefix}-is-show { .@{prefix}-image-viewer__header-prev { - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-image-show; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-show; } .@{prefix}-image-viewer__header-pre-bt { - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-icon-range; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-range; } } @@ -231,7 +236,7 @@ .@{prefix}-image-viewer__header-prev { width: @header-box-all-width * 7; - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-image-hide; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-hide; overflow: auto hidden; display: flex; position: relative; @@ -263,12 +268,12 @@ margin-left: @header-box-all-width * 3; .@{prefix}-image-viewer__header-box { - width: @header-box-width; - height: 32px; - margin: 16px @header-box-margin 10px; + width: 100%; + height: @image-viewer-modal-header-image-box-size; + margin: @image-viewer-modal-header-image-box-margin; transition: @anim-duration-base; overflow: hidden; - border-radius: 3px; + border-radius: @border-radius-default; display: flex; align-items: center; justify-content: center; @@ -318,8 +323,8 @@ color: @text-color-anti; background-color: rgba(0, 0, 0, 40%); border-radius: 50%; - width: 40px; - height: 40px; + width: @image-viewer-modal-button-size; + height: @image-viewer-modal-button-size; display: flex; justify-content: center; align-items: center; @@ -372,13 +377,13 @@ height: 50px; line-height: 100%; background: @bg-color-container; - border-radius: 6px; - padding: 0 5px; + border-radius: @border-radius-medium; + padding: @image-viewer-utils-content-padding; .@{prefix}-image-viewer__modal-icon { - margin: 0 4px; - width: 32px; - height: 32px; + margin: @image-viewer-utils-modal-icon-margin; + width: @image-viewer-utils-modal-icon-size; + height: @image-viewer-utils-modal-icon-size; display: flex; justify-content: center; align-items: center; @@ -391,7 +396,7 @@ } .@{prefix}-image-viewer__utils-scale { - width: 40px; + width: @image-viewer-utils-modal-utils-scale-width; text-align: center; cursor: inherit; diff --git a/style/web/components/image-viewer/_var.less b/style/web/components/image-viewer/_var.less index b0aa32681d..be3d8089d6 100644 --- a/style/web/components/image-viewer/_var.less +++ b/style/web/components/image-viewer/_var.less @@ -13,6 +13,20 @@ @import "../../_variables.less"; -@image-viewer__icon-color--disabled: rgba(255, 255, 255, 22%); -@image-viewer__image--background-color__error: #E7E7E7; +@image-viewer__icon-color--disabled: @text-color-disabled; +@image-viewer__image--background-color__error: @bg-color-component-disabled; @image-viewer__image-text--error: #000000; + +@image-viewer-error-font: @font-body-medium; + +@image-viewer-modal-padding: @comp-paddingTB-xs @comp-paddingLR-s; +@image-viewer-modal-header-pre-bt-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; +@image-viewer-modal-header-padding-bottom: @comp-margin-s; +@image-viewer-modal-header-size: @comp-size-xxxl; +@image-viewer-modal-header-image-box-size: @comp-size-xl; +@image-viewer-modal-header-image-box-margin: @comp-margin-l @comp-margin-xs @comp-margin-s; +@image-viewer-modal-button-size: @comp-size-xl; +@image-viewer-utils-content-padding: 0 @comp-paddingLR-xs; +@image-viewer-utils-modal-icon-margin: 0 @comp-margin-xs; +@image-viewer-utils-modal-icon-size: @comp-size-m; +@image-viewer-utils-modal-utils-scale-width: @comp-size-xl; diff --git a/style/web/components/list/_index.less b/style/web/components/list/_index.less index 4a70b1053d..34dcc3cc6c 100644 --- a/style/web/components/list/_index.less +++ b/style/web/components/list/_index.less @@ -48,12 +48,12 @@ &__meta { display: flex; - padding: @list-meta-padding; + // padding: @list-meta-padding; &-avatar { width: @list-avatar-size; height: @list-avatar-size; - border-radius: (@list-avatar-size / 2); + border-radius: calc(@list-avatar-size / 2); overflow: hidden; background: @list-avatar-bg-color; margin-right: @list-avatar-margin-right; @@ -174,6 +174,7 @@ .@{prefix}-loading { font-size: @list-load-font-size; + margin-right: @list-load-icon-margin; } .@{prefix}-loading.@{prefix}-is-load-more { diff --git a/style/web/components/list/_var.less b/style/web/components/list/_var.less index 1cce9bb29b..25c75656dd 100644 --- a/style/web/components/list/_var.less +++ b/style/web/components/list/_var.less @@ -19,7 +19,7 @@ @list-item-split-color: @border-level-1-color; @list-avatar-bg-color: @bg-color-page; @list-text-color-loading: @text-color-placeholder; -@list-icon-color-loading: @brand-color-5; +// @list-icon-color-loading: @brand-color-5; @list-text-color-load-more: @text-color-placeholder; @list-meta-title-color: @text-color-primary; @list-meta-description-color: @text-color-primary; @@ -29,29 +29,29 @@ @list-font-color: @text-color-primary; // 间距 -@list-padding: @spacer-2 @spacer-3; -@list-item-spacer-small: @spacer @spacer-2; -@list-item-spacer-default: @spacer-l @spacer-3; -@list-item-spacer-large: @spacer-2 @spacer-4; -@list-meta-padding: @spacer-s 0; -@list-avatar-margin-right: @spacer-2; -@list-meta-title-margin: 0 0 @spacer; -@list-meta-description-margin-right: @spacer-3; -@list-action-margin-right: @spacer-3; -@list-extra-margin: @spacer 0 @spacer @spacer-2; -@list-load-not-empty-padding: @spacer-4; -@list-load-icon-margin: @spacer; +@list-padding: @comp-paddingTB-m @comp-paddingLR-l; +@list-item-spacer-small: @comp-paddingTB-s @comp-paddingLR-m; +@list-item-spacer-default: @comp-paddingTB-m @comp-paddingLR-l; +@list-item-spacer-large: @comp-paddingTB-l @comp-paddingLR-xl; +// @list-meta-padding: @spacer-s 0; +@list-avatar-margin-right: @comp-margin-l; +@list-meta-title-margin: 0 0 @comp-margin-s; +@list-meta-description-margin-right: @comp-margin-xxl; +@list-action-margin-right: @comp-margin-l; +@list-extra-margin: @spacer 0 @spacer @spacer-2; //? +@list-load-not-empty-padding: @comp-paddingTB-m @comp-paddingLR-l; +@list-load-icon-margin: @comp-margin-s; // 尺寸 -@list-item-line-height: 22px; -@list-avatar-size: 56px; -@list-icon-size: @font-size-l; +@list-item-line-height: @text-line-height-base; +@list-avatar-size: @comp-size-xxxl; +@list-icon-size: @comp-size-xxxs; // 字体 @list-item-font: @font-body-medium; @list-meta-title-font: @font-title-medium; -@list-load-font-size: @font-size-l; -@list-load-more-font-size: @font-size-l; +@list-load-font-size: @comp-size-xxxs; +@list-load-more-font-size: @comp-size-xxxs; // 行号 -@list-load-line-height: @text-line-height-s; +@list-load-line-height: @text-line-height-base; diff --git a/style/web/components/loading/_var.less b/style/web/components/loading/_var.less index 85ee04e8bd..835fec67d8 100644 --- a/style/web/components/loading/_var.less +++ b/style/web/components/loading/_var.less @@ -18,21 +18,21 @@ // 字号 @loading-text-size: @font-body-medium; -@loading-icon-size: @font-size-xxl; -@loading-icon-size-small: @font-size-l; -@loading-icon-size-large: 56px; +@loading-icon-size: @comp-size-l; +@loading-icon-size-small: @comp-size-xxxs; +@loading-icon-size-large: @comp-size-xxxl; @loading-fullscreen-icon-size: @loading-icon-size; // 间距 -@loading-text-margin-left: 5px; +@loading-text-margin-left: @comp-margin-xs; @loading-gradient-padding-s: 1px; @loading-gradient-padding-m: 3px; @loading-gradient-padding-l: 5px; // Size -@loading-gradient-size-s: 16px; -@loading-gradient-size-m: 40px; -@loading-gradient-size-l: 56px; +@loading-gradient-size-s: @comp-size-xxxs; +@loading-gradient-size-m: @comp-size-xl; +@loading-gradient-size-l: @comp-size-xxxl; @loading-gradient-mask-size-s: 5.5px; @loading-gradient-mask-size-m: 11.5px; diff --git a/style/web/components/popup/_var.less b/style/web/components/popup/_var.less index 58c7c7bbf7..263cfdc4fc 100644 --- a/style/web/components/popup/_var.less +++ b/style/web/components/popup/_var.less @@ -4,15 +4,15 @@ @popup-text-color: @text-color-primary; // 间距 -@popup-padding: 4px @spacer; +@popup-padding: @comp-paddingTB-xs @comp-paddingLR-s; @popup-content-line-height: @text-line-height-base; @popup-arrow-width: 8px; @popup-arrow-height: 8px; -@popup-content-arrow-spacer: @spacer-2; -@popup-content-margin: @spacer; +@popup-content-arrow-spacer: @comp-margin-l; +@popup-content-margin: @comp-margin-s; // 箭头位置偏移量 -@popup-arrow-position: (@popup-arrow-width / 2); +@popup-arrow-position: @popup-arrow-width; @popup-content-font-size: @font-size-base; // 阴影 diff --git a/style/web/components/progress/_index.less b/style/web/components/progress/_index.less index 76b5bf6f5c..f430f3dd80 100644 --- a/style/web/components/progress/_index.less +++ b/style/web/components/progress/_index.less @@ -24,6 +24,7 @@ margin-left: @progress-info-spacer; color: @progress-info-dark-color; white-space: nowrap; + display: inline-flex; } &__icon { @@ -33,7 +34,7 @@ .@{prefix}-progress__bar { width: 100%; - height: 6px; + height: @progress-line-stroke-width; overflow: hidden; background: @progress-track-color; border-radius: @border-radius-round; @@ -49,7 +50,7 @@ //条形进度条 百分比内置 .@{prefix}-progress--plump { height: @progress-stroke-plump-width; - border-radius: (@progress-stroke-plump-width / 2); + border-radius: calc(@progress-stroke-plump-width / 2); display: flex; align-items: center; .@{prefix}-progress__info { @@ -85,12 +86,13 @@ .@{prefix}-progress__info { position: absolute; + display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: @progress-circle-font-size; - font-weight: 500; + font-weight: 600; line-height: 1; text-align: center; transform: translate(-50%, -50%); diff --git a/style/web/components/progress/_var.less b/style/web/components/progress/_var.less index 245ded4ca7..6c9f9cf3fb 100644 --- a/style/web/components/progress/_var.less +++ b/style/web/components/progress/_var.less @@ -30,19 +30,19 @@ // 尺寸 // line 进度条线宽 -@progress-line-stroke-width: 6px; +@progress-line-stroke-width: @size-3; // plump 进度条线宽 -@progress-stroke-plump-width: 18px; +@progress-stroke-plump-width: @comp-size-xxs; // 字体 -@progress-icon-font-size: 1.25em; +@progress-icon-font-size: calc(@font-size-base + 2px); @progress-icon-circle-font-size: 2.4em; @progress-plump-font-size: @font-size-s; @progress-circle-font-size: inherit; @progress-circle-font-weight: 500; // 间距 -@progress-info-spacer: @spacer-1; +@progress-info-spacer: @comp-margin-s; @progress-inner-border-radius: 50px; diff --git a/style/web/components/skeleton/_index.less b/style/web/components/skeleton/_index.less index 9ae3cb2d9d..b82c9ab4a8 100644 --- a/style/web/components/skeleton/_index.less +++ b/style/web/components/skeleton/_index.less @@ -12,7 +12,7 @@ &__row { display: flex; - margin-bottom: 10px; + margin-bottom: @comp-margin-l; align-items: center; } @@ -27,7 +27,7 @@ justify-content: center; background-color: @bg-color-secondarycontainer; color: @text-color-disabled; - margin-right: 15px; + margin-right: @comp-margin-l; &:first-child:last-child, &:last-child { diff --git a/style/web/components/swiper/_mixin.less b/style/web/components/swiper/_mixin.less index 6aaedc7554..e322ceaa2a 100644 --- a/style/web/components/swiper/_mixin.less +++ b/style/web/components/swiper/_mixin.less @@ -26,6 +26,7 @@ z-index: @swiper-navigation-z-index-default; background-color: transparent; color: @swiper-navigation-item-bg-hover; + transition: @anim-duration-base linear; cursor: pointer; & when(@direction = left) { left: @@arrowPosition; @@ -38,10 +39,12 @@ color: @swiper-navigation-item-bg-active; background-color: @swiper-navigation-item-bg; border-radius: @border-radius-default; + transition: @anim-duration-base linear; } &:active { background-color: @swiper-arrow-active; + transition: @anim-duration-base linear; } } } diff --git a/style/web/components/swiper/_var.less b/style/web/components/swiper/_var.less index 45dedb0067..a742c32ee2 100644 --- a/style/web/components/swiper/_var.less +++ b/style/web/components/swiper/_var.less @@ -68,12 +68,12 @@ @swiper-card-transform-scale: scale(.63); // 间距 -@swiper-navigation-item-margin-large: 9px; +@swiper-navigation-item-margin-large: 8px; @swiper-navigation-item-margin-medium: 6px; -@swiper-navigation-item-margin-small: 3px; +@swiper-navigation-item-margin-small: 4px; // 点 -@swiper-navigation-item-dot-size: 4px; +@swiper-navigation-item-dot-size: @size-2; // 位置 @swiper-z-index-default: 1; @@ -81,4 +81,4 @@ // 动画 @swiper-animation-duration: .5s; -@swiper-animation-time-fn: ease-in-out; +@swiper-animation-time-fn: @anim-time-fn-easing; diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index d7e629f781..54e341e3cb 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -24,8 +24,7 @@ /** 吸顶表头 Affix 组件，zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @table-resize-line-z-index: 1001; -@table-cell-padding: @table-td-padding-vertical-top @table-td-padding-horizontal - @table-td-padding-vertical-bottom @table-td-padding-horizontal; +@table-cell-padding: @table-td-padding-vertical @table-td-padding-horizontal; .scrollbar { .scrollbar(); @@ -87,7 +86,7 @@ } &__column-controller-trigger { - padding: 16px 0; + padding: @table-controller-trigger-padding; } &__content { @@ -96,12 +95,12 @@ } &__pagination { - padding: @table-padding-normal 0; + padding: @table-default-pagination-padding; box-sizing: border-box; } .t-icon { - font-size: @font-size-l; + font-size: @table-icon-size; } // table 标签基础样式 @@ -130,6 +129,12 @@ } } + th.@{prefix}-table__th-drag { + padding: 0; + height: 0; + text-align: center; + } + thead td, th { color: @table-head-text-color; @@ -160,8 +165,6 @@ // 紧凑型表格 &.@{prefix}-size-s { - font: @table-font-small; - th, td { padding: @table-padding-small; @@ -180,6 +183,7 @@ .@{prefix}-table__expandable-icon-cell, .@{prefix}-table__selection-cell { padding: 0; + height: 0; + td, + th { @@ -188,6 +192,12 @@ } } + td.@{prefix}-table__handle-draggable { + text-align: center; + height: 0; + padding: 0; + } + .@{prefix}-table__cell--selectable > .@{prefix}-checkbox { vertical-align: middle; } @@ -245,13 +255,11 @@ } .@{prefix}-table__pagination { - border: @border; - border-top: 0; - padding: @table-padding-normal @table-padding-horizontal; + // border-top: 0; + padding: @table-default-pagination-padding; } .@{prefix}-table__bottom-content + .@{prefix}-table__pagination { - border: 0; padding: 0; } @@ -300,7 +308,7 @@ tbody { tr { - transition: background-color .3s ease-in; + transition: background-color @anim-duration-base linear; &:hover { background-color: @table-highlight-dark-bg-color; @@ -314,7 +322,7 @@ &--hoverable { tbody { tr { - transition: background-color .3s ease-in; + transition: background-color @anim-duration-base linear; &:hover { background-color: @table-highlight-dark-bg-color; @@ -450,22 +458,23 @@ // 复杂表头容器 .@{prefix}-table__cell--title { display: flex; + align-items: center; } &__column-controller { &-desc { - margin-bottom: 24px; + margin-bottom: @comp-margin-xxl; } &-block { - padding: 10px 24px; - border: 1px solid @gray-color-3; + padding: @comp-paddingTB-m @comp-paddingLR-l; + border: 1px solid @table-border-color; border-bottom: 1px solid @table-border-color; & + & { border-top: 0; - padding: 24px; - border-bottom: 1px solid @gray-color-3; + padding: @comp-paddingTB-l @comp-paddingLR-l; + border-bottom: 1px solid @table-border-color; } } @@ -497,7 +506,6 @@ * 有边框模式，只有一个图标时，图标靠近边框右侧；有两个图标时，排序图标靠近标题，过滤图标靠近边框右侧 */ .@{prefix}-table__cell--sort-trigger { - width: 20px; text-align: center; vertical-align: text-bottom; @@ -553,14 +561,15 @@ .@{prefix}-table__filter-icon, .@{prefix}-table__sort-icon { - margin-left: 8px; + align-items: center; background-color: transparent; - display: inline-block; + display: inline-flex; cursor: pointer; vertical-align: text-bottom; + transition: @anim-duration-base linear; > svg { - margin-top: -4px; + margin-top: 0; } } @@ -571,6 +580,7 @@ &:hover { color: @table-icon-active-color; border-radius: @border-radius-circle; + transition: @anim-duration-base linear; } } @@ -579,18 +589,19 @@ &.@{prefix}-is-focus, &:hover { color: @table-icon-active-color; + transition: @anim-duration-base linear; } } .@{prefix}-table__filter-pop { + .@{prefix}-popup__content { + padding: 0; + } .@{prefix}-table__filter-pop-content { - margin: -8px; - .@{prefix}-table__filter-pop-content-inner { - padding: 16px; + padding: @comp-paddingTB-l @comp-paddingLR-l; } - .@{prefix}-radio-group { display: block; height: auto; @@ -602,43 +613,51 @@ .@{prefix}-checkbox, .@{prefix}-radio { display: block; - line-height: 28px; + // line-height: 28px; + margin: @comp-margin-xs 0; } .@{prefix}-table__filter-pop-content-button { border-top: @border; - padding: 16px; + padding: @comp-paddingTB-l @comp-paddingLR-l; .t-button + .t-button { - margin-left: @spacer-2; + margin-left: @comp-margin-l; } } } } .@{prefix}-table__filter-pop-content-inner { - padding: 16px; > .@{prefix}-input__wrap { width: 200px; } } +.@{prefix}-table__filter-pop-content-inner { + > .@{prefix}-date-range-picker__panel { + margin: calc(0px - @comp-margin-l); + } +} + .@{prefix}-table__sort-icon--active { color: @table-icon-active-color; + transition: @anim-duration-base linear; } .@{prefix}-table__double-icons { - display: inline-grid; - height: @table-line-height; + display: flex; + flex-direction: column; + justify-content: center; .@{prefix}-table__sort-icon { - height: @table-line-height-half; + position: relative;; } .@{prefix}-table-sort-asc { - margin-top: -2px; + top: @table-double-sort-icon-space; } .@{prefix}-table-sort-desc { - margin-top: -6px; + bottom: @table-double-sort-icon-space; } } @@ -646,6 +665,9 @@ display: flex; align-items: center; pointer-events: all; + height: @table-icon-size; + width: @table-icon-size; + margin-left: @table-filter-icon-margin-left; } // 有边框模式，排序图标和过滤图标同时存在时，排序图标紧挨标题，过滤图标靠右侧边框 @@ -674,17 +696,22 @@ } .@{prefix}-table__expand-box { - padding: @table-td-padding-vertical-top @table-td-padding-horizontal - @table-td-padding-vertical-bottom @table-td-padding-horizontal; - display: inline-grid; - vertical-align: middle; + // padding: @table-td-padding-vertical-top @table-td-padding-horizontal + // @table-td-padding-vertical-bottom @table-td-padding-horizontal; + // display: inline-grid; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + // vertical-align: middle; color: @table-icon-default-color; cursor: pointer; - transition: all .2s ease 0s; - align-items: center; + transition: all @anim-duration-base @anim-time-fn-easing 0s; &:hover { color: @table-icon-active-color; + transition: @anim-duration-base linear; } } @@ -706,16 +733,16 @@ } .@{prefix}-table-expandable-icon-cell + .@{prefix}-table__cell--selectable[key="row-select"] { - padding-left: 10px; + padding-left: @comp-margin-s; } .@{prefix}-table__filter--bottom-buttons { display: flex; justify-content: flex-end; - padding: 16px; + padding: @comp-paddingTB-l @comp-paddingLR-l; border-top: @border; > .@{prefix}-button + .@{prefix}-button { - margin-left: 8px; + margin-left: @comp-margin-s; } } @@ -730,7 +757,7 @@ align-items: center; justify-content: center; > .@{prefix}-button { - margin-left: 8px; + margin-left: @comp-margin-s; } } @@ -893,19 +920,20 @@ } .@{prefix}-table__tree-op-icon { - margin-right: @spacer; + margin-right: @comp-margin-s; cursor: pointer; display: inline-flex; vertical-align: -3px; &:hover { color: @table-icon-active-color; + transition: @anim-duration-base linear; } } .@{prefix}-table__tree-leaf-node .@{prefix}-table__tree-op-icon { min-width: 0; - margin-right: 2px; + margin-right: @comp-margin-xxs; } // 虚拟滚动游标 @@ -913,7 +941,7 @@ position: absolute; width: 1px; height: 1px; - transition: transform .2s; + transition: transform @anim-duration-base; } .@{prefix}-table__virtual-scroll-header { @@ -936,7 +964,7 @@ .@{prefix}-table__affixed-header-elm { overflow: auto; - transition: opacity .15s linear; + transition: opacity @anim-duration-base linear; opacity: 1; // 隐藏表头滚动条：为了 IE10以下的浏览器，暂时不能使用这种方式 // .hideScrollbar(); @@ -1028,6 +1056,13 @@ .t-icon { margin-left: @table-td-editalbe-icon-margin; + font-size: @table-icon-size; + transition: @anim-duration-base linear; + } + + &:hover { + // color: @table-icon-active-color; + transition: @anim-duration-base linear; } } } @@ -1104,5 +1139,5 @@ // 超出省略的文本，也需要跟着尺寸变化 .@{prefix}-table__ellipsis-content.@{prefix}-size-s .@{prefix}-popup__content { - font: @table-font-small; + font: @table-font; } diff --git a/style/web/components/table/_var.less b/style/web/components/table/_var.less index eb02ff722c..a64f449c4c 100644 --- a/style/web/components/table/_var.less +++ b/style/web/components/table/_var.less @@ -13,26 +13,33 @@ @table-icon-active-color: @brand-color; @table-filter-icon-default-color: @text-color-primary; @table-color-empty: @text-color-disabled; -@table-fixed-cell-border-color: @bg-color-component; +@table-fixed-cell-border-color: @component-border; @table-sort-bg-color: @bg-color-secondarycontainer; // Size -@table-line-height: 22px; -@table-line-height-half: 16px; +@table-line-height: @text-line-height-base; +@table-line-height-half: calc(@font-size-base + 2px); @table-font: @font-body-medium; -@table-font-small: @font-body-small; -@table-loading-size: 16px; -@table-padding-horizontal: @spacer-3; -@table-padding-normal: @spacer-2; -@table-padding-small: @spacer; -@table-padding-large: @spacer-3; +@table-loading-size: @table-icon-size; +@table-padding-horizontal: @comp-paddingLR-l; +@table-padding-normal: @comp-paddingTB-m @comp-paddingLR-l; +@table-padding-small: @comp-paddingTB-s @comp-paddingLR-s; +@table-padding-large: @comp-paddingTB-l @comp-paddingLR-xl; @table-td-padding-vertical-top: 13px; @table-td-padding-vertical-bottom: 11px; -@table-td-padding-horizontal: @spacer-3; -@table-td-editalbe-icon-margin: @spacer; +@table-td-padding-vertical: @comp-paddingTB-m; +@table-td-padding-horizontal: @comp-paddingLR-l; +@table-td-editalbe-icon-margin: @comp-margin-s; +@table-pagination-padding-normal: @comp-paddingTB-l @comp-paddingLR-l; // Safari 13-14 有 bug: box-shadow 第三个值 spread-radius 为负值，且相对于容器宽度占比较大时，会显示为黑块 // https://bugs.webkit.org/show_bug.cgi?id=209930 // https://medium.com/@andrea.verlicchi/inset-box-shadow-rendering-bug-on-safari-ios-13-4-6bf4256a1ee0 @table-fixed-cell-box-shadow-spread-radius: -10px; @table-fixed-cell-border-width: 4px; + +@table-controller-trigger-padding: @comp-paddingTB-l 0; +@table-default-pagination-padding: @comp-paddingTB-l @comp-paddingLR-l; +@table-icon-size: @font-size-l; +@table-double-sort-icon-space: @comp-margin-xxs; +@table-filter-icon-margin-left: @comp-margin-s; diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less index b2977ee0d3..8ddce29ae0 100644 --- a/style/web/components/tag/_index.less +++ b/style/web/components/tag/_index.less @@ -23,7 +23,7 @@ white-space: nowrap; .t-icon { - margin-right: 4px; + margin-right: @tag-icon-margin-right; width: @tag-icon-size; height: @tag-icon-size; flex-shrink: 0; @@ -31,7 +31,7 @@ .@{prefix}-tag__icon-close { margin-right: 0; - margin-left: 8px; + margin-left: @tag-close-icon-margin-right; font: @tag-large-font; cursor: pointer; transition: color @anim-duration-base @anim-time-fn-easing; @@ -226,10 +226,10 @@ &--dark&:not(.@{prefix}-tag--default) { .@{prefix}-tag__icon-close { - fill: @tag-close-icon-color--dark; + color: @tag-close-icon-color--dark; &:hover { - fill: @tag-close-icon-hover-color--dark; + color: @tag-close-icon-hover-color--dark; } } } diff --git a/style/web/components/tag/_var.less b/style/web/components/tag/_var.less index 079747c160..5e5437de08 100644 --- a/style/web/components/tag/_var.less +++ b/style/web/components/tag/_var.less @@ -23,14 +23,14 @@ @tag-danger-color: @error-color; // light color -@tag-default-color-light: @gray-color-1; +@tag-default-color-light: @bg-color-secondarycontainer; @tag-primary-color-light: @brand-color-light; -@tag-success-color-light: @success-color-1; -@tag-warning-color-light: @warning-color-1; -@tag-error-color-light: @error-color-1; +@tag-success-color-light: @success-color-light; +@tag-warning-color-light: @warning-color-light; +@tag-error-color-light: @error-color-light; // border -@tag-outline-default-border-color: @border-level-2-color; +@tag-outline-default-border-color: @component-border; @tag-outline-primary-border-color: @tag-primary-color; @tag-outline-success-border-color: @tag-success-color; @tag-outline-warning-border-color: @tag-warning-color; @@ -42,9 +42,9 @@ @tag-large-font: @font-body-medium; // padding -@tag-small-padding: 0px @spacer-s; -@tag-medium-padding: 0px @spacer; -@tag-large-padding: 0px 12px; +@tag-small-padding: 0px @comp-paddingLR-xs; +@tag-medium-padding: 0px @comp-paddingLR-s; +@tag-large-padding: 0px @comp-paddingLR-m; // text color @tag-text-color: @text-color-anti; @@ -58,19 +58,23 @@ @tag-default-border-width: 1px; // height -@tag-height-small: 20px; -@tag-height-medium: 24px; -@tag-height-large: 32px; +@tag-height-small: @comp-size-xxs; +@tag-height-medium: @comp-size-xs; +@tag-height-large: @comp-size-m; // icon -@tag-icon-size: 16px; +@tag-icon-size: calc(@font-size-base + 2px); @tag-close-icon-color: @text-color-placeholder; @tag-close-icon-hover-color: @text-color-primary; -@tag-close-icon-color--dark: @font-white-1; -@tag-close-icon-hover-color--dark: @font-white-2; +@tag-close-icon-color--dark: @font-white-2; +@tag-close-icon-hover-color--dark: @font-white-1; // link @link-tag-hover-bg: @bg-color-component-hover; @link-tag-hover-color: @brand-color; @link-tag-active-bg: @bg-color-component-active; @link-tag-active-color: @brand-color-active; + +// margin +@tag-icon-margin-right: @comp-margin-xs; +@tag-close-icon-margin-right: @comp-margin-s; diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less index 3caa723053..4a9ba5fa3e 100644 --- a/style/web/components/tooltip/_index.less +++ b/style/web/components/tooltip/_index.less @@ -23,6 +23,7 @@ .@{prefix}-popup__content { color: @tooltip-text-color; background: @tooltip-bg; + box-shadow: inset 0 .5px 0 #5e5e5e, inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; } } @@ -70,6 +71,22 @@ box-shadow: none; } } + + &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before { + box-shadow: inset -.5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; + } + + &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before { + box-shadow: inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e; + } + + &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before { + box-shadow: inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; + } + + &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before { + box-shadow: inset .5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; + } } .@{prefix}-popup[data-popper-placement^="top"].@{prefix}-tooltip .@{prefix}-popup__arrow { @@ -81,5 +98,5 @@ } .@{prefix}-popup[data-popper-placement^="right"].@{prefix}-tooltip .@{prefix}-popup__arrow { - left: -@tooltip-arrow-position; + left: calc(0px - @tooltip-arrow-position); } diff --git a/style/web/components/tooltip/_var.less b/style/web/components/tooltip/_var.less index c199e9a6aa..e407ce2a39 100644 --- a/style/web/components/tooltip/_var.less +++ b/style/web/components/tooltip/_var.less @@ -2,7 +2,7 @@ @tooltip-max-width: 480px; // 颜色 -@tooltip-bg: @gray-color-12; // tooltip 背景色不随组件库浅色/深色模式切换而改变，因此使用固定色值变量 +@tooltip-bg: @gray-color-13; // tooltip 背景色不随组件库浅色/深色模式切换而改变，因此使用固定色值变量 @tooltip-color-primary: @brand-color; @tooltip-bg-primary: @brand-color-light; @tooltip-color-success: @success-color; @@ -14,7 +14,7 @@ @tooltip-text-color: @text-color-anti; @tooltip-light-text-color: @text-color-primary; // 间距 -@tooltip-default-margin: @spacer; +@tooltip-default-margin: @comp-margin-s; //tooltip箭头位移量 -@tooltip-arrow-position: 4px; +@tooltip-arrow-position: @comp-margin-xs; From ec4150a999c5c60ec7a2d1e99d1d9ffc0d58245f Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 14 Nov 2022 16:40:01 +0800 Subject: [PATCH 039/312] fix(image-viewer): replace font-size attr with font attr (#1004) --- style/web/components/image-viewer/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 5e30c1a693..676e2d8579 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -25,7 +25,7 @@ justify-content: center; align-items: center; align-content: center; - font-size: @image-viewer-error-font; + font: @image-viewer-error-font; .@{prefix}-image-viewer__img-error-text { margin-top: @comp-margin-s; From 2538f8cc077ad5fb089c48284895bcab96421356 Mon Sep 17 00:00:00 2001 From: lockiechen <33082528+lockiechen@users.noreply.github.com> Date: Mon, 14 Nov 2022 16:40:45 +0800 Subject: [PATCH 040/312] =?UTF-8?q?docs:=20mobile-vue=20Loading=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E4=BB=A3=E7=A0=81=E6=94=B9=E9=80=A0=20#413=20(#994)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: lockiechen <290015551@qq.com> --- docs/mobile/api/loading.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/mobile/api/loading.md b/docs/mobile/api/loading.md index 4788979e9a..e0402657d8 100644 --- a/docs/mobile/api/loading.md +++ b/docs/mobile/api/loading.md @@ -1,6 +1,6 @@ --- title: Loading 加载中 -description: 加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。 +description: 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。 spline: base isComponent: true toc: false @@ -8,19 +8,15 @@ toc: false ### 类型 -#### 纯图标 +#### 纯icon {{ base }} -#### 页面进度条加载 - -{{ bar }} - -#### 图标加文字横向 +#### icon加文字横向 {{ horz }} -#### 图标加文字竖向 +#### icon加文字竖向 {{ vert }} @@ -28,13 +24,19 @@ toc: false {{ pure-text }} +#### 页面进度条加载 + +{{ bar }} + #### 延迟加载 {{ delay }} -### 规格 -图标加文字横向 +### 加载速度 + +{{ speed }} +### 规格 {{ size }} From 9edb9c47d02f4714f39360a7190db122b08cff28 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 14 Nov 2022 16:42:22 +0800 Subject: [PATCH 041/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20comment=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1001)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 修复 comment 样式问题 * feat: 修复 comment 样式问题 --- style/web/components/button/_index.less | 5 +++++ style/web/components/comment/_index.less | 13 +++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index e6c42da57d..f2b3cef587 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -44,6 +44,11 @@ text-decoration: none; + .@{prefix}-button__text { + display: flex; + align-items: center; + } + .@{prefix}-button__text, .t-icon { position: relative; diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less index 2914b89307..4543f16034 100644 --- a/style/web/components/comment/_index.less +++ b/style/web/components/comment/_index.less @@ -85,16 +85,13 @@ justify-content: flex-end; list-style: none; padding: 0; + gap: @spacer; - & > li { - color: @comment-text-color-secondary; - margin-left: @comment-action-margin-left; - font: @comment-secondary-text-size; - cursor: pointer; - user-select: none; + .@{prefix}-button--variant-text { + color: @text-color-placeholder; - &:hover { - color: @comment-text-color-hover; + .@{prefix}-button__text { + gap: @spacer-s; } } } From 047493601144fdfc0da842dfc72d3fb7fd7e3f02 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 14 Nov 2022 16:52:13 +0800 Subject: [PATCH 042/312] fix(web): table, empty editable cell (#1000) Co-authored-by: sheepluo --- style/web/components/table/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 54e341e3cb..3dc01ec8e2 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -1052,6 +1052,7 @@ .@{prefix}-table:not(.@{prefix}-table--row-edit) { .@{prefix}-table__cell--editable { + min-height: 22px; cursor: pointer; .t-icon { From b7ab7bbe89b081dfa3f9e7c115b1b1b1fdba527a Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 14 Nov 2022 21:04:01 +0800 Subject: [PATCH 043/312] feat: comment collapse size token (#1005) --- style/web/components/collapse/_index.less | 15 ++++++------ style/web/components/collapse/_var.less | 7 +++++- style/web/components/comment/_index.less | 30 ++++++++++++++--------- style/web/components/comment/_var.less | 24 ++++++++++-------- style/web/components/list/_index.less | 4 --- style/web/components/list/_var.less | 1 - 6 files changed, 46 insertions(+), 35 deletions(-) diff --git a/style/web/components/collapse/_index.less b/style/web/components/collapse/_index.less index 5757f4e138..aeb48580a1 100644 --- a/style/web/components/collapse/_index.less +++ b/style/web/components/collapse/_index.less @@ -33,7 +33,7 @@ .@{collapse-panel-cls} { &__icon { - transition: transform .25s; + transition: all @anim-duration-base @anim-time-fn-easing; cursor: pointer; display: flex; align-items: center; @@ -44,11 +44,11 @@ } &--left { - margin-right: @spacer-1; + margin-right: @collapse-panel-header-icon-margin; } &--right { - margin-left: @spacer-1; + margin-left: @collapse-panel-header-icon-margin; } &--active { @@ -58,7 +58,7 @@ &:hover { background-color: @bg-color-container-hover; border-radius: @border-radius-small; - transition: background-color @anim-duration-base; + transition: background-color @anim-duration-base @anim-time-fn-easing; } } @@ -66,9 +66,8 @@ overflow: hidden; .@{collapse-panel-cls}__header { - padding: 0 16px; + padding: @collapse-panel-header-padding; border-bottom: @collapse-border-size; - height: @collapse-panel-header-height; font: @collapse-panel-header-text; display: flex; align-items: center; @@ -98,7 +97,7 @@ } } .@{collapse-panel-cls}__content { - padding: 12px 16px 12px 40px; + padding: @collapse-panel-content-padding; color: @collapse-panel-content-text-color; } } @@ -126,5 +125,5 @@ .@{prefix}-slide-down-enter-active, .@{prefix}-slide-down-leave-active { - transition: height .3s, padding .3s; + transition: height @anim-duration-base, padding @anim-duration-base; } diff --git a/style/web/components/collapse/_var.less b/style/web/components/collapse/_var.less index a6ab446405..98d3735618 100644 --- a/style/web/components/collapse/_var.less +++ b/style/web/components/collapse/_var.less @@ -14,7 +14,7 @@ @collapse-cls: ~"@{prefix}-collapse"; @collapse-panel-cls: ~"@{collapse-cls}-panel"; // 高度 -@collapse-panel-header-height: 46px; +// @collapse-panel-header-height: 46px; // 颜色 @collapse-border-size: solid 1px @component-border; @@ -24,3 +24,8 @@ // 字体颜色 @collapse-panel-content-text-color: @text-color-secondary; + +// 间距 +@collapse-panel-header-padding: @comp-paddingTB-m @comp-paddingLR-l; +@collapse-panel-header-icon-margin: @comp-margin-s; +@collapse-panel-content-padding: @comp-paddingTB-m @comp-paddingLR-l @comp-paddingTB-m calc(@comp-paddingLR-l + @comp-margin-xxl) ; diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less index 4543f16034..6e930116ff 100644 --- a/style/web/components/comment/_index.less +++ b/style/web/components/comment/_index.less @@ -25,8 +25,8 @@ } &__avatar-image { - width: 56px; - height: 56px; + width: @comment-avatar-size; + height: @comment-avatar-size; border-radius: @border-radius-circle; } @@ -41,23 +41,19 @@ justify-content: flex-start; align-items: baseline; margin-bottom: @comment-author-margin-bottom; - - & > span { - padding-right: @comment-padding-s; - } } &__name { display: inline-flex; align-items: center; font: @comment-author-text-size; + padding-right: @comment-author-name-padding-right; cursor: pointer; } &__time { font: @comment-secondary-text-size; - padding-top: (@spacer-1 / 4); - padding-bottom: (@spacer-1 / 4); + padding-right: @comment-author-time-padding-right; color: @comment-text-color-secondary; } @@ -69,7 +65,7 @@ &__quote { margin-top: @comment-quote-margin-top; border-left: 4px solid @comment-border-color-default; - padding-left: 16px; + padding-left: @comment-quote-padding-left; & .@{prefix}-comment { &__name, @@ -85,13 +81,13 @@ justify-content: flex-end; list-style: none; padding: 0; - gap: @spacer; + gap: @comment-actions-gap; .@{prefix}-button--variant-text { color: @text-color-placeholder; .@{prefix}-button__text { - gap: @spacer-s; + gap: @comment-actions-gap; } } } @@ -102,5 +98,17 @@ background-color: @comment-bg-color-secondary; border-radius: @border-radius-medium; padding: @comment-reply-padding; + + .@{prefix}-button--variant-text { + color: @text-color-placeholder; + + &:hover { + background-color: @bg-color-secondarycontainer-hover; + } + + .@{prefix}-button__text { + gap: @comment-actions-gap; + } + } } } diff --git a/style/web/components/comment/_var.less b/style/web/components/comment/_var.less index 9386259f81..25b866545b 100644 --- a/style/web/components/comment/_var.less +++ b/style/web/components/comment/_var.less @@ -18,7 +18,7 @@ @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: @bg-color-secondarycontainer; +@comment-border-color-default: @component-stroke; // 字体尺寸、行高 @comment-author-text-size: @font-title-medium; @@ -26,12 +26,16 @@ @comment-secondary-text-size: @font-body-small; // 盒模型尺寸 -@comment-padding-s: @spacer-1; -@comment-avatar-margin-right: @spacer-3; -@comment-author-margin-bottom: @spacer-s; -@comment-actions-margin-top: @spacer-1; -@comment-action-margin-left: @spacer-3; -@comment-quote-margin-top: @spacer-2; -@comment-reply-margin-left: @spacer-10; -@comment-reply-margin-top: @spacer-2; -@comment-reply-padding: @spacer-2 @spacer-3; +@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; diff --git a/style/web/components/list/_index.less b/style/web/components/list/_index.less index 34dcc3cc6c..5b93d59761 100644 --- a/style/web/components/list/_index.less +++ b/style/web/components/list/_index.less @@ -107,10 +107,6 @@ } } } - - &__extra { - margin: @list-extra-margin; - } } &--split { diff --git a/style/web/components/list/_var.less b/style/web/components/list/_var.less index 25c75656dd..6a1bdaf436 100644 --- a/style/web/components/list/_var.less +++ b/style/web/components/list/_var.less @@ -38,7 +38,6 @@ @list-meta-title-margin: 0 0 @comp-margin-s; @list-meta-description-margin-right: @comp-margin-xxl; @list-action-margin-right: @comp-margin-l; -@list-extra-margin: @spacer 0 @spacer @spacer-2; //? @list-load-not-empty-padding: @comp-paddingTB-m @comp-paddingLR-l; @list-load-icon-margin: @comp-margin-s; From 6ffc848b718ffdc341198c6a9ba25e68ab4bb3d9 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 15 Nov 2022 11:20:00 +0800 Subject: [PATCH 044/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20transfer?= =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1006)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/transfer/_index.less | 9 ++------- style/web/components/transfer/_var.less | 3 +-- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/style/web/components/transfer/_index.less b/style/web/components/transfer/_index.less index 856b6c60a5..6c819828c8 100644 --- a/style/web/components/transfer/_index.less +++ b/style/web/components/transfer/_index.less @@ -171,19 +171,14 @@ margin: @transfer-operations-margin; vertical-align: middle; overflow: hidden; + gap: @spacer-2; - button { - display: block; + .@{prefix}-button { padding: @transfer-operations-button-padding; height: @transfer-operations-button-height; - line-height: @transfer-operations-button-line-height; transition: none; // 不要有过渡效果 不然在整体里面很突兀 会有跳动感 } - button:first-child { - margin-bottom: @transfer-operations-button-first-margin-bottom; - } - .t-icon { font-size: @transfer-operations-icon-size; } diff --git a/style/web/components/transfer/_var.less b/style/web/components/transfer/_var.less index cd45877224..eb31423a72 100644 --- a/style/web/components/transfer/_var.less +++ b/style/web/components/transfer/_var.less @@ -19,8 +19,7 @@ @transfer-list-wrapper-padding: @spacer * 1.5; @transfer-list-pagination-padding: 0 @spacer 0 @spacer * .5; @transfer-operations-margin: auto @spacer; -@transfer-operations-button-padding: 0 3px 1px; -@transfer-operations-button-first-margin-bottom: 14px; +@transfer-operations-button-padding: 0 3px; // 有翻页时候transfer的下内边距 @transfer-with-pagination-padding-bottom: 32px; // 有footer时候transfer的下内边距 From 308fb3cf4167b323a46299b05d9751f8852622ef Mon Sep 17 00:00:00 2001 From: WenKang Date: Tue, 15 Nov 2022 14:32:45 +0800 Subject: [PATCH 045/312] Feat: avatar badge card comment size token (#1007) * feat: comment collapse size token * feat: avatar badge card comment size token --- style/web/components/avatar/_var.less | 18 +++++++++--------- style/web/components/badge/_index.less | 4 ++-- style/web/components/badge/_var.less | 8 ++++---- style/web/components/card/_index.less | 15 +++++++-------- style/web/components/card/_var.less | 23 ++++++++++++----------- style/web/components/comment/_index.less | 1 + 6 files changed, 35 insertions(+), 34 deletions(-) diff --git a/style/web/components/avatar/_var.less b/style/web/components/avatar/_var.less index 5b0127ee65..f35f77e33f 100644 --- a/style/web/components/avatar/_var.less +++ b/style/web/components/avatar/_var.less @@ -3,9 +3,9 @@ @avatar-text-color: @text-color-brand; //头像大小 -@avatar-size-small: 24px; -@avatar-size-medium: 32px; -@avatar-size-large: 40px; +@avatar-size-small: @comp-size-xs; +@avatar-size-medium: @comp-size-m; +@avatar-size-large: @comp-size-xl; //字体 @avatar-font-small: @font-size-base; @@ -13,9 +13,9 @@ @avatar-font-large: @font-size-xl; //图标 -@avatar-icon-small: @icon-default; -@avatar-icon-medium: 20px; -@avatar-icon-large: @icon-l; +@avatar-icon-small: @comp-size-xxxs; +@avatar-icon-medium: @comp-size-xxs; +@avatar-icon-large: @comp-size-xs; //边框 @avatar-border-radius-circle: @border-radius-circle; @@ -23,9 +23,9 @@ @avatar-border-color: @bg-color-container; //组合头像偏移量 -@avatar-group-offset-small: -4px; -@avatar-group-offset-medium: -6px; -@avatar-group-offset-large: -8px; +@avatar-group-offset-small: calc(0px - @size-2); +@avatar-group-offset-medium: calc(0px - @size-3); +@avatar-group-offset-large: calc(0px - @size-4); //z-index @avatar-group-init-zIndex: 50; diff --git a/style/web/components/badge/_index.less b/style/web/components/badge/_index.less index 0a7f048487..18a7060d24 100644 --- a/style/web/components/badge/_index.less +++ b/style/web/components/badge/_index.less @@ -49,14 +49,14 @@ padding-left: @badge-padding; min-width: @badge-min-width; height: @badge-height; - border-radius: (@badge-height / 2); + border-radius: calc(@badge-height / 2); background-color: @badge-color; line-height: @badge-height; &.t-size-s { padding-right: @badge-padding-s; padding-left: @badge-padding-s; - min-width: @badge-height-s; + min-width: @badge-min-width; height: @badge-height-s; line-height: @badge-height-s; } diff --git a/style/web/components/badge/_var.less b/style/web/components/badge/_var.less index 5d2ea83672..a76d24da6a 100644 --- a/style/web/components/badge/_var.less +++ b/style/web/components/badge/_var.less @@ -17,9 +17,9 @@ // 尺寸 // 默认尺寸 circle/round 高度 -@badge-height: 20px; +@badge-height: @comp-size-xxs; // 小尺寸 circle/round 高度 -@badge-height-s: 16px; +@badge-height-s: @comp-size-xxxs; // dot 宽/高 @badge-dot-size: 6px; // @badge-status-size: 6px; @@ -30,6 +30,6 @@ // 间距 // 默认尺寸circle/round 左右padding -@badge-padding: 6px; +@badge-padding: calc((@badge-height - @badge-min-width) / 2); // 小尺寸circle/round 左右padding -@badge-padding-s: 4px; +@badge-padding-s: calc((@badge-height-s - @badge-min-width) / 2); diff --git a/style/web/components/card/_index.less b/style/web/components/card/_index.less index 8da6661779..a58ca3c7ee 100644 --- a/style/web/components/card/_index.less +++ b/style/web/components/card/_index.less @@ -16,7 +16,7 @@ border-radius: @card-border-radius; background-color: @card-background; color: @text-color-primary; - transition: box-shadow @anim-duration-base ease-in-out; + transition: box-shadow @anim-duration-base @anim-time-fn-easing; } .@{prefix}-card--bordered { @@ -42,7 +42,6 @@ .@{prefix}-card__body { display: flow-root; padding: @card-body-padding; - line-height: 1.5; } .@{prefix}-card__header { @@ -51,7 +50,6 @@ align-items: center; padding: @card-header-padding; position: relative; - line-height: 1.5; &-wrapper { flex: 1; @@ -66,6 +64,7 @@ .@{prefix}-card__footer { display: flex; + align-items: center; justify-content: space-between; padding: @card-footer-padding; @@ -89,13 +88,15 @@ } .@{prefix}-card__avatar { - margin-right: @spacer; + margin-right: @card-avatar-margin; + width: @card-avatar-size; + height: @card-avatar-size; } .@{prefix}-card__title { font: @font-title-medium; color: @card-color; - margin-right: @spacer-2; + margin-right: @card-title-margin; word-break: break-all; } @@ -108,7 +109,7 @@ .@{prefix}-card__description { font: @font-body-medium; color: @card-subtitle-color; - margin-top: (@spacer / 2); + margin-top: @card-description-margin; word-break: break-all; } @@ -119,9 +120,7 @@ .@{prefix}-card__title--bordered { border-bottom: 1px solid @card-border-color; - padding-bottom: @spacer-2; + .@{prefix}-card__body { - padding-top: @spacer-2; } } diff --git a/style/web/components/card/_var.less b/style/web/components/card/_var.less index 0844af44fc..a244475b61 100644 --- a/style/web/components/card/_var.less +++ b/style/web/components/card/_var.less @@ -1,21 +1,22 @@ @card-border-radius: @border-radius-medium; // medium -@card-body-padding: @spacer-2 @spacer-3; - -@card-header-padding: @spacer-2 @spacer-3; - -@card-footer-padding: @spacer-2 @spacer-3; - -@card-avatar-size: 56px; +@card-body-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@card-header-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@card-footer-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@card-avatar-size: @comp-size-xxxl; // small -@card-body-padding-s: (@spacer-2 / 2) (@spacer-3 / 2); -@card-header-padding-s: (@spacer-2 / 2) (@spacer-3 / 2); - -@card-footer-padding-s: (@spacer-2 / 2) (@spacer-3 / 2); +@card-body-padding-s: @comp-paddingTB-s @comp-paddingLR-l; +@card-header-padding-s: @comp-paddingTB-s @comp-paddingLR-l; +@card-footer-padding-s: @comp-paddingTB-s @comp-paddingLR-l; @card-border-color: @component-border; @card-background: @bg-color-container; @card-color: @text-color-primary; @card-subtitle-color: @text-color-secondary; + +// margin +@card-avatar-margin: @comp-margin-l; +@card-description-margin: @comp-margin-xs; +@card-title-margin: @comp-margin-l; diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less index 6e930116ff..914abc160a 100644 --- a/style/web/components/comment/_index.less +++ b/style/web/components/comment/_index.less @@ -22,6 +22,7 @@ flex-shrink: 0; margin-right: @comment-avatar-margin-right; cursor: pointer; + display: flex; } &__avatar-image { From 9b9f4282c8736d0e4909742f028948508627d7fe Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 15 Nov 2022 16:23:10 +0800 Subject: [PATCH 046/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20image-view?= =?UTF-8?q?er=20=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1008)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 修复 image-viewer 样式问题 * feat: 修复 image-viewer 样式问题 --- style/web/components/dialog/_index.less | 6 +- style/web/components/image-viewer/_index.less | 93 +++++++++---------- style/web/components/image-viewer/_var.less | 7 ++ 3 files changed, 54 insertions(+), 52 deletions(-) diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index e354b268ba..7c201058dd 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -47,13 +47,14 @@ font: @dialog-header-font; font-weight: @dialog-header-weight; display: flex; - align-items: flex-start; + align-items: center; word-break: break-word; + gap: @dialog-header-content-margin-right; + box-sizing: border-box; .@{prefix}-dialog__header-content { display: flex; align-items: flex-start; - margin-right: @dialog-header-content-margin-right; width: 100%; } @@ -131,7 +132,6 @@ height: @dialog-close-icon-size; align-items: center; border-radius: @border-radius-default; - background: @dialog-bg-color; transition: all @anim-duration-base linear; padding: @dialog-closebtn-padding; diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 676e2d8579..391ad45e7a 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -154,7 +154,11 @@ align-items: center; justify-content: center; background-color: @bg-color-container; - padding-bottom: @image-viewer-modal-header-padding-bottom; + padding: @image-viewer-header-hide-padding; + + &.@{prefix}-is-show { + padding: @image-viewer-header-padding; + } @keyframes preview-icon-range { 0% { @@ -177,9 +181,11 @@ } .@{prefix}-image-viewer__header-pre-bt { - width: auto; - height: auto; - padding: @image-viewer-modal-header-pre-bt-padding; + width: @comp-size-xxs; + height: @comp-size-xxs; + display: inline-flex; + justify-content: center; + align-items: center; position: absolute; left: 50%; bottom: 0; @@ -190,7 +196,7 @@ box-shadow: @shadow-inset; animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-unrange; - > .t-icon { + .t-icon { font-size: @font-size-l; } @@ -205,13 +211,13 @@ } to { - height: @image-viewer-modal-header-size; + height: @image-viewer-header-box-height; } } @keyframes preview-image-hide { 0% { - height: @image-viewer-modal-header-size; + height: @image-viewer-header-box-height; } to { @@ -229,32 +235,29 @@ } } - @header-box-width: 52px; - @header-box-margin: 4px; - @header-box-border-width: 1px; - @header-box-all-width: @header-box-width + @header-box-margin * 2 + @header-box-border-width * 2; - .@{prefix}-image-viewer__header-prev { - width: @header-box-all-width * 7; + width: @image-viewer-header-all-box-width; animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-hide; - overflow: auto hidden; display: flex; position: relative; + overflow: hidden; - .@{prefix}-image-viewer__bokeh-left, .@{prefix}-image-viewer__bokeh-right { + &::before, + &::after { + content: ""; position: absolute; height: 100%; z-index: 1; - width: @header-box-all-width * 3; + width: @image-viewer-header-box-width; pointer-events: none; } - .@{prefix}-image-viewer__bokeh-left { + &::before { left: 0; background-image: linear-gradient(to right, @bg-color-container, rgba(255, 255, 255, 0%)); } - .@{prefix}-image-viewer__bokeh-right { + &::after { right: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0%), @bg-color-container); } @@ -265,27 +268,29 @@ display: flex; align-items: center; justify-content: center; - margin-left: @header-box-all-width * 3; + gap: @spacer-s; + margin-left: @image-viewer-header-box-width-margin-left; .@{prefix}-image-viewer__header-box { - width: 100%; - height: @image-viewer-modal-header-image-box-size; - margin: @image-viewer-modal-header-image-box-margin; + box-sizing: border-box; + width: @image-viewer-header-box-width; + height: @image-viewer-header-box-height; transition: @anim-duration-base; overflow: hidden; border-radius: @border-radius-default; display: flex; align-items: center; justify-content: center; - border: @header-box-border-width solid transparent; + border: 1px solid transparent; background-color: @bg-color-secondarycontainer; .@{prefix}-image-viewer__header-img { - max-height: 100%; + width: auto; + height: 100%; } &:hover, &.@{prefix}-is-active { - border: 1px solid @brand-color; + border-color: @brand-color; } } } @@ -335,7 +340,7 @@ } &.@{prefix}-is-disabled { - color: @image-viewer__icon-color--disabled; + color: rgba(255, 255, 255, 22%); } &.@{prefix}-is-disabled:hover { @@ -407,28 +412,6 @@ } } -.@{prefix}-image-viewer__mini-header { - display: flex; - justify-content: center; - align-items: center; - background-color: @bg-color-secondarycontainer; - height: 40px; - width: 100%; - font-size: @font-size-base; - - .@{prefix}-image-viewer__mini-close { - position: absolute; - right: 5px; - cursor: pointer; - transition: @anim-duration-base; - - &:hover .t-icon { - border-radius: 50%; - background-color: @bg-color-secondarycontainer-hover; - } - } -} - .@{prefix}-image-viewer-mini__footer { .@{prefix}-image-viewer__utils { position: inherit; @@ -472,7 +455,7 @@ .@{prefix}-image-viewer__dialog { .@{prefix}-dialog__header { - padding-right: 0; + padding: 0 @comp-paddingLR-s; } .@{prefix}-dialog { @@ -480,5 +463,17 @@ overflow: hidden; padding: 0; box-shadow: @shadow-3; + + &__header { + height: 40px; + width: 100%; + font-size: @font-size-base; + background-color: @bg-color-secondarycontainer; + + &-content { + margin-left: @spacer-4; + justify-content: center; + } + } } } diff --git a/style/web/components/image-viewer/_var.less b/style/web/components/image-viewer/_var.less index be3d8089d6..47ccf7ade2 100644 --- a/style/web/components/image-viewer/_var.less +++ b/style/web/components/image-viewer/_var.less @@ -30,3 +30,10 @@ @image-viewer-utils-modal-icon-margin: 0 @comp-margin-xs; @image-viewer-utils-modal-icon-size: @comp-size-m; @image-viewer-utils-modal-utils-scale-width: @comp-size-xl; + +@image-viewer-header-hide-padding: 0 0 12px 0; +@image-viewer-header-padding: 12px 0; +@image-viewer-header-box-height: 40px; +@image-viewer-header-box-width: calc(40px / 9 * 16); +@image-viewer-header-box-width-margin-left: calc(40px / 9 * 16 * 3 + 4px * 3); +@image-viewer-header-all-box-width: calc(40px / 9 * 16 * 7 + 4px * 6); From c6914df6b646208d57fa8c900faa82f5c6f1a615 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 15 Nov 2022 17:26:10 +0800 Subject: [PATCH 047/312] Autocomplete (#999) * feat(web): auto-complete basic * feat(web): select index.less and auto-complete docs * feat: autocomplete * feat(web): autocomplete --- docs/web/api/auto-complete.md | 36 +++++++++++++++++++ docs/web/api/popup.md | 2 +- .../web/components/auto-complete/_index.less | 9 +++++ style/web/components/auto-complete/_var.less | 1 + style/web/components/select/_index.less | 4 ++- 5 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 docs/web/api/auto-complete.md create mode 100644 style/web/components/auto-complete/_index.less create mode 100644 style/web/components/auto-complete/_var.less diff --git a/docs/web/api/auto-complete.md b/docs/web/api/auto-complete.md new file mode 100644 index 0000000000..acf751a4a1 --- /dev/null +++ b/docs/web/api/auto-complete.md @@ -0,0 +1,36 @@ +--- +title: AutoComplete 自动填充 +description: 用于根据用户输入内容提示更多联想词场景 +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### 基础自动填充 + +{{ base }} + +### 可过滤的自动填充 + +- 设置 `filterable` 后的默认过滤规则为：不区分大小写，文本任意位置。 +- 如果 `filterable` 的默认规则不符合需求，可以使用 `filter` 自定义过滤规则。 + +{{ filter }} + +### 可自定义联想词的自动填充 + +- 使用 `option` 自定义联想词 + +{{ option }} + +### 可自定义触发元素的自动填充 + +{{ trigger-element }} + +### 不同尺寸的自动填充 + +{{ size }} + +### 不同状态的自动填充 + +{{ status }} diff --git a/docs/web/api/popup.md b/docs/web/api/popup.md index b63e195a53..a5000e9c9c 100644 --- a/docs/web/api/popup.md +++ b/docs/web/api/popup.md @@ -35,7 +35,7 @@ spline: message 浮层样式可以使用 overlayClassName、 overlayStyle、 overlayInnerStyle 控制。 - `overlayClassName` 用于定义浮层样式类名。 -- `overlayStyle` 用于定义浮层样式，比如浮层宽度。浮层宽度默认根据内容宽度呈现，可自由设置宽度和最大宽度。值为类型为函数时，可以实现浮层宽度和触发元素同宽。 +- `overlayStyle` 用于定义浮层样式，比如浮层宽度。浮层宽度默认根据内容宽度呈现，可自由设置宽度和最大宽度。 - `overlayInnerStyle` 用于定义浮层内容部分样式，比如内容最大高度以及是否出滚动条。值为类型为函数时，可以实现浮层内容宽度和触发元素同宽。 {{ style }} diff --git a/style/web/components/auto-complete/_index.less b/style/web/components/auto-complete/_index.less new file mode 100644 index 0000000000..59e622da7e --- /dev/null +++ b/style/web/components/auto-complete/_index.less @@ -0,0 +1,9 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-select-option__highlight-item { + .@{prefix}-is-highlight { + color: @auto-complete-option-highlight-color; + } +} diff --git a/style/web/components/auto-complete/_var.less b/style/web/components/auto-complete/_var.less new file mode 100644 index 0000000000..82041c781e --- /dev/null +++ b/style/web/components/auto-complete/_var.less @@ -0,0 +1 @@ +@auto-complete-option-highlight-color: @brand-color; diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less index cc8f2cc701..d144463fad 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -226,7 +226,9 @@ } } -.@{prefix}-select-option.@{prefix}-select-option__hover { +/** 规范 CSS 类名为 --hover */ +.@{prefix}-select-option.@{prefix}-select-option__hover, +.@{prefix}-select-option.@{prefix}-select-option--hover { &:not(.@{prefix}-is-disabled)&:not(.@{prefix}-is-selected) { background-color: @select-option-bg-color-hover; .@{prefix}-checkbox__input { From 889bc3987cd9ca602031e242add2a62e000c67a5 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 15 Nov 2022 19:30:25 +0800 Subject: [PATCH 048/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20image-view?= =?UTF-8?q?er=20=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1009)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/image-viewer/_index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 391ad45e7a..8dfabda04c 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -475,5 +475,9 @@ justify-content: center; } } + + &__close:hover { + background-color: @bg-color-secondarycontainer-hover; + } } } From 3d2b9955a7f96e6b6d446b625e7e5c26af8c87ee Mon Sep 17 00:00:00 2001 From: WenKang Date: Tue, 15 Nov 2022 19:35:39 +0800 Subject: [PATCH 049/312] Feat: calendar size token (#1010) * feat: comment collapse size token * feat: avatar badge card comment size token From 6b289ece8490454a88cf73bbc8b45228162f51a5 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 16 Nov 2022 10:03:58 +0800 Subject: [PATCH 050/312] feat: replace input type components size token (#1011) * feat: replace size token * chore: update slider size token --- style/web/components/range-input/_index.less | 8 +- style/web/components/range-input/_var.less | 10 +- style/web/components/select/_index.less | 8 +- style/web/components/select/_polyfill.less | 223 ------------------- style/web/components/select/_var.less | 47 ++-- style/web/components/slider/_index.less | 6 - style/web/components/slider/_var.less | 20 +- 7 files changed, 39 insertions(+), 283 deletions(-) delete mode 100644 style/web/components/select/_polyfill.less diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less index 66e0c8529f..8ee7da373f 100644 --- a/style/web/components/range-input/_index.less +++ b/style/web/components/range-input/_index.less @@ -29,16 +29,16 @@ &.@{prefix}-size-l { height: @range-input-height-l; font: @range-input-font-l; - padding-top: @spacer-s; - padding-bottom: @spacer-s; + padding-top: @comp-paddingTB-xs; + padding-bottom: @comp-paddingTB-xs; .@{prefix}-input { - padding: 0 8px; + padding: 0 @comp-margin-s; } } &.@{prefix}-size-s { - padding: 2px 4px; + padding: @comp-paddingTB-xxs @comp-margin-xs; height: @range-input-height-s; font: @range-input-font-s; } diff --git a/style/web/components/range-input/_var.less b/style/web/components/range-input/_var.less index 09d9ba1288..d0bb57b9e5 100644 --- a/style/web/components/range-input/_var.less +++ b/style/web/components/range-input/_var.less @@ -34,13 +34,13 @@ @range-input-extra-color-error: @error-color; // 间距 -@range-input-padding-default: @spacer-s @spacer @spacer-s @spacer-s; -@range-input-status-position-right: -@spacer-3; +@range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-xs; +@range-input-status-position-right: calc(0px - @comp-margin-xxxl); // 尺寸 -@range-input-height-s: 24px; -@range-input-height-default: 32px; -@range-input-height-l: 40px; +@range-input-height-s: @comp-size-xs; +@range-input-height-default: @comp-size-m; +@range-input-height-l: @comp-size-xl; @range-input-inner-icon-font-size: @icon-default; // 字号 diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less index d144463fad..b819cedd70 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -2,8 +2,6 @@ @import "./_var.less"; -@import "./_polyfill.less"; - @import "../../mixins/_text.less"; @import "../../mixins/_reset.less"; @@ -150,7 +148,7 @@ align-items: center; border-radius: @select-option-border-radius; height: @select-option-height-default; - line-height: @select-option-line-height; + font: @font-body-medium; cursor: pointer; padding: @select-option-padding-default; color: @select-option-color; @@ -204,7 +202,7 @@ font: @select-font-l; } .@{prefix}-select-option.@{prefix}-size-m { - line-height: @select-option-line-height-m; + font: @select-font-m; } .@{prefix}-select-option.@{prefix}-size-s { height: @select-option-height-s; @@ -241,7 +239,7 @@ } .@{prefix}-select-option + .@{prefix}-select-option { - margin-top: @select-options-margin; + margin-top: @select-options-margin-top; } .@{prefix}-select { diff --git a/style/web/components/select/_polyfill.less b/style/web/components/select/_polyfill.less deleted file mode 100644 index 07f1f11135..0000000000 --- a/style/web/components/select/_polyfill.less +++ /dev/null @@ -1,223 +0,0 @@ -// vue2 tree-select未重构需兼容 -.@{prefix}-select-polyfill { - border: 1px solid @select-border-color; - border-radius: @select-border-radius; - padding: @select-padding; - display: inline-flex; -} - -.@{prefix}-select { - .reset; - - position: relative; - width: 100%; - vertical-align: middle; - line-height: (@select-height-default - 2px); - background: @select-bg-color; - transition: border-color @anim-duration-base @anim-time-fn-easing; - flex-wrap: wrap; - - &:hover:not(.@{prefix}-is-disabled), - :active:not(.@{prefix}-is-disabled) { - cursor: pointer; - border-color: @select-border-color-active; - - & > .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) { - color: @select-right-icon-hover; - opacity: 1; - } - } - - &.@{prefix}-no-border { - line-height: @select-height-default; - } - - .@{prefix}-select__placeholder { - margin-left: 8px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - &:not(.@{prefix}-is-disabled) .@{prefix}-select__placeholder { - color: @select-placeholder-color; - } - - & .@{prefix}-select__single { - margin-left: @select-placeholder-margin; - display: block; - color: @select-input-color; - .text-ellipsis(); - } - - & .@{prefix}-select__right-icon { - transition: color @anim-duration-base @anim-time-fn-easing; - } - - // TODO 基于select-input改造时需要移除，polyfill代码 - & .@{prefix}-select__right-icon-polyfill { - position: absolute; - height: 100%; - margin: @select-icon-margin; - right: 0; - top: 0; - color: @select-icon-color; - } - - .@{prefix}-select__active-icon { - color: @select-border-color-active; - } - - .@{prefix}-select__right-icon.@{prefix}-is-visible { - transform: scaleY(-1); - transition: transform @anim-duration-base @anim-time-fn-easing; - - /* IE */ - filter: flipv; - } - - & .@{prefix}-select__left-icon { - position: absolute; - height: 100%; - margin: @select-icon-margin; - left: 0; - top: 0; - color: @select-icon-color; - transition: color @anim-duration-base @anim-time-fn-easing; - display: flex; - align-items: center; - } - - // input 层级调整 - .@{prefix}-input__wrap { - flex: 1; - } - - // TODO: select_input 重构后可删除 - .@{prefix}-tag + .@{prefix}-input__wrap { - margin-left: @select-placeholder-margin; - .@{prefix}-input__inner { - width: 100%; - } - } - - // TODO: select_input 重构后可删除 - .@{prefix}-select__input { - .@{prefix}-input { - height: auto; - border: 0; - padding: 0; - - &--focused { - box-shadow: none; - border-color: transparent; - } - } - - &:focus, - :hover { - border: 0; - } - - input { - height: @select-input-height; - line-height: @select-input-height; - } - - .@{prefix}-input.@{prefix}-input--prefix > .@{prefix}-input__prefix { - font: @select-font-l; - } - } -} - -.@{prefix}-select.@{prefix}-is-active:not(.@{prefix}-is-disabled) { - border-color: @select-border-color-active; - - &:not(.@{prefix}-no-border) { - box-shadow: @select-input-shadow; // 无边框选择器没有阴影 - } - - .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) { - color: @select-border-color-active; - opacity: 1; - } -} - -.@{prefix}-select.@{prefix}-has-prefix { - padding-left: @select-padding-prefix; -} - -.@{prefix}-select.@{prefix}-no-border { - border: 0; - width: auto; - transition: background-color @anim-duration-base linear; - - &:hover { - background-color: @select-option-bg-color-hover; - } - - &:active { - background-color: @select-option-bg-color-active; - } - - > .@{prefix}-select__single { - margin-right: @select-no-border-margin-right; - } -} - -.@{prefix}-select.@{prefix}-size-l { - font: @select-font-l; - - .@{prefix}-select__input { - line-height: (@select-height-l - 2px); - height: (@select-height-l - 2px); - - .@{prefix}-input__inner { - height: (@select-height-l - 2px); - line-height: (@select-height-l - 2px); - } - } - - .@{prefix}-tag.@{prefix}-size-l { - height: @select-tag-height-l; - line-height: (@select-tag-height-l - 2px); - } -} - -.@{prefix}-select.@{prefix}-size-s { - font: @select-font-s; - - .@{prefix}-select__input { - line-height: (@select-height-s - 2px); - height: (@select-height-s - 2px); - - .@{prefix}-input__inner { - height: (@select-height-s - 2px); - line-height: (@select-height-s - 2px); - } - } - - .@{prefix}-tag.@{prefix}-size-s { - height: @select-tag-height-s; - line-height: (@select-tag-height-s - 2px); - } -} - -.@{prefix}-select.@{prefix}-is-disabled { - cursor: not-allowed; - background-color: @select-bg-color-disabled; - color: @select-placeholder-color-disabled; - border-color: @select-border-color; - - & > .@{prefix}-select__right-icon { - color: @select-icon-color-disabled; - } - - & > .@{prefix}-select__left-icon { - color: @select-icon-color-disabled; - } - - & > .@{prefix}-select__single { - color: @select-color-disabled; - } -} diff --git a/style/web/components/select/_var.less b/style/web/components/select/_var.less index 9d2758b8f0..c031c50c5a 100644 --- a/style/web/components/select/_var.less +++ b/style/web/components/select/_var.less @@ -24,23 +24,18 @@ @select-right-icon-hover: @brand-color; // 尺寸 -@select-height-s: 24px; -@select-height-default: 32px; -@select-height-l: 40px; -@select-option-height-s: 20px; -@select-option-height-default: 28px; -@select-option-height-l: 36px; -@select-option-line-height: 20px; -@select-option-line-height-m: 22px; +@select-height-s: @comp-size-xs; +@select-height-default: @comp-size-m; +@select-height-l: @comp-size-xl; +@select-option-height-s: @comp-size-xxs; +@select-option-height-default: @comp-size-s; +@select-option-height-l: @comp-size-l; @select-dropdown-max-height: 300px; -@select-input-height: 30px; -@select-tag-height-default: 22px; -@select-tag-height-l: 30px; -@select-tag-height-s: 18px; // font @select-font-s: @font-body-small; @select-font-l: @font-body-large; +@select-font-m: @font-body-medium; //阴影 @select-dropdown-shadow: @shadow-2; @@ -53,22 +48,16 @@ //透明度 // padding -@select-option-padding-s: 0 8px; -@select-option-padding-default: 0px 8px; -@select-option-padding-l: 7px 12px; -@select-padding: 0 26px 0 4px; -@select-optiongroup-border-padding: 7px; -@select-padding-prefix: 26px; -@select-dropdown-padding: 6px; -@select-dropdown-padding-l: 8px; -@select-dropdown-padding-s: 4px; +@select-option-padding-s: 0 @comp-paddingLR-s; +@select-option-padding-default: 0 @comp-paddingLR-s; +@select-option-padding-l: 0 @comp-paddingLR-m; +@select-optiongroup-border-padding: @comp-margin-xs; +@select-dropdown-padding: @pop-padding-m; +@select-dropdown-padding-l: @pop-padding-l; +@select-dropdown-padding-s: @pop-padding-s; @select-dropdown-popup-padding: 0; // margin -@select-icon-margin: 0 8px; -@select-tag-margin: 4px 4px 4px 0; -@select-placeholder-margin: 4px; -@select-optiongroup-border-margin: 7px; -@select-dropdown-margin: 8px 0; -@select-options-margin: 2px; -@select-no-border-margin-right: @spacer; -@select-empty-padding: 0 8px; +@select-optiongroup-border-margin: @comp-margin-xs; +@select-dropdown-margin: @comp-paddingTB-s 0; +@select-options-margin-top: @comp-paddingTB-xxs; +@select-empty-padding: 0 @comp-paddingLR-s; diff --git a/style/web/components/slider/_index.less b/style/web/components/slider/_index.less index 2909086df9..7566bd9e83 100644 --- a/style/web/components/slider/_index.less +++ b/style/web/components/slider/_index.less @@ -34,12 +34,6 @@ position: relative; padding: @slider-padding; - &__input { - &.is-range { - margin-left: @slider-input-range-margin-left; - } - } - &__container { width: 100%; display: flex; diff --git a/style/web/components/slider/_var.less b/style/web/components/slider/_var.less index b3e96479bb..2b31e45817 100644 --- a/style/web/components/slider/_var.less +++ b/style/web/components/slider/_var.less @@ -18,28 +18,27 @@ // 尺寸 @slider-input-width: 80px; @slider-row-input-width: 120px; -@slider-height: 18px; @slider-rail-track-step-size: 4px; -@slider-control-bar-size: 16px; +@slider-height: calc(@comp-paddingTB-xs * 2 + @slider-rail-track-step-size); +@slider-control-bar-size: @comp-size-xxxs; @slider-vertical-height: 100%; @slider-vertical-mark-width: 18px; @slider-stop-width: 1px; -@slider-stop-height: 6px; +@slider-stop-height: 4px; @slider-center-line-width: 8px; @slider-center-line-height: 1px; // 边距 -@slider-input-margin-left: 24px; -@slider-input-vertical-padding-top: 16px; +@slider-input-margin-left: @comp-margin-xxl; +@slider-input-vertical-padding-top: @comp-paddingTB-l; @slider-input-vertical-margin-left: 0px; -@slider-input-range-margin-left: 12px; -@slider-padding: 7px 0; +@slider-padding: @comp-paddingTB-xs 0; @slider-vertical-padding: 0; @slider-vertical-handle-margin-top: -6px; @slider-vertical-handle-margin-left: -5px; @slider-vertical-text-margin-top: 0; -@slider-vertical-text-margin-left: 2px; -@slider-center-line-margin: 0 8px; +@slider-vertical-text-margin-left: @comp-margin-xxs; +@slider-center-line-margin: 0 @comp-margin-s; // 字体 @slider-text-font: @font-body-small; @@ -48,5 +47,4 @@ @slider-border-radius: @border-radius-round; // 定位 -@slider-text-top: 13px; -@slider-vertical-control-bar-left: -14px; +@slider-text-top: calc(@slider-rail-track-step-size + @comp-paddingTB-xs + 2px); From fdb3ff4d94f841d8d8eccd87915bbc927f9b89ec Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 16 Nov 2022 11:19:55 +0800 Subject: [PATCH 051/312] chore: remove extra code (#1012) --- docs/web/api/card.md | 2 -- style/web/components/button/_index.less | 5 ----- 2 files changed, 7 deletions(-) diff --git a/docs/web/api/card.md b/docs/web/api/card.md index 9cac597f0e..2657242074 100644 --- a/docs/web/api/card.md +++ b/docs/web/api/card.md @@ -52,8 +52,6 @@ spline: data 由顶部栏、底部栏和极简卡片组成的复杂卡片，三个区域内容可根据需要对内容进行配置。 -{{ footer }} - {{ header-subtitle-footer-actions }} {{ header-footer-actions }} diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index f2b3cef587..e6c42da57d 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -44,11 +44,6 @@ text-decoration: none; - .@{prefix}-button__text { - display: flex; - align-items: center; - } - .@{prefix}-button__text, .t-icon { position: relative; From 004104abc36a2034779f175e1c9bc9e373cf749f Mon Sep 17 00:00:00 2001 From: WenKang Date: Thu, 17 Nov 2022 14:15:57 +0800 Subject: [PATCH 052/312] Feat: upload size token and fix style bug (#1013) * feat: upload size token and fix upload style bug * feat: upload site token --- style/web/components/calendar/_var.less | 5 +- style/web/components/upload/_index.less | 34 ++++++--- style/web/components/upload/_mixin.less | 2 +- style/web/components/upload/_var.less | 98 +++++++++++++------------ 4 files changed, 77 insertions(+), 62 deletions(-) diff --git a/style/web/components/calendar/_var.less b/style/web/components/calendar/_var.less index 754a4b0f4d..b12f992931 100644 --- a/style/web/components/calendar/_var.less +++ b/style/web/components/calendar/_var.less @@ -68,7 +68,10 @@ @calendar-body-line-height: 22px; @calendar-card-body-cell-margin: 0px; @calendar-header-row-padding: 0px; -@calendar-card-body-cell-display-padding:2px; +@calendar-card-body-cell-display-padding: calc(@comp-paddingTB-xxs / 2); +@calendar-control-margin-bottom: @comp-margin-xxxl; +@calerdar-panel-card-padding: @comp-paddingTB-m @comp-paddingLR-m; +@calendar-card-control-margin-bottom: @comp-margin-m; // 尺寸 @calendar-full-min-width: 560px; diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less index 8bc3bc85cc..0d2ed2f357 100644 --- a/style/web/components/upload/_index.less +++ b/style/web/components/upload/_index.less @@ -136,7 +136,6 @@ } &-item { - margin: @upload-card-item-margin; float: left; cursor: pointer; box-sizing: border-box; @@ -192,10 +191,7 @@ background-color: @upload-card-container-bg-color; border: @upload-card-contariner-border; padding: @upload-card-content-padding; - - &:hover { - border-color: @upload-card-item-bg-border-color-hover; - } + border-radius: @upload-card-img-wrap-border-radius; } &-container { @@ -209,9 +205,12 @@ border: @upload-card-contariner-border; box-sizing: border-box; position: relative; + border-radius: @upload-card-img-wrap-border-radius; + .hover-transition(border); &:hover { border-color: @upload-card-item-bg-border-color-hover; + .hover-transition(border-color); } > .t-icon, .@{prefix}-loading { @@ -234,7 +233,7 @@ .t-icon, .@{prefix}-loading { - font-size: @upload-icon-size-middle; + font-size: @upload-icon-size-large; } } @@ -250,10 +249,10 @@ &-mask { background-color: @upload-card-mask-bg-color; - color: @upload-card-mask-color; - transition: opacity .5s ease-in-out; + color: @upload-card-mask-text-color; will-change: transform; opacity: 0; + .hover-transition(opacity); .horizontal-vertical-center-with-flex(); .fill-with-position-absolute(); } @@ -261,7 +260,7 @@ &-mask-item { &-divider { margin: @upload-card-mask-divider-margin; - border-left: 1px @upload-card-mask-color solid; + border-left: 1px @upload-card-mask-text-color solid; height: @upload-card-mask-divider-height; } @@ -362,6 +361,7 @@ display: block; color: @upload-small-color; margin-top: @upload-tips-margin-top; + font: @font-body-small; &.@{prefix}-upload__tips-error { color: @upload-tips-error-color; @@ -386,7 +386,7 @@ display: flex; align-items: center; .@{prefix}-upload__flow-status .t-icon { - font: @upload-icon-size-mini; + font-size: @upload-icon-size-mini; } } @@ -398,6 +398,7 @@ &:hover { color: @upload-icon-color-hover; cursor: pointer; + .hover-transition(color); } } @@ -469,6 +470,7 @@ width: @upload-dragger-img-wrap-width; height: @upload-dragger-img-wrap-height; background-color: @upload-dragger-img-wrap-bg-color; + border-radius: @upload-dragger-img-wrap-border-radius; display: flex; align-items: center; justify-content: center; @@ -484,7 +486,7 @@ &-img-wrap + &-progress-info { margin-left: @upload-dragger-img-wrap-margin-right; .dragger-inner-max-width(@upload-dragger-width, - @upload-dragger-padding, (@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right)); + @upload-dragger-padding, calc(@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right)); } } @@ -501,7 +503,7 @@ } .@{prefix}-upload__dragger-progress-cancel { - padding: @upload-dragger-progress-cancel-padding; + margin-right: @upload-dragger-progress-cancel-margin; &:hover { border-color: transparent; @@ -610,9 +612,15 @@ border: @upload-flow-card-area-border; padding: @upload-flow-card-area-padding; margin-top: @upload-flow-card-area-margin-top; + .hover-transition(border); &:hover { border-color: @upload-card-item-bg-border-color-hover; + .hover-transition(border-color); + } + + .@{prefix}-upload__card-item { + margin: @upload-card-item-margin; } } } @@ -621,11 +629,13 @@ .@{prefix}-upload__single-input-clear { color: @upload-icon-color; cursor: pointer; + .hover-transition(color); } .@{prefix}-upload__icon-delete:hover, .@{prefix}-upload__single-input-clear:hover { color: @upload-icon-color-hover; + .hover-transition(color); } .@{prefix}-upload__single-input-clear { diff --git a/style/web/components/upload/_mixin.less b/style/web/components/upload/_mixin.less index 1fd800d809..b5b8b69e74 100644 --- a/style/web/components/upload/_mixin.less +++ b/style/web/components/upload/_mixin.less @@ -3,5 +3,5 @@ } .dragger-inner-max-width(@outterWidth, @padding, @margin) { - max-width: (@outterWidth - @padding * 2 - @margin); + max-width: calc(@outterWidth - @padding * 2 - @margin); } diff --git a/style/web/components/upload/_var.less b/style/web/components/upload/_var.less index 68e242c613..42c46076d5 100644 --- a/style/web/components/upload/_var.less +++ b/style/web/components/upload/_var.less @@ -35,7 +35,8 @@ @upload-card-container-bg-color: @bg-color-secondarycontainer; @upload-card-status-color: @text-color-disabled; @upload-card-mask-color: @bg-color-container; -@upload-card-mask-bg-color: @text-color-secondary; +@upload-card-mask-bg-color: @mask-active; +@upload-card-mask-text-color: @text-color-anti; @upload-dragger-color: @text-color-secondary; @upload-dragger-bg-color-active: @bg-color-container-active; @upload-dragger-border-color-active: @brand-color; @@ -61,9 +62,9 @@ @upload-card-mask-opacity-disabled: .3; // 图标 -@upload-list-file-icon-font-size: 40px; -@upload-card-item-icon-add-font-size: 30px; -@upload-dragger-progress-icon-font-size: 16px; +@upload-list-file-icon-font-size: @comp-size-xl; +@upload-card-item-icon-add-font-size: @comp-size-m; +@upload-dragger-progress-icon-font-size: @comp-size-xxxs; // 字体 @upload-list-item-font-size: @font-body-medium; @@ -77,26 +78,24 @@ @upload-flow-table-th-font-weight: normal; // 尺寸 -@upload-img-size: 120px; +@upload-img-size: 110px; @upload-list-file-width: 100px; @upload-list-file-height: 100px; @upload-list-item-width: 496px; @upload-list-item-height: 124px; @upload-list-name-max-width: 200px; -@upload-card-mask-divider-height: @font-size-l; -@upload-single-file-input-single-progress-width: 60px; +@upload-card-mask-divider-height: @comp-size-xxxs; @upload-dragger-width: 336px; @upload-dragger-height: 144px; -@upload-dragger-img-wrap-width: 112px; -@upload-dragger-img-wrap-height: 112px; +@upload-dragger-img-wrap-width: 110px; +@upload-dragger-img-wrap-height: 110px; @upload-flow-image-flow-width: 498px; @upload-flow-max-width: 960px; -@upload-flow-min-width: 496px; -@upload-flow-empty-height: 210px; -@upload-icon-size-mini: @font-body-medium; -@upload-icon-size: @font-size-l; -@upload-icon-size-middle: (@font-size * 2); -@upload-icon-size-large: (@font-size * 2.4); +@upload-flow-min-width: 498px; +@upload-flow-empty-height: 184px; +@upload-icon-size-mini: calc(@font-size-base + 2px); +@upload-icon-size: calc(@font-size-base + 2px); +@upload-icon-size-large: @comp-size-xs; // 边框 @upload-card-item-bg-border: 1px dashed @component-border; @@ -114,39 +113,42 @@ @upload-card-contariner-border: 1px dashed @component-border; // 位置 -@upload-dragger-btns-bottom: 8px; +@upload-dragger-btns-bottom: @comp-margin-l; @upload-flow-table-th-text-align: left; // 间距 -@upload-list-file-margin-right: 12px; -@upload-list-item-padding: 12px; -@upload-list-item-margin-top: 12px; -@upload-single-name-margin-right: @spacer; -@upload-single-name-margin-bottom: @spacer; -@upload-single-percent-margin-left: @spacer; -@upload-single-input-delete-margin-left: @spacer-2; -@upload-single-file-input-trigger-margin-left: @spacer-2; -@upload-single-file-input-trigger-button-margin-left: @spacer-1; -@upload-card-item-margin: 0 @spacer 0 0; -@upload-card-item-error-icon-warning-margin-bottom: 10px; -@upload-card-icon-loading-margin-bottom: 10px; -@upload-card-name-margin-top: @spacer; -@upload-card-container-icon-add-margin-bottom: @spacer; -@upload-card-content-padding: @spacer; -@upload-card-status-wrap-svg-margin-bottom: 6px; -@upload-dragger-padding: @spacer-2; -@upload-dragger-img-wrap-margin-right: @spacer-2; -@upload-dragger-progress-info-single-display-text-margin-bottom: @spacer; -@upload-dragger-progress-cancel-padding: 0; -@upload-flow-placeholder-margin-left: @spacer-2; -@upload-flow-bottom-margin-top: @spacer-3; -@upload-flow-button-margin-left: @spacer; -@upload-flow-table-margin-top: @spacer-3; -@upload-flow-status-icon-margin-right: @spacer; -@upload-flow-table-td-th-padding: 10px @spacer-3; -@upload-flow-card-area-padding: 12px; -@upload-flow-card-area-margin-top: @spacer-3; -@upload-display-text-margin-top: 10px; -@upload-icon-clear-circle-filled-margin-top: 2px; -@upload-tips-margin-top: @spacer; -@upload-card-mask-divider-margin: 0 @spacer-2; +@upload-list-file-margin-right: @comp-margin-m; //待删除 +@upload-list-item-padding: @comp-paddingTB-m @comp-paddingLR-m; //? +@upload-list-item-margin-top: @comp-margin-m; //? +@upload-single-name-margin-right: @comp-margin-s; +@upload-single-name-margin-bottom: @comp-margin-s; +@upload-single-percent-margin-left: @comp-margin-xs; +@upload-single-input-delete-margin-left: @comp-margin-l; +@upload-single-file-input-trigger-margin-left: @comp-margin-l; //? +@upload-card-item-margin: @comp-margin-xs; +@upload-card-item-error-icon-warning-margin-bottom: @comp-margin-s; +@upload-card-icon-loading-margin-bottom: @comp-margin-s; //? +@upload-card-name-margin-top: @comp-margin-s; +@upload-card-container-icon-add-margin-bottom: @comp-margin-s; +@upload-card-content-padding: @comp-paddingTB-s @comp-paddingLR-s; +@upload-card-status-wrap-svg-margin-bottom: @comp-margin-s; //? +@upload-dragger-padding: @comp-margin-l; +@upload-dragger-img-wrap-margin-right: @comp-margin-l; +@upload-dragger-progress-info-single-display-text-margin-bottom: @comp-margin-s; +@upload-dragger-progress-cancel-margin: @comp-margin-l; +@upload-flow-placeholder-margin-left: @comp-margin-l; +@upload-flow-bottom-margin-top: @comp-margin-xxl; +@upload-flow-button-margin-left: @comp-margin-s; +@upload-flow-table-margin-top: @comp-margin-xxl; +@upload-flow-status-icon-margin-right: @comp-margin-s; +@upload-flow-table-td-th-padding: @comp-paddingTB-m @comp-paddingLR-l; +@upload-flow-card-area-padding: @comp-paddingTB-m @comp-paddingLR-m; +@upload-flow-card-area-margin-top: @comp-margin-xxl; +@upload-display-text-margin-top: @comp-margin-s; +@upload-icon-clear-circle-filled-margin-top: @comp-margin-xxs; +@upload-tips-margin-top: @comp-margin-s; +@upload-card-mask-divider-margin: 0 @comp-margin-l; + +// 圆角 +@upload-dragger-img-wrap-border-radius: @border-radius-default; +@upload-card-img-wrap-border-radius: @border-radius-default; From 1995ac5fa6ea756601586fdbadbd88e881040141 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Thu, 17 Nov 2022 16:57:25 +0800 Subject: [PATCH 053/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20button=20?= =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=AF=B9=E5=85=B6=E9=97=AE=E9=A2=98=20(#1014?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/button/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index e6c42da57d..bee2466e07 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -48,6 +48,7 @@ .t-icon { position: relative; z-index: 1; + display: inline-flex; } .t-icon { From e8aba01b58f7190aa086f0337b20399ec3249555 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 17 Nov 2022 19:07:03 +0800 Subject: [PATCH 054/312] feat: replace timepicker size token and remove deprecated code (#1015) * feat: upload size token and fix upload style bug * feat: upload site token * feat: time-picker size token * chore: remove deprecated timepicker style Co-authored-by: wenkang --- style/web/components/time-picker/_index.less | 74 +------------------- style/web/components/time-picker/_var.less | 26 +++---- 2 files changed, 11 insertions(+), 89 deletions(-) diff --git a/style/web/components/time-picker/_index.less b/style/web/components/time-picker/_index.less index ef84129d01..8d50f53a9b 100644 --- a/style/web/components/time-picker/_index.less +++ b/style/web/components/time-picker/_index.less @@ -49,73 +49,6 @@ cursor: pointer; } } - - &__input { - position: absolute; - top: 0; - height: 100%; - padding: @time-picker-input-padding; - z-index: 1; - border-radius: @border-radius-default; - transition: border-color .2s cubic-bezier(.645, .045, .355, 1); - font: @time-picker-font; - .flex-center; - - &:hover { - border-color: @time-picker-input-border-color-hover; - } - - &-placeholder { - margin-left: @time-picker-input-placeholder-margin-left; - color: @time-picker-panel-input-placeholder-color; - } - - &-item { - height: 22px; - - &-disabled { - color: @time-picker-input-color-disabled; - } - - &-input { - margin: @time-picker-input-item-input-margin; - color: inherit; - background: none; - cursor: pointer; - height: inherit; - outline: none; - width: @time-picker-input-item-input-width; - text-align: center; - border-radius: @time-picker-input-item-input-radius; - border: 0; - line-height: 22px; - - &-meridiem { - width: @time-picker-input-item-input-meridiem-width; - } - - &:focus { - border-color: @bg-color-page; - background-color: @bg-color-container-hover; - } - } - } - } - - &__input-disabled { - border: @time-picker-input-border-disabled; - background-color: @bg-color-container-hover; - - &-placeholder { - color: @text-color-disabled; - } - - &-item { - &-input { - pointer-events: none; - } - } - } } .@{prefix}-time-range-picker { @@ -138,7 +71,7 @@ height: @time-picker-panel-body-height; position: relative; user-select: none; - margin: @time-picker-panel-body-margin; + // margin: @time-picker-panel-body-margin; &-active-mask { position: absolute; @@ -150,7 +83,7 @@ > div { flex: 1; transform: translateY( - -((@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) /2) + calc(0px - (calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) /2)) ); height: @time-picker-panel-item-height; background-color: @time-picker-panel-item-background-color-current; @@ -235,7 +168,6 @@ &-footer { width: 100%; - height: @time-picker-panel-footer-height; display: flex; justify-content: space-between; flex-direction: row-reverse; // 确定按钮一定有 此刻按钮不一定有 @@ -244,6 +176,6 @@ position: relative; border-top: 1px solid @border-level-1-color; box-sizing: border-box; - padding: @time-picker-panel-section-padding; + padding: @time-picker-panel-footer-padding; } } diff --git a/style/web/components/time-picker/_var.less b/style/web/components/time-picker/_var.less index c8599a8687..66c4d85d1f 100644 --- a/style/web/components/time-picker/_var.less +++ b/style/web/components/time-picker/_var.less @@ -4,18 +4,16 @@ @time-picker-width: 240px; // time-picker的宽度 @time-picker-panel-width: 280px; // time-picker的panel宽度 -@time-picker-input-height: 24px; -@time-picker-container-top: (@time-picker-input-height + 2px); +@time-picker-input-height: @comp-size-xs; +@time-picker-container-top: calc(@time-picker-input-height + 2px); @time-picker-font: @font-body-medium; -@time-picker-panel-body-height: 216px; -@time-picker-panel-item-height: 24px; +@time-picker-panel-body-height: calc(calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) * 7); +@time-picker-panel-item-height: @comp-size-xs; @time-picker-input-item-input-width: 28px; @time-picker-input-item-input-meridiem-width: 36px; -@time-picker-panel-footer-height: 48px; - // color @time-picker-background-color-common: transparent; @time-picker-input-border-color-hover: @brand-color; @@ -37,21 +35,13 @@ @time-picker-input-border-active: 1px solid @brand-color; @time-picker-input-border-disabled: 1px solid @border-level-2-color; -@time-picker-input-padding: 0 @spacer 0 (@spacer / 2); -@time-picker-input-placeholder-margin-left: @spacer; -@time-picker-input-item-input-margin: 0 2px; -@time-picker-input-item-input-radius: @border-radius-default; - -@time-picker-panel-container-margin: @spacer 0; -@time-picker-panel-body-margin: @spacer-2 0; -@time-picker-panel-section-padding: 0 (@spacer-3 / 2); +@time-picker-panel-section-padding: @pop-padding-xl calc(@pop-padding-xl - @time-picker-panel-item-margin-horizontal); +@time-picker-panel-footer-padding: @pop-padding-xl; @time-picker-panel-item-border-radius: @border-radius-default; -@time-picker-panel-item-margin-vertical: 6px; // 设计如此 -@time-picker-panel-item-margin-horizontal: (@spacer / 2); +@time-picker-panel-item-margin-vertical: @size-3; +@time-picker-panel-item-margin-horizontal: @comp-margin-xs; @time-picker-panel-item-margin: @time-picker-panel-item-margin-vertical @time-picker-panel-item-margin-horizontal; -@time-picker-panel-section-second-body-margin-left: @spacer-3; -@time-picker-panel-footer-padding: 0 @spacer-3; //shadow @time-picker-input-shadow-active: 0 0 2px 2px @brand-color-focus; From bf5d8ac9fe7691f1f45db83c9c15ff66afde5afb Mon Sep 17 00:00:00 2001 From: WenKang Date: Fri, 18 Nov 2022 18:17:04 +0800 Subject: [PATCH 055/312] Feat: colorPicker datePicker timePicker size token and fix style bug (#1018) * feat: datepicker size token * feat: colorpicker datepicker timepicker size toke and fix style bug * chore: remove deprecated code Co-authored-by: Uyarn --- style/web/components/color-picker/_index.less | 114 ++++++------------ style/web/components/color-picker/_var.less | 53 +++++--- style/web/components/date-picker/_index.less | 77 ++++++++---- style/web/components/date-picker/_var.less | 24 +++- style/web/components/time-picker/_var.less | 2 +- 5 files changed, 149 insertions(+), 121 deletions(-) diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less index 0f363749a7..72f021b021 100644 --- a/style/web/components/color-picker/_index.less +++ b/style/web/components/color-picker/_index.less @@ -12,11 +12,7 @@ padding: 0; width: @color-picker-panel-width; background: @bg-color-container; - box-shadow: @shadow-1, - @shadow-inset-top, - @shadow-inset-right, - @shadow-inset-bottom, - @shadow-inset-left; + box-shadow: @color-picker-panel-shadow; border-radius: @border-radius-medium; user-select: none; } @@ -32,29 +28,23 @@ .reset; &.t-popup__content { - border-radius: @color-picker-border-radius; - box-shadow: @shadow-1, - @shadow-inset-top, - @shadow-inset-right, - @shadow-inset-bottom, - @shadow-inset-left; + box-shadow: @color-picker-panel-shadow; } &__icon { - width: @color-picker-icon-size; - height: @color-picker-icon-size; display: flex; align-items: center; justify-content: center; font-size: @color-picker-icon-font-size; - background: @bg-color-container; - transition: color @anim-duration-base @anim-time-fn-easing; + background: transparent; + transition: @anim-duration-base linear; color: @text-color-secondary; border-radius: @color-picker-icon-radius; cursor: pointer; &:hover { background: @bg-color-container-hover; + transition: @anim-duration-base linear; } &.@{prefix}-is-disabled { color: @text-color-disabled; @@ -82,7 +72,7 @@ .@{prefix}-color-picker__body { padding: @color-picker-panel-padding; - padding-bottom: 8px; + padding-bottom: calc(@color-picker-panel-padding - 4px); } .@{prefix}-color-picker__thumb { @@ -93,7 +83,7 @@ width: @color-picker-slider-thumb-size; height: @color-picker-slider-thumb-size; border-radius: @border-radius-circle; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 15%); + box-shadow: @color-picker-thumbs-shadow; background: white; color: @text-color-brand; padding: @color-picker-slider-thumb-padding; @@ -149,8 +139,8 @@ } .@{prefix}-color-picker__slider-wrapper { - border-radius: @color-picker-slider-height; - padding: 0 9px; + border-radius: @color-picker-slider-wrapper-radius; + padding: @color-picker-slider-wrapper-padding; position: relative; &--hue-type { @@ -169,13 +159,13 @@ top: 0; width: 100%; height: @color-picker-slider-height; - border-radius: @color-picker-slider-height; + border-radius: @color-picker-slider-wrapper-radius; } .@{prefix}-color-picker__slider { height: @color-picker-slider-height; position: relative; - border-radius: @color-picker-slider-height; + border-radius: @color-picker-slider-wrapper-radius; cursor: pointer; color: transparent; outline: none; @@ -228,7 +218,7 @@ } .@{prefix}-color-picker__sliders { - width: 186px; + width: 100%; } .@{prefix}-color-picker__sliders-preview { @@ -238,6 +228,7 @@ height: @color-picker-gradient-preview-height; border-radius: @color-picker-gradient-preview-radius; overflow: hidden; + background: #fff; .transparentBgImage(); &-inner { @@ -296,7 +287,7 @@ } &.@{prefix}-is-active { z-index: 1; - outline: 2px solid @text-color-brand; + outline: 2px solid @component-border; } &-inner { @@ -305,8 +296,6 @@ height: 100%; border-radius: @border-radius-circle; overflow: hidden; - background-size: 4px 4px; - background-position: 0 0, 2px 2px; &::before { content: ""; @@ -339,17 +328,12 @@ .@{prefix}-input-number .@{prefix}-input { margin: 0; } - .@{prefix}-select { - &__single { - margin-left: 4px; - } - } .input-group { display: flex; align-items: center; justify-content: space-around; - margin-left: 8px; + margin-left: @color-picker-input-format-margin-left; &__item { flex: 1; @@ -357,7 +341,6 @@ margin-left: -1px; .@{prefix}-input { padding: 0 1px; - font: @color-picker-font; &:focus, &:focus-within, @@ -394,7 +377,8 @@ } &-mode-select { - width: 70px; + width: @color-picker-select-format-width; + display: flex; .t-select, .t-input { @@ -406,13 +390,13 @@ } .t-select__right-icon { - margin: 0 4px 0 0; + margin-right: @color-picker-select-format-margin-right; } } } .@{prefix}-color-picker__swatches-wrap { - margin: @color-picker-margin 0 0 0; + margin-top: @color-picker-margin; position: relative; .@{prefix}-color-picker__swatches { @@ -423,7 +407,6 @@ &--title { font: @color-picker-font; - margin: 0 0 12px; padding: 0; color: @text-color-primary; display: flex; @@ -437,26 +420,9 @@ align-items: center; font-size: 0; .@{prefix}-color-picker__icon { - width: 16px; - height: 16px; - margin-left: @color-picker-margin; - } - } - - &--remove { - position: relative; - // 不使用popconfirm 组件， 这里绝对定位到正上方 - .@{prefix}-popup { - position: absolute; - inset: auto auto 0 0; - margin: 0; - bottom: 30px; - left: 10px; - transform: translateX(-50%); - cursor: default; - } - .@{prefix}-popconfirm__content { - width: 220px; + width: @color-picker-swatch-icon-size; + height: @color-picker-swatch-icon-size; + margin-left: @color-picker-swatch-action-margin-left; } } @@ -469,19 +435,17 @@ max-height: @color-picker-swatch-rows-max-height; overflow-x: hidden; overflow-y: auto; - margin: @color-picker-swatch-wrap-margin; - padding: 4px 10px 4px 4px; + padding: @color-picker-swatch-item-padding; position: relative; - left: -4px; + left: @color-picker-swatch-item-left-negative-padding; } &--item { display: flex; width: @color-picker-swatch-width; height: @color-picker-swatch-height; - border-radius: @border-radius-circle; + border-radius: @border-radius-default; padding: @color-picker-swatch-padding; - border: @color-picker-swatch-border-size solid transparent; overflow: hidden; cursor: pointer; align-items: center; @@ -503,7 +467,7 @@ position: relative; overflow: hidden; border: 1px solid @component-border; - border-radius: @border-radius-circle; + border-radius: @border-radius-default; flex-shrink: 0; } @@ -530,8 +494,7 @@ height: 100%; position: relative; overflow: hidden; - border: 1px solid @component-border; - border-radius: @border-radius-circle; + border-radius: @border-radius-default; box-sizing: border-box; } @@ -539,6 +502,8 @@ width: 100%; height: 100%; display: block; + border-radius: @border-radius-default; + box-shadow: @colot-picker-swatch-item-color-inset-shadow; } } } @@ -551,33 +516,35 @@ width: fit-content; } .@{prefix}-input { - padding: 0 4px; + padding: @color-picker-trigger-input-padding; } &__color { - width: 24px; - height: 24px; - margin-right: 4px; + width: 100%; + height: 100%; box-sizing: border-box; + display: flex; + align-items: center; .color-inner { border: 1px solid @scrollbar-color; display: block; - width: 22px; - height: 22px; + width: @color-picker-trigger-input-color-inner-size; + height: @color-picker-trigger-input-color-inner-size; color: transparent; position: relative; - border-radius: @border-radius-default; + border-radius: @border-radius-small; } } } } .@{prefix}-color-picker__gradient-slider { - padding: 0 9px; - border-radius: @color-picker-slider-height; + padding: @color-picker-slider-wrapper-padding; + border-radius: @color-picker-slider-wrapper-radius; .@{prefix}-color-picker--bg-alpha { + background: #fff; .transparentBgImage(); } } @@ -603,7 +570,6 @@ // 覆盖select-option 默认样式，使其更紧凑点 .@{prefix}-color-picker__select-options { > .@{prefix}-popup__content { - border-radius: @color-picker-border-radius; box-shadow: @shadow-1, @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left; } } diff --git a/style/web/components/color-picker/_var.less b/style/web/components/color-picker/_var.less index d1fa9194e0..68cd97b2a6 100644 --- a/style/web/components/color-picker/_var.less +++ b/style/web/components/color-picker/_var.less @@ -11,35 +11,43 @@ // 如：@button-line-bg-color-hover // 如：@button-line-height-s -@color-picker-border-radius: 6px; -@color-picker-panel-width: 254px; +@color-picker-panel-width: 256px; @color-picker-panel-padding: @pop-padding-xl; @color-picker-panel-radius: @border-radius-medium; -@color-picker-saturation-height: 168px; +@color-picker-icon-radius: @border-radius-default; +@color-picker-saturation-height: 160px; @color-picker-saturation-radius: @border-radius-default; -@color-picker-saturation-thumb-size: 18px; +@color-picker-saturation-thumb-size: calc(@comp-size-xxxs + @size-1); @color-picker-margin: @comp-margin-m; @color-picker-slider-height: 8px; -@color-picker-slider-thumb-size: 18px; -@color-picker-slider-thumb-transform-x: @color-picker-slider-thumb-size * -.5; +@color-picker-slider-wrapper-radius: calc(@color-picker-slider-height / 2); +@color-picker-slider-wrapper-padding: 0 calc(@color-picker-saturation-thumb-size / 2); +@color-picker-slider-thumb-size: calc(@comp-size-xxxs + @size-1); +@color-picker-slider-thumb-transform-x: calc(@color-picker-slider-thumb-size * -.5); @color-picker-slider-thumb-padding: 2px; -@color-picker-input-format-width: 64px; +@color-picker-input-format-margin-left: @comp-margin-s; +@color-picker-select-format-margin-right: @comp-margin-xs; +@color-picker-select-format-width: 72px; @color-picker-font: @font-body-small; -@color-picker-icon-size: 20px; @color-picker-icon-radius: @border-radius-default; -@color-picker-icon-font-size: 16px; -@color-picker-degree-width: 42px; -@color-picker-gradient-preview-width: 32px; -@color-picker-gradient-preview-height: 32px; +@color-picker-icon-font-size: @color-picker-swatch-icon-size; +@color-picker-degree-width: @comp-size-xxl; +@color-picker-gradient-preview-width: @comp-size-s; +@color-picker-gradient-preview-height: @comp-size-s; @color-picker-gradient-preview-radius: @border-radius-default; -@color-picker-swatch-width: 18px; -@color-picker-swatch-height: 18px; +@color-picker-swatch-icon-size: @comp-size-xxxs; +@color-picker-swatch-action-margin-left: @comp-margin-s; +@color-picker-swatch-width: @comp-size-xxxs; +@color-picker-swatch-height: @comp-size-xxxs; @color-picker-swatch-radius: @border-radius-circle; @color-picker-swatch-padding: 0; @color-picker-swatch-border-size: 1px; @color-picker-swatch-columns: 10; -@color-picker-swatch-row-gap: 5.7px; -@color-picker-swatch-column-gap: 5.7px; +@color-picker-swatch-item-padding: calc(@color-picker-panel-padding - 8px); //make sure swatchItem scale +@color-picker-swatch-item-left-negative-padding: calc(0px - @color-picker-swatch-item-padding); +// columnGap = (panelWidth - (panelPadding * 2) + (swatchColor * columnsItem)) / 9 +@color-picker-swatch-row-gap: calc(calc(@color-picker-panel-width - calc(calc(@color-picker-panel-padding * 2) + calc(@color-picker-swatch-height * @color-picker-swatch-columns))) / 9); +@color-picker-swatch-column-gap: calc(calc(@color-picker-panel-width - calc(calc(@color-picker-panel-padding * 2) + calc(@color-picker-swatch-width * @color-picker-swatch-columns))) / 9); @color-picker-swatch-wrap-margin-left: (@color-picker-swatch-padding + @color-picker-swatch-border-size) * -1; // 右边往外伸出一点，让滚动条居外侧 @color-picker-swatch-wrap-margin-right: @color-picker-swatch-wrap-margin-left - @@ -48,6 +56,15 @@ @color-picker-swatch-wrap-margin-left; @color-picker-swatch-max-rows: 4; // 最大显示行数 +// shadow +@color-picker-panel-shadow: @shadow-2-inset; +@color-picker-thumbs-shadow: @shadow-1; +@colot-picker-swatch-item-color-inset-shadow: @shadow-inset; + // 最大高度 = 行数 * (itemHeight + itemMarginTop)m; -@color-picker-swatch-rows-max-height: @color-picker-swatch-max-rows * - (@color-picker-swatch-height + @color-picker-swatch-row-gap); +@color-picker-swatch-rows-max-height: calc(@color-picker-swatch-max-rows * +calc(@color-picker-swatch-height + @color-picker-swatch-row-gap)); + +// trigger-input +@color-picker-trigger-input-padding: 0 @comp-paddingLR-s 0 @comp-paddingLR-xs; +@color-picker-trigger-input-color-inner-size: calc(@comp-size-xs - 2px); diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less index 36cdce8461..2bef6b0589 100644 --- a/style/web/components/date-picker/_index.less +++ b/style/web/components/date-picker/_index.less @@ -17,7 +17,7 @@ .@{prefix}-date-picker__header-controller-month-popup, .@{prefix}-date-picker__header-controller-year-popup { > .@{prefix}-popup__content { - max-height: @datepicker-panel-select-max-width;; + max-height: @datepicker-panel-select-max-width; } } @@ -65,19 +65,21 @@ display: flex; align-items: center; justify-content: space-between; - gap: @comp-margin-m; + gap: @datepicker-header-gap; width: 100%; &-controller { display: inline-flex; - gap: @comp-margin-s; + gap: @datepicker-header-controller-gap; .@{prefix}-date-picker__header-controller-month { width: @datepicker-month-controller-width; + display: flex; } .@{prefix}-date-picker__header-controller-year { width: @datepicker-year-controller-width; + display: flex; } } } @@ -102,13 +104,20 @@ td.@{prefix}-date-picker__cell { padding: 0; border: 0; - line-height: initial; + line-height: @text-line-height-base; } thead::after { content: "-"; display: block; - line-height: @spacer-s - 1px; + line-height: @datepicker-thead-pseudo-line-height; + color: transparent; + } + + thead::before { + content: "-"; + display: block; + line-height: @datepicker-thead-pseudo-line-height; color: transparent; } } @@ -130,11 +139,11 @@ &::after { content: ""; position: absolute; - left: 33px; + left: @datepicker-week-firstcell-margin-left; right: 0; - top: 3px; + top: @datepicker-cell-inner-margin; z-index: 10; - height: 24px; + height: @datepicker-cell-height; border-radius: @border-radius-default; transition: @datepicker-transition; pointer-events: none; @@ -153,6 +162,7 @@ // 高亮 &--active { &::after { + opacity: 1; z-index: 0; background-color: @datepicker-cell-active-background; } @@ -168,6 +178,7 @@ // 在高亮区间 &--range { &::after { + opacity: 1; z-index: 0; background-color: @datepicker-highlight-color; } @@ -236,13 +247,13 @@ .@{prefix}-date-range-picker__panel-time { display: flex; flex-direction: column; - gap: @comp-margin-xxs; + gap: @datepicker-time-panel-gap; padding: @datepicker-time-panel-padding; border-left: 1px solid @datepicker-panel-divider-color; &-viewer { display: flex; - height: @comp-size-m; + height: @datepicker-time-header-viewer-size; line-height: @text-line-height-base; align-items: center; justify-content: center; @@ -262,8 +273,8 @@ display: flex; flex-direction: column; width: 100%; - padding: @comp-paddingTB-m @comp-paddingLR-m; - gap: @comp-margin-m; + padding: @datepicker-panel-padding; + gap: @datepicker-panel-gap; max-width: @datepicker-panel-max-width; } @@ -274,13 +285,15 @@ .@{prefix}-date-picker__cell--hover-highlight { &::before, &::after { - left: -28px; + opacity: 1; + left: @datepicker-cell-month-year-left; } } .@{prefix}-date-picker__cell--hover-highlight + .@{prefix}-date-picker__cell--active { &::after { + opacity: 1; left: 0; } } @@ -288,7 +301,7 @@ .@{prefix}-date-picker__cell--highlight + .@{prefix}-date-picker__cell--highlight { &::before { - left: -28px; + left: @datepicker-cell-month-year-left; } } } @@ -298,6 +311,7 @@ .@{prefix}-date-picker__panel-quarter { .@{prefix}-date-picker__header-controller-year { width: 130px; + display: flex; } .@{prefix}-date-picker__table { @@ -305,7 +319,7 @@ tbody { width: 100%; display: flex; - gap: @comp-margin-l; + gap: @datepicker-year-month-quarter-table-gap; flex-direction: column; tr { @@ -317,7 +331,7 @@ } .@{prefix}-date-picker__cell--disabled + .@{prefix}-date-picker__cell--disabled:before { - left: -@spacer-7; + left: @datepicker-cell-disabled-left; } .@{prefix}-date-picker__cell:nth-child(1) { @@ -343,12 +357,14 @@ content: ""; position: absolute; top: 50%; - right: 0; - left: 0; + right: -5%; + left: -5%; z-index: 1; + opacity: 0; + border-radius: @border-radius-default; height: @datepicker-cell-height; transform: translateY(-50%); - transition: all @anim-duration-base @anim-time-fn-easing; + transition: opacity @anim-duration-base @anim-time-fn-ease-out; } &:hover { @@ -365,7 +381,7 @@ align-items: center; width: @datepicker-cell-min-width; height: @datepicker-cell-height; - margin: @spacer-s - 1px; + margin: @datepicker-cell-inner-margin; border-radius: @datepicker-panel-border-radius; transition: @datepicker-transition; } @@ -379,17 +395,20 @@ &--hover-highlight { &::after { + opacity: 1; background-color: @datepicker-highlight-color; } } &--highlight { &::before { + opacity: 1; background-color: @datepicker-highlight-color; } &.@{prefix}-date-picker__cell--hover-highlight { &::after { + opacity: 1; background-color: @datepicker-hover-highlight-color; } } @@ -417,18 +436,28 @@ &-start { &::before { - left: 6px; + opacity: 1; + left: @datepicker-cell-start-end-horizontal; border-top-left-radius: @border-radius-default; border-bottom-left-radius: @border-radius-default; } + + &:hover::before { + left: -5%; + } } &-end { &::before { - right: 6px; + opacity: 1; + right: @datepicker-cell-start-end-horizontal; border-top-right-radius: @border-radius-default; border-bottom-right-radius: @border-radius-default; } + + &:hover::before { + right: -5%; + } } } @@ -449,8 +478,10 @@ &--disabled + &--disabled { &::before { - left: calc(0px - calc(@datepicker-cell-min-width + @comp-margin-s)); + opacity: 1; + left: @datepicker-cell-disabled-left; background-color: @datepicker-cell-disable-background-color; + border-radius: @border-radius-default; } } } diff --git a/style/web/components/date-picker/_var.less b/style/web/components/date-picker/_var.less index c64c1a96b3..cbd6bcf98d 100644 --- a/style/web/components/date-picker/_var.less +++ b/style/web/components/date-picker/_var.less @@ -18,22 +18,36 @@ @datepicker-panel-select-max-width: 160px; @datepicker-panel-divider-color: @component-stroke; @datepicker-time-panel-width: 216px; -@datepicker-time-panel-padding: @spacer-l; - +@datepicker-time-panel-padding: @pop-padding-xl calc(@pop-padding-xl - @comp-margin-xs); +@datepicker-panel-padding: @pop-padding-xl; +@datepicker-header-gap: @comp-margin-m; +@datepicker-header-controller-gap: @comp-margin-s; +@datepicker-time-header-viewer-size: @comp-size-m; +@datepicker-panel-gap: @comp-margin-m; +@datepicker-year-month-quarter-table-gap: @comp-margin-m; +@datepicker-week-firstcell-margin-left: @comp-margin-xxxl; +@datepicker-cell-disabled-left: calc(0px - calc(@datepicker-cell-min-width + @comp-margin-m)); +@datepicker-cell-start-end-horizontal: calc(@datepicker-cell-inner-margin * 2); +@datepicker-cell-disabled-left: calc(0px - @comp-size-l); @datepicker-year-controller-width: 78px; @datepicker-month-controller-width: 80px; @datepicker-cell-min-width: @comp-size-xs; @datepicker-cell-height: @comp-size-xs; @datepicker-cell-min-width-l: @comp-size-xxl; +@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xs)); +@datepicker-cell-inner-margin: calc(@comp-margin-xs - 1px); @datepicker-th-font-weight: 400; @datepicker-font-weight-medium: 500; @datepicker-panel-border-radius: @border-radius-default; -@datepicker-presets-padding: @comp-paddingTB-m @comp-paddingLR-m; +@datepicker-presets-padding: @pop-padding-xl; @datepicker-presets-gap: @comp-margin-s; +@datepicker-thead-pseudo-line-height: @comp-margin-xs; +@datepicker-time-panel-gap: calc(@datepicker-panel-gap / 2); + // cell @datepicker-cell-hover-background: @bg-color-container-hover; @datepicker-cell-active-color: @text-color-anti; @@ -46,8 +60,8 @@ @datepicker-now-background-color: @brand-color-light; @datepicker-highlight-color: @brand-color-light; -@datepicker-hover-highlight-color: rgba(0, 0, 0, .04); // 此处亮色暗色通用，无token -@datepicker-presets-min-width: 40px; +@datepicker-hover-highlight-color: rgba(0, 0, 0, .06); // 此处亮色暗色通用，无token +@datepicker-presets-min-width: @comp-size-xl; @datepicker-presets-text-color: @brand-color; @datepicker-presets-text-color-hover: @brand-color-hover; diff --git a/style/web/components/time-picker/_var.less b/style/web/components/time-picker/_var.less index 66c4d85d1f..553155db49 100644 --- a/style/web/components/time-picker/_var.less +++ b/style/web/components/time-picker/_var.less @@ -9,7 +9,7 @@ @time-picker-font: @font-body-medium; -@time-picker-panel-body-height: calc(calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) * 7); +@time-picker-panel-body-height: calc(calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) * 7 + @time-picker-panel-item-margin-vertical); @time-picker-panel-item-height: @comp-size-xs; @time-picker-input-item-input-width: 28px; @time-picker-input-item-input-meridiem-width: 36px; From 67de3b02078431c8b6cb878c86509a9f453be6c5 Mon Sep 17 00:00:00 2001 From: yuyang Date: Fri, 18 Nov 2022 19:14:26 +0800 Subject: [PATCH 056/312] Feat/input size token (#1017) * feat: menu inner height * feat: replace switch taginput and textarea size token --- style/web/components/menu/_index-v2.less | 6 ++--- style/web/components/menu/_index.less | 6 ++--- style/web/components/switch/_index.less | 24 ++++++++--------- style/web/components/switch/_var.less | 11 ++++---- style/web/components/tag-input/_index.less | 20 +++++++-------- style/web/components/tag-input/_var.less | 12 ++++----- style/web/components/textarea/_var.less | 10 ++++---- style/web/components/transfer/_var.less | 30 +++++++++++----------- 8 files changed, 60 insertions(+), 59 deletions(-) diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index 1c58c5be8f..8660880e11 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -30,7 +30,7 @@ a.@{prefix}-menu__item { &__inner { display: flex; - height: 64px; + height: @comp-size-xxxl; li + li { margin-left: @comp-margin-xs; @@ -60,7 +60,7 @@ a.@{prefix}-menu__item { position: relative; display: flex; align-items: center; - height: 64px; + height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: @comp-margin-s; @@ -375,7 +375,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__logo:not(:empty) { width: 100%; - height: 64px; + height: var(--td-comp-size-xxxl); border-bottom: 1px solid @menu-border-color; } diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 4ae95213a8..d18ca6284b 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -30,7 +30,7 @@ a.@{prefix}-menu__item { &__inner { display: flex; - height: 64px; + height: @comp-size-xxxl; li + li { margin-left: @comp-margin-xs; @@ -60,7 +60,7 @@ a.@{prefix}-menu__item { position: relative; display: flex; align-items: center; - height: 64px; + height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: @comp-margin-s; @@ -371,7 +371,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__logo:not(:empty) { width: 100%; - height: 64px; + height: var(--td-comp-size-xxxl); border-bottom: 1px solid @menu-border-color; } diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less index 802b4765e4..0e118c8372 100644 --- a/style/web/components/switch/_index.less +++ b/style/web/components/switch/_index.less @@ -19,7 +19,7 @@ margin: 0; height: @switch-height-default; line-height: @switch-height-default; - border-radius: (@switch-height-default / 2); + border-radius: calc(@switch-height-default / 2); min-width: @switch-min-width-default; transition: @switch-transition; background-color: @switch-unchecked-bg-color; @@ -33,13 +33,13 @@ justify-content: center; top: @switch-width-border-default; left: @switch-width-border-default; - width: (@switch-height-default - 2px * @switch-width-border-default); - height: (@switch-height-default - 2px * @switch-width-border-default); + width: calc(@switch-height-default - 2 * @switch-width-border-default); + height: calc(@switch-height-default - 2 * @switch-width-border-default); border-radius: @border-radius-extraLarge; transition: @switch-handle-transition; .t-icon { - font-size: (@switch-height-default - 4px); + font-size: calc(@switch-height-default - 4px); color: transparent; } @@ -154,7 +154,7 @@ min-width: @switch-min-width-l; height: @switch-height-l; line-height: @switch-height-l; - border-radius: (@switch-height-l / 2); + border-radius: calc(@switch-height-l / 2); &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) { @@ -175,11 +175,11 @@ .@{prefix}-switch__handle { top: @switch-width-border-l; left: @switch-width-border-l; - width: (@switch-height-l - 2px * @switch-width-border-l); - height: (@switch-height-l - 2px * @switch-width-border-l); + width: calc(@switch-height-l - 2 * @switch-width-border-l); + height: calc(@switch-height-l - 2 * @switch-width-border-l); .t-icon { - font-size: (@switch-height-l - 4px); + font-size: calc(@switch-height-l - 4px); } } @@ -209,7 +209,7 @@ min-width: @switch-min-width-s; height: @switch-height-s; line-height: @switch-height-s; - border-radius: (@switch-height-s / 2); + border-radius: calc(@switch-height-s / 2); &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) { @@ -230,11 +230,11 @@ .@{prefix}-switch__handle { top: @switch-width-border-s; left: @switch-width-border-s; - width: (@switch-height-s - 2 * @switch-width-border-s); - height: (@switch-height-s - 2 * @switch-width-border-s); + width: calc(@switch-height-s - 2 * @switch-width-border-s); + height: calc(@switch-height-s - 2 * @switch-width-border-s); .t-icon { - font-size: (@switch-height-s - 4px); + font-size: calc(@switch-height-s - 4px); } } diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less index bb18a7e7cc..7056164acb 100644 --- a/style/web/components/switch/_var.less +++ b/style/web/components/switch/_var.less @@ -25,9 +25,9 @@ @switch-content-color-unchecked: @text-color-anti; // 尺寸 -@switch-height-l: 24px; -@switch-height-default: 20px; -@switch-height-s: 16px; +@switch-height-l: @comp-size-xs; +@switch-height-default: @comp-size-xxs; +@switch-height-s: @comp-size-xxxs; @switch-min-width-l: 44px; @switch-min-width-default: 36px; @@ -44,7 +44,7 @@ // 间距 @switch-content-margin-left-l: (@switch-min-width-l / 2 + 2px); -@switch-content-margin-right-l: 8px; +@switch-content-margin-right-l: @comp-paddingLR-s; @switch-content-margin-left-default: (@switch-min-width-default / 2 + 2px); @switch-content-margin-right-default: 6px; @@ -55,4 +55,5 @@ // 动画 @switch-transition: all @anim-duration-base @anim-time-fn-ease-out; @switch-handle-transition: all @anim-duration-base @anim-time-fn-easing; -@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, opacity @anim-duration-base linear; +@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, + opacity @anim-duration-base linear; diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index f572522099..54fd39ba4a 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -9,24 +9,24 @@ .@{prefix}-tag-input { .reset; .@{prefix}-tag { - animation: t-fade-in .1s ease-in-out; + animation: t-fade-in @anim-duration-base ease-in-out; } .@{prefix}-tag + .@{prefix}-tag { - margin-left: @spacer-s; + margin-left: @comp-margin-xs; } .@{prefix}-tag-input__drag_wrapper + .@{prefix}-tag-input__drag_wrapper { - margin-left: @spacer-s; + margin-left: @comp-margin-xs; } .@{prefix}-input { overflow: hidden; min-height: @tag-input-height-default; line-height: @tag-input-line-height-default; - padding: 0 @spacer-s; + padding: 0 @comp-paddingLR-xs; height: fit-content; &.@{prefix}-size-s { - padding: @spacer-s * .5; + padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; min-height: @tag-input-height-s; line-height: @tag-input-line-height-s; } @@ -46,11 +46,11 @@ .@{prefix}-tag-input__prefix, .@{prefix}-input__prefix:empty + input { - margin-left: @spacer-s; + margin-left: @comp-margin-xs; } .@{prefix}-input--auto-width { - padding-right: @spacer-s; + padding-right: @comp-paddingLR-xs; } } @@ -63,7 +63,7 @@ .@{prefix}-input { display: block; - padding-right: @spacer-3; + padding-right: @comp-paddingLR-xl; &.@{prefix}-input--prefix > .@{prefix}-input__prefix { display: inline; @@ -72,7 +72,7 @@ .@{prefix}-input__suffix-icon { position: absolute; - right: @spacer; + right: @comp-margin-s; bottom: 0; } } @@ -81,5 +81,5 @@ .@{prefix}-tag-input__prefix { width: max-content; display: inline-block; - margin-right: @spacer; + margin-right: @comp-margin-s; } diff --git a/style/web/components/tag-input/_var.less b/style/web/components/tag-input/_var.less index 21fcdfe5cf..7ffde8824b 100644 --- a/style/web/components/tag-input/_var.less +++ b/style/web/components/tag-input/_var.less @@ -1,7 +1,7 @@ -@tag-input-height-s: 24px; -@tag-input-height-default: 32px; -@tag-input-height-l: 40px; +@tag-input-height-s: @comp-size-xs; +@tag-input-height-default: @comp-size-m; +@tag-input-height-l: @comp-size-xl; -@tag-input-line-height-s: 20px; -@tag-input-line-height-default: 28px; -@tag-input-line-height-l: 36px; +@tag-input-line-height-s: calc(@tag-input-height-s - 4px); +@tag-input-line-height-default: calc(@tag-input-height-default - 4px); +@tag-input-line-height-l: calc(@tag-input-height-l - 4px); diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less index 40a2d8786e..796499429a 100644 --- a/style/web/components/textarea/_var.less +++ b/style/web/components/textarea/_var.less @@ -31,17 +31,17 @@ @textarea-text-color-tips: @text-color-placeholder; // 尺寸 -@textarea-height: 56px; -@textarea-tips-min-height: 24px; +@textarea-height: @comp-size-xxxl; +@textarea-tips-min-height: @comp-size-xs; // 字体 @textarea-font: @font-body-medium; @textarea-tips-font: @font-body-small; // 间距 -@textarea-padding: 5px @spacer; -@textarea-limit-position-right: @spacer-2; -@textarea-limit-position-bottom: @spacer-1; +@textarea-padding: 5px @comp-paddingLR-s; +@textarea-limit-position-right: calc(@comp-paddingLR-s * 2); +@textarea-limit-position-bottom: @comp-paddingTB-s; // 边框 @textarea-border-color: @border-level-2-color; diff --git a/style/web/components/transfer/_var.less b/style/web/components/transfer/_var.less index eb31423a72..0ac159f894 100644 --- a/style/web/components/transfer/_var.less +++ b/style/web/components/transfer/_var.less @@ -6,19 +6,19 @@ @transfer-font-color: @text-color-primary; // 间距 -@transfer-list-margin-horizontal: @spacer; -@transfer-list-header-padding: 0 @spacer * 1.5; +@transfer-list-margin-horizontal: @comp-margin-s; +@transfer-list-header-padding: 0 @comp-paddingLR-s; @transfer-list-header-margin: 0 @transfer-list-margin-horizontal; -@transfer-list-header-text-margin-left: @spacer; -@transfer-list-body-padding: @spacer 0 @spacer 0; -@transfer-list-item-padding: 5px @spacer; +@transfer-list-header-text-margin-left: @comp-margin-s; +@transfer-list-body-padding: @comp-paddingTB-s 0; +@transfer-list-item-padding: 5px @comp-paddingLR-s; @transfer-list-item-margin: 0 @transfer-list-margin-horizontal; -@transfer-list-item-text-margin-left: @spacer; +@transfer-list-item-text-margin-left: @comp-margin-s; @transfer-list-search-wrapper-margin: 0 @transfer-list-margin-horizontal; @transfer-list-with-search-padding-top: 40px; -@transfer-list-wrapper-padding: @spacer * 1.5; -@transfer-list-pagination-padding: 0 @spacer 0 @spacer * .5; -@transfer-operations-margin: auto @spacer; +@transfer-list-wrapper-padding: @comp-paddingTB-m @comp-paddingLR-m; +@transfer-list-pagination-padding: 0 @comp-paddingLR-s 0 @comp-paddingLR-xs; +@transfer-operations-margin: auto @comp-margin-s; @transfer-operations-button-padding: 0 3px; // 有翻页时候transfer的下内边距 @transfer-with-pagination-padding-bottom: 32px; @@ -51,18 +51,18 @@ // 包裹树组件时候transfer的高度 @transfer-wrap-height: 320px; @transfer-wrap-width: 206px; -@transfer-list-header-height: 48px; -@transfer-list-header-width: ( +@transfer-list-header-height: @comp-size-xxl; +@transfer-list-header-width: calc( @transfer-common-width - @transfer-list-margin-horizontal * 2 ); -@transfer-list-search-wrapper-width: ( +@transfer-list-search-wrapper-width: calc( @transfer-common-width - @transfer-list-margin-horizontal * 2 ); -@transfer-list-pagination-height: 24px; +@transfer-list-pagination-height: @comp-size-xs; @transfer-list-pagination-line-height: 16px; -@transfer-operations-button-height: 24px; +@transfer-operations-button-height: @comp-size-xs; @transfer-operations-button-line-height: 14px; -@transfer-operations-button-icon-width: 24px; +@transfer-operations-button-icon-width: @comp-size-xs; @transfer-operations-icon-size: 16px; // 字体 From e96252e950668b54e7cb478fef82c94b1793dbd0 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 21 Nov 2022 14:59:33 +0800 Subject: [PATCH 057/312] fix(web): input-number, blur number to string (#1020) * fix(web): input-number, blur number to string * refactor(web): remove useless semicolon Co-authored-by: sheepluo --- js/input-number/number.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 792562a9de..94da7c78b4 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -55,7 +55,9 @@ export function formatToNumber( ): string | number { if (num === undefined || num === null || num === '') return num; if (num === '-') return 0; - if (num[num.length - 1] === '.') return num.slice(0, -1); + if (num[num.length - 1] === '.') { + return extra?.largeNumber ? num.slice(0, -1) : Number(num.slice(0, -1)); + } const isLargeNumber = extra?.largeNumber && isString(num); let newNumber: string | number = num; if ((isString(num) && num.includes('e')) || isNumber(num)) { From 261e462213907572a966734899b693a28f80ba4b Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 21 Nov 2022 15:07:18 +0800 Subject: [PATCH 058/312] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=8C=96=E7=BB=86=E8=8A=82=20(#1021)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/date-picker/format.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 027a3dc008..8223d4a12a 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -21,9 +21,9 @@ export function parseToDayjs( dateText = dayjs(dateText).format(format) as string; } - const yearStr = dateText.split(/[-/.]/)[0]; - const weekStr = dateText.split(/[-/.]/)[1]; - const weekFormatStr = format.split(/[-/.]/)[1]; + const yearStr = dateText.split(/[-/.\s]/)[0]; + const weekStr = dateText.split(/[-/.\s]/)[1]; + const weekFormatStr = format.split(/[-/.\s]/)[1]; const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); for (let i = 0; i <= 52; i += 1) { let nextWeek = firstWeek.add(i, 'week'); @@ -41,12 +41,12 @@ export function parseToDayjs( dateText = dayjs(dateText).format(format) as string; } - const yearStr = dateText.split(/[-/.]/)[0]; - const quarterStr = dateText.split(/[-/.]/)[1]; - const quarterFormatStr = format.split(/[-/.]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); - for (let i = 0; i <= 52; i += 1) { - const nextQuarter = firstWeek.add(i, 'quarter'); + const yearStr = dateText.split(/[-/.\s]/)[0]; + const quarterStr = dateText.split(/[-/.\s]/)[1]; + const quarterFormatStr = format.split(/[-/.\s]/)[1]; + const firstQuarter = dayjs(yearStr, 'YYYY').startOf('year'); + for (let i = 0; i < 4; i += 1) { + const nextQuarter = firstQuarter.add(i, 'quarter'); if (nextQuarter.format(quarterFormatStr) === quarterStr) { return nextQuarter; } From 3f612144b19c9dfb102431bdd84371f8b53bab5d Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 21 Nov 2022 19:01:31 +0800 Subject: [PATCH 059/312] fix(web): input-number width: 100% does not work in Space (#1019) * fix(web): input-number style * refactor(web): use @comp-margin-s instead 8px --- style/web/components/input-number/_index.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less index 07de35a8e3..598a2488f1 100644 --- a/style/web/components/input-number/_index.less +++ b/style/web/components/input-number/_index.less @@ -345,3 +345,13 @@ } } } + +.@{inputNumberCls}--row { + .@{prefix}-input__wrap { + width: initial; + margin-right: @comp-margin-s; + } + .@{prefix}-input-number__increase { + right: 0; + } +} From 51fc2d385cad718deefceb5a08f0e77fd140c88f Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 21 Nov 2022 19:56:24 +0800 Subject: [PATCH 060/312] feat(web): fixed border width (#1023) Co-authored-by: sheepluo --- docs/web/api/table.md | 2 +- style/web/components/table/_index.less | 44 +++++++++++--------------- style/web/components/table/_var.less | 3 ++ 3 files changed, 23 insertions(+), 26 deletions(-) diff --git a/docs/web/api/table.md b/docs/web/api/table.md index 8845750414..5fb5aad893 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -55,7 +55,7 @@ spline: data ### 固定列的表格 -列的数量过多时，使用固定列方便表格数据内容呈现，支持固定左侧列和固定右侧列。可通过给列属性设置 `fixed: 'left'` 或 `fixed: right` 以达成固定列效果。 +列的数量过多时，使用固定列方便表格数据内容呈现，支持固定左侧列和固定右侧列。可通过给列属性设置 `fixed: 'left'` 或 `fixed: right` 以达成固定列效果。固定列线条宽度可以通过 CSS 控制粗细。 表格宽度模式有两种：`fixed` 和 `auto`，[MDN 详细解释](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout)，组件默认为 `fixed`。如果希望表格列宽自适应，设置 `table-layout: auto` 即可，这种模式下固定列必须指定表格内容的总宽度 `tableContentWidth`，`tableContentWidth` 的值必须大于表格可见宽度。 diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 3dc01ec8e2..d4ebb78035 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -778,38 +778,32 @@ overflow: auto; } -// 可向左滚动时，左边显示固定列显示阴影，右边同理 .@{prefix}-table__content--scrollable-to-left { - .@{prefix}-table__cell--fixed-left-last::after { - border-right: @table-fixed-cell-border-width solid @table-fixed-cell-border-color; + border-right: @table-fixed-cell-border-light; } } .@{prefix}-table__content--scrollable-to-right { - .@{prefix}-table__cell--fixed-right-first::after { - border-left: @table-fixed-cell-border-width solid @table-fixed-cell-border-color; - } -} - -// .@{prefix}-table--affixed-header { -// .@{prefix}-table__content { -// th.@{prefix}-table__cell--fixed-left-last::after, -// th.@{prefix}-table__cell--fixed-right-first::after { -// box-shadow: none; -// } -// } -// } - -// .@{prefix}-table--affixed-footer { -// .@{prefix}-table__content { -// th.@{prefix}-table__cell--fixed-left-last::after, -// th.@{prefix}-table__cell--fixed-right-first::after { -// box-shadow: none; -// } -// } -// } + border-left: @table-fixed-cell-border-light; + } +} + +// 可向左滚动时，左边显示固定列显示阴影，右边同理 +.@{prefix}-table--bordered { + &.@{prefix}-table__content--scrollable-to-left { + .@{prefix}-table__cell--fixed-left-last::after { + border-right: @table-fixed-cell-border; + } + } + + &.@{prefix}-table__content--scrollable-to-right { + .@{prefix}-table__cell--fixed-right-first::after { + border-left: @table-fixed-cell-border; + } + } +} .@{prefix}-table__scroll-bar-divider { position: absolute; diff --git a/style/web/components/table/_var.less b/style/web/components/table/_var.less index a64f449c4c..ce2002016a 100644 --- a/style/web/components/table/_var.less +++ b/style/web/components/table/_var.less @@ -37,6 +37,9 @@ // https://medium.com/@andrea.verlicchi/inset-box-shadow-rendering-bug-on-safari-ios-13-4-6bf4256a1ee0 @table-fixed-cell-box-shadow-spread-radius: -10px; @table-fixed-cell-border-width: 4px; +@table-fixed-cell-border-width-light: 2px; +@table-fixed-cell-border: @table-fixed-cell-border-width solid @table-fixed-cell-border-color; +@table-fixed-cell-border-light: @table-fixed-cell-border-width-light solid @table-fixed-cell-border-color; @table-controller-trigger-padding: @comp-paddingTB-l 0; @table-default-pagination-padding: @comp-paddingTB-l @comp-paddingLR-l; From 2859f94b6f847e41bc70c0de472efc8d0dae2e0e Mon Sep 17 00:00:00 2001 From: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Date: Tue, 22 Nov 2022 10:25:56 +0800 Subject: [PATCH 061/312] =?UTF-8?q?fix(menu):=20=E5=BD=93title=E8=BE=83?= =?UTF-8?q?=E9=95=BF=E6=97=B6=E5=8F=B3=E4=BE=A7=E7=AE=AD=E5=A4=B4=E5=8F=98?= =?UTF-8?q?=E5=B0=8F=20(#1022)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: loopzhou --- style/web/components/menu/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index d18ca6284b..6da4c3845e 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -502,6 +502,7 @@ a.@{prefix}-menu__item { .@{prefix}-fake-arrow { margin-left: auto; + min-width: 16px; } &.@{prefix}-is-active:not(.@{prefix}-is-opened) { From adf60a8249d8bb956da3ab2db1c227a8a0b4dff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= Date: Tue, 22 Nov 2022 10:38:22 +0800 Subject: [PATCH 062/312] feat: narrow-scrollbar use scrollbar mixin (#1025) * feat: narrow-scrollbar use scrollbar mixin * chore: fix lint Co-authored-by: yuyang --- style/web/_global.less | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/style/web/_global.less b/style/web/_global.less index 0dfb47e1c2..5af17802f8 100644 --- a/style/web/_global.less +++ b/style/web/_global.less @@ -1,5 +1,7 @@ @import "./_variables.less"; +@import "./mixins/_scrollbar.less"; + // 响应式断点 后面支持紧凑模式可以迁移过去 :root { --td-screen-xs: @screen-xs; @@ -12,18 +14,7 @@ // 统一的scrollbar .narrow-scrollbar { - &::-webkit-scrollbar { - width: 8px; - height: 8px; - background: transparent; - } - - &::-webkit-scrollbar-thumb { - border-radius: @border-radius-medium; - border: 2px solid transparent; - background-clip: content-box; - background-color: @scrollbar-color; - } + .scrollbar(8px, 2px); } // 统一的可旋转箭头 From 28a1883305200fb146934890a2a0472c1d164ad7 Mon Sep 17 00:00:00 2001 From: WenKang Date: Tue, 22 Nov 2022 16:25:11 +0800 Subject: [PATCH 063/312] feat: form adornment pagination slider tag-input textarea transfer size toke and fix style bug (#1026) --- style/web/components/form/_index.less | 6 ++--- style/web/components/form/_var.less | 7 ++--- .../web/components/input-adornment/_var.less | 2 +- style/web/components/input/_index.less | 6 +++++ style/web/components/input/_var.less | 1 + style/web/components/pagination/_index.less | 14 +++++++++- style/web/components/pagination/_var.less | 2 +- style/web/components/radio/_index.less | 2 +- style/web/components/slider/_var.less | 6 ++--- style/web/components/tag-input/_index.less | 2 +- style/web/components/textarea/_var.less | 2 +- style/web/components/transfer/_index.less | 22 ++++++---------- style/web/components/transfer/_var.less | 26 +++++++++---------- 13 files changed, 56 insertions(+), 42 deletions(-) diff --git a/style/web/components/form/_index.less b/style/web/components/form/_index.less index 5c33d1f3d2..e989a6b2a9 100644 --- a/style/web/components/form/_index.less +++ b/style/web/components/form/_index.less @@ -107,10 +107,10 @@ &__status { display: flex; - margin-left: @form-status-margin-left; + margin: @form-status-margin; > .t-icon { - font-size: 20px; + font-size: @form-status-icon-size; } &-without-icon { @@ -123,7 +123,7 @@ } button + button { - margin-left: @form-status-margin-left; + margin-left: @form-status-button-margin; } } } diff --git a/style/web/components/form/_var.less b/style/web/components/form/_var.less index 534d55f8d4..d653bf648c 100644 --- a/style/web/components/form/_var.less +++ b/style/web/components/form/_var.less @@ -37,10 +37,11 @@ @form-label-padding-right: @comp-paddingLR-xl; @form-label-margin-right-required: @comp-margin-xs; @form-label-margin-colon: 0 @comp-margin-xxs; -@form-status-position-right: -32px; -@form-status-margin-left: @comp-margin-s; -@form-status-button-width: 32px; +@form-status-margin: 0 @comp-margin-s; +@form-status-button-margin: @comp-margin-s; +@form-status-button-width: @comp-size-m; @from-help-text-margin-top: @comp-margin-xs; +@form-status-icon-size: @comp-size-xxxs; // status @input-border-color-success: @success-color; diff --git a/style/web/components/input-adornment/_var.less b/style/web/components/input-adornment/_var.less index 8d1a88520c..60034a240c 100644 --- a/style/web/components/input-adornment/_var.less +++ b/style/web/components/input-adornment/_var.less @@ -15,4 +15,4 @@ @import "../input/_var.less"; -@input-adornment-item-padding: 0 @comp-paddingLR-m; +@input-adornment-item-padding: 0 @comp-paddingLR-s; diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less index da76ad6e66..40813b78bf 100644 --- a/style/web/components/input/_index.less +++ b/style/web/components/input/_index.less @@ -128,6 +128,12 @@ .@{prefix}-input__suffix { > .t-icon { color: @input-inner-suffix-icon-color; + transition: all @anim-duration-base linear; + + &:hover { + color: @input-inner-suffix-icon-color-hover; + transition: all @anim-duration-base linear; + } } &:not(:empty) { diff --git a/style/web/components/input/_var.less b/style/web/components/input/_var.less index f472161ef3..efe06adadb 100644 --- a/style/web/components/input/_var.less +++ b/style/web/components/input/_var.less @@ -65,6 +65,7 @@ // 图标 @input-inner-prefix-icon-color: @text-color-placeholder; @input-inner-suffix-icon-color: @text-color-placeholder; +@input-inner-suffix-icon-color-hover: @text-color-secondary; // 字号 @input-font-l: @font-body-large; diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index 0188241813..6211ecf559 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -176,15 +176,27 @@ flex-shrink: 0; margin-left: @pagination-jump-margin; font-size: @pagination-font-default; - gap: @spacer-s; + gap: @comp-margin-s; } .@{prefix}-input-number { width: @pagination-input-width; + + .@{prefix}-input__inner { + text-align: center; + } } // 迷你尺寸 &.@{prefix}-size-s { + + .@{prefix}-input-adornment__append { + font: @pagination-font-s; + } + .@{prefix}-input-number { + width: 56px; + } + .@{prefix}-pagination { &__total { font: @pagination-font-s; diff --git a/style/web/components/pagination/_var.less b/style/web/components/pagination/_var.less index f8c9190911..6aeccb5f29 100644 --- a/style/web/components/pagination/_var.less +++ b/style/web/components/pagination/_var.less @@ -19,7 +19,7 @@ // 尺寸 @pagination-height-s: @comp-size-xs; @pagination-height-default: @comp-size-m; -@pagination-input-width: 48px; +@pagination-input-width: 56px; // 字号 @pagination-font-s: @font-body-small; diff --git a/style/web/components/radio/_index.less b/style/web/components/radio/_index.less index b7bbe01f6b..ace944022e 100644 --- a/style/web/components/radio/_index.less +++ b/style/web/components/radio/_index.less @@ -29,7 +29,7 @@ &.@{radio-cls}-group__outline { flex-wrap: wrap; - row-gap: @spacer-s; + row-gap: @comp-margin-xs; &.@{prefix}-size-s { .@{radio-button--cls} { diff --git a/style/web/components/slider/_var.less b/style/web/components/slider/_var.less index 2b31e45817..1a74d40628 100644 --- a/style/web/components/slider/_var.less +++ b/style/web/components/slider/_var.less @@ -18,14 +18,14 @@ // 尺寸 @slider-input-width: 80px; @slider-row-input-width: 120px; -@slider-rail-track-step-size: 4px; +@slider-rail-track-step-size: @size-2; @slider-height: calc(@comp-paddingTB-xs * 2 + @slider-rail-track-step-size); @slider-control-bar-size: @comp-size-xxxs; @slider-vertical-height: 100%; @slider-vertical-mark-width: 18px; @slider-stop-width: 1px; -@slider-stop-height: 4px; -@slider-center-line-width: 8px; +@slider-stop-height: @size-2; +@slider-center-line-width: @size-4; @slider-center-line-height: 1px; // 边距 diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index 54fd39ba4a..9075f2c00b 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -26,7 +26,7 @@ height: fit-content; &.@{prefix}-size-s { - padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; + padding: calc(@comp-paddingTB-xxs - 1px) @comp-paddingLR-xs; min-height: @tag-input-height-s; line-height: @tag-input-line-height-s; } diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less index 796499429a..34ddf27590 100644 --- a/style/web/components/textarea/_var.less +++ b/style/web/components/textarea/_var.less @@ -39,7 +39,7 @@ @textarea-tips-font: @font-body-small; // 间距 -@textarea-padding: 5px @comp-paddingLR-s; +@textarea-padding: calc(calc(@comp-size-m - @text-line-height-base) / 2) @comp-paddingLR-s; @textarea-limit-position-right: calc(@comp-paddingLR-s * 2); @textarea-limit-position-bottom: @comp-paddingTB-s; diff --git a/style/web/components/transfer/_index.less b/style/web/components/transfer/_index.less index 6c819828c8..f7ddb1fe37 100644 --- a/style/web/components/transfer/_index.less +++ b/style/web/components/transfer/_index.less @@ -72,7 +72,6 @@ &-body { position: relative; height: 100%; - padding: @transfer-list-body-padding; box-sizing: border-box; } @@ -89,7 +88,8 @@ .@{prefix}-checkbox-group { width: 100%; flex-direction: column; - gap: @spacer-s; + gap: @transfer-list-checkbox-group-gap; + margin: @transfer-list-checkbox-group-margin; .@{prefix}-checkbox { margin-right: @transfer-list-margin-horizontal; @@ -153,7 +153,6 @@ height: @transfer-list-pagination-height; vertical-align: middle; padding: @transfer-list-pagination-padding; - line-height: @transfer-list-pagination-line-height; } &-footer { @@ -171,13 +170,7 @@ margin: @transfer-operations-margin; vertical-align: middle; overflow: hidden; - gap: @spacer-2; - - .@{prefix}-button { - padding: @transfer-operations-button-padding; - height: @transfer-operations-button-height; - transition: none; // 不要有过渡效果 不然在整体里面很突兀 会有跳动感 - } + gap: @transfer-operations-gap; .t-icon { font-size: @transfer-operations-icon-size; @@ -186,10 +179,6 @@ .t-icon + .t-button__text { margin-left: 0; } - - .t-button--icon-only { - width: @transfer-operations-button-icon-width; - } } &__empty { @@ -223,6 +212,11 @@ .@{prefix}-transfer__list { height: auto; + + .@{prefix}-tree { + padding: @transfer-list-with-tree-padding; + margin: @transfer-list-with-tree-margin; + } } } diff --git a/style/web/components/transfer/_var.less b/style/web/components/transfer/_var.less index 0ac159f894..9df8118021 100644 --- a/style/web/components/transfer/_var.less +++ b/style/web/components/transfer/_var.less @@ -10,31 +10,34 @@ @transfer-list-header-padding: 0 @comp-paddingLR-s; @transfer-list-header-margin: 0 @transfer-list-margin-horizontal; @transfer-list-header-text-margin-left: @comp-margin-s; -@transfer-list-body-padding: @comp-paddingTB-s 0; -@transfer-list-item-padding: 5px @comp-paddingLR-s; +@transfer-list-checkbox-group-gap: @comp-margin-xs; +@transfer-list-checkbox-group-margin: @comp-margin-s 0; +@transfer-list-item-padding: @comp-paddingLR-xs @comp-paddingLR-s; @transfer-list-item-margin: 0 @transfer-list-margin-horizontal; @transfer-list-item-text-margin-left: @comp-margin-s; @transfer-list-search-wrapper-margin: 0 @transfer-list-margin-horizontal; -@transfer-list-with-search-padding-top: 40px; +@transfer-list-with-search-padding-top: @comp-size-m; @transfer-list-wrapper-padding: @comp-paddingTB-m @comp-paddingLR-m; -@transfer-list-pagination-padding: 0 @comp-paddingLR-s 0 @comp-paddingLR-xs; +@transfer-list-with-tree-padding: 0 @comp-paddingLR-m; +@transfer-list-with-tree-margin: @comp-margin-s 0; +@transfer-list-pagination-padding: @comp-paddingTB-m; @transfer-operations-margin: auto @comp-margin-s; -@transfer-operations-button-padding: 0 3px; +@transfer-operations-gap: @comp-margin-l; // 有翻页时候transfer的下内边距 -@transfer-with-pagination-padding-bottom: 32px; +@transfer-with-pagination-padding-bottom: calc(@transfer-list-pagination-height + @transfer-list-pagination-padding * 2); // 有footer时候transfer的下内边距 @transfer-with-footer-padding-bottom: 48px; // 有翻页和footer时候transfer的下内边距 -@transfer-with-pagination-footer-padding-bottom: 88px; +@transfer-with-pagination-footer-padding-bottom: calc(@transfer-with-pagination-padding-bottom + @transfer-with-footer-padding-bottom); // search&footer @transfer-with-search-footer-padding-bottom: 48px; // pagination&search -@transfer-with-search-pagination-padding-bottom: 40px; +@transfer-with-search-pagination-padding-bottom: 48px; //pagination&footer&search @transfer-with-all-padding-bottom: 88px; // 尺寸 -@transfer-common-width: 196px; +@transfer-common-width: 200px; @transfer-common-height: 200px; // 有search的高度 @transfer-with-search-height: 240px; @@ -59,11 +62,8 @@ @transfer-common-width - @transfer-list-margin-horizontal * 2 ); @transfer-list-pagination-height: @comp-size-xs; -@transfer-list-pagination-line-height: 16px; @transfer-operations-button-height: @comp-size-xs; -@transfer-operations-button-line-height: 14px; -@transfer-operations-button-icon-width: @comp-size-xs; -@transfer-operations-icon-size: 16px; +@transfer-operations-icon-size: @comp-size-xxxs; // 字体 @transfer-font: @font-body-medium; From d2357fec50b94e777786754c1e83d635b4c8a1dc Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 22 Nov 2022 16:29:01 +0800 Subject: [PATCH 064/312] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20drawer=20?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E9=80=BB=E8=BE=91=20(#1027)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/drawer/_animate.less | 48 +++++++++++++++++++++++ style/web/components/drawer/_index.less | 2 + 2 files changed, 50 insertions(+) create mode 100644 style/web/components/drawer/_animate.less diff --git a/style/web/components/drawer/_animate.less b/style/web/components/drawer/_animate.less new file mode 100644 index 0000000000..1c53577870 --- /dev/null +++ b/style/web/components/drawer/_animate.less @@ -0,0 +1,48 @@ +@import "../../base.less"; + +.@{prefix}-drawer-fade-enter, +.@{prefix}-drawer-fade-appear { + opacity: 0; + animation-duration: @drawer-default-duration; + animation-fill-mode: both; + animation-timing-function: linear; + animation-play-state: paused; +} + +.@{prefix}-drawer-fade-exit { + animation-duration: @drawer-default-duration; + animation-fill-mode: both; + animation-timing-function: linear; + animation-play-state: paused; +} + +.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active, +.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active { + animation-name: tDrawerFadeIn; + animation-play-state: running; +} + +.@{prefix}-drawer-fade-exit.@{prefix}-drawer-fade-exit-active { + animation-name: tDrawerFadeOut; + animation-play-state: running; +} + +@keyframes tDrawerFadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes tDrawerFadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less index c1a70143fe..13006a401c 100644 --- a/style/web/components/drawer/_index.less +++ b/style/web/components/drawer/_index.less @@ -5,6 +5,8 @@ @import "./_mixin.less"; +@import "./_animate.less"; + @import "../../mixins/_reset.less"; @componentName: drawer; From 2ff871e1b11a7ae13b5d181c3e7b319fd0070fb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= Date: Wed, 23 Nov 2022 15:40:14 +0800 Subject: [PATCH 065/312] =?UTF-8?q?fix(submenu):=20=E5=AD=90=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E5=B7=A6=E5=8F=B3=E9=97=B4=E8=B7=9D=E4=B8=8D=E4=B8=80?= =?UTF-8?q?=E8=87=B4=20(#1029)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/menu/_index-v2.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index 8660880e11..d07aaac58b 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -636,7 +636,7 @@ a.@{prefix}-menu__item { z-index: 1; } - @horizontal-spacer: 16px; + @horizontal-spacer: 8px; &--right::before { right: -@horizontal-spacer; @@ -790,6 +790,7 @@ a.@{prefix}-menu__item { &-wrapper { padding: @comp-paddingTB-s @comp-paddingLR-s; + padding-right: 0; height: 100%; list-style: none; margin: 0; From 3b66eebf13b9c799a3fd1ac26d179b78fab5bd91 Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 23 Nov 2022 15:41:46 +0800 Subject: [PATCH 066/312] Feat: color token and switch style (#1028) * feat: form adornment pagination slider tag-input textarea transfer size toke and fix style bug * feat: color token and switch style --- style/web/_variables.less | 11 +++ style/web/components/slider/_index.less | 2 +- style/web/components/slider/_var.less | 4 +- style/web/components/switch/_index.less | 30 ++++++++- style/web/components/switch/_var.less | 46 ++++++++----- style/web/theme/_dark.less | 3 + style/web/theme/_light.less | 89 +++++++++++++------------ 7 files changed, 120 insertions(+), 65 deletions(-) diff --git a/style/web/_variables.less b/style/web/_variables.less index 34ff1a53a4..94da1f085c 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -141,6 +141,17 @@ @bg-color-component-active: var( --td-bg-color-component-active ); // 色彩 - 组件 - active + +@bg-color-secondarycomponent: var( + --td-bg-color-secondarycomponent +); // 色彩 - 次级组件 +@bg-color-secondarycomponent-hover: var( + --td-bg-color-secondarycomponent-hover +); // 色彩 - 次级组件 - hover +@bg-color-secondarycomponent-active: var( + --td-bg-color-secondarycomponent-active +); // 色彩 - 次级组件 - active + @bg-color-component-disabled: var( --td-bg-color-component-disabled ); // 色彩 - 组件 - disabled diff --git a/style/web/components/slider/_index.less b/style/web/components/slider/_index.less index 7566bd9e83..b476d4cdb5 100644 --- a/style/web/components/slider/_index.less +++ b/style/web/components/slider/_index.less @@ -51,7 +51,7 @@ width: 100%; height: @slider-rail-track-step-size; background-color: @slider-background; - transition: background-color .3s; + transition: @anim-duration-base linear; border-radius: @slider-border-radius; &:hover { diff --git a/style/web/components/slider/_var.less b/style/web/components/slider/_var.less index 1a74d40628..d5b5579d1e 100644 --- a/style/web/components/slider/_var.less +++ b/style/web/components/slider/_var.less @@ -1,10 +1,10 @@ -@slider-background: @bg-color-component; +@slider-background: @bg-color-secondarycomponent; @slider-background-current: @brand-color; @slider-text: @text-color-primary; @slider-control-bar-background: #fff; // 滑块背景色不随默认/暗色模式切换改变，固定为白色，故不使用背景色 token @slider-control-bar-border: @brand-color; -@slider-background-hover: @bg-color-component-hover; +@slider-background-hover: @bg-color-secondarycomponent-hover; @slider-control-bar-background-hover: @gray-color-1; // 滑块背景色不随默认/暗色模式切换改变，hover 后颜色固定为 @gray-color-1 @slider-background-disabled: @bg-color-component-disabled; diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less index 0e118c8372..875d379ccb 100644 --- a/style/web/components/switch/_index.less +++ b/style/web/components/switch/_index.less @@ -26,6 +26,10 @@ cursor: pointer; user-select: none; + &:hover { + background-color: @switch-unchecked-bg-color-hover; + } + &__handle { position: absolute; display: flex; @@ -37,6 +41,7 @@ height: calc(@switch-height-default - 2 * @switch-width-border-default); border-radius: @border-radius-extraLarge; transition: @switch-handle-transition; + box-shadow: @shadow-1; .t-icon { font-size: calc(@switch-height-default - 4px); @@ -96,9 +101,16 @@ &.@{prefix}-is-checked { background-color: @switch-checked-bg-color; + &:hover { + background-color: @switch-checked-bg-color-hover; + } + .@{prefix}-switch__handle { - left: calc(100% - @switch-width-border-default); + left: calc(100% - @switch-width-border-check-default); transform: translate(-100%, 0); + width: calc(@switch-height-default - 2 * @switch-width-border-check-default); + height: calc(@switch-height-default - 2 * @switch-width-border-check-default); + top: @switch-width-border-check-default; } .@{prefix}-switch__content { @@ -138,10 +150,16 @@ cursor: not-allowed; background-color: @switch-unchecked-bg-color-disabled; + .@{prefix}-switch__handle { + box-shadow: none; + } + &.@{prefix}-is-checked { background-color: @switch-checked-bg-color-disabled; .@{prefix}-switch__handle { + box-shadow: none; + .t-icon { color: @switch-checked-bg-color-disabled; } @@ -196,7 +214,10 @@ &.@{prefix}-is-checked { .@{prefix}-switch__handle { - left: calc(100% - @switch-width-border-l); + left: calc(100% - @switch-width-border-check-l); + top: @switch-width-border-check-l; + width: calc(@switch-height-l - 2 * @switch-width-border-check-l); + height: calc(@switch-height-l - 2 * @switch-width-border-check-l); } .@{prefix}-switch__content { @@ -251,7 +272,10 @@ &.@{prefix}-is-checked { .@{prefix}-switch__handle { - left: calc(100% - @switch-width-border-s); + left: calc(100% - @switch-width-border-check-s); + top: @switch-width-border-check-s; + width: calc(@switch-height-s - 2 * @switch-width-border-check-s); + height: calc(@switch-height-s - 2 * @switch-width-border-check-s); } .@{prefix}-switch__content { diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less index 7056164acb..bc80c36858 100644 --- a/style/web/components/switch/_var.less +++ b/style/web/components/switch/_var.less @@ -13,14 +13,16 @@ // 颜色 @switch-checked-bg-color: @brand-color; +@switch-checked-bg-color-hover: @brand-color-hover; @switch-checked-bg-color-loading: @brand-color-focus; @switch-checked-bg-color-disabled: @brand-color-disabled; -@switch-unchecked-bg-color: @gray-color-5; -@switch-unchecked-bg-color-loading: @bg-color-page; +@switch-unchecked-bg-color: @bg-color-secondarycomponent; +@switch-unchecked-bg-color-hover: @bg-color-secondarycomponent-hover; +@switch-unchecked-bg-color-loading: @bg-color-component-disabled; @switch-unchecked-bg-color-disabled: @bg-color-component-disabled; -@switch-handle-bg-color: @text-color-anti; +@switch-handle-bg-color: #fff; @switch-content-color-checked: @text-color-anti; @switch-content-color-unchecked: @text-color-anti; @@ -29,13 +31,25 @@ @switch-height-default: @comp-size-xxs; @switch-height-s: @comp-size-xxxs; -@switch-min-width-l: 44px; -@switch-min-width-default: 36px; -@switch-min-width-s: 28px; +@switch-min-width-l: calc(@switch-height-l / .618); +@switch-min-width-default: calc(@switch-height-default / .618); +@switch-min-width-s: calc(@switch-height-s / .618); -@switch-width-border-l: 2px; -@switch-width-border-default: 2px; -@switch-width-border-s: 2px; +//change uncheck handle size +@switch-width-border-base: 5px; +@switch-width-border-value: 1px; //公差值 + +@switch-width-border-l: @switch-width-border-base; +@switch-width-border-default: (@switch-width-border-base - @switch-width-border-value * 1); +@switch-width-border-s: (@switch-width-border-base - @switch-width-border-value * 2); + +//change check handle size +@switch-width-border-check-base: 3px; +@switch-width-border-check-value: .5px; //公差值 + +@switch-width-border-check-l: @switch-width-border-check-base; +@switch-width-border-check-default: (@switch-width-border-check-base - @switch-width-border-check-value * 1); +@switch-width-border-check-s: (@switch-width-border-check-base - @switch-width-border-check-value * 2); // 字体 @switch-content-font-size-l: @font-size-l; @@ -43,17 +57,17 @@ @switch-content-font-size-s: 9px; // 间距 -@switch-content-margin-left-l: (@switch-min-width-l / 2 + 2px); -@switch-content-margin-right-l: @comp-paddingLR-s; +@switch-content-margin-left-l: calc(@switch-min-width-l / 2 + 4px); +@switch-content-margin-right-l: @comp-margin-s; -@switch-content-margin-left-default: (@switch-min-width-default / 2 + 2px); -@switch-content-margin-right-default: 6px; +@switch-content-margin-left-default: calc(@switch-min-width-default / 2 + 2px); +@switch-content-margin-right-default: @comp-margin-xs; -@switch-content-margin-left-s: (@switch-min-width-s / 2 + 2px); -@switch-content-margin-right-s: 5px; +@switch-content-margin-left-s: calc(@switch-min-width-s / 2 + 2px); +@switch-content-margin-right-s: @comp-margin-xxs; // 动画 -@switch-transition: all @anim-duration-base @anim-time-fn-ease-out; +@switch-transition: all @anim-duration-base @anim-time-fn-easing; @switch-handle-transition: all @anim-duration-base @anim-time-fn-easing; @switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, opacity @anim-duration-base linear; diff --git a/style/web/theme/_dark.less b/style/web/theme/_dark.less index 0e6efa013b..1ff642630d 100644 --- a/style/web/theme/_dark.less +++ b/style/web/theme/_dark.less @@ -114,6 +114,9 @@ --td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件 --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active + --td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件 + --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); // 色彩 - 次级组件 - hover + --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 diff --git a/style/web/theme/_light.less b/style/web/theme/_light.less index 3b47f5d41f..3ac6a14b81 100644 --- a/style/web/theme/_light.less +++ b/style/web/theme/_light.less @@ -1,45 +1,45 @@ :root, :root[theme-mode="light"] { - --td-brand-color-1: #ecf2fe; - --td-brand-color-2: #d4e3fc; - --td-brand-color-3: #bbd3fb; - --td-brand-color-4: #96bbf8; - --td-brand-color-5: #699ef5; - --td-brand-color-6: #4787f0; - --td-brand-color-7: #266fe8; - --td-brand-color-8: #0052d9; - --td-brand-color-9: #0034b5; - --td-brand-color-10: #001f97; - --td-warning-color-1: #fef3e6; - --td-warning-color-2: #f9e0c7; - --td-warning-color-3: #f7c797; - --td-warning-color-4: #f2995f; - --td-warning-color-5: #ed7b2f; - --td-warning-color-6: #d35a21; - --td-warning-color-7: #ba431b; - --td-warning-color-8: #9e3610; - --td-warning-color-9: #842b0b; - --td-warning-color-10: #5a1907; - --td-error-color-1: #fdecee; - --td-error-color-2: #f9d7d9; - --td-error-color-3: #f8b9be; - --td-error-color-4: #f78d94; - --td-error-color-5: #f36d78; - --td-error-color-6: #e34d59; - --td-error-color-7: #c9353f; - --td-error-color-8: #b11f26; - --td-error-color-9: #951114; - --td-error-color-10: #680506; - --td-success-color-1: #e8f8f2; - --td-success-color-2: #bcebdc; - --td-success-color-3: #85dbbe; - --td-success-color-4: #48c79c; - --td-success-color-5: #00a870; - --td-success-color-6: #078d5c; - --td-success-color-7: #067945; - --td-success-color-8: #056334; - --td-success-color-9: #044f2a; - --td-success-color-10: #033017; + --td-brand-color-1: #f2f3ff; + --td-brand-color-2: #d9e1ff; + --td-brand-color-3: #b5c7ff; + --td-brand-color-4: #8eabff; + --td-brand-color-5: #618dff; + --td-brand-color-6: #366ef4; + --td-brand-color-7: #0052d9; + --td-brand-color-8: #003cab; + --td-brand-color-9: #002a7c; + --td-brand-color-10: #001a57; + --td-warning-color-1: #fff1e9; + --td-warning-color-2: #ffd9c2; + --td-warning-color-3: #ffb98c; + --td-warning-color-4: #fa9550; + --td-warning-color-5: #e37318; + --td-warning-color-6: #be5a00; + --td-warning-color-7: #954500; + --td-warning-color-8: #713300; + --td-warning-color-9: #532300; + --td-warning-color-10: #3b1700; + --td-error-color-1: #fff0ed; + --td-error-color-2: #ffd8d2; + --td-error-color-3: #ffb9b0; + --td-error-color-4: #ff9285; + --td-error-color-5: #f6685d; + --td-error-color-6: #d54941; + --td-error-color-7: #ad352f; + --td-error-color-8: #881f1c; + --td-error-color-9: #68070a; + --td-error-color-10: #490002; + --td-success-color-1: #e3f9e9; + --td-success-color-2: #c6f3d7; + --td-success-color-3: #92dab2; + --td-success-color-4: #56c08d; + --td-success-color-5: #2ba471; + --td-success-color-6: #008858; + --td-success-color-7: #006c45; + --td-success-color-8: #005334; + --td-success-color-9: #003b23; + --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e7e7e7; @@ -66,15 +66,15 @@ --td-font-gray-4: rgba(0, 0, 0, 26%); // 基础颜色 - --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作 + --td-brand-color: var(--td-brand-color-7); // 色彩-品牌-可操作 --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告 --td-error-color: var(--td-error-color-6); // 色彩-功能-失败 --td-success-color: var(--td-success-color-5); // 色彩-功能-成功 // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 - --td-brand-color-hover: var(--td-brand-color-7); // hover态 + --td-brand-color-hover: var(--td-brand-color-6); // hover态 --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘 - --td-brand-color-active: var(--td-brand-color-9); // 点击态 + --td-brand-color-active: var(--td-brand-color-8); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 @@ -115,6 +115,9 @@ --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件 --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active + --td-bg-color-secondarycomponent: var(--td-gray-color-4); // 色彩 - 次级组件 + --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); // 色彩 - 次级组件 - hover + --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); // 色彩 - 次级组件 - active --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 From b7b8c1942e127fd1a582ad384f43f94645839fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= Date: Wed, 23 Nov 2022 15:59:45 +0800 Subject: [PATCH 067/312] =?UTF-8?q?fix(head-menu):=20=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=8A=98=E5=8F=A0=20(#1016)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/menu/_index-v2.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index d07aaac58b..30b5ebf050 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -48,11 +48,15 @@ a.@{prefix}-menu__item { margin-right: @comp-margin-xxxl; } - .@{prefix}-menu { + .@{prefix}-menu__container { flex: 1; display: flex; align-items: center; - // overflow: auto hidden; + overflow: hidden; + } + + .@{prefix}-menu { + display: flex; } .@{prefix}-menu__operations { From 13145ed1c08f5985830c699055d635048dd9f413 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 23 Nov 2022 16:13:08 +0800 Subject: [PATCH 068/312] chore: remove dropdown item height (#1031) --- style/web/components/dropdown/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less index d6153bf46f..329bbf5b96 100644 --- a/style/web/components/dropdown/_index.less +++ b/style/web/components/dropdown/_index.less @@ -114,7 +114,6 @@ white-space: nowrap; display: flex; align-items: center; - height: @dropdown-item-height; padding: @dropdown-item-padding; &-icon { From 59e96504a646c91a2798996500e01adcdea625c0 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 23 Nov 2022 16:14:06 +0800 Subject: [PATCH 069/312] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96tooltip?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#1030)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 优化tooltip样式 * fix: 优化tooltip样式 --- style/web/components/tooltip/_index.less | 32 ++++++++++++------------ 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less index 4a9ba5fa3e..88433d2936 100644 --- a/style/web/components/tooltip/_index.less +++ b/style/web/components/tooltip/_index.less @@ -25,6 +25,22 @@ background: @tooltip-bg; box-shadow: inset 0 .5px 0 #5e5e5e, inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; } + + &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before { + box-shadow: inset -.5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; + } + + &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before { + box-shadow: inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e; + } + + &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before { + box-shadow: inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; + } + + &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before { + box-shadow: inset .5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; + } } &--primary { @@ -71,22 +87,6 @@ box-shadow: none; } } - - &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before { - box-shadow: inset -.5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; - } - - &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before { - box-shadow: inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e; - } - - &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before { - box-shadow: inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; - } - - &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before { - box-shadow: inset .5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; - } } .@{prefix}-popup[data-popper-placement^="top"].@{prefix}-tooltip .@{prefix}-popup__arrow { From 1cae3faba46688fc13fafa45fc07668a27a96161 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 23 Nov 2022 16:45:17 +0800 Subject: [PATCH 070/312] chore: fix dropdown style (#1032) --- style/web/components/dropdown/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/dropdown/_var.less b/style/web/components/dropdown/_var.less index da4e245106..01686d8468 100644 --- a/style/web/components/dropdown/_var.less +++ b/style/web/components/dropdown/_var.less @@ -24,7 +24,7 @@ @dropdown-item-height: @comp-size-s; // padding -@dropdown-item-padding: 0 @comp-paddingLR-s; +@dropdown-item-padding: calc(@comp-paddingTB-xs - 1px) @comp-paddingLR-s; @dropdown-item-divider-horizon-margin: @comp-margin-s; @dropdown-item-divider-margin: @comp-margin-xs @dropdown-item-divider-horizon-margin @comp-margin-xxs @dropdown-item-divider-horizon-margin; @dropdown-menu-padding: @pop-padding-m; From b9dfa0d1e3db932e5de7942330ddcc87b0c54dae Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 23 Nov 2022 20:20:05 +0800 Subject: [PATCH 071/312] feat: update timeline size token (#1033) --- style/web/components/timeline/_index.less | 63 +++++++++++++---------- style/web/components/timeline/_var.less | 25 ++++++--- 2 files changed, 55 insertions(+), 33 deletions(-) diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less index 5f17acd3b7..1e7c5b7957 100644 --- a/style/web/components/timeline/_index.less +++ b/style/web/components/timeline/_index.less @@ -11,7 +11,7 @@ flex-direction: column; &-item { - min-height: 68px; + min-height: 72px; display: flex; flex-direction: row; position: relative; @@ -21,17 +21,17 @@ } &__wrapper { - width: 8px; + width: @timeline-wrapper-width-size; position: relative; .@{prefix}-timeline-item { &__dot { position: absolute; - width: 4px; - height: 4px; + width: @timeline-wrapper-item-dot-size; + height: @timeline-wrapper-item-dot-size; border: 2px solid transparent; border-radius: 50%; - top: 8px; + top: @timeline-wrapper-top; &--primary { border-color: @timeline-primary-color; @@ -72,10 +72,10 @@ position: absolute; border-left: 2px solid transparent; left: 50%; - height: calc(100% - 32px); + height: @timeline-wrapper-tail-height; bottom: 0; transform: translateX(-50%); - padding-bottom: 8px; + padding-bottom: @timeline-wrapper-tail-padding-bottom; border-color: @timeline-default-color; box-sizing: border-box; @@ -96,7 +96,7 @@ &__content { flex: 1; - padding-left: 16px; + padding-left: @timeline-content-padding-left; font-size: @timeline-content-font; } @@ -144,7 +144,7 @@ &__content { text-align: right; padding-left: 0; - padding-right: 16px; + padding-right: @timeline-content-padding-right; } } } @@ -152,15 +152,15 @@ &-alternate { .@{prefix}-timeline-item { &-left { - margin-left: calc(50% - 4px); + margin-left: @timeline-item-alternate-margin; } &-right { text-align: right; flex-direction: row-reverse; - margin-right: calc(50% - 4px); + margin-right: @timeline-item-alternate-margin; .@{prefix}-timeline-item__content { - padding-right: 16px; + padding-right: @timeline-content-padding-right; padding-left: 0; } } @@ -181,7 +181,7 @@ left: 0; transform: translateX(-100%); text-align: right; - padding-right: 16px; + padding-right: @timeline-content-padding-right; } } } @@ -194,7 +194,7 @@ right: 0; transform: translateX(100%); text-align: left; - padding-left: 16px; + padding-left: @timeline-content-padding-left; } } } @@ -210,18 +210,21 @@ .@{prefix}-timeline { &-item { flex-direction: column; - padding-right: 8px; - min-width: 150px; + padding-right: @timeline-horizontal-item-padding; + min-width: 160px; &__wrapper { width: 100%; - height: 8px; + height: @timeline-horizontal-wrapper-height-size; .@{prefix}-timeline-item { &__dot { position: absolute; top: 50%; transform: translateY(-50%); left: unset; + width: @timeline-horizontal-wrapper-item-dot-size; + height: @timeline-horizontal-wrapper-item-dot-size; + border-radius: 50%; &--custom { position: relative; @@ -238,10 +241,10 @@ } &__tail { - left: 16px; + left: @timeline-horizontal-wrapper-left; top: 50%; transform: translateY(-50%); - width: calc(100% - 16px); + width: @timeline-horizontal-wrapper-tail-width-size; border: 0; border-top: 2px solid transparent; padding-bottom: 0; @@ -259,13 +262,19 @@ &__content { padding-left: unset; - padding-top: 16px; + padding-top: @timeline-horizontal-content-padding; flex: unset; } } } } + &-vertical { + .@{prefix}-timeline-item__content { + padding-bottom: @timeline-content-padding-bottom; + } + } + &-label&-horizontal&-top { .@{prefix}-timeline-item { &__label { @@ -273,7 +282,7 @@ top: 0; width: 100%; transform: translateY(-100%); - padding-bottom: 16px; + padding-bottom: 0; } } } @@ -289,7 +298,7 @@ &__label { &--alternate { - padding-top: 16px; + padding-top: @timeline-horizontal-content-padding; bottom: 0; width: 100%; transform: translateY(100%); @@ -298,7 +307,7 @@ &__content { padding-top: 0; - padding-bottom: 16px; + padding-bottom: @timeline-horizontal-content-padding; } } } @@ -312,7 +321,7 @@ top: 0; width: 100%; transform: translateY(-100%); - padding-bottom: 16px; + padding-bottom: @timeline-horizontal-content-padding; } } } @@ -321,11 +330,11 @@ &-bottom { flex-direction: column-reverse; position: relative; - transform: translateY(calc(-100% + 8px)); + transform: translateY(calc(-100% + @timeline-horizontal-wrapper-height-size)); .@{prefix}-timeline-item { &__content { - padding-bottom: 16px; + padding-bottom: @timeline-horizontal-content-padding; padding-top: unset; } @@ -333,7 +342,7 @@ &--alternate { bottom: 0; transform: translateY(100%); - padding-top: 16px; + padding-top: @timeline-horizontal-content-padding; } } } diff --git a/style/web/components/timeline/_var.less b/style/web/components/timeline/_var.less index b72083e8c1..53fd915636 100644 --- a/style/web/components/timeline/_var.less +++ b/style/web/components/timeline/_var.less @@ -1,15 +1,28 @@ @timeline-primary-color: @brand-color; -@timeline-default-color: @gray-color-4; +@timeline-default-color: @component-border; @timeline-warning-color: @warning-color; @timeline-error-color: @error-color; @timeline-success-color: @success-color; -@timeline-space-line: 8px; -@timeline-border-width: 2px; - -@timeline-line-height: 1.7143; - @timeline-content-font: @font-size-l; @timeline-label-font: @font-size-base; @timeline-label-font-color: @text-color-secondary; + +// margin & padding +@timeline-content-padding-left: @comp-margin-l; +@timeline-content-padding-right: @comp-margin-l; +@timeline-content-padding-bottom: @comp-margin-l; +@timeline-wrapper-width-size: 8px; //not suggested modified +@timeline-wrapper-top: 8px; +@timeline-wrapper-item-dot-size: (@timeline-wrapper-width-size - 4px); +@timeline-wrapper-tail-padding-bottom: @comp-size-s; +@timeline-wrapper-tail-height: calc(100% - (@timeline-wrapper-width-size * 2 + @timeline-wrapper-top)); +@timeline-item-alternate-margin: calc(50% - (@timeline-wrapper-width-size / 2)); + +@timeline-horizontal-wrapper-height-size: 8px; //not suggested modified +@timeline-horizontal-item-padding: @timeline-horizontal-wrapper-height-size; +@timeline-horizontal-wrapper-left: calc(@timeline-horizontal-wrapper-height-size + @comp-margin-s); +@timeline-horizontal-wrapper-tail-width-size: calc(100% - @timeline-horizontal-wrapper-left); +@timeline-horizontal-wrapper-item-dot-size: (@timeline-horizontal-wrapper-height-size - 4px); +@timeline-horizontal-content-padding: @comp-margin-l; From 410a55353e8254e9654f80568f030ea79655d553 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 23 Nov 2022 20:39:05 +0800 Subject: [PATCH 072/312] chore: add theme-desc (#1034) --- theme.md | 42 ++++++++++++------------------------------ 1 file changed, 12 insertions(+), 30 deletions(-) diff --git a/theme.md b/theme.md index fc511d753a..b16d9f051c 100644 --- a/theme.md +++ b/theme.md @@ -3,58 +3,40 @@ title: 主题配置 spline: explain --- -### 使用 CSS 变量 +### 使用 CSS Variables 进行主题配置 -组件库通用的 Design Token 均使用 css variables 声明，你可以在自己的项目中声明同名变量来覆盖他们的值： +TDesign 通用的 Design Token 均使用 CSS Variables 声明，我们推荐使用替换 CSS Variables 的方式来进行个性化的主题配置。 -```css +TDesign 提供五大类 Design Token，包括`颜色`、`字体`、`圆角`、`阴影`及`尺寸`，你可以在自己的项目中声明同名 CSS Variables来覆盖他们的值，如： + +```CSS --td-brand-color: orange; --td-warning-color: yellow; --td-error-color: red; --td-success-color: green; ``` -完整的 token 列表见 [\_light.less](https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less)。 +完整的 Token 列表见 [TDesign Design Token](https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme)。 #### 使用主题生成器配置 CSS 变量 -因为涉及到的 token 数量很多，我们提供了更直观的基于 CSS Token 实现的`主题配置生成器`，来帮助您快速定制您需要的主题。您可以通过点击官网右下角的按钮打开我们的主题配置生成器。 +因为涉及到的 Token 数量很多，**我们提供了更直观的基于 CSS Token 实现的`主题配置生成器`，来帮助您快速定制您需要的主题。您可以通过`点击官网右下角的按钮`打开我们的主题配置生成器**。 -通过主题配置生成器配置出您满意的 token 之后，请点击`导出主题配置`，我们会导出一份全新的 CSS 文件到您本地，您只需要将文件放置进您的项目文件目录中，并在项目中 import 该 CSS 文件，即可得到一个全新主题样式的 TDesign 。 +通过主题配置生成器配置出您满意的 Token 之后，请点击`导出主题配置`，我们会导出一份全新的 CSS 文件到您本地，您只需要将文件放置进您的项目文件目录中，并在项目中 import 该 CSS 文件，即可得到一个全新主题样式的 TDesign 。 -### 使用 less 变量 +### 使用 less 变量 针对组件进行精细化定制 如果你的项目也使用 less 技术栈，且对组件有更精细的定制需求，我们也抽离了大部分组件实现过程中用到的变量，以 less 变量的方式提供出来， -```less +```CSS // 以 Button 为例 -// 尺寸 + @btn-height-s: 24px; @btn-height-default: 32px; @btn-height-l: 40px; -// 圆角 @btn-border-radius: @border-radius-default; -@btn-shape-border-radius-s: (@btn-height-s / 2); -@btn-shape-border-radius-default: (@btn-height-default / 2); -@btn-shape-border-radius-l: (@btn-height-l / 2); - -// 阴影 - -//字号 -@btn-font-s: @font-size-s; -@btn-font-default: @font-size-base; -@btn-font-l: @font-size-l; - -// 图标大小 -@btn-icon-size-s: @font-size-base; -@btn-icon-size-default: @font-size-l; -@btn-icon-size-l: @font-size-xl; - -// padding -@btn-padding-horizontal-s: @spacer; -@btn-padding-horizontal-default: (@spacer * 2); -@btn-padding-horizontal-l: (@spacer * 3); + ``` 要修改这些 less 变量，需要改为从 npm ESM 产物中引入组件库： From 4bf54860a0d7e17597526e77b880d70fa8ab6ae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= Date: Thu, 24 Nov 2022 19:11:18 +0800 Subject: [PATCH 073/312] feat: set firefox scrollbar track color (#1035) --- style/web/mixins/_scrollbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/mixins/_scrollbar.less b/style/web/mixins/_scrollbar.less index b15ea14b40..c415f4b524 100644 --- a/style/web/mixins/_scrollbar.less +++ b/style/web/mixins/_scrollbar.less @@ -2,7 +2,7 @@ .scrollbar(@size: 6px, @borderSize: 0px) { // Firefox 等浏览器标准支持的滚动条样式设置 - scrollbar-color: @scrollbar-color; + scrollbar-color: @scrollbar-color transparent; scrollbar-width: thin; // Safari/Chrome 中滚动条样式设置 &::-webkit-scrollbar { From 4f4a73713c91ec83266d993ef30351aa1ef06121 Mon Sep 17 00:00:00 2001 From: TabSpace Date: Fri, 25 Nov 2022 10:19:16 +0800 Subject: [PATCH 074/312] =?UTF-8?q?[refactor]=20tree=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=8C=E9=A1=BA=E5=B8=A6=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E8=A1=A8=E7=8E=B0=20(#959)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(tree): label 禁止折行 * fix(tree): 完善 tree 样式细节与示例 * fix(tree): 完善 tree 组件连线样式，解决叶节点连线过短问题 * refactor(tree): tree 组件，移除无用样式，完善样式顺序格式 * fix(tree): tree 组件，连线对齐图标 * refactor(tree): tree 组件，样式变量名称改进，统一规范 * docs(tree): tree 组件样式示例，可选中示例添加长文案示例 * fix(tree): 增大图标点击区域 * docs(tree): tree 样式示例改进，自定义图标位置修正 * feat(tree): tree 组件添加嵌套布局样式 * fix(tree): tree 组件，为节点不限制高度提供可能性 * fix(tree): tree 组件添加子节点动画 * fix: tree 组件完善嵌套布局时使用的动画 * fix(tree): 动画涉及的属性，仅在动画启用时生效 * chore(tree): tree 组件，添加虚拟滚动所需部分样式 * fix: 🐛 tree 组件，解决同一个 siblings 下，前置节点插入时位置错误的问题。 * chore: 🤖 完善项目依赖 * refactor: 💡 添加事件派发器，以简化事件传播方式 * fix: 🐛 tree tree 组件, insertAfter, insertBefore 方法，完善传入参数类型 * fix: 🐛 tree 组件动画优化 * fix: 🐛 tree 组件修正图标背景偏移的问题 * chore: 🤖 type的版本先固定 不然过不了CI的ts检测 * fix: 🐛 tree 组件添加 value 重复错误提示 * fix: 🐛 tree 组件，解决拖动样式与重构后的高度样式冲突的问题 * fix: 🐛 tree 组件，完善折行标签示例，移除嵌套模式相关样式 * fix: 🐛 tree 组件修正图标背景尺寸与位置 * fix: 🐛 tree 组件完善图标样式 * fix: 🐛 tree 组件完善动画样式 --- .eslintrc.js | 2 +- js/tree/tree-node.ts | 8 +- js/tree/tree-store.ts | 14 +- package.json | 3 +- style/web/components/tree-select/_index.less | 8 + style/web/components/tree/_index.less | 126 ++++++--------- style/web/components/tree/_var.less | 3 +- style/web/components/tree/index.html | 143 ++++++------------ .../input-number/compareLargeNumber.test.js | 1 - 9 files changed, 125 insertions(+), 183 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3275161601..b70b758921 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,7 +6,7 @@ module.exports = { mocha: true, jest: true, }, - extends: ['eslint-config-airbnb-base'], + extends: ['airbnb-base'], parser: '@typescript-eslint/parser', plugins: [ '@typescript-eslint', diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index 012525ff70..c3878827f0 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -15,6 +15,7 @@ import { createNodeModel, updateNodeModel, } from './tree-node-model'; +import log from '../log'; const { hasOwnProperty } = Object.prototype; @@ -141,7 +142,12 @@ export class TreeNode { this.set(spec); this.label = spec[propLabel] || ''; this.value = isNil(spec[propValue]) ? uniqueId(prefix) : spec[propValue]; - this.tree.nodeMap.set(this.value, this); + + const { nodeMap } = tree; + if (nodeMap.get(this.value)) { + log.warn('Tree', `Dulplicate value: ${this.value}`); + } + nodeMap.set(this.value, this); if (parent && parent instanceof TreeNode) { this.parent = parent; diff --git a/js/tree/tree-store.ts b/js/tree/tree-store.ts index 30c950b426..aae4e76b86 100644 --- a/js/tree/tree-store.ts +++ b/js/tree/tree-store.ts @@ -1,6 +1,8 @@ import difference from 'lodash/difference'; import camelCase from 'lodash/camelCase'; import isPlainObject from 'lodash/isPlainObject'; +import mitt from 'mitt'; + import { TreeNode } from './tree-node'; import { TreeNodeValue, @@ -8,6 +10,7 @@ import { TypeTimer, TypeTargetNode, TypeTreeNodeData, + TypeTreeItem, TypeTreeStoreOptions, TypeTreeFilter, TypeTreeFilterOptions, @@ -59,6 +62,9 @@ export class TreeStore { // 一个空节点 model public nullNodeModel: TypeTreeNodeModel; + // 事件派发器 + public emitter: ReturnType; + public constructor(options: TypeTreeStoreOptions) { const config: TypeTreeStoreOptions = { prefix: 't', @@ -97,6 +103,7 @@ export class TreeStore { this.updateTimer = null; // 在子节点增删改查时，将此属性设置为 true，来触发视图更新 this.shouldReflow = false; + this.emitter = mitt(); this.initNullNodeModel(); } @@ -315,7 +322,7 @@ export class TreeStore { } // 在目标节点之前插入节点 - public insertBefore(value: TypeTargetNode, item: TypeTreeNodeData): void { + public insertBefore(value: TypeTargetNode, item: TypeTreeItem): void { const node = this.getNode(value); if (node) { node.insertBefore(item); @@ -323,7 +330,7 @@ export class TreeStore { } // 在目标节点之后插入节点 - public insertAfter(value: TypeTargetNode, item: TypeTreeNodeData): void { + public insertAfter(value: TypeTargetNode, item: TypeTreeItem): void { const node = this.getNode(value); if (node) { node.insertAfter(item); @@ -633,12 +640,13 @@ export class TreeStore { // 触发绑定的事件 public emit(name: string, state?: TypeTreeEventState): void { - const config = this.config || {}; + const { config, emitter } = this; const methodName = camelCase(`on-${name}`); const method = config[methodName]; if (typeof method === 'function') { method(state); } + emitter.emit(name, state); } // 锁定过滤节点的路径节点 diff --git a/package.json b/package.json index cf8056b2bc..7e9c3dc733 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ }, "dependencies": { "lodash": "^4.17.15", + "mitt": "^3.0.0", "tinycolor2": "^1.4.2" }, "lint-staged": { @@ -90,7 +91,7 @@ "stylelint" ], "**/*.{js,ts}": [ - "eslint --max-warnings 0" + "eslint --max-warnings 0 --no-ignore" ] } } diff --git a/style/web/components/tree-select/_index.less b/style/web/components/tree-select/_index.less index 93772ab9cd..1656400c58 100644 --- a/style/web/components/tree-select/_index.less +++ b/style/web/components/tree-select/_index.less @@ -30,6 +30,14 @@ &--placeholder { color: @text-color-placeholder; } + + &.@{prefix}-single-suffix { + padding-right: 20px; + } + + &.@{prefix}-tag-prefix { + padding-left: 4px; + } } // 浮层样式 diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index e1b4c6bbe4..06e627f3cf 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -43,24 +43,22 @@ display: block; } - &__children { - // 用于多行 label 计算高度 - --hscale: 1; - - will-change: opacity, max-height; - } - &__item { // 用于树结构缩进计算 --level: 0; + // 用于多行 label 计算高度 - --hscale: 1; + // 如果使用了多行 label 或者 label 内容高于 34px + // 业务方可以增大这个值来让高度动画完全伸展 + // 值预期为 Math.max(实际最大高度 / 34, 1) + --hscale: 2; will-change: opacity, max-height; position: relative; display: flex; flex-wrap: nowrap; - padding: @tree-node-item-padding; + align-items: center; + padding: 0 0 0 @tree-node-item-padding-left; cursor: default; transform: translateZ(0); // 开启硬件加速 backface-visibility: hidden; // 防止Chrome、Safari中，使用 transforms/animations，可能造成的页面闪烁 @@ -109,9 +107,14 @@ &--draggable { cursor: pointer; - &::before { + &:hover { + background-color: @tree-node-bg-hover-color; + background-clip: content-box; + } + + &::after { position: absolute; - top: -@tree-node-drag-tip-height; + top: -(@tree-node-drag-tip-height / 2); right: 0; left: 0; display: block; @@ -121,21 +124,16 @@ padding: inherit; background-clip: content-box; } - - &:hover { - background-color: @tree-node-bg-hover-color; - background-clip: content-box; - } } &--tip { - &-top::before { + &-top::after { background-color: @tree-node-drag-tip-bg; } - &-bottom::before { + &-bottom::after { top: unset; - bottom: -@tree-node-drag-tip-height; + bottom: -(@tree-node-drag-tip-height / 2); background-color: @tree-node-drag-tip-bg; } @@ -146,6 +144,16 @@ } } + // 用于撑开节点高度 + // 比起使用 padding , 更有利于动画展现 + &__item::before { + content: ""; + display: block; + width: 0; + flex: 0 0 auto; + height: @tree-node-item-height; + } + &--block-node &__label { flex: 1; } @@ -205,24 +213,28 @@ } // svg 动画与 icon 背景进行隔离 + // :after 仅用于增大点击范围 &__icon::after { content: ""; display: block; position: absolute; - left: calc((@tree-node-icon-size - @tree-node-icon-svg-size) / 2); - width: @tree-node-icon-svg-size; - height: @tree-node-icon-svg-size; + left: -2px; + top: -2px; + width: calc(@tree-node-icon-size + 4px); + height: calc(@tree-node-icon-size + 4px); border-radius: @border-radius-default; transition: @anim-duration-base linear; } // 仅在有图标时呈现背景 - &__icon:not(:empty):hover::after { + // 注意这里背景样式不要加给 ::after + // ::after 仅用于增大点击范围 + &__icon:not(:empty):hover { background-color: @tree-node-bg-hover-color; transition: @anim-duration-base linear; } - // 没有图标是不呈现指针 + // 没有图标时不呈现指针 &__icon:empty { cursor: initial; } @@ -290,33 +302,31 @@ &__item--hidden { display: none; } - - &__children--hidden { - display: none; - } } +// 节点收缩隐藏动画 .@{prefix}-tree--transition { + // 节点展示动画 .@{prefix}-tree__item--visible { + display: flex; + max-height: @tree-node-item-origin-height; opacity: 1; + transition: opacity @tree-node-transition-time linear + @tree-node-transition-time, + max-height @tree-node-transition-time linear 0s; } + // 节点隐藏动画 .@{prefix}-tree__item--hidden { display: flex; - opacity: 0; max-height: 0; - overflow: hidden; - } - - .@{prefix}-tree__children--visible { - opacity: 1; - } - - .@{prefix}-tree__children--hidden { - display: block; opacity: 0; - max-height: 0; overflow: hidden; + pointer-events: none; + user-select: none; + animation: none; + transition: opacity @tree-node-transition-time linear 0s, + max-height @tree-node-transition-time linear @tree-node-transition-time; } // 节点插入动画 @@ -328,34 +338,6 @@ .@{prefix}-tree__item--leave-active { animation: t-tree-toggle @tree-node-animation-time reverse linear forwards; } - - // 节点展示动画 - .@{prefix}-tree__item--visible { - transition: opacity @tree-node-transition-time linear - @tree-node-transition-time, - max-height @tree-node-transition-time linear 0s; - } - - // 节点隐藏动画 - .@{prefix}-tree__item--hidden { - animation: none; - transition: opacity @tree-node-transition-time linear 0s, - max-height @tree-node-transition-time linear @tree-node-transition-time; - } - - // 子节点展示动画 - .@{prefix}-tree__children--visible { - transition: opacity @tree-node-transition-time linear - @tree-node-transition-time, - max-height @tree-node-transition-time linear 0s; - } - - // 子节点隐藏动画 - .@{prefix}-tree__children--hidden { - animation: none; - transition: opacity @tree-node-transition-time linear 0s, - max-height @tree-node-transition-time linear @tree-node-transition-time; - } } @keyframes t-tree-toggle { @@ -374,13 +356,3 @@ max-height: @tree-node-item-origin-height; } } - -.@{prefix}-tree-select { - &.@{prefix}-single-suffix { - padding-right: 20px; - } - - &.@{prefix}-tag-prefix { - padding-left: 4px; - } -} diff --git a/style/web/components/tree/_var.less b/style/web/components/tree/_var.less index 4724759eb6..1a1fb0dc5f 100644 --- a/style/web/components/tree/_var.less +++ b/style/web/components/tree/_var.less @@ -39,8 +39,7 @@ //尺寸 @tree-line-width: 1px; -@tree-node-item-height: 100%; -@tree-node-icon-svg-size: calc(@tree-font-size + 6px); +@tree-node-item-height: 34px; @tree-line-before-width: @comp-margin-m; @tree-line-leaf-width: @comp-margin-m; @tree-line-first-height: @tree-font-line-height; diff --git a/style/web/components/tree/index.html b/style/web/components/tree/index.html index d61c431e5b..0859ef4499 100644 --- a/style/web/components/tree/index.html +++ b/style/web/components/tree/index.html @@ -71,7 +71,7 @@

默认

- 2.1.2 节点二点一点二 + 2.1.2 节点二点一点二
折行文字
@@ -384,110 +384,59 @@

高亮

- +
-

嵌套布局

+

可拖动

+ +
-
- -
-
- - 1 -
-
- -
-
- - - 1.1 -
-
-
+
+ +
+ + 1 dragging
- -
-
- - 2 -
-
- -
-
- - - 2.1 -
-
- -
-
- - - 2.1.1 -
-
- -
-
- - - 2.1.1.1 -
-
- -
-
- - - 2.1.1.1.1 -
-
- -
-
- - - 2.1.1.1.2 -
-
-
-
- -
-
- - - 2.1.2 -
-
-
-
-
-
- -
-
- - - 2.2 -
-
-
+ +
+ + 2 tip-top
- -
-
- - 4 -
+ +
+ + 2.1 tip-bottom +
+ +
+ + 2.1.1 节点二点一点一 +
+ +
+ + 2.1.1.1 节点二点一点一点一 +
+ +
+ + 2.1.1.2 节点二点一点一点二 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 +
+ +
+ + + + 2.1.2 节点二点一点二 +
+ +
+ + 3 tip-highlight
- +
diff --git a/test/unit/input-number/compareLargeNumber.test.js b/test/unit/input-number/compareLargeNumber.test.js index 6013fbe0e5..684a327846 100644 --- a/test/unit/input-number/compareLargeNumber.test.js +++ b/test/unit/input-number/compareLargeNumber.test.js @@ -93,7 +93,6 @@ describe('compareLargeNumber', () => { it('4241234, 41234534', () => { expect(compareLargeNumber('4241234', '41234534')).toBe(-1); }); - }); describe('isInputNumber', () => { From ec9a9f8ea90f2e5a9250e722510d14152057666d Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Fri, 25 Nov 2022 15:23:00 +0800 Subject: [PATCH 075/312] =?UTF-8?q?feat:=20jumper=20=E6=9B=B4=E5=90=8D?= =?UTF-8?q?=E4=B8=BA=20paginationMini=20=E7=BB=84=E4=BB=B6=20(#1038)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: jumper 更名为 paginationMini 组件 * feat: jumper 更名为 paginationMini 组件 --- docs/web/api/jumper.md | 25 ------------------- docs/web/api/pagination.md | 5 ++++ style/web/components/jumper/_var.less | 14 ----------- style/web/components/pagination/_index.less | 2 ++ .../_index.less => pagination/_mini.less} | 8 +++--- 5 files changed, 11 insertions(+), 43 deletions(-) delete mode 100644 docs/web/api/jumper.md delete mode 100644 style/web/components/jumper/_var.less rename style/web/components/{jumper/_index.less => pagination/_mini.less} (80%) diff --git a/docs/web/api/jumper.md b/docs/web/api/jumper.md deleted file mode 100644 index d84ca2c275..0000000000 --- a/docs/web/api/jumper.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Jumper 跳转 -description: 用于上下翻页，适用于监控视图实例切换等。 -isComponent: true -usage: { title: '', description: '' } -spline: navigation ---- - -### 切换箭头方向 - -使用 `layout='vertical'` 切换成上下箭头模式。 - -{{ layout }} - -### 不同的尺寸 - -默认提供大、中（默认）、小三种不同的尺寸。 - -{{ size }} - -### 配置提示文本 - -通过 `tips` 控制按钮 hover 提示文案。 - -{{ tips }} diff --git a/docs/web/api/pagination.md b/docs/web/api/pagination.md index 080cec10e4..f3ee2d3e22 100644 --- a/docs/web/api/pagination.md +++ b/docs/web/api/pagination.md @@ -47,3 +47,8 @@ spline: navigation 更小尺寸的迷你风格分页控件，适合内嵌在其他组件中分页导航使用。 {{ simple-mini }} + +### PaginationMini 子组件 +最小单元分页控件，适合内嵌在其他空间较小的组件中使用。 + +{{ pagination-mini }} diff --git a/style/web/components/jumper/_var.less b/style/web/components/jumper/_var.less deleted file mode 100644 index abc2dd9e23..0000000000 --- a/style/web/components/jumper/_var.less +++ /dev/null @@ -1,14 +0,0 @@ -// 组件变量 -// 名称可按如下规则定义： -// -[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"; diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index 6211ecf559..fda67b531e 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -8,6 +8,8 @@ @import "../../mixins/_reset.less"; +@import "./_mini.less"; + .@{prefix}-pagination { .reset; diff --git a/style/web/components/jumper/_index.less b/style/web/components/pagination/_mini.less similarity index 80% rename from style/web/components/jumper/_index.less rename to style/web/components/pagination/_mini.less index e6d13b8b04..7a9f9b17b9 100644 --- a/style/web/components/jumper/_index.less +++ b/style/web/components/pagination/_mini.less @@ -6,18 +6,18 @@ @import "../../mixins/_reset.less"; -.@{prefix}-jumper { +.@{prefix}-pagination-mini { .reset; &--outline { - .@{prefix}-jumper__prev { + .@{prefix}-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } - .@{prefix}-jumper__current { + .@{prefix}-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; @@ -27,7 +27,7 @@ } } - .@{prefix}-jumper__next { + .@{prefix}-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; From d43de83268a0162155ca558e5d7bf8e9cba0e15f Mon Sep 17 00:00:00 2001 From: lincao Date: Fri, 25 Nov 2022 20:41:29 +0800 Subject: [PATCH 076/312] feat(tooltip): getpositoin support mouse (#1039) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(watermark): 水印demo描述 * feat(): add tooltiplite style and demo * feat(): add tooltiplite style and demo * feat(): add tooltiplite style and demo * feat(): add tooltiplite style and demo * feat(tooltip): rate style * feat(): 文档描述修改 * feat(): getposition add mouse for tooltip --- js/utils/getPosition.ts | 9 +++++++-- style/mobile/components/calendar/_index.less | 5 +---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/js/utils/getPosition.ts b/js/utils/getPosition.ts index b54839424f..40affa5705 100644 --- a/js/utils/getPosition.ts +++ b/js/utils/getPosition.ts @@ -1,9 +1,10 @@ -type Placement = 'top' | 'bottom' | 'left' | 'right'; +type Placement = 'top' | 'bottom' | 'left' | 'right' | 'mouse'; const getPosition = ( targetEle: HTMLElement, contentEle: HTMLElement, - placement: Partial + placement: Partial, + clientX?: Number, ): { left: number; top: number } => { const targetRect = targetEle.getBoundingClientRect() as DOMRect; const contentRect = contentEle.getBoundingClientRect() as DOMRect; @@ -25,6 +26,10 @@ const getPosition = ( position.left += targetRect.left + dWidth / 2; position.top += targetRect.top + targetRect.height; break; + case 'mouse': + position.left += Number(clientX); + position.top += targetRect.top + targetRect.height + 8; + break; // 后续有需要可以再扩展 } } diff --git a/style/mobile/components/calendar/_index.less b/style/mobile/components/calendar/_index.less index e67c645368..58a1034bba 100644 --- a/style/mobile/components/calendar/_index.less +++ b/style/mobile/components/calendar/_index.less @@ -73,10 +73,6 @@ max-height: 456px; overflow-y: scroll; padding: 0 16px 16px; - - &::-webkit-scrollbar { - display: none; - } } } @@ -85,6 +81,7 @@ display: flex; align-items: center; flex-wrap: wrap; + overflow: scroll; &-item { position: relative; From 480d7981f4407aa3c417e0d3151ebbb6ca18b4b2 Mon Sep 17 00:00:00 2001 From: yuyang Date: Fri, 25 Nov 2022 20:54:34 +0800 Subject: [PATCH 077/312] chore: revert modify for mobile (#1040) --- style/mobile/components/calendar/_index.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/style/mobile/components/calendar/_index.less b/style/mobile/components/calendar/_index.less index 58a1034bba..e67c645368 100644 --- a/style/mobile/components/calendar/_index.less +++ b/style/mobile/components/calendar/_index.less @@ -73,6 +73,10 @@ max-height: 456px; overflow-y: scroll; padding: 0 16px 16px; + + &::-webkit-scrollbar { + display: none; + } } } @@ -81,7 +85,6 @@ display: flex; align-items: center; flex-wrap: wrap; - overflow: scroll; &-item { position: relative; From 0b41428ec5d5c2185deaf44de9905569715a9f06 Mon Sep 17 00:00:00 2001 From: PsTiu <20109955@qq.com> Date: Mon, 28 Nov 2022 11:43:22 +0800 Subject: [PATCH 078/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A5?= =?UTF-8?q?=E5=8E=86=E7=BB=84=E4=BB=B6=E4=B8=AD=E5=8F=B3=E4=B8=8A=E8=A7=92?= =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E6=A0=8F=E4=B8=8B=E6=8B=89=E6=A1=86=E5=9E=82?= =?UTF-8?q?=E7=9B=B4=E5=AF=B9=E9=BD=90=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?= =?UTF-8?q?=20(#1042)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/calendar/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less index c22d7af2a9..ffbafbfab2 100644 --- a/style/web/components/calendar/_index.less +++ b/style/web/components/calendar/_index.less @@ -258,6 +258,7 @@ } .@{prefix}-select { + display: inline; &.@{prefix}-size-l { padding-right: @calendar-control-section-cell-select-padding-left-l; From 8e7b15e0bc15b64769fbeaba50e7c7fc12fe8e13 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 29 Nov 2022 12:06:19 +0800 Subject: [PATCH 079/312] docs(web): table documents (#1041) * docs(web): table * docs(web): table Co-authored-by: sheepluo --- docs/web/api/table.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/web/api/table.md b/docs/web/api/table.md index 5fb5aad893..c1ee3b48db 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -79,7 +79,7 @@ spline: data - 使用 `cell` 作为渲染函数，函数参数为：`{col, colIndex, row, rowIndex}`。 -- 对于有插槽特性的框架，支持插槽，使用 `cell` 的值作为插槽名称；如果 `cell` 值为空，则默认取 `colKey` 作为插槽名称。 +- 对于有插槽特性的框架，支持插槽，使用 `cell` 的值作为插槽名称；如果 `cell` 值为空，则默认取 `colKey` 作为插槽名称。注意插槽名称保持 kebab-case 或 camelCase 命名。 - 【不推荐使用】使用 `render` 渲染函数，函数参数为：`{col, colIndex, row, rowIndex, type}`，其中 `type` 的值为 `cell`。 @@ -91,7 +91,7 @@ spline: data - 使用 `title` 作为渲染函数，函数参数为：`title({ col, colIndex })`。 -- 对于有插槽特性的框架，支持插槽，使用 `title` 的值作为插槽名称。 +- 对于有插槽特性的框架，支持插槽，使用 `title` 的值作为插槽名称。注意插槽名称保持 kebab-case 或 camelCase 命名。 - 【不推荐使用】使用 `render` 作为渲染函数，函数参数为：`render({ col, colIndex, row, rowIndex, type })`，其中 `type` 值为 `title`。使用排序、过滤等功能时不能使用该方法。 @@ -102,7 +102,7 @@ spline: data 表格提供自定义表尾功能，可用于表尾数据统计等场景。使用 `column.foot` 定义每一列的表尾内容。 - 默认输出 `column.foot` 字符串，如果 `foot` 类型为函数，则作为表尾渲染函数自定义表尾内容。 -- 对于有插槽特性的框架，支持插槽，使用 `foot` 值作为插槽名称。 +- 对于有插槽特性的框架，支持插槽，使用 `foot` 值作为插槽名称。注意插槽名称保持 kebab-case 或 camelCase 命名。 - 如果想定义通栏表尾，请使用 `footerSummary` - 如果想自定义表尾合并单元格信息，请使用 `rowspanAndColspanInFooter`，类似表格内容的合并单元格方法 `rowspanAndColspan`。 @@ -195,10 +195,19 @@ spline: data #### 单选 +- `selectedRowKeys` 表示当前选中行的唯一标识数组，支持非受控属性 `defaultSelectedRowKeys` +- `onSelectChange` 会在选中行发生变化时触发 +- 设置 `columns: [{ colKey: 'row-select', type: 'single' }]` 可以将任意列定义为行选中操作列。 + {{ select-single }} #### 多选 +- `selectedRowKeys` 表示当前选中行的唯一标识数组，支持非受控属性 `defaultSelectedRowKeys` +- `onSelectChange` 会在选中行发生变化时触发 +- 设置 `columns: [{ colKey: 'row-select', type: 'multiple' }]` 可以将任意列定义为行选中操作列。 +- 分页场景下的行选中，默认允许跨分页选中，即翻页时，上一页选中结果依然保存。如果希望每一页单独控制选中，互不影响，可设置 `reserveSelectedRowOnPaginate=false` + {{ select-multiple }} ### 可分页的表格 @@ -211,7 +220,8 @@ spline: data #### 本地数据分页 -本地数据分页，表示组件内部会对参数 `data` 进行分页。 +当 `data.length` 长度超过 `pageSize`，单页已无法完整地显示数据，此时会自动开启本地数据分页，组件内部会对 `data` 进行分页。 +如果希望禁用组件内部分页，可以设置 `disableDataPage=true`。 {{ pagination }} From c24db16ea0320fabe25539c9a0eb5f5248a440ad Mon Sep 17 00:00:00 2001 From: Zong-Ke Zhang <65376724+Zzongke@users.noreply.github.com> Date: Tue, 29 Nov 2022 12:07:22 +0800 Subject: [PATCH 080/312] docs(upload):fix upload docs (#1043) --- 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 8fb3156447..1ec1ffe12a 100644 --- a/docs/web/api/upload.md +++ b/docs/web/api/upload.md @@ -30,7 +30,7 @@ spline: form - `formatRequest` 用于格式化上传接口请求参数，可以新增或修改参数。 - `formatResponse` 用于格式化接口响应值，如果响应值中的 `error` 字段存在，则会判定本次上传失败。 - `sizeLimit` 用于设置文件大小限制，如果超出限制不会触发上传请求。 -- `allowUploadDuplicateFile` 是否允许上产相同文件名的文件。 +- `allowUploadDuplicateFile` 是否允许上传相同文件名的文件。 - `onSelectChange` 会在文件选择之后，上传请求发起之前触发。 - `onSuccess` 会在上传成功后触发。 - `onFail` 会在上传失败后出发。 From b24eba230a0474c1071ae0807f7b83747449888d Mon Sep 17 00:00:00 2001 From: WenKang Date: Tue, 29 Nov 2022 14:10:43 +0800 Subject: [PATCH 081/312] feat: update gray color (#1036) --- style/web/theme/_dark.less | 8 ++++---- style/web/theme/_light.less | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/style/web/theme/_dark.less b/style/web/theme/_dark.less index 1ff642630d..2ba24dd6aa 100644 --- a/style/web/theme/_dark.less +++ b/style/web/theme/_dark.less @@ -41,15 +41,15 @@ --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; - --td-gray-color-3: #e7e7e7; - --td-gray-color-4: #dcdcdc; - --td-gray-color-5: #c5c5c5; + --td-gray-color-3: #e8e8e8; + --td-gray-color-4: #ddd; + --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; - --td-gray-color-11: #383838; + --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; diff --git a/style/web/theme/_light.less b/style/web/theme/_light.less index 3ac6a14b81..9c150f71e9 100644 --- a/style/web/theme/_light.less +++ b/style/web/theme/_light.less @@ -42,15 +42,15 @@ --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; - --td-gray-color-3: #e7e7e7; - --td-gray-color-4: #dcdcdc; - --td-gray-color-5: #c5c5c5; + --td-gray-color-3: #e8e8e8; + --td-gray-color-4: #ddd; + --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; - --td-gray-color-11: #383838; + --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; From b232fff7672b590490eb61b642187139e4e996fa Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 29 Nov 2022 19:05:44 +0800 Subject: [PATCH 082/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20dialog=20?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=20(#1045)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复 dialog 动画 * fix: 修复 dialog 动画 * fix: 修复 dialog 动画 --- style/web/components/dialog/_animate.less | 27 ++++++++++++++++++----- style/web/components/dialog/_var.less | 5 ++--- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/style/web/components/dialog/_animate.less b/style/web/components/dialog/_animate.less index 3e0c4b7c30..bf0b7fce25 100644 --- a/style/web/components/dialog/_animate.less +++ b/style/web/components/dialog/_animate.less @@ -6,16 +6,19 @@ // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常 0% { opacity: 0; - transform: scale(1); + transform: scale(.01); } - 1% { + 100% { opacity: 1; - transform: scale(.01); } } @keyframes tDialogZoomOut { + from { + opacity: 1; + } + to { opacity: 0; transform: scale(.01); @@ -24,11 +27,19 @@ @keyframes tDialogMaskIn { from { + opacity: 0; + } + + to { opacity: 1; } } @keyframes tDialogMaskOut { + from { + opacity: 1; + } + to { opacity: 0; } @@ -37,7 +48,7 @@ .animation-enter { animation-duration: @dialog-anim-duration; animation-fill-mode: both; - animation-timing-function: @dialog-anim-time-fn-enter; + animation-timing-function: @anim-time-fn-ease-out; animation-play-state: paused; } @@ -84,6 +95,8 @@ .@{prefix}-dialog__mask { animation-name: tDialogMaskIn; + animation-duration: @dialog-anim-duration; + animation-timing-function: linear; .animation-active; } } @@ -97,6 +110,8 @@ .@{prefix}-dialog__mask { animation-name: tDialogMaskOut; + animation-duration: @dialog-anim-duration; + animation-timing-function: linear; .animation-active; } } @@ -122,14 +137,14 @@ opacity: 0; animation-duration: @dialog-anim-duration; animation-fill-mode: both; - animation-timing-function: @dialog-anim-time-fn-fade; + animation-timing-function: @anim-time-fn-ease-out; animation-play-state: paused; } .@{prefix}-dialog-fade-exit { animation-duration: @dialog-anim-duration; animation-fill-mode: both; - animation-timing-function: @dialog-anim-time-fn-fade; + animation-timing-function: @anim-time-fn-ease-out; animation-play-state: paused; } diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less index 6b269cb308..6b56314702 100644 --- a/style/web/components/dialog/_var.less +++ b/style/web/components/dialog/_var.less @@ -69,6 +69,5 @@ // 动画 @dialog-anim-duration: @anim-duration-base; -@dialog-anim-time-fn-enter: cubic-bezier(.08, .82, .17, 1); -@dialog-anim-time-fn-exit: cubic-bezier(.6, .04, .98, .34); -@dialog-anim-time-fn-fade: cubic-bezier(.55, 0, .55, .2); +@dialog-anim-time-fn-enter: @anim-time-fn-easing; +@dialog-anim-time-fn-exit: @anim-time-fn-easing; From 921fe834ff84e4b7e60d972ebb9a2e642acec633 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 30 Nov 2022 11:14:49 +0800 Subject: [PATCH 083/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20drawer=20?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=20(#1047)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/drawer/_animate.less | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/style/web/components/drawer/_animate.less b/style/web/components/drawer/_animate.less index 1c53577870..0496b63859 100644 --- a/style/web/components/drawer/_animate.less +++ b/style/web/components/drawer/_animate.less @@ -16,14 +16,17 @@ animation-play-state: paused; } -.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active, -.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active { +.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active.@{prefix}-drawer-fade-enter-to, +.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active.@{prefix}-drawer-fade-appear-to { animation-name: tDrawerFadeIn; + animation-duration: .2s; animation-play-state: running; } -.@{prefix}-drawer-fade-exit.@{prefix}-drawer-fade-exit-active { +.@{prefix}-drawer-fade-exit.@{prefix}-drawer-fade-exit-active, +.@{prefix}-drawer-fade-leave-active.@{prefix}-drawer-fade-leave-to { animation-name: tDrawerFadeOut; + animation-duration: .2s; animation-play-state: running; } From 22c7e72acb5998a244bdf29ffd95754b1501cb70 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 30 Nov 2022 11:16:40 +0800 Subject: [PATCH 084/312] [TagInput] tag padding (#1044) * fix(web): tag-input padding * fix: tag padding * fix: nowrap * fix: margin * style(web): remove whitespace * style(web): remove comment * fix: size=small Co-authored-by: sheepluo --- style/web/components/tag-input/_index.less | 84 ++++++++++++++++++---- style/web/components/tag-input/_var.less | 13 +++- 2 files changed, 80 insertions(+), 17 deletions(-) diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index 9075f2c00b..dc1871faf6 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -8,12 +8,12 @@ .@{prefix}-tag-input { .reset; + .@{prefix}-tag { animation: t-fade-in @anim-duration-base ease-in-out; + margin: @comp-margin-xxs @comp-margin-xs @comp-margin-xxs 0; } - .@{prefix}-tag + .@{prefix}-tag { - margin-left: @comp-margin-xs; - } + .@{prefix}-tag-input__drag_wrapper + .@{prefix}-tag-input__drag_wrapper { margin-left: @comp-margin-xs; } @@ -21,19 +21,46 @@ .@{prefix}-input { overflow: hidden; min-height: @tag-input-height-default; - line-height: @tag-input-line-height-default; - padding: 0 @comp-paddingLR-xs; height: fit-content; + padding: 1px @comp-paddingLR-s 1px @comp-margin-xs; + .t-input-suffix-icon(@comp-margin-s); &.@{prefix}-size-s { - padding: calc(@comp-paddingTB-xxs - 1px) @comp-paddingLR-xs; + padding: 0 @comp-paddingLR-xxs 0 @comp-margin-xs; min-height: @tag-input-height-s; - line-height: @tag-input-line-height-s; + .@{prefix}-tag { + margin: 1px @comp-margin-xs 1px 0; + } } &.@{prefix}-size-l { min-height: @tag-input-height-l; - line-height: @tag-input-line-height-l; + padding-right: @comp-paddingLR-m; + .t-input-suffix-icon(@comp-margin-m); + } + } + + /** 设计稿：未填充标签场景，边距和已填充不同 */ + &.@{prefix}-is-empty { + + .@{prefix}-size-s { + .@{prefix}-input__inner { + margin-top: 0; + } + } + + .@{prefix}-size-l { + .@{prefix}-input__inner { + margin-top: calc(@comp-margin-s - 1px); + } + } + + .@{prefix}-input__inner { + margin-top: calc(@comp-margin-xs - 1px); + } + + .@{prefix}-input__inner { + margin-left: @comp-margin-xs; } } @@ -44,13 +71,23 @@ } } - .@{prefix}-tag-input__prefix, - .@{prefix}-input__prefix:empty + input { + .@{prefix}-tag-input__prefix { margin-left: @comp-margin-xs; } - .@{prefix}-input--auto-width { - padding-right: @comp-paddingLR-xs; + .@{prefix}-input .@{prefix}-input__prefix:not(:empty) { + margin-right: 0; + } + + &.@{prefix}-input--auto-width { + + .@{prefix}-input.@{prefix}-input--focused { + padding-right: @tag-input-clear-icon-padding-m; + } + + .@{prefix}-input__prefix { + white-space: nowrap; + } } } @@ -63,7 +100,6 @@ .@{prefix}-input { display: block; - padding-right: @comp-paddingLR-xl; &.@{prefix}-input--prefix > .@{prefix}-input__prefix { display: inline; @@ -72,7 +108,6 @@ .@{prefix}-input__suffix-icon { position: absolute; - right: @comp-margin-s; bottom: 0; } } @@ -83,3 +118,24 @@ display: inline-block; margin-right: @comp-margin-s; } + +/** 避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */ +.@{prefix}-tag-input { + &.@{prefix}-tag-input--with-tag { + .@{prefix}-input__prefix { + padding-right: @tag-input-clear-icon-padding-m; + } + .@{prefix}-input__inner { + margin-left: calc(-1 * @tag-input-clear-icon-padding-m); + } + + .@{prefix}-size-l { + .@{prefix}-input__prefix { + padding-right: @tag-input-clear-icon-padding-l; + } + .@{prefix}-input__inner { + margin-left: calc(-1 * @tag-input-clear-icon-padding-l); + } + } + } +} diff --git a/style/web/components/tag-input/_var.less b/style/web/components/tag-input/_var.less index 7ffde8824b..36a6e12b4d 100644 --- a/style/web/components/tag-input/_var.less +++ b/style/web/components/tag-input/_var.less @@ -2,6 +2,13 @@ @tag-input-height-default: @comp-size-m; @tag-input-height-l: @comp-size-xl; -@tag-input-line-height-s: calc(@tag-input-height-s - 4px); -@tag-input-line-height-default: calc(@tag-input-height-default - 4px); -@tag-input-line-height-l: calc(@tag-input-height-l - 4px); +@tag-input-padding-default: calc(@comp-margin-xs - 1px); + +@tag-input-clear-icon-padding-m: calc(@comp-paddingLR-xxl - @comp-paddingLR-xxs); +@tag-input-clear-icon-padding-l: calc(@comp-paddingLR-xxl + @comp-paddingLR-xs); + +.t-input-suffix-icon(@distance) { + .@{prefix}-input__suffix-icon { + right: @distance; + } +} From 4143791097a298d840646aa38997a7c371e91e34 Mon Sep 17 00:00:00 2001 From: DingDing <88708072+pattybaby110@users.noreply.github.com> Date: Wed, 30 Nov 2022 11:17:03 +0800 Subject: [PATCH 085/312] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E4=BA=86div?= =?UTF-8?q?ider=E6=96=87=E6=A1=88=20(#1046)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/_design/\345\210\206\345\211\262\347\272\277Divider.md" | 2 +- docs/web/api/divider.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git "a/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" "b/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" index b4f54b4265..53b074020f 100644 --- "a/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" +++ "b/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" @@ -1,6 +1,6 @@ # Divider 分割线 -分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 +分割线是一个呈线状的轻量化组件，起到分隔、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 ### 基础分割线 diff --git a/docs/web/api/divider.md b/docs/web/api/divider.md index a70a976757..d77975e7f6 100644 --- a/docs/web/api/divider.md +++ b/docs/web/api/divider.md @@ -1,6 +1,6 @@ --- title: Divider 分割线 -description: 分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 +description: 分割线是一个呈线状的轻量化组件，起到分隔、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 isComponent: true usage: { title: '', description: '' } spline: layout From 68da24685d575a7c123a658aafb35e972ad5602f Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 30 Nov 2022 14:12:49 +0800 Subject: [PATCH 086/312] fix(web): tag-input style (#1048) Co-authored-by: sheepluo --- style/web/components/tag-input/_index.less | 32 +++++----------------- style/web/components/tag-input/_var.less | 2 +- 2 files changed, 8 insertions(+), 26 deletions(-) diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index dc1871faf6..bac4770a26 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -43,22 +43,6 @@ /** 设计稿：未填充标签场景，边距和已填充不同 */ &.@{prefix}-is-empty { - .@{prefix}-size-s { - .@{prefix}-input__inner { - margin-top: 0; - } - } - - .@{prefix}-size-l { - .@{prefix}-input__inner { - margin-top: calc(@comp-margin-s - 1px); - } - } - - .@{prefix}-input__inner { - margin-top: calc(@comp-margin-xs - 1px); - } - .@{prefix}-input__inner { margin-left: @comp-margin-xs; } @@ -96,7 +80,7 @@ } // 标签数量超出时，换行显示 -.@{prefix}-tag-input--break-line { +.@{prefix}-tag-input--break-line:not(.@{prefix}-is-empty) { .@{prefix}-input { display: block; @@ -111,6 +95,10 @@ bottom: 0; } } + + .@{prefix}-tag-input__prefix { + vertical-align: text-top; + } } .@{prefix}-tag-input__prefix { @@ -122,20 +110,14 @@ /** 避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */ .@{prefix}-tag-input { &.@{prefix}-tag-input--with-tag { - .@{prefix}-input__prefix { + .@{prefix}-input { padding-right: @tag-input-clear-icon-padding-m; } - .@{prefix}-input__inner { - margin-left: calc(-1 * @tag-input-clear-icon-padding-m); - } .@{prefix}-size-l { - .@{prefix}-input__prefix { + .@{prefix}-input { padding-right: @tag-input-clear-icon-padding-l; } - .@{prefix}-input__inner { - margin-left: calc(-1 * @tag-input-clear-icon-padding-l); - } } } } diff --git a/style/web/components/tag-input/_var.less b/style/web/components/tag-input/_var.less index 36a6e12b4d..4afeff028b 100644 --- a/style/web/components/tag-input/_var.less +++ b/style/web/components/tag-input/_var.less @@ -4,7 +4,7 @@ @tag-input-padding-default: calc(@comp-margin-xs - 1px); -@tag-input-clear-icon-padding-m: calc(@comp-paddingLR-xxl - @comp-paddingLR-xxs); +@tag-input-clear-icon-padding-m: calc(@comp-paddingLR-xxl + @comp-paddingLR-xxs); @tag-input-clear-icon-padding-l: calc(@comp-paddingLR-xxl + @comp-paddingLR-xs); .t-input-suffix-icon(@distance) { From 14fe2c4c59f7be21eb516a2c5968ae6ce5adc7aa Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 30 Nov 2022 15:29:40 +0800 Subject: [PATCH 087/312] fix: calendar style bug (#1050) --- style/web/components/calendar/_index.less | 56 ++++++----------- style/web/components/calendar/_var.less | 73 +++++++++-------------- 2 files changed, 47 insertions(+), 82 deletions(-) diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less index ffbafbfab2..ea7a0443cc 100644 --- a/style/web/components/calendar/_index.less +++ b/style/web/components/calendar/_index.less @@ -31,27 +31,25 @@ &--full { min-width: @calendar-full-min-width; + padding: @calendar-full-padding; .@{prefix}-calendar__control { padding: @calendar-control-padding; } .@{prefix}-calendar__title { - font-size: @font-size-xl; + font: @font-title-large; flex: 1; } .@{prefix}-calendar__panel { - padding: @calendar-panel-padding; position: relative; + margin-top: @calendar-panel-margin-top; &-title { font: @calendar-head-title-font; - padding-top: 1px; - padding-bottom: 1px; color: @calendar-title-color; position: absolute; - top: @calendar-title-position-top; } } @@ -70,14 +68,16 @@ display: flex; flex-direction: column; align-items: flex-end; + justify-content: flex-start; margin-left: @calendar-body-cell-margin-left; transition-duration: @calendar-transition-duration; transition-property: @calendar-transition-property; transition-timing-function: @calendar-transition-timing-function; &-content { - min-height: @calendar-body-cell-content-min-height; - padding-top: @calendar-body-cell-content-padding-top; + padding: @calendar-body-cell-content-padding; + width: 100%; + box-sizing: border-box; } &.@{prefix}-is-checked { @@ -89,8 +89,7 @@ } &--now { - border-top: 1px solid @calendar-highlight-color; - background-color: @calendar-body-cell-check-bg-color; + border-top: @calendar-border-size solid @calendar-highlight-color; .@{prefix}-calendar__table-body-cell-display { color: @calendar-body-cell-display-now-color; } @@ -108,6 +107,7 @@ &--card { width: @calendar-card-width; border-radius: @border-radius-medium; + padding: @calendar-card-pannel-padding; .@{prefix}-calendar__control { padding: @calendar-card-calendar-control-padding; @@ -119,6 +119,7 @@ &:last-child { flex: 1; text-align: right; + display: block; } } } @@ -128,12 +129,12 @@ &.@{prefix}-calendar__panel--month { height: @calendar-card-calendar-panel-height-month; - padding: @calendar-card-calendar-panel-padding-month; + margin-top: @calendar-card-pannel-margin-top; } &.@{prefix}-calendar__panel--year { height: @calendar-card-calendar-panel-height-year; - padding: @calendar-card-calendar-panel-padding-year; + margin-top: @calendar-card-pannel-margin-top; .@{prefix}-calendar__table { &-body { &-cell { @@ -164,7 +165,6 @@ &-cell { width: @calendar-card-cell-size; height: @calendar-card-cell-size; - margin: @calendar-card-body-cell-margin; justify-content: center; font: @calendar-card-body-cell-font; box-sizing: border-box; @@ -197,9 +197,7 @@ padding-bottom: @calendar-card-body-cell-display-padding; text-align: center; border-radius: @calendar-card-body-cell-display-border-radius; - transition-duration: @calendar-transition-duration; - transition-property: @calendar-transition-property; - transition-timing-function: @calendar-transition-timing-function; + transition: all @calendar-transition-duration @calendar-transition-timing-function; &:hover { box-shadow: inset 0 0 0 1px @calendar-highlight-color; @@ -240,7 +238,6 @@ &-section { height: 100%; - margin-right: @calendar-control-section-margin-right; display: flex; justify-content: flex-end; align-items: center; @@ -252,33 +249,17 @@ &-cell { height: @calendar-section-height; margin-right: @calendar-control-section-cell-margin-right; + display: flex; - &:last-child { - margin-right: 0; + .@{prefix}-radio-group { + vertical-align: bottom; } - .@{prefix}-select { - display: inline; - - &.@{prefix}-size-l { - padding-right: @calendar-control-section-cell-select-padding-left-l; - } - - &.@{prefix}-size-m { - padding-right: @calendar-control-section-cell-select-padding-left-m; - } - - &.@{prefix}-size-s { - padding-right: @calendar-control-section-cell-select-padding-left-s; - } + &:last-child { + margin-right: 0; } } } - - &-tag { - height: @calendar-control-tag-height; - padding: @calendar-control-tag-padding; - } } &__panel { @@ -327,7 +308,6 @@ &-cell { height: @calendar-head-cell-height; - padding: @calendar-head-padding; font: @calendar-head-cell-font; color: @calendar-head-cell-color; } diff --git a/style/web/components/calendar/_var.less b/style/web/components/calendar/_var.less index b12f992931..10a1852ca5 100644 --- a/style/web/components/calendar/_var.less +++ b/style/web/components/calendar/_var.less @@ -27,7 +27,6 @@ @calendar-body-cell-check-bg-color: @brand-color-light; @calendar-body-cell-border-check-color: @brand-color; @calendar-card-body-cell-bg-hover: @bg-color-secondarycontainer-hover; -@calendar-scrollbar-thumb-bg: #e5e5e5; @calendar-bg: @bg-color-container; @calendar-card-cell-value-check-color: @text-color-anti; @calendar-card-cell-value-check-bg: @brand-color; @@ -37,36 +36,28 @@ // 文字 @calendar-head-cell-font: @font-title-small; -@calendar-card-body-cell-font: @font-body-small; +@calendar-card-body-cell-font: @font-body-medium; @calendar-table-cell-font: @font-title-small; @calendar-body-cell-display-font: @font-title-small; -@calendar-card-body-cell-display-font: @font-body-small; +@calendar-card-body-cell-display-font: @font-body-medium; @calendar-head-title-font: @font-title-large; // 间距行高 -@calendar-control-padding: 32px 36px; -@calendar-panel-padding: 0px 36px 36px; -@calendar-head-padding: 0px; -@calendar-head-margin-bottom: 8px; -@calendar-body-cell-padding: 0px; -@calendar-body-cell-margin-left: 0px; -@calendar-table-margin-right: 8px; -@calendar-footer-padding: 46px 36px 20px; -@calendar-table-cell-padding: 0px; -@calendar-card-calendar-control-padding: 12px 12px 0; -@calendar-control-tag-height: 32px; -@calendar-control-tag-padding: 0 16px; -@calendar-card-calendar-panel-padding: 20px 14px; -@calendar-card-calendar-panel-padding-month: 12px; -@calendar-card-calendar-panel-padding-year: 12px; -@calendar-card-footer-padding: @spacer-2; -@calendar-control-section-margin-right: 16px; -@calendar-control-section-cell-margin-right: 8px; -@calendar-control-section-cell-select-padding-left-s: 35px; -@calendar-control-section-cell-select-padding-left-m: 42px; -@calendar-control-section-cell-select-padding-left-l: 51px; -@calendar-body-line-height: 22px; -@calendar-card-body-cell-margin: 0px; +@calendar-full-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@calendar-control-padding: 0; +@calendar-panel-margin-top: @comp-margin-xxxl; +@calendar-head-margin-bottom: @comp-margin-s; +@calendar-body-cell-padding: 0; +@calendar-body-cell-margin-left: 0; +@calendar-table-margin-right: @comp-margin-s; +@calendar-footer-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@calendar-table-cell-padding: 0; +@calendar-card-pannel-padding: @comp-paddingTB-m @comp-paddingLR-m; +@calendar-card-calendar-control-padding: 0; +@calendar-card-pannel-margin-top: @comp-margin-m; +@calendar-card-footer-padding: 0 @comp-paddingLR-m; +@calendar-control-section-cell-margin-right: @comp-margin-s; +@calendar-body-line-height: @text-line-height-base; @calendar-header-row-padding: 0px; @calendar-card-body-cell-display-padding: calc(@comp-paddingTB-xxs / 2); @calendar-control-margin-bottom: @comp-margin-xxxl; @@ -75,29 +66,23 @@ // 尺寸 @calendar-full-min-width: 560px; -@calendar-control-height: 90px; @calendar-head-cell-height: 100%; -@calendar-body-cell-height: 87.4px; -@calendar-body-cell-content-min-height: 60px; -@calendar-body-cell-content-padding-top: 8px; +@calendar-body-cell-height: 104px; +@calendar-body-cell-content-min-height: 64px; +@calendar-body-cell-content-padding: @comp-paddingTB-s @comp-paddingLR-xs; @calendar-footer-height: 90px; -@calendar-card-width: 352px; -@calendar-card-calendar-control-height: 58px; -@calendar-card-calendar-panel-height: 290px; -@calendar-card-calendar-panel-height-month: 310px; -@calendar-card-calendar-panel-height-year: 256px; -@calendar-card-footer-height: 64px; -@calendar-through-height: 1200px; -@calendar-scrollbar-thumb-width: 6px; +@calendar-card-width: 280px; +@calendar-card-calendar-panel-height-month: 200px; +@calendar-card-calendar-panel-height-year: 168px; +@calendar-card-footer-height: @comp-size-xxl; @calendar-section-height: 100%; @calendar-card-cell-size: 100%; @calendar-card-table-size: 100%; -@calendar-card-cell-value-size: 24px; -@calendar-card-cell-value-size-year: 48px; -@calendar-border-size: 1px; -@calendar-card-checked-pointer-width: 6px; +@calendar-card-cell-value-size: @comp-size-xs; +@calendar-card-cell-value-size-year: @comp-size-xxl; +@calendar-border-size: 2px; + // 定位 -@calendar-title-position-top: -36px; @calendar-body-row-flex: 1; // 边框弧度 @@ -108,4 +93,4 @@ // 动画 @calendar-transition-duration: @anim-duration-base; @calendar-transition-property: border-top, background; -@calendar-transition-timing-function: @anim-time-fn-ease-in; +@calendar-transition-timing-function: linear; From 9444759ff9b30d717e369a3eab3062350cb1dbbb Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 30 Nov 2022 15:30:16 +0800 Subject: [PATCH 088/312] fix: menu item padding left (#1051) --- style/web/components/menu/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/menu/_var.less b/style/web/components/menu/_var.less index 62a94b68e0..fbfa0df530 100644 --- a/style/web/components/menu/_var.less +++ b/style/web/components/menu/_var.less @@ -81,7 +81,7 @@ @default-menu-item-height: 36px; // popup -@popup-item-padding-left: @comp-paddingTB-l @comp-paddingLR-l; +@popup-item-padding-left: @comp-paddingLR-l; // 高度 @menu-height-default: 32px; // low From 7e3f521255398c756cc4d29833d761c4a309794b Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 30 Nov 2022 16:16:14 +0800 Subject: [PATCH 089/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20collapse=20?= =?UTF-8?q?=E7=BF=BB=E8=BD=AC=E5=8A=A8=E7=94=BB=20(#1052)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/collapse/_index.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style/web/components/collapse/_index.less b/style/web/components/collapse/_index.less index aeb48580a1..1fa6f0cd5a 100644 --- a/style/web/components/collapse/_index.less +++ b/style/web/components/collapse/_index.less @@ -39,8 +39,9 @@ align-items: center; justify-content: center; - &--default { + > .t-fake-arrow { transform: rotate(-90deg); + transition: all @anim-duration-base @anim-time-fn-easing; } &--left { @@ -51,14 +52,13 @@ margin-left: @collapse-panel-header-icon-margin; } - &--active { - transform: rotate(90deg); + &--active > .t-fake-arrow { + transform: rotate(0); } &:hover { background-color: @bg-color-container-hover; border-radius: @border-radius-small; - transition: background-color @anim-duration-base @anim-time-fn-easing; } } From 30ee7b2f26c75934bfb0c210681468561c9a45dd Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 30 Nov 2022 16:24:46 +0800 Subject: [PATCH 090/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20button=20di?= =?UTF-8?q?sabled=20=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1053)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/button/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index bee2466e07..4a112cf54c 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -302,7 +302,7 @@ } &.@{prefix}-size-full-width { - display: block; + display: flex; width: 100%; } From 3abb0713591ef244720b792ef61c5b2f30e7b3f8 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 30 Nov 2022 17:35:07 +0800 Subject: [PATCH 091/312] fix(web): auto-width icon (#1049) Co-authored-by: sheepluo --- style/web/components/tag-input/_index.less | 24 ++++++++++++++-------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index bac4770a26..8a586f3824 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -107,17 +107,23 @@ margin-right: @comp-margin-s; } -/** 避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */ -.@{prefix}-tag-input { - &.@{prefix}-tag-input--with-tag { +/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */ +.@{prefix}-tag-input--break-line.@{prefix}-tag-input--with-tag:not(.@{prefix}-input--auto-width), +.@{prefix}-tag-input.@{prefix}-input--auto-width:hover { + .@{prefix}-input { + padding-right: @tag-input-clear-icon-padding-m; + } + + .@{prefix}-size-l { .@{prefix}-input { - padding-right: @tag-input-clear-icon-padding-m; + padding-right: @tag-input-clear-icon-padding-l; } + } +} - .@{prefix}-size-l { - .@{prefix}-input { - padding-right: @tag-input-clear-icon-padding-l; - } - } +/** auto-width 模式，左右边距相同 */ +.@{prefix}-tag-input.@{prefix}-input--auto-width { + .@{prefix}-input { + padding-right: 0; } } From 8c67c5e52b880e114b67806d5b565ec1e7e01aa7 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 30 Nov 2022 18:50:57 +0800 Subject: [PATCH 092/312] chore: revert modify (#1054) --- style/web/components/calendar/_index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less index ea7a0443cc..badbd66a69 100644 --- a/style/web/components/calendar/_index.less +++ b/style/web/components/calendar/_index.less @@ -255,6 +255,10 @@ vertical-align: bottom; } + .@{prefix}-select { + display: inline; + } + &:last-child { margin-right: 0; } From 8c0a12d86a254c35eed1416417bdc1db92b93e39 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 30 Nov 2022 19:04:22 +0800 Subject: [PATCH 093/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20drawer=20?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=20(#1055)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/drawer/_animate.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/style/web/components/drawer/_animate.less b/style/web/components/drawer/_animate.less index 0496b63859..6e60aadc45 100644 --- a/style/web/components/drawer/_animate.less +++ b/style/web/components/drawer/_animate.less @@ -16,17 +16,19 @@ animation-play-state: paused; } +.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active, .@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active.@{prefix}-drawer-fade-enter-to, +.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active, .@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active.@{prefix}-drawer-fade-appear-to { animation-name: tDrawerFadeIn; - animation-duration: .2s; + animation-duration: @anim-duration-base; animation-play-state: running; } .@{prefix}-drawer-fade-exit.@{prefix}-drawer-fade-exit-active, .@{prefix}-drawer-fade-leave-active.@{prefix}-drawer-fade-leave-to { animation-name: tDrawerFadeOut; - animation-duration: .2s; + animation-duration: @anim-duration-base; animation-play-state: running; } From 8904486f7ce38cbb289e40607a55cca67f277964 Mon Sep 17 00:00:00 2001 From: PY Date: Sat, 3 Dec 2022 22:20:25 +0800 Subject: [PATCH 094/312] fix: table style (#1056) --- style/web/components/table/_index.less | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index d4ebb78035..62706ab598 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -184,12 +184,6 @@ .@{prefix}-table__selection-cell { padding: 0; height: 0; - - + td, - + th { - padding-left: 0; - padding-right: 0; - } } td.@{prefix}-table__handle-draggable { @@ -280,6 +274,13 @@ // 斑马线表格 &--striped { + &:not(.@{prefix}-table--bordered) { + th, + td { + border-bottom: none; + } + } + &.@{prefix}-table--header-fixed { tbody tr:nth-of-type(even) { background-color: @table-highlight-bg-color; From 662d0451ca727e7e10822a2df8d2b8100b59879e Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sun, 4 Dec 2022 17:28:43 +0800 Subject: [PATCH 095/312] feat(web): add XMLHttpRequest to events (#1064) Co-authored-by: sheepluo --- js/upload/types.ts | 1 + js/upload/xhr.ts | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/js/upload/types.ts b/js/upload/types.ts index 5c5e59d0ed..7c81dc809b 100644 --- a/js/upload/types.ts +++ b/js/upload/types.ts @@ -71,6 +71,7 @@ export interface InnerProgressContext { files?: UploadFile[]; percent: number; type: ProgressContext['type']; + XMLHttpRequest?: XMLHttpRequest; } export interface SuccessContext { diff --git a/js/upload/xhr.ts b/js/upload/xhr.ts index f48f973c84..7584ea667e 100644 --- a/js/upload/xhr.ts +++ b/js/upload/xhr.ts @@ -1,4 +1,5 @@ /* eslint-disable no-param-reassign */ +import log from '../log/log'; import { UploadFile, XhrOptions } from './types'; import { getCurrentDate } from './utils'; @@ -43,6 +44,7 @@ export default function xhr({ file: file || innerFiles[0], files: innerFiles.map((file) => ({ ...file, percent })), type: 'mock', + XMLHttpRequest: xhr, }); } } else { @@ -101,6 +103,7 @@ export default function xhr({ file: file || progressFiles[0], files: progressFiles, type: 'real', + XMLHttpRequest: xhr, }); } }; @@ -109,6 +112,7 @@ export default function xhr({ // eslint-disable-next-line consistent-return xhr.onload = (event: ProgressEvent) => { let response: { [key: string]: any } = {}; + response.XMLHttpRequest = xhr; const isFail = xhr.status < 200 || xhr.status >= 300; if (isFail) { return onError({ @@ -120,6 +124,7 @@ export default function xhr({ response = JSON.parse(text); } catch (e) { response = text; + log.error('Upload', 'response does not a valid json'); } clearInterval(timer1); clearTimeout(timer2); @@ -129,6 +134,9 @@ export default function xhr({ // 如果上传请求返回结果没有上传日期，则使用电脑当前日期显示 file.uploadTime = response?.uploadTime || getCurrentDate(); }); + if (typeof response === 'object') { + response.XMLHttpRequest = xhr; + } onSuccess({ event, file: file || innerFiles[0], From 4fc672fd5a7524d28136b42ed2c4a3bd6369c270 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sun, 4 Dec 2022 17:29:07 +0800 Subject: [PATCH 096/312] feat: input improvement (#1065) Co-authored-by: sheepluo --- js/input-number/number.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 94da7c78b4..3dcce049a4 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -233,6 +233,8 @@ export function getMaxOrMinValidateResult(p: { return error; } +export const specialCode = ['-', '.', 'e', 'E']; + /** * 是否允许输入当前字符，输入字符校验 */ @@ -240,5 +242,8 @@ export function canInputNumber(number: string, largeNumber: boolean) { if (!number && typeof number === 'string') return true; const isNumber = (largeNumber && isInputNumber(number)) || !Number.isNaN(Number(number)); if (!isNumber && !['-', '.', 'e', 'E'].includes(number.slice(-1))) return false; + // 只能出现一个点（.） 和 一个负号（-） + if (String(number).match(/\./g)?.length > 1) return false; + if (String(number).match(/-/g)?.length > 1) return false; return true; } From 5b3de4ebeac4cd591067743b5ac9c9a50e51afb7 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sun, 4 Dec 2022 17:29:54 +0800 Subject: [PATCH 097/312] feat(Table): empty and loading height (#1063) * feat(Table): empty and loading height * fix(web): empty and loading height Co-authored-by: sheepluo --- style/web/components/table/_index.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 62706ab598..65680eedbe 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -556,7 +556,7 @@ display: flex; align-items: center; justify-content: center; - height: 120px; + min-height: 120px; color: @table-color-empty; } @@ -1031,8 +1031,9 @@ height: 100%; } +/** 默认最小高度限制为 Empty 高度加表头高度 */ .@{prefix}-table--loading .@{prefix}-table__content { - min-height: 200px; + min-height: 168px; } .@{prefix}-table__handle-draggable:hover, From 16e221053944b75ab34fcbc3012213ff98b082db Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 5 Dec 2022 14:55:42 +0800 Subject: [PATCH 098/312] fix(input): input inner ellipsis (#1066) --- style/web/components/input/_index.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less index 40813b78bf..4f72a7ff60 100644 --- a/style/web/components/input/_index.less +++ b/style/web/components/input/_index.less @@ -6,6 +6,8 @@ @import "./_mixin.less"; +@import "../../mixins/_text.less"; + @import "../../mixins/_reset.less"; .@{prefix}-input { @@ -39,6 +41,7 @@ font: inherit; background-color: transparent; box-sizing: border-box; + .text-ellipsis(); &::placeholder { color: @input-placeholder-color; From 42dad95212e59b9d46c4e35bf5a818e230a9ace5 Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 5 Dec 2022 16:21:12 +0800 Subject: [PATCH 099/312] feat: pagination style update (#1068) --- style/web/components/pagination/_index.less | 29 ++++++++++++++++++++- style/web/components/pagination/_var.less | 5 ++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index fda67b531e..fbab0852a7 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -179,11 +179,27 @@ margin-left: @pagination-jump-margin; font-size: @pagination-font-default; gap: @comp-margin-s; + background-color: @bg-color-secondarycontainer; + height: @pagination-jump-height; + padding-left: @pagination-jump-padding-left; + border-radius: @border-radius-default; + } + + .@{prefix}-input-adornment__append { + border: none; + height: @pagination-jump-inner-height; + color: @text-color-secondary; + background-color: transparent; } .@{prefix}-input-number { width: @pagination-input-width; + .@{prefix}-input { + height: @pagination-jump-inner-height; + border-radius: @border-radius-default; + } + .@{prefix}-input__inner { text-align: center; } @@ -191,12 +207,23 @@ // 迷你尺寸 &.@{prefix}-size-s { + font: @pagination-font-s; + + .@{prefix}-pagination__jump { + height: @pagination-jump-height-small; + } .@{prefix}-input-adornment__append { + height: @pagination-jump-inner-height-small; font: @pagination-font-s; } + .@{prefix}-input-number { - width: 56px; + width: 48px; + + .@{prefix}-input { + height: @pagination-jump-inner-height-small; + } } .@{prefix}-pagination { diff --git a/style/web/components/pagination/_var.less b/style/web/components/pagination/_var.less index 6aeccb5f29..1e842011a3 100644 --- a/style/web/components/pagination/_var.less +++ b/style/web/components/pagination/_var.less @@ -33,6 +33,11 @@ @pagination-jump-margin: @comp-margin-s; @pagination-select-margin: @comp-margin-l; @pagination-pager-margin: @comp-margin-s; +@pagination-jump-height: @comp-size-m; +@pagination-jump-padding-left: @comp-margin-s; +@pagination-jump-inner-height: calc(@comp-size-m - 4px); +@pagination-jump-height-small: @comp-size-xs; +@pagination-jump-inner-height-small: calc(@comp-size-xs - 4px); // 过渡 @pagination-hover-transition: all @anim-duration-base @anim-time-fn-ease-in; From bec02424cee8f61530a9c17c2672033df90dd178 Mon Sep 17 00:00:00 2001 From: PY Date: Mon, 5 Dec 2022 16:21:35 +0800 Subject: [PATCH 100/312] fix: table line-height (#1069) --- style/web/components/table/_index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 65680eedbe..f0d94eefd8 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -118,13 +118,13 @@ position: relative; padding: @table-cell-padding; border-bottom: @border; - line-height: @table-line-height; + line-height: 1; font-weight: normal; overflow-wrap: break-word; background-color: inherit; box-sizing: border-box; - &:not([align]) { + &:not(.@{prefix}-date-picker__table th) { text-align: left; } } From f3530c814123202e16cc6c251633017f70209e81 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 5 Dec 2022 16:37:53 +0800 Subject: [PATCH 101/312] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4=20jumper=20(?= =?UTF-8?q?#1067)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/web/overview.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/docs/web/overview.md b/docs/web/overview.md index eba0891e03..9af608ede3 100644 --- a/docs/web/overview.md +++ b/docs/web/overview.md @@ -64,7 +64,7 @@ spline: explain
-

导航9

+

导航8

@@ -94,13 +94,6 @@ spline: explain

Dropdown 下拉菜单
-
- - - -

Jumper 跳转

- -
From 88265645b10023b756b46ac5531c685c1f449952 Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 5 Dec 2022 19:31:58 +0800 Subject: [PATCH 102/312] feat: range input size token (#1070) --- style/web/components/range-input/_index.less | 5 +++-- style/web/components/range-input/_var.less | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less index 8ee7da373f..673c63a8dc 100644 --- a/style/web/components/range-input/_index.less +++ b/style/web/components/range-input/_index.less @@ -53,7 +53,7 @@ height: 100%; display: flex; align-items: center; - gap: @spacer; + gap: @range-input-inner-gap; .@{prefix}-input__wrap { height: 100%; @@ -61,11 +61,12 @@ } .@{prefix}-input { - padding: 0 4px; + padding: @range-input-inner-padding; height: 100%; border: 0; box-shadow: none; font-size: inherit; + border-radius: @border-radius-small; &:hover { background-color: @bg-color-container-hover; diff --git a/style/web/components/range-input/_var.less b/style/web/components/range-input/_var.less index d0bb57b9e5..09cafb498b 100644 --- a/style/web/components/range-input/_var.less +++ b/style/web/components/range-input/_var.less @@ -36,6 +36,8 @@ // 间距 @range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-xs; @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; // 尺寸 @range-input-height-s: @comp-size-xs; From 2813c76ba9e958475f2810e4199ff527eb6ad411 Mon Sep 17 00:00:00 2001 From: PY Date: Tue, 6 Dec 2022 11:25:21 +0800 Subject: [PATCH 103/312] fix: table date-picker (#1071) --- style/web/components/table/_index.less | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index f0d94eefd8..778352277f 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -110,6 +110,7 @@ } .@{prefix}-text-ellipsis { + line-height: @table-line-height; .text-ellipsis(); } @@ -118,14 +119,20 @@ position: relative; padding: @table-cell-padding; border-bottom: @border; - line-height: 1; + line-height: @table-line-height; font-weight: normal; overflow-wrap: break-word; background-color: inherit; box-sizing: border-box; - &:not(.@{prefix}-date-picker__table th) { - text-align: left; + &:not(.@{prefix}-date-range-picker__panel th), + &:not(.@{prefix}-date-range-picker__panel td) { + text-align: center; + } + + // set line-height to 1 to avoid the height of the cell is not equal to the height of the content, childNode should set line-height self + &:has(> *) { + line-height: 1; } } From caebebd499a709dd0e60c22af4369d05e6a4ff99 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 6 Dec 2022 14:35:37 +0800 Subject: [PATCH 104/312] fix(web): select-input padding (#1072) Co-authored-by: sheepluo --- style/web/components/select-input/_index.less | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/style/web/components/select-input/_index.less b/style/web/components/select-input/_index.less index 62314f3977..5041a9fac3 100644 --- a/style/web/components/select-input/_index.less +++ b/style/web/components/select-input/_index.less @@ -4,15 +4,24 @@ @import "../../mixins/_reset.less"; -.@{prefix}-select-input, -.@{prefix}-select-input__wrap { +.@{prefix}-select-input { .reset; width: 100%; display: inline-block; } -// TODO borderless input 内置 +/** 宽度自适应场景，多选，预留图标的位置 */ +.@{prefix}-select-input--multiple { + .@{prefix}-input--auto-width.@{prefix}-tag-input__with-suffix-icon { + .@{prefix}-input { + padding-right: @comp-paddingLR-xl; + } + .@{prefix}-input.@{prefix}-size-l { + padding-right: calc(@comp-paddingLR-xl + @comp-paddingLR-s); + } + } +} /** 无边框模式 */ .@{prefix}-select-input--borderless { From c710f3bf5e5eacd93d80901b3d6b0018b497ad4f Mon Sep 17 00:00:00 2001 From: PY Date: Tue, 6 Dec 2022 21:14:55 +0800 Subject: [PATCH 105/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dtable=E5=B1=85?= =?UTF-8?q?=E4=B8=AD=E8=A1=A8=E7=8E=B0=E5=BC=82=E5=B8=B8=20(#1074)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复table居中表现异常 * fix: line-height --- style/web/components/table/_index.less | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 778352277f..0602b57f54 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -124,11 +124,7 @@ overflow-wrap: break-word; background-color: inherit; box-sizing: border-box; - - &:not(.@{prefix}-date-range-picker__panel th), - &:not(.@{prefix}-date-range-picker__panel td) { - text-align: center; - } + text-align: left; // set line-height to 1 to avoid the height of the cell is not equal to the height of the content, childNode should set line-height self &:has(> *) { @@ -1056,6 +1052,7 @@ .@{prefix}-table:not(.@{prefix}-table--row-edit) { .@{prefix}-table__cell--editable { min-height: 22px; + line-height: @table-line-height; cursor: pointer; .t-icon { From 60c43a48694a4b038437fdb9a7cab915f564a9ae Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 7 Dec 2022 14:18:26 +0800 Subject: [PATCH 106/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20inputAdornm?= =?UTF-8?q?ent=20=E6=A0=B7=E5=BC=8F=20(#1075)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复 inputAdornment 样式 * fix: 修复 inputAdornment 样式 --- .../components/input-adornment/_index.less | 66 ++++++++++++++----- .../components/input-adornment/_mixin.less | 38 ----------- .../web/components/input-adornment/_var.less | 3 +- style/web/components/input/_var.less | 2 +- style/web/components/select-input/_index.less | 1 + 5 files changed, 53 insertions(+), 57 deletions(-) diff --git a/style/web/components/input-adornment/_index.less b/style/web/components/input-adornment/_index.less index 559ae12b39..fb8f22549a 100644 --- a/style/web/components/input-adornment/_index.less +++ b/style/web/components/input-adornment/_index.less @@ -4,8 +4,6 @@ @import "./_var.less"; -@import "./_mixin.less"; - @import "../../mixins/_reset.less"; .@{prefix}-input-adornment { @@ -13,28 +11,64 @@ display: flex; - .input-adornment-item(prepend); - .input-adornment-item(append); + &__prepend, + &__append { + .@{prefix}-input, + .@{prefix}-textarea__inner { + background-color: transparent; + } + } - &--prepend { + &__prepend { + background-color: @bg-color-secondarycontainer; + color: @text-color-primary; + word-break: keep-all; + margin-right: -1px; + } - & .@{prefix}-input, - & .@{prefix}-textarea__inner { - border-radius: 0 @input-border-radius @input-border-radius 0; - } + &__append { + background-color: @bg-color-secondarycontainer; + color: @text-color-primary; + word-break: keep-all; + margin-left: -1px; } - &--append { + &__text { + display: inline-flex; + height: 100%; + align-items: center; + box-sizing: border-box; + padding: @input-adornment-item-padding; + border: 1px solid @input-adornment-border-color-default; + } - & .@{prefix}-input, - & .@{prefix}-textarea__inner { - border-radius: @input-border-radius 0 0 @input-border-radius; + // 调整首位元素修改圆角 + > :first-child { + .@{prefix}-input, + .@{prefix}-input-adornment__text, + .@{prefix}-textarea__inner { + border-radius: @border-radius-default 0 0 @border-radius-default; } } - &--prepend&--append { - & .@{prefix}-input, - & .@{prefix}-textarea__inner { + // // 调整末尾元素修改圆角 + > :last-child { + .@{prefix}-input, + .@{prefix}-input-adornment__text, + .@{prefix}-textarea__inner { + border-radius: 0 @border-radius-default @border-radius-default 0; + } + } + + // 调整非末尾元素层级 + > :not(:last-child):hover { + z-index: 2; + } + + // 调整非首尾元素圆角 + > :not(:first-child):not(:last-child) { + .@{prefix}-input, + .@{prefix}-textarea__inner { border-radius: 0; } } diff --git a/style/web/components/input-adornment/_mixin.less b/style/web/components/input-adornment/_mixin.less index 2a42660f97..e69de29bb2 100644 --- a/style/web/components/input-adornment/_mixin.less +++ b/style/web/components/input-adornment/_mixin.less @@ -1,38 +0,0 @@ -.input-adornment-item(@position) { - .@{prefix}-input-adornment__@{position} { - background-color: @bg-color-secondarycontainer; - color: @input-text-color-default; - display: inline-flex; - align-items: center; - justify-content: center; - border: 1px solid @input-border-color-default; - padding: @input-adornment-item-padding; - word-break: keep-all; - - & when (@position = append) { - border-left: 0; - border-radius: 0 @input-border-radius @input-border-radius 0; - } - & when (@position = prepend) { - border-right: 0; - border-radius: @input-border-radius 0 0 @input-border-radius; - } - - .@{prefix}-input__wrap, - .@{prefix}-select__wrap { - height: 100%; - } - - .@{prefix}-select__wrap { - width: auto; - margin: 0 calc(0px - @comp-margin-m); - } - - .@{prefix}-input, - .@{prefix}-select { - height: 100%; - line-height: 100%; - background-color: transparent; - } - } -} diff --git a/style/web/components/input-adornment/_var.less b/style/web/components/input-adornment/_var.less index 60034a240c..c0639572ce 100644 --- a/style/web/components/input-adornment/_var.less +++ b/style/web/components/input-adornment/_var.less @@ -13,6 +13,5 @@ @import "../../_variables.less"; -@import "../input/_var.less"; - @input-adornment-item-padding: 0 @comp-paddingLR-s; +@input-adornment-border-color-default: @border-level-2-color; diff --git a/style/web/components/input/_var.less b/style/web/components/input/_var.less index efe06adadb..4cc5a8e8e9 100644 --- a/style/web/components/input/_var.less +++ b/style/web/components/input/_var.less @@ -85,7 +85,7 @@ @input-box-shadow-focus: 0 0 0 2px @input-box-shadow-color-default-focus; // 动画 -@input-inner-transition: all @anim-time-fn-easing @anim-duration-base; +@input-inner-transition: border @anim-time-fn-easing @anim-duration-base, box-shadow @anim-time-fn-easing @anim-duration-base; // 交互 @input-cursor-readonly: pointer; diff --git a/style/web/components/select-input/_index.less b/style/web/components/select-input/_index.less index 5041a9fac3..d88fabff0f 100644 --- a/style/web/components/select-input/_index.less +++ b/style/web/components/select-input/_index.less @@ -9,6 +9,7 @@ width: 100%; display: inline-block; + vertical-align: middle; } /** 宽度自适应场景，多选，预留图标的位置 */ From d6bdd01267819fe31294ca3aea54f57579ab2685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= Date: Thu, 8 Dec 2022 11:03:11 +0800 Subject: [PATCH 107/312] fix: submenu disabled color (#1062) --- style/web/components/menu/_index-v2.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index 30b5ebf050..ea101652d7 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -862,6 +862,10 @@ a.@{prefix}-menu__item { margin-left: 0; } + &.@{prefix}-is-disabled { + color: @menu-item-disabled-color; + } + &.@{prefix}-is-active { color: @menu-popup-item-active-color; background-color: @menu-popup-item-active-bg; @@ -881,6 +885,10 @@ a.@{prefix}-menu__item { --ripple-color: @menu-item-animation-bg--dark; + &.@{prefix}-is-disabled { + color: @menu-item-disabled-color-dark; + } + &.@{prefix}-is-active { color: @menu-item-active-color--dark; background-color: @menu-item-active-bg--dark; From 5da7c9c96de84a14f43e541e7d8d89a004620cd0 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 8 Dec 2022 14:41:59 +0800 Subject: [PATCH 108/312] feat: dropdown over max height (#1076) --- style/web/components/dropdown/_index.less | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less index 329bbf5b96..4f9d152ff1 100644 --- a/style/web/components/dropdown/_index.less +++ b/style/web/components/dropdown/_index.less @@ -56,6 +56,19 @@ margin: 0 @comp-margin-s 0 0; } } + + &--overflow { + // 处理菜单超过最大高度时无法选择二级菜单的问题 + .@{prefix}-dropdown__submenu { + &--right { + left: calc(100% - 14px); + } + + &--left { + right: calc(100% - 14px); + } + } + } } &__submenu { From 6e5672a019fd4a84fa986e6743e18f0a38c26690 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Thu, 8 Dec 2022 14:42:21 +0800 Subject: [PATCH 109/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dpagination=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1077)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/pagination/_index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index fbab0852a7..c918cb7e02 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -190,6 +190,10 @@ height: @pagination-jump-inner-height; color: @text-color-secondary; background-color: transparent; + + .@{prefix}-input-adornment__text { + border: none; + } } .@{prefix}-input-number { From cf355d3c64955b036544a23d924732f840b28fc6 Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 8 Dec 2022 15:30:05 +0800 Subject: [PATCH 110/312] Refact/menu (#1073) * feat: menu token fix * feat: menu UI refactor * fix: sub menu in dark * fix: collapsed side menu in dark mod * fix: spelling mistake Co-authored-by: sunzhe --- style/web/components/menu/_index.less | 304 +++++++++++--------------- style/web/components/menu/_var.less | 63 +++--- 2 files changed, 159 insertions(+), 208 deletions(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 6da4c3845e..3cf6ad2aed 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -33,7 +33,7 @@ a.@{prefix}-menu__item { height: @comp-size-xxxl; li + li { - margin-left: @comp-margin-xs; + margin-left: @comp-margin-s; } .@{prefix}-menu { @@ -68,10 +68,10 @@ a.@{prefix}-menu__item { } &-icon { - width: 40px; - height: 40px; + width: @head-menu-item-height; + height: @head-menu-item-height; padding: @comp-paddingTB-s @comp-paddingLR-s; - line-height: 40px; + line-height: @head-menu-item-height; box-sizing: border-box; } } @@ -93,82 +93,54 @@ a.@{prefix}-menu__item { } .@{prefix}-menu__item { - min-width: @head-menu-item-width; height: @head-menu-item-height; line-height: @head-menu-item-height; + padding: 0 @comp-paddingLR-l; justify-content: center; transition: all @anim-duration-slow cubic-bezier(.645, .045, .355, 1); } &__submenu { border-top: 1px solid @head-menu-submenu-border-color; - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: #fff; - - &__bar { - background-color: @submenu-dark-item-active-color; - } - - &__nav-item { - color: @font-gray-2; - - &-wrapper { - --ripple-color: @menu-item-animation-bg--light; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-light-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - } - - --ripple-color: @menu-item-animation-bg--light; - } - } + padding-left: 0; } .@{prefix}-menu__popup { - top: 60px; + top: calc(@head-menu-item-height + 12px); min-width: 100%; box-sizing: content-box; transform-origin: center top; + border: solid .5px @menu-border-color; .@{prefix}-menu__item { display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; - padding-left: @comp-paddingLR-l; - padding-right: @comp-paddingLR-l; + padding-left: @comp-paddingLR-s; + padding-right: @comp-paddingLR-s; min-width: 100%; margin-left: 0; color: @head-menu-popup-item-color; box-sizing: border-box; + + &.@{prefix}-is-active { + color: @menu-light-active-color; + + .t-icon { + color: @menu-light-active-color; + } + } } li + li { - margin-top: 4px; + margin-top: @comp-margin-xxs; margin-left: 0; } } - .@{prefix}-submenu-icon { - // to remove - margin-left: @comp-margin-s; - } - .@{prefix}-fake-arrow { - margin-left: @comp-margin-s; + margin-left: @comp-margin-m; } // 多层情况 @@ -202,56 +174,8 @@ a.@{prefix}-menu__item { transition: width @anim-duration-slow cubic-bezier(.645, .045, .355, 1); white-space: nowrap; - &.@{prefix}-menu--dark { - background: @menu-theme-dark; - - .@{prefix}-menu__logo:not(:empty) { - border-bottom-color: @menu-border-color--dark; - } - - .@{prefix}-menu__operations:not(:empty) { - border-top-color: @menu-border-color--dark; - } - - .@{prefix}-menu__item { - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { - background-color: @menu-border-color--dark; - } - - &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - background-color: @default-menu-active-color; - } - - &.@{prefix}-is-opened { - color: @menu-theme-light; - } - - &.@{prefix}-is-opened.@{prefix}-is-active { - background-color: transparent; - } - } - - .@{prefix}-menu__popup { - background: @menu-theme-dark; - - .@{prefix}-menu__item { - &.@{prefix}-is-active { - background-color: @default-menu-active-color; - } - } - } - - .@{prefix}-menu__popup { - background: @menu-theme-dark; - } - - .@{prefix}-menu-group__title { - color: @menu-menu-group-title-color--dark; - } - - &.@{prefix}-is-collapsed .@{prefix}-menu-group__title:after { - background-color: @menu-group-title-bg--collapse--dark; - } + .@{prefix}-menu__item { + color: @default-menu-item-color--light; } &.@{prefix}-is-collapsed { @@ -272,11 +196,11 @@ a.@{prefix}-menu__item { text-overflow: initial; &.@{prefix}-is-active.@{prefix}-is-opened { - color: @menu-theme-light; - background-color: @default-menu-active-color; + color: @default-menu-active-color; + background-color: @menu-item-active-bg--light; .t-icon { - color: @menu-theme-light; + color: @default-menu-active-color; } } @@ -295,7 +219,8 @@ a.@{prefix}-menu__item { .@{prefix}-menu__popup { .@{prefix}-menu__item { - padding-left: @popup-item-padding-left; + padding-left: @comp-paddingLR-s; + padding-right: @comp-paddingLR-s; justify-content: flex-start; span { @@ -371,7 +296,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__logo:not(:empty) { width: 100%; - height: var(--td-comp-size-xxxl); + height: calc(@menu-logo-height - 1px); border-bottom: 1px solid @menu-border-color; } @@ -389,8 +314,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu-group { &__title { position: relative; - padding: 20px 16px 8px; - height: 48px; + padding: @comp-paddingTB-l @comp-paddingLR-l @comp-paddingTB-xs @comp-paddingLR-l; color: @menu-menu-group-title-color; font: @menu-extra-font-size; box-sizing: border-box; @@ -428,32 +352,15 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { &.@{prefix}-is-opened { margin: @comp-margin-xs 0; - color: @menu-light-active-color; + color: @menu-color-light; background-color: unset; .t-icon { - color: @menu-light-active-color; + color: @menu-color-light; } } } - .@{prefix}-menu__dropdown { - // display: none; - // position: static; - overflow: hidden; - transition: max-height @anim-duration-slow - cubic-bezier(.645, .045, .355, 1); - // height: 0; - - .@{prefix}-menu__item { - padding-left: 64px; - } - - &--show { - display: block; - } - } - .@{prefix}-menu__sub { padding: 0; max-height: 0; @@ -469,11 +376,6 @@ a.@{prefix}-menu__item { } } - .@{prefix}-menu__popup { - top: 0; - left: calc(100% + 16px); - } - .@{prefix}-menu__item { position: relative; margin: @comp-margin-xs 0; @@ -506,19 +408,99 @@ a.@{prefix}-menu__item { } &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - color: @menu-theme-light; - background-color: @default-menu-active-color; + color: @default-menu-active-color; + background-color: @menu-item-active-bg--light; .t-icon { - color: @menu-theme-light; + color: @default-menu-active-color; } } &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { background: @menu-light-active-bg; + } + } - & + .@{prefix}-menu__item { - margin-top: @comp-margin-xs; + .@{prefix}-menu__popup { + top: 0; + left: calc(100% + @pop-padding-m); + + .@{prefix}-menu__item, .@{prefix}-submenu { + margin: @comp-margin-xxs 0 0 0; + + &:first-child { + margin-top: 0; + } + } + } + + &.@{prefix}-menu--dark { + background: @menu-theme-dark; + + .@{prefix}-menu__item { + color: @default-menu-item-color--dark; + } + + .@{prefix}-menu__logo:not(:empty) { + border-bottom-color: @menu-border-color--dark; + } + + .@{prefix}-menu__operations:not(:empty) { + border-top-color: @menu-border-color--dark; + } + + .@{prefix}-menu__item { + &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { + background-color: @menu-border-color--dark; + } + + &.@{prefix}-is-active:not(.@{prefix}-is-opened) { + color: @menu-item-active-color--dark; + background-color: @default-menu-active-color--dark; + + .t-icon { + color: @menu-item-active-color--dark; + } + } + + &.@{prefix}-is-opened.@{prefix}-is-active { + background-color: transparent; + } + } + + .@{prefix}-menu__popup { + background: @menu-theme-dark; + + .@{prefix}-menu__item { + &.@{prefix}-is-active { + background-color: @default-menu-active-color--dark; + } + } + } + + .@{prefix}-menu__popup { + background: @menu-theme-dark; + } + + .@{prefix}-menu-group__title { + color: @menu-menu-group-title-color--dark; + } + + &.@{prefix}-is-collapsed { + .@{prefix}-menu-group__title:after { + background-color: @menu-group-title-bg--collapse--dark; + } + + .@{prefix}-menu__item { + + &.@{prefix}-is-active.@{prefix}-is-opened { + background-color: @default-menu-active-color--dark; + color: @menu-item-active-color--dark; + + .t-icon { + color: @menu-item-active-color--dark; + } + } } } } @@ -654,7 +636,6 @@ a.@{prefix}-menu__item { } &.@{prefix}-is-opened { - font-weight: 500; color: @menu-item-active-color--light; } @@ -687,6 +668,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__popup { background-color: @menu-theme-dark; + border: solid .5px @menu-border-color--dark; } } @@ -711,7 +693,6 @@ a.@{prefix}-menu__item { } &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - color: @menu-item-hover-color--dark; background-color: @menu-item-hover-bg--dark; } @@ -731,7 +712,6 @@ a.@{prefix}-menu__item { } &:hover:not(.@{prefix}-is-active) { - color: @menu-item-hover-color--dark; background-color: @menu-item-hover-bg--dark; } } @@ -750,35 +730,6 @@ a.@{prefix}-menu__item { } } } - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: @gray-color-11; - - &__nav-item { - color: #fff; - - &-wrapper { - --ripple-color: @gray-color-9; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-dark-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-dark-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - --ripple-color: @gray-color-9; - } - } } &__popup { @@ -794,8 +745,13 @@ a.@{prefix}-menu__item { opacity: 0; .list-style-none(); + // 超过 2 级的弹出菜单，不需要动画 + .@{prefix}-menu__popup { + transition: none; + } + &-wrapper { - padding: @comp-paddingLR-s; + padding: @pop-padding-m; height: 100%; list-style: none; margin: 0; @@ -810,13 +766,12 @@ a.@{prefix}-menu__item { width: 0; &.@{prefix}-is-opened { - width: var(--popup-width, 216px); + width: var(--popup-width, 160px); } .@{prefix}-menu__item { padding-left: @comp-paddingLR-l; padding-right: @comp-paddingLR-l; - margin: 4px 0; } } @@ -839,8 +794,8 @@ a.@{prefix}-menu__item { overflow: visible; .@{prefix}-menu__popup { - top: 0; - left: calc(100% + @horizontal-spacer); + top: calc(0px - @pop-padding-m); + left: 100%; &::before { content: ""; @@ -857,16 +812,13 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { color: @menu-popup-item-color; + height: @comp-size-s; + line-height: @comp-size-s; + .@{prefix}-menu__item { margin-left: 0; } - &.@{prefix}-is-active { - color: @menu-popup-item-active-color; - background-color: @menu-popup-item-active-bg; - } - &:hover:not(.@{prefix}-is-active) { background-color: @menu-popup-item-hover-bg; } diff --git a/style/web/components/menu/_var.less b/style/web/components/menu/_var.less index fbfa0df530..c72e785259 100644 --- a/style/web/components/menu/_var.less +++ b/style/web/components/menu/_var.less @@ -14,78 +14,77 @@ @import "../../_variables.less"; // 颜色 -@menu-theme-light: #fff; +// Menu 浅色模式下跟随全局变化，需要使用语义化 token；暗色模式独立存在，使用底层颜色 token +@menu-theme-light: @bg-color-container; @menu-theme-dark: @gray-color-13; @menu-theme-primary: @brand-color; -@menu-color-light: @font-gray-2; +@menu-color-light: @text-color-primary; @menu-color-dark: @font-white-2; -@menu-item-color--light: @font-gray-2; -@menu-item-color--dark: rgba(255, 255, 255, .55); -@menu-item-active-bg--light: @gray-color-2; -@menu-item-active-bg--dark: @gray-color-9; -@menu-item-active-color--light: @font-gray-1; +@menu-item-color--light: @text-color-primary; +@menu-item-color--dark: @text-color-anti; +@menu-item-active-bg--light: @brand-color-light; +@menu-item-active-bg--dark: @brand-color; +@menu-item-active-color--light: @brand-color-active; @menu-item-active-color--dark: @text-color-anti; -@menu-item-hover-color--light: @font-gray-2; -@menu-item-hover-color--dark: rgba(255, 255, 255, .55); -@menu-item-hover-bg--light: @gray-color-1; +@menu-item-hover-color--light: @text-color-primary; +@menu-item-hover-bg--light: @bg-color-container-hover; @menu-item-hover-bg--dark: @gray-color-10; -@menu-item-animation-bg--light: @gray-color-3; +@menu-item-animation-bg--light: @bg-color-container-active; @menu-item-animation-bg--dark: @gray-color-11; -@menu-item-disabled-color: @font-gray-4; +@menu-item-disabled-color: @text-color-disabled; @menu-item-disabled-color-dark: @font-white-4; -@menu-menu-group-title-color: @font-gray-3; +@menu-menu-group-title-color: @text-color-placeholder; @menu-menu-group-title-color--dark: @font-white-3; -@menu-group-title-bg--collapse: @gray-color-3; +@menu-group-title-bg--collapse: @component-stroke; @menu-group-title-bg--collapse--dark: @gray-color-10; -@menu-light-active-color: @font-gray-1; +@menu-light-active-color: @brand-color-active; @menu-dark-active-color: @text-color-anti; -@menu-light-active-bg: @gray-color-2; -@menu-light-hover-bg: @gray-color-1; +@menu-light-active-bg: @bg-color-secondarycontainer-hover; +@menu-light-hover-bg: @bg-color-container-hover; @menu-dark-active-bg: @gray-color-9; @menu-dark-hover-bg: @gray-color-10; -@submenu-item-color: @font-gray-2; +@submenu-item-color: @text-color-primary; @submenu-item-active-color: @brand-color; @submenu-dark-item-active-color: #4582e6; @menu-border-color: @component-stroke; @menu-border-color--dark: @gray-color-10; -@menu-popup-bg-color: #fff; -@menu-popup-item-color: @font-gray-1; -@menu-popup-item-hover-bg: @gray-color-1; +@menu-popup-item-color: @text-color-primary; +@menu-popup-item-hover-bg: @bg-color-container-hover; @menu-popup-item-active-color: @brand-color; -@menu-popup-item-active-bg: #ecf2fe; -@head-menu-popup-item-color: @font-gray-2; -@head-menu-popup-item-active-color: @font-gray-1; -@head-menu-popup-item-active-bg: @gray-color-2; +@head-menu-popup-item-color: @text-color-primary; +@head-menu-popup-item-active-color: @text-color-primary; -@menu-head-item-color: @font-gray-2; +@menu-head-item-color: @text-color-primary; -@menu-operations-color: @font-gray-1; +@menu-operations-color: @text-color-primary; // head menu -@head-menu-item-width: 104px; -@head-menu-item-height: 40px; -@head-menu-submenu-border-color: @gray-color-3; +@head-menu-item-height: @comp-size-m; +@head-menu-submenu-border-color: @component-stroke; // default menu @default-menu-width: 232px; @default-menu-collapse-width: 64px; @default-menu-active-color: @brand-color; -@default-menu-item-height: 36px; +@default-menu-active-color--dark: @brand-color; +@default-menu-item-height: @comp-size-l; +@default-menu-item-color--light: @text-color-secondary; +@default-menu-item-color--dark: @font-white-2; // popup @popup-item-padding-left: @comp-paddingLR-l; // 高度 @menu-height-default: 32px; // low -@menu-height-high: 40px; +@menu-logo-height: @comp-size-xxxl; // z-index @menu-outer-zindex: 1000; From d870a7ad98d3513261ddd9d12b5d2df77dd8eaa3 Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 8 Dec 2022 22:02:47 +0800 Subject: [PATCH 111/312] fix: less vars error (#1078) --- style/web/components/menu/_index-v2.less | 2 +- style/web/components/menu/_var-v2.less | 107 +++++++++++++++++++++++ 2 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 style/web/components/menu/_var-v2.less diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index ea101652d7..c868f6d4b5 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -2,7 +2,7 @@ @import "../../base.less"; -@import "./_var.less"; +@import "./_var-v2.less"; @import "./_mixin.less"; diff --git a/style/web/components/menu/_var-v2.less b/style/web/components/menu/_var-v2.less new file mode 100644 index 0000000000..62a94b68e0 --- /dev/null +++ b/style/web/components/menu/_var-v2.less @@ -0,0 +1,107 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[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"; + +// 颜色 +@menu-theme-light: #fff; +@menu-theme-dark: @gray-color-13; +@menu-theme-primary: @brand-color; +@menu-color-light: @font-gray-2; +@menu-color-dark: @font-white-2; + +@menu-item-color--light: @font-gray-2; +@menu-item-color--dark: rgba(255, 255, 255, .55); +@menu-item-active-bg--light: @gray-color-2; +@menu-item-active-bg--dark: @gray-color-9; +@menu-item-active-color--light: @font-gray-1; +@menu-item-active-color--dark: @text-color-anti; +@menu-item-hover-color--light: @font-gray-2; +@menu-item-hover-color--dark: rgba(255, 255, 255, .55); +@menu-item-hover-bg--light: @gray-color-1; +@menu-item-hover-bg--dark: @gray-color-10; +@menu-item-animation-bg--light: @gray-color-3; +@menu-item-animation-bg--dark: @gray-color-11; + +@menu-item-disabled-color: @font-gray-4; +@menu-item-disabled-color-dark: @font-white-4; + +@menu-menu-group-title-color: @font-gray-3; +@menu-menu-group-title-color--dark: @font-white-3; +@menu-group-title-bg--collapse: @gray-color-3; +@menu-group-title-bg--collapse--dark: @gray-color-10; + +@menu-light-active-color: @font-gray-1; +@menu-dark-active-color: @text-color-anti; + +@menu-light-active-bg: @gray-color-2; +@menu-light-hover-bg: @gray-color-1; +@menu-dark-active-bg: @gray-color-9; +@menu-dark-hover-bg: @gray-color-10; + +@submenu-item-color: @font-gray-2; +@submenu-item-active-color: @brand-color; +@submenu-dark-item-active-color: #4582e6; + +@menu-border-color: @component-stroke; +@menu-border-color--dark: @gray-color-10; + +@menu-popup-bg-color: #fff; +@menu-popup-item-color: @font-gray-1; +@menu-popup-item-hover-bg: @gray-color-1; +@menu-popup-item-active-color: @brand-color; +@menu-popup-item-active-bg: #ecf2fe; +@head-menu-popup-item-color: @font-gray-2; +@head-menu-popup-item-active-color: @font-gray-1; +@head-menu-popup-item-active-bg: @gray-color-2; + +@menu-head-item-color: @font-gray-2; + +@menu-operations-color: @font-gray-1; + +// head menu +@head-menu-item-width: 104px; +@head-menu-item-height: 40px; +@head-menu-submenu-border-color: @gray-color-3; + +// default menu +@default-menu-width: 232px; +@default-menu-collapse-width: 64px; +@default-menu-active-color: @brand-color; +@default-menu-item-height: 36px; + +// popup +@popup-item-padding-left: @comp-paddingTB-l @comp-paddingLR-l; + +// 高度 +@menu-height-default: 32px; // low +@menu-height-high: 40px; + +// z-index +@menu-outer-zindex: 1000; + +// 字号 +@menu-font-size: @font-body-medium; +@menu-extra-font-size: @font-body-small; + +// box-shadow +@menu-head-shadow: 0 8px 10px -5px rgba(0, 0, 0, .08), + 0 16px 24px 2px rgba(0, 0, 0, .04), 0 6px 30px 5px rgba(0, 0, 0, .05); +@menu-head-submenu-shadow: inset 0 -1px 0 0 #eee; +@menu-default-shadow: 0 5px 5px -3px rgba(0, 0, 0, .1), + 0 8px 10px 1px rgba(0, 0, 0, .06), 0 3px 14px 6px rgba(0, 0, 0, .05); + +// transition +@fade-linear-transition: opacity 200ms linear; +@md-fade-transition: transform 300ms cubic-bezier(.23, 1, .32, 1), + opacity 300ms cubic-bezier(.23, 1, .32, 1); From f13b6402dba06d6d4153770b971124bec32fa3a9 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sat, 10 Dec 2022 13:55:44 +0800 Subject: [PATCH 112/312] fix(web): table border style (#1079) --- style/web/components/table/_index.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 0602b57f54..50c8fc3329 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -125,11 +125,6 @@ background-color: inherit; box-sizing: border-box; text-align: left; - - // set line-height to 1 to avoid the height of the cell is not equal to the height of the content, childNode should set line-height self - &:has(> *) { - line-height: 1; - } } th.@{prefix}-table__th-drag { @@ -1142,3 +1137,10 @@ .@{prefix}-table__ellipsis-content.@{prefix}-size-s .@{prefix}-popup__content { font: @table-font; } + +/** Chrome 兼容问题处理 */ +.@{prefix}-table--chrome.@{prefix}-table--multiple-header { + .@{prefix}-table__affixed-header-elm { + margin-top: 1px; + } +} From 2816193f3b31f6b58464f059c8fa2476d7951323 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 12 Dec 2022 19:02:53 +0800 Subject: [PATCH 113/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DinputAdornment?= =?UTF-8?q?=20=E5=9C=86=E8=A7=92=E9=97=AE=E9=A2=98=20(#1080)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/input-adornment/_index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/web/components/input-adornment/_index.less b/style/web/components/input-adornment/_index.less index fb8f22549a..8e9c799b3e 100644 --- a/style/web/components/input-adornment/_index.less +++ b/style/web/components/input-adornment/_index.less @@ -44,6 +44,8 @@ // 调整首位元素修改圆角 > :first-child { + border-radius: @border-radius-default 0 0 @border-radius-default; + .@{prefix}-input, .@{prefix}-input-adornment__text, .@{prefix}-textarea__inner { @@ -53,6 +55,8 @@ // // 调整末尾元素修改圆角 > :last-child { + border-radius: 0 @border-radius-default @border-radius-default 0; + .@{prefix}-input, .@{prefix}-input-adornment__text, .@{prefix}-textarea__inner { From 147f3e1ef0c120862109006347a2c081f122b086 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 12 Dec 2022 23:19:02 +0800 Subject: [PATCH 114/312] feat(web): select-input, multiple, empty, padding-right (#1082) Co-authored-by: sheepluo --- style/web/components/select-input/_index.less | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/style/web/components/select-input/_index.less b/style/web/components/select-input/_index.less index d88fabff0f..5d63d4ac97 100644 --- a/style/web/components/select-input/_index.less +++ b/style/web/components/select-input/_index.less @@ -12,14 +12,24 @@ vertical-align: middle; } -/** 宽度自适应场景，多选，预留图标的位置 */ +/** 宽度自适应场景，多选，预留图标的位置。带标签和不带标签的布局不同，故而间距不同 */ .@{prefix}-select-input--multiple { .@{prefix}-input--auto-width.@{prefix}-tag-input__with-suffix-icon { - .@{prefix}-input { - padding-right: @comp-paddingLR-xl; + &.@{prefix}-tag-input--with-tag { + .@{prefix}-input { + padding-right: @comp-paddingLR-xl; + } + .@{prefix}-input.@{prefix}-size-l { + padding-right: calc(@comp-paddingLR-xl + @comp-paddingLR-s); + } } - .@{prefix}-input.@{prefix}-size-l { - padding-right: calc(@comp-paddingLR-xl + @comp-paddingLR-s); + &.@{prefix}-is-empty { + .@{prefix}-input { + padding-right: @comp-paddingLR-s; + } + .@{prefix}-input.@{prefix}-size-l { + padding-right: @comp-paddingLR-m; + } } } } From 5180f5bd4fff9edc12a10c877b144e35e58330c7 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 12 Dec 2022 23:19:43 +0800 Subject: [PATCH 115/312] feat(web): guide different language (#1081) Co-authored-by: sheepluo --- js/global-config/locale/en_US.ts | 18 ++++++++++++++++++ js/global-config/locale/ja_JP.ts | 18 ++++++++++++++++++ js/global-config/locale/ko_KR.ts | 18 ++++++++++++++++++ js/global-config/locale/zh_CN.ts | 18 ++++++++++++++++++ 4 files changed, 72 insertions(+) diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index e5a57b0309..e2b5a09c96 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -178,4 +178,22 @@ export default { recentColorTitle: 'Recently Used', clearConfirmText: 'Clear recently used colors?', }, + guide: { + finishButtonProps: { + content: 'Finish', + theme: 'primary,' + }, + nextButtonProps: { + content: 'Next Step', + theme: 'primary,' + }, + skipButtonProps: { + content: 'Skip', + theme: 'default,' + }, + prevButtonProps: { + content: 'Last Step', + theme: 'default,' + }, + }, }; diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 4b4f89b41a..901fcbfa66 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -178,4 +178,22 @@ export default { recentColorTitle: '最近使用した色', clearConfirmText: '最近使用した色をクリアにするのは確実ですか？', }, + guide: { + finishButtonProps: { + content: '終了', + theme: 'primary,' + }, + nextButtonProps: { + content: '次のステップ', + theme: 'primary,' + }, + skipButtonProps: { + content: 'スキップ', + theme: 'default,' + }, + prevButtonProps: { + content: '前へ', + theme: 'default,' + }, + }, }; diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index 356eb5b116..ca6e0c605a 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -178,4 +178,22 @@ export default { recentColorTitle: '최근 사용한 색상', clearConfirmText: '최근에 사용한 색상을 지우시겠습니까?', }, + guide: { + finishButtonProps: { + content: '완료', + theme: 'primary,' + }, + nextButtonProps: { + content: '다음 단계', + theme: 'primary,' + }, + skipButtonProps: { + content: '건너뛰기', + theme: 'default,' + }, + prevButtonProps: { + content: '마지막 단계', + theme: 'default,' + }, + }, }; diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index 5ed05b41aa..3c7cfe0a2c 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -179,4 +179,22 @@ export default { recentColorTitle: '最近使用颜色', clearConfirmText: '确定清空最近使用的颜色吗？', }, + guide: { + finishButtonProps: { + content: '完成', + theme: 'primary,' + }, + nextButtonProps: { + content: '下一步', + theme: 'primary,' + }, + skipButtonProps: { + content: '跳过', + theme: 'default,' + }, + prevButtonProps: { + content: '上一步', + theme: 'default,' + }, + }, }; From fa261d62b1cb4b08266c9cbeadc80b6377157c3b Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 13 Dec 2022 14:46:59 +0800 Subject: [PATCH 116/312] =?UTF-8?q?feat:=20=E6=8A=BD=E7=A6=BB=E5=85=AC?= =?UTF-8?q?=E5=85=B1=E9=80=BB=E8=BE=91=20(#1083)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/date-picker/format.ts | 44 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 8223d4a12a..cfd498e938 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -234,3 +234,47 @@ export function getDefaultFormat({ log.error('DatePicker', `Invalid mode: ${mode}`); return {}; } + +// 初始化面板年份月份 +export function initYearMonthTime({ + value, + mode = 'date', + format, + timeFormat = 'HH:mm:ss', + enableTimePicker, +}: { + value: Array; + mode: string; + format: string; + timeFormat?: string; + enableTimePicker?: boolean; +}) { + const defaultYearMonthTime = { + year: [dayjs().year(), dayjs().year()], + month: [dayjs().month(), dayjs().month()], + time: [dayjs().format(timeFormat), dayjs().format(timeFormat)], + }; + if (mode === 'year') { + defaultYearMonthTime.year[1] += 10; + } else if (mode === 'month' || mode === 'quarter') { + defaultYearMonthTime.year[1] += 1; + } else if ((mode === 'date' || mode === 'week') && !enableTimePicker) { + // 切换至下一年 + if (defaultYearMonthTime.month[0] === 11) { + defaultYearMonthTime.year[1] += 1; + defaultYearMonthTime.month[1] = 0; + } else { + defaultYearMonthTime.month[1] += 1; + } + } + + if (!value || !Array.isArray(value) || !value.length) { + return defaultYearMonthTime; + } + + return { + year: value.map((v) => parseToDayjs(v, format).year()), + month: value.map((v) => parseToDayjs(v, format).month()), + time: value.map((v) => parseToDayjs(v, format).format(timeFormat)), + }; +} From c40866aaf0c84fb50f1914970578f84174c8d3d6 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 13 Dec 2022 15:45:14 +0800 Subject: [PATCH 117/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddatepicker=20t?= =?UTF-8?q?ips=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1084)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/range-input/_mixin.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/style/web/components/range-input/_mixin.less b/style/web/components/range-input/_mixin.less index d3e3e8d24b..ec6d4d5110 100644 --- a/style/web/components/range-input/_mixin.less +++ b/style/web/components/range-input/_mixin.less @@ -11,7 +11,7 @@ transition: @range-input-inner-transition; display: inline-flex; flex-direction: column; - overflow: hidden; + gap: @spacer-s; &:hover { border-color: @range-input-border-color-default-hover; @@ -64,6 +64,12 @@ color: @@fontColor; @fontColor: "range-input-extra-color-@{status}"; } + + & > .@{prefix}-range-input__tips { + color: @@fontColor; + font-size: @font-size-s; + @fontColor: "range-input-extra-color-@{status}"; + } } } From ba68502394eaf1b68bf965ce4311cf170e4afce1 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 14 Dec 2022 14:29:31 +0800 Subject: [PATCH 118/312] =?UTF-8?q?fix:=20datepicker=20=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E7=A9=BA=E5=AD=97=E7=AC=A6=E4=B8=B2=20(#1086)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/date-picker/format.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index cfd498e938..06560bb1ce 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -145,9 +145,13 @@ function formatSingle({ // 检测日期是否合法 export function isValidDate(value: DateValue | DateValue[], format: string) { if (Array.isArray(value)) { - return value.every((v) => dayjs(v, format).isValid() || dayjs(v).isValid()); + return value.every((v) => { + if (v === '') return true; + return dayjs(v, format).isValid() || dayjs(v).isValid(); + }); } + if (value === '') return true; return dayjs(value, format).isValid() || dayjs(value).isValid(); } From 67b722c9ae1e7dff4e0a24ba69a969850afcc803 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 14 Dec 2022 15:54:13 +0800 Subject: [PATCH 119/312] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=20tree-selec?= =?UTF-8?q?t=20=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1087)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/tree-select/_index.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style/web/components/tree-select/_index.less b/style/web/components/tree-select/_index.less index 1656400c58..07cf993f3e 100644 --- a/style/web/components/tree-select/_index.less +++ b/style/web/components/tree-select/_index.less @@ -2,6 +2,8 @@ @import "../../mixins/_reset.less"; +@import "../../mixins/_scrollbar.less"; + .@{prefix}-tree-select { .reset; @@ -43,6 +45,10 @@ // 浮层样式 .@{prefix}-tree-select-popup { .@{prefix}-popup__content { + .scrollbar(8px, 2px); + padding: @pop-padding-m; + max-height: 300px; + overflow-y: auto; } } From 1c6613d1e1eefc365a7a552a81568dab3fa82ee1 Mon Sep 17 00:00:00 2001 From: paopao Date: Wed, 14 Dec 2022 16:58:37 +0800 Subject: [PATCH 120/312] fix: guide global config (#1085) * fix: guide global config * fix: add message default config * fix: global config type --- js/global-config/default-config.ts | 3 ++- js/global-config/locale/en_US.ts | 10 +++++----- js/global-config/locale/ja_JP.ts | 10 +++++----- js/global-config/locale/ko_KR.ts | 10 +++++----- js/global-config/locale/zh_CN.ts | 10 +++++----- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/js/global-config/default-config.ts b/js/global-config/default-config.ts index 3d0b68555a..05961146ce 100644 --- a/js/global-config/default-config.ts +++ b/js/global-config/default-config.ts @@ -26,6 +26,7 @@ export default { success: 'primary', }, }, + message: {}, popconfirm: { confirmBtnTheme: { default: 'primary', @@ -71,4 +72,4 @@ export default { form: { requiredMark: undefined, }, -}; +} as const; diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index e2b5a09c96..0acb61e18f 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -181,19 +181,19 @@ export default { guide: { finishButtonProps: { content: 'Finish', - theme: 'primary,' + theme: 'primary' }, nextButtonProps: { content: 'Next Step', - theme: 'primary,' + theme: 'primary' }, skipButtonProps: { content: 'Skip', - theme: 'default,' + theme: 'default' }, prevButtonProps: { content: 'Last Step', - theme: 'default,' + theme: 'default' }, }, -}; +} as const; diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 901fcbfa66..68c0cc388d 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -181,19 +181,19 @@ export default { guide: { finishButtonProps: { content: '終了', - theme: 'primary,' + theme: 'primary' }, nextButtonProps: { content: '次のステップ', - theme: 'primary,' + theme: 'primary' }, skipButtonProps: { content: 'スキップ', - theme: 'default,' + theme: 'default' }, prevButtonProps: { content: '前へ', - theme: 'default,' + theme: 'default' }, }, -}; +} as const; diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index ca6e0c605a..b536083b10 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -181,19 +181,19 @@ export default { guide: { finishButtonProps: { content: '완료', - theme: 'primary,' + theme: 'primary' }, nextButtonProps: { content: '다음 단계', - theme: 'primary,' + theme: 'primary' }, skipButtonProps: { content: '건너뛰기', - theme: 'default,' + theme: 'default' }, prevButtonProps: { content: '마지막 단계', - theme: 'default,' + theme: 'default' }, }, -}; +} as const; diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index 3c7cfe0a2c..f3567f29e3 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -182,19 +182,19 @@ export default { guide: { finishButtonProps: { content: '完成', - theme: 'primary,' + theme: 'primary' }, nextButtonProps: { content: '下一步', - theme: 'primary,' + theme: 'primary' }, skipButtonProps: { content: '跳过', - theme: 'default,' + theme: 'default' }, prevButtonProps: { content: '上一步', - theme: 'default,' + theme: 'default' }, }, -}; +} as const; From 61615568cd8f104bbdf17ab6b18ea37a6e31abe3 Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 15 Dec 2022 22:44:54 +0800 Subject: [PATCH 121/312] chore: add menu demo style in react (#1090) --- style/web/components/menu/_docs.less | 37 ++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/style/web/components/menu/_docs.less b/style/web/components/menu/_docs.less index 14c8a6202f..6e0fc2beab 100644 --- a/style/web/components/menu/_docs.less +++ b/style/web/components/menu/_docs.less @@ -105,6 +105,43 @@ --bg-color-demo: var(--bg-color-demo-secondary); } +[class*="@{d-prefix}-demo-menu__operations"] { + .t-button { + margin-left: 8px; + } +} + +[class*="@{d-prefix}-demo-menu__operations--dark"] { + .t-button { + margin-left: 8px; + color: #fff; + + --ripple-color: #383838; + + &:hover { + color: #fff; + background-color: #4b4b4b; + border-color: transparent; + } + } +} + +[class*="@{d-prefix}-demo-menu-collapse--dark"] { + .t-button { + color: #fff; + + --ripple-color: #383838 !important; + + &:hover { + color: #fff; + background-color: #4b4b4b; + border-color: transparent; + + --ripple-color: #383838; + } + } +} + :root[theme-mode="dark"] { .tdesign-demo-item--menu { From 4623715dd36ec1f3e13c7baa13dff461e8e490d4 Mon Sep 17 00:00:00 2001 From: azhe Date: Fri, 16 Dec 2022 15:58:38 +0800 Subject: [PATCH 122/312] fix: vue next style (#1088) * fix: vue next style * fix: vue next style --- style/web/components/menu/_index.less | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 3cf6ad2aed..4eb0510c13 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -316,7 +316,7 @@ a.@{prefix}-menu__item { position: relative; padding: @comp-paddingTB-l @comp-paddingLR-l @comp-paddingTB-xs @comp-paddingLR-l; color: @menu-menu-group-title-color; - font: @menu-extra-font-size; + font-size: @menu-extra-font-size; box-sizing: border-box; } } @@ -577,6 +577,14 @@ a.@{prefix}-menu__item { } } + // vue next use + &__popup-wrapper { + box-sizing: border-box; + max-height: var(--popup-max-height, 364px); + overflow-y: scroll; + overflow-x: hidden; + } + &__item { position: relative; display: flex; From a9ab8ad4e56fc70290f3162028ad9e27be209d9f Mon Sep 17 00:00:00 2001 From: thinkhalo <1750367868@qq.com> Date: Fri, 16 Dec 2022 17:26:09 +0800 Subject: [PATCH 123/312] chore(.gitignore): add pnpm-lock.yaml (#1089) --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 88272e0e12..0024b6a2eb 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,8 @@ package-lock.json **/package-lock.json yarn.lock **/yarn.lock +pnpm-lock.yaml +**/pnpm-lock.yaml **/node_modules **/dist dist/ From b81e88fd0c2d50ba4536e82b97dd18551a6d472f Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 21 Dec 2022 17:26:17 +0800 Subject: [PATCH 124/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddialog=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82=20(#1091)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/dialog/_index.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index 7c201058dd..b7f3283b9d 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -19,6 +19,7 @@ width: @dialog-width; background-color: @dialog-bg-color; position: relative; + border: @dialog-border; border-radius: @border-radius-large; // icon theme @@ -183,6 +184,10 @@ // dialog内容溢出需要考虑滚动 pointer-events: auto; outline: none; + top: 0; + left: 0; + width: 100%; + height: 100%; // modeless 点击穿透 即可以操作背景后的元素 &.@{prefix}-dialog__ctx--modeless { @@ -191,10 +196,6 @@ &.@{prefix}-dialog__ctx--fixed { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; z-index: @z-index-dialog; } @@ -288,6 +289,5 @@ .@{prefix}-dialog { pointer-events: auto; z-index: @z-index-dialog; - border: @dialog-border; } } From a16d6596b4b98368f9b64cc97526fff057c32317 Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 22 Dec 2022 18:12:22 +0800 Subject: [PATCH 125/312] fix: submenu style (#1092) --- style/web/components/menu/_index.less | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 4eb0510c13..a9f24a3cf1 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -107,6 +107,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__popup { top: calc(@head-menu-item-height + 12px); + left: 0; min-width: 100%; box-sizing: content-box; transform-origin: center top; @@ -577,14 +578,6 @@ a.@{prefix}-menu__item { } } - // vue next use - &__popup-wrapper { - box-sizing: border-box; - max-height: var(--popup-max-height, 364px); - overflow-y: scroll; - overflow-x: hidden; - } - &__item { position: relative; display: flex; @@ -858,3 +851,16 @@ a.@{prefix}-menu__item { transition: @anim-duration-base; opacity: 0; } + +.@{prefix}-menu__popup { + top: 0; + left: calc(100% - @pop-padding-m); + + .@{prefix}-menu__item, .@{prefix}-submenu { + margin: @comp-margin-xxs 0 0 0; + + &:first-child { + margin-top: 0; + } + } +} From d67f68e916c3359c52bc00ee6e362836c53d0e47 Mon Sep 17 00:00:00 2001 From: azhe Date: Tue, 27 Dec 2022 11:52:03 +0800 Subject: [PATCH 126/312] fix: menu box sizing (#1094) Co-authored-by: sunzhe --- style/web/components/menu/_index.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index a9f24a3cf1..889c565a36 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -296,8 +296,9 @@ a.@{prefix}-menu__item { height: 100%; .@{prefix}-menu__logo:not(:empty) { + box-sizing: border-box; width: 100%; - height: calc(@menu-logo-height - 1px); + height: @menu-logo-height; border-bottom: 1px solid @menu-border-color; } From 2afa007392d2e17ca5cd0bb454c7781b9c3f61d9 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 27 Dec 2022 14:40:30 +0800 Subject: [PATCH 127/312] fix(tag): select text style (#1095) --- style/web/components/tag/_index.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less index 8ddce29ae0..f93c7e0d48 100644 --- a/style/web/components/tag/_index.less +++ b/style/web/components/tag/_index.less @@ -37,10 +37,6 @@ transition: color @anim-duration-base @anim-time-fn-easing; } - ::selection { - background: transparent; - } - &--default { color: @tag-default-text-color; background-color: @tag-default-background-color; From d3fe24294cab3f2d7e822a11504db0a103a245ee Mon Sep 17 00:00:00 2001 From: moecasts <37169906+moecasts@users.noreply.github.com> Date: Tue, 27 Dec 2022 14:44:14 +0800 Subject: [PATCH 128/312] =?UTF-8?q?feat(tooltip-lite):=20mouse=20=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E6=96=B0=E5=A2=9E=E5=AE=9A=E4=BD=8D=E8=BE=B9?= =?UTF-8?q?=E7=95=8C=E6=A3=80=E6=9F=A5=EF=BC=8C=E4=BF=9D=E8=AF=81=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E5=9C=A8=E5=8F=AF=E8=A7=86=E8=8C=83=E5=9B=B4=E5=86=85?= =?UTF-8?q?=20(#1093)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/utils/getPosition.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/js/utils/getPosition.ts b/js/utils/getPosition.ts index 40affa5705..06a92a1ea7 100644 --- a/js/utils/getPosition.ts +++ b/js/utils/getPosition.ts @@ -32,7 +32,27 @@ const getPosition = ( break; // 后续有需要可以再扩展 } + + if (placement === 'mouse') { + const edges = { + top: document.documentElement.scrollTop, + left: document.documentElement.scrollLeft, + right: document.documentElement.scrollLeft + document.documentElement.clientWidth, + bottom: document.documentElement.scrollTop + document.documentElement.clientHeight, + }; + + // 底部溢出时，定位到元素上方 + if (position.top > edges.bottom - contentRect.height) { + position.top = document.documentElement.scrollTop + targetRect.top - contentRect.height - 8; + } + + // 右侧溢出时，确保元素能完全展示 + if (position.left > edges.right - contentRect.width) { + position.left = edges.right - contentRect.width; + } + } } + return position; }; From 9ef24a6350807e6056d227bf07a812320ee68d30 Mon Sep 17 00:00:00 2001 From: Lushen Yu <44960823+Ylushen@users.noreply.github.com> Date: Tue, 3 Jan 2023 14:23:38 +0800 Subject: [PATCH 129/312] =?UTF-8?q?style(image-viewer):=20zindex=E5=B1=82?= =?UTF-8?q?=E7=BA=A7=E8=B0=83=E6=95=B4=20(#1104)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style(image-viewer): zindex层级调整 * style(image-viewer): 表头可选中 --- style/web/_variables.less | 1 + style/web/components/image-viewer/_index.less | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/style/web/_variables.less b/style/web/_variables.less index 94da1f085c..2198155da2 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -368,6 +368,7 @@ @z-index-affix: 500; @z-index-drawer: 1500; @z-index-dialog: 2500; +@z-index-image-viewer: 3000; @z-index-loading: 3500; @z-index-message: 5000; @z-index-Popup: 5500; diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 8dfabda04c..7554a6bb81 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -79,7 +79,7 @@ bottom: 0; left: 0; right: 0; - z-index: 2000; + z-index: @z-index-image-viewer; overflow: hidden; animation: @anim-duration-base @anim-time-fn-ease-in modal-mask-show; @@ -454,8 +454,21 @@ } .@{prefix}-image-viewer__dialog { + &.@{prefix}-dialog__ctx--fixed { + z-index: @z-index-image-viewer; + } + .@{prefix}-dialog__header { padding: 0 @comp-paddingLR-s; + // 兼容dialog表头限制无法拖拽 + pointer-events: none; + .@{prefix}-image-viewer__dialog-title { + pointer-events: all; + } + + .@{prefix}-dialog__close { + pointer-events: auto; + } } .@{prefix}-dialog { From 6a3d6a92c22cdf86a995b964bdfbd23c1ac046ab Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 3 Jan 2023 14:55:54 +0800 Subject: [PATCH 130/312] feat(web): autocomplete clear icon (#1098) Co-authored-by: sheepluo --- style/web/components/auto-complete/_index.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/style/web/components/auto-complete/_index.less b/style/web/components/auto-complete/_index.less index 59e622da7e..92a24b43a9 100644 --- a/style/web/components/auto-complete/_index.less +++ b/style/web/components/auto-complete/_index.less @@ -7,3 +7,15 @@ color: @auto-complete-option-highlight-color; } } + +.@{prefix}-auto-complete { + .@{prefix}-input__suffix-clear { + display: none; + } + + &:hover { + .@{prefix}-input__suffix-clear { + display: inline-block; + } + } +} From 112bc2a32467b60f361af4bb560d1d6831533ab7 Mon Sep 17 00:00:00 2001 From: sunshineYuanlei <40048164+sunshineYuanlei@users.noreply.github.com> Date: Tue, 3 Jan 2023 18:58:20 +0800 Subject: [PATCH 131/312] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E9=98=BF?= =?UTF-8?q?=E6=8B=89=E4=BC=AF=E8=AF=AD=E7=9A=84=E8=AF=AD=E8=A8=80=E5=8C=85?= =?UTF-8?q?=20(#1097)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 补充阿拉伯语的语言包 * fix: lint-fix Co-authored-by: p_pleiyuan --- js/global-config/locale/ar-KW.js | 187 +++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 js/global-config/locale/ar-KW.js diff --git a/js/global-config/locale/ar-KW.js b/js/global-config/locale/ar-KW.js new file mode 100644 index 0000000000..19296c8fa2 --- /dev/null +++ b/js/global-config/locale/ar-KW.js @@ -0,0 +1,187 @@ +/* eslint-disable no-template-curly-in-string */ +// 文件有效，为国际化做准备 +export default { + pagination: { + itemsPerPage: '{size} / الصفحة', + jumpTo: 'القفز إلى', + page: '', + total: '{total} عناصر', + }, + cascader: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', + }, + calendar: { + yearSelection: '{year}', + monthSelection: '{month}', + yearRadio: 'عام', + monthRadio: 'شهر', + hideWeekend: 'إخفاء عطلة نهاية الأسبوع', + showWeekend: 'عرض عطلة نهاية الأسبوع', + today: 'اليوم', + thisMonth: 'هذا الشهر', + week: 'الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد', + cellMonth: 'يناير ، فبراير ، مارس ، أبريل ، مايو ، يونيو ، يوليو ، أغسطس ، سبتمبر ، أكتوبر ، نوفمبر ، ديسمبر', + }, + transfer: { + title: '{checked} / {total}', + empty: 'لا تتوافر بيانات', + placeholder: 'أدخل الكلمة للبحث', + }, + timePicker: { + now: 'الآن', + confirm: 'نعم', + anteMeridiem: 'صباحا', + postMeridiem: 'مساءً', + placeholder: 'الرجاء التحديد', + }, + dialog: { + confirm: 'نعم', + cancel: 'يلغي', + }, + drawer: { + confirm: 'نعم', + cancel: 'يلغي', + }, + popconfirm: { + confirm: { content: 'نعم' }, + cancel: { content: 'يلغي' }, + }, + table: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + loadingMoreText: 'انقر لتحميل المزيد', + filterInputPlaceholder: 'الرجاء إدخال المحتوى (لا توجد قيمة افتراضية متاحة)', + sortAscendingOperationText: 'انقر للفرز تصاعديًا', + sortCancelOperationText: 'انقر لإلغاء الفرز', + sortDescendingOperationText: 'انقر للفرز تنازليًا', + clearFilterResultButtonText: 'صافي', + columnConfigButtonText: 'تكوين العمود', + columnConfigTitleText: 'تكوين عمود الجدول', + columnConfigDescriptionText: 'الرجاء تحديد أعمدة البيانات المراد عرضها في الجدول', + confirmText: 'نعم', + cancelText: 'يلغي', + resetText: 'إعادة ضبط', + selectAllText: 'اختر الكل', + searchResultText: "تم العثور على بحث '{result}' و{count} من العناصر.", + }, + + select: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', + }, + + tree: { empty: 'لا تتوافر بيانات' }, + + treeSelect: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', + }, + + datePicker: { + + placeholder: { + date: 'حدد تاريخ', + month: 'اختر الشهر', + year: 'اختر السنة', + }, + weekdays: ['الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'], + months: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'], + quarters: ['Q1', 'Q2', 'Q3', 'Q4'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: 'D', + yearAriaLabel: 'Y', + monthAriaLabel: 'M', + weekAbbreviation: 'W', + confirm: 'نعم', + selectTime: 'حدد الوقت', + selectDate: 'حدد تاريخ', + nextYear: 'العام القادم', + preYear: 'العام الماضي', + nextMonth: 'الشهر القادم', + preMonth: 'الشهر الماضي', + preDecade: 'العقد الماضي', + nextDecade: 'العقد القادم', + now: 'الآن', + }, + + upload: { + sizeLimitMessage: 'لا يمكن أن يتجاوز حجم الملف {sizeLimit}', + cancelUploadText: 'يلغي', + triggerUploadText: { + fileInput: 'حدد الملف', + image: 'انقر لتحميل الصورة', + normal: 'تحميل', + reupload: 'أعد تحميل', + continueUpload: 'تحميل المزيد', + delete: 'حذف', + uploading: 'تحميل', + }, + + dragger: { + dragDropText: 'أسقطها هنا', + draggingText: 'اسحب الملف هنا', + clickAndDragText: 'اختر ملفًا أو اسحبه هنا.', + }, + + file: { + fileNameText: 'اسم الملف', + fileSizeText: 'حجم', + fileStatusText: 'حالة', + fileOperationText: 'عملية', + fileOperationDateText: 'تاريخ', + }, + progress: { + uploadingText: 'تحميل', + waitingText: 'جار التحميل', + failText: 'التحميل فشل', + successText: 'تم التحميل بنجاح.', + }, + }, + + form: { + errorMessage: { + date: 'الرجاء إدخال ${name} الصحيح', + url: 'الرجاء إدخال ${name} الصحيح', + required: 'مطلوب ${name}', + max: 'يمكن أن يحتوي ${name} على ما يصل إلى ${validate} حرفًا', + min: 'لا يمكن أن يكون ${name} أقل من ${validate} حرفًا', + len: 'يجب أن يتكون ${name} من أحرف ${validate} بالضبط', + enum: '${name} يجب أن يكون واحدًا من ${validate} ', + idcard: 'الرجاء إدخال ${name} الصحيح', + telnumber: 'الرجاء إدخال ${name} الصحيح', + pattern: 'الرجاء إدخال ${name} الصحيح', + validator: '${name} غير صالح', + boolean: '${name} ليس منطقيًا', + number: 'يجب أن يكون ${name} رقمًا', + }, + }, + + input: { placeholder: 'الرجاء إدخال' }, + + list: { + loadingText: 'جار التحميل…', + loadingMoreText: 'انقر لتحميل المزيد', + }, + + alert: { + expandText: 'تزسيع', + collapseText: 'انهيار', + }, + + anchor: { + copySuccessText: 'تم نسخ الرابط', + copyText: 'انسخ الرابط', + }, + + colorPicker: { + swatchColorTitle: 'الألوان الافتراضية', + recentColorTitle: 'مستخدم حديثا', + clearConfirmText: 'هل تريد مسح الألوان المستخدمة مؤخرًا؟', + }, +}; From 4199949e4bb9c9f010bfad7153b7a9d28631596b Mon Sep 17 00:00:00 2001 From: byqbai <1213567900@qq.com> Date: Tue, 3 Jan 2023 20:33:05 +0800 Subject: [PATCH 132/312] fix(tag): disabled close icon (#1105) --- style/web/components/tag/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less index f93c7e0d48..0bbd1b3c4c 100644 --- a/style/web/components/tag/_index.less +++ b/style/web/components/tag/_index.less @@ -85,6 +85,7 @@ .t-icon { &:hover { cursor: pointer; + color: @tag-disabled-color; } } } From d315f00db6667fa5402d58149dfbee261fc1899f Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 3 Jan 2023 21:25:29 +0800 Subject: [PATCH 133/312] Revert "fix(tag): disabled close icon (#1105)" (#1106) This reverts commit 4199949e4bb9c9f010bfad7153b7a9d28631596b. --- style/web/components/tag/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less index 0bbd1b3c4c..f93c7e0d48 100644 --- a/style/web/components/tag/_index.less +++ b/style/web/components/tag/_index.less @@ -85,7 +85,6 @@ .t-icon { &:hover { cursor: pointer; - color: @tag-disabled-color; } } } From 3d2e24184fde682707b56aa0f11a45538c217a04 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 3 Jan 2023 21:37:15 +0800 Subject: [PATCH 134/312] fix(web): upload.theme=single-input (#1107) --- style/web/components/upload/_index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less index 0d2ed2f357..35173a8970 100644 --- a/style/web/components/upload/_index.less +++ b/style/web/components/upload/_index.less @@ -660,3 +660,7 @@ .@{prefix}-upload__card-name { margin-top: @spacer; } + +.@{prefix}-upload--theme-file-input { + width: 100%; +} From 13dac6fa6b02aca015b295a413136bd81965a917 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 3 Jan 2023 22:09:51 +0800 Subject: [PATCH 135/312] feat(web): upload support mockProgressDuration (#1108) --- js/upload/types.ts | 2 ++ js/upload/xhr.ts | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/js/upload/types.ts b/js/upload/types.ts index 7c81dc809b..7875fdab89 100644 --- a/js/upload/types.ts +++ b/js/upload/types.ts @@ -103,6 +103,8 @@ export interface XhrOptions { file?: UploadFile; files?: UploadFile[]; useMockProgress?: boolean; + // 模拟进度间隔时间，默认：300 + mockProgressDuration?: number; name: string; /** 可与 data 共存 */ formatRequest?: (requestData: { [key: string]: any }) => { [key: string]: any }; diff --git a/js/upload/xhr.ts b/js/upload/xhr.ts index 7584ea667e..33520c9a35 100644 --- a/js/upload/xhr.ts +++ b/js/upload/xhr.ts @@ -13,6 +13,7 @@ export default function xhr({ files = [], name = 'file', useMockProgress = true, + mockProgressDuration = 300, formatRequest, onError, onProgress, @@ -50,9 +51,9 @@ export default function xhr({ } else { clearInterval(timer1); } - }, 300); + }, mockProgressDuration); clearTimeout(timer2); - }, 300); + }, mockProgressDuration); } let requestData: { [key: string]: any } = {}; From b9a9f670f8b18cdad64ec90e3a4d1efc09cc7bbe Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 3 Jan 2023 22:09:59 +0800 Subject: [PATCH 136/312] chore: update component number (#1109) --- docs/web/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/web/overview.md b/docs/web/overview.md index 9af608ede3..f3bdb75466 100644 --- a/docs/web/overview.md +++ b/docs/web/overview.md @@ -414,7 +414,7 @@ spline: explain
-

消息提醒7

+

消息提醒8

From 5c4e8c14d39cca68a21275f5ce7884527381b0f8 Mon Sep 17 00:00:00 2001 From: azhe Date: Wed, 4 Jan 2023 16:49:01 +0800 Subject: [PATCH 137/312] Fix/submenu height (#1111) * fix: submenu height * feat: add scrollbar to popup submenu Co-authored-by: sunzhe --- style/web/components/menu/_index.less | 8 +++++--- style/web/components/menu/_var.less | 3 +-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 889c565a36..90cf99bfee 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -298,7 +298,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__logo:not(:empty) { box-sizing: border-box; width: 100%; - height: @menu-logo-height; + height: @menu-height-default; border-bottom: 1px solid @menu-border-color; } @@ -370,7 +370,7 @@ a.@{prefix}-menu__item { transition: max-height @anim-duration-base @anim-time-fn-easing; &.@{prefix}-is-opened { - max-height: 1000px; + max-height: calc(100vh - @menu-height-default * 2); } .@{prefix}-menu__item { @@ -790,7 +790,7 @@ a.@{prefix}-menu__item { } &.@{prefix}-is-opened { - max-height: var(--popup-max-height, 364px); + max-height: calc(100vh - @menu-height-default * 2); opacity: 1; box-shadow: @menu-default-shadow; overflow: visible; @@ -798,6 +798,8 @@ a.@{prefix}-menu__item { .@{prefix}-menu__popup { top: calc(0px - @pop-padding-m); left: 100%; + overflow-x: hidden; + overflow-y: auto; &::before { content: ""; diff --git a/style/web/components/menu/_var.less b/style/web/components/menu/_var.less index c72e785259..fe9416378e 100644 --- a/style/web/components/menu/_var.less +++ b/style/web/components/menu/_var.less @@ -83,8 +83,7 @@ @popup-item-padding-left: @comp-paddingLR-l; // 高度 -@menu-height-default: 32px; // low -@menu-logo-height: @comp-size-xxxl; +@menu-height-default: @comp-size-xxxl; // z-index @menu-outer-zindex: 1000; From 39765f6243add46c5af86a55a988dfecb4f8a391 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Thu, 5 Jan 2023 10:40:29 +0800 Subject: [PATCH 138/312] feat(web): upload.mockProgressDuration support (#1110) --- js/upload/main.ts | 1 + js/upload/types.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/js/upload/main.ts b/js/upload/main.ts index af7c51a83e..fba65a9171 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -172,6 +172,7 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { const r = handleError({ ...p, formatResponse: params.formatResponse }); params.onResponseError?.(r); diff --git a/js/upload/types.ts b/js/upload/types.ts index 7875fdab89..1857fc7d3a 100644 --- a/js/upload/types.ts +++ b/js/upload/types.ts @@ -194,6 +194,8 @@ export interface HandleUploadParams { name?: string; /** 是否需要真实进度之前的模拟进度 */ useMockProgress?: boolean; + // 模拟进度间隔时间 + mockProgressDuration?: number; multiple?: boolean; headers?: {[key: string]: string}; withCredentials?: boolean; From b688584f0c1e0b2336694d8e5271566c608f39f2 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Thu, 5 Jan 2023 17:04:38 +0800 Subject: [PATCH 139/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddatepicker=20?= =?UTF-8?q?=E7=A6=81=E7=94=A8=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1112?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复datepicker 禁用样式问题 * fix: 修复datepicker 禁用样式问题 --- js/date-picker/utils.ts | 14 ++++++++------ style/web/components/date-picker/_index.less | 9 +++------ style/web/components/date-picker/_var.less | 4 ++-- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/js/date-picker/utils.ts b/js/date-picker/utils.ts index f21aaa5cff..a7ddad007c 100644 --- a/js/date-picker/utils.ts +++ b/js/date-picker/utils.ts @@ -450,12 +450,14 @@ export function isEnabledDate({ format, }: { value: Date; - mode: 'year' | 'month' | 'date'; + mode: 'year' | 'month' | 'date' | 'quarter' | 'week'; format: string; - disableDate: DisableDate; + disableDate: any; }): boolean { if (!disableDate) return true; + const availableMode = mode === 'quarter' ? 'date' : mode; + let isEnabled = true; // 值类型为 Function 则表示返回值为 true 的日期会被禁用 if (typeof disableDate === 'function') { @@ -478,7 +480,7 @@ export function isEnabledDate({ const compareMin = dayjs(new Date(from)); const compareMax = dayjs(new Date(to)); - return !dayjs(value).isBetween(compareMin, compareMax, mode, '[]'); + return !dayjs(value).isBetween(compareMin, compareMax, availableMode, '[]'); } const min = before ? new Date(before) : null; @@ -489,13 +491,13 @@ export function isEnabledDate({ const compareMin = dayjs(new Date(min)); const compareMax = dayjs(new Date(max)); - isEnabled = dayjs(value).isBetween(compareMin, compareMax, mode, '[]'); + isEnabled = dayjs(value).isBetween(compareMin, compareMax, availableMode, '[]'); } else if (min) { const compareMin = dayjs(new Date(min)); - isEnabled = !dayjs(value).isBefore(compareMin, mode); + isEnabled = !dayjs(value).isBefore(compareMin, availableMode); } else if (max) { const compareMax = dayjs(new Date(max)); - isEnabled = !dayjs(value).isAfter(compareMax, mode); + isEnabled = !dayjs(value).isAfter(compareMax, availableMode); } return isEnabled; } diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less index 2bef6b0589..871156e0a0 100644 --- a/style/web/components/date-picker/_index.less +++ b/style/web/components/date-picker/_index.less @@ -57,9 +57,6 @@ .@{prefix}-date-range-picker__panel-content-wrapper { display: flex; } -.@{prefix}-date-range-picker__panel-content-wrapper { - gap: 6px; -} .@{prefix}-date-picker__header { display: flex; @@ -272,10 +269,10 @@ .@{prefix}-date-picker__panel-date { display: flex; flex-direction: column; - width: 100%; padding: @datepicker-panel-padding; gap: @datepicker-panel-gap; - max-width: @datepicker-panel-max-width; + width: @datepicker-panel-width; + box-sizing: border-box; } // year month picker highlight @@ -331,7 +328,7 @@ } .@{prefix}-date-picker__cell--disabled + .@{prefix}-date-picker__cell--disabled:before { - left: @datepicker-cell-disabled-left; + left: @datepicker-cell-disabled-left-large; } .@{prefix}-date-picker__cell:nth-child(1) { diff --git a/style/web/components/date-picker/_var.less b/style/web/components/date-picker/_var.less index cbd6bcf98d..2287ff9ade 100644 --- a/style/web/components/date-picker/_var.less +++ b/style/web/components/date-picker/_var.less @@ -13,7 +13,7 @@ @datepicker-th-font-color: @text-color-secondary; -@datepicker-panel-max-width: 280px; +@datepicker-panel-width: 280px; @datepicker-panel-container-min-width: 280px; @datepicker-panel-select-max-width: 160px; @datepicker-panel-divider-color: @component-stroke; @@ -26,9 +26,9 @@ @datepicker-panel-gap: @comp-margin-m; @datepicker-year-month-quarter-table-gap: @comp-margin-m; @datepicker-week-firstcell-margin-left: @comp-margin-xxxl; -@datepicker-cell-disabled-left: calc(0px - calc(@datepicker-cell-min-width + @comp-margin-m)); @datepicker-cell-start-end-horizontal: calc(@datepicker-cell-inner-margin * 2); @datepicker-cell-disabled-left: calc(0px - @comp-size-l); +@datepicker-cell-disabled-left-large: calc(0px - @comp-size-xxxl); @datepicker-year-controller-width: 78px; @datepicker-month-controller-width: 80px; From afdfdc2164c22551788fa71da9fad03848482088 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Fri, 6 Jan 2023 11:30:17 +0800 Subject: [PATCH 140/312] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E9=98=BF?= =?UTF-8?q?=E6=8B=89=E4=BC=AF=E8=AF=AD=E8=A8=80=E5=8C=85=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=90=8D=20(#1113)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/global-config/locale/{ar-KW.js => ar_KW.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename js/global-config/locale/{ar-KW.js => ar_KW.ts} (100%) diff --git a/js/global-config/locale/ar-KW.js b/js/global-config/locale/ar_KW.ts similarity index 100% rename from js/global-config/locale/ar-KW.js rename to js/global-config/locale/ar_KW.ts From f3b39d3bca979c0f19ac0bd46f75b1c6324bbf52 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 9 Jan 2023 13:59:06 +0800 Subject: [PATCH 141/312] chore(deps-dev): bump stylelint from 14.13.0 to 14.16.1 (#1101) Bumps [stylelint](https://github.com/stylelint/stylelint) from 14.13.0 to 14.16.1. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/14.13.0...14.16.1) --- updated-dependencies: - dependency-name: stylelint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7e9c3dc733..d7d15abb5a 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "lint-staged": "~13.0.3", "min-indent": "^1.0.1", "postcss-less": "^5.0.0", - "stylelint": "~14.13.0", + "stylelint": "~14.16.1", "stylelint-config-standard": "^24.0.0", "ts-jest": "^27.1.3", "typescript": "^4.5.5" From 59edd0ed4da6628cb2d72807cbd219a527f78bdf Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 9 Jan 2023 14:02:59 +0800 Subject: [PATCH 142/312] fix(tree): label overflow (#1114) --- style/web/components/tree/_index.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index 06e627f3cf..79058b635f 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -8,6 +8,8 @@ @import "../../mixins/_reset.less"; +@import "../../mixins/_text.less"; + // 替换为组件名 .@{prefix}-tree { .reset; @@ -249,6 +251,7 @@ border-radius: @border-radius-default; cursor: pointer; transition: background-color @anim-duration-moderate @anim-time-fn-easing; + .text-ellipsis(); &.@{prefix}-is-checked { font-weight: 500; From a13929ec123f5955b843d1872a480348a3fc697e Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 9 Jan 2023 16:46:11 +0800 Subject: [PATCH 143/312] chore: fix type by as const (#1115) --- js/global-config/locale/ar_KW.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts index 19296c8fa2..f193728134 100644 --- a/js/global-config/locale/ar_KW.ts +++ b/js/global-config/locale/ar_KW.ts @@ -184,4 +184,4 @@ export default { recentColorTitle: 'مستخدم حديثا', clearConfirmText: 'هل تريد مسح الألوان المستخدمة مؤخرًا؟', }, -}; +} as const; From e221fde263897c01ab2125f07368cc7ad9a854e9 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 10 Jan 2023 17:12:08 +0800 Subject: [PATCH 144/312] =?UTF-8?q?docs:=20=E6=8F=90=E4=BE=9B=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E6=96=87=E4=BB=B6=20git=20=E6=97=B6=E9=97=B4=E5=87=BD?= =?UTF-8?q?=E6=95=B0=20(#1118)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/compile/index.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/compile/index.js b/docs/compile/index.js index 8b125f4319..8fa32b5f48 100644 --- a/docs/compile/index.js +++ b/docs/compile/index.js @@ -1,4 +1,5 @@ import fs from 'fs'; +import { spawn } from 'node:child_process'; /** * 渲染 live demo 逻辑，提取 md 头信息生成框架需要的字符串 @@ -26,6 +27,25 @@ export function compileUsage(options) { }; } +/** + * 获取文件 git 最后更新时间 + * @param {string} file + * @returns {Promise} + */ +export function getGitTimestamp(file) { + return new Promise((resolve, reject) => { + const child = spawn('git', ['log', '-1', '--pretty="%ci"', file]) + let output = '' + child.stdout.on('data', (d) => (output += String(d))) + child.on('close', () => { + resolve(+new Date(output)) + }) + child.on('error', reject) + }) +} + + export default { - compileUsage + compileUsage, + getGitTimestamp, }; From c1cc3302f7e5d32a1b9f450532b52cf77ede0118 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 11 Jan 2023 10:06:07 +0800 Subject: [PATCH 145/312] feat(web): only empty label display: none (#1117) Co-authored-by: sheepluo --- style/web/components/table/_index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 50c8fc3329..ecc0a85885 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -1104,8 +1104,8 @@ /** HTML 特性: th/td 必须设置为 0，他们的子元素才能设置为 100% */ height: 0; - .@{prefix}-radio__label, - .@{prefix}-checkbox__label { + .@{prefix}-radio__label:empty, + .@{prefix}-checkbox__label:empty { display: none; } } From 7c8a62d9b2d66e23cb0b8867c2772cb08b94a160 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 11 Jan 2023 16:12:03 +0800 Subject: [PATCH 146/312] fix: lint error (#1120) --- docs/compile/index.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/compile/index.js b/docs/compile/index.js index 8fa32b5f48..3c7c262817 100644 --- a/docs/compile/index.js +++ b/docs/compile/index.js @@ -34,18 +34,19 @@ export function compileUsage(options) { */ export function getGitTimestamp(file) { return new Promise((resolve, reject) => { - const child = spawn('git', ['log', '-1', '--pretty="%ci"', file]) - let output = '' - child.stdout.on('data', (d) => (output += String(d))) + const child = spawn('git', ['log', '-1', '--pretty="%ci"', file]); + let output = ''; + child.stdout.on('data', (d) => { + output += String(d); + }); child.on('close', () => { - resolve(+new Date(output)) - }) - child.on('error', reject) - }) + resolve(+new Date(output)); + }); + child.on('error', reject); + }); } - export default { compileUsage, - getGitTimestamp, + getGitTimestamp }; From 0086ce3dffe2472b53af100bb7be29f85f365789 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Thu, 12 Jan 2023 13:07:20 +0800 Subject: [PATCH 147/312] [Image] ensure image in avatar won't overflow (#1119) * feat(web): ensure image in avatar won't overflow * docs(web): fix avatar documents Co-authored-by: sheepluo --- docs/web/api/avatar.md | 2 +- style/web/components/avatar/_index.less | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/web/api/avatar.md b/docs/web/api/avatar.md index c993934959..f8afcbfad3 100644 --- a/docs/web/api/avatar.md +++ b/docs/web/api/avatar.md @@ -13,7 +13,7 @@ spline: data ### 头像形状 -头像默认支持两种形状：shape、circle，用户也可自定义设置头像形状 +头像默认支持两种形状：round、circle，用户也可自定义设置头像形状 {{ shape }} ### 头像大小 diff --git a/style/web/components/avatar/_index.less b/style/web/components/avatar/_index.less index dc5a93b83d..4176995f5c 100644 --- a/style/web/components/avatar/_index.less +++ b/style/web/components/avatar/_index.less @@ -36,6 +36,12 @@ &.@{prefix}-size-l { .avatar-size(@avatar-size-large,@avatar-font-large,@avatar-icon-large); } + + // 保证 Image 不会超出 Avatar + > .@{prefix}-image__wrapper { + max-width: 100%; + max-height: 100%; + } } .@{prefix}-avatar-group { From 1a8470809e781771a479433c0e38a833624ee754 Mon Sep 17 00:00:00 2001 From: WenKang Date: Thu, 12 Jan 2023 13:07:42 +0800 Subject: [PATCH 148/312] fix: style bug (#1121) --- style/web/components/input-number/_index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less index 598a2488f1..bb6fe614d9 100644 --- a/style/web/components/input-number/_index.less +++ b/style/web/components/input-number/_index.less @@ -25,7 +25,7 @@ &:not(&--column) { > .@{prefix}-input-number__decrease + .@{prefix}-input__wrap { - margin-left: @spacer-s; + margin-left: @comp-margin-xs; } } @@ -349,7 +349,7 @@ .@{inputNumberCls}--row { .@{prefix}-input__wrap { width: initial; - margin-right: @comp-margin-s; + margin-right: @comp-margin-xs; } .@{prefix}-input-number__increase { right: 0; From f4f9fbaf953f7bea08082fc6ad841ca331d63021 Mon Sep 17 00:00:00 2001 From: azhe Date: Tue, 17 Jan 2023 14:18:57 +0800 Subject: [PATCH 149/312] Fix/menu text color (#1122) * fix: global text-color-brand * fix: menu active color * chore: remove useless menu style * chore: remove useless html interface Co-authored-by: sunzhe --- style/web/README.md | 28 +- style/web/components/a-template/index.html | 96 - style/web/components/alert/index.html | 454 ---- style/web/components/anchor/index.html | 306 --- style/web/components/avatar/index.html | 273 --- style/web/components/badge/index.html | 254 --- style/web/components/breadcrumb/index.html | 263 --- style/web/components/button/index.html | 218 -- style/web/components/calendar/index.html | 1305 ----------- style/web/components/card/index.html | 96 - style/web/components/cascader/index.html | 735 ------ style/web/components/checkbox/index.html | 104 - style/web/components/collapse/index.html | 96 - style/web/components/color-picker/index.html | 96 - style/web/components/comment/index.html | 95 - style/web/components/date-picker/index.html | 96 - style/web/components/dialog/index.html | 151 -- style/web/components/divider/index.html | 100 - style/web/components/drawer/index.html | 154 -- style/web/components/dropdown/index.html | 132 -- style/web/components/form/index.html | 352 --- style/web/components/grid/index.html | 332 --- style/web/components/guide/index.html | 32 - style/web/components/image-viewer/index.html | 96 - style/web/components/image/index.html | 96 - .../web/components/input-adornment/index.html | 20 - style/web/components/input-number/index.html | 214 -- style/web/components/input/index.html | 348 --- style/web/components/layout/index.html | 164 -- style/web/components/list/index.html | 848 ------- style/web/components/loading/index.html | 146 -- style/web/components/menu/_index-v2.less | 934 -------- style/web/components/menu/_var-v2.less | 107 - style/web/components/menu/_var.less | 4 +- style/web/components/menu/index.html | 881 -------- style/web/components/message/index.html | 218 -- style/web/components/notification/index.html | 385 ---- style/web/components/pagination/index.html | 407 ---- style/web/components/popconfirm/index.html | 214 -- style/web/components/popup/index.html | 117 - style/web/components/progress/index.html | 134 -- style/web/components/radio/index.html | 228 -- style/web/components/range-input/index.html | 46 - style/web/components/rate/index.html | 96 - style/web/components/select/index.html | 314 --- style/web/components/skeleton/index.html | 92 - style/web/components/slider/index.html | 276 --- style/web/components/space/index.html | 44 - style/web/components/steps/index.html | 489 ---- style/web/components/swiper/index.html | 265 --- style/web/components/switch/index.html | 261 --- style/web/components/table/index.html | 1998 ----------------- style/web/components/tabs/index.html | 565 ----- style/web/components/tag-input/index.html | 46 - style/web/components/tag/index.html | 313 --- style/web/components/textarea/index.html | 95 - style/web/components/time-picker/index.html | 281 --- style/web/components/timeline/index.html | 41 - style/web/components/tooltip/index.html | 136 -- style/web/components/transfer/index.html | 1047 --------- style/web/components/tree/index.html | 443 ---- style/web/components/upload/index.html | 290 --- style/web/index.js | 2 - style/web/index.less | 10 - style/web/package.json | 38 +- style/web/theme/_light.less | 2 +- style/web/webpack.config.js | 43 - 67 files changed, 7 insertions(+), 18555 deletions(-) delete mode 100644 style/web/components/a-template/index.html delete mode 100644 style/web/components/alert/index.html delete mode 100644 style/web/components/anchor/index.html delete mode 100644 style/web/components/avatar/index.html delete mode 100644 style/web/components/badge/index.html delete mode 100644 style/web/components/breadcrumb/index.html delete mode 100644 style/web/components/button/index.html delete mode 100644 style/web/components/calendar/index.html delete mode 100644 style/web/components/card/index.html delete mode 100644 style/web/components/cascader/index.html delete mode 100644 style/web/components/checkbox/index.html delete mode 100644 style/web/components/collapse/index.html delete mode 100644 style/web/components/color-picker/index.html delete mode 100644 style/web/components/comment/index.html delete mode 100644 style/web/components/date-picker/index.html delete mode 100644 style/web/components/dialog/index.html delete mode 100644 style/web/components/divider/index.html delete mode 100644 style/web/components/drawer/index.html delete mode 100644 style/web/components/dropdown/index.html delete mode 100644 style/web/components/form/index.html delete mode 100644 style/web/components/grid/index.html delete mode 100644 style/web/components/guide/index.html delete mode 100644 style/web/components/image-viewer/index.html delete mode 100644 style/web/components/image/index.html delete mode 100644 style/web/components/input-adornment/index.html delete mode 100644 style/web/components/input-number/index.html delete mode 100644 style/web/components/input/index.html delete mode 100644 style/web/components/layout/index.html delete mode 100644 style/web/components/list/index.html delete mode 100644 style/web/components/loading/index.html delete mode 100644 style/web/components/menu/_index-v2.less delete mode 100644 style/web/components/menu/_var-v2.less delete mode 100644 style/web/components/menu/index.html delete mode 100644 style/web/components/message/index.html delete mode 100644 style/web/components/notification/index.html delete mode 100644 style/web/components/pagination/index.html delete mode 100644 style/web/components/popconfirm/index.html delete mode 100644 style/web/components/popup/index.html delete mode 100644 style/web/components/progress/index.html delete mode 100644 style/web/components/radio/index.html delete mode 100644 style/web/components/range-input/index.html delete mode 100644 style/web/components/rate/index.html delete mode 100644 style/web/components/select/index.html delete mode 100644 style/web/components/skeleton/index.html delete mode 100644 style/web/components/slider/index.html delete mode 100644 style/web/components/space/index.html delete mode 100644 style/web/components/steps/index.html delete mode 100644 style/web/components/swiper/index.html delete mode 100644 style/web/components/switch/index.html delete mode 100644 style/web/components/table/index.html delete mode 100644 style/web/components/tabs/index.html delete mode 100644 style/web/components/tag-input/index.html delete mode 100644 style/web/components/tag/index.html delete mode 100644 style/web/components/textarea/index.html delete mode 100644 style/web/components/time-picker/index.html delete mode 100644 style/web/components/timeline/index.html delete mode 100644 style/web/components/tooltip/index.html delete mode 100644 style/web/components/transfer/index.html delete mode 100644 style/web/components/tree/index.html delete mode 100644 style/web/components/upload/index.html delete mode 100644 style/web/index.js delete mode 100644 style/web/index.less delete mode 100644 style/web/webpack.config.js diff --git a/style/web/README.md b/style/web/README.md index 182d36dcd5..1ee4e54f42 100644 --- a/style/web/README.md +++ b/style/web/README.md @@ -38,9 +38,7 @@ web ├── _reset.less // 重置标签默认样式 ├── _variables.less // 全局变量 ├── base.less // 基础样式（内含 _reset.less 和 _variable.less） -├── docs.less // 示例的公共样式 -├── index.less // 统一引入 UI 库所有样式的出口文件 -└── index.js // webpack 入口文件，含各组件的主样式 +└── docs.less // 示例的公共样式 ``` ### 开发 @@ -60,32 +58,8 @@ web 几个关键点： - `components` 下创建组件文件夹 -- 修改 `index.html` 开发者信息及 `title` 信息(可在该组件文件夹下搜索 `` 替换)。 -- `components` 下的 `_index.less` 增加组件主样式 （注意依赖顺序关系） -- `index.js` 增加组件样式入口 - 如果有示例样式，添加到 `/docs/.css`，并在 `docs.css` 里引入 -#### 启动 - -`style/web` 目录下，启动项目，主要用于 less 编译。 -html 可通过本地服务的方式实现热更新（如 VS Code 的 Live Server） - -``` -npm run start -``` - -### 如何使用 icon - -首先，在组件 index.html 中引入图标样式表，`` 。可参考 button/index.html。(如果使用初始化脚本，该样式表会自动插入 index.html) - -而后，便可按照如下方式使用图标： - -```html - - - - -``` ### 相关资料 diff --git a/style/web/components/a-template/index.html b/style/web/components/a-template/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/a-template/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/alert/index.html b/style/web/components/alert/index.html deleted file mode 100644 index 5385cd5c5f..0000000000 --- a/style/web/components/alert/index.html +++ /dev/null @@ -1,454 +0,0 @@ - - - - - - alert - - - - - - - - - -
- - -
-

Alert

-

开发者：yanniswang

-

创建日期：2020-06-01

-

说明：TDesign alert 组件的基本样式

-
- - - - - -
-

基础警告

- - -
- -
-
-
-
-
- 这是一条成功的消息提示 -
-
-
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
-
-
-
-
-
-
- 这是一条警示信息 -
-
-
-
-
-
-
-
-
-
- 高危操作/出错信息提示 -
-
-
-
-
- - -
-
- - -
-

带图标的警告

- - -
- - - -
-
-
- -
-
-
-
- 这是一条成功的消息提示 -
-
-
-
-
-
-
-
- -
-
- 这是一条普通的消息提示 -
-
-
-
-
-
- -
-
-
-
- 这是一条警示信息 -
-
-
-
-
-
-
-
- -
-
-
-
- 高危操作/出错信息提示 -
-
-
-
-
- - - -
-
- - -
-

带操作的警告

-

1)带关闭操作

-
- - -
-
-
-
-
- 这是一条成功的消息提示 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条警示信息 -
-
-
-
- -
-
-
-
-
-
-
-
- 高危操作/出错信息提示 -
-
-
-
- -
-
-
- - - -
-

2)可自定义关闭操作

-
- - -
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
- 知道了 -
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
- 不再提醒 -
-
-
- - - -
-

3)带相关操作

-
- - -
-
-
-
-
- 这是一条成功的消息 -
-
- 相关操作 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
- 相关操作 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条警示信息 -
-
- 相关操作 -
-
-
-
- -
-
-
-
-
-
-
-
- 高危操作/出错信息提示 -
-
- 相关操作 -
-
-
-
- -
-
-
- - -
-
- - -
-

带相关描述文字的警告

-
- -
-
-
- -
-
-
- 这是一条普通的消息提示 -
-
-
- 这是一条普通的消息提示描述，这是一条普通的消息提示描述，这是一条普通的消息提示描述，这是一条普通的消息提示描述， -
-
- 相关操作 -
-
-
-
- -
-
-
- -
-
- - -
-

带折叠的警告

-
- -
-
-
- -
-
-
-
-
- 1. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 2. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 展开更多 -
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
- 1. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 2. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 3. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 4. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 5. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 6. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 收起 -
-
-
-
-
- -
-
-
- -
-
- - - - diff --git a/style/web/components/anchor/index.html b/style/web/components/anchor/index.html deleted file mode 100644 index 1a977100f5..0000000000 --- a/style/web/components/anchor/index.html +++ /dev/null @@ -1,306 +0,0 @@ - - - - - - Anchor - - - - - -
- -
-

Anchor

-

开发者：kobejia

-

创建日期：2020-10-16

-

- 说明：
- tdesign Anchor组件的基本样式
- 锚点左侧line的top偏移距离为24的倍数，如 24*n，高度为对应item的高度; -

-
- - - -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-默认 -
-
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- - -
-

默认

-
- -
-
- -
-
-
- 定义 -
-
- 服务功能 -
-
- 使用说明 -
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
-
-

内容过长换行

-
- -
-
- -
-
-
- 定义 -
-
- 服务功能服务功能服务功能服务功能服务功能服务功能服务功能服务功能服务功能服务功能 -
-
- 使用说明 -
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
-
-

多级锚点

-
- -
-
- -
-
-
- 定义 -
-
- 服务功能 -
-
- 使用说明 -
- 定义 -
-
- 服务功能 -
-
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
- -
-

状态-selected

-
- -
-
-
-
-
-
- 定义 -
-
- 服务功能 -
-
- 使用说明 -
- 定义 -
-
- 服务功能 -
-
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
-
-

尺寸

-

尺寸-默认

-
- -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- -
-
- -
-

尺寸-大

-
- -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- -
-
- -
-

尺寸-小 - -

-
- -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- -
-
-
- - - diff --git a/style/web/components/avatar/index.html b/style/web/components/avatar/index.html deleted file mode 100644 index 05f16af602..0000000000 --- a/style/web/components/avatar/index.html +++ /dev/null @@ -1,273 +0,0 @@ - - - - - - Avatar - - - - - - - - -
- - -
-

Avatar

-

开发者：elsieguo

-

创建日期：2021-08-31

-

说明：TDesign Avatar

-
- - - - - -
-

默认

- - -
- - - - U - - - U - - - -
- - - - -
-

默认

- - -
- - - U - - - U - - -
-
- - -
-

类型

-
- -
- - U - - - U - -
-
- - 王 - - - 王 - -
-
- - - - - - -
-
- - - - - - -
- -
-
- - -
-

尺寸(如果有)

-
- -
- - U - - - 王 - - - - - - - -
-
- - U - - - 王 - - - - - - - -
-
- - U - - - 王 - - - - - - - -
- -
-
- - -
-

头像组合

- - -
- -
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
- - -
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
- -
-
-
- - diff --git a/style/web/components/badge/index.html b/style/web/components/badge/index.html deleted file mode 100644 index d9aedf2f7c..0000000000 --- a/style/web/components/badge/index.html +++ /dev/null @@ -1,254 +0,0 @@ - - - - - - Badge - - - - - - - -
- -
-

Badge

-

开发者：ikeqcheng

-

创建日期：2020-10-09

-

说明：TDesign Badge

-
- - - - -
-

默认

- - -
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- -
-
-
-

颜色

- - -
- -
- - - - -
-
- - - 99+ - -
-
- - - new - -
- -
-
-
-

形状

- - -
- -
- - - 2 - -
-
- - - 99 - -
-
- - - new - -
- -
-
- - -
-

类型

-

1.红点样式徽标数：

-
- -
- - - - -
-
- - 解锁新徽章 - - -
-
- - - - - - -
- -
-

2.数字样式徽标数：

-
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- -
-

3.自定义式徽标数：

-
- - - - new - - -
-
- - -
-

尺寸

-

1.默认大小

-
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- -
-

2.小

-
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- - -
-
-
- - diff --git a/style/web/components/breadcrumb/index.html b/style/web/components/breadcrumb/index.html deleted file mode 100644 index ff4a384d0d..0000000000 --- a/style/web/components/breadcrumb/index.html +++ /dev/null @@ -1,263 +0,0 @@ - - - - - - Breadcrumb - - - - - - - - - -
- - -
-

Breadcrumb

-

开发者：yuiqin

-

创建日期：2020-06-10

-

说明：tdesign breadcrumb组件的基本样式

-
- - - - - -
-

默认

- - -
- - -
- - 页面一 - - - - - - 页面二 - - - - - - 页面三 - -
- - -
- -
- - -
-

状态

- - -
- - -
- - 页面一 - - - - - -
-
- 页面2-1 - -
-
-

页面2-1

-

字数超出需要做隐藏效果

-

页面2-3

-
-
- - - - - - 页面三 - -
- -
- -
- - - -
-
- - -
-

类型

- - -
- - -
- - 页面一 - - - - - - 页面二 - - - - - - 页面三 - -
- - -
- - -
- - -
- - - 页面一 - - - - - - - 页面二 - - - - - - - 页面三 - -
- - -
- - -
- - -
- - 页面一 - - - - - - 页面二 - - - - - - 页面三 - -
- - -
- - -
- - -
- - 页面一 - - - - - -
-
- 页面2-1 - -
-
-

页面2-1

-

页面2-2

-

页面2-3

-
-
- - - - - - 页面三 - -
- - -
- - -
- - -
- - 页面一 - - - - - -
面包屑文案超长这种情况下需要隐藏鼠标上移出现完整信息
- 面包屑文案超长这种情况下需要隐藏鼠标上移出现完整信息 - - - - - - 页面三 - -
- - -
- -
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/button/index.html b/style/web/components/button/index.html deleted file mode 100644 index 7b3d4030ae..0000000000 --- a/style/web/components/button/index.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - - Button - - - - - - -
- -
-

Button

-

开发者：youngerwang / chazzhou

-

创建日期：

-

- 说明：tdesign button 组件的基本样式 -

-
- -
- 禁用 - -
- - - - -
-

组件类型 variant

- -
- - - - - - -
-
- - -
-

主题 theme

- -
- -
- - - - -
-
- - - - -
- -
-
- - -
-

图标按钮

- -
- - - - - - - - -
-
- - -
-

幽灵按钮 ghost

- -
- -
- - - - -
-
- - - - -
-
- - - - -
- -
-
- - -
-

尺寸

-
- -
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
- -
-
- - -
-

块级按钮

-
- -
- - - - -
- -
-
- -
- - - diff --git a/style/web/components/calendar/index.html b/style/web/components/calendar/index.html deleted file mode 100644 index 560a521a32..0000000000 --- a/style/web/components/calendar/index.html +++ /dev/null @@ -1,1305 +0,0 @@ - - - - - - Calendar - - - - - - - - - -
- - -
-

Calendar 日历

-

开发者：yorickili

-

创建日期：2020-10-25

-

说明：TDesign Calendar 组件的基本样式

-
- - - -
-

通用日历面板

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
- 1024 -
-
-
- -
-
- -
-

卡片模式日历

- -
- - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
- 1024 -
-
-
- - - -
-
- -
-

自然月状态

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - -
-
一月
-
- 		-
二月
-
- 		-
三月
-
- 		-
四月
-
-
-
五月
-
- 		-
六月
-
- 		-
七月
-
- 		-
八月
-
-
-
九月
-
- 		-
十月
-
- 		-
十一月
-
- 		-
十二月
-
-
-
-
- -
-
- -
-

自然月状态/卡片模式

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
1月
-
- 		-
2月
-
- 		-
3月
-
-
-
4月
-
- 		-
5月
-
- 		-
6月
-
-
-
7月
-
- 		-
8月
-
- 		-
9月
-
-
-
10月
-
- 		-
11月
-
- 		-
12月
-
-
-
-
- -
-
- -
-

翻阅模式

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2020年11月 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
-
- 2020年12月 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
-
- 2021年1月 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
- -
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/card/index.html b/style/web/components/card/index.html deleted file mode 100644 index cb6417c260..0000000000 --- a/style/web/components/card/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - Card 卡片 - - - - - - - - -
- - -
-

Card 卡片

-

开发者：zhwachen

-

创建日期：2022-03-10

-

说明：Card 卡片

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/cascader/index.html b/style/web/components/cascader/index.html deleted file mode 100644 index 84dc9c23c4..0000000000 --- a/style/web/components/cascader/index.html +++ /dev/null @@ -1,735 +0,0 @@ - - - - - - Cascader - - - - - - - - -
- - -
-

Cascader

-

开发者：bingolin

-

创建日期：2020.10.14

-

说明：tdesign cascader 组件的基本样式

-
- - - - -
-

默认

- - -
- - - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
  • - 西瓜🍉 - -
    • -
  • - 哈密瓜🍈 - -
    • -
-
-
- -
- - - -
-
- - -
-

类型

- - -
- - -
- 云数据库 /Redis / 备机监控 - -
-
-
-
    -
  • - 云数据库 - -
    • -
  • - API网光 - -
    • -
  • - DDOS防护 - -
    • -
  • - 私有网络 - -
    • -
  • - 云服务器总带宽 - -
    • -
  • - 更多1 - -
    • -
  • - 更多2 - -
    • -
-
    -
  • - MySQL - -
    • -
  • - CTSDB - -
    • -
  • - Redis - -
    • -
  • - MongoDB - -
    • -
  • - MariaDB - -
    • -
-
    -
  • - 主机监控 - -
    • -
  • - 备选监控 -
    • -
-
-
- - -
- -
- -
- - 广东 - - - - 广州 - - - - 宝安区 - - - -
-
-
-
    -
  • - - 广东 - -
    • -
  • - - 天津 - -
    • -
  • - - 浙江 - -
    • -
  • - - 上海 - -
    • -
  • - - 山东 - -
    • -
  • - - 安徽 - -
    • -
  • - - 山西 - -
    • -
-
    -
  • - - 广州 - -
    • -
  • - - 深圳 - -
    • -
  • - - 珠海 - -
    • -
  • - - 汕头 - -
    • -
  • - - 佛山 - -
    • -
  • - - 东莞 - -
    • -
  • - - 惠州 - -
    • -
-
    -
  • - - 南山区 - -
    • -
  • - - 宝安区 - -
    • -
  • - - 坪山区 - -
    • -
  • - - 龙岗区 - -
    • -
  • - - 福田区 - -
    • -
  • - - 罗湖区 - -
    • -
  • - - 盐田区 - -
    • -
-
-
- - -
-
- - -
-

状态 - 禁用

- - -
- - - - -
-
- 请选择 - -
-
-
- - 广东 - - - - 广州 - - - - 宝安区 - - - -
-
- - - -
-
- - -
-

状态 - 数据加载

-
- - - -
- -
- 请选择 - -
-
-
- 数据加载中 - -
-
- -
- - - -
-
- - - -
- -
- 请选择 - -
-
-
- 网络异常 - 重新加载 -
-
- -
- - - -
-
- - - -
- -
- 请选择 - -
-
-
- 暂无数据 -
-
- -
- - - -
-
- -
- -
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 加载中 - -
    • -
-
-
- -
-
-
-
    -
  • - - 宝安区 - -
    • -
  • - - 宝安区 - -
    • -
-
-
-
-
- - -
-

状态 - 搜索

-
- - -
- - -
-
-
-
    -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 黑石私有网络/云服务器/数据库
    • -
  • 黑石私有网络/云服务器/数据库
    • -
-
-
- - -
-
- - -
-

尺寸

-
-

尺寸 - 高度 - 小

- - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 高度 - 默认（中）

- - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 高度 - 大

- - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 宽度 - 默认（小）

- - - -
- -
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 宽度 - 大

- - - -
- -
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
-
-
- -
- - - -
-
- - - \ No newline at end of file diff --git a/style/web/components/checkbox/index.html b/style/web/components/checkbox/index.html deleted file mode 100644 index 2f3ac5b055..0000000000 --- a/style/web/components/checkbox/index.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - checkbox - - - - - - - -
- - -
-

Checkbox

-

开发者：yuhaozhuang

-

创建日期：20200526

-

说明：--

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - - -
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/collapse/index.html b/style/web/components/collapse/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/collapse/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/color-picker/index.html b/style/web/components/color-picker/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/color-picker/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/comment/index.html b/style/web/components/comment/index.html deleted file mode 100644 index 2dfda123cc..0000000000 --- a/style/web/components/comment/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - comment - - - - - - - -
- - -
-

Comment

-

开发者：dreamsyang

-

创建日期：2021-09-13

-

说明：TDesign comment 组件的基本样式

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - diff --git a/style/web/components/date-picker/index.html b/style/web/components/date-picker/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/date-picker/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/dialog/index.html b/style/web/components/dialog/index.html deleted file mode 100644 index 001f8e68db..0000000000 --- a/style/web/components/dialog/index.html +++ /dev/null @@ -1,151 +0,0 @@ - - - - - - Dialog - - - - - - -
- - -
-

Dialog 对话框

-

开发者：sheepluo

-

创建日期：2020-05-30

-

说明：TDesign Dialog 组件的基本样式

-
- - - - - -
-

类型

-

对话框类型当前只有两种：默认类型(default)和主类型(primary)。其他类型（error/warning/info/success）暂时没有。

-

两种状态的对话框类名分别为：t-dialog--default/t-dialog--primary。

- -
- - -
-
-
-
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -
-
- - -
- -
-
- -
-
-
- -
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。在日常开发中如果没有特定的一些业务需求，使用组件库进行开发无疑是更便捷高效，而且质量也相对更高的方案。 -
-
- - -
- -
-
- - - -
-
- - -
-

状态

-

对话框的状态只有加载态，而加载态仅有按钮变为加载态，其它地方不变。

- -
- - - - -
-
-
-
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -
-
- - -
- -
-
- - - -
-
- -
-

遮罩层

-

有时候对话框需要显示底部遮罩，可以将用户的注意力全部吸引到对话框。

- -
- - - - -
-
-
-
-
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -
-
- - -
- -
-
-
- - - -
-
- - - -
-

大小

-

最大对话框宽度 960px；最小对话框宽度 480px。

-

由于对话框宽度属于组件 API，因而此处无需 UI 开发宽度样式。

-

当对话框宽度不在 480px ~ 960px 之间时，组件可以抛出 warning 提示。

-
- - - \ No newline at end of file diff --git a/style/web/components/divider/index.html b/style/web/components/divider/index.html deleted file mode 100644 index d833c45eec..0000000000 --- a/style/web/components/divider/index.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - Divider - - - - - - - - - -
- - -
-

Divider

-

开发者：kyrielin

-

创建日期：2020-09-21

-

说明：TDesign Divider

-
- - - - - -
-

水平分割线

- - -
- - -
水平分割线（默认）： -

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
-
水平分割线（虚线）: -

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- -
-
- - -
-

带文字分割线

-
- - -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- 腾讯中 -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- 腾讯左 -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- 腾讯右 -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- - -
-
- - -
-

垂直分割线

-
- - -
- 正直 -
- 进取 -
- 合作 -
- 创新 -
- - -
-
- -
- - - diff --git a/style/web/components/drawer/index.html b/style/web/components/drawer/index.html deleted file mode 100644 index 2599b60d39..0000000000 --- a/style/web/components/drawer/index.html +++ /dev/null @@ -1,154 +0,0 @@ - - - - - - Drawer - - - - - - -
- -
-

Drawer 抽屉

-

开发者：samonxian

-

创建日期：2020-11-12

-

- 说明：TDesign Drawer 组件的基本样式 -

-
- - - - -
-

基础的抽屉

- -
- - -
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
-
- - -
-
- - -
-

带有页脚的抽屉

- -
- - -
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
- - -
-
-
- - -
-
- -
-

内容区域滚动抽屉

- -
- - -
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
- - -
-
-
-
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
-
- -
-
- - -
-

大小

-

- 由于对话框宽度或者高度属于组件 size API，因而此处无需 UI - 开发宽度或者高度样式。 -

-
-
- - diff --git a/style/web/components/dropdown/index.html b/style/web/components/dropdown/index.html deleted file mode 100644 index d40948cd4f..0000000000 --- a/style/web/components/dropdown/index.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - Dropdown - - - - - - -
- - -
-

Dropdown 下拉菜单

-

开发者：terrancewan

-

创建日期：2020-07-22

-

说明：TDesign Dropdown 组件的基本样式

-
- - - - - -
-

类型

-

下拉菜单类型当前只有两种：单层级类型和多层级类型。

- -
- - -
-

单层级类型

-
-
-
操作一
-
操作二
-
-
额外操作三
-
-
-
- -
-

多层级类型

-
-
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
-
-
二级操作
-
二级操作
-
-
-
- - - -
-
- - -
-

状态

-

下拉菜单的状态有normal态、hover态、active态、disable态。

- -
- - - - -
-
-
-
normal态
-
hover态
-
normal态
-
active态
-
normal态
-
-
disable态
-
normal态
-
-
-
- - - -
-
- - -
-

大小

-

默认高度由内容指定，但不超过380px。

-
-
-
-
-
选项1
-
选项2
-
选项3
-
选项4
-
选项5
-
选项6
-
选项7
-
选项8
-
选项9
-
选项10
-
选项11
-
选项12
-
选项13
-
选项14
-
选项15
-
-
-
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/form/index.html b/style/web/components/form/index.html deleted file mode 100644 index 53968f14ed..0000000000 --- a/style/web/components/form/index.html +++ /dev/null @@ -1,352 +0,0 @@ - - - - - - - form - - - - - - - - -
- - -
-

Form

-

开发者：fishcui, harveyhe, kyriexzhang

-

创建日期：2020-11-19

-

说明：TDesign form 组件的基本样式

-
- - - - - -
-

默认

- - -
- - -
-
-
- -
-
-
- -
-
-
- -
-
- -
-
-
- -
-
-
- -
-
- -
-
- - - -
-
- -
-
- -
-
- - - - - - -
-
- - -
-
- -
-
- -
-
- -
- - -
-
- - -
-

状态

- - -
- - -
-

1. 表单布局通过UI布局控制，在此不详述

-
- -
- - - -
- - -
-

2 表单验证状态

-
-
- -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
-
-
- -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
-
-
- -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- -
- -
- - -
- - -
-

3. 表单提示状态

-
-
-
- - - - -
-
-
-
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 - - - -
-
-
-
-
- -
- - -
- - -
-

4. 动态增减表单

-
-
- - - - -
-
-
-
- - - - -
-
- -
- -
-
- - -
-

对齐方式

- -
- - -
-

1.左对齐

-
-
- -
-
-
- -
-
-
-
- -
- -
- - -
-

2.右对齐

-
-
- -
-
-
- -
-
-
-
- -
- - -
- - -
-

3.顶部对齐

-
-
- -
-
-
- -
-
-
-
- -
- - -
- - -
-

4.内联

-
-
-
- -
-
-
- -
-
-
-
-
- -
-
-
- -
-
-
-
- - -
- -
- -
- - -
-

尺寸(如果有)

-
- - -

与各表单大小变化一致，不再赘述

- -
- -
- - - - \ No newline at end of file diff --git a/style/web/components/grid/index.html b/style/web/components/grid/index.html deleted file mode 100644 index b02a1c5d42..0000000000 --- a/style/web/components/grid/index.html +++ /dev/null @@ -1,332 +0,0 @@ - - - - - - - Grid - - - - - - - - - -
- - -
-

Grid

-

开发者：kyrielin

-

创建日期：2020-10-15

-

说明：TDesign Grid

-
- - - - - -
-

基础栅格

- - -
- - -
-
-
-
col-6
-
-
-
col-6
-
-
-
-
-
col-4
-
-
-
col-4
-
-
-
col-4
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
- -
-
- - -
-

左右偏移

- - -
- - -
-
-
-
col-4
-
-
-
col-4 offset-4
-
-
-
-
-
col-4 offset-6
-
-
-
col-6 offset-4
-
-
-
-
-
col-2 offset-6
-
-
-
- -
-
- - -
-

栅格排序

- - -
- - -
-
-
-
col-8 col-pull-4
-
-
-
col-4 col-pull-8
-
-
-
- -
-
- - -
-

排版

- - -
- - -
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
- -
-
- - -
-

对齐

- - -
- - -
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
- -
-
- - -
-

排序

- - -
- - -
-
-
-
1 col-order-4
-
-
-
2 col-order-3
-
-
-
3 col-order-2
-
-
-
4 col-order-1
-
-
-
- -
-
- - -
-

响应式布局

- - -
- - -
-
- -
-
Col
-
-
-
Col
-
-
-
Col
-
-
-
- -
-
- -
- - - - \ No newline at end of file diff --git a/style/web/components/guide/index.html b/style/web/components/guide/index.html deleted file mode 100644 index 7b56d089ca..0000000000 --- a/style/web/components/guide/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - Guide - - - - - - - - -
- - -
-

Guide

-

开发者：zhangpaopao

-

创建日期：2022-08-19

-

说明：TDesign Guide

-
- - - -
- - diff --git a/style/web/components/image-viewer/index.html b/style/web/components/image-viewer/index.html deleted file mode 100644 index c1a0555eb7..0000000000 --- a/style/web/components/image-viewer/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

ImageViewer

-

开发者：lushenyu

-

创建日期：2022/5/22

-

说明：image组件样式添加

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/image/index.html b/style/web/components/image/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/image/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/input-adornment/index.html b/style/web/components/input-adornment/index.html deleted file mode 100644 index b8744b4aca..0000000000 --- a/style/web/components/input-adornment/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - InputAdornment - - - - - - -
- -
- - diff --git a/style/web/components/input-number/index.html b/style/web/components/input-number/index.html deleted file mode 100644 index 4dfbf55008..0000000000 --- a/style/web/components/input-number/index.html +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - - InputNumber - - - - - - - -
- -
-

InputNumber

-

Kyrielin

-

创建日期：2020-11-26

-

说明：TDesign InputNumber 组件

-
- - - - -
-

组件类型

-

1. 输入居中，两侧调整数值：

- - -
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
-
- -

2. 输入居左，右侧调整数值：

-
-
- - - - - - -
- -
-
-
- -
- - -
-

组件大小

-

1.两侧型数字输入框提供小、中（默认）

- -
- -
- - - - - - -
- -
-
- -
- -
- - - - - - -
- -
-
-
- -

2.右侧型数字输入框提供中（默认）、大

-
-
- - - - - - -
- -
-
- -
- -
- - - - - - -
- -
-
-
- -
- -
-

禁用

- -
- -
- - - - - - -
- -
-
-
- - - - - - -
- -
-
-
-
- -
-
- - - \ No newline at end of file diff --git a/style/web/components/input/index.html b/style/web/components/input/index.html deleted file mode 100644 index 470a663540..0000000000 --- a/style/web/components/input/index.html +++ /dev/null @@ -1,348 +0,0 @@ - - - - - - Input - - - - - - -
- -
-

Input

-

开发者：JrainLau

-

创建日期：2020-05-14

-

说明：TDesign Input 组件

-
- - - - -
-

组件类型

- - -
- -

1.基础输入框

-
-
- -
-
- -
-

2.文本域输入框

-
-
- -
-
-
- - 5/150 -
-
- -
-

3.前后置标签输入框

-
-
-
- -
-
- .com -
-
-
-
-
- Http:// -
-
- -
-
- .com -
-
-
- -
-

4.组合输入框

-
-
-
- -
-
- -
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-  -  -
- -
-
- -
-
- -
-
-
- -
- -
-
-
-
-
- -
- -
-
-
- -
-

5.可清空内容输入框

-
-
- - - - -
-
- -
-

6.带icon输入框（包含密码输入框）

-
-
- - - - - - - -
-
-
- - - - - - - -
-
- -
- - -
-

组件状态

- - -
-
-

1.正常

-
-
- -
-
-
- -
-
-

2.禁用

-
-
- -
-
-
- -
-
-

3.状态

-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-

4.带额外内容提示

-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- -
-
-

5.带状态图标提示

-
-
- - - - -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 - - - -
-
-
-
- - -
-

尺寸(如果有)

-
-

1.不同高度尺寸：高，低

-
-
- -
-
-
- -
-
- - - - -
-
- - diff --git a/style/web/components/layout/index.html b/style/web/components/layout/index.html deleted file mode 100644 index 75f3cd21bf..0000000000 --- a/style/web/components/layout/index.html +++ /dev/null @@ -1,164 +0,0 @@ - - - - - - Layout - - - - - - - - -
- - -
-

Layout

-

开发者：kyrielin

-

创建日期：2020-11-9

-

说明：TDesign Layout

-
- - - -
-

侧边导航布局

- - -
- - -
-
- -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
-
- -
- -
- - -
-
-
- Header -
-
- -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
-
-
- -
- -
- - -
-
-
- Header -
-
- -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
-
-
- - - -
-
-
- Header -
-
-
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
- -
-
-
- -
-
- -
-

顶部导航布局

- - -
- - -
-
-
- Header -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
- -
-
- -
- - - diff --git a/style/web/components/list/index.html b/style/web/components/list/index.html deleted file mode 100644 index 4bada0bdfa..0000000000 --- a/style/web/components/list/index.html +++ /dev/null @@ -1,848 +0,0 @@ - - - - - - list - - - - - - - -
- - -
-

List

-

开发者：JrainLau

-

创建日期：2020-06-05

-

说明：TDesign list 组件的基本样式

-
- - - - - -
-

类型

- - -
-

1.1.1 基础列表

- -
-
    -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
-
- - -
- -
-

1.1.2 线性区分列表

- -
-
    -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
-
- - -
- -
-

1.1.3 斑马纹区分列表

- -
-
    -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
-
- - -
- -
-

1.2 多行文字列表

- -
-
    -
  • -
    -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
- -
-

1.3 基础图文列表

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
- -
-

1.4.1 带操作列表

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
-
- - -
- -
-

1.4.1.1* 带操作列表（垂直）

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
-
- - -
- -
-

1.4.2 带图标操作

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    • -
-
- - -
- -
-

1.5* 额外内容

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - - -
    - -
    -
    额外内容
    -
    -
    • -
-
- - -
-
- - -
-

状态

- -
-

1 滚动加载更多

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - 正在加载中，请稍等 -
-
- - -
- -
-

2 点击加载更多

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- 点击加载更多 -
-
- - -
- -
-

3 翻页

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
-
- -
共 658 项数据
- - -
- -
- -
    -
  • 1
    • -
    • -
  • 50
    • -
  • 51
    • -
  • 52
    • -
  • 53
    • -
  • 54
    • -
    • -
  • 90
    • -
- -
- -
-
-
-
- - -
- -
-

4 滚动条

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
- -
-

5 多内容

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
-
- - - -
-

尺寸

-
- -

尺寸-小

-
-
    -
  • 列表内容列表内容
    • -
-
- -
- -
- -

尺寸-中（默认）

-
-
    -
  • 列表内容列表内容
    • -
-
- -
- -
- -

尺寸-大

-
-
    -
  • 列表内容列表内容
    • -
-
- -
- -
- - - diff --git a/style/web/components/loading/index.html b/style/web/components/loading/index.html deleted file mode 100644 index 474c64cff5..0000000000 --- a/style/web/components/loading/index.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - - - Loading - - - - - - - - -
- - -
-

Loading

-

开发者：wintyzhou

-

创建日期：2020-11-15

-

说明：加载样式

-
- - - - - -
-

默认

- - -
-
- - - - - - -
-
-
- - -
-

状态

- - -
- - - - -
- - - - - -
-
- - - 加载中... - - -
-
- - - - 拼命加载中... - - -
- - - -
-
- - -
-

尺寸(如果有)

-
- - -
- 小： - - - - - -
-
-
- 中： - - - - - -
-
-
- 大： - - - - - -
-
- -
- -
- -
-

遮罩及居中

-
- - - - - - - - - - -
-
-
- -
- - - - \ No newline at end of file diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less deleted file mode 100644 index c868f6d4b5..0000000000 --- a/style/web/components/menu/_index-v2.less +++ /dev/null @@ -1,934 +0,0 @@ -// 组件允许单个组件打包，因此默认引入公共基础样式 - -@import "../../base.less"; - -@import "./_var-v2.less"; - -@import "./_mixin.less"; - -@import "../../mixins/_layout.less"; - -@import "../../mixins/_reset.less"; - -a.@{prefix}-menu__item { - text-decoration: none; - color: unset; - - &:hover, - &:active { - color: inherit; - } -} - -// head-menu -.@{prefix}-head-menu { - .reset; - - position: relative; - width: 100%; - background-color: @menu-theme-light; - - &__inner { - display: flex; - height: @comp-size-xxxl; - - li + li { - margin-left: @comp-margin-xs; - } - - .@{prefix}-menu { - &:first-child { - margin-left: @comp-margin-xxl; - } - } - } - - .@{prefix}-menu__logo:not(:empty) { - height: 100%; - margin-right: @comp-margin-xxxl; - } - - .@{prefix}-menu__container { - flex: 1; - display: flex; - align-items: center; - overflow: hidden; - } - - .@{prefix}-menu { - display: flex; - } - - .@{prefix}-menu__operations { - &:not(:empty) { - position: relative; - display: flex; - align-items: center; - height: var(--td-comp-size-xxxl); - line-height: 64px; - text-align: right; - margin-right: @comp-margin-s; - overflow: hidden; - } - - &-icon { - width: 40px; - height: 40px; - padding: @comp-paddingTB-s @comp-paddingLR-s; - line-height: 40px; - } - } - - .@{prefix}-submenu { - - > .@{prefix}-menu__item { - overflow: unset; - - &::before { - content: ""; - display: block; - position: absolute; - bottom: -20px; - left: 0; - right: 0; - height: 20px; - } - } - } - - .@{prefix}-menu__item { - min-width: @head-menu-item-width; - height: @head-menu-item-height; - line-height: @head-menu-item-height; - justify-content: center; - transition: all @anim-duration-slow cubic-bezier(.645, .045, .355, 1); - } - - &__submenu { - padding-left: 0; - border-top: 1px solid @head-menu-submenu-border-color; - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: #fff; - - &__bar { - background-color: @submenu-dark-item-active-color; - } - - &__nav-item { - color: @font-gray-2; - - &-wrapper { - --ripple-color: @menu-item-animation-bg--light; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-light-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - } - - --ripple-color: @menu-item-animation-bg--light; - } - } - } - - .@{prefix}-menu__popup { - top: 60px; - min-width: 100%; - box-sizing: content-box; - transform-origin: center top; - - .@{prefix}-menu__item { - display: flex; - align-items: center; - justify-content: flex-start; - white-space: nowrap; - padding-left: @comp-paddingLR-l; - padding-right: @comp-paddingLR-l; - min-width: 100%; - margin-left: 0; - color: @head-menu-popup-item-color; - box-sizing: border-box; - } - - li + li { - margin-top: @comp-margin-xs; - margin-left: 0; - } - } - - .@{prefix}-submenu-icon { // to remove - margin-left: @comp-margin-s; - } - - .@{prefix}-fake-arrow { - margin-left: @comp-margin-s; - } - - // 多层情况 - .@{prefix}-menu__popup-inner { - - .@{prefix}-menu__popup { - top: -8px; - left: calc(100% + 16px); - transform-origin: left top; - } - - .@{prefix}-menu__item { - text-align: left; - padding: 0 @comp-paddingLR-l; - justify-content: space-between; - } - - .@{prefix}-submenu-icon { - transform: rotate(270deg); - } - } -} - -// default-menu -.@{prefix}-default-menu { - .reset; - - position: relative; - width: @default-menu-width; - display: inline-block; - background: @menu-theme-light; - transition: width @anim-duration-slow cubic-bezier(.645, .045, .355, 1); - white-space: nowrap; - - &.@{prefix}-menu--dark { - background: @menu-theme-dark; - - .@{prefix}-menu__logo:not(:empty) { - border-bottom-color: @menu-border-color--dark; - } - - .@{prefix}-menu__operations:not(:empty) { - border-top-color: @menu-border-color--dark; - } - - .@{prefix}-menu__item { - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { - background-color: @menu-border-color--dark; - } - - &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - background-color: @default-menu-active-color; - } - - &.@{prefix}-is-opened { - color: @menu-theme-light; - } - - &.@{prefix}-is-opened.@{prefix}-is-active { - background-color: transparent; - } - } - - .@{prefix}-menu__popup { - background: @menu-theme-dark; - - .@{prefix}-menu__item { - - &.@{prefix}-is-active { - background-color: @default-menu-active-color; - } - } - } - - .@{prefix}-menu-group__title { - color: @menu-menu-group-title-color--dark; - } - - &.@{prefix}-is-collapsed .@{prefix}-menu-group__title:after { - background-color: @menu-group-title-bg--collapse--dark; - } - } - - &.@{prefix}-is-collapsed { - width: @default-menu-collapse-width; - - .@{prefix}-menu { - - .@{prefix}-menu__item { - padding: 0 14px; - justify-content: center; - } - } - - .@{prefix}-fake-arrow { - display: none; - } - - .@{prefix}-menu__item { - text-overflow: initial; - - &.@{prefix}-is-active.@{prefix}-is-opened { - color: @menu-theme-light; - background-color: @default-menu-active-color; - - .t-icon { - color: @menu-theme-light; - } - } - - &.@{prefix}-menu__item--plain::after { - content: ""; - } - - span { - display: none; - } - - .t-icon { - margin-right: initial; - } - } - - .@{prefix}-menu__popup { - - .@{prefix}-menu__item { - padding-left: @popup-item-padding-left; - justify-content: flex-start; - - span { - display: inline; - } - - &.@{prefix}-menu__item--plain::after { - content: ""; - } - } - - .@{prefix}-fake-arrow { - display: block; - } - } - - .@{prefix}-submenu { - &-icon { - display: none; - } - - .@{prefix}-menu__popup { - - .@{prefix}-submenu-icon { - display: initial; - } - } - - > .@{prefix}-menu__item { - min-width: initial; - - &::after { - content: ""; - display: block; - position: absolute; - right: -20px; - top: 0; - bottom: 0; - width: 20px; - } - } - } - - .@{prefix}-menu-group__title { - padding: 0; - font-size: 0; - box-sizing: border-box; - - &::after { - content: ""; - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - height: 1px; - width: 20px; - background: @menu-group-title-bg--collapse; - } - } - - .@{prefix}-menu__operations { - text-align: center; - - &-icon { - display: block; - } - } - } - - &__inner { - display: flex; - flex-direction: column; - height: 100%; - - .@{prefix}-menu__logo:not(:empty) { - width: 100%; - height: var(--td-comp-size-xxxl); - border-bottom: 1px solid @menu-border-color; - } - - .@{prefix}-menu { - padding: @comp-paddingTB-l @comp-paddingLR-s; - position: relative; - // overflow: hidden auto; - flex: 1; - - &--scroll { - overflow-y: auto; - } - } - - .@{prefix}-menu-group { - &__title { - position: relative; - padding: 20px 16px 8px; - height: 48px; - line-height: 20px; - color: @menu-menu-group-title-color; - font-size: @menu-extra-font-size; - box-sizing: border-box; - } - } - } - - .@{prefix}-submenu { - margin-bottom: @comp-margin-xs; - position: relative; - } - - .@{prefix}-menu__operations { - &:not(:empty) { - width: 100%; - position: relative; - padding: @comp-paddingTB-s @comp-paddingLR-l; - top: 0; - left: 0; - text-align: left; - border-top: solid 1px @menu-border-color; - box-sizing: border-box; - } - - &-icon { - width: 32px; - height: 32px; - padding: @comp-paddingTB-s @comp-paddingLR-s; - cursor: pointer; - color: @menu-operations-color; - box-sizing: border-box; - } - } - - .@{prefix}-menu__item { - - &.@{prefix}-is-opened { - margin: @comp-margin-xs 0; - color: @menu-light-active-color; - background-color: unset; - - .t-icon { - color: @menu-light-active-color; - } - } - } - - .@{prefix}-menu__dropdown { - // display: none; - // position: static; - overflow: hidden; - transition: max-height @anim-duration-slow cubic-bezier(.645, .045, .355, 1); - // height: 0; - - .@{prefix}-menu__item { - padding-left: 64px; - } - - &--show { - display: block; - } - } - - .@{prefix}-menu__sub { - padding: 0; - max-height: 0; - overflow: hidden; - transition: max-height @anim-duration-base @anim-time-fn-easing; - - &.@{prefix}-is-opened { - max-height: 1000px; - } - - .@{prefix}-menu__item { - padding-left: var(--padding-left, 32px); - } - } - - .@{prefix}-menu__popup { - top: 0; - left: calc(100% + 16px); - } - - .@{prefix}-menu__item { - position: relative; - margin: @comp-margin-xs 0; - padding: 0 10px 0 16px; - height: @default-menu-item-height; - line-height: @default-menu-item-height; - border-bottom: 0; - text-align: left; - border-radius: @border-radius-default; - transition: - background-color @anim-duration-slow @anim-time-fn-easing, - padding @anim-duration-slow @anim-time-fn-easing; - box-sizing: border-box; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - - .t-icon { - width: 20px; - height: 20px; - } - - .@{prefix}-fake-arrow { - margin-left: auto; - } - - &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - color: @menu-theme-light; - background-color: @default-menu-active-color; - - .t-icon { - color: @menu-theme-light; - } - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { - background: @menu-light-active-bg; - - & + .@{prefix}-menu__item { - margin-top: @comp-margin-xs; - } - } - } -} - -// menu -.@{prefix}-menu { - color: @menu-color-light; - font: @menu-font-size; - .list-style-none(); - - &--dark { - color: @menu-color-dark; - } - - &__logo { - &:not(:empty) { - display: flex; - align-items: center; - } - } - - .@{prefix}-submenu { - position: relative; - - &.@{prefix}-is-active { - - > .@{prefix}-menu__item { - color: @menu-theme-dark; - - .t-icon { - color: @menu-theme-dark; - } - } - } - - .@{prefix}-submenu-icon { - width: 16px; - height: 16px; - } - - &.@{prefix}-is-opened { - - & .@{prefix}-submenu-icon { - transform: scaleY(-1); - } - } - } - - &::-webkit-scrollbar { - display: none; - } - - &__spacer { - &::before { - content: ""; - display: block; - position: absolute; - z-index: 1; - } - - @horizontal-spacer: 16px; - - &--left::before { - left: -@horizontal-spacer; - width: @horizontal-spacer; - top: 0; - bottom: 0; - } - - &--top::before { - top: -20px; - left: 0; - right: 0; - height: 20px; - } - } - - &__popup-wrapper { - box-sizing: border-box; - max-height: var(--popup-max-height, 364px); - overflow-y: scroll; - overflow-x: hidden; - } - - &__item { - position: relative; - display: flex; - align-items: center; - height: 40px; - line-height: 40px; - text-align: center; - color: @menu-item-color--light; - cursor: pointer; - // overflow: hidden; - text-overflow: ellipsis; - border-radius: @border-radius-default; - - ::selection { - background: transparent; - } - - &-spacer { - overflow: unset; - - &::before { - content: ""; - display: block; - position: absolute; - z-index: 1; - } - - @horizontal-spacer: 8px; - - &--right::before { - right: -@horizontal-spacer; - width: @horizontal-spacer; - top: 0; - bottom: 0; - } - - &--bottom::before { - bottom: -20px; - left: 0; - right: 0; - height: 20px; - } - } - - a { - color: unset; - text-decoration: none; - - &.@{prefix}-menu__item-link { - color: unset; - } - } - - &.@{prefix}-is-active { - color: @menu-item-active-color--light; - background-color: @menu-item-active-bg--light; - } - - &.@{prefix}-is-opened { - font-weight: 500; - color: @menu-item-active-color--light; - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - background-color: @menu-item-hover-bg--light; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - cursor: not-allowed; - } - - --ripple-color: @menu-item-animation-bg--light; - } - - &__content { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .t-icon + &__content, - .t-icon + &__item-link { - margin-left: @comp-margin-s; - } - - &--dark { - - &.@{prefix}-head-menu { - background-color: @menu-theme-dark; - } - - .@{prefix}-menu__item { - color: @menu-item-color--dark; - - &.@{prefix}-is-active { - color: @menu-item-active-color--dark; - background-color: @menu-item-active-bg--dark; - } - - &.@{prefix}-is-opened { - color: @menu-item-active-color--dark; - - .t-icon { - color: @menu-item-active-color--dark; - } - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - color: @menu-item-hover-color--dark; - background-color: @menu-item-hover-bg--dark; - } - - --ripple-color: @menu-item-animation-bg--dark; - } - - .@{prefix}-head-menu__submenu { - border-top: 1px solid transparent; - } - - .@{prefix}-menu__operations { - &-icon { - color: @menu-theme-light; - - &:hover { - background-color: @menu-item-active-bg--dark; - } - } - } - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: @gray-color-11; - - &__nav-item { - color: #fff; - - &-wrapper { - --ripple-color: @gray-color-9; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-dark-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-dark-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - --ripple-color: @gray-color-9; - } - } - } - - &__popup { - max-height: 0; - overflow: hidden; - transition: - max-height @anim-duration-moderate @anim-time-fn-easing, - width @anim-duration-moderate @anim-time-fn-easing, - opacity @anim-duration-base linear; - position: absolute; - background: @menu-theme-light; - z-index: @menu-outer-zindex; - border-radius: @border-radius-medium; - opacity: 0; - .list-style-none(); - - &-wrapper { - padding: @comp-paddingTB-s @comp-paddingLR-s; - padding-right: 0; - height: 100%; - list-style: none; - margin: 0; - } - - .@{prefix}-fake-arrow { - margin-left: @comp-margin-s; - } - - &.@{prefix}-is-vertical { - max-height: unset; - width: 0; - - &.@{prefix}-is-opened { - width: var(--popup-width, 216px); - } - - .@{prefix}-menu__item { - padding-left: @comp-paddingLR-l; - padding-right: @comp-paddingLR-l; - margin: 4px 0; - } - } - - &.@{prefix}-is-horizontal { - .@{prefix}-menu__item { - padding-left: @comp-paddingLR-l; - padding-right: @comp-paddingLR-l; - white-space: nowrap; - } - - li + li { - margin-top: 4px; - } - } - - &.@{prefix}-is-opened { - max-height: var(--popup-max-height, 364px); - opacity: 1; - box-shadow: @menu-default-shadow; - overflow: visible; - - .@{prefix}-menu__popup { - top: 0; - left: calc(100% + @horizontal-spacer); - overflow-y: auto; - - // &::before { - // content: ""; - // display: block; - // position: absolute; - // left: -@horizontal-spacer; - // width: @horizontal-spacer; - // top: 0; - // bottom: 0; - // } - @horizontal-spacer: 16px; - } - } - - .@{prefix}-menu__item { - color: @menu-popup-item-color; - - + .@{prefix}-menu__item { - margin-left: 0; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - } - - &.@{prefix}-is-active { - color: @menu-popup-item-active-color; - background-color: @menu-popup-item-active-bg; - } - - &:hover:not(.@{prefix}-is-active) { - background-color: @menu-popup-item-hover-bg; - } - } - - &--dark { - background: @menu-theme-dark; - - .@{prefix}-menu__item { - color: @menu-item-color--dark; - border-radius: @border-radius-default; - - --ripple-color: @menu-item-animation-bg--dark; - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - &.@{prefix}-is-active { - color: @menu-item-active-color--dark; - background-color: @menu-item-active-bg--dark; - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - color: @menu-item-hover-color--dark; - background-color: @menu-item-hover-bg--dark; - } - - &:hover:not(.@{prefix}-is-active) { - color: @menu-item-hover-color--dark; - background-color: @menu-item-hover-bg--dark; - } - } - } - } - - &__operations { - &-icon { - margin-right: @comp-margin-l; - border-radius: @border-radius-default; - color: @menu-item-color--light; - transition: background-color @anim-duration-moderate @anim-time-fn-easing; - - &:hover { - background-color: @menu-item-active-bg--light; - } - } - } -} - -// opacity-transition -.@{prefix}-opacity-transition { - transition: opacity @anim-duration-slow cubic-bezier(.55, 0, .1, 1); -} - -.horizontal-collapse-transition -.@{prefix}-submenu__title -.@{prefix}-submenu__icon-arrow { - transition: @anim-duration-base; - opacity: 0; -} diff --git a/style/web/components/menu/_var-v2.less b/style/web/components/menu/_var-v2.less deleted file mode 100644 index 62a94b68e0..0000000000 --- a/style/web/components/menu/_var-v2.less +++ /dev/null @@ -1,107 +0,0 @@ -// 组件变量 -// 名称可按如下规则定义： -// -[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"; - -// 颜色 -@menu-theme-light: #fff; -@menu-theme-dark: @gray-color-13; -@menu-theme-primary: @brand-color; -@menu-color-light: @font-gray-2; -@menu-color-dark: @font-white-2; - -@menu-item-color--light: @font-gray-2; -@menu-item-color--dark: rgba(255, 255, 255, .55); -@menu-item-active-bg--light: @gray-color-2; -@menu-item-active-bg--dark: @gray-color-9; -@menu-item-active-color--light: @font-gray-1; -@menu-item-active-color--dark: @text-color-anti; -@menu-item-hover-color--light: @font-gray-2; -@menu-item-hover-color--dark: rgba(255, 255, 255, .55); -@menu-item-hover-bg--light: @gray-color-1; -@menu-item-hover-bg--dark: @gray-color-10; -@menu-item-animation-bg--light: @gray-color-3; -@menu-item-animation-bg--dark: @gray-color-11; - -@menu-item-disabled-color: @font-gray-4; -@menu-item-disabled-color-dark: @font-white-4; - -@menu-menu-group-title-color: @font-gray-3; -@menu-menu-group-title-color--dark: @font-white-3; -@menu-group-title-bg--collapse: @gray-color-3; -@menu-group-title-bg--collapse--dark: @gray-color-10; - -@menu-light-active-color: @font-gray-1; -@menu-dark-active-color: @text-color-anti; - -@menu-light-active-bg: @gray-color-2; -@menu-light-hover-bg: @gray-color-1; -@menu-dark-active-bg: @gray-color-9; -@menu-dark-hover-bg: @gray-color-10; - -@submenu-item-color: @font-gray-2; -@submenu-item-active-color: @brand-color; -@submenu-dark-item-active-color: #4582e6; - -@menu-border-color: @component-stroke; -@menu-border-color--dark: @gray-color-10; - -@menu-popup-bg-color: #fff; -@menu-popup-item-color: @font-gray-1; -@menu-popup-item-hover-bg: @gray-color-1; -@menu-popup-item-active-color: @brand-color; -@menu-popup-item-active-bg: #ecf2fe; -@head-menu-popup-item-color: @font-gray-2; -@head-menu-popup-item-active-color: @font-gray-1; -@head-menu-popup-item-active-bg: @gray-color-2; - -@menu-head-item-color: @font-gray-2; - -@menu-operations-color: @font-gray-1; - -// head menu -@head-menu-item-width: 104px; -@head-menu-item-height: 40px; -@head-menu-submenu-border-color: @gray-color-3; - -// default menu -@default-menu-width: 232px; -@default-menu-collapse-width: 64px; -@default-menu-active-color: @brand-color; -@default-menu-item-height: 36px; - -// popup -@popup-item-padding-left: @comp-paddingTB-l @comp-paddingLR-l; - -// 高度 -@menu-height-default: 32px; // low -@menu-height-high: 40px; - -// z-index -@menu-outer-zindex: 1000; - -// 字号 -@menu-font-size: @font-body-medium; -@menu-extra-font-size: @font-body-small; - -// box-shadow -@menu-head-shadow: 0 8px 10px -5px rgba(0, 0, 0, .08), - 0 16px 24px 2px rgba(0, 0, 0, .04), 0 6px 30px 5px rgba(0, 0, 0, .05); -@menu-head-submenu-shadow: inset 0 -1px 0 0 #eee; -@menu-default-shadow: 0 5px 5px -3px rgba(0, 0, 0, .1), - 0 8px 10px 1px rgba(0, 0, 0, .06), 0 3px 14px 6px rgba(0, 0, 0, .05); - -// transition -@fade-linear-transition: opacity 200ms linear; -@md-fade-transition: transform 300ms cubic-bezier(.23, 1, .32, 1), - opacity 300ms cubic-bezier(.23, 1, .32, 1); diff --git a/style/web/components/menu/_var.less b/style/web/components/menu/_var.less index fe9416378e..90a2919060 100644 --- a/style/web/components/menu/_var.less +++ b/style/web/components/menu/_var.less @@ -25,7 +25,7 @@ @menu-item-color--dark: @text-color-anti; @menu-item-active-bg--light: @brand-color-light; @menu-item-active-bg--dark: @brand-color; -@menu-item-active-color--light: @brand-color-active; +@menu-item-active-color--light: @brand-color; @menu-item-active-color--dark: @text-color-anti; @menu-item-hover-color--light: @text-color-primary; @menu-item-hover-bg--light: @bg-color-container-hover; @@ -41,7 +41,7 @@ @menu-group-title-bg--collapse: @component-stroke; @menu-group-title-bg--collapse--dark: @gray-color-10; -@menu-light-active-color: @brand-color-active; +@menu-light-active-color: @brand-color; @menu-dark-active-color: @text-color-anti; @menu-light-active-bg: @bg-color-secondarycontainer-hover; diff --git a/style/web/components/menu/index.html b/style/web/components/menu/index.html deleted file mode 100644 index 56dfc5ce13..0000000000 --- a/style/web/components/menu/index.html +++ /dev/null @@ -1,881 +0,0 @@ - - - - - - - menu - - - - - - - - -
- - -
-

Menu

-

开发者：erikqin

-

创建日期：2020-06-10

-

说明：TDesign menu 组件的基本样式

-
- - - - - -
-

默认

- -

顶部导航

- -
- -
-

1.单层导航

-
-
-
- -
    -
  • 内容列表一
    • -
  • 已选内容
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
- - - -
-
-
-
- -
- -
- -
-

2.双层导航

-
-
-
- -
    -
  • - 菜单1 -
    • -
  • - 菜单2 -
    • -
  • - 菜单3 -
    • -
  • 菜单4
    • -
-
- - - -
-
-
    -
  • 1-1
    • -
  • 1-2
    • -
  • 1-3
    • -
-
-
- -
- -
- -
-

3.多层收纳导航

-
-
-
- -
    -
  • - 菜单1 - -
      -
    • 子菜单1-1
      • -
    • 子菜单1-2
      • -
    • 子菜单1-3
      • -
    -
    • -
  • - 菜单2 -
      -
    • 子菜单2-1
      • -
    • 子菜单2-2
      • -
    • 子菜单2-3
      • -
    -
    • -
  • - 菜单3 -
      -
    • 子菜单3-1
      • -
    • 子菜单3-2
      • -
    • 子菜单3-3
      • -
    -
    • -
-
- - - -
-
-
- -
-
- -
    -
  • - 菜单11 - -
      -
    • 子菜单1-1
      • -
    • 子菜单1-2
      • -
    • 子菜单1-3
      • -
    -
    • -
  • - 菜单2 -
      -
    • 子菜单2-1
      • -
    • 子菜单2-2
      • -
    • 子菜单2-3
      • -
    -
    • -
  • - 菜单3 -
      -
    • 子菜单3-1
      • -
    • 子菜单3-2
      • -
    • 子菜单3-3
      • -
    -
    • -
-
- - - -
-
-
-
- -
- -
- -
-

4.可自定义顶部导航

-
-
-
- -
    -
  • 内容列表一
    • -
  • 已选内容
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
-
自定义内容区域
-
-
-
-
- -
- -

侧边导航

-
- -
-

1.单层导航

-
-
-
- -
    -
  • - - 侧边内容一 -
    • -
  • - - 已选内容 -
    • -
  • - - 侧边内容二 -
    • -
  • - - 侧边内容三 -
    • -
-
- -
-
-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
- -
- -
- -
-

2.平铺式侧边导航

-
-
-
- -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
-
- -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
- -
- -
- -
-

3.弹层式侧边导航

-
-
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
- -
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
- -
- -
- -
-

4.带分类的侧边导航

-
-
-
- -
    -
    -
    - Classification A -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
    -
    - Classification A -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
-
- -
-
-
- -
-
- -
- -
-

5.可自定义侧边导航

-
-
-
- -
    -
    自定义内容
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
    自定义内容
    -
-
- -
-
-
- -
-
-
- - -
-

状态

- -

顶部导航

- -
- - -
-

1.常规状态（仅一种）

-
-
-
- -
    -
  • 内容列表一
    • -
  • 已选内容
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
- - - -
-
-
-
- -
- -

侧边导航

-
- - -
-

1.展开态（有icon和无icon）

-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
- -
- -
- - -
-

2.收起态（有icon和无icon）

-
-
-
- -
    -
    -
  • - - 侧边内容一 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
  • - - 内容列表二 - -
    • -
  • - - 内容列表三 - -
-
- -
-
-
- - -
-
- -
    -
    -
  • - 侧边内容一 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
  • - 内容列表二 - -
    • -
  • - 内容列表三 - -
-
- -
-
-
-
- -
-
- - -
-

尺寸(如果有)

- -

顶部导航

-
- -

1.唯一尺寸

-
-
-
- -
    -
  • 内容列表一
    • -
  • - 已选内容 -
    -
      -
    • 内容列表
      • -
    • 已选内容
      • -
    • 内容列表
      • -
    -
    -
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
- - - -
-
-
- -
- -

侧边导航

-
- -

1.可根据业务诉求定制宽度，宽度范围200-256px，中间宽度以8的倍数为档位变化

-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
- -
-
- -
- - - - \ No newline at end of file diff --git a/style/web/components/message/index.html b/style/web/components/message/index.html deleted file mode 100644 index 00d603d57c..0000000000 --- a/style/web/components/message/index.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - - - Message - - - -
  • - - - - -
    - - -
    -

    Message

    -

    开发者：p_rqpeng

    -

    创建日期：20200512

    -

    说明：tdesign message 组件的基本样式

    -
    - - - - - -
    -

    默认

    - -
    - -
    -
    - - 默认全局提示 -
    -
    - - - -
    -
    - - -
    -

    类型

    -
    -

    1.常规全局提示：

    - -
    -
    - - 用于表示普通操作信息提示 -
    -
    -
    -
    - - 用于表示操作顺利达成 -
    -
    -
    -
    - - 用于表示操作引起一定后果 -
    -
    -
    -
    - - 用于表示操作引起严重的后果 -
    -
    -
    -
    - - 用于帮助用户操作的信息提示 -
    -
    -
    -
    - - 用于表示操作正在生效的过程中 -
    -
    - - - -
    -
    -

    2.带关闭操作全局提示：

    - -
    -
    - - 用于表示普通操作信息提示，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于表示操作顺利达成，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于表示操作引起一定后果，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于表示操作引起严重的后果，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于用户操作行为的辅助提醒，可关闭，通常信息较长 - -
    -
    - - -
    -
    - - -
    -

    组件状态

    - - -
    - -

    1.加载结果展示成功/失败：

    - -
    -
    - - 用于表示操作正在生效的过程中 -
    -
    -
    -
    - - 用于表示操作顺利达成 -
    -
    -
    -
    - - 用于表示操作失败中断 -
    -
    - - -
    -
    - - - - -
    -

    组件大小

    - -
    -

    1.常规全局提示宽度自适应不做限制：

    - -
    -
    - - 用于表示普通操作信息提示 -
    -
    -
    -
    - - 用于表示普通操作信息提示文案较长文案较长文案较长文案较长文案较长 -
    -
    - - - -
    - -
    -

    2.带关闭操作全局提示最小宽度400px：

    - - -
    -
    - - 用于表示普通操作信息提示，可关闭 - -
    -
    - - - -
    - -
    - - - - \ No newline at end of file diff --git a/style/web/components/notification/index.html b/style/web/components/notification/index.html deleted file mode 100644 index a210758ba1..0000000000 --- a/style/web/components/notification/index.html +++ /dev/null @@ -1,385 +0,0 @@ - - - - - - notification - - - - - - - - - -
    - - -
    -

    Notification

    -

    开发者：zackguo

    -

    创建日期：2020-06-03

    -

    说明：TDesign notification 组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    -
    -
    -
    - 标题名称 - -
    -
    这是一条可以自动关闭的消息通知
    -
    -
    -
    - - -
    -
    - - -
    -

    类型

    - - -
    -

    1.基础消息通知：

    - -
    -
    -
    -
    - 标题名称 - -
    -
    这是一条可以自动关闭的消息通知
    -
    -
    -
    - -
    -
    -

    2.带图标消息通知：

    - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    这是一条普通消息通知
    -
    -
    -
    - -
    -
    -

    3.带操作消息通知：

    - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    这是一条消息通知
    -
    - 查看详情 -
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    这是一条消息通知
    -
    - 重启 - 稍后提醒我 -
    -
    -
    -
    - -
    -
    - - -
    -

    状态

    -
    -

    1.鼠标 hover 态 & Click 态：

    - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    这是一条消息通知
    -
    - 重启 - 稍后提醒我 -
    -
    -
    -
    - -
    - -
    -

    2.并列出现状态：

    - -
    -
    -
    - -
    -
    -
    - 成功通知 - -
    -
    这是一条成功的消息通知
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    这是一条普通的消息通知
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 警示通知 - -
    -
    这是一条警示的消息通知
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 危险通知 - -
    -
    这是一条危险的消息通知
    -
    -
    -
    - -
    -
    - - -
    -

    尺寸

    -
    -

    1.宽度固定400px：

    - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    这是一条普通的消息通知
    -
    -
    -
    - -
    -
    -

    2.最多支持三行文字：

    - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    文案不限长度，但是展示最大哦显示三行折行的末尾处显示折行的末尾处显示折行的末尾处
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    文案不限长度，但是展示最大哦显示三行折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处
    -
    - 重启 - 稍后提醒我 -
    -
    -
    -
    - -
    -
    - - -
    -

    动画

    -
    - -
    - - - - - - - - - - - - -
    - -
    -
    - -
    - - - diff --git a/style/web/components/pagination/index.html b/style/web/components/pagination/index.html deleted file mode 100644 index 6cd9a1994e..0000000000 --- a/style/web/components/pagination/index.html +++ /dev/null @@ -1,407 +0,0 @@ - - - - - - - Pagination - - - - - - - - - - -
    - - -
    -

    Pagination

    -

    开发者：amaoliu / barkzhang

    -

    创建日期：

    -

    说明：

    -
    - - - - - -
    -

    少量页面

    - - -
    - - -
    -
    - -
      -
    • 1
      • -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • -
    -
    -
    - -
    -
    - -
    -

    大量页面

    - - -
    - - -
    -
    - -
    - -
    - -
      -
    • 1
      • -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • -
    - -
    - -
    -
    -
    - -
    -
    - -
    -

    带数据总量显示

    - - -
    - - -
    - -
    共 658 项数据
    - - -
    - -
    - -
      -
    • 1
      • -
    • - - -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
    • - - -
      • -
    • 90
      • -
    - -
    - -
    -
    - -
    -
    - -
    -

    带页面展示数量选择

    - - -
    - - -
    - -
    - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    -
    - -
    -
    - -
    -

    带快速跳转

    - - -
    - - -
    - - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    - -
    - 跳转 -
    - -
    - 页 -
    - -
    - -
    -
    - -
    -

    极简版

    - - -
    - - -
    - - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -

    极简迷你版

    - - -
    - - -
    - - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - -
    -

    类型

    - - -
    - - - - -
    -

    禁用

    -
    - - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    - -
    -
    -
    -
    - - -
    - -
    - -
      -
    • 1
      • - -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • - -
    - -
    - -
    - -
    -
    - - - -
    -
    - -
    -

    尺寸

    - - -
    - - - - -
    -

    默认

    -
    - -
    共 658 项数据
    - - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    - -
    -
    -
    -

    迷你

    -
    - -
    共 658 项数据
    - - -
    - -
    - -
      -
    • 1
      • - -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • - -
    - -
    - -
    - -
    -
    - - - -
    -
    - - - - - - \ No newline at end of file diff --git a/style/web/components/popconfirm/index.html b/style/web/components/popconfirm/index.html deleted file mode 100644 index dca1889e99..0000000000 --- a/style/web/components/popconfirm/index.html +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - Popconfirm - - - - - - -
    - - -
    -

    Popconfirm

    -

    开发者：erachen

    -

    创建日期：2020-5-27

    -

    说明：tdesign Popconfirm组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    - - - -
    -
    -
    -
    -
    -
    基础气泡确认框文案示意文字按钮
    -
    -
    - - -
    -
    -
    -
    - -
    -
    - - -
    -

    类型

    - - - - -
    -

    1.带图标的 popcomfirm：

    - - - -
    -
    -
    - -
    -
    - -
    事件通知类型偏向于提示
    -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    事件通知类型偏向于警示
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    事件通知类型偏向于警告
    -
    -
    - - -
    -
    -
    -
    - - - -
    - -
    -

    2.自定义 popcomfirm：

    - - - - -
    -
    -
    -
    -
    -
    - 基础气泡确认框文案示意文字按钮 -
    带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - 基础气泡确认框文案示意文字按钮 -
    带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    - - -
    -

    组件大小

    -
    -

    1. 事件通知类型偏向于提示宽度144px

    - - - -
    -
    -
    -
    -
    - -
    最小
    -
    -
    - - -
    -
    -
    -
    - -

    2.最大宽度不做限制，建议360px：

    - -
    -
    -
    -
    -
    - -
    - 基础气泡确认框文案示意文字按钮 -
    带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    - -
    - - - diff --git a/style/web/components/popup/index.html b/style/web/components/popup/index.html deleted file mode 100644 index 1c5bdaa1ca..0000000000 --- a/style/web/components/popup/index.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - Popup - - - - - - -
    - - -
    -

    Popup

    -

    开发者：terrancewan

    -

    创建日期：2020-05-17

    -

    说明：弹出层

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    -
    - 这是弹窗层 -
    -
    -
    这是触发元素
    - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    -
    - 这是top弹窗层 -
    -
    -
    -
    -
    - 这是left弹窗层 -
    -
    -
    -
    -
    - 这是bottom弹窗层 -
    -
    -
    -
    -
    - 这是right弹窗层 -
    -
    -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - diff --git a/style/web/components/progress/index.html b/style/web/components/progress/index.html deleted file mode 100644 index f62ee1d049..0000000000 --- a/style/web/components/progress/index.html +++ /dev/null @@ -1,134 +0,0 @@ - - - - - - checkbox - - - - - - - -
    - - -
    -

    Progress

    -

    开发者：andyljzhou

    -

    创建日期：20201024

    -

    说明：--

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/radio/index.html b/style/web/components/radio/index.html deleted file mode 100644 index 6c6ae77e25..0000000000 --- a/style/web/components/radio/index.html +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - radio - - - - - - - -
    - - -
    -

    Radio

    -

    开发者：yuhaozhuang

    -

    创建日期：20200525

    -

    说明：--

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - -
    -
    - - -
    -

    类型

    -
    - - -
    -
    - - - - -
    -
    - - -
    -
    - - -
    -
    - - - - -
    -
    - - -
    -
    - - -
    -

    尺寸

    -
    - - -
    -
    - - - - -
    -
    - -
    - -
    - - -
    -
    - - - - -
    -
    - -
    - -
    - - -
    -
    - - - - -
    -
    - -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/range-input/index.html b/style/web/components/range-input/index.html deleted file mode 100644 index 2decbfab60..0000000000 --- a/style/web/components/range-input/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Tag - - - - - - - - - -
    - - -
    -

    Tag

    -

    开发者：chaishi

    -

    创建日期：2022-01-01

    -

    说明：TDesign TagInput

    -
    - - - - - -
    -

    默认

    - - -
    - - - 默认 - - -
    -
    - -
    - - - diff --git a/style/web/components/rate/index.html b/style/web/components/rate/index.html deleted file mode 100644 index 8cf971bcff..0000000000 --- a/style/web/components/rate/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - Rate - - - - - - - - -
    - - -
    -

    Button

    -

    开发者：kurthuang

    -

    创建日期：20200525

    -

    说明：评分组件

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/select/index.html b/style/web/components/select/index.html deleted file mode 100644 index 09e5530b95..0000000000 --- a/style/web/components/select/index.html +++ /dev/null @@ -1,314 +0,0 @@ - - - - - - Select - - - - - - - - -
    - - -
    -

    Select

    -

    开发者：flyge(葛凡飞)

    -

    创建日期：2020-06-01

    -

    说明：Select组件样式示例

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    - 请选择 - -
    - - - - -
    -
    - - -
    -

    尺寸

    -
    - - -
    -
    - 请选择 - -
    - - -
    - -
    -
    - 请选择 - -
    - - -
    - -
    -
    - 请选择 - -
    - - -
    - -
    -
    - - - -
    -

    禁用状态

    - - -
    - - - - -
    -
    - -请选择- - - - -
    -
    -
    -
    - - 苹果apple~~~~ - - - - 橘子orange~~~ - - - - - -
    -
    - - - -
    - -

    选中状态

    - - -
    - - - - -
    - 请选择 - -
    - - - - -
    -
    - - -
    -

    多选

    -
    - - -
    - - 苹果apple - - - 香蕉banana - - - -
    - - - -
    -
    - - -
    -

    选项分组

    -
    - - -
    - 请选择 - -
    - - - - -
    -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/skeleton/index.html b/style/web/components/skeleton/index.html deleted file mode 100644 index 49492d53f8..0000000000 --- a/style/web/components/skeleton/index.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - Skeleton - - - - - - - -
    - - -
    -

    Skeleton

    -

    开发者：wonderswang

    -

    创建日期：2021-12-26

    -

    说明：骨架屏

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - diff --git a/style/web/components/slider/index.html b/style/web/components/slider/index.html deleted file mode 100644 index 1cce3c91c5..0000000000 --- a/style/web/components/slider/index.html +++ /dev/null @@ -1,276 +0,0 @@ - - - - - - slider - - - - - - - -
    - -
    -

    Slider

    -

    开发者：mengxiazeng

    -

    创建日期：2020.11.14

    -

    - 说明：tdesign slider组件的基本样式 -

    -
    - - - - -
    -

    默认

    - - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - - -
    -

    状态

    - -
    - Normal - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - Selected - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - Disable - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - - -
    -

    类型

    -
    - 单游标滑块 - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - 双游标滑块 - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - - -
    -

    纵向滑块

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    -
    - - diff --git a/style/web/components/space/index.html b/style/web/components/space/index.html deleted file mode 100644 index 451b82297b..0000000000 --- a/style/web/components/space/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - Space - - - - - - - - -
    - - -
    -

    Space

    -

    开发者：flyge(葛凡飞)

    -

    创建日期：2020-06-01

    -

    说明：Select组件样式示例

    -
    - - - - - -
    -

    默认

    - - -
    - -
    -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/steps/index.html b/style/web/components/steps/index.html deleted file mode 100644 index ab0c36bad8..0000000000 --- a/style/web/components/steps/index.html +++ /dev/null @@ -1,489 +0,0 @@ - - - - - - steps - - - - - - - -
    - - -
    -

    Steps

    -

    开发者：JrainLau

    -

    创建日期：2020-06-05

    -

    说明：TDesign steps 组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    -

    1.水平步骤条带序号

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 3 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    2.水平步骤条不带序号

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    3.垂直步骤条带序号

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 3 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    4.垂直步骤条不带序号

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    5.带 Icon 步骤条

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    6.带额外内容步骤条

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    - -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    7.倒序步骤条（仅限垂直步骤条）

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    - -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 3 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - -
    -
    - - -
    -

    状态

    -
    -

    1.水平步骤条带序号

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    错误的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    -
    - - - diff --git a/style/web/components/swiper/index.html b/style/web/components/swiper/index.html deleted file mode 100644 index 95ccc7af62..0000000000 --- a/style/web/components/swiper/index.html +++ /dev/null @@ -1,265 +0,0 @@ - - - - - - - swiper - - - - - - - -
    - - -
    -

    Swiper

    -

    开发者：duenyang

    -

    创建日期：2022-01-20

    -

    说明：TDesign swiper 组件的基本样式

    -
    - - - -
    -

    指示器&切换箭头

    -
    - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
      • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -

    分式

    - -
    -
    -
    -
    -
    -
    1
    -
    -
    -
    -
    -
    - -
    -
    1/8
    -
    - -
    -
    -
    -
    -
    -
    - -
    - -

    卡片式

    - -
    -
    -
    -
    -
    -
    -
    -
    1
    -
    -
    -
    2
    -
    -
    -
    3
    -
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - -

    vertical

    -
    - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    - -
    -

    vertical & outside

    -
    - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    - -
    -

    large

    -
    - - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
      • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -

    small

    -
    - - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
      • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    - - - \ No newline at end of file diff --git a/style/web/components/switch/index.html b/style/web/components/switch/index.html deleted file mode 100644 index f9fcd2e319..0000000000 --- a/style/web/components/switch/index.html +++ /dev/null @@ -1,261 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
    - - -
    -

    Switch

    -

    开发者：chazzhou

    -

    创建日期：2020-06-30

    -

    说明：TDesign switch 组件的基本样式

    -
    - - - - - -
    -

    组件类型

    - - -
    -
    -

    基础

    - - -
    -
    - -
    -
    -

    带描述的开关

    -
    - - - -
    -
    -
    - - - -
    -
    - -
    - - - -
    -
    -
    - - - -
    -
    - -
    - - - -
    -
    -
    - - - -
    - - -
    -
    -
    - - -
    -

    组件状态

    - - -
    -
    -

    正常

    - - -
    -
    - -
    -
    -

    加载状态

    - - - - - - - - -
    -
    - -
    -
    -

    禁用状态

    - - -
    -
    -
    - - -
    -

    组件大小

    -
    -
    -

    1.开关提供大、中（默认）、小3中尺寸：

    - - - -
    -
    - - - -
    -
    -
    - -
    - - - diff --git a/style/web/components/table/index.html b/style/web/components/table/index.html deleted file mode 100644 index cfb6b9734b..0000000000 --- a/style/web/components/table/index.html +++ /dev/null @@ -1,1998 +0,0 @@ - - - - - -Table - - - - - - - -
    - -
    -

    Table

    -

    开发者：cache

    -

    创建日期：2020-06-07

    -

    说明：TDesign Table 组件样式

    -
    - - -
    -

    1.1.1 基础表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.2.1 边框线表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.2.2 斑马线表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.3.1 表头固定表格

    -
    -
    -
    -
    -
    - - - - - - - - -
    项目名称管理员操作
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -

    注: header 和 body 用两个 table 实现的，要注意列宽统一的问题

    -
    -
    - -
    -

    1.3.2 列固定表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员操作
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.3.3 多列固定表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员操作
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.3.4 表头固定和列固定表格

    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员操作
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -

    注: 表头固定和列固定同时启用时，header 和 body 是用两个 table 实现的。并且 table 部分配置了 overflow: hidden; 隐藏横向滚动条，横向滚动 body 是需要同步 header 的滚动位置

    -
    -
    - -
    -

    1.4.1 展开收起表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    自定义展开行内容
    -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -

    注: icon 待补齐

    -
    -
    - -
    -

    1.5.1 行列合并表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesign - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesign - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.6.1 可调整列宽表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    - 项目名称 - - - 管理员 - - 操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.7.1 多级表头表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员操作
    项目名称管理员管理员操作
    TDesignadminadminadmin - 管理 - 删除 -
    TDesignadminadminadmin - 管理 - 删除 -
    TDesignadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.8.1 可拖动排序表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -

    注: icon 待补齐，列拖拽 @todo

    -
    -
    - -
    -

    1.9.1 可选择数据行 - 单选

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    -
    -

    1.9.2 可选择数据行 - 多选

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - 项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    2.1.1 紧凑型表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    2.1.2 标准型表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    2.1.3 宽松型表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.1.1.1 数据行 hover 态

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    -
    -

    3.1.1.2 斑马线表格数据行 hover 态

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.1.1.3 数据列突出显示

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -

    注: 需实现动态交互效果

    -
    -
    - -
    -

    3.1.2 表格常见元素 hover 态

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    项目名称
    -
    - -
    -
    -
    - -
    -
    -     		管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.1.3 数据行不可编辑

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.3.1 文本顶端对齐

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    -

    TDesign

    -

    TDesign

    -     		admin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.4.1 刷新加载

    -
    -
    -
    -
    - - - - - - - - -
    项目名称管理员操作
    -
    -
    -
    -

    正在加载中，请稍候

    -
    -
    -
    -
    -
    -
    -
    -
    -

    3.4.2 异步加载

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    - - 正在加载中，请稍候 -
    -
    -
    -
    -
    -
    -
    - -
    -

    带分页表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    共 658 项数据
    -
    - -
    -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - - \ No newline at end of file diff --git a/style/web/components/tabs/index.html b/style/web/components/tabs/index.html deleted file mode 100644 index 86ad0cf786..0000000000 --- a/style/web/components/tabs/index.html +++ /dev/null @@ -1,565 +0,0 @@ - - - - - - tabs - - - - - - - -
    - - -
    -

    Tabs

    -

    开发者：bombren

    -

    创建日期：2020-06-08

    -

    说明：TDesign tabs 组件的基本样式

    -
    - - - - -
    -

    默认

    - -

    demo: 常规

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    -
    - - -
    -

    状态

    - -

    demo: 选项在底部

    -
    - -
    -
    - -
    -

    bottom选项卡2的内容

    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    - -

    demo: 选项在左侧

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    left选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 选项在右侧

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    right选项卡2的内容

    -
    - - -
    -
    - -
    -
    - - -
    -

    类型

    - -

    demo: 卡片类型，禁用

    -
    - -
    -
    -
    -
    -
    -
    - -
    card选项卡一
    -
    card选项卡二
    -
    card选项卡三
    -
    card选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    card选项卡2的内容，选项卡4禁用

    -
    - - -
    -
    - -
    - -

    demo: icon选项卡

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 常规禁用

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡3禁用

    -
    - - -
    -
    - -
    - -

    demo: 卡片型，带增加按钮

    -
    - -
    -
    -
    - + -
    - -
    -
    - -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 卡片型，带左右scroll按钮

    -
    - -
    -
    -
    - -
    - ← - → -
    -
    - -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 常规，带左右scroll按钮

    -
    - -
    -
    -
    - -
    - ← - → -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo：卡片型，同时有add和scroll按钮

    -
    - -
    -
    -
    - + -
    - ← - → -
    -
    - -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -
    - - -
    -

    尺寸(如果有)

    - -

    demo: middle尺寸

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    middle size选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: large尺寸

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    large size选项卡2的内容

    -
    - - -
    -
    - -
    -
    -
    - - - diff --git a/style/web/components/tag-input/index.html b/style/web/components/tag-input/index.html deleted file mode 100644 index 2decbfab60..0000000000 --- a/style/web/components/tag-input/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Tag - - - - - - - - - -
    - - -
    -

    Tag

    -

    开发者：chaishi

    -

    创建日期：2022-01-01

    -

    说明：TDesign TagInput

    -
    - - - - - -
    -

    默认

    - - -
    - - - 默认 - - -
    -
    - -
    - - - diff --git a/style/web/components/tag/index.html b/style/web/components/tag/index.html deleted file mode 100644 index c48e3fc9a2..0000000000 --- a/style/web/components/tag/index.html +++ /dev/null @@ -1,313 +0,0 @@ - - - - - - Tag - - - - - - - - - -
    - - -
    -

    Tag

    -

    开发者：angelzou

    -

    创建日期：2020-05-24

    -

    说明：TDesign Tag

    -
    - - - - - -
    -

    默认

    - - -
    - - - 默认 - - -
    -
    - - -
    -

    主题

    - - -
    - - - - -
    默认（大）： - 默认 -
    -
    朴素（大）： - 灰色 - 蓝色 - 橙色 - 绿色 - 红色 -
    -
    浅色（大）： - 灰色 - 蓝色 - 橙色 - 绿色 - 红色 -
    -
    深色（大）： - 灰色 - 蓝色 - 橙色 - 绿色 - 红色 -
    - - - -
    -
    - - -
    -

    可删除标签

    -
    - - -
    默认： - 标签一 - - -
    -
    浅色： - 标签二 - - - 标签三 - - - 标签四 - - - 标签五 - - - 标签六 - - -
    -
    深色： - 标签二 - - - 标签三 - - - 标签四 - - - 标签五 - - - 标签六 - - -
    -
    朴素： - 标签二 - - - 标签三 - - - 标签四 - - - 标签五 - - - 标签六 - - -
    - - -
    -
    - - -
    -

    可选标签（只针对于默认主题）

    -
    - - - 未选一 - 未选一 - 选中一 - - -
    -
    -
    -

    失效标签（只针对于默认主题，不可点击）

    -
    - - - 失效标签 - - 失效标签 - - - - -
    -
    - -
    -

    超长省略文本标签

    -
    - - - - 超长省略文本标签啦啦啦啦 - - - - 超长省略文本标签啦啦啦啦 - - - 超长省略文本标签啦啦啦啦 - - - -
    -
    - -
    -

    图标标签

    -
    - -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    - - -
    -
    - - -
    -

    尺寸

    -
    - - -
    - 标签一 小 - 标签一 中 - 标签一 大 -
    -
    - 标签一 小 - 标签一 中 - 标签一 大 -
    - -
    -
    - -
    -

    形状

    -
    - - -
    正常： - 标签一 - 标签一 - 标签一 -
    -
    圆角： - 标签一 - 标签一 - 标签一 -
    -
    标记： - 标签一 - 标签一 - 标签一 -
    - -
    -
    - -
    - - - diff --git a/style/web/components/textarea/index.html b/style/web/components/textarea/index.html deleted file mode 100644 index cb115a9cd0..0000000000 --- a/style/web/components/textarea/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - textarea - - - - - - - -
    - - -
    -

    textarea

    -

    开发者：xiarongwu

    -

    创建日期：2021-02-20

    -

    说明：TDesign textarea 组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - diff --git a/style/web/components/time-picker/index.html b/style/web/components/time-picker/index.html deleted file mode 100644 index dabd6970bb..0000000000 --- a/style/web/components/time-picker/index.html +++ /dev/null @@ -1,281 +0,0 @@ - - - - - - TimePicker - - - - - - - - - -
    - - -
    -

    TimePicker 时间选择器

    -

    开发者：yorickili

    -

    创建日期：2020-11-11

    -

    说明：TDesign TimePicker 组件的基本样式

    -
    - - - - -
    -

    时分秒

    - -
    - - -
    -
    -
    - 00 : 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    -
    - - -
    -
    - - -
    -

    时分

    - - -
    - - - -
    -
    -
    - 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    -
    - - - -
    -
    - - -
    -

    时间区间

    -
    - - -
    -
    -
    -
    - 00 : 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    - -
    -
    至
    -
    - -
    -
    - 00 : 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    -
    -
    -
    确定
    -
    -
    - - -
    -
    - -
    - - - diff --git a/style/web/components/timeline/index.html b/style/web/components/timeline/index.html deleted file mode 100644 index d679137e4b..0000000000 --- a/style/web/components/timeline/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Timeline - - - - - - - - -
    - -
    -

    Timeline

    -

    开发者：flyge(葛凡飞)

    -

    创建日期：2020-06-01

    -

    说明：Select组件样式示例

    -
    - - - - -
    -

    默认

    - - -
    -
    -
    - - diff --git a/style/web/components/tooltip/index.html b/style/web/components/tooltip/index.html deleted file mode 100644 index 475a1dda3d..0000000000 --- a/style/web/components/tooltip/index.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - - - Tooltip - - - - - - - -
    - - -
    -

    Tooltip

    -

    开发者：nanniezhang

    -

    创建日期：2020-09-30

    -

    说明：文字提示

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    - 默认文字提示 -
    -
    - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - 箭头向右 -
    -
    - -
    - 箭头向下 -
    -
    - -
    - 箭头向上 -
    -
    - -
    - 箭头向左 -
    -
    - - - - -
    -
    - -
    -

    类型

    -
    - - -
    - 自定义颜色 -
    -
    -
    - 自定义颜色 -
    -
    -
    - 自定义颜色 -
    -
    -
    - 自定义颜色 -
    -
    - - -
    -
    - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - - \ No newline at end of file diff --git a/style/web/components/transfer/index.html b/style/web/components/transfer/index.html deleted file mode 100644 index 92d9db0dbe..0000000000 --- a/style/web/components/transfer/index.html +++ /dev/null @@ -1,1047 +0,0 @@ - - - - - - Transfer - - - - - - - -
    - -
    -

    Transfer

    -

    开发者：vickiliang

    -

    创建日期：2020-11-12

    -

    说明：TDesign Transfer 组件样式

    -
    - - -
    -

    1.1.1 默认状态

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.1.2 带搜索框

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    - - - - -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    -
    - - - - -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.1.3 结合树结构

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    - -
    - - - 1 未选中项 -
    - -
    - - - 2 未选禁用项 -
    - -
    - - - - 3 半选中项 -
    - -
    - - - - 3.1 半选中项 -
    - -
    - - - 3.1.1 选中项 -
    - -
    - - 3.1.2 选中禁用项 -
    - -
    - - - 3.2 半选禁用项 -
    - -
    - - - 3.2.1 未选禁用项 -
    - -
    - - 3.2.2 选中禁用项 -
    - -
    - - - 4 第四段信息 -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.2.1 外框尺寸变化

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.1 右移

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.2 左移

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 5 -
    • -
  • - - content 6 -
    • -
  • - - content 7 -
    • -
  • - - content 8 -
    • -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.3 保留源列表数据项

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 2项 -
    -
    -
    -
    -
    -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.4 内容过多时

    -
    -
    -
    -
    -
    -
    - - 3项 -
    -
    -
    -
    -
    -
  • - - 第一段信息第一段信息第一段信息 -
    • -
  • - - 第二段信息第二段信息第二段信息 -
    • -
  • - - 第三段信息第三段信息第三段信息 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.5 数据项数量过多时

    -
    -
    -
    -
    -
    -
    - - 12项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    - - 1/3 - -
    -
    -
    - - -
    -
    -
    -
    - - 400项 -
    -
    -
    -
    -
    -
  • - - content 5 -
    • -
  • - - content 6 -
    • -
  • - - content 7 -
    • -
  • - - content 8 -
    • -
    -
    -
    -
    - - 1/100 - -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.6 带标题样式

    -
    -
    -
    -
    -
    -
    - - 4项 -
    - 源列表 -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    - 目标列表 -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.7 自定义底部

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - - \ No newline at end of file diff --git a/style/web/components/tree/index.html b/style/web/components/tree/index.html deleted file mode 100644 index 0859ef4499..0000000000 --- a/style/web/components/tree/index.html +++ /dev/null @@ -1,443 +0,0 @@ - - - - - - 组件名称 - - - - - - - -
    - -
    -

    Tree

    -

    开发者: shryzhang, tabliang

    -

    创建日期: 2020.10.12

    -

    说明: tdesign tree 组件的基本样式

    -
    - - - - -
    -

    默认

    - - -
    - -
    - -
    - - 1 节点一 -
    - -
    - - 2 节点二 -
    - -
    - - 2.1 节点二点一 -
    - -
    - - 2.1.1 节点二点一点一 -
    - -
    - - 2.1.1.1 节点二点一点一点一 -
    - -
    - - 2.1.1.2 节点二点一点一点二 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 -
    - -
    - - - - 2.1.2 节点二点一点二
    折行文字     -
    - -
    - - 3 节点三 -
    -
    - -
    -
    - - -
    -

    空数据

    - - -
    - -
    - -
    😊 空数据（string）
    -
    - -
    -
    - - -
    -

    节点可选中

    -
    - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    - -
    -
    - - -
    -

    - 文件夹图标（自定义图标） -

    -
    - -
    - -
    - - -
    - -
    - - 2 节点二 -
    - -
    - - 2.1 节点二点一 -
    - -
    - - 2.1.1 节点二点一点一 -
    -
    - -
    -
    - - -
    -

    可操作

    - - -
    - -
    -
    - - 1 节点一 - - - -
    -
    - - 1.1 节点一点一 - - - -
    -
    - - - - 1.1.1 节点一点一点一 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 - - - - -
    -
    - -
    -
    - - -
    -

    显示连线

    -
    - -
    -
    - - 1 -
    -
    - - 2 -
    -
    - - - 2.1 -
    -
    - - - 2.1.1 -
    -
    - - - 2.1.1.1 -
    -
    - - - 2.1.1.1.1 -
    -
    - - - 2.1.1.1.2 -
    -
    - - - 2.1.2 -
    -
    - - - 2.2 -
    -
    - - 4 -
    -
    - -
    -
    - - -
    -

    选中态

    -
    - - - -
    -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    -
    - -
    -
    - - -
    -

    高亮

    -
    - -
    -
    - -
    - - 1 节点一 -
    - -
    - - 1.1 节点一点一 -
    - -
    - - 1.1.1 节点一点一点一 -
    - -
    - - 2 节点二 -
    - -
    - - 2.1 节点二点一 -
    -
    -
    - -
    -
    - - -
    -

    可拖动

    - - -
    - -
    - -
    - - 1 dragging -
    - -
    - - 2 tip-top -
    - -
    - - 2.1 tip-bottom -
    - -
    - - 2.1.1 节点二点一点一 -
    - -
    - - 2.1.1.1 节点二点一点一点一 -
    - -
    - - 2.1.1.2 节点二点一点一点二 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 -
    - -
    - - - - 2.1.2 节点二点一点二 -
    - -
    - - 3 tip-highlight -
    -
    - -
    -
    -
    - - diff --git a/style/web/components/upload/index.html b/style/web/components/upload/index.html deleted file mode 100644 index 92d261e02f..0000000000 --- a/style/web/components/upload/index.html +++ /dev/null @@ -1,290 +0,0 @@ - - - - - - upload - - - - - - -
    - -
    -

    Upload

    -

    开发者：catren

    -

    创建日期：2020-06-21

    -

    说明：TDesign upload 组件的基本样式

    -
    - - - - -
    -

    上传组件

    - - -
    -

    1.1 基础控件

    -
    -
    - - 上传文件 -
    -
    请上传txt文件，大小在60M以内
    -
    - -

    1.2 展示文件列表

    -
    -
    - - 上传文件 -
    - -
      -
    • -
      -
      - alt -
      -
      文件名文件名文件名文件名文件名文件名文件名文件名.png
      -
      - -
      - -
      -
      • - -
    • -
      -
      - -
      -
      文件名文件名.ext
      -
      - -
      - -
      -
      • - -
    • -
      -
      - -
      -
      文件名文件名.ext
      -
      - -
      - -
      -
      • - -
    • -
      -
      - -
      -
      文件名文件名.ext
      -
      - -
      - -
      -
      • -
    -
    -
    - -
    -

    1.2 照片墙

    -
      -
    • -
      -
      - alt -
      - - - - - - -
      -
      -

      文件名.jpg

      -
      -
      • -
    • -
      - -

      上传中40%

      -

      文件名.jpg

      -
      -
      • -
    • -
      - -

      上传出错

      -

      文件名.jpg

      -
      -
      • -
    • -
      - -

      上传出错

      -

      文件名.jpg

      -
      - - - - - - -
      -
      -
      • -
    • -
      - -

      点击上传图片

      -
      -
      • -
    -
    - -
    -

    1.2 拖拽上传

    -
    - 点击上传 -   /  拖拽到次区域 -
    - -

    1.2 拖拽上传 Active

    -
    -
    释放鼠标
    -
    -
    - -
    -

    1.3 批量上传

    -
    -
    - - 支持批量上传，上传格式为txt文件 -
    -
    -
    -
    文件名
    -
    大小
    -
    状态
    -
    操作
    -
    -
    -
    - 文件名.txt -
    -
    - 40k -
    -
    - - 上传成功 -
    -
    - -
    -
    -
    -
    - 比较长长长长的文件名.txt -
    -
    - 40k -
    -
    - - 文件格式有误 -
    -
    - -
    -
    -
    -
    - 文件名.txt -
    -
    - 40k -
    -
    - - 上传40% -
    -
    - -
    -
    -
    -
    - 文件名.txt -
    -
    - 40k -
    -
    - - 待上传 -
    -
    - -
    -
    -
    - -
    - - -
    -
    - -

    1.3 批量上传 - 未上传状态

    -
    -
    - - 支持批量上传，上传格式为txt文件 -
    -
    - 点击上方”选择文件按钮或将文件拖拽到此区域 -
    -
    - - -
    -
    - -

    1.3 批量上传 - 拖拽状态

    -
    -
    - - 支持批量上传，上传格式为txt文件 -
    -
    - 释放鼠标 -
    -
    - - -
    -
    -
    -
    -
    - - diff --git a/style/web/index.js b/style/web/index.js deleted file mode 100644 index 6ff9952a18..0000000000 --- a/style/web/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import './index.less'; -import './docs.less'; diff --git a/style/web/index.less b/style/web/index.less deleted file mode 100644 index 416f2c1eee..0000000000 --- a/style/web/index.less +++ /dev/null @@ -1,10 +0,0 @@ -// reset文件 - -@import "./_reset.less"; - -// components - -@import "./components/_index.less"; - -// theme(用于换肤) -@import "./theme/_index.less"; diff --git a/style/web/package.json b/style/web/package.json index 7068a1ce9c..5c4d437a5a 100644 --- a/style/web/package.json +++ b/style/web/package.json @@ -4,43 +4,11 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "start": "webpack-dev-server", - "build": "webpack" + "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", - "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.9.6", - "@babel/preset-env": "^7.9.6", - "@babel/preset-react": "^7.9.4", - "autoprefixer": "^9.8.0", - "html-webpack-plugin": "^4.3.0", - "mini-css-extract-plugin": "^0.9.0", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "postcss-loader": "^3.0.0", - "stylelint-webpack-plugin": "^2.0.0", - "webpack": "^4.43.0", - "webpack-cli": "^3.3.11" - }, "dependencies": { - "babel-loader": "^8.1.0", - "css-loader": "^3.5.3", - "less-loader": "^6.1.0", - "stylelint": "^13.13.1", - "webpack-dev-server": "^3.10.3" - }, - "postcss": { - "plugins": { - "autoprefixer": {} - } - }, - "browserslist": [ - "> 3%", - "last 2 versions", - "not ie < 11", - "ios >= 9", - "android >= 4.4" - ] + "stylelint": "^13.13.1" + } } \ No newline at end of file diff --git a/style/web/theme/_light.less b/style/web/theme/_light.less index 9c150f71e9..68b9d653f9 100644 --- a/style/web/theme/_light.less +++ b/style/web/theme/_light.less @@ -129,7 +129,7 @@ --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明 --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用 --td-text-color-anti: #fff; // 色彩-文字-反色 - --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌 + --td-text-color-brand: var(--td-brand-color-7); // 色彩-文字-品牌 --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接 // 分割线 diff --git a/style/web/webpack.config.js b/style/web/webpack.config.js deleted file mode 100644 index fee8633afd..0000000000 --- a/style/web/webpack.config.js +++ /dev/null @@ -1,43 +0,0 @@ -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -module.exports = { - mode: 'development', - entry: './index.js', - output: { - filename: '[name].js', - path: path.resolve(__dirname, 'dist'), - }, - module: { - rules: [ - { - test: /\.css$/, - use: [ - 'css-loader', - ], - }, { - test: /\.less$/, - use: [ - MiniCssExtractPlugin.loader, - { loader: 'css-loader', options: { importLoaders: 1 } }, - 'postcss-loader', // 配合 autoprefixer + browserslist 使用，相关配置写在 package.json - 'less-loader', - ], - }, - ], - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: 'tdesign.css', - }), - ], - devServer: { - contentBase: './', - host: '0.0.0.0', - compress: true, - port: 9000, - open: false, - writeToDisk: true, - stats: 'errors-only', - }, -}; From 213cede1d84eafe5aa3308be6610039a8d4febc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= Date: Tue, 17 Jan 2023 16:52:56 +0800 Subject: [PATCH 150/312] =?UTF-8?q?fix(drawer):=20=E5=85=B3=E9=97=AD?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=B2=A1=E6=9C=89=E5=9E=82=E7=9B=B4=E5=B1=85?= =?UTF-8?q?=E4=B8=AD=20(#1037)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(drawer): 关闭按钮没有垂直居中 * feat: 删除 drawer-close-btn-position-top token --- style/web/components/drawer/_index.less | 2 +- style/web/components/drawer/_var.less | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less index 13006a401c..76757d7db3 100644 --- a/style/web/components/drawer/_index.less +++ b/style/web/components/drawer/_index.less @@ -164,7 +164,7 @@ align-items: center; width: @drawer-close-btn-size; height: @drawer-close-btn-size; - top: @drawer-close-btn-position-top; + top: calc((@drawer-header-height - @drawer-close-btn-size) / 2); right: @drawer-close-btn-position-right; color: @drawer-close-btn-color; background-color: @drawer-close-btn-bg-color; diff --git a/style/web/components/drawer/_var.less b/style/web/components/drawer/_var.less index 99e092ee46..8d94157ce0 100644 --- a/style/web/components/drawer/_var.less +++ b/style/web/components/drawer/_var.less @@ -58,7 +58,6 @@ /** * 位置 */ -@drawer-close-btn-position-top: @comp-margin-s; @drawer-close-btn-position-right: @comp-margin-s; @drawer-footer-text-align: left; From b858848279059dc9f5afcabc57926248b60cd730 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 18 Jan 2023 16:59:46 +0800 Subject: [PATCH 151/312] feat(web): tree.label type (#1124) Co-authored-by: sheepluo --- js/tree/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/tree/types.ts b/js/tree/types.ts index d10af2871e..a17c927bc7 100644 --- a/js/tree/types.ts +++ b/js/tree/types.ts @@ -55,7 +55,7 @@ export interface TreeNodeState { * 节点标签文案 * @default '' */ - label?: string; + label?: any; /** * 节点是否已展开 * @default false From b88026e67bfff42a3674c230a55c8449f24bcba1 Mon Sep 17 00:00:00 2001 From: lincao Date: Wed, 18 Jan 2023 18:03:35 +0800 Subject: [PATCH 152/312] =?UTF-8?q?image&imageviewer=E5=9B=BD=E9=99=85?= =?UTF-8?q?=E5=8C=96=E8=AF=AD=E8=A8=80=E9=85=8D=E7=BD=AE=E8=A1=A5=E5=85=85?= =?UTF-8?q?=20(#1125)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(watermark): 水印demo描述 * feat(): add tooltiplite style and demo * feat(): add tooltiplite style and demo * feat(): add tooltiplite style and demo * feat(): add tooltiplite style and demo * feat(tooltip): rate style * feat(): 文档描述修改 * feat(): getposition add mouse for tooltip * feat(): add image&imageviewer locale text * feat(): add image&imageviewer locale text --- js/global-config/locale/ar_KW.ts | 275 +++++++++++++++++------------- js/global-config/locale/en_US.ts | 279 ++++++++++++++++-------------- js/global-config/locale/ja_JP.ts | 282 +++++++++++++++++-------------- js/global-config/locale/ko_KR.ts | 282 +++++++++++++++++-------------- js/global-config/locale/zh_CN.ts | 281 ++++++++++++++++-------------- 5 files changed, 764 insertions(+), 635 deletions(-) diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts index f193728134..f23ce13333 100644 --- a/js/global-config/locale/ar_KW.ts +++ b/js/global-config/locale/ar_KW.ts @@ -2,186 +2,219 @@ // 文件有效，为国际化做准备 export default { pagination: { - itemsPerPage: '{size} / الصفحة', - jumpTo: 'القفز إلى', - page: '', - total: '{total} عناصر', + itemsPerPage: "{size} / الصفحة", + jumpTo: "القفز إلى", + page: "", + total: "{total} عناصر", }, cascader: { - empty: 'لا تتوافر بيانات', - loadingText: 'جار التحميل…', - placeholder: 'الرجاء التحديد', + empty: "لا تتوافر بيانات", + loadingText: "جار التحميل…", + placeholder: "الرجاء التحديد", }, calendar: { - yearSelection: '{year}', - monthSelection: '{month}', - yearRadio: 'عام', - monthRadio: 'شهر', - hideWeekend: 'إخفاء عطلة نهاية الأسبوع', - showWeekend: 'عرض عطلة نهاية الأسبوع', - today: 'اليوم', - thisMonth: 'هذا الشهر', - week: 'الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد', - cellMonth: 'يناير ، فبراير ، مارس ، أبريل ، مايو ، يونيو ، يوليو ، أغسطس ، سبتمبر ، أكتوبر ، نوفمبر ، ديسمبر', + yearSelection: "{year}", + monthSelection: "{month}", + yearRadio: "عام", + monthRadio: "شهر", + hideWeekend: "إخفاء عطلة نهاية الأسبوع", + showWeekend: "عرض عطلة نهاية الأسبوع", + today: "اليوم", + thisMonth: "هذا الشهر", + week: "الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد", + cellMonth: + "يناير ، فبراير ، مارس ، أبريل ، مايو ، يونيو ، يوليو ، أغسطس ، سبتمبر ، أكتوبر ، نوفمبر ، ديسمبر", }, transfer: { - title: '{checked} / {total}', - empty: 'لا تتوافر بيانات', - placeholder: 'أدخل الكلمة للبحث', + title: "{checked} / {total}", + empty: "لا تتوافر بيانات", + placeholder: "أدخل الكلمة للبحث", }, timePicker: { - now: 'الآن', - confirm: 'نعم', - anteMeridiem: 'صباحا', - postMeridiem: 'مساءً', - placeholder: 'الرجاء التحديد', + now: "الآن", + confirm: "نعم", + anteMeridiem: "صباحا", + postMeridiem: "مساءً", + placeholder: "الرجاء التحديد", }, dialog: { - confirm: 'نعم', - cancel: 'يلغي', + confirm: "نعم", + cancel: "يلغي", }, drawer: { - confirm: 'نعم', - cancel: 'يلغي', + confirm: "نعم", + cancel: "يلغي", }, popconfirm: { - confirm: { content: 'نعم' }, - cancel: { content: 'يلغي' }, + confirm: { content: "نعم" }, + cancel: { content: "يلغي" }, }, table: { - empty: 'لا تتوافر بيانات', - loadingText: 'جار التحميل…', - loadingMoreText: 'انقر لتحميل المزيد', - filterInputPlaceholder: 'الرجاء إدخال المحتوى (لا توجد قيمة افتراضية متاحة)', - sortAscendingOperationText: 'انقر للفرز تصاعديًا', - sortCancelOperationText: 'انقر لإلغاء الفرز', - sortDescendingOperationText: 'انقر للفرز تنازليًا', - clearFilterResultButtonText: 'صافي', - columnConfigButtonText: 'تكوين العمود', - columnConfigTitleText: 'تكوين عمود الجدول', - columnConfigDescriptionText: 'الرجاء تحديد أعمدة البيانات المراد عرضها في الجدول', - confirmText: 'نعم', - cancelText: 'يلغي', - resetText: 'إعادة ضبط', - selectAllText: 'اختر الكل', + empty: "لا تتوافر بيانات", + loadingText: "جار التحميل…", + loadingMoreText: "انقر لتحميل المزيد", + filterInputPlaceholder: + "الرجاء إدخال المحتوى (لا توجد قيمة افتراضية متاحة)", + sortAscendingOperationText: "انقر للفرز تصاعديًا", + sortCancelOperationText: "انقر لإلغاء الفرز", + sortDescendingOperationText: "انقر للفرز تنازليًا", + clearFilterResultButtonText: "صافي", + columnConfigButtonText: "تكوين العمود", + columnConfigTitleText: "تكوين عمود الجدول", + columnConfigDescriptionText: + "الرجاء تحديد أعمدة البيانات المراد عرضها في الجدول", + confirmText: "نعم", + cancelText: "يلغي", + resetText: "إعادة ضبط", + selectAllText: "اختر الكل", searchResultText: "تم العثور على بحث '{result}' و{count} من العناصر.", }, select: { - empty: 'لا تتوافر بيانات', - loadingText: 'جار التحميل…', - placeholder: 'الرجاء التحديد', + empty: "لا تتوافر بيانات", + loadingText: "جار التحميل…", + placeholder: "الرجاء التحديد", }, - tree: { empty: 'لا تتوافر بيانات' }, + tree: { empty: "لا تتوافر بيانات" }, treeSelect: { - empty: 'لا تتوافر بيانات', - loadingText: 'جار التحميل…', - placeholder: 'الرجاء التحديد', + empty: "لا تتوافر بيانات", + loadingText: "جار التحميل…", + placeholder: "الرجاء التحديد", }, datePicker: { - placeholder: { - date: 'حدد تاريخ', - month: 'اختر الشهر', - year: 'اختر السنة', + date: "حدد تاريخ", + month: "اختر الشهر", + year: "اختر السنة", }, - weekdays: ['الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'], - months: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'], - quarters: ['Q1', 'Q2', 'Q3', 'Q4'], - rangeSeparator: ' - ', - direction: 'ltr', - format: 'YYYY-MM-DD', - dayAriaLabel: 'D', - yearAriaLabel: 'Y', - monthAriaLabel: 'M', - weekAbbreviation: 'W', - confirm: 'نعم', - selectTime: 'حدد الوقت', - selectDate: 'حدد تاريخ', - nextYear: 'العام القادم', - preYear: 'العام الماضي', - nextMonth: 'الشهر القادم', - preMonth: 'الشهر الماضي', - preDecade: 'العقد الماضي', - nextDecade: 'العقد القادم', - now: 'الآن', + weekdays: [ + "الإثنين", + "الثلاثاء", + "الأربعاء", + "الخميس", + "الجمعة", + "السبت", + "الأحد", + ], + months: [ + "يناير", + "فبراير", + "مارس", + "أبريل", + "مايو", + "يونيو", + "يوليو", + "أغسطس", + "سبتمبر", + "أكتوبر", + "نوفمبر", + "ديسمبر", + ], + quarters: ["Q1", "Q2", "Q3", "Q4"], + rangeSeparator: " - ", + direction: "ltr", + format: "YYYY-MM-DD", + dayAriaLabel: "D", + yearAriaLabel: "Y", + monthAriaLabel: "M", + weekAbbreviation: "W", + confirm: "نعم", + selectTime: "حدد الوقت", + selectDate: "حدد تاريخ", + nextYear: "العام القادم", + preYear: "العام الماضي", + nextMonth: "الشهر القادم", + preMonth: "الشهر الماضي", + preDecade: "العقد الماضي", + nextDecade: "العقد القادم", + now: "الآن", }, upload: { - sizeLimitMessage: 'لا يمكن أن يتجاوز حجم الملف {sizeLimit}', - cancelUploadText: 'يلغي', + sizeLimitMessage: "لا يمكن أن يتجاوز حجم الملف {sizeLimit}", + cancelUploadText: "يلغي", triggerUploadText: { - fileInput: 'حدد الملف', - image: 'انقر لتحميل الصورة', - normal: 'تحميل', - reupload: 'أعد تحميل', - continueUpload: 'تحميل المزيد', - delete: 'حذف', - uploading: 'تحميل', + fileInput: "حدد الملف", + image: "انقر لتحميل الصورة", + normal: "تحميل", + reupload: "أعد تحميل", + continueUpload: "تحميل المزيد", + delete: "حذف", + uploading: "تحميل", }, dragger: { - dragDropText: 'أسقطها هنا', - draggingText: 'اسحب الملف هنا', - clickAndDragText: 'اختر ملفًا أو اسحبه هنا.', + dragDropText: "أسقطها هنا", + draggingText: "اسحب الملف هنا", + clickAndDragText: "اختر ملفًا أو اسحبه هنا.", }, file: { - fileNameText: 'اسم الملف', - fileSizeText: 'حجم', - fileStatusText: 'حالة', - fileOperationText: 'عملية', - fileOperationDateText: 'تاريخ', + fileNameText: "اسم الملف", + fileSizeText: "حجم", + fileStatusText: "حالة", + fileOperationText: "عملية", + fileOperationDateText: "تاريخ", }, progress: { - uploadingText: 'تحميل', - waitingText: 'جار التحميل', - failText: 'التحميل فشل', - successText: 'تم التحميل بنجاح.', + uploadingText: "تحميل", + waitingText: "جار التحميل", + failText: "التحميل فشل", + successText: "تم التحميل بنجاح.", }, }, form: { errorMessage: { - date: 'الرجاء إدخال ${name} الصحيح', - url: 'الرجاء إدخال ${name} الصحيح', - required: 'مطلوب ${name}', - max: 'يمكن أن يحتوي ${name} على ما يصل إلى ${validate} حرفًا', - min: 'لا يمكن أن يكون ${name} أقل من ${validate} حرفًا', - len: 'يجب أن يتكون ${name} من أحرف ${validate} بالضبط', - enum: '${name} يجب أن يكون واحدًا من ${validate} ', - idcard: 'الرجاء إدخال ${name} الصحيح', - telnumber: 'الرجاء إدخال ${name} الصحيح', - pattern: 'الرجاء إدخال ${name} الصحيح', - validator: '${name} غير صالح', - boolean: '${name} ليس منطقيًا', - number: 'يجب أن يكون ${name} رقمًا', + date: "الرجاء إدخال ${name} الصحيح", + url: "الرجاء إدخال ${name} الصحيح", + required: "مطلوب ${name}", + max: "يمكن أن يحتوي ${name} على ما يصل إلى ${validate} حرفًا", + min: "لا يمكن أن يكون ${name} أقل من ${validate} حرفًا", + len: "يجب أن يتكون ${name} من أحرف ${validate} بالضبط", + enum: "${name} يجب أن يكون واحدًا من ${validate} ", + idcard: "الرجاء إدخال ${name} الصحيح", + telnumber: "الرجاء إدخال ${name} الصحيح", + pattern: "الرجاء إدخال ${name} الصحيح", + validator: "${name} غير صالح", + boolean: "${name} ليس منطقيًا", + number: "يجب أن يكون ${name} رقمًا", }, }, - input: { placeholder: 'الرجاء إدخال' }, + input: { placeholder: "الرجاء إدخال" }, list: { - loadingText: 'جار التحميل…', - loadingMoreText: 'انقر لتحميل المزيد', + loadingText: "جار التحميل…", + loadingMoreText: "انقر لتحميل المزيد", }, alert: { - expandText: 'تزسيع', - collapseText: 'انهيار', + expandText: "تزسيع", + collapseText: "انهيار", }, anchor: { - copySuccessText: 'تم نسخ الرابط', - copyText: 'انسخ الرابط', + copySuccessText: "تم نسخ الرابط", + copyText: "انسخ الرابط", }, colorPicker: { - swatchColorTitle: 'الألوان الافتراضية', - recentColorTitle: 'مستخدم حديثا', - clearConfirmText: 'هل تريد مسح الألوان المستخدمة مؤخرًا؟', + swatchColorTitle: "الألوان الافتراضية", + recentColorTitle: "مستخدم حديثا", + clearConfirmText: "هل تريد مسح الألوان المستخدمة مؤخرًا؟", + }, + image: { + errorText: "غير قادر على التحميل", + loadingText: "جار التحميل", + }, + imageViewer: { + errorText: "غير قادر على التحميل", + mirrorTipText: "مرآة", + rotateTipText: "استدارة", + originsizeTipText: "أصلي", }, } as const; diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index 0acb61e18f..e4434cca7c 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -2,198 +2,223 @@ // 文件有效，为国际化做准备 export default { pagination: { - itemsPerPage: '{size} / page', - jumpTo: 'jump to', - page: '', - total: '{total} items', + itemsPerPage: "{size} / page", + jumpTo: "jump to", + page: "", + total: "{total} items", }, cascader: { - empty: 'Empty Data', - loadingText: 'loading...', - placeholder: 'please select', + empty: "Empty Data", + loadingText: "loading...", + placeholder: "please select", }, calendar: { - yearSelection: '{year}', - monthSelection: '{month}', - yearRadio: 'year', - monthRadio: 'month', - hideWeekend: 'Hide Week', - showWeekend: 'Show Week', - today: 'Today', - thisMonth: 'This Month', - week: 'Monday,Tuesday,Wedsday,Thuresday,Friday,Staturday,Sunday', - cellMonth: 'January,February,March,April,May,June,July,August,September,October,November,December', + yearSelection: "{year}", + monthSelection: "{month}", + yearRadio: "year", + monthRadio: "month", + hideWeekend: "Hide Week", + showWeekend: "Show Week", + today: "Today", + thisMonth: "This Month", + week: "Monday,Tuesday,Wedsday,Thuresday,Friday,Staturday,Sunday", + cellMonth: + "January,February,March,April,May,June,July,August,September,October,November,December", }, transfer: { - title: '{checked} / {total}', - empty: 'Empty Data', - placeholder: 'enter keyworkd to search', + title: "{checked} / {total}", + empty: "Empty Data", + placeholder: "enter keyworkd to search", }, timePicker: { - now: 'Now', - confirm: 'Confirm', - anteMeridiem: 'AM', - postMeridiem: 'PM', - placeholder: 'please select', + now: "Now", + confirm: "Confirm", + anteMeridiem: "AM", + postMeridiem: "PM", + placeholder: "please select", }, dialog: { - confirm: 'Confirm', - cancel: 'Cancel', + confirm: "Confirm", + cancel: "Cancel", }, drawer: { - confirm: 'Confirm', - cancel: 'Cancel', + confirm: "Confirm", + cancel: "Cancel", }, popconfirm: { confirm: { - content: 'OK', + content: "OK", }, cancel: { - content: 'Cancel', + content: "Cancel", }, }, table: { - empty: 'Empty Data', - loadingText: 'loading...', - loadingMoreText: 'loading more', - filterInputPlaceholder: '', - sortAscendingOperationText: 'click to sort ascending', - sortCancelOperationText: 'click to cancel sorting', - sortDescendingOperationText: 'click to sort descending', - clearFilterResultButtonText: 'Clear', - columnConfigButtonText: 'Column Config', - columnConfigTitleText: 'Table Column Config', - columnConfigDescriptionText: 'Please select columns to show them in the table', - confirmText: 'Confirm', - cancelText: 'Cancel', - resetText: 'Reset', - selectAllText: 'Select All', + empty: "Empty Data", + loadingText: "loading...", + loadingMoreText: "loading more", + filterInputPlaceholder: "", + sortAscendingOperationText: "click to sort ascending", + sortCancelOperationText: "click to cancel sorting", + sortDescendingOperationText: "click to sort descending", + clearFilterResultButtonText: "Clear", + columnConfigButtonText: "Column Config", + columnConfigTitleText: "Table Column Config", + columnConfigDescriptionText: + "Please select columns to show them in the table", + confirmText: "Confirm", + cancelText: "Cancel", + resetText: "Reset", + selectAllText: "Select All", searchResultText: 'Search "{result}". Find {count} items.', }, select: { - empty: 'Empty Data', - loadingText: 'loading...', - placeholder: 'please select', + empty: "Empty Data", + loadingText: "loading...", + placeholder: "please select", }, tree: { - empty: 'Empty Data', + empty: "Empty Data", }, treeSelect: { - empty: 'Empty Data', - loadingText: 'loading...', - placeholder: 'please select', + empty: "Empty Data", + loadingText: "loading...", + placeholder: "please select", }, datePicker: { placeholder: { - date: 'select date', - month: 'select month', - year: 'select year', + date: "select date", + month: "select month", + year: "select year", }, - weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - quarters: ['Q1', 'Q2', 'Q3', 'Q4'], - rangeSeparator: ' - ', - direction: 'ltr', - format: 'YYYY-MM-DD', - dayAriaLabel: 'D', - yearAriaLabel: 'Y', - monthAriaLabel: 'M', - weekAbbreviation: 'W', - confirm: 'Confirm', - selectTime: 'Select Time', - selectDate: 'Select Date', - nextYear: 'Next Year', - preYear: 'Last Year', - nextMonth: 'Next Month', - preMonth: 'Last Month', - preDecade: 'Last Decade', - nextDecade: 'Next Decade', - now: 'Now', + weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + months: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + quarters: ["Q1", "Q2", "Q3", "Q4"], + rangeSeparator: " - ", + direction: "ltr", + format: "YYYY-MM-DD", + dayAriaLabel: "D", + yearAriaLabel: "Y", + monthAriaLabel: "M", + weekAbbreviation: "W", + confirm: "Confirm", + selectTime: "Select Time", + selectDate: "Select Date", + nextYear: "Next Year", + preYear: "Last Year", + nextMonth: "Next Month", + preMonth: "Last Month", + preDecade: "Last Decade", + nextDecade: "Next Decade", + now: "Now", }, upload: { - sizeLimitMessage: 'File is too large to upload. {sizeLimit}', - cancelUploadText: 'Cancel', + sizeLimitMessage: "File is too large to upload. {sizeLimit}", + cancelUploadText: "Cancel", triggerUploadText: { - fileInput: 'Upload', - image: 'Click to upload', - normal: 'Upload', - reupload: 'ReUpload', - continueUpload: 'Continue Upload', - delete: 'Delete', - uploading: 'Uploading', + fileInput: "Upload", + image: "Click to upload", + normal: "Upload", + reupload: "ReUpload", + continueUpload: "Continue Upload", + delete: "Delete", + uploading: "Uploading", }, dragger: { - dragDropText: 'Drop hear', - draggingText: 'Drag file to this area to upload', + dragDropText: "Drop hear", + draggingText: "Drag file to this area to upload", clickAndDragText: 'Click "Upload" or Drag file to this area to upload', }, file: { - fileNameText: 'filename', - fileSizeText: 'size', - fileStatusText: 'status', - fileOperationText: 'operation', - fileOperationDateText: 'date', + fileNameText: "filename", + fileSizeText: "size", + fileStatusText: "status", + fileOperationText: "operation", + fileOperationDateText: "date", }, progress: { - uploadingText: 'Uploading', - waitingText: 'Waiting', - failText: 'Failed', - successText: 'Success', + uploadingText: "Uploading", + waitingText: "Waiting", + failText: "Failed", + successText: "Success", }, }, form: { errorMessage: { - date: '${name} is invalid', - url: '${name} is invalid', - required: '${name} is required', - max: '${name} must be at least ${validate} characters', - min: '${name} cannot be longer than ${validate} characters', - len: '${name} must be exactly ${validate} characters', - enum: '${name} must be one of ${validate}', - idcard: '${name} is invalid', - telnumber: '${name} is invalid', - pattern: '${name} is invalid', - validator: '${name} is invalid', - boolean: '${name} is not a boolean', - number: '${name} must be a number', + date: "${name} is invalid", + url: "${name} is invalid", + required: "${name} is required", + max: "${name} must be at least ${validate} characters", + min: "${name} cannot be longer than ${validate} characters", + len: "${name} must be exactly ${validate} characters", + enum: "${name} must be one of ${validate}", + idcard: "${name} is invalid", + telnumber: "${name} is invalid", + pattern: "${name} is invalid", + validator: "${name} is invalid", + boolean: "${name} is not a boolean", + number: "${name} must be a number", }, }, input: { - placeholder: 'please enter', + placeholder: "please enter", }, list: { - loadingText: 'loading...', - loadingMoreText: 'loading more', + loadingText: "loading...", + loadingMoreText: "loading more", }, alert: { - expandText: 'expand', - collapseText: 'collapse', + expandText: "expand", + collapseText: "collapse", }, anchor: { - copySuccessText: 'copy the link successfully', - copyText: 'copy link', + copySuccessText: "copy the link successfully", + copyText: "copy link", }, colorPicker: { - swatchColorTitle: 'System Default', - recentColorTitle: 'Recently Used', - clearConfirmText: 'Clear recently used colors?', + swatchColorTitle: "System Default", + recentColorTitle: "Recently Used", + clearConfirmText: "Clear recently used colors?", }, guide: { finishButtonProps: { - content: 'Finish', - theme: 'primary' + content: "Finish", + theme: "primary", }, nextButtonProps: { - content: 'Next Step', - theme: 'primary' + content: "Next Step", + theme: "primary", }, skipButtonProps: { - content: 'Skip', - theme: 'default' + content: "Skip", + theme: "default", }, prevButtonProps: { - content: 'Last Step', - theme: 'default' + content: "Last Step", + theme: "default", + }, + image: { + errorText: "unable to load", + loadingText: "loading", + }, + imageViewer: { + errorText: "unable to load", + mirrorTipText: "mirror", + rotateTipText: "rotate", + originsizeTipText: "original", }, }, } as const; diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 68c0cc388d..cea52c8db6 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -2,198 +2,222 @@ // 文件有效，为国际化做准备 export default { pagination: { - itemsPerPage: '{size} /ページ', - jumpTo: 'ジャンプする', - page: 'ページ', - total: '合計 {total} 項目データ', + itemsPerPage: "{size} /ページ", + jumpTo: "ジャンプする", + page: "ページ", + total: "合計 {total} 項目データ", }, cascader: { - empty: 'データなし', - loadingText: 'ローディング', - placeholder: '選択してください', + empty: "データなし", + loadingText: "ローディング", + placeholder: "選択してください", }, calendar: { - yearSelection: '{year} 年', - monthSelection: '{month} 月', - yearRadio: '年', - monthRadio: '月', - hideWeekend: 'ヒドゥン・ウィークエンド', - showWeekend: 'ショーウィークエンド', - today: '今日', - thisMonth: '今月は', - week: '月,火,水,木,金,土,日', - cellMonth: '1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月', + yearSelection: "{year} 年", + monthSelection: "{month} 月", + yearRadio: "年", + monthRadio: "月", + hideWeekend: "ヒドゥン・ウィークエンド", + showWeekend: "ショーウィークエンド", + today: "今日", + thisMonth: "今月は", + week: "月,火,水,木,金,土,日", + cellMonth: "1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月", }, transfer: { - title: '{checked} / {total} 項目', - empty: 'データなし', - placeholder: '検索するキーワードを入力してください', + title: "{checked} / {total} 項目", + empty: "データなし", + placeholder: "検索するキーワードを入力してください", }, timePicker: { - now: 'このとき', - confirm: '決定事項', - anteMeridiem: 'モーニング', - postMeridiem: '午後', - placeholder: '時間を選択する', + now: "このとき", + confirm: "決定事項", + anteMeridiem: "モーニング", + postMeridiem: "午後", + placeholder: "時間を選択する", }, dialog: { - confirm: '確認事項', - cancel: 'キャンセルについて', + confirm: "確認事項", + cancel: "キャンセルについて", }, drawer: { - confirm: '確認事項', - cancel: 'キャンセルについて', + confirm: "確認事項", + cancel: "キャンセルについて", }, popconfirm: { confirm: { - content: '確認事項', + content: "確認事項", }, cancel: { - content: 'キャンセルについて', + content: "キャンセルについて", }, }, table: { - empty: 'データなし', - loadingText: 'ロード中です、お待ちください', - loadingMoreText: 'クリックでさらに読み込み', - filterInputPlaceholder: '内容を入力してください（初期値なし）', - sortAscendingOperationText: 'クリックで昇降', - sortCancelOperationText: 'クリックでソート解除', - sortDescendingOperationText: '降順でクリック', - clearFilterResultButtonText: 'クリアフィルター', - columnConfigButtonText: 'カラム構成', - columnConfigTitleText: 'テーブルカラムの構成', - columnConfigDescriptionText: '表に表示するデータの列を選択してください。', - confirmText: '確認事項', - cancelText: 'キャンセルについて', - resetText: 'リセット', - selectAllText: 'すべて選択', - searchResultText: '検索“{result}”，探す {count} 記事結果', + empty: "データなし", + loadingText: "ロード中です、お待ちください", + loadingMoreText: "クリックでさらに読み込み", + filterInputPlaceholder: "内容を入力してください（初期値なし）", + sortAscendingOperationText: "クリックで昇降", + sortCancelOperationText: "クリックでソート解除", + sortDescendingOperationText: "降順でクリック", + clearFilterResultButtonText: "クリアフィルター", + columnConfigButtonText: "カラム構成", + columnConfigTitleText: "テーブルカラムの構成", + columnConfigDescriptionText: "表に表示するデータの列を選択してください。", + confirmText: "確認事項", + cancelText: "キャンセルについて", + resetText: "リセット", + selectAllText: "すべて選択", + searchResultText: "検索“{result}”，探す {count} 記事結果", }, select: { - empty: 'データなし', - loadingText: 'ローディング', - placeholder: '選択してください', + empty: "データなし", + loadingText: "ローディング", + placeholder: "選択してください", }, tree: { - empty: 'データなし', + empty: "データなし", }, treeSelect: { - empty: 'データなし', - loadingText: 'ローディング', - placeholder: '選択してください', + empty: "データなし", + loadingText: "ローディング", + placeholder: "選択してください", }, datePicker: { placeholder: { - date: '日付を選択してください', - month: '月を選択してください', - year: '年度を選択してください', + date: "日付を選択してください", + month: "月を選択してください", + year: "年度を選択してください", }, - weekdays: ['一', '二', '三', '四', '五', '六', '日'], - months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'], - quarters: ['Q1', 'Q2', 'Q3', 'Q4'], - rangeSeparator: ' - ', - direction: 'ltr', - format: 'YYYY-MM-DD', - dayAriaLabel: '日', - weekAbbreviation: '週間', - yearAriaLabel: '年', - monthAriaLabel: '月', - confirm: '決定事項', - selectTime: '時間を選択する', - selectDate: '日付を選択', - nextYear: '来年度', - preYear: '前年度', - nextMonth: '来月', - preMonth: '先月', - preDecade: '過去10年間', - nextDecade: '次の10年', - now: '電流', + weekdays: ["一", "二", "三", "四", "五", "六", "日"], + months: [ + "1 月", + "2 月", + "3 月", + "4 月", + "5 月", + "6 月", + "7 月", + "8 月", + "9 月", + "10 月", + "11 月", + "12 月", + ], + quarters: ["Q1", "Q2", "Q3", "Q4"], + rangeSeparator: " - ", + direction: "ltr", + format: "YYYY-MM-DD", + dayAriaLabel: "日", + weekAbbreviation: "週間", + yearAriaLabel: "年", + monthAriaLabel: "月", + confirm: "決定事項", + selectTime: "時間を選択する", + selectDate: "日付を選択", + nextYear: "来年度", + preYear: "前年度", + nextMonth: "来月", + preMonth: "先月", + preDecade: "過去10年間", + nextDecade: "次の10年", + now: "電流", }, upload: { - sizeLimitMessage: '画像サイズは最大で {sizeLimit}', - cancelUploadText: 'アップロードをキャンセルする', + sizeLimitMessage: "画像サイズは最大で {sizeLimit}", + cancelUploadText: "アップロードをキャンセルする", triggerUploadText: { - fileInput: 'ファイル選択', - image: 'クリックで画像をアップロード', - normal: 'クリックでアップロード', - reupload: '再アップロード', - continueUpload: 'アップロードを継続する', - delete: '削除', - uploading: 'アップロード中', + fileInput: "ファイル選択", + image: "クリックで画像をアップロード", + normal: "クリックでアップロード", + reupload: "再アップロード", + continueUpload: "アップロードを継続する", + delete: "削除", + uploading: "アップロード中", }, dragger: { - dragDropText: 'マウスを離す', - draggingText: 'この領域にドラッグ＆ドロップする', - clickAndDragText: '上の「ファイルを選択」をクリックするか、このエリアにファイルをドラッグ＆ドロップしてください', + dragDropText: "マウスを離す", + draggingText: "この領域にドラッグ＆ドロップする", + clickAndDragText: + "上の「ファイルを選択」をクリックするか、このエリアにファイルをドラッグ＆ドロップしてください", }, file: { - fileNameText: 'ファイル名', - fileSizeText: 'ファイルサイズ', - fileStatusText: '状態です', - fileOperationText: '操作', - fileOperationDateText: 'アップロード日', + fileNameText: "ファイル名", + fileSizeText: "ファイルサイズ", + fileStatusText: "状態です", + fileOperationText: "操作", + fileOperationDateText: "アップロード日", }, progress: { - uploadingText: 'アップロード中', - waitingText: 'アップロード予定', - failText: 'アップロードに失敗しました', - successText: 'アップロード成功', + uploadingText: "アップロード中", + waitingText: "アップロード予定", + failText: "アップロードに失敗しました", + successText: "アップロード成功", }, }, form: { errorMessage: { - date: '正しく入力してください${name}', - url: '正しく入力してください${name}', - required: '${name}必須項目', - max: '${name}文字数制限 ${validate} 文字，一中二文', - min: '${name}を下回る文字数は使用できません ${validate} 文字，一中二文', - len: '${name}文字の長さは、必ず ${validate}', - enum: '${name}でしかありえません${validate}等', - idcard: '正しく入力してください${name}', - telnumber: '正しく入力してください${name}', - pattern: '正しく入力してください${name}', - validator: '${name}要件を満たしていない', - boolean: '${name}データ型は Boolean 型であること', - number: '${name}デジタルであること', + date: "正しく入力してください${name}", + url: "正しく入力してください${name}", + required: "${name}必須項目", + max: "${name}文字数制限 ${validate} 文字，一中二文", + min: "${name}を下回る文字数は使用できません ${validate} 文字，一中二文", + len: "${name}文字の長さは、必ず ${validate}", + enum: "${name}でしかありえません${validate}等", + idcard: "正しく入力してください${name}", + telnumber: "正しく入力してください${name}", + pattern: "正しく入力してください${name}", + validator: "${name}要件を満たしていない", + boolean: "${name}データ型は Boolean 型であること", + number: "${name}デジタルであること", }, }, input: { - placeholder: '入力してください', + placeholder: "入力してください", }, list: { - loadingText: 'ロード中です、お待ちください', - loadingMoreText: 'クリックでさらに読み込み', + loadingText: "ロード中です、お待ちください", + loadingMoreText: "クリックでさらに読み込み", }, alert: { - expandText: 'もっと拡大する', - collapseText: 'コレクト', + expandText: "もっと拡大する", + collapseText: "コレクト", }, anchor: { - copySuccessText: 'リンクが正常にコピーされました', - copyText: 'コピーリンク', + copySuccessText: "リンクが正常にコピーされました", + copyText: "コピーリンク", }, colorPicker: { - swatchColorTitle: 'システムプリセットカラー', - recentColorTitle: '最近使用した色', - clearConfirmText: '最近使用した色をクリアにするのは確実ですか？', + swatchColorTitle: "システムプリセットカラー", + recentColorTitle: "最近使用した色", + clearConfirmText: "最近使用した色をクリアにするのは確実ですか？", }, guide: { finishButtonProps: { - content: '終了', - theme: 'primary' + content: "終了", + theme: "primary", }, nextButtonProps: { - content: '次のステップ', - theme: 'primary' + content: "次のステップ", + theme: "primary", }, skipButtonProps: { - content: 'スキップ', - theme: 'default' + content: "スキップ", + theme: "default", }, prevButtonProps: { - content: '前へ', - theme: 'default' + content: "前へ", + theme: "default", }, }, + image: { + errorText: "画像を表示できません", + loadingText: "画像の読み込み", + }, + imageViewer: { + errorText: "画像の読み込みに失敗しました。再読み込みしてみてください", + mirrorTipText: "鏡像", + rotateTipText: "回転する", + originsizeTipText: "オリジナルサイズ", + }, } as const; diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index b536083b10..a07dd646b6 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -2,198 +2,222 @@ // 文件有效，为国际化做准备 export default { pagination: { - itemsPerPage: '{size} /페이지', - jumpTo: '건너뛰다', - page: '페이지', - total: '흔한 {total} 아이템 데이터', + itemsPerPage: "{size} /페이지", + jumpTo: "건너뛰다", + page: "페이지", + total: "흔한 {total} 아이템 데이터", }, cascader: { - empty: '데이터 없음', - loadingText: '로딩 중', - placeholder: '선택해주세요', + empty: "데이터 없음", + loadingText: "로딩 중", + placeholder: "선택해주세요", }, calendar: { - yearSelection: '{year} 년도', - monthSelection: '{month} 달', - yearRadio: '년도', - monthRadio: '달', - hideWeekend: '주말을 숨기다', - showWeekend: '주말 쇼', - today: '오늘', - thisMonth: '이번 달', - week: '하나,둘,셋,넷,다섯,여섯,하루', - cellMonth: '1월,2월,3월,4월,5월,6월,7월,8월,9월,10월,11월,12월', + yearSelection: "{year} 년도", + monthSelection: "{month} 달", + yearRadio: "년도", + monthRadio: "달", + hideWeekend: "주말을 숨기다", + showWeekend: "주말 쇼", + today: "오늘", + thisMonth: "이번 달", + week: "하나,둘,셋,넷,다섯,여섯,하루", + cellMonth: "1월,2월,3월,4월,5월,6월,7월,8월,9월,10월,11월,12월", }, transfer: { - title: '{checked} / {total} 안건', - empty: '데이터 없음', - placeholder: '검색할 키워드를 입력하세요', + title: "{checked} / {total} 안건", + empty: "데이터 없음", + placeholder: "검색할 키워드를 입력하세요", }, timePicker: { - now: '지금', - confirm: '확신하는', - anteMeridiem: '아침', - postMeridiem: '오후', - placeholder: '선발 기간', + now: "지금", + confirm: "확신하는", + anteMeridiem: "아침", + postMeridiem: "오후", + placeholder: "선발 기간", }, dialog: { - confirm: '확인하다', - cancel: '취소', + confirm: "확인하다", + cancel: "취소", }, drawer: { - confirm: '확인하다', - cancel: '취소', + confirm: "확인하다", + cancel: "취소", }, popconfirm: { confirm: { - content: '확신하는', + content: "확신하는", }, cancel: { - content: '취소', + content: "취소", }, }, table: { - empty: '데이터 없음', - loadingText: '로딩 중 기다려주세요', - loadingMoreText: '더 로드하려면 클릭하세요', - filterInputPlaceholder: '아무거나 입력하세요(기본값 없음)', - sortAscendingOperationText: '오름차순으로 클릭', - sortCancelOperationText: '클릭하여 정렬 해제', - sortDescendingOperationText: '내림차순으로 클릭', - clearFilterResultButtonText: '클리어 필터', - columnConfigButtonText: '열 구성', - columnConfigTitleText: '테이블 열 구성', - columnConfigDescriptionText: '테이블에 표시할 데이터 열을 선택하십시오', - confirmText: '확인하다', - cancelText: '취소', - resetText: '초기화', - selectAllText: '모두 선택', - searchResultText: '검색“{result}”，일어나 {count} 결과', + empty: "데이터 없음", + loadingText: "로딩 중 기다려주세요", + loadingMoreText: "더 로드하려면 클릭하세요", + filterInputPlaceholder: "아무거나 입력하세요(기본값 없음)", + sortAscendingOperationText: "오름차순으로 클릭", + sortCancelOperationText: "클릭하여 정렬 해제", + sortDescendingOperationText: "내림차순으로 클릭", + clearFilterResultButtonText: "클리어 필터", + columnConfigButtonText: "열 구성", + columnConfigTitleText: "테이블 열 구성", + columnConfigDescriptionText: "테이블에 표시할 데이터 열을 선택하십시오", + confirmText: "확인하다", + cancelText: "취소", + resetText: "초기화", + selectAllText: "모두 선택", + searchResultText: "검색“{result}”，일어나 {count} 결과", }, select: { - empty: '데이터 없음', - loadingText: '로딩 중', - placeholder: '선택해주세요', + empty: "데이터 없음", + loadingText: "로딩 중", + placeholder: "선택해주세요", }, tree: { - empty: '데이터 없음', + empty: "데이터 없음", }, treeSelect: { - empty: '데이터 없음', - loadingText: '로딩 중', - placeholder: '선택해주세요', + empty: "데이터 없음", + loadingText: "로딩 중", + placeholder: "선택해주세요", }, datePicker: { placeholder: { - date: '날짜를 선택하세요Z', - month: '월을 선택하세요', - year: '연도를 선택하세요', + date: "날짜를 선택하세요Z", + month: "월을 선택하세요", + year: "연도를 선택하세요", }, - weekdays: ['하나', '둘', '삼', '4', '다섯', '여섯', '낮'], - months: ['1 월', '2 월', '3 월', '4 월', '5 월', '6 월', '7 월', '8 월', '9 월', '10 월', '11 월', '12 월'], - quarters: ['Q1', 'Q2', 'Q3', 'Q4'], - rangeSeparator: ' - ', - direction: 'ltr', - format: 'YYYY-MM-DD', - dayAriaLabel: '낮', - weekAbbreviation: '주', - yearAriaLabel: '년도', - monthAriaLabel: '달', - confirm: '확신하는', - selectTime: '선발 기간', - selectDate: '날짜 선택', - nextYear: '내년', - preYear: '작년', - nextMonth: '다음 달', - preMonth: '지난 달', - preDecade: '지난 십 년', - nextDecade: '다음 10년', - now: '현재의', + weekdays: ["하나", "둘", "삼", "4", "다섯", "여섯", "낮"], + months: [ + "1 월", + "2 월", + "3 월", + "4 월", + "5 월", + "6 월", + "7 월", + "8 월", + "9 월", + "10 월", + "11 월", + "12 월", + ], + quarters: ["Q1", "Q2", "Q3", "Q4"], + rangeSeparator: " - ", + direction: "ltr", + format: "YYYY-MM-DD", + dayAriaLabel: "낮", + weekAbbreviation: "주", + yearAriaLabel: "년도", + monthAriaLabel: "달", + confirm: "확신하는", + selectTime: "선발 기간", + selectDate: "날짜 선택", + nextYear: "내년", + preYear: "작년", + nextMonth: "다음 달", + preMonth: "지난 달", + preDecade: "지난 십 년", + nextDecade: "다음 10년", + now: "현재의", }, upload: { - sizeLimitMessage: '이미지 크기는 다음을 초과할 수 없습니다 {sizeLimit}', - cancelUploadText: '업로드 취소', + sizeLimitMessage: "이미지 크기는 다음을 초과할 수 없습니다 {sizeLimit}", + cancelUploadText: "업로드 취소", triggerUploadText: { - fileInput: '파일 선택', - image: '이미지를 업로드하려면 클릭하세요', - normal: '업로드하려면 클릭', - reupload: '재업로드', - continueUpload: '계속 업로드', - delete: '삭제', - uploading: '업로드' + fileInput: "파일 선택", + image: "이미지를 업로드하려면 클릭하세요", + normal: "업로드하려면 클릭", + reupload: "재업로드", + continueUpload: "계속 업로드", + delete: "삭제", + uploading: "업로드", }, dragger: { - dragDropText: '마우스를 놓으십시오', - draggingText: '이 영역으로 드래그 앤 드롭', - clickAndDragText: '위의 "파일 선택"을 클릭하거나 파일을 이 영역으로 끌어다 놓습니다', + dragDropText: "마우스를 놓으십시오", + draggingText: "이 영역으로 드래그 앤 드롭", + clickAndDragText: + '위의 "파일 선택"을 클릭하거나 파일을 이 영역으로 끌어다 놓습니다', }, file: { - fileNameText: '파일 이름', - fileSizeText: '파일 크기', - fileStatusText: '상태', - fileOperationText: '작동하다', - fileOperationDateText: '업로드 날짜', + fileNameText: "파일 이름", + fileSizeText: "파일 크기", + fileStatusText: "상태", + fileOperationText: "작동하다", + fileOperationDateText: "업로드 날짜", }, progress: { - uploadingText: '업로드', - waitingText: '업로드 보류 중', - failText: '업로드 실패', - successText: '성공적으로 업로드됨', + uploadingText: "업로드", + waitingText: "업로드 보류 중", + failText: "업로드 실패", + successText: "성공적으로 업로드됨", }, }, form: { errorMessage: { - date: '정확한 내용을 입력해주세요${name}', - url: '정확한 내용을 입력해주세요${name}', - required: '${name}필수의', - max: '${name}문자 길이는 초과할 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다', - min: '${name}문자 길이는 다음보다 작을 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다', - len: '${name}문자 길이는 다음과 같아야 합니다. ${validate}', - enum: '${name}만 될 수 있습니다${validate}그리고 더', - idcard: '정확한 내용을 입력해주세요${name}', - telnumber: '정확한 내용을 입력해주세요${name}', - pattern: '정확한 내용을 입력해주세요${name}', - validator: '${name}비준수', - boolean: '${name}데이터 유형은 부울이어야 합니다', - number: '${name}숫자여야 합니다', + date: "정확한 내용을 입력해주세요${name}", + url: "정확한 내용을 입력해주세요${name}", + required: "${name}필수의", + max: "${name}문자 길이는 초과할 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다", + min: "${name}문자 길이는 다음보다 작을 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다", + len: "${name}문자 길이는 다음과 같아야 합니다. ${validate}", + enum: "${name}만 될 수 있습니다${validate}그리고 더", + idcard: "정확한 내용을 입력해주세요${name}", + telnumber: "정확한 내용을 입력해주세요${name}", + pattern: "정확한 내용을 입력해주세요${name}", + validator: "${name}비준수", + boolean: "${name}데이터 유형은 부울이어야 합니다", + number: "${name}숫자여야 합니다", }, }, input: { - placeholder: '들어 오세요', + placeholder: "들어 오세요", }, list: { - loadingText: '로딩 중 기다려주세요', - loadingMoreText: '더 로드하려면 클릭하세요', + loadingText: "로딩 중 기다려주세요", + loadingMoreText: "더 로드하려면 클릭하세요", }, alert: { - expandText: '더 확장', - collapseText: '치워', + expandText: "더 확장", + collapseText: "치워", }, anchor: { - copySuccessText: '링크 복사 성공', - copyText: '링크 복사', + copySuccessText: "링크 복사 성공", + copyText: "링크 복사", }, colorPicker: { - swatchColorTitle: '시스템 기본 색상', - recentColorTitle: '최근 사용한 색상', - clearConfirmText: '최근에 사용한 색상을 지우시겠습니까?', + swatchColorTitle: "시스템 기본 색상", + recentColorTitle: "최근 사용한 색상", + clearConfirmText: "최근에 사용한 색상을 지우시겠습니까?", }, guide: { finishButtonProps: { - content: '완료', - theme: 'primary' + content: "완료", + theme: "primary", }, nextButtonProps: { - content: '다음 단계', - theme: 'primary' + content: "다음 단계", + theme: "primary", }, skipButtonProps: { - content: '건너뛰기', - theme: 'default' + content: "건너뛰기", + theme: "default", }, prevButtonProps: { - content: '마지막 단계', - theme: 'default' + content: "마지막 단계", + theme: "default", }, }, + image: { + errorText: "사진을 표시할 수 없습니다.", + loadingText: "이미지 로딩", + }, + imageViewer: { + errorText: "이미지를 로드하지 못했습니다. 새로고침해 보세요.", + mirrorTipText: "미러 이미지", + rotateTipText: "회전하다", + originsizeTipText: "원본 크기", + }, } as const; diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index f3567f29e3..b4896ccd79 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -2,199 +2,222 @@ // 文件有效，为国际化做准备 export default { pagination: { - itemsPerPage: '{size} 条/页', - jumpTo: '跳至', - page: '页', - total: '共 {total} 项数据', + itemsPerPage: "{size} 条/页", + jumpTo: "跳至", + page: "页", + total: "共 {total} 项数据", }, cascader: { - empty: '暂无数据', - loadingText: '加载中', - placeholder: '请选择', + empty: "暂无数据", + loadingText: "加载中", + placeholder: "请选择", }, calendar: { - yearSelection: '{year} 年', - monthSelection: '{month} 月', - yearRadio: '年', - monthRadio: '月', - hideWeekend: '隐藏周末', - showWeekend: '显示周末', - today: '今天', - thisMonth: '本月', - week: '一,二,三,四,五,六,日', - cellMonth: '1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月', + yearSelection: "{year} 年", + monthSelection: "{month} 月", + yearRadio: "年", + monthRadio: "月", + hideWeekend: "隐藏周末", + showWeekend: "显示周末", + today: "今天", + thisMonth: "本月", + week: "一,二,三,四,五,六,日", + cellMonth: "1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月", }, transfer: { - title: '{checked} / {total} 项', - empty: '暂无数据', - placeholder: '请输入关键词搜索', + title: "{checked} / {total} 项", + empty: "暂无数据", + placeholder: "请输入关键词搜索", }, timePicker: { - now: '此刻', - confirm: '确定', - anteMeridiem: '上午', - postMeridiem: '下午', - placeholder: '选择时间', + now: "此刻", + confirm: "确定", + anteMeridiem: "上午", + postMeridiem: "下午", + placeholder: "选择时间", }, dialog: { - confirm: '确认', - cancel: '取消', + confirm: "确认", + cancel: "取消", }, drawer: { - confirm: '确认', - cancel: '取消', + confirm: "确认", + cancel: "取消", }, popconfirm: { confirm: { - content: '确定', + content: "确定", }, cancel: { - content: '取消', + content: "取消", }, }, table: { - empty: '暂无数据', - loadingText: '正在加载中，请稍后', - loadingMoreText: '点击加载更多', - filterInputPlaceholder: '请输入内容（无默认值）', - sortAscendingOperationText: '点击升序', - sortCancelOperationText: '点击取消排序', - sortDescendingOperationText: '点击降序', - clearFilterResultButtonText: '清空筛选', - columnConfigButtonText: '列配置', - columnConfigTitleText: '表格列配置', - columnConfigDescriptionText: '请选择需要在表格中显示的数据列', - confirmText: '确认', - cancelText: '取消', - resetText: '重置', - selectAllText: '全选', - searchResultText: '搜索“{result}”，找到 {count} 条结果', + empty: "暂无数据", + loadingText: "正在加载中，请稍后", + loadingMoreText: "点击加载更多", + filterInputPlaceholder: "请输入内容（无默认值）", + sortAscendingOperationText: "点击升序", + sortCancelOperationText: "点击取消排序", + sortDescendingOperationText: "点击降序", + clearFilterResultButtonText: "清空筛选", + columnConfigButtonText: "列配置", + columnConfigTitleText: "表格列配置", + columnConfigDescriptionText: "请选择需要在表格中显示的数据列", + confirmText: "确认", + cancelText: "取消", + resetText: "重置", + selectAllText: "全选", + searchResultText: "搜索“{result}”，找到 {count} 条结果", }, select: { - empty: '暂无数据', - loadingText: '加载中', - placeholder: '请选择', + empty: "暂无数据", + loadingText: "加载中", + placeholder: "请选择", }, tree: { - empty: '暂无数据', + empty: "暂无数据", }, treeSelect: { - empty: '暂无数据', - loadingText: '加载中', - placeholder: '请选择', + empty: "暂无数据", + loadingText: "加载中", + placeholder: "请选择", }, datePicker: { placeholder: { - date: '请选择日期', - month: '请选择月份', - year: '请选择年份', + date: "请选择日期", + month: "请选择月份", + year: "请选择年份", }, - weekdays: ['一', '二', '三', '四', '五', '六', '日'], - months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'], - quarters: ['一季度', '二季度', '三季度', '四季度'], - rangeSeparator: ' - ', - direction: 'ltr', - format: 'YYYY-MM-DD', - dayAriaLabel: '日', - weekAbbreviation: '周', - yearAriaLabel: '年', - monthAriaLabel: '月', - confirm: '确定', - selectTime: '选择时间', - selectDate: '选择日期', - nextYear: '下一年', - preYear: '上一年', - nextMonth: '下个月', - preMonth: '上个月', - preDecade: '上个十年', - nextDecade: '下个十年', - now: '当前', + weekdays: ["一", "二", "三", "四", "五", "六", "日"], + months: [ + "1 月", + "2 月", + "3 月", + "4 月", + "5 月", + "6 月", + "7 月", + "8 月", + "9 月", + "10 月", + "11 月", + "12 月", + ], + quarters: ["一季度", "二季度", "三季度", "四季度"], + rangeSeparator: " - ", + direction: "ltr", + format: "YYYY-MM-DD", + dayAriaLabel: "日", + weekAbbreviation: "周", + yearAriaLabel: "年", + monthAriaLabel: "月", + confirm: "确定", + selectTime: "选择时间", + selectDate: "选择日期", + nextYear: "下一年", + preYear: "上一年", + nextMonth: "下个月", + preMonth: "上个月", + preDecade: "上个十年", + nextDecade: "下个十年", + now: "当前", }, upload: { - sizeLimitMessage: '文件大小不能超过 {sizeLimit}', - cancelUploadText: '取消上传', + sizeLimitMessage: "文件大小不能超过 {sizeLimit}", + cancelUploadText: "取消上传", triggerUploadText: { - fileInput: '选择文件', - image: '点击上传图片', - normal: '点击上传', + fileInput: "选择文件", + image: "点击上传图片", + normal: "点击上传", // 选择文件和上传文件是 2 个步骤，文本需明确步骤 - reupload: '重新选择', - continueUpload: '继续选择', - delete: '删除', - uploading: '上传中', + reupload: "重新选择", + continueUpload: "继续选择", + delete: "删除", + uploading: "上传中", }, dragger: { - dragDropText: '释放鼠标', - draggingText: '拖拽到此区域', - clickAndDragText: '点击上方“选择文件”或将文件拖拽到此区域', + dragDropText: "释放鼠标", + draggingText: "拖拽到此区域", + clickAndDragText: "点击上方“选择文件”或将文件拖拽到此区域", }, file: { - fileNameText: '文件名', - fileSizeText: '文件大小', - fileStatusText: '状态', - fileOperationText: '操作', - fileOperationDateText: '上传日期', + fileNameText: "文件名", + fileSizeText: "文件大小", + fileStatusText: "状态", + fileOperationText: "操作", + fileOperationDateText: "上传日期", }, progress: { - uploadingText: '上传中', - waitingText: '待上传', - failText: '上传失败', - successText: '上传成功', + uploadingText: "上传中", + waitingText: "待上传", + failText: "上传失败", + successText: "上传成功", }, }, form: { errorMessage: { - date: '请输入正确的${name}', - url: '请输入正确的${name}', - required: '${name}必填', - max: '${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符', - min: '${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符', - len: '${name}字符长度必须是 ${validate}', - enum: '${name}只能是${validate}等', - idcard: '请输入正确的${name}', - telnumber: '请输入正确的${name}', - pattern: '请输入正确的${name}', - validator: '${name}不符合要求', - boolean: '${name}数据类型必须是布尔类型', - number: '${name}必须是数字', + date: "请输入正确的${name}", + url: "请输入正确的${name}", + required: "${name}必填", + max: "${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符", + min: "${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符", + len: "${name}字符长度必须是 ${validate}", + enum: "${name}只能是${validate}等", + idcard: "请输入正确的${name}", + telnumber: "请输入正确的${name}", + pattern: "请输入正确的${name}", + validator: "${name}不符合要求", + boolean: "${name}数据类型必须是布尔类型", + number: "${name}必须是数字", }, }, input: { - placeholder: '请输入', + placeholder: "请输入", }, list: { - loadingText: '正在加载中，请稍等', - loadingMoreText: '点击加载更多', + loadingText: "正在加载中，请稍等", + loadingMoreText: "点击加载更多", }, alert: { - expandText: '展开更多', - collapseText: '收起', + expandText: "展开更多", + collapseText: "收起", }, anchor: { - copySuccessText: '链接复制成功', - copyText: '复制链接', + copySuccessText: "链接复制成功", + copyText: "复制链接", }, colorPicker: { - swatchColorTitle: '系统预设颜色', - recentColorTitle: '最近使用颜色', - clearConfirmText: '确定清空最近使用的颜色吗？', + swatchColorTitle: "系统预设颜色", + recentColorTitle: "最近使用颜色", + clearConfirmText: "确定清空最近使用的颜色吗？", }, guide: { finishButtonProps: { - content: '完成', - theme: 'primary' + content: "完成", + theme: "primary", }, nextButtonProps: { - content: '下一步', - theme: 'primary' + content: "下一步", + theme: "primary", }, skipButtonProps: { - content: '跳过', - theme: 'default' + content: "跳过", + theme: "default", }, prevButtonProps: { - content: '上一步', - theme: 'default' + content: "上一步", + theme: "default", }, }, + image: { + errorText: "图片无法显示", + loadingText: "图片加载中", + }, + imageViewer: { + errorText: "图片加载失败，可尝试重新加载", + mirrorTipText: "镜像", + rotateTipText: "旋转", + originsizeTipText: "原始大小", + }, } as const; From a1ddb54cb864ec588132f237ce1c94ac5372f951 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sun, 29 Jan 2023 14:15:50 +0800 Subject: [PATCH 153/312] Upload Style & XHR (#1126) * feat(web): upload xhr * feat(web): upload * feat(web): upload dragger-btns * feat(web): upload buttn style * feat(web): upload --------- Co-authored-by: sheepluo --- docs/web/api/upload.md | 1 + js/upload/main.ts | 41 +++++++++++++------------ js/upload/types.ts | 18 ++++++++--- js/upload/utils.ts | 28 +---------------- js/upload/xhr.ts | 24 ++++++++++++--- style/web/components/upload/_index.less | 7 ++++- 6 files changed, 63 insertions(+), 56 deletions(-) diff --git a/docs/web/api/upload.md b/docs/web/api/upload.md index 1ec1ffe12a..74087a8d9f 100644 --- a/docs/web/api/upload.md +++ b/docs/web/api/upload.md @@ -60,6 +60,7 @@ spline: form - 上传组件中的全部文本，均可通过 `locale` 进行修改，也支持全局配置，查看文档。 - 如果拖拽上传单个文件，设置 `theme="file"` 和 `draggable=true`。 - 如果拖拽上传单张图片，设置 `theme="image"` 和 `draggable=true`。 +- 可以使用 `fileListDisplay` 自定义文件信息呈现内容。 {{ draggable }} diff --git a/js/upload/main.ts b/js/upload/main.ts index fba65a9171..46490f4d18 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -12,6 +12,7 @@ import { SuccessContext, handleSuccessParams, UploadTriggerUploadText, + ErrorContext, } from './types'; export interface BeforeUploadExtra { @@ -58,15 +59,12 @@ export function handleBeforeUpload( }); } -export interface OnErrorParams { - event?: ProgressEvent; - files?: UploadFile[]; - response?: any; +export interface OnErrorParams extends ErrorContext { formatResponse?: HandleUploadParams['formatResponse']; } export function handleError(options: OnErrorParams) { - const { event, files, response, formatResponse } = options; + const { event, files, response, XMLHttpRequest, formatResponse } = options; files.forEach((file) => { file.status = 'fail'; }); @@ -74,11 +72,11 @@ export function handleError(options: OnErrorParams) { if (typeof formatResponse === 'function') { res = formatResponse(response, { file: files[0], currentFiles: files }); } - return { response: res, event, files }; + return { response: res, event, files, XMLHttpRequest }; } export function handleSuccess(params: handleSuccessParams) { - const { event, files, response } = params; + const { event, files, response, XMLHttpRequest } = params; if (files?.length <= 0) { log.error('Upload', 'Empty File in Success Callback'); } @@ -89,7 +87,7 @@ export function handleSuccess(params: handleSuccessParams) { }); const res = response; files[0].url = res.url || files[0].url; - return { response: res, event, files }; + return { response: res, event, files, XMLHttpRequest }; } export type UploadRequestReturn = { @@ -173,7 +171,7 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { + onError: (p: ErrorContext) => { const r = handleError({ ...p, formatResponse: params.formatResponse }); params.onResponseError?.(r); resolve({ status: 'fail', data: r }); @@ -272,11 +270,12 @@ Promise { } export function formatToUploadFile( - tmpFiles: File[], + files: File[], format: FileChangeParams['format'], - autoUpload: boolean, + status, + percent = 0, ) { - return tmpFiles.map((fileRaw: File) => { + return files.map((fileRaw: File) => { let file: UploadFile = fileRaw; if (typeof format === 'function') { file = format(fileRaw); @@ -287,8 +286,8 @@ export function formatToUploadFile( name: fileRaw.name, size: fileRaw.size, type: fileRaw.type, - percent: 0, - status: autoUpload ? 'progress' : 'waiting', + percent, + status, ...file, }; return uploadFile; @@ -311,11 +310,10 @@ export function validateFile( hasSameNameFile = true; } if (!tmpFiles.length) { - const tFiles = formatToUploadFile(files, params.format, params.autoUpload); + const tFiles = formatToUploadFile(files, params.format, params.autoUpload ? 'progress' : 'waiting'); resolve({ hasSameNameFile, file: tFiles?.[0], files: tFiles, validateResult: { type: 'FILTER_FILE_SAME_NAME' } }); return; } - // 上传文件数量限制 let lengthOverLimit = false; if (max && tmpFiles.length && !params.isBatchUpload) { @@ -326,7 +324,7 @@ export function validateFile( } // 格式化文件对象 - const formattedFiles = formatToUploadFile(tmpFiles, params.format, params.autoUpload); + const formattedFiles = formatToUploadFile(tmpFiles, params.format, params.autoUpload ? 'progress' : 'waiting'); // 全量文件，一波校验，整体上传 或 终止上传 let allFileValidatePromise; @@ -351,6 +349,7 @@ export function validateFile( })); Promise.all([allFileValidatePromise].concat(promiseList)).then((results) => { const [allFilesResult, ...others] = results; + // 如果 beforeAllFilesUpload 校验未通过 if (allFilesResult === false) { resolve({ lengthOverLimit, @@ -372,9 +371,13 @@ export function validateFile( export function getFilesAndErrors(fileValidateList: FileChangeReturn[], getError: (p: {[key: string]: any }) => string) { const sizeLimitErrors: FileChangeReturn[] = []; + const beforeUploadErrorFiles: UploadFile[] = []; const toFiles: UploadFile[] = []; fileValidateList.forEach((oneFile) => { - if (oneFile.validateResult?.type === 'CUSTOM_BEFORE_UPLOAD') return; + if (oneFile.validateResult?.type === 'CUSTOM_BEFORE_UPLOAD') { + beforeUploadErrorFiles.push(oneFile.file); + return; + } if (oneFile.validateResult?.type === 'FILE_OVER_SIZE_LIMIT') { if (!oneFile.file.response) { oneFile.file.response = {}; @@ -387,7 +390,7 @@ export function getFilesAndErrors(fileValidateList: FileChangeReturn[], getError toFiles.push(oneFile.file); }); - return { sizeLimitErrors, toFiles }; + return { sizeLimitErrors, beforeUploadErrorFiles, toFiles }; } /** diff --git a/js/upload/types.ts b/js/upload/types.ts index 1857fc7d3a..e2b7256023 100644 --- a/js/upload/types.ts +++ b/js/upload/types.ts @@ -51,6 +51,9 @@ export interface UploadFile { export interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; + /** + * response.XMLHttpRequest is going to be deprecated + */ response: { url?: string; [key: string]: any } } @@ -74,10 +77,19 @@ export interface InnerProgressContext { XMLHttpRequest?: XMLHttpRequest; } +export interface ErrorContext { + event?: ProgressEvent; + file?: UploadFile; + files?: UploadFile[]; + response?: any; + XMLHttpRequest?: XMLHttpRequest; +} + export interface SuccessContext { event?: ProgressEvent; file?: UploadFile; files?: UploadFile[]; + XMLHttpRequest?: XMLHttpRequest; response?: RequestMethodResponse['response']; } @@ -108,11 +120,7 @@ export interface XhrOptions { name: string; /** 可与 data 共存 */ formatRequest?: (requestData: { [key: string]: any }) => { [key: string]: any }; - onError: ({ - event, file, files, response - }: { - event?: ProgressEvent; file?: UploadFile; files?: UploadFile[]; response?: any - }) => void; + onError: (context: ErrorContext) => void; onSuccess: (context: SuccessContext) => void; onProgress: (context: InnerProgressContext) => void; } diff --git a/js/upload/utils.ts b/js/upload/utils.ts index 7e295250d9..f5c5eb270a 100644 --- a/js/upload/utils.ts +++ b/js/upload/utils.ts @@ -1,4 +1,4 @@ -import { SizeUnit, TdUploadFile } from './types'; +import { SizeUnit } from './types'; import log from '../log/log'; /** @@ -146,32 +146,6 @@ export function isOverSizeLimit1( export const urlCreator = () => window.webkitURL || window.URL; -/** - * - * @param files 待处理文件 - * @param format 格式化规则 - */ -export function formatFiles( - files: File[] = [], - format?: (file: File) => TdUploadFile -) { - return files.map((fileRaw) => { - const file = typeof format === 'function' ? format(fileRaw) : fileRaw; - const uploadFile: TdUploadFile = { - raw: fileRaw, - lastModified: fileRaw.lastModified, - name: fileRaw.name, - size: fileRaw.size, - type: fileRaw.type, - percent: 0, - status: 'waiting', - ...file, - }; - uploadFile.url = urlCreator()?.createObjectURL(fileRaw); - return uploadFile; - }); -} - export function getFileUrlByFileRaw(fileRaw: File): Promise { return new Promise((resolve) => { if (!fileRaw) { diff --git a/js/upload/xhr.ts b/js/upload/xhr.ts index 33520c9a35..a580c30c58 100644 --- a/js/upload/xhr.ts +++ b/js/upload/xhr.ts @@ -58,14 +58,17 @@ export default function xhr({ let requestData: { [key: string]: any } = {}; if (data) { - const extraData = typeof data === 'function' ? data(file) : data; + const extraData = typeof data === 'function' ? data(innerFiles) : data; Object.assign(requestData, extraData); } innerFiles.forEach((file, index) => { const fileField = innerFiles.length > 1 ? `${name}[${index}]` : name; requestData[fileField] = file.raw; - requestData[name] = file.raw; }); + if (innerFiles.length === 1) { + requestData[name] = innerFiles[0].raw; + } + requestData.length = innerFiles.length; if (formatRequest) { requestData = formatRequest(requestData); @@ -84,11 +87,15 @@ export default function xhr({ }); xhr.onerror = (event: ProgressEvent) => { - onError({ event, file, files: innerFiles }); + onError({ event, file, files: innerFiles, XMLHttpRequest: xhr, }); clearInterval(timer1); clearTimeout(timer2); }; + xhr.ontimeout = (event) => { + onError({ event, file, files: innerFiles, XMLHttpRequest: xhr, }); + }; + if (xhr.upload) { xhr.upload.onprogress = (event: ProgressEvent) => { let realPercent = 0; @@ -117,7 +124,11 @@ export default function xhr({ const isFail = xhr.status < 200 || xhr.status >= 300; if (isFail) { return onError({ - event, file, files: innerFiles, response + event, + file, + files: innerFiles, + response, + XMLHttpRequest: xhr, }); } const text = xhr.responseText || xhr.response; @@ -142,11 +153,16 @@ export default function xhr({ event, file: file || innerFiles[0], files: [...innerFiles], + XMLHttpRequest: xhr, response, }); }; xhr.send(formData); + // @ts-ignore + xhr.upload.requestParams = requestData; + // @ts-ignore + xhr.upload.requestHeaders = headers; return xhr; } diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less index 35173a8970..dbe9e73604 100644 --- a/style/web/components/upload/_index.less +++ b/style/web/components/upload/_index.less @@ -502,7 +502,8 @@ } } -.@{prefix}-upload__dragger-progress-cancel { +.@{prefix}-upload__dragger-progress-cancel, +.@{prefix}-upload__dragger-progress-reupload { margin-right: @upload-dragger-progress-cancel-margin; &:hover { @@ -664,3 +665,7 @@ .@{prefix}-upload--theme-file-input { width: 100%; } + +.@{prefix}-upload__dragger-btns > .@{prefix}-button { + padding: 0; +} From 83f7f391f6c633668bdefb644d450626d0ecbdab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BE=99=E9=A3=8E?= <455947455@qq.com> Date: Sun, 29 Jan 2023 17:11:45 +0800 Subject: [PATCH 154/312] fix: fix dialog confirmBtnTheme default config (#1123) Co-authored-by: yaogengzhu <4555947455@qq.com> --- js/global-config/default-config.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/global-config/default-config.ts b/js/global-config/default-config.ts index 05961146ce..d7b098933b 100644 --- a/js/global-config/default-config.ts +++ b/js/global-config/default-config.ts @@ -20,18 +20,18 @@ export default { closeOnOverlayClick: true, confirmBtnTheme: { default: 'primary', - info: 'primary', - warning: 'primary', - danger: 'primary', - success: 'primary', + info: 'info', + warning: 'warning', + danger: 'danger', + success: 'success', }, }, message: {}, popconfirm: { confirmBtnTheme: { default: 'primary', - warning: 'primary', - danger: 'primary', + warning: 'warning', + danger: 'danger', }, }, table: { From cc9aa27ad01f65b9ec28d6ed1e481df9ce993c41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=95=E6=9F=8F=E7=84=B6?= <993967177@qq.com> Date: Sun, 29 Jan 2023 17:14:32 +0800 Subject: [PATCH 155/312] =?UTF-8?q?fix(table):=20=E8=99=9A=E6=8B=9F?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=20table=20=E6=8F=8F=E8=BF=B0=E6=96=87?= =?UTF-8?q?=E6=A1=88=E9=94=99=E8=AF=AF=20(#1127)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/web/api/table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/web/api/table.md b/docs/web/api/table.md index c1ee3b48db..f841dcae49 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -327,7 +327,7 @@ spline: data 虚拟滚动场景下，支持表格的几乎全部功能，如：固定列、固定表头、固定表尾、表头吸顶、表尾吸底等。实验场地请参看「多级表头的表格」示例。 -- 懒加载一般用于数据量较大的场景，设置 `scroll={ type: 'virtual' }` 即可开启懒加载模式，通过 `scroll.bufferSize` 预设加载过程中提前加载的数据数量。 +- 虚拟滚动一般用于超大数据渲染的场景，以提供更优的前端性能表现，设置 `scroll={ type: 'virtual' }` 即可开启虚拟滚动模式。 - 为保证组件收益最大化，当数据量小于 `threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`threshold` 默认为 `100`。 {{ virtual-scroll }} From 581401ad2f97caf74578a294c4a7e75ce1477949 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 30 Jan 2023 14:11:14 +0800 Subject: [PATCH 156/312] fix(web): upload status (#1128) * fix(web): upload status * fix(web): upload ts error --- js/upload/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/upload/main.ts b/js/upload/main.ts index 46490f4d18..916bbae55b 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -272,7 +272,7 @@ Promise { export function formatToUploadFile( files: File[], format: FileChangeParams['format'], - status, + status: UploadFile['status'] = undefined, percent = 0, ) { return files.map((fileRaw: File) => { From c71d0bde6ef345d480b87cfb96fb7791f4617e73 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 30 Jan 2023 15:18:39 +0800 Subject: [PATCH 157/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20dayjs=20?= =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E8=AE=BE=E7=BD=AE=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20(#1129)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/date-picker/format.ts | 24 +++++++++------ js/date-picker/utils.ts | 31 +++++++++++++------- js/global-config/locale/ar_KW.ts | 3 ++ js/global-config/locale/en_US.ts | 3 ++ js/global-config/locale/ja_JP.ts | 3 ++ js/global-config/locale/ko_KR.ts | 3 ++ js/global-config/locale/zh_CN.ts | 3 ++ style/web/components/date-picker/_index.less | 3 +- style/web/components/date-picker/_var.less | 2 +- 9 files changed, 53 insertions(+), 22 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 06560bb1ce..3a6ce3ff02 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -10,7 +10,8 @@ export const TIME_FORMAT = 'HH:mm:ss'; export function parseToDayjs( value: string | Date | number, format: string, - timeOfDay?: string + timeOfDay?: string, + dayjsLocale?: string, ) { if (value === '') return dayjs(); @@ -18,13 +19,13 @@ export function parseToDayjs( // format week if (/[w|W]/g.test(format)) { if (typeof dateText !== 'string') { - dateText = dayjs(dateText).format(format) as string; + dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string; } const yearStr = dateText.split(/[-/.\s]/)[0]; const weekStr = dateText.split(/[-/.\s]/)[1]; const weekFormatStr = format.split(/[-/.\s]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); + const firstWeek = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').startOf('year'); for (let i = 0; i <= 52; i += 1) { let nextWeek = firstWeek.add(i, 'week'); // 重置为周的第一天 @@ -38,7 +39,7 @@ export function parseToDayjs( // format quarter if (/Q/g.test(format)) { if (typeof dateText !== 'string') { - dateText = dayjs(dateText).format(format) as string; + dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string; } const yearStr = dateText.split(/[-/.\s]/)[0]; @@ -71,17 +72,19 @@ export function parseToDayjs( function formatRange({ newDate, format, + dayjsLocale, targetFormat, autoSwap, }: { newDate: any; format: string; + dayjsLocale?: string; targetFormat?: string; autoSwap?: boolean; }) { if (!newDate || !Array.isArray(newDate)) return []; - let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format)); + let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format).locale(dayjsLocale)); // 保证后面的时间大于前面的时间 if ( @@ -116,14 +119,16 @@ function formatSingle({ newDate, format, targetFormat, + dayjsLocale, }: { newDate: any; format: string; targetFormat?: string; + dayjsLocale?: string; }) { if (!newDate) return ''; - const dayJsDate = parseToDayjs(newDate, format); + const dayJsDate = parseToDayjs(newDate, format).locale(dayjsLocale); // 格式化失败提示 if (!dayJsDate.isValid()) { @@ -161,15 +166,16 @@ export function formatDate( { format, targetFormat, + dayjsLocale = 'zh-cn', autoSwap, - }: { format: string; targetFormat?: string; autoSwap?: boolean } + }: { format: string; dayjsLocale?: string, targetFormat?: string; autoSwap?: boolean } ) { let result; if (Array.isArray(newDate)) { - result = formatRange({ newDate, format, targetFormat, autoSwap }); + result = formatRange({ newDate, format, dayjsLocale, targetFormat, autoSwap }); } else { - result = formatSingle({ newDate, format, targetFormat }); + result = formatSingle({ newDate, format, dayjsLocale, targetFormat }); } return result; diff --git a/js/date-picker/utils.ts b/js/date-picker/utils.ts index a7ddad007c..c7d1287022 100644 --- a/js/date-picker/utils.ts +++ b/js/date-picker/utils.ts @@ -1,18 +1,16 @@ import dayjs from 'dayjs'; import dayJsIsBetween from 'dayjs/plugin/isBetween'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; import weekYear from 'dayjs/plugin/weekYear'; import localeData from 'dayjs/plugin/localeData'; -import weekOfYear from 'dayjs/plugin/weekOfYear'; import quarterOfYear from 'dayjs/plugin/quarterOfYear'; -import isoWeek from 'dayjs/plugin/isoWeek'; import advancedFormat from 'dayjs/plugin/advancedFormat'; import customParseFormat from 'dayjs/plugin/customParseFormat'; import chunk from 'lodash/chunk'; -dayjs.extend(isoWeek); +dayjs.extend(weekOfYear); dayjs.extend(weekYear); dayjs.extend(localeData); -dayjs.extend(weekOfYear); dayjs.extend(quarterOfYear); dayjs.extend(advancedFormat); dayjs.extend(customParseFormat); @@ -72,8 +70,8 @@ function isSameMonth(date1: Date, date2: Date): boolean { return isSameYear(date1, date2) && date1.getMonth() === date2.getMonth(); } -function isSameWeek(date1: Date, date2: Date): boolean { - return isSameMonth(date1, date2) && dayjs(date1).week() === dayjs(date2).week(); +function isSameWeek(date1: Date, date2: Date, dayjsLocale = 'zh-cn'): boolean { + return isSameMonth(date1, date2) && dayjs(date1).locale(dayjsLocale).week() === dayjs(date2).locale(dayjsLocale).week(); } function isSameDate(date1: Date, date2: Date): boolean { @@ -102,7 +100,7 @@ function compareAsc(date1: { getTime: () => any }, date2: Date): number { * @param {String} type 比较类型，默认比较到『日』 date|month|year * @returns {Boolean} */ -export function isSame(date1: Date, date2: Date, type = 'date'): boolean { +export function isSame(date1: Date, date2: Date, type = 'date', dayjsLocale = 'zh-cn'): boolean { const func = { isSameYear, isSameQuarter, @@ -110,7 +108,7 @@ export function isSame(date1: Date, date2: Date, type = 'date'): boolean { isSameWeek, isSameDate, }; - return func[`isSame${firstUpperCase(type)}`](date1, date2); + return func[`isSame${firstUpperCase(type)}`](date1, date2, dayjsLocale); } export function outOfRanges(d: Date, min: any, max: any) { @@ -201,6 +199,7 @@ export interface OptionsType { minDate: Date; maxDate: Date; showWeekOfYear?: Boolean; + dayjsLocale?: string; monthLocal?: string[]; quarterLocal?: string[]; } @@ -213,6 +212,7 @@ export function getWeeks( disableDate = () => false, minDate, maxDate, + dayjsLocale = 'zh-cn', }: OptionsType, ) { const prependDay = getFirstDayOfMonth({ year, month }); @@ -233,6 +233,7 @@ export function getWeeks( firstDayOfMonth: i === 1, lastDayOfMonth: i === maxDays, type: 'current-month', + dayjsObj: dayjs(currentDay).locale(dayjsLocale), }); } @@ -246,6 +247,7 @@ export function getWeeks( disabled: (typeof disableDate === 'function' && disableDate(prependDay)) || outOfRanges(prependDay, minDate, maxDate), additional: true, // 非当前月 type: 'prev-month', + dayjsObj: dayjs(prependDay).locale(dayjsLocale), }); prependDay.setDate(prependDay.getDate() - 1); if (prependDay.getDay() === Math.abs(firstDayOfWeek + 6) % 7) break; @@ -262,6 +264,7 @@ export function getWeeks( disabled: (typeof disableDate === 'function' && disableDate(appendDay)) || outOfRanges(appendDay, minDate, maxDate), additional: true, // 非当前月 type: 'next-month', + dayjsObj: dayjs(appendDay).locale(dayjsLocale), }); } @@ -273,7 +276,8 @@ export function getWeeks( ...d[0], active: false, value: d[0].value, - text: dayjs(d[0].value).week(), + text: dayjs(d[0].value).locale(dayjsLocale).week(), + dayjsObj: dayjs(d[0].value).locale(dayjsLocale), }); }); } @@ -287,7 +291,8 @@ export function getQuarters( disableDate = () => false, minDate, maxDate, - quarterLocal + quarterLocal, + dayjsLocale = 'zh-cn', }: OptionsType, ) { const quarterArr = []; @@ -302,6 +307,7 @@ export function getQuarters( disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: quarterLocal[i - 1], + dayjsObj: dayjs(date).locale(dayjsLocale), }); } @@ -314,6 +320,7 @@ export function getYears( disableDate = () => false, minDate, maxDate, + dayjsLocale = 'zh-cn', }: OptionsType, ) { const startYear = parseInt((year / 10).toString(), 10) * 10; @@ -332,6 +339,7 @@ export function getYears( disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: `${date.getFullYear()}`, + dayjsObj: dayjs(date).locale(dayjsLocale), }); } @@ -340,7 +348,7 @@ export function getYears( export function getMonths(year: number, params: OptionsType) { const { - disableDate = () => false, minDate, maxDate, monthLocal, + disableDate = () => false, minDate, maxDate, monthLocal, dayjsLocale = 'zh-cn', } = params; const MonthArr = []; const today = getToday(); @@ -354,6 +362,7 @@ export function getMonths(year: number, params: OptionsType) { disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: monthLocal[date.getMonth()], // `${date.getMonth() + 1} ${monthText || '月'}`, + dayjsObj: dayjs(date).locale(dayjsLocale), }); } diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts index f23ce13333..d655b589fb 100644 --- a/js/global-config/locale/ar_KW.ts +++ b/js/global-config/locale/ar_KW.ts @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/ar'; export default { pagination: { itemsPerPage: "{size} / الصفحة", @@ -31,6 +32,7 @@ export default { placeholder: "أدخل الكلمة للبحث", }, timePicker: { + dayjsLocale: 'ar', now: "الآن", confirm: "نعم", anteMeridiem: "صباحا", @@ -85,6 +87,7 @@ export default { }, datePicker: { + dayjsLocale: 'ar', placeholder: { date: "حدد تاريخ", month: "اختر الشهر", diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index e4434cca7c..3596017b0e 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/en'; export default { pagination: { itemsPerPage: "{size} / page", @@ -31,6 +32,7 @@ export default { placeholder: "enter keyworkd to search", }, timePicker: { + dayjsLocale: 'en', now: "Now", confirm: "Confirm", anteMeridiem: "AM", @@ -86,6 +88,7 @@ export default { placeholder: "please select", }, datePicker: { + dayjsLocale: 'en', placeholder: { date: "select date", month: "select month", diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index cea52c8db6..9a7c4b2452 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/ja'; export default { pagination: { itemsPerPage: "{size} /ページ", @@ -30,6 +31,7 @@ export default { placeholder: "検索するキーワードを入力してください", }, timePicker: { + dayjsLocale: 'ja', now: "このとき", confirm: "決定事項", anteMeridiem: "モーニング", @@ -84,6 +86,7 @@ export default { placeholder: "選択してください", }, datePicker: { + dayjsLocale: 'ja', placeholder: { date: "日付を選択してください", month: "月を選択してください", diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index a07dd646b6..eba793a62f 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/ko'; export default { pagination: { itemsPerPage: "{size} /페이지", @@ -30,6 +31,7 @@ export default { placeholder: "검색할 키워드를 입력하세요", }, timePicker: { + dayjsLocale: 'ko', now: "지금", confirm: "확신하는", anteMeridiem: "아침", @@ -84,6 +86,7 @@ export default { placeholder: "선택해주세요", }, datePicker: { + dayjsLocale: 'ko', placeholder: { date: "날짜를 선택하세요Z", month: "월을 선택하세요", diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index b4896ccd79..59178c6377 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/zh-cn'; export default { pagination: { itemsPerPage: "{size} 条/页", @@ -30,6 +31,7 @@ export default { placeholder: "请输入关键词搜索", }, timePicker: { + dayjsLocale: 'zh-cn', now: "此刻", confirm: "确定", anteMeridiem: "上午", @@ -84,6 +86,7 @@ export default { placeholder: "请选择", }, datePicker: { + dayjsLocale: 'zh-cn', placeholder: { date: "请选择日期", month: "请选择月份", diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less index 871156e0a0..e40a513e65 100644 --- a/style/web/components/date-picker/_index.less +++ b/style/web/components/date-picker/_index.less @@ -291,7 +291,8 @@ .@{prefix}-date-picker__cell--active { &::after { opacity: 1; - left: 0; + left: @datepicker-cell-month-year-left; + z-index: 5; } } diff --git a/style/web/components/date-picker/_var.less b/style/web/components/date-picker/_var.less index 2287ff9ade..aade6ce8c4 100644 --- a/style/web/components/date-picker/_var.less +++ b/style/web/components/date-picker/_var.less @@ -35,7 +35,7 @@ @datepicker-cell-min-width: @comp-size-xs; @datepicker-cell-height: @comp-size-xs; @datepicker-cell-min-width-l: @comp-size-xxl; -@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xs)); +@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xxl)); @datepicker-cell-inner-margin: calc(@comp-margin-xs - 1px); @datepicker-th-font-weight: 400; From f06c03d2ac63af13c8dbe5b07708650a0cadc6ab Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 30 Jan 2023 15:19:38 +0800 Subject: [PATCH 158/312] fix tree typescript type error (#1130) * fix(web): upload status * fix(web): upload ts error * feat(web): update tree type --- js/common.ts | 18 +++++++++++++----- js/tree/types.ts | 4 ++-- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/js/common.ts b/js/common.ts index 51c5580355..78c4e9778d 100644 --- a/js/common.ts +++ b/js/common.ts @@ -1,11 +1,19 @@ +export type PlainObject = { [key: string]: any }; + export type OptionData = { label?: string; value?: string | number; -} & { [key: string]: any }; - -export type TreeOptionData = { - children?: Array; -} & OptionData; +} & PlainObject; + +export type TreeOptionData = { + children?: Array>; + /** option label content */ + label?: any; + /** option search text */ + text?: string; + /** option value */ + value?: T; +} & PlainObject; export type SizeEnum = 'small' | 'medium' | 'large'; diff --git a/js/tree/types.ts b/js/tree/types.ts index a17c927bc7..655bf96489 100644 --- a/js/tree/types.ts +++ b/js/tree/types.ts @@ -86,7 +86,7 @@ export interface TreeNodeModelProps Date: Mon, 30 Jan 2023 16:03:31 +0800 Subject: [PATCH 159/312] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=AD=97?= =?UTF-8?q?=E6=AE=B5=20(#1131)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/global-config/locale/ar_KW.ts | 2 +- js/global-config/locale/en_US.ts | 2 +- js/global-config/locale/ja_JP.ts | 2 +- js/global-config/locale/ko_KR.ts | 2 +- js/global-config/locale/zh_CN.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts index d655b589fb..5caa23fbcf 100644 --- a/js/global-config/locale/ar_KW.ts +++ b/js/global-config/locale/ar_KW.ts @@ -218,6 +218,6 @@ export default { errorText: "غير قادر على التحميل", mirrorTipText: "مرآة", rotateTipText: "استدارة", - originsizeTipText: "أصلي", + originalSizeTipText: "أصلي", }, } as const; diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index 3596017b0e..0b2b638af5 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -221,7 +221,7 @@ export default { errorText: "unable to load", mirrorTipText: "mirror", rotateTipText: "rotate", - originsizeTipText: "original", + originalSizeTipText: "original", }, }, } as const; diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 9a7c4b2452..19ef336541 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -221,6 +221,6 @@ export default { errorText: "画像の読み込みに失敗しました。再読み込みしてみてください", mirrorTipText: "鏡像", rotateTipText: "回転する", - originsizeTipText: "オリジナルサイズ", + originalSizeTipText: "オリジナルサイズ", }, } as const; diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index eba793a62f..2fb14ddbba 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -221,6 +221,6 @@ export default { errorText: "이미지를 로드하지 못했습니다. 새로고침해 보세요.", mirrorTipText: "미러 이미지", rotateTipText: "회전하다", - originsizeTipText: "원본 크기", + originalSizeTipText: "원본 크기", }, } as const; diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index 59178c6377..152fbad58c 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -221,6 +221,6 @@ export default { errorText: "图片加载失败，可尝试重新加载", mirrorTipText: "镜像", rotateTipText: "旋转", - originsizeTipText: "原始大小", + originalSizeTipText: "原始大小", }, } as const; From a4c580ce32cade7055a8a557db00af5aff396788 Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 30 Jan 2023 16:25:47 +0800 Subject: [PATCH 160/312] fix(tree): disabled option text color (#1132) --- style/web/components/tree/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/tree/_var.less b/style/web/components/tree/_var.less index 1a1fb0dc5f..36a868857a 100644 --- a/style/web/components/tree/_var.less +++ b/style/web/components/tree/_var.less @@ -20,7 +20,7 @@ @tree-node-bg-active-color: @brand-color-light; @tree-node-icon-color: @text-color-secondary; @tree-node-icon-line-color: @border-level-1-color; -@tree-disabled-color: @border-level-2-color; +@tree-disabled-color: @text-color-disabled; @tree-icon-disabled-color: @tree-node-icon-color; //字体 From 88ed6b9e831b0c36f84ad707d6281aba2bca1790 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 2 Feb 2023 15:18:15 +0800 Subject: [PATCH 161/312] fix(loading): fix loading render in safari (#1138) --- js/loading/circle-adapter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/loading/circle-adapter.ts b/js/loading/circle-adapter.ts index 1649e4be51..5771209614 100644 --- a/js/loading/circle-adapter.ts +++ b/js/loading/circle-adapter.ts @@ -20,8 +20,8 @@ export default function circleAdapter(circleElem: HTMLElement) { // 注意：chrome上调试mobile/ipad端时，loading出现异常，属于正常现象，不需要修改。 if (isSafari || isIosWechat) { basicStyle = { - transformOrigin: '-1px -1px', - transform: `scale(${parseInt(fontSize, 10) / 14})`, + transformOrigin: '0px 0px', + transform: `scale(${parseInt(fontSize, 10) / 12})`, }; } // 添加：判断是否为IE浏览器 From a5490fa01b47514f337531f89928b45ca1aa100b Mon Sep 17 00:00:00 2001 From: WenKang Date: Thu, 2 Feb 2023 16:50:33 +0800 Subject: [PATCH 162/312] fix: steps style bug (#1139) --- style/web/components/steps/_index.less | 5 ++++- style/web/components/steps/_var.less | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/style/web/components/steps/_index.less b/style/web/components/steps/_index.less index fb3fd1c681..2c23303666 100644 --- a/style/web/components/steps/_index.less +++ b/style/web/components/steps/_index.less @@ -116,7 +116,6 @@ &.@{prefix}-steps--default-anchor { .@{prefix}-steps-item__content { - margin-top: @steps-item-content-margin-top-vertical; margin-left: @steps-item-content-margin-left-vertical; } @@ -136,6 +135,10 @@ .@{prefix}-steps-item { margin-bottom: 0; + .@{prefix}-steps-item__title { + margin-bottom: @steps-item-title-margin-bottom; + } + &--finish { .dot-anchor-status(finish); } diff --git a/style/web/components/steps/_var.less b/style/web/components/steps/_var.less index 1e40848301..e2e9c64e75 100644 --- a/style/web/components/steps/_var.less +++ b/style/web/components/steps/_var.less @@ -34,7 +34,7 @@ @steps-dot-item-icon-height: 8px; @steps-dot-item-icon-width: 8px; @steps-item-icon-number-line-left: 11px; -@steps-dot-anchor-position-top: 5px; +@steps-dot-anchor-position-top: 8px; @steps-dot-content-width: 140px; @steps-dot-connector-position-top-horizontal: 2.5px; @steps-dot-connector-position-left-horizontal: calc(@steps-dot-content-width / 2 + @spacer); From ac46c2e085a0df47167b311949fedbb6c0dd044c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 3 Feb 2023 14:36:27 +0800 Subject: [PATCH 163/312] chore(deps-dev): bump lint-staged from 13.0.4 to 13.1.0 (#1136) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.0.4 to 13.1.0. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v13.0.4...v13.1.0) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d7d15abb5a..5fee817951 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "jest": "^27.5.1", "jest-html-reporter": "^3.1.3", "jest-watch-typeahead": "^2.2.0", - "lint-staged": "~13.0.3", + "lint-staged": "~13.1.0", "min-indent": "^1.0.1", "postcss-less": "^5.0.0", "stylelint": "~14.16.1", From 4f66e7e7cac0b8ddc3db9468d71705421a5a78c6 Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 6 Feb 2023 14:46:35 +0800 Subject: [PATCH 164/312] fix: client error (#1140) --- js/utils/helper.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/utils/helper.ts b/js/utils/helper.ts index 895c6f7236..7deab1c736 100644 --- a/js/utils/helper.ts +++ b/js/utils/helper.ts @@ -66,6 +66,8 @@ export function getBackgroundColor(color: string | string[] | LinearGradient): s * @returns 获取 ie 浏览器版本 */ export function getIEVersion() { + if (!navigator) return Number.MAX_SAFE_INTEGER; + const { userAgent } = navigator; // 判断是否IE<11浏览器 const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; From 7ee04aaaa912be5e816de5fd1030c3f289a9a7a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BE=99=E9=A3=8E?= <455947455@qq.com> Date: Wed, 8 Feb 2023 14:24:30 +0800 Subject: [PATCH 165/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=A6=86=E7=9B=96=E9=97=AE=E9=A2=98=20(#1141)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: yaogengzhu <4555947455@qq.com> --- style/web/components/avatar/_mixin.less | 5 ----- 1 file changed, 5 deletions(-) diff --git a/style/web/components/avatar/_mixin.less b/style/web/components/avatar/_mixin.less index 295a60d445..bce94805b2 100644 --- a/style/web/components/avatar/_mixin.less +++ b/style/web/components/avatar/_mixin.less @@ -9,11 +9,6 @@ &.@{prefix}-avatar__icon { font-size: @avatar-icon-size; } - - & img { - height: @size; - width: @size; - } } .avatar-group-offset-right(@offset) { From d2a2c8a4392bceaa49c017185940e47d2f96ad69 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 8 Feb 2023 20:43:39 +0800 Subject: [PATCH 166/312] feat(dropdown): optimize multiple menu overflow render (#1142) --- style/web/components/dropdown/_index.less | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less index 4f9d152ff1..8220a254d5 100644 --- a/style/web/components/dropdown/_index.less +++ b/style/web/components/dropdown/_index.less @@ -60,11 +60,11 @@ &--overflow { // 处理菜单超过最大高度时无法选择二级菜单的问题 .@{prefix}-dropdown__submenu { - &--right { + &-wrapper--right { left: calc(100% - 14px); } - &--left { + &-wrapper--left { right: calc(100% - 14px); } } @@ -72,6 +72,8 @@ } &__submenu { + .scrollbar(8px, 2px); + background-color: @dropdown-bg-color; box-shadow: @shadow-2; border-radius: @border-radius-medium; @@ -80,6 +82,8 @@ position: absolute; padding: @dropdown-menu-padding; display: none; + overflow-y: auto; + overflow-x: visible; ul { list-style: none; @@ -92,7 +96,7 @@ visibility: hidden; } - &--right { + &-wrapper--right { left: calc(100% - 6px); .@{prefix}-dropdown__item-direction { @@ -100,7 +104,7 @@ } } - &--left { + &-wrapper--left { right: calc(100% - 6px); .@{prefix}-dropdown__item { @@ -136,7 +140,7 @@ font-size: @dropdown-text-icon-size; } - &:hover > div { + &:hover > div > div { display: flex; } From 6e053da36ceb7cb48c75edc0022eb4e2a62641a2 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 13 Feb 2023 14:30:37 +0800 Subject: [PATCH 167/312] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=96=87?= =?UTF-8?q?=E6=A1=A3=20(#1145)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/web/api/loading.md | 10 +++++++--- style/web/components/message/_mixin.less | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/web/api/loading.md b/docs/web/api/loading.md index b496a869ff..67406dc4f7 100644 --- a/docs/web/api/loading.md +++ b/docs/web/api/loading.md @@ -44,9 +44,13 @@ Loading 组件可以作为容器包裹需要显示加载状态的内容。 {{ fullscreen }} -### 指令方式调用 -支持 `v-loading` 指令调用 `Loading`，只需要绑定 `boolean` 值即可，支持 `fullscreen` 和 `inheritColor` 修饰符，分别对应其属性。 -{{ directive }} +### 挂载到指定元素 + +可通过 `attach` 挂载到指定元素。 + +注：被挂载元素（loading的父元素）需设置：`position: relative;` + +{{ attach }} ### 函数方式调用 diff --git a/style/web/components/message/_mixin.less b/style/web/components/message/_mixin.less index 1c457de6a1..ea5371fdc7 100644 --- a/style/web/components/message/_mixin.less +++ b/style/web/components/message/_mixin.less @@ -1,7 +1,7 @@ .message() { width: fit-content; outline: 0; - border-radius: @border-radius-medium; + border-radius: @msg-border-radius; background-color: @msg-color-block; box-shadow: @msg-shadow; box-sizing: border-box; From ebfb57388f9b346a7244cbeb24a4302af7184772 Mon Sep 17 00:00:00 2001 From: zhangpaopao Date: Mon, 13 Feb 2023 14:30:53 +0800 Subject: [PATCH 168/312] feat: remove important (#1143) --- style/web/components/guide/_index.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style/web/components/guide/_index.less b/style/web/components/guide/_index.less index 562209328b..d3893f2788 100644 --- a/style/web/components/guide/_index.less +++ b/style/web/components/guide/_index.less @@ -159,10 +159,10 @@ } &__popup { - &--content { - background: none !important; - box-shadow: none !important; - padding: 0 !important; + & &--content { + background: none; + box-shadow: none; + padding: 0; } } } From bc9bbfdc2672961fe23e4f8b07ea4eb116a9269f Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 14 Feb 2023 17:11:28 +0800 Subject: [PATCH 169/312] feat(Select): add scroll event demo (#1146) --- docs/web/api/select.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/web/api/select.md b/docs/web/api/select.md index 1ed49a1666..c2839ccb6b 100644 --- a/docs/web/api/select.md +++ b/docs/web/api/select.md @@ -2,7 +2,7 @@ title: Select 选择器 description: 用于收纳大量选项的信息录入类组件。 isComponent: true -usage: { title: '', description: '' } +usage: { title: "", description: "" } spline: form --- @@ -106,7 +106,7 @@ spline: form {{ label-in-value }} -### 自定义下拉框宽度选择器 +### 自定义下拉框宽度的选择器 自定义下拉样式的选择器，在需要自定义下拉样式时使用。 @@ -114,9 +114,15 @@ spline: form {{ popup-props }} +### 通过滚动事件加载选项的选择器 + +业务中常常有选项通过滚动触底持续加载的需求，通过`popup.onScroll`或`popup.onScrollToBottom`，可以快速实现滚动加载选项的能力。 + +{{ scroll-bottom }} + ### 开启虚拟滚动的选择器 - 虚拟滚动一般用于数据量较大的场景，设置 `scroll={ type: 'virtual' }` 即可开启虚拟滚动模式，通过 `scroll.bufferSize` 预设加载过程中提前加载的数据数量。 - 为保证组件收益最大化，当数据量小于 `threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`threshold` 默认为 `100`。 -{{ virtual-scroll }} \ No newline at end of file +{{ virtual-scroll }} From 72e50cf59596a24fc73fe016ed805bba31a9d695 Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Sat, 18 Feb 2023 00:01:02 +0800 Subject: [PATCH 170/312] chore: refactor & fix typo (#1147) * chore: refactor & fix typo * chore: update * chore: update * chore: fix lint & run lint:fix --- .gitignore | 4 + js/color-picker/gradient.ts | 8 +- js/date-picker/format.ts | 5 +- js/date-picker/utils.ts | 15 +- js/global-config/locale/ar_KW.ts | 287 ++++++++++++++--------------- js/global-config/locale/en_US.ts | 289 ++++++++++++++--------------- js/global-config/locale/ja_JP.ts | 293 +++++++++++++++--------------- js/global-config/locale/ko_KR.ts | 291 ++++++++++++++--------------- js/global-config/locale/zh_CN.ts | 293 +++++++++++++++--------------- js/input-number/large-number.ts | 6 +- js/input-number/number.ts | 14 +- js/table/tree-store.ts | 7 +- js/tree/tree-node-model.ts | 8 +- js/tree/tree-node.ts | 17 +- js/tree/tree-store.ts | 20 +- js/upload/main.ts | 12 +- js/upload/xhr.ts | 3 +- js/utils/calcTextareaHeight.ts | 5 +- js/utils/helper.ts | 16 +- js/watermark/generateBase64Url.ts | 2 +- package.json | 6 +- 21 files changed, 819 insertions(+), 782 deletions(-) diff --git a/.gitignore b/.gitignore index 0024b6a2eb..f09bacd343 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,7 @@ temp* # test coverage test-report.html + +# lint +.eslintcache +.stylelintcache diff --git a/js/color-picker/gradient.ts b/js/color-picker/gradient.ts index ce6de8009d..cf9d0b40d1 100644 --- a/js/color-picker/gradient.ts +++ b/js/color-picker/gradient.ts @@ -1,3 +1,5 @@ +import isString from 'lodash/isString'; +import isNull from 'lodash/isNull'; /* eslint-disable no-param-reassign */ /** * 用于反解析渐变字符串为对象 @@ -14,7 +16,7 @@ import tinyColor from 'tinycolor2'; const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => { let source = ''; for (let i = 0; i < regexpList.length; i++) { - if (typeof regexpList[i] === 'string') { + if (isString(regexpList[i])) { source += regexpList[i]; } else { source += (regexpList[i] as RegExp).source; @@ -107,7 +109,7 @@ const parseGradient = (regExpLib: RegExpLib, input: string) => { regExpLib.gradientSearch.lastIndex = 0; const matchGradient = regExpLib.gradientSearch.exec(input); - if (matchGradient !== null) { + if (!isNull(matchGradient)) { result = { original: matchGradient[0], colorStopList: [], @@ -134,7 +136,7 @@ const parseGradient = (regExpLib: RegExpLib, input: string) => { // Loop though all the color-stops. matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]); - while (matchColorStop !== null) { + while (!isNull(matchColorStop)) { stopResult = { color: matchColorStop[1], }; diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 3a6ce3ff02..e52d1564cc 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -1,3 +1,4 @@ +import isString from 'lodash/isString'; import dayjs from 'dayjs'; import { extractTimeFormat } from './utils'; import log from '../log'; @@ -18,7 +19,7 @@ export function parseToDayjs( let dateText = value; // format week if (/[w|W]/g.test(format)) { - if (typeof dateText !== 'string') { + if (!isString(dateText)) { dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string; } @@ -38,7 +39,7 @@ export function parseToDayjs( // format quarter if (/Q/g.test(format)) { - if (typeof dateText !== 'string') { + if (!isString(dateText)) { dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string; } diff --git a/js/date-picker/utils.ts b/js/date-picker/utils.ts index c7d1287022..dc02df92fb 100644 --- a/js/date-picker/utils.ts +++ b/js/date-picker/utils.ts @@ -1,3 +1,4 @@ +import isFunction from 'lodash/isFunction'; import dayjs from 'dayjs'; import dayJsIsBetween from 'dayjs/plugin/isBetween'; import weekOfYear from 'dayjs/plugin/weekOfYear'; @@ -227,7 +228,7 @@ export function getWeeks( text: i, active: false, value: currentDay, - disabled: (typeof disableDate === 'function' && disableDate(currentDay)) + disabled: (isFunction(disableDate) && disableDate(currentDay)) || outOfRanges(currentDay, minDate, maxDate), now: isSame(today, currentDay), firstDayOfMonth: i === 1, @@ -244,7 +245,7 @@ export function getWeeks( text: prependDay.getDate().toString(), active: false, value: new Date(prependDay), - disabled: (typeof disableDate === 'function' && disableDate(prependDay)) || outOfRanges(prependDay, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(prependDay)) || outOfRanges(prependDay, minDate, maxDate), additional: true, // 非当前月 type: 'prev-month', dayjsObj: dayjs(prependDay).locale(dayjsLocale), @@ -261,7 +262,7 @@ export function getWeeks( text: appendDay.getDate(), active: false, value: new Date(appendDay), - disabled: (typeof disableDate === 'function' && disableDate(appendDay)) || outOfRanges(appendDay, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(appendDay)) || outOfRanges(appendDay, minDate, maxDate), additional: true, // 非当前月 type: 'next-month', dayjsObj: dayjs(appendDay).locale(dayjsLocale), @@ -304,7 +305,7 @@ export function getQuarters( quarterArr.push({ value: date, now: isSame(date, today, 'quarter'), - disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: quarterLocal[i - 1], dayjsObj: dayjs(date).locale(dayjsLocale), @@ -336,7 +337,7 @@ export function getYears( yearArr.push({ value: date, now: isSame(date, today, 'year'), - disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: `${date.getFullYear()}`, dayjsObj: dayjs(date).locale(dayjsLocale), @@ -359,7 +360,7 @@ export function getMonths(year: number, params: OptionsType) { MonthArr.push({ value: date, now: isSame(date, today, 'month'), - disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: monthLocal[date.getMonth()], // `${date.getMonth() + 1} ${monthText || '月'}`, dayjsObj: dayjs(date).locale(dayjsLocale), @@ -469,7 +470,7 @@ export function isEnabledDate({ let isEnabled = true; // 值类型为 Function 则表示返回值为 true 的日期会被禁用 - if (typeof disableDate === 'function') { + if (isFunction(disableDate)) { return !disableDate(value); } diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts index 5caa23fbcf..bb71acb3d2 100644 --- a/js/global-config/locale/ar_KW.ts +++ b/js/global-config/locale/ar_KW.ts @@ -1,223 +1,224 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 import 'dayjs/locale/ar'; + export default { pagination: { - itemsPerPage: "{size} / الصفحة", - jumpTo: "القفز إلى", - page: "", - total: "{total} عناصر", + itemsPerPage: '{size} / الصفحة', + jumpTo: 'القفز إلى', + page: '', + total: '{total} عناصر', }, cascader: { - empty: "لا تتوافر بيانات", - loadingText: "جار التحميل…", - placeholder: "الرجاء التحديد", + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', }, calendar: { - yearSelection: "{year}", - monthSelection: "{month}", - yearRadio: "عام", - monthRadio: "شهر", - hideWeekend: "إخفاء عطلة نهاية الأسبوع", - showWeekend: "عرض عطلة نهاية الأسبوع", - today: "اليوم", - thisMonth: "هذا الشهر", - week: "الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد", + yearSelection: '{year}', + monthSelection: '{month}', + yearRadio: 'عام', + monthRadio: 'شهر', + hideWeekend: 'إخفاء عطلة نهاية الأسبوع', + showWeekend: 'عرض عطلة نهاية الأسبوع', + today: 'اليوم', + thisMonth: 'هذا الشهر', + week: 'الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد', cellMonth: - "يناير ، فبراير ، مارس ، أبريل ، مايو ، يونيو ، يوليو ، أغسطس ، سبتمبر ، أكتوبر ، نوفمبر ، ديسمبر", + 'يناير ، فبراير ، مارس ، أبريل ، مايو ، يونيو ، يوليو ، أغسطس ، سبتمبر ، أكتوبر ، نوفمبر ، ديسمبر', }, transfer: { - title: "{checked} / {total}", - empty: "لا تتوافر بيانات", - placeholder: "أدخل الكلمة للبحث", + title: '{checked} / {total}', + empty: 'لا تتوافر بيانات', + placeholder: 'أدخل الكلمة للبحث', }, timePicker: { dayjsLocale: 'ar', - now: "الآن", - confirm: "نعم", - anteMeridiem: "صباحا", - postMeridiem: "مساءً", - placeholder: "الرجاء التحديد", + now: 'الآن', + confirm: 'نعم', + anteMeridiem: 'صباحا', + postMeridiem: 'مساءً', + placeholder: 'الرجاء التحديد', }, dialog: { - confirm: "نعم", - cancel: "يلغي", + confirm: 'نعم', + cancel: 'يلغي', }, drawer: { - confirm: "نعم", - cancel: "يلغي", + confirm: 'نعم', + cancel: 'يلغي', }, popconfirm: { - confirm: { content: "نعم" }, - cancel: { content: "يلغي" }, + confirm: { content: 'نعم' }, + cancel: { content: 'يلغي' }, }, table: { - empty: "لا تتوافر بيانات", - loadingText: "جار التحميل…", - loadingMoreText: "انقر لتحميل المزيد", + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + loadingMoreText: 'انقر لتحميل المزيد', filterInputPlaceholder: - "الرجاء إدخال المحتوى (لا توجد قيمة افتراضية متاحة)", - sortAscendingOperationText: "انقر للفرز تصاعديًا", - sortCancelOperationText: "انقر لإلغاء الفرز", - sortDescendingOperationText: "انقر للفرز تنازليًا", - clearFilterResultButtonText: "صافي", - columnConfigButtonText: "تكوين العمود", - columnConfigTitleText: "تكوين عمود الجدول", + 'الرجاء إدخال المحتوى (لا توجد قيمة افتراضية متاحة)', + sortAscendingOperationText: 'انقر للفرز تصاعديًا', + sortCancelOperationText: 'انقر لإلغاء الفرز', + sortDescendingOperationText: 'انقر للفرز تنازليًا', + clearFilterResultButtonText: 'صافي', + columnConfigButtonText: 'تكوين العمود', + columnConfigTitleText: 'تكوين عمود الجدول', columnConfigDescriptionText: - "الرجاء تحديد أعمدة البيانات المراد عرضها في الجدول", - confirmText: "نعم", - cancelText: "يلغي", - resetText: "إعادة ضبط", - selectAllText: "اختر الكل", + 'الرجاء تحديد أعمدة البيانات المراد عرضها في الجدول', + confirmText: 'نعم', + cancelText: 'يلغي', + resetText: 'إعادة ضبط', + selectAllText: 'اختر الكل', searchResultText: "تم العثور على بحث '{result}' و{count} من العناصر.", }, select: { - empty: "لا تتوافر بيانات", - loadingText: "جار التحميل…", - placeholder: "الرجاء التحديد", + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', }, - tree: { empty: "لا تتوافر بيانات" }, + tree: { empty: 'لا تتوافر بيانات' }, treeSelect: { - empty: "لا تتوافر بيانات", - loadingText: "جار التحميل…", - placeholder: "الرجاء التحديد", + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', }, datePicker: { dayjsLocale: 'ar', placeholder: { - date: "حدد تاريخ", - month: "اختر الشهر", - year: "اختر السنة", + date: 'حدد تاريخ', + month: 'اختر الشهر', + year: 'اختر السنة', }, weekdays: [ - "الإثنين", - "الثلاثاء", - "الأربعاء", - "الخميس", - "الجمعة", - "السبت", - "الأحد", + 'الإثنين', + 'الثلاثاء', + 'الأربعاء', + 'الخميس', + 'الجمعة', + 'السبت', + 'الأحد', ], months: [ - "يناير", - "فبراير", - "مارس", - "أبريل", - "مايو", - "يونيو", - "يوليو", - "أغسطس", - "سبتمبر", - "أكتوبر", - "نوفمبر", - "ديسمبر", + 'يناير', + 'فبراير', + 'مارس', + 'أبريل', + 'مايو', + 'يونيو', + 'يوليو', + 'أغسطس', + 'سبتمبر', + 'أكتوبر', + 'نوفمبر', + 'ديسمبر', ], - quarters: ["Q1", "Q2", "Q3", "Q4"], - rangeSeparator: " - ", - direction: "ltr", - format: "YYYY-MM-DD", - dayAriaLabel: "D", - yearAriaLabel: "Y", - monthAriaLabel: "M", - weekAbbreviation: "W", - confirm: "نعم", - selectTime: "حدد الوقت", - selectDate: "حدد تاريخ", - nextYear: "العام القادم", - preYear: "العام الماضي", - nextMonth: "الشهر القادم", - preMonth: "الشهر الماضي", - preDecade: "العقد الماضي", - nextDecade: "العقد القادم", - now: "الآن", + quarters: ['Q1', 'Q2', 'Q3', 'Q4'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: 'D', + yearAriaLabel: 'Y', + monthAriaLabel: 'M', + weekAbbreviation: 'W', + confirm: 'نعم', + selectTime: 'حدد الوقت', + selectDate: 'حدد تاريخ', + nextYear: 'العام القادم', + preYear: 'العام الماضي', + nextMonth: 'الشهر القادم', + preMonth: 'الشهر الماضي', + preDecade: 'العقد الماضي', + nextDecade: 'العقد القادم', + now: 'الآن', }, upload: { - sizeLimitMessage: "لا يمكن أن يتجاوز حجم الملف {sizeLimit}", - cancelUploadText: "يلغي", + sizeLimitMessage: 'لا يمكن أن يتجاوز حجم الملف {sizeLimit}', + cancelUploadText: 'يلغي', triggerUploadText: { - fileInput: "حدد الملف", - image: "انقر لتحميل الصورة", - normal: "تحميل", - reupload: "أعد تحميل", - continueUpload: "تحميل المزيد", - delete: "حذف", - uploading: "تحميل", + fileInput: 'حدد الملف', + image: 'انقر لتحميل الصورة', + normal: 'تحميل', + reupload: 'أعد تحميل', + continueUpload: 'تحميل المزيد', + delete: 'حذف', + uploading: 'تحميل', }, dragger: { - dragDropText: "أسقطها هنا", - draggingText: "اسحب الملف هنا", - clickAndDragText: "اختر ملفًا أو اسحبه هنا.", + dragDropText: 'أسقطها هنا', + draggingText: 'اسحب الملف هنا', + clickAndDragText: 'اختر ملفًا أو اسحبه هنا.', }, file: { - fileNameText: "اسم الملف", - fileSizeText: "حجم", - fileStatusText: "حالة", - fileOperationText: "عملية", - fileOperationDateText: "تاريخ", + fileNameText: 'اسم الملف', + fileSizeText: 'حجم', + fileStatusText: 'حالة', + fileOperationText: 'عملية', + fileOperationDateText: 'تاريخ', }, progress: { - uploadingText: "تحميل", - waitingText: "جار التحميل", - failText: "التحميل فشل", - successText: "تم التحميل بنجاح.", + uploadingText: 'تحميل', + waitingText: 'جار التحميل', + failText: 'التحميل فشل', + successText: 'تم التحميل بنجاح.', }, }, form: { errorMessage: { - date: "الرجاء إدخال ${name} الصحيح", - url: "الرجاء إدخال ${name} الصحيح", - required: "مطلوب ${name}", - max: "يمكن أن يحتوي ${name} على ما يصل إلى ${validate} حرفًا", - min: "لا يمكن أن يكون ${name} أقل من ${validate} حرفًا", - len: "يجب أن يتكون ${name} من أحرف ${validate} بالضبط", - enum: "${name} يجب أن يكون واحدًا من ${validate} ", - idcard: "الرجاء إدخال ${name} الصحيح", - telnumber: "الرجاء إدخال ${name} الصحيح", - pattern: "الرجاء إدخال ${name} الصحيح", - validator: "${name} غير صالح", - boolean: "${name} ليس منطقيًا", - number: "يجب أن يكون ${name} رقمًا", + date: 'الرجاء إدخال ${name} الصحيح', + url: 'الرجاء إدخال ${name} الصحيح', + required: 'مطلوب ${name}', + max: 'يمكن أن يحتوي ${name} على ما يصل إلى ${validate} حرفًا', + min: 'لا يمكن أن يكون ${name} أقل من ${validate} حرفًا', + len: 'يجب أن يتكون ${name} من أحرف ${validate} بالضبط', + enum: '${name} يجب أن يكون واحدًا من ${validate} ', + idcard: 'الرجاء إدخال ${name} الصحيح', + telnumber: 'الرجاء إدخال ${name} الصحيح', + pattern: 'الرجاء إدخال ${name} الصحيح', + validator: '${name} غير صالح', + boolean: '${name} ليس منطقيًا', + number: 'يجب أن يكون ${name} رقمًا', }, }, - input: { placeholder: "الرجاء إدخال" }, + input: { placeholder: 'الرجاء إدخال' }, list: { - loadingText: "جار التحميل…", - loadingMoreText: "انقر لتحميل المزيد", + loadingText: 'جار التحميل…', + loadingMoreText: 'انقر لتحميل المزيد', }, alert: { - expandText: "تزسيع", - collapseText: "انهيار", + expandText: 'تزسيع', + collapseText: 'انهيار', }, anchor: { - copySuccessText: "تم نسخ الرابط", - copyText: "انسخ الرابط", + copySuccessText: 'تم نسخ الرابط', + copyText: 'انسخ الرابط', }, colorPicker: { - swatchColorTitle: "الألوان الافتراضية", - recentColorTitle: "مستخدم حديثا", - clearConfirmText: "هل تريد مسح الألوان المستخدمة مؤخرًا؟", + swatchColorTitle: 'الألوان الافتراضية', + recentColorTitle: 'مستخدم حديثا', + clearConfirmText: 'هل تريد مسح الألوان المستخدمة مؤخرًا؟', }, image: { - errorText: "غير قادر على التحميل", - loadingText: "جار التحميل", + errorText: 'غير قادر على التحميل', + loadingText: 'جار التحميل', }, imageViewer: { - errorText: "غير قادر على التحميل", - mirrorTipText: "مرآة", - rotateTipText: "استدارة", - originalSizeTipText: "أصلي", + errorText: 'غير قادر على التحميل', + mirrorTipText: 'مرآة', + rotateTipText: 'استدارة', + originalSizeTipText: 'أصلي', }, } as const; diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index 0b2b638af5..21ff9e1159 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -1,227 +1,228 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 import 'dayjs/locale/en'; + export default { pagination: { - itemsPerPage: "{size} / page", - jumpTo: "jump to", - page: "", - total: "{total} items", + itemsPerPage: '{size} / page', + jumpTo: 'jump to', + page: '', + total: '{total} items', }, cascader: { - empty: "Empty Data", - loadingText: "loading...", - placeholder: "please select", + empty: 'Empty Data', + loadingText: 'loading...', + placeholder: 'please select', }, calendar: { - yearSelection: "{year}", - monthSelection: "{month}", - yearRadio: "year", - monthRadio: "month", - hideWeekend: "Hide Week", - showWeekend: "Show Week", - today: "Today", - thisMonth: "This Month", - week: "Monday,Tuesday,Wedsday,Thuresday,Friday,Staturday,Sunday", + yearSelection: '{year}', + monthSelection: '{month}', + yearRadio: 'year', + monthRadio: 'month', + hideWeekend: 'Hide Week', + showWeekend: 'Show Week', + today: 'Today', + thisMonth: 'This Month', + week: 'Monday,Tuesday,Wedsday,Thuresday,Friday,Staturday,Sunday', cellMonth: - "January,February,March,April,May,June,July,August,September,October,November,December", + 'January,February,March,April,May,June,July,August,September,October,November,December', }, transfer: { - title: "{checked} / {total}", - empty: "Empty Data", - placeholder: "enter keyworkd to search", + title: '{checked} / {total}', + empty: 'Empty Data', + placeholder: 'enter keyworkd to search', }, timePicker: { dayjsLocale: 'en', - now: "Now", - confirm: "Confirm", - anteMeridiem: "AM", - postMeridiem: "PM", - placeholder: "please select", + now: 'Now', + confirm: 'Confirm', + anteMeridiem: 'AM', + postMeridiem: 'PM', + placeholder: 'please select', }, dialog: { - confirm: "Confirm", - cancel: "Cancel", + confirm: 'Confirm', + cancel: 'Cancel', }, drawer: { - confirm: "Confirm", - cancel: "Cancel", + confirm: 'Confirm', + cancel: 'Cancel', }, popconfirm: { confirm: { - content: "OK", + content: 'OK', }, cancel: { - content: "Cancel", + content: 'Cancel', }, }, table: { - empty: "Empty Data", - loadingText: "loading...", - loadingMoreText: "loading more", - filterInputPlaceholder: "", - sortAscendingOperationText: "click to sort ascending", - sortCancelOperationText: "click to cancel sorting", - sortDescendingOperationText: "click to sort descending", - clearFilterResultButtonText: "Clear", - columnConfigButtonText: "Column Config", - columnConfigTitleText: "Table Column Config", + empty: 'Empty Data', + loadingText: 'loading...', + loadingMoreText: 'loading more', + filterInputPlaceholder: '', + sortAscendingOperationText: 'click to sort ascending', + sortCancelOperationText: 'click to cancel sorting', + sortDescendingOperationText: 'click to sort descending', + clearFilterResultButtonText: 'Clear', + columnConfigButtonText: 'Column Config', + columnConfigTitleText: 'Table Column Config', columnConfigDescriptionText: - "Please select columns to show them in the table", - confirmText: "Confirm", - cancelText: "Cancel", - resetText: "Reset", - selectAllText: "Select All", + 'Please select columns to show them in the table', + confirmText: 'Confirm', + cancelText: 'Cancel', + resetText: 'Reset', + selectAllText: 'Select All', searchResultText: 'Search "{result}". Find {count} items.', }, select: { - empty: "Empty Data", - loadingText: "loading...", - placeholder: "please select", + empty: 'Empty Data', + loadingText: 'loading...', + placeholder: 'please select', }, tree: { - empty: "Empty Data", + empty: 'Empty Data', }, treeSelect: { - empty: "Empty Data", - loadingText: "loading...", - placeholder: "please select", + empty: 'Empty Data', + loadingText: 'loading...', + placeholder: 'please select', }, datePicker: { dayjsLocale: 'en', placeholder: { - date: "select date", - month: "select month", - year: "select year", + date: 'select date', + month: 'select month', + year: 'select year', }, - weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], months: [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', ], - quarters: ["Q1", "Q2", "Q3", "Q4"], - rangeSeparator: " - ", - direction: "ltr", - format: "YYYY-MM-DD", - dayAriaLabel: "D", - yearAriaLabel: "Y", - monthAriaLabel: "M", - weekAbbreviation: "W", - confirm: "Confirm", - selectTime: "Select Time", - selectDate: "Select Date", - nextYear: "Next Year", - preYear: "Last Year", - nextMonth: "Next Month", - preMonth: "Last Month", - preDecade: "Last Decade", - nextDecade: "Next Decade", - now: "Now", + quarters: ['Q1', 'Q2', 'Q3', 'Q4'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: 'D', + yearAriaLabel: 'Y', + monthAriaLabel: 'M', + weekAbbreviation: 'W', + confirm: 'Confirm', + selectTime: 'Select Time', + selectDate: 'Select Date', + nextYear: 'Next Year', + preYear: 'Last Year', + nextMonth: 'Next Month', + preMonth: 'Last Month', + preDecade: 'Last Decade', + nextDecade: 'Next Decade', + now: 'Now', }, upload: { - sizeLimitMessage: "File is too large to upload. {sizeLimit}", - cancelUploadText: "Cancel", + sizeLimitMessage: 'File is too large to upload. {sizeLimit}', + cancelUploadText: 'Cancel', triggerUploadText: { - fileInput: "Upload", - image: "Click to upload", - normal: "Upload", - reupload: "ReUpload", - continueUpload: "Continue Upload", - delete: "Delete", - uploading: "Uploading", + fileInput: 'Upload', + image: 'Click to upload', + normal: 'Upload', + reupload: 'ReUpload', + continueUpload: 'Continue Upload', + delete: 'Delete', + uploading: 'Uploading', }, dragger: { - dragDropText: "Drop hear", - draggingText: "Drag file to this area to upload", + dragDropText: 'Drop hear', + draggingText: 'Drag file to this area to upload', clickAndDragText: 'Click "Upload" or Drag file to this area to upload', }, file: { - fileNameText: "filename", - fileSizeText: "size", - fileStatusText: "status", - fileOperationText: "operation", - fileOperationDateText: "date", + fileNameText: 'filename', + fileSizeText: 'size', + fileStatusText: 'status', + fileOperationText: 'operation', + fileOperationDateText: 'date', }, progress: { - uploadingText: "Uploading", - waitingText: "Waiting", - failText: "Failed", - successText: "Success", + uploadingText: 'Uploading', + waitingText: 'Waiting', + failText: 'Failed', + successText: 'Success', }, }, form: { errorMessage: { - date: "${name} is invalid", - url: "${name} is invalid", - required: "${name} is required", - max: "${name} must be at least ${validate} characters", - min: "${name} cannot be longer than ${validate} characters", - len: "${name} must be exactly ${validate} characters", - enum: "${name} must be one of ${validate}", - idcard: "${name} is invalid", - telnumber: "${name} is invalid", - pattern: "${name} is invalid", - validator: "${name} is invalid", - boolean: "${name} is not a boolean", - number: "${name} must be a number", + date: '${name} is invalid', + url: '${name} is invalid', + required: '${name} is required', + max: '${name} must be at least ${validate} characters', + min: '${name} cannot be longer than ${validate} characters', + len: '${name} must be exactly ${validate} characters', + enum: '${name} must be one of ${validate}', + idcard: '${name} is invalid', + telnumber: '${name} is invalid', + pattern: '${name} is invalid', + validator: '${name} is invalid', + boolean: '${name} is not a boolean', + number: '${name} must be a number', }, }, input: { - placeholder: "please enter", + placeholder: 'please enter', }, list: { - loadingText: "loading...", - loadingMoreText: "loading more", + loadingText: 'loading...', + loadingMoreText: 'loading more', }, alert: { - expandText: "expand", - collapseText: "collapse", + expandText: 'expand', + collapseText: 'collapse', }, anchor: { - copySuccessText: "copy the link successfully", - copyText: "copy link", + copySuccessText: 'copy the link successfully', + copyText: 'copy link', }, colorPicker: { - swatchColorTitle: "System Default", - recentColorTitle: "Recently Used", - clearConfirmText: "Clear recently used colors?", + swatchColorTitle: 'System Default', + recentColorTitle: 'Recently Used', + clearConfirmText: 'Clear recently used colors?', }, guide: { finishButtonProps: { - content: "Finish", - theme: "primary", + content: 'Finish', + theme: 'primary', }, nextButtonProps: { - content: "Next Step", - theme: "primary", + content: 'Next Step', + theme: 'primary', }, skipButtonProps: { - content: "Skip", - theme: "default", + content: 'Skip', + theme: 'default', }, prevButtonProps: { - content: "Last Step", - theme: "default", + content: 'Last Step', + theme: 'default', }, image: { - errorText: "unable to load", - loadingText: "loading", + errorText: 'unable to load', + loadingText: 'loading', }, imageViewer: { - errorText: "unable to load", - mirrorTipText: "mirror", - rotateTipText: "rotate", - originalSizeTipText: "original", + errorText: 'unable to load', + mirrorTipText: 'mirror', + rotateTipText: 'rotate', + originalSizeTipText: 'original', }, }, } as const; diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 19ef336541..7af51d250e 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -1,226 +1,227 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 import 'dayjs/locale/ja'; + export default { pagination: { - itemsPerPage: "{size} /ページ", - jumpTo: "ジャンプする", - page: "ページ", - total: "合計 {total} 項目データ", + itemsPerPage: '{size} /ページ', + jumpTo: 'ジャンプする', + page: 'ページ', + total: '合計 {total} 項目データ', }, cascader: { - empty: "データなし", - loadingText: "ローディング", - placeholder: "選択してください", + empty: 'データなし', + loadingText: 'ローディング', + placeholder: '選択してください', }, calendar: { - yearSelection: "{year} 年", - monthSelection: "{month} 月", - yearRadio: "年", - monthRadio: "月", - hideWeekend: "ヒドゥン・ウィークエンド", - showWeekend: "ショーウィークエンド", - today: "今日", - thisMonth: "今月は", - week: "月,火,水,木,金,土,日", - cellMonth: "1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月", + yearSelection: '{year} 年', + monthSelection: '{month} 月', + yearRadio: '年', + monthRadio: '月', + hideWeekend: 'ヒドゥン・ウィークエンド', + showWeekend: 'ショーウィークエンド', + today: '今日', + thisMonth: '今月は', + week: '月,火,水,木,金,土,日', + cellMonth: '1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月', }, transfer: { - title: "{checked} / {total} 項目", - empty: "データなし", - placeholder: "検索するキーワードを入力してください", + title: '{checked} / {total} 項目', + empty: 'データなし', + placeholder: '検索するキーワードを入力してください', }, timePicker: { dayjsLocale: 'ja', - now: "このとき", - confirm: "決定事項", - anteMeridiem: "モーニング", - postMeridiem: "午後", - placeholder: "時間を選択する", + now: 'このとき', + confirm: '決定事項', + anteMeridiem: 'モーニング', + postMeridiem: '午後', + placeholder: '時間を選択する', }, dialog: { - confirm: "確認事項", - cancel: "キャンセルについて", + confirm: '確認事項', + cancel: 'キャンセルについて', }, drawer: { - confirm: "確認事項", - cancel: "キャンセルについて", + confirm: '確認事項', + cancel: 'キャンセルについて', }, popconfirm: { confirm: { - content: "確認事項", + content: '確認事項', }, cancel: { - content: "キャンセルについて", + content: 'キャンセルについて', }, }, table: { - empty: "データなし", - loadingText: "ロード中です、お待ちください", - loadingMoreText: "クリックでさらに読み込み", - filterInputPlaceholder: "内容を入力してください（初期値なし）", - sortAscendingOperationText: "クリックで昇降", - sortCancelOperationText: "クリックでソート解除", - sortDescendingOperationText: "降順でクリック", - clearFilterResultButtonText: "クリアフィルター", - columnConfigButtonText: "カラム構成", - columnConfigTitleText: "テーブルカラムの構成", - columnConfigDescriptionText: "表に表示するデータの列を選択してください。", - confirmText: "確認事項", - cancelText: "キャンセルについて", - resetText: "リセット", - selectAllText: "すべて選択", - searchResultText: "検索“{result}”，探す {count} 記事結果", + empty: 'データなし', + loadingText: 'ロード中です、お待ちください', + loadingMoreText: 'クリックでさらに読み込み', + filterInputPlaceholder: '内容を入力してください（初期値なし）', + sortAscendingOperationText: 'クリックで昇降', + sortCancelOperationText: 'クリックでソート解除', + sortDescendingOperationText: '降順でクリック', + clearFilterResultButtonText: 'クリアフィルター', + columnConfigButtonText: 'カラム構成', + columnConfigTitleText: 'テーブルカラムの構成', + columnConfigDescriptionText: '表に表示するデータの列を選択してください。', + confirmText: '確認事項', + cancelText: 'キャンセルについて', + resetText: 'リセット', + selectAllText: 'すべて選択', + searchResultText: '検索“{result}”，探す {count} 記事結果', }, select: { - empty: "データなし", - loadingText: "ローディング", - placeholder: "選択してください", + empty: 'データなし', + loadingText: 'ローディング', + placeholder: '選択してください', }, tree: { - empty: "データなし", + empty: 'データなし', }, treeSelect: { - empty: "データなし", - loadingText: "ローディング", - placeholder: "選択してください", + empty: 'データなし', + loadingText: 'ローディング', + placeholder: '選択してください', }, datePicker: { dayjsLocale: 'ja', placeholder: { - date: "日付を選択してください", - month: "月を選択してください", - year: "年度を選択してください", + date: '日付を選択してください', + month: '月を選択してください', + year: '年度を選択してください', }, - weekdays: ["一", "二", "三", "四", "五", "六", "日"], + weekdays: ['一', '二', '三', '四', '五', '六', '日'], months: [ - "1 月", - "2 月", - "3 月", - "4 月", - "5 月", - "6 月", - "7 月", - "8 月", - "9 月", - "10 月", - "11 月", - "12 月", + '1 月', + '2 月', + '3 月', + '4 月', + '5 月', + '6 月', + '7 月', + '8 月', + '9 月', + '10 月', + '11 月', + '12 月', ], - quarters: ["Q1", "Q2", "Q3", "Q4"], - rangeSeparator: " - ", - direction: "ltr", - format: "YYYY-MM-DD", - dayAriaLabel: "日", - weekAbbreviation: "週間", - yearAriaLabel: "年", - monthAriaLabel: "月", - confirm: "決定事項", - selectTime: "時間を選択する", - selectDate: "日付を選択", - nextYear: "来年度", - preYear: "前年度", - nextMonth: "来月", - preMonth: "先月", - preDecade: "過去10年間", - nextDecade: "次の10年", - now: "電流", + quarters: ['Q1', 'Q2', 'Q3', 'Q4'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: '日', + weekAbbreviation: '週間', + yearAriaLabel: '年', + monthAriaLabel: '月', + confirm: '決定事項', + selectTime: '時間を選択する', + selectDate: '日付を選択', + nextYear: '来年度', + preYear: '前年度', + nextMonth: '来月', + preMonth: '先月', + preDecade: '過去10年間', + nextDecade: '次の10年', + now: '電流', }, upload: { - sizeLimitMessage: "画像サイズは最大で {sizeLimit}", - cancelUploadText: "アップロードをキャンセルする", + sizeLimitMessage: '画像サイズは最大で {sizeLimit}', + cancelUploadText: 'アップロードをキャンセルする', triggerUploadText: { - fileInput: "ファイル選択", - image: "クリックで画像をアップロード", - normal: "クリックでアップロード", - reupload: "再アップロード", - continueUpload: "アップロードを継続する", - delete: "削除", - uploading: "アップロード中", + fileInput: 'ファイル選択', + image: 'クリックで画像をアップロード', + normal: 'クリックでアップロード', + reupload: '再アップロード', + continueUpload: 'アップロードを継続する', + delete: '削除', + uploading: 'アップロード中', }, dragger: { - dragDropText: "マウスを離す", - draggingText: "この領域にドラッグ＆ドロップする", + dragDropText: 'マウスを離す', + draggingText: 'この領域にドラッグ＆ドロップする', clickAndDragText: - "上の「ファイルを選択」をクリックするか、このエリアにファイルをドラッグ＆ドロップしてください", + '上の「ファイルを選択」をクリックするか、このエリアにファイルをドラッグ＆ドロップしてください', }, file: { - fileNameText: "ファイル名", - fileSizeText: "ファイルサイズ", - fileStatusText: "状態です", - fileOperationText: "操作", - fileOperationDateText: "アップロード日", + fileNameText: 'ファイル名', + fileSizeText: 'ファイルサイズ', + fileStatusText: '状態です', + fileOperationText: '操作', + fileOperationDateText: 'アップロード日', }, progress: { - uploadingText: "アップロード中", - waitingText: "アップロード予定", - failText: "アップロードに失敗しました", - successText: "アップロード成功", + uploadingText: 'アップロード中', + waitingText: 'アップロード予定', + failText: 'アップロードに失敗しました', + successText: 'アップロード成功', }, }, form: { errorMessage: { - date: "正しく入力してください${name}", - url: "正しく入力してください${name}", - required: "${name}必須項目", - max: "${name}文字数制限 ${validate} 文字，一中二文", - min: "${name}を下回る文字数は使用できません ${validate} 文字，一中二文", - len: "${name}文字の長さは、必ず ${validate}", - enum: "${name}でしかありえません${validate}等", - idcard: "正しく入力してください${name}", - telnumber: "正しく入力してください${name}", - pattern: "正しく入力してください${name}", - validator: "${name}要件を満たしていない", - boolean: "${name}データ型は Boolean 型であること", - number: "${name}デジタルであること", + date: '正しく入力してください${name}', + url: '正しく入力してください${name}', + required: '${name}必須項目', + max: '${name}文字数制限 ${validate} 文字，一中二文', + min: '${name}を下回る文字数は使用できません ${validate} 文字，一中二文', + len: '${name}文字の長さは、必ず ${validate}', + enum: '${name}でしかありえません${validate}等', + idcard: '正しく入力してください${name}', + telnumber: '正しく入力してください${name}', + pattern: '正しく入力してください${name}', + validator: '${name}要件を満たしていない', + boolean: '${name}データ型は Boolean 型であること', + number: '${name}デジタルであること', }, }, input: { - placeholder: "入力してください", + placeholder: '入力してください', }, list: { - loadingText: "ロード中です、お待ちください", - loadingMoreText: "クリックでさらに読み込み", + loadingText: 'ロード中です、お待ちください', + loadingMoreText: 'クリックでさらに読み込み', }, alert: { - expandText: "もっと拡大する", - collapseText: "コレクト", + expandText: 'もっと拡大する', + collapseText: 'コレクト', }, anchor: { - copySuccessText: "リンクが正常にコピーされました", - copyText: "コピーリンク", + copySuccessText: 'リンクが正常にコピーされました', + copyText: 'コピーリンク', }, colorPicker: { - swatchColorTitle: "システムプリセットカラー", - recentColorTitle: "最近使用した色", - clearConfirmText: "最近使用した色をクリアにするのは確実ですか？", + swatchColorTitle: 'システムプリセットカラー', + recentColorTitle: '最近使用した色', + clearConfirmText: '最近使用した色をクリアにするのは確実ですか？', }, guide: { finishButtonProps: { - content: "終了", - theme: "primary", + content: '終了', + theme: 'primary', }, nextButtonProps: { - content: "次のステップ", - theme: "primary", + content: '次のステップ', + theme: 'primary', }, skipButtonProps: { - content: "スキップ", - theme: "default", + content: 'スキップ', + theme: 'default', }, prevButtonProps: { - content: "前へ", - theme: "default", + content: '前へ', + theme: 'default', }, }, image: { - errorText: "画像を表示できません", - loadingText: "画像の読み込み", + errorText: '画像を表示できません', + loadingText: '画像の読み込み', }, imageViewer: { - errorText: "画像の読み込みに失敗しました。再読み込みしてみてください", - mirrorTipText: "鏡像", - rotateTipText: "回転する", - originalSizeTipText: "オリジナルサイズ", + errorText: '画像の読み込みに失敗しました。再読み込みしてみてください', + mirrorTipText: '鏡像', + rotateTipText: '回転する', + originalSizeTipText: 'オリジナルサイズ', }, } as const; diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index 2fb14ddbba..ea8bcb9123 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -1,226 +1,227 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 import 'dayjs/locale/ko'; + export default { pagination: { - itemsPerPage: "{size} /페이지", - jumpTo: "건너뛰다", - page: "페이지", - total: "흔한 {total} 아이템 데이터", + itemsPerPage: '{size} /페이지', + jumpTo: '건너뛰다', + page: '페이지', + total: '흔한 {total} 아이템 데이터', }, cascader: { - empty: "데이터 없음", - loadingText: "로딩 중", - placeholder: "선택해주세요", + empty: '데이터 없음', + loadingText: '로딩 중', + placeholder: '선택해주세요', }, calendar: { - yearSelection: "{year} 년도", - monthSelection: "{month} 달", - yearRadio: "년도", - monthRadio: "달", - hideWeekend: "주말을 숨기다", - showWeekend: "주말 쇼", - today: "오늘", - thisMonth: "이번 달", - week: "하나,둘,셋,넷,다섯,여섯,하루", - cellMonth: "1월,2월,3월,4월,5월,6월,7월,8월,9월,10월,11월,12월", + yearSelection: '{year} 년도', + monthSelection: '{month} 달', + yearRadio: '년도', + monthRadio: '달', + hideWeekend: '주말을 숨기다', + showWeekend: '주말 쇼', + today: '오늘', + thisMonth: '이번 달', + week: '하나,둘,셋,넷,다섯,여섯,하루', + cellMonth: '1월,2월,3월,4월,5월,6월,7월,8월,9월,10월,11월,12월', }, transfer: { - title: "{checked} / {total} 안건", - empty: "데이터 없음", - placeholder: "검색할 키워드를 입력하세요", + title: '{checked} / {total} 안건', + empty: '데이터 없음', + placeholder: '검색할 키워드를 입력하세요', }, timePicker: { dayjsLocale: 'ko', - now: "지금", - confirm: "확신하는", - anteMeridiem: "아침", - postMeridiem: "오후", - placeholder: "선발 기간", + now: '지금', + confirm: '확신하는', + anteMeridiem: '아침', + postMeridiem: '오후', + placeholder: '선발 기간', }, dialog: { - confirm: "확인하다", - cancel: "취소", + confirm: '확인하다', + cancel: '취소', }, drawer: { - confirm: "확인하다", - cancel: "취소", + confirm: '확인하다', + cancel: '취소', }, popconfirm: { confirm: { - content: "확신하는", + content: '확신하는', }, cancel: { - content: "취소", + content: '취소', }, }, table: { - empty: "데이터 없음", - loadingText: "로딩 중 기다려주세요", - loadingMoreText: "더 로드하려면 클릭하세요", - filterInputPlaceholder: "아무거나 입력하세요(기본값 없음)", - sortAscendingOperationText: "오름차순으로 클릭", - sortCancelOperationText: "클릭하여 정렬 해제", - sortDescendingOperationText: "내림차순으로 클릭", - clearFilterResultButtonText: "클리어 필터", - columnConfigButtonText: "열 구성", - columnConfigTitleText: "테이블 열 구성", - columnConfigDescriptionText: "테이블에 표시할 데이터 열을 선택하십시오", - confirmText: "확인하다", - cancelText: "취소", - resetText: "초기화", - selectAllText: "모두 선택", - searchResultText: "검색“{result}”，일어나 {count} 결과", + empty: '데이터 없음', + loadingText: '로딩 중 기다려주세요', + loadingMoreText: '더 로드하려면 클릭하세요', + filterInputPlaceholder: '아무거나 입력하세요(기본값 없음)', + sortAscendingOperationText: '오름차순으로 클릭', + sortCancelOperationText: '클릭하여 정렬 해제', + sortDescendingOperationText: '내림차순으로 클릭', + clearFilterResultButtonText: '클리어 필터', + columnConfigButtonText: '열 구성', + columnConfigTitleText: '테이블 열 구성', + columnConfigDescriptionText: '테이블에 표시할 데이터 열을 선택하십시오', + confirmText: '확인하다', + cancelText: '취소', + resetText: '초기화', + selectAllText: '모두 선택', + searchResultText: '검색“{result}”，일어나 {count} 결과', }, select: { - empty: "데이터 없음", - loadingText: "로딩 중", - placeholder: "선택해주세요", + empty: '데이터 없음', + loadingText: '로딩 중', + placeholder: '선택해주세요', }, tree: { - empty: "데이터 없음", + empty: '데이터 없음', }, treeSelect: { - empty: "데이터 없음", - loadingText: "로딩 중", - placeholder: "선택해주세요", + empty: '데이터 없음', + loadingText: '로딩 중', + placeholder: '선택해주세요', }, datePicker: { dayjsLocale: 'ko', placeholder: { - date: "날짜를 선택하세요Z", - month: "월을 선택하세요", - year: "연도를 선택하세요", + date: '날짜를 선택하세요Z', + month: '월을 선택하세요', + year: '연도를 선택하세요', }, - weekdays: ["하나", "둘", "삼", "4", "다섯", "여섯", "낮"], + weekdays: ['하나', '둘', '삼', '4', '다섯', '여섯', '낮'], months: [ - "1 월", - "2 월", - "3 월", - "4 월", - "5 월", - "6 월", - "7 월", - "8 월", - "9 월", - "10 월", - "11 월", - "12 월", + '1 월', + '2 월', + '3 월', + '4 월', + '5 월', + '6 월', + '7 월', + '8 월', + '9 월', + '10 월', + '11 월', + '12 월', ], - quarters: ["Q1", "Q2", "Q3", "Q4"], - rangeSeparator: " - ", - direction: "ltr", - format: "YYYY-MM-DD", - dayAriaLabel: "낮", - weekAbbreviation: "주", - yearAriaLabel: "년도", - monthAriaLabel: "달", - confirm: "확신하는", - selectTime: "선발 기간", - selectDate: "날짜 선택", - nextYear: "내년", - preYear: "작년", - nextMonth: "다음 달", - preMonth: "지난 달", - preDecade: "지난 십 년", - nextDecade: "다음 10년", - now: "현재의", + quarters: ['Q1', 'Q2', 'Q3', 'Q4'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: '낮', + weekAbbreviation: '주', + yearAriaLabel: '년도', + monthAriaLabel: '달', + confirm: '확신하는', + selectTime: '선발 기간', + selectDate: '날짜 선택', + nextYear: '내년', + preYear: '작년', + nextMonth: '다음 달', + preMonth: '지난 달', + preDecade: '지난 십 년', + nextDecade: '다음 10년', + now: '현재의', }, upload: { - sizeLimitMessage: "이미지 크기는 다음을 초과할 수 없습니다 {sizeLimit}", - cancelUploadText: "업로드 취소", + sizeLimitMessage: '이미지 크기는 다음을 초과할 수 없습니다 {sizeLimit}', + cancelUploadText: '업로드 취소', triggerUploadText: { - fileInput: "파일 선택", - image: "이미지를 업로드하려면 클릭하세요", - normal: "업로드하려면 클릭", - reupload: "재업로드", - continueUpload: "계속 업로드", - delete: "삭제", - uploading: "업로드", + fileInput: '파일 선택', + image: '이미지를 업로드하려면 클릭하세요', + normal: '업로드하려면 클릭', + reupload: '재업로드', + continueUpload: '계속 업로드', + delete: '삭제', + uploading: '업로드', }, dragger: { - dragDropText: "마우스를 놓으십시오", - draggingText: "이 영역으로 드래그 앤 드롭", + dragDropText: '마우스를 놓으십시오', + draggingText: '이 영역으로 드래그 앤 드롭', clickAndDragText: '위의 "파일 선택"을 클릭하거나 파일을 이 영역으로 끌어다 놓습니다', }, file: { - fileNameText: "파일 이름", - fileSizeText: "파일 크기", - fileStatusText: "상태", - fileOperationText: "작동하다", - fileOperationDateText: "업로드 날짜", + fileNameText: '파일 이름', + fileSizeText: '파일 크기', + fileStatusText: '상태', + fileOperationText: '작동하다', + fileOperationDateText: '업로드 날짜', }, progress: { - uploadingText: "업로드", - waitingText: "업로드 보류 중", - failText: "업로드 실패", - successText: "성공적으로 업로드됨", + uploadingText: '업로드', + waitingText: '업로드 보류 중', + failText: '업로드 실패', + successText: '성공적으로 업로드됨', }, }, form: { errorMessage: { - date: "정확한 내용을 입력해주세요${name}", - url: "정확한 내용을 입력해주세요${name}", - required: "${name}필수의", - max: "${name}문자 길이는 초과할 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다", - min: "${name}문자 길이는 다음보다 작을 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다", - len: "${name}문자 길이는 다음과 같아야 합니다. ${validate}", - enum: "${name}만 될 수 있습니다${validate}그리고 더", - idcard: "정확한 내용을 입력해주세요${name}", - telnumber: "정확한 내용을 입력해주세요${name}", - pattern: "정확한 내용을 입력해주세요${name}", - validator: "${name}비준수", - boolean: "${name}데이터 유형은 부울이어야 합니다", - number: "${name}숫자여야 합니다", + date: '정확한 내용을 입력해주세요${name}', + url: '정확한 내용을 입력해주세요${name}', + required: '${name}필수의', + max: '${name}문자 길이는 초과할 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다', + min: '${name}문자 길이는 다음보다 작을 수 없습니다 ${validate} 캐릭터，한자는 두 글자와 같다', + len: '${name}문자 길이는 다음과 같아야 합니다. ${validate}', + enum: '${name}만 될 수 있습니다${validate}그리고 더', + idcard: '정확한 내용을 입력해주세요${name}', + telnumber: '정확한 내용을 입력해주세요${name}', + pattern: '정확한 내용을 입력해주세요${name}', + validator: '${name}비준수', + boolean: '${name}데이터 유형은 부울이어야 합니다', + number: '${name}숫자여야 합니다', }, }, input: { - placeholder: "들어 오세요", + placeholder: '들어 오세요', }, list: { - loadingText: "로딩 중 기다려주세요", - loadingMoreText: "더 로드하려면 클릭하세요", + loadingText: '로딩 중 기다려주세요', + loadingMoreText: '더 로드하려면 클릭하세요', }, alert: { - expandText: "더 확장", - collapseText: "치워", + expandText: '더 확장', + collapseText: '치워', }, anchor: { - copySuccessText: "링크 복사 성공", - copyText: "링크 복사", + copySuccessText: '링크 복사 성공', + copyText: '링크 복사', }, colorPicker: { - swatchColorTitle: "시스템 기본 색상", - recentColorTitle: "최근 사용한 색상", - clearConfirmText: "최근에 사용한 색상을 지우시겠습니까?", + swatchColorTitle: '시스템 기본 색상', + recentColorTitle: '최근 사용한 색상', + clearConfirmText: '최근에 사용한 색상을 지우시겠습니까?', }, guide: { finishButtonProps: { - content: "완료", - theme: "primary", + content: '완료', + theme: 'primary', }, nextButtonProps: { - content: "다음 단계", - theme: "primary", + content: '다음 단계', + theme: 'primary', }, skipButtonProps: { - content: "건너뛰기", - theme: "default", + content: '건너뛰기', + theme: 'default', }, prevButtonProps: { - content: "마지막 단계", - theme: "default", + content: '마지막 단계', + theme: 'default', }, }, image: { - errorText: "사진을 표시할 수 없습니다.", - loadingText: "이미지 로딩", + errorText: '사진을 표시할 수 없습니다.', + loadingText: '이미지 로딩', }, imageViewer: { - errorText: "이미지를 로드하지 못했습니다. 새로고침해 보세요.", - mirrorTipText: "미러 이미지", - rotateTipText: "회전하다", - originalSizeTipText: "원본 크기", + errorText: '이미지를 로드하지 못했습니다. 새로고침해 보세요.', + mirrorTipText: '미러 이미지', + rotateTipText: '회전하다', + originalSizeTipText: '원본 크기', }, } as const; diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index 152fbad58c..d5a68aa2fb 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -1,226 +1,227 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 import 'dayjs/locale/zh-cn'; + export default { pagination: { - itemsPerPage: "{size} 条/页", - jumpTo: "跳至", - page: "页", - total: "共 {total} 项数据", + itemsPerPage: '{size} 条/页', + jumpTo: '跳至', + page: '页', + total: '共 {total} 项数据', }, cascader: { - empty: "暂无数据", - loadingText: "加载中", - placeholder: "请选择", + empty: '暂无数据', + loadingText: '加载中', + placeholder: '请选择', }, calendar: { - yearSelection: "{year} 年", - monthSelection: "{month} 月", - yearRadio: "年", - monthRadio: "月", - hideWeekend: "隐藏周末", - showWeekend: "显示周末", - today: "今天", - thisMonth: "本月", - week: "一,二,三,四,五,六,日", - cellMonth: "1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月", + yearSelection: '{year} 年', + monthSelection: '{month} 月', + yearRadio: '年', + monthRadio: '月', + hideWeekend: '隐藏周末', + showWeekend: '显示周末', + today: '今天', + thisMonth: '本月', + week: '一,二,三,四,五,六,日', + cellMonth: '1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月', }, transfer: { - title: "{checked} / {total} 项", - empty: "暂无数据", - placeholder: "请输入关键词搜索", + title: '{checked} / {total} 项', + empty: '暂无数据', + placeholder: '请输入关键词搜索', }, timePicker: { dayjsLocale: 'zh-cn', - now: "此刻", - confirm: "确定", - anteMeridiem: "上午", - postMeridiem: "下午", - placeholder: "选择时间", + now: '此刻', + confirm: '确定', + anteMeridiem: '上午', + postMeridiem: '下午', + placeholder: '选择时间', }, dialog: { - confirm: "确认", - cancel: "取消", + confirm: '确认', + cancel: '取消', }, drawer: { - confirm: "确认", - cancel: "取消", + confirm: '确认', + cancel: '取消', }, popconfirm: { confirm: { - content: "确定", + content: '确定', }, cancel: { - content: "取消", + content: '取消', }, }, table: { - empty: "暂无数据", - loadingText: "正在加载中，请稍后", - loadingMoreText: "点击加载更多", - filterInputPlaceholder: "请输入内容（无默认值）", - sortAscendingOperationText: "点击升序", - sortCancelOperationText: "点击取消排序", - sortDescendingOperationText: "点击降序", - clearFilterResultButtonText: "清空筛选", - columnConfigButtonText: "列配置", - columnConfigTitleText: "表格列配置", - columnConfigDescriptionText: "请选择需要在表格中显示的数据列", - confirmText: "确认", - cancelText: "取消", - resetText: "重置", - selectAllText: "全选", - searchResultText: "搜索“{result}”，找到 {count} 条结果", + empty: '暂无数据', + loadingText: '正在加载中，请稍后', + loadingMoreText: '点击加载更多', + filterInputPlaceholder: '请输入内容（无默认值）', + sortAscendingOperationText: '点击升序', + sortCancelOperationText: '点击取消排序', + sortDescendingOperationText: '点击降序', + clearFilterResultButtonText: '清空筛选', + columnConfigButtonText: '列配置', + columnConfigTitleText: '表格列配置', + columnConfigDescriptionText: '请选择需要在表格中显示的数据列', + confirmText: '确认', + cancelText: '取消', + resetText: '重置', + selectAllText: '全选', + searchResultText: '搜索“{result}”，找到 {count} 条结果', }, select: { - empty: "暂无数据", - loadingText: "加载中", - placeholder: "请选择", + empty: '暂无数据', + loadingText: '加载中', + placeholder: '请选择', }, tree: { - empty: "暂无数据", + empty: '暂无数据', }, treeSelect: { - empty: "暂无数据", - loadingText: "加载中", - placeholder: "请选择", + empty: '暂无数据', + loadingText: '加载中', + placeholder: '请选择', }, datePicker: { dayjsLocale: 'zh-cn', placeholder: { - date: "请选择日期", - month: "请选择月份", - year: "请选择年份", + date: '请选择日期', + month: '请选择月份', + year: '请选择年份', }, - weekdays: ["一", "二", "三", "四", "五", "六", "日"], + weekdays: ['一', '二', '三', '四', '五', '六', '日'], months: [ - "1 月", - "2 月", - "3 月", - "4 月", - "5 月", - "6 月", - "7 月", - "8 月", - "9 月", - "10 月", - "11 月", - "12 月", + '1 月', + '2 月', + '3 月', + '4 月', + '5 月', + '6 月', + '7 月', + '8 月', + '9 月', + '10 月', + '11 月', + '12 月', ], - quarters: ["一季度", "二季度", "三季度", "四季度"], - rangeSeparator: " - ", - direction: "ltr", - format: "YYYY-MM-DD", - dayAriaLabel: "日", - weekAbbreviation: "周", - yearAriaLabel: "年", - monthAriaLabel: "月", - confirm: "确定", - selectTime: "选择时间", - selectDate: "选择日期", - nextYear: "下一年", - preYear: "上一年", - nextMonth: "下个月", - preMonth: "上个月", - preDecade: "上个十年", - nextDecade: "下个十年", - now: "当前", + quarters: ['一季度', '二季度', '三季度', '四季度'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: '日', + weekAbbreviation: '周', + yearAriaLabel: '年', + monthAriaLabel: '月', + confirm: '确定', + selectTime: '选择时间', + selectDate: '选择日期', + nextYear: '下一年', + preYear: '上一年', + nextMonth: '下个月', + preMonth: '上个月', + preDecade: '上个十年', + nextDecade: '下个十年', + now: '当前', }, upload: { - sizeLimitMessage: "文件大小不能超过 {sizeLimit}", - cancelUploadText: "取消上传", + sizeLimitMessage: '文件大小不能超过 {sizeLimit}', + cancelUploadText: '取消上传', triggerUploadText: { - fileInput: "选择文件", - image: "点击上传图片", - normal: "点击上传", + fileInput: '选择文件', + image: '点击上传图片', + normal: '点击上传', // 选择文件和上传文件是 2 个步骤，文本需明确步骤 - reupload: "重新选择", - continueUpload: "继续选择", - delete: "删除", - uploading: "上传中", + reupload: '重新选择', + continueUpload: '继续选择', + delete: '删除', + uploading: '上传中', }, dragger: { - dragDropText: "释放鼠标", - draggingText: "拖拽到此区域", - clickAndDragText: "点击上方“选择文件”或将文件拖拽到此区域", + dragDropText: '释放鼠标', + draggingText: '拖拽到此区域', + clickAndDragText: '点击上方“选择文件”或将文件拖拽到此区域', }, file: { - fileNameText: "文件名", - fileSizeText: "文件大小", - fileStatusText: "状态", - fileOperationText: "操作", - fileOperationDateText: "上传日期", + fileNameText: '文件名', + fileSizeText: '文件大小', + fileStatusText: '状态', + fileOperationText: '操作', + fileOperationDateText: '上传日期', }, progress: { - uploadingText: "上传中", - waitingText: "待上传", - failText: "上传失败", - successText: "上传成功", + uploadingText: '上传中', + waitingText: '待上传', + failText: '上传失败', + successText: '上传成功', }, }, form: { errorMessage: { - date: "请输入正确的${name}", - url: "请输入正确的${name}", - required: "${name}必填", - max: "${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符", - min: "${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符", - len: "${name}字符长度必须是 ${validate}", - enum: "${name}只能是${validate}等", - idcard: "请输入正确的${name}", - telnumber: "请输入正确的${name}", - pattern: "请输入正确的${name}", - validator: "${name}不符合要求", - boolean: "${name}数据类型必须是布尔类型", - number: "${name}必须是数字", + date: '请输入正确的${name}', + url: '请输入正确的${name}', + required: '${name}必填', + max: '${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符', + min: '${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符', + len: '${name}字符长度必须是 ${validate}', + enum: '${name}只能是${validate}等', + idcard: '请输入正确的${name}', + telnumber: '请输入正确的${name}', + pattern: '请输入正确的${name}', + validator: '${name}不符合要求', + boolean: '${name}数据类型必须是布尔类型', + number: '${name}必须是数字', }, }, input: { - placeholder: "请输入", + placeholder: '请输入', }, list: { - loadingText: "正在加载中，请稍等", - loadingMoreText: "点击加载更多", + loadingText: '正在加载中，请稍等', + loadingMoreText: '点击加载更多', }, alert: { - expandText: "展开更多", - collapseText: "收起", + expandText: '展开更多', + collapseText: '收起', }, anchor: { - copySuccessText: "链接复制成功", - copyText: "复制链接", + copySuccessText: '链接复制成功', + copyText: '复制链接', }, colorPicker: { - swatchColorTitle: "系统预设颜色", - recentColorTitle: "最近使用颜色", - clearConfirmText: "确定清空最近使用的颜色吗？", + swatchColorTitle: '系统预设颜色', + recentColorTitle: '最近使用颜色', + clearConfirmText: '确定清空最近使用的颜色吗？', }, guide: { finishButtonProps: { - content: "完成", - theme: "primary", + content: '完成', + theme: 'primary', }, nextButtonProps: { - content: "下一步", - theme: "primary", + content: '下一步', + theme: 'primary', }, skipButtonProps: { - content: "跳过", - theme: "default", + content: '跳过', + theme: 'default', }, prevButtonProps: { - content: "上一步", - theme: "default", + content: '上一步', + theme: 'default', }, }, image: { - errorText: "图片无法显示", - loadingText: "图片加载中", + errorText: '图片无法显示', + loadingText: '图片加载中', }, imageViewer: { - errorText: "图片加载失败，可尝试重新加载", - mirrorTipText: "镜像", - rotateTipText: "旋转", - originalSizeTipText: "原始大小", + errorText: '图片加载失败，可尝试重新加载', + mirrorTipText: '镜像', + rotateTipText: '旋转', + originalSizeTipText: '原始大小', }, } as const; diff --git a/js/input-number/large-number.ts b/js/input-number/large-number.ts index 94bd92ca7a..1e4b73745a 100644 --- a/js/input-number/large-number.ts +++ b/js/input-number/large-number.ts @@ -1,3 +1,5 @@ +import isString from 'lodash/isString'; +import isNumber from 'lodash/isNumber'; import log from '../log/log'; export function fillZero(length: number) { @@ -9,7 +11,7 @@ export function fillZero(length: number) { */ export function isInputNumber(num: number | string): boolean { if (!num) return true; - if (typeof num === 'number') return !Number.isNaN(num); + if (isNumber(num)) return !Number.isNaN(num); const r = /^[0-9|e|E|-]+\.*[0-9|e|E|-]*$/.test(num); if (!r) return false; // only allow one [.e] and two [-] @@ -325,7 +327,7 @@ export function largeNumberToFixed( number: string | number, decimalPlaces: number = 0, largeNumber = true, ): string { if (!largeNumber) return Number(number).toFixed(decimalPlaces); - if (typeof number !== 'string') return String(number); + if (!isString(number)) return String(number); const [num1, num2] = number.split('.'); // 如果不存在小数点，则补足位数 if (!num2) { diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 3dcce049a4..31329c41d2 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -1,3 +1,5 @@ +import isUndefined from 'lodash/isUndefined'; +import isNil from 'lodash/isNil'; /** 普通数相关方法 */ import isString from 'lodash/isString'; import isNumber from 'lodash/isNumber'; @@ -53,7 +55,7 @@ export function formatToNumber( largeNumber?: boolean; } ): string | number { - if (num === undefined || num === null || num === '') return num; + if (isNil(num) || num === '') return num; if (num === '-') return 0; if (num[num.length - 1] === '.') { return extra?.largeNumber ? num.slice(0, -1) : Number(num.slice(0, -1)); @@ -63,14 +65,14 @@ export function formatToNumber( if ((isString(num) && num.includes('e')) || isNumber(num)) { newNumber = isLargeNumber ? formatENumber(num) : Number(num); } - if (extra?.decimalPlaces !== undefined) { + if (!isUndefined(extra?.decimalPlaces)) { newNumber = largeNumberToFixed( newNumber, extra.decimalPlaces, extra.largeNumber ); } - const val = isLargeNumber || extra?.decimalPlaces !== undefined + const val = isLargeNumber || !isUndefined(extra?.decimalPlaces) ? newNumber : Number(newNumber); if (String(val) === 'NaN') return undefined; @@ -197,7 +199,7 @@ export function getStepValue(p: { newVal = subtract(Number(lastValue || 0), Number(step)); } } - if (lastValue === undefined) { + if (isUndefined(lastValue)) { newVal = putInRangeNumber(newVal, { max, min, lastValue, largeNumber }); } return largeNumber ? newVal : Number(newVal); @@ -218,7 +220,7 @@ export function getMaxOrMinValidateResult(p: { min: NumberType; }): InputNumberErrorType { const { largeNumber, value, max, min } = p; - if (largeNumber === undefined) return undefined; + if (isUndefined(largeNumber)) return undefined; if (largeNumber && isNumber(value)) { log.warn('InputNumber', 'largeNumber value must be a string.'); } @@ -239,7 +241,7 @@ export const specialCode = ['-', '.', 'e', 'E']; * 是否允许输入当前字符，输入字符校验 */ export function canInputNumber(number: string, largeNumber: boolean) { - if (!number && typeof number === 'string') return true; + if (!number && isString(number)) return true; const isNumber = (largeNumber && isInputNumber(number)) || !Number.isNaN(Number(number)); if (!isNumber && !['-', '.', 'e', 'E'].includes(number.slice(-1))) return false; // 只能出现一个点（.） 和 一个负号（-） diff --git a/js/table/tree-store.ts b/js/table/tree-store.ts index 9922fa4269..5980727037 100644 --- a/js/table/tree-store.ts +++ b/js/table/tree-store.ts @@ -1,3 +1,4 @@ +import isUndefined from 'lodash/isUndefined'; /* eslint-disable class-methods-use-this */ /* eslint-disable no-param-reassign */ /* eslint-disable no-use-before-define */ @@ -81,7 +82,7 @@ class TableTreeStore { return dataSource; } const rowValue = get(p.row, keys.rowKey); - if (rowValue === undefined) { + if (isUndefined(rowValue)) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); return []; } @@ -573,7 +574,7 @@ class TableTreeStore { for (let i = 0, len = dataSource.length; i < len; i++) { const item = dataSource[i]; const rowValue = get(item, keys.rowKey); - if (rowValue === undefined) { + if (isUndefined(rowValue)) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); return; } @@ -601,7 +602,7 @@ class TableTreeStore { for (let i = 0, len = dataSource.length; i < len; i++) { const item = dataSource[i]; const rowValue = get(item, keys.rowKey); - if (rowValue === undefined) { + if (isUndefined(rowValue)) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); return; } diff --git a/js/tree/tree-node-model.ts b/js/tree/tree-node-model.ts index eaba37510c..eb1303fc11 100644 --- a/js/tree/tree-node-model.ts +++ b/js/tree/tree-node-model.ts @@ -1,3 +1,5 @@ +import isUndefined from 'lodash/isUndefined'; +import isBoolean from 'lodash/isBoolean'; import pick from 'lodash/pick'; import omit from 'lodash/omit'; import { TreeNode } from './tree-node'; @@ -118,7 +120,7 @@ export function createNodeModel(node: TreeNode): TypeTreeNodeModel { } else { childrenModel = false; } - } else if (typeof children === 'boolean') { + } else if (isBoolean(children)) { childrenModel = children; } return childrenModel; @@ -154,8 +156,8 @@ export function createNodeModel(node: TreeNode): TypeTreeNodeModel { const { keys } = node.tree.config; const dataValue = data[keys?.value || 'value']; const dataLabel = data[keys?.label || 'label']; - if (dataValue !== undefined) _data.value = dataValue; - if (dataLabel !== undefined) _data.label = dataLabel; + if (!isUndefined(dataValue)) _data.value = dataValue; + if (!isUndefined(dataLabel)) _data.label = dataLabel; Object.assign(node.data, _data); Object.assign(node, _data); diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index c3878827f0..e86a8dd718 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -1,3 +1,6 @@ +import isNull from 'lodash/isNull'; +import isFunction from 'lodash/isFunction'; +import isNumber from 'lodash/isNumber'; import uniqueId from 'lodash/uniqueId'; import isNil from 'lodash/isNil'; import get from 'lodash/get'; @@ -212,7 +215,7 @@ export class TreeNode { let { expanded } = this; const { config } = tree; if ( - typeof config.expandLevel === 'number' + isNumber(config.expandLevel) && this.getLevel() < config.expandLevel ) { tree.expandedMap.set(this.value, true); @@ -279,7 +282,7 @@ export class TreeNode { ): void { const parentNode = parent; let targetIndex = -1; - if (typeof index === 'number') { + if (isNumber(index)) { targetIndex = index; } @@ -318,7 +321,7 @@ export class TreeNode { this.remove(); - if (typeof index === 'number') { + if (isNumber(index)) { let targetIndex = index; if (parentNode === this.parent) { // 前置节点被拔出后再插入到同一个 siblings 时，会引起目标 index 的变化 @@ -373,7 +376,7 @@ export class TreeNode { node.appendTo(tree, parent, index); } else if (item) { node = new TreeNode(tree, item, parent); - if (typeof index === 'number') { + if (isNumber(index)) { siblings.splice(index, 0, node); } siblings.forEach((sibling) => { @@ -433,7 +436,7 @@ export class TreeNode { public async loadChildren(): Promise { const config = get(this, 'tree.config') || {}; if (this.children === true && !this.loading) { - if (typeof config.load === 'function') { + if (isFunction(config.load)) { this.loading = true; this.update(); let list = []; @@ -533,7 +536,7 @@ export class TreeNode { } = this.tree; let rest = true; - if (typeof config.filter === 'function') { + if (isFunction(config.filter)) { const nodeModel = this.getModel(); rest = config.filter(nodeModel); } @@ -669,7 +672,7 @@ export class TreeNode { // 子节点有任意一个半选，则其为半选状态 return true; } - if (childChecked === null) { + if (isNull(childChecked)) { childChecked = node.isChecked(); } if (childChecked !== node.isChecked()) { diff --git a/js/tree/tree-store.ts b/js/tree/tree-store.ts index aae4e76b86..30bd773de5 100644 --- a/js/tree/tree-store.ts +++ b/js/tree/tree-store.ts @@ -1,3 +1,7 @@ +import isArray from 'lodash/isArray'; +import isFunction from 'lodash/isFunction'; +import isNumber from 'lodash/isNumber'; +import isString from 'lodash/isString'; import difference from 'lodash/difference'; import camelCase from 'lodash/camelCase'; import isPlainObject from 'lodash/isPlainObject'; @@ -144,7 +148,7 @@ export class TreeStore { // 获取节点对象 public getNode(item: TypeTargetNode): TreeNode { let node = null; - if (typeof item === 'string' || typeof item === 'number') { + if (isString(item) || isNumber(item)) { node = this.nodeMap.get(item); } else if (item instanceof TreeNode) { node = this.nodeMap.get(item.value); @@ -194,7 +198,7 @@ export class TreeStore { ): TreeNode[] { let nodes: TreeNode[] = []; let val: TreeNodeValue = ''; - if (typeof item === 'string' || typeof item === 'number') { + if (isString(item) || isNumber(item)) { val = item; } else if (item instanceof TreeNode) { val = item.value; @@ -214,10 +218,10 @@ export class TreeStore { level: Infinity, ...options, }; - if (typeof conf.level === 'number' && conf.level !== Infinity) { + if (isNumber(conf.level) && conf.level !== Infinity) { nodes = nodes.filter((node) => node.level <= conf.level); } - if (typeof conf.filter === 'function') { + if (isFunction(conf.filter)) { nodes = nodes.filter((node) => { const nodeModel = node.getModel(); return conf.filter(nodeModel); @@ -264,7 +268,7 @@ export class TreeStore { let node = null; let data = null; - if (typeof para === 'string' || typeof para === 'number') { + if (isString(para) || isNumber(para)) { value = para; data = item; node = this.getNode(value); @@ -311,7 +315,7 @@ export class TreeStore { // 插入到目标节点之下 if (spec.data instanceof TreeNode) { spec.data.appendTo(this, spec.node); - } else if (Array.isArray(spec.data)) { + } else if (isArray(spec.data)) { spec.node.append(spec.data); } else { spec.node.append([spec.data]); @@ -643,7 +647,7 @@ export class TreeStore { const { config, emitter } = this; const methodName = camelCase(`on-${name}`); const method = config[methodName]; - if (typeof method === 'function') { + if (isFunction(method)) { method(state); } emitter.emit(name, state); @@ -665,7 +669,7 @@ export class TreeStore { const currentFilter = config.filter; // 当前没有过滤器 // 则无需处理锁定节点 - if (!currentFilter || typeof currentFilter !== 'function') return; + if (!currentFilter || !isFunction(currentFilter)) return; if (currentFilter(this.nullNodeModel)) return; diff --git a/js/upload/main.ts b/js/upload/main.ts index 916bbae55b..8d208dd9a9 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -1,3 +1,5 @@ +import isFunction from 'lodash/isFunction'; +import isNumber from 'lodash/isNumber'; /* eslint-disable no-param-reassign */ import { isOverSizeLimit } from './utils'; import xhr from './xhr'; @@ -32,7 +34,7 @@ export function handleBeforeUpload( const sizePromise = new Promise((resolve) => { let result: SizeLimitObj = null; if (sizeLimit) { - const sizeLimitObj: SizeLimitObj = typeof sizeLimit === 'number' + const sizeLimitObj: SizeLimitObj = isNumber(sizeLimit) ? { size: sizeLimit, unit: 'KB' } : sizeLimit; const limit = isOverSizeLimit(file.size, sizeLimitObj.size, sizeLimitObj.unit); @@ -45,7 +47,7 @@ export function handleBeforeUpload( // 自定义校验 const promiseList: BeforeUploadPromiseList = [sizePromise, undefined]; - if (typeof beforeUpload === 'function') { + if (isFunction(beforeUpload)) { const r = beforeUpload(file); const p = r instanceof Promise ? r : (new Promise((resolve) => resolve(r))); promiseList[1] = p; @@ -69,7 +71,7 @@ export function handleError(options: OnErrorParams) { file.status = 'fail'; }); let res = response; - if (typeof formatResponse === 'function') { + if (isFunction(formatResponse)) { res = formatResponse(response, { file: files[0], currentFiles: files }); } return { response: res, event, files, XMLHttpRequest }; @@ -180,7 +182,7 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { const { formatResponse } = params; let res = p.response; - if (typeof formatResponse === 'function') { + if (isFunction(formatResponse)) { res = formatResponse(p.response, { file: p.file, currentFiles: p.files, @@ -277,7 +279,7 @@ export function formatToUploadFile( ) { return files.map((fileRaw: File) => { let file: UploadFile = fileRaw; - if (typeof format === 'function') { + if (isFunction(format)) { file = format(fileRaw); } const uploadFile: UploadFile = { diff --git a/js/upload/xhr.ts b/js/upload/xhr.ts index a580c30c58..614c3d957a 100644 --- a/js/upload/xhr.ts +++ b/js/upload/xhr.ts @@ -1,3 +1,4 @@ +import isFunction from 'lodash/isFunction'; /* eslint-disable no-param-reassign */ import log from '../log/log'; import { UploadFile, XhrOptions } from './types'; @@ -58,7 +59,7 @@ export default function xhr({ let requestData: { [key: string]: any } = {}; if (data) { - const extraData = typeof data === 'function' ? data(innerFiles) : data; + const extraData = isFunction(data) ? data(innerFiles) : data; Object.assign(requestData, extraData); } innerFiles.forEach((file, index) => { diff --git a/js/utils/calcTextareaHeight.ts b/js/utils/calcTextareaHeight.ts index bb51fb0dca..cc78341522 100644 --- a/js/utils/calcTextareaHeight.ts +++ b/js/utils/calcTextareaHeight.ts @@ -1,3 +1,4 @@ +import isNull from 'lodash/isNull'; import { calculateNodeSize } from './helper'; type CalculateStyleType = { @@ -66,12 +67,12 @@ function calcTextareaHeight( return rowsHeight; }; - if (minRows !== null) { + if (!isNull(minRows)) { const minHeight = calcHeight(minRows); height = Math.max(minHeight, height); result.minHeight = `${minHeight}px`; } - if (maxRows !== null) { + if (!isNull(maxRows)) { height = Math.min(calcHeight(maxRows), height); } result.height = `${height}px`; diff --git a/js/utils/helper.ts b/js/utils/helper.ts index 7deab1c736..3702b0a530 100644 --- a/js/utils/helper.ts +++ b/js/utils/helper.ts @@ -1,3 +1,9 @@ +import isString from 'lodash/isString'; +import isNull from 'lodash/isNull'; +import isUndefined from 'lodash/isUndefined'; +import isNumber from 'lodash/isNumber'; +import isArray from 'lodash/isArray'; + export function omit(obj: object, fields: string[]): object { const shallowCopy = { ...obj, @@ -13,7 +19,7 @@ export function removeEmptyAttrs(obj: T): Partial { const newObj = {}; Object.keys(obj).forEach((key) => { - if (typeof obj[key] !== 'undefined' || obj[key] === null) { + if (!isUndefined(obj[key]) || isNull(obj[key])) { newObj[key] = obj[key]; } }); @@ -37,10 +43,10 @@ export type Gradients = { [percent: string]: string }; export type FromTo = { from: string; to: string }; export type LinearGradient = { direction?: string } & (Gradients | FromTo); export function getBackgroundColor(color: string | string[] | LinearGradient): string { - if (typeof color === 'string') { + if (isString(color)) { return color; } - if (Array.isArray(color)) { + if (isArray(color)) { if (color[0] && color[0][0] === '#') { color.unshift('90deg'); } @@ -95,7 +101,7 @@ export function getIEVersion() { * @returns 当没有传入maxCharacter时返回字符串字符长度，当传入maxCharacter时返回截取之后的字符串和长度。 */ export function getCharacterLength(str: string, maxCharacter?: number) { - const hasMaxCharacter = typeof maxCharacter === 'number'; + const hasMaxCharacter = isNumber(maxCharacter); if (!str || str.length === 0) { if (hasMaxCharacter) { return { @@ -166,7 +172,7 @@ export function limitUnicodeMaxLength( * @returns 可使用的样式值。 */ export function pxCompat(param: string | number) { - return typeof param === 'number' ? `${param}px` : param; + return isNumber(param) ? `${param}px` : param; } /** diff --git a/js/watermark/generateBase64Url.ts b/js/watermark/generateBase64Url.ts index 69ed159b88..965ca0bdfa 100644 --- a/js/watermark/generateBase64Url.ts +++ b/js/watermark/generateBase64Url.ts @@ -89,7 +89,7 @@ export default function generateBase64Url({ item.top = top; top += lineSpace; const markSize = Number(fontSize) * ratio; - // TODO 后续完善font 渲染控制 目前font-family 暂时为 undefiend + // TODO 后续完善font 渲染控制 目前font-family 暂时为 undefined ctx.font = `normal normal ${fontWeight} ${markSize}px/${markHeight}px undefined`; ctx.textAlign = 'start'; ctx.textBaseline = 'top'; diff --git a/package.json b/package.json index 5fee817951..dd2ff68c00 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,9 @@ "main": "", "scripts": { "lint": "npm run lint:css && npm run lint:js", - "lint:css": "stylelint **/*.{css,wxss,less} --allow-empty-input", - "lint:js": "npx eslint . --max-warnings 0 && npx eslint ./js/**/*.* --max-warnings 0", - "lint:fix": "stylelint **/*.{css,wxss,less} --allow-empty-input --fix && npx eslint . --max-warnings 0 --fix", + "lint:css": "stylelint **/*.{css,wxss,less} --allow-empty-input --cache", + "lint:js": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 --cache", + "lint:fix": "npm run lint:css --fix && npm run lint:js --fix", "test": "npm run test:unit", "test:unit": "jest --config test/script/jest.unit.conf.js --coverage", "test:watch": "jest --config test/script/jest.unit.conf.js --watch", From 7ccece890461b21a29975ed19f48371e76ab2217 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 21 Feb 2023 10:17:59 +0800 Subject: [PATCH 171/312] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91=20(#1151?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 调整滚动条计算逻辑 * feat: 调整滚动条计算逻辑 --- js/utils/getScrollbarWidth.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/js/utils/getScrollbarWidth.ts b/js/utils/getScrollbarWidth.ts index 3e2707391d..463c51637f 100644 --- a/js/utils/getScrollbarWidth.ts +++ b/js/utils/getScrollbarWidth.ts @@ -16,7 +16,7 @@ */ import { getIEVersion } from './helper'; -export default function getScrollbarWidth() { +export function getScrollbarWidthWithCSS() { const defaultScrollbarWidth = 6; if (!navigator) return defaultScrollbarWidth; if (/(Chrome|Safari)/i.test(navigator.userAgent)) return defaultScrollbarWidth; @@ -34,3 +34,13 @@ export default function getScrollbarWidth() { } return scrollbarWidth; } + +// 获取 body 下滚动条宽度 +export function getScrollbarWidth() { + const scrollDiv = document.createElement('div'); + scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; + document.body.appendChild(scrollDiv); + const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + document.body.removeChild(scrollDiv); + return scrollbarWidth; +} From a951ac6c181a6c64f37a6b2e6288d79d0fc0907b Mon Sep 17 00:00:00 2001 From: PY Date: Tue, 21 Feb 2023 14:16:49 +0800 Subject: [PATCH 172/312] fix: nuxt ssr error (#1148) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复ssr环境下的报错 * fix: pagination nxut error * fix: nuxt error * fix: nuxt error --- js/loading/circle-adapter.ts | 2 +- js/utils/getScrollbarWidth.ts | 2 +- js/utils/helper.ts | 11 ++++++++++- js/utils/observe.ts | 1 + 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/js/loading/circle-adapter.ts b/js/loading/circle-adapter.ts index 5771209614..18546be12f 100644 --- a/js/loading/circle-adapter.ts +++ b/js/loading/circle-adapter.ts @@ -4,7 +4,7 @@ import { getIEVersion } from '../utils/helper'; export default function circleAdapter(circleElem: HTMLElement) { let basicStyle = {}; - if (!circleElem) { + if (!circleElem || typeof window === 'undefined') { return; } diff --git a/js/utils/getScrollbarWidth.ts b/js/utils/getScrollbarWidth.ts index 463c51637f..7d1c0f13f3 100644 --- a/js/utils/getScrollbarWidth.ts +++ b/js/utils/getScrollbarWidth.ts @@ -18,7 +18,7 @@ import { getIEVersion } from './helper'; export function getScrollbarWidthWithCSS() { const defaultScrollbarWidth = 6; - if (!navigator) return defaultScrollbarWidth; + if (typeof navigator === 'undefined' || !navigator) return defaultScrollbarWidth; if (/(Chrome|Safari)/i.test(navigator.userAgent)) return defaultScrollbarWidth; const scrollDiv = document.createElement('div'); scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; diff --git a/js/utils/helper.ts b/js/utils/helper.ts index 3702b0a530..c3c99827d7 100644 --- a/js/utils/helper.ts +++ b/js/utils/helper.ts @@ -72,7 +72,7 @@ export function getBackgroundColor(color: string | string[] | LinearGradient): s * @returns 获取 ie 浏览器版本 */ export function getIEVersion() { - if (!navigator) return Number.MAX_SAFE_INTEGER; + if (typeof navigator === 'undefined' || !navigator) return Number.MAX_SAFE_INTEGER; const { userAgent } = navigator; // 判断是否IE<11浏览器 @@ -200,6 +200,15 @@ const DOM_STYLE_PROPS = [ ]; export function calculateNodeSize(targetElement: HTMLElement) { + if (typeof window === 'undefined') { + return { + paddingSize: 0, + borderSize: 0, + boxSizing: 0, + sizingStyle: '', + }; + } + const style = window.getComputedStyle(targetElement); const boxSizing = style.getPropertyValue('box-sizing') diff --git a/js/utils/observe.ts b/js/utils/observe.ts index 25a544a390..918432b484 100644 --- a/js/utils/observe.ts +++ b/js/utils/observe.ts @@ -4,6 +4,7 @@ export default function observe( callback: Function, marginBottom: number, ): IntersectionObserver { + if (typeof window === 'undefined') return null; if (!window || !window.IntersectionObserver) { callback(); return null; From ec1c298355a50bb4b61b7e489641352eeca69a3b Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Tue, 21 Feb 2023 16:05:11 +0800 Subject: [PATCH 173/312] fix: lint:fix (#1149) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dd2ff68c00..b278cb0d5d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "lint": "npm run lint:css && npm run lint:js", "lint:css": "stylelint **/*.{css,wxss,less} --allow-empty-input --cache", "lint:js": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 --cache", - "lint:fix": "npm run lint:css --fix && npm run lint:js --fix", + "lint:fix": "npm run lint:css -- --fix && npm run lint:js -- --fix", "test": "npm run test:unit", "test:unit": "jest --config test/script/jest.unit.conf.js --coverage", "test:watch": "jest --config test/script/jest.unit.conf.js --watch", From 115bf4cd42e4bad38a5e4637a2e58e4147f4a912 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 21 Feb 2023 16:38:21 +0800 Subject: [PATCH 174/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dbutton=20block?= =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=85=88=E7=BA=A7=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#1152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/button/_index.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index 4a112cf54c..02a5251c3d 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -301,11 +301,6 @@ .button-size(@btn-height-l , @btn-font-l, @btn-icon-size-l, @btn-padding-horizontal-l); } - &.@{prefix}-size-full-width { - display: flex; - width: 100%; - } - &--shape-square { width: @btn-height-default; padding: 0; @@ -358,6 +353,11 @@ border-radius: @btn-shape-border-radius-l; } } + + &.@{prefix}-size-full-width { + display: flex; + width: 100%; + } } .@{prefix}-button--ghost { From 760156c445e3e2d16d58bffa4943607692fcfc99 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 21 Feb 2023 17:27:44 +0800 Subject: [PATCH 175/312] fix(tabs): icon style range (#1153) --- style/web/components/tabs/_index.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style/web/components/tabs/_index.less b/style/web/components/tabs/_index.less index f84b3e556e..e7bc867b35 100644 --- a/style/web/components/tabs/_index.less +++ b/style/web/components/tabs/_index.less @@ -14,10 +14,6 @@ overflow: hidden; background-color: @tab-default-bg; - .t-icon { - font-size: @tab-icon-size; - } - &__header { &.@{prefix}-is-left { float: left; @@ -26,6 +22,10 @@ &.@{prefix}-is-right { float: right; } + + .t-icon { + font-size: @tab-icon-size; + } } &__nav { From 10f5510592b65e77456a885e278554aefc40f107 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Thu, 23 Feb 2023 15:23:53 +0800 Subject: [PATCH 176/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddialog=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20(#1155)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/dialog/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index b7f3283b9d..d15e486ca0 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -252,7 +252,6 @@ // 因为内容会超出 使用flex布局 display: flex; justify-content: center; - min-height: 100%; width: 100%; // 通过修改position为absolute进行拖拽定位 position: relative; From e47ab5627d6ee04064e22716f30947c6c12e8ab9 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 27 Feb 2023 16:15:38 +0800 Subject: [PATCH 177/312] feat(image): support .avif (#1161) --- docs/web/api/image.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/web/api/image.md b/docs/web/api/image.md index 17904ab38e..f002acf5fc 100644 --- a/docs/web/api/image.md +++ b/docs/web/api/image.md @@ -64,8 +64,14 @@ placeholder 在图像加载时占位显示。 {{ extra-always }} -#### hover 显示 +#### 悬浮显示 -默认不显示悬浮层，hover 到图片区域后悬浮层出现。 +默认不显示悬浮层，鼠标悬浮到图片区域后悬浮层出现。 -{{ extra-hover }} \ No newline at end of file +{{ extra-hover }} + +### 支持 `avif` 和 `webp` 格式的图片 + +支持使用 `srcset` 设置特殊格式的图片渲染，如 `.avif` 和 `.webp`。 + +{{ avif }} From f9ba7219e5ffc0194975fd6a0c93d26b96f229e0 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 27 Feb 2023 23:13:14 +0800 Subject: [PATCH 178/312] docs(miniprogram): update design docs (#1160) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 新增mobile 设计指南 & miniprogram 设计指南文档 * Update 按钮Button.md * Update 按钮Button.md * Update 按钮Button.md * Update 按钮Button.md * Update 按钮Button.md * Create 动作面板ActionSheet.md * Create 悬浮按钮fab.md * Update 悬浮按钮fab.md * Create 分割线divider.md * Create 抽屉drawer.md * Rename 抽屉drawer.md to 抽屉Drawer.md * Rename 悬浮按钮fab.md to 悬浮按钮Fab.md * Rename 分割线divider.md to 分割线Divider.md * Create 底部标签栏TabBar.md * Create 选项卡Tabs.md * Create 图片Image.md * Update and rename 底部标签栏TabBar.md to 标签栏TabBar.md * Create 图片预览ImageViewer.md * Create 单选框Radio.md * Create 多选框Checkbox.md * Create 滑动选择器Slider.md * Update 动作面板ActionSheet.md * Update 动作面板ActionSheet.md * Update 动作面板ActionSheet.md * Update 动作面板ActionSheet.md * Update 动作面板ActionSheet.md * Update 悬浮按钮Fab.md * Update 分割线Divider.md * Update 动作面板ActionSheet.md * Update 动作面板ActionSheet.md * Update 按钮Button.md * Update 按钮Button.md * Update 动作面板ActionSheet.md * Update 悬浮按钮Fab.md * Update 悬浮按钮Fab.md * Update 悬浮按钮Fab.md * Update 悬浮按钮Fab.md * Update 按钮Button.md * docs: update design docs * Update 按钮Button.md * Update 按钮Button.md * Update 分割线Divider.md * Update 悬浮按钮Fab.md * Update 动作面板ActionSheet.md * Rename 分割线Divider.md to Divider.md * Update Divider.md * Rename 动作面板ActionSheet.md to ActionSheet.md * Rename 单选框Radio.md to Radio.md * Update and rename 图片Image.md to Image.md * Update Image.md * Update Image.md * Update 多选框Checkbox.md * Rename 多选框Checkbox.md to Checkbox.md * Update 图片预览ImageViewer.md * Rename 图片预览ImageViewer.md to ImageViewer.md * Update Radio.md * Rename 悬浮按钮Fab.md to Fab.md * Rename 按钮Button.md to Button.md * Update and rename 滑动选择器Slider.md to Slider.md * Update 标签栏TabBar.md * Rename 标签栏TabBar.md to TabBar.md * Update ImageViewer.md * Update ImageViewer.md * Update and rename 选项卡Tabs.md to Tabs.md * Update Tabs.md * Update Tabs.md * Update and rename 抽屉Drawer.md to Drawer.md * Update Button.md * Update Checkbox.md * Update Drawer.md * Update Fab.md * Update Image.md * Update ImageViewer.md * Update Radio.md * Update Slider.md * Update TabBar.md * Update Tabs.md * Update ActionSheet.md * Update Slider.md * Update Tabs.md * Update ImageViewer.md * Create Dialog.md * Update Button.md * Create PullDownRefresh.md * Update PullDownRefresh.md * Update PullDownRefresh.md * docs: update design docs * Update PullDownRefresh.md * Update Checkbox.md * Update Dialog.md --------- Co-authored-by: HQ-Lin Co-authored-by: caixuan29 <96420688+caixuan29@users.noreply.github.com> Co-authored-by: pageee1021 <94840745+pageee1021@users.noreply.github.com> Co-authored-by: eugegewu <103838357+eugenewoody@users.noreply.github.com> --- docs/miniprogram/_design/ActionSheet.md | 75 ++++ docs/miniprogram/_design/Button.md | 86 ++++ docs/miniprogram/_design/Checkbox.md | 59 +++ docs/miniprogram/_design/Dialog.md | 69 +++ docs/miniprogram/_design/Divider.md | 55 +++ docs/miniprogram/_design/Drawer.md | 61 +++ docs/miniprogram/_design/Fab.md | 88 ++++ docs/miniprogram/_design/Image.md | 61 +++ docs/miniprogram/_design/ImageViewer.md | 45 ++ docs/miniprogram/_design/PullDownRefresh.md | 59 +++ docs/miniprogram/_design/Radio.md | 64 +++ docs/miniprogram/_design/Slider.md | 62 +++ docs/miniprogram/_design/TabBar.md | 83 ++++ docs/miniprogram/_design/Tabs.md | 114 +++++ docs/miniprogram/_design/gen-design-docs.js | 38 ++ docs/miniprogram/design/action-sheet.md | 73 +++ docs/miniprogram/design/button.md | 84 ++++ docs/miniprogram/design/checkbox.md | 57 +++ docs/miniprogram/design/dialog.md | 67 +++ docs/miniprogram/design/divider.md | 53 +++ docs/miniprogram/design/drawer.md | 59 +++ docs/miniprogram/design/fab.md | 86 ++++ docs/miniprogram/design/image-viewer.md | 43 ++ docs/miniprogram/design/image.md | 59 +++ docs/miniprogram/design/pull-down-refresh.md | 57 +++ docs/miniprogram/design/radio.md | 62 +++ docs/miniprogram/design/slider.md | 60 +++ docs/miniprogram/design/tab-bar.md | 81 ++++ docs/miniprogram/design/tabs.md | 112 +++++ docs/miniprogram/overview.md | 420 ++++++++++++++++++ .../\346\214\211\351\222\256Button.md" | 80 ++++ docs/mobile/design/button.md | 2 + 32 files changed, 2474 insertions(+) create mode 100644 docs/miniprogram/_design/ActionSheet.md create mode 100644 docs/miniprogram/_design/Button.md create mode 100644 docs/miniprogram/_design/Checkbox.md create mode 100644 docs/miniprogram/_design/Dialog.md create mode 100644 docs/miniprogram/_design/Divider.md create mode 100644 docs/miniprogram/_design/Drawer.md create mode 100644 docs/miniprogram/_design/Fab.md create mode 100644 docs/miniprogram/_design/Image.md create mode 100644 docs/miniprogram/_design/ImageViewer.md create mode 100644 docs/miniprogram/_design/PullDownRefresh.md create mode 100644 docs/miniprogram/_design/Radio.md create mode 100644 docs/miniprogram/_design/Slider.md create mode 100644 docs/miniprogram/_design/TabBar.md create mode 100644 docs/miniprogram/_design/Tabs.md create mode 100644 docs/miniprogram/_design/gen-design-docs.js create mode 100644 docs/miniprogram/design/action-sheet.md create mode 100644 docs/miniprogram/design/button.md create mode 100644 docs/miniprogram/design/checkbox.md create mode 100644 docs/miniprogram/design/dialog.md create mode 100644 docs/miniprogram/design/divider.md create mode 100644 docs/miniprogram/design/drawer.md create mode 100644 docs/miniprogram/design/fab.md create mode 100644 docs/miniprogram/design/image-viewer.md create mode 100644 docs/miniprogram/design/image.md create mode 100644 docs/miniprogram/design/pull-down-refresh.md create mode 100644 docs/miniprogram/design/radio.md create mode 100644 docs/miniprogram/design/slider.md create mode 100644 docs/miniprogram/design/tab-bar.md create mode 100644 docs/miniprogram/design/tabs.md create mode 100644 docs/miniprogram/overview.md create mode 100644 "docs/mobile/_design/\346\214\211\351\222\256Button.md" create mode 100644 docs/mobile/design/button.md diff --git a/docs/miniprogram/_design/ActionSheet.md b/docs/miniprogram/_design/ActionSheet.md new file mode 100644 index 0000000000..e97342cf09 --- /dev/null +++ b/docs/miniprogram/_design/ActionSheet.md @@ -0,0 +1,75 @@ +# 动作面板 ActionSheet + +## 组件设计指南 + +### 何时使用 + +需要提供一组与当前场景操作相关的关联操作时使用。 + +### 组件搭配使用 + +##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。 + +
    + +
    + + +
    + +### 常见用法 +##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
    + +
    + +##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发 + +
    + +
    + + +
    + +### 推荐/慎用示例 + +##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。 + +
    +
    + + +
    + +
    + + +
    +
    + +##### 动作面板中的操作项不建议用icon完成替代文字。 + +
    +
    + + +
    + + +
    + + +
    +
    + + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | diff --git a/docs/miniprogram/_design/Button.md b/docs/miniprogram/_design/Button.md new file mode 100644 index 0000000000..4a6e7a275f --- /dev/null +++ b/docs/miniprogram/_design/Button.md @@ -0,0 +1,86 @@ +# 按钮 Button + +## 组件设计指南 + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
    +
    + + +
    +
    + +
    + +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
    +
    + + +
    + +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    + +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
    +
    + + +
    +
    + + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。 + +
    +
    + + +
    + +
    + + +
    +
    + + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | +| [返回顶部](./backtop) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/_design/Checkbox.md b/docs/miniprogram/_design/Checkbox.md new file mode 100644 index 0000000000..2eaecd586b --- /dev/null +++ b/docs/miniprogram/_design/Checkbox.md @@ -0,0 +1,59 @@ +# 多选框 Checkbox + +## 组件设计指南 + +### 何时使用 + +当用户需要从一组数据选择多个选项时使用。 + +### 组件搭配使用 + +##### 多选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + +
    +
    + +
    + +
    + +
    +
    +
    + + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。 + +
    + + +
    + +
    + + +
    + + +
    + +##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 + + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 | diff --git a/docs/miniprogram/_design/Dialog.md b/docs/miniprogram/_design/Dialog.md new file mode 100644 index 0000000000..27d9224698 --- /dev/null +++ b/docs/miniprogram/_design/Dialog.md @@ -0,0 +1,69 @@ +# 对话框 Dialog + +## 组件设计指南 + +### 何时使用 + +需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。 + +### 组件搭配使用 + +##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。 + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + +### 常见用法 + +##### 用于较为重要的信息提示。 + +
    +
    + +
    +
    + +##### 用于较为重要的信息提示，且需要用户决定。 + +
    +
    + + +
    +
    + + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。 + +
    +
    + + +
    + +
    + + +
    +
    + + diff --git a/docs/miniprogram/_design/Divider.md b/docs/miniprogram/_design/Divider.md new file mode 100644 index 0000000000..4e0df6d027 --- /dev/null +++ b/docs/miniprogram/_design/Divider.md @@ -0,0 +1,55 @@ +# 分割线 Divider + +## 组件设计指南 + +### 何时使用 + +为了区分内容与内容之间的分组、层级关系时可使用。 + +### 与页面布局相关 + +##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。 + +
    +
    + + +
    +
    + + +##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 + +
    +
    + + +
    +
    + +##### 组合分割线：通栏分割线与内嵌分割线组合布局。 + +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。 + +
    +
    + + +
    + +
    + + +
    +
    diff --git a/docs/miniprogram/_design/Drawer.md b/docs/miniprogram/_design/Drawer.md new file mode 100644 index 0000000000..7297e8b840 --- /dev/null +++ b/docs/miniprogram/_design/Drawer.md @@ -0,0 +1,61 @@ +# 抽屉 Drawer + +## 组件设计指南 + +### 何时使用 + +需要收折展示一组数量较多的菜单时使用。 + +### 组件搭配使用 + +##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。 + +
    + +
    + +
    + +### 常见用法 + +##### 在网站场景，通常用来收折展示整个网站的菜单导航。 + +
    + +
    + +
    + +##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。 + +
    + +
    + +
    + +### 推荐/慎用示例 + +##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [动作面板](./actionsheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | diff --git a/docs/miniprogram/_design/Fab.md b/docs/miniprogram/_design/Fab.md new file mode 100644 index 0000000000..bff833178f --- /dev/null +++ b/docs/miniprogram/_design/Fab.md @@ -0,0 +1,88 @@ +# 悬浮按钮 Fab + +## 组件设计指南 + +### 何时使用 + +当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 + +### 与页面布局相关 + +##### 为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    +
    + + +
    +
    + + + +
    + +### 组件搭配使用 + +##### 悬浮按钮与[动作面板](./actionsheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
    + + +
    +
    + +### 推荐/慎用示例 + +##### 通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。 + +
    +
    + + +
    + +
    + + +
    +
    + + +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | +| [返回顶部](./backtop ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | + diff --git a/docs/miniprogram/_design/Image.md b/docs/miniprogram/_design/Image.md new file mode 100644 index 0000000000..91939044da --- /dev/null +++ b/docs/miniprogram/_design/Image.md @@ -0,0 +1,61 @@ +# 图片 Image + +## 组件设计指南 + +### 何时使用 + +当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 + +### 组件搭配使用 + +##### 可使用[宫格](./grid)、[单元格](./cell)承载图片，作为某种功能、某类信息的入口。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 图片与[下拉刷新](./pulldownrefresh)组合使用，用于图片瀑布流时的内容更新。 + +
    +
    + +
    +
    + + +
    + + +### 推荐/慎用示例 + +##### 当图片仅为展示，不具备预览功能时，应避免图片尺寸过小，从而影响图像信息的浏览和获取。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片预览](./imageviewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | diff --git a/docs/miniprogram/_design/ImageViewer.md b/docs/miniprogram/_design/ImageViewer.md new file mode 100644 index 0000000000..fe4cf2105d --- /dev/null +++ b/docs/miniprogram/_design/ImageViewer.md @@ -0,0 +1,45 @@ +# 图片预览 ImageViewer + +## 组件设计指南 + +### 何时使用 + +当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 + +### 组件搭配使用 + +##### 图片预览与[图片](./image)组合使用，通过图片作为缩略图，点击后进行图片预览。 + +
    + +
    + +
    + +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./actionsheet)组合使用，对删除操作进行二次确认。 + +
    + +
    + +
    + + +### 推荐/慎用示例 + +##### 在可点击进入详情的卡片入口中，不建议针对图片添加图片预览能力。 + +
    + + +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片](./image) | 当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 | diff --git a/docs/miniprogram/_design/PullDownRefresh.md b/docs/miniprogram/_design/PullDownRefresh.md new file mode 100644 index 0000000000..fe7aabcb1d --- /dev/null +++ b/docs/miniprogram/_design/PullDownRefresh.md @@ -0,0 +1,59 @@ +# 下拉刷新 PullDownRefresh + +## 组件设计指南 + +### 何时使用 + +当需要对页面信息进行整体刷新或加载更多同类信息时使用。 + +### 与页面布局相关 + +##### 下拉刷新位于内容最上方；通常在页面最顶部或者选项卡、吸顶模块之下。 + +
    + +
    + +
    + +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    + + +### 常见用法 + +##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。 + +
    +
    + +
    +
    + +##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。 + +
    +
    + + +
    +
    + + +
    +
    + +
    diff --git a/docs/miniprogram/_design/Radio.md b/docs/miniprogram/_design/Radio.md new file mode 100644 index 0000000000..02414adca4 --- /dev/null +++ b/docs/miniprogram/_design/Radio.md @@ -0,0 +1,64 @@ +# 单选框 Radio + +## 组件设计指南 + +### 何时使用 + +当用户需要从一组数据选择一个选项时使用。 + +### 组件搭配使用 + +##### 单选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + + +
    +
    + +
    + +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不太建议用单选框触发一个弹窗。 + +
    + + +
    + +
    + + +
    + +
    + +##### 不建议用单选框开启/关闭一个功能，建议使用开关组件。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [多选框](./checkbox) | 当用户需要从一组数据选择多个选项时使用。 | diff --git a/docs/miniprogram/_design/Slider.md b/docs/miniprogram/_design/Slider.md new file mode 100644 index 0000000000..82ac2b5592 --- /dev/null +++ b/docs/miniprogram/_design/Slider.md @@ -0,0 +1,62 @@ +# 滑动选择器 Slider + +## 组件设计指南 + +### 何时使用 + +当用户需要快捷地进行数值/程度选择时使用。 + +### 组件搭配使用 + +##### 滑动选择器与[单元格](./cell)组合使用，单元格作为承载滑动选择器的容器。 + +
    +
    + +
    +
    + + +
    + +### 常见用法 + +##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 + +
    +
    + +
    +
    + +##### 用于难以量化的对立数据，以此表示程度。 + +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 当有多个刻度区间时，避免区间数值不一致，造成滑动调整不准确。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + diff --git a/docs/miniprogram/_design/TabBar.md b/docs/miniprogram/_design/TabBar.md new file mode 100644 index 0000000000..ce2022c539 --- /dev/null +++ b/docs/miniprogram/_design/TabBar.md @@ -0,0 +1,83 @@ +# 标签栏 TabBar + +## 组件设计指南 + +### 何时使用 + +目标模块/视图需要从应用的任何地方直接进行访问时使用。 + +### 组件搭配使用 + +##### 标签栏与[徽标](./adge)组合使用，用于告知用户该模块/视图的状态变化。 + +
    +
    + +
    + +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 避免在同个状态下有不同颜色的文本和图标。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 文本是对标签的简要说明，不建议将文本进行截断或换行，所以应避免使用长文本。 + +
    +
    + + +
    +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/Tabs.md b/docs/miniprogram/_design/Tabs.md new file mode 100644 index 0000000000..38942bff64 --- /dev/null +++ b/docs/miniprogram/_design/Tabs.md @@ -0,0 +1,114 @@ +# 选项卡 Tabs + +## 组件设计指南 + +### 何时使用 + +当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 + +
    +
    + +
    + +
    + +
    +
    +
    + +### 组件搭配使用 + +##### 选项卡与[徽标](./badge)组合使用，用于展示户该分类的状态变化或营销信息。 + +
    +
    + +
    +
    + + +
    + + +### 常见用法 + +##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 + +
    +
    + +
    + +
    + +
    +
    + +
    +
    + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 不建议使用选项卡来实现功能模块间的切换。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 建议文本简明扼要，不建议将文本进行截断或换行；若需要使用较长文本，建议使用等距选项卡。 + +
    + + +
    + +
    + + +
    + +
    + +##### 尽量避免使用多个选项卡进行嵌套，若使用，建议避免使用相同样式进行嵌套；一般情况下选项卡内的信息需要进一步分类，建议使用下拉菜单或标签进行选择过滤。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [底部标签栏](./tabbar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 。 | diff --git a/docs/miniprogram/_design/gen-design-docs.js b/docs/miniprogram/_design/gen-design-docs.js new file mode 100644 index 0000000000..d7fa00cf77 --- /dev/null +++ b/docs/miniprogram/_design/gen-design-docs.js @@ -0,0 +1,38 @@ +const fs = require('fs'); +const path = require('path'); + +const list = []; + +function listFile(dir) { + const arr = fs.readdirSync(dir); + arr.forEach((item) => { + const fullpath = path.join(dir, item); + const stats = fs.statSync(fullpath); + if (stats.isDirectory()) { + listFile(fullpath); + } else { + list.push(fullpath); + } + }); + return list; +} + +const docs = listFile(path.join(__dirname, './')); + +function canmelCase(name) { + let [str] = name.match(/[a-zA-Z]+/); + str = str.replace(str[0], str[0].toLowerCase()); + str = str.replace(/([A-Z])/g, '-$1').toLowerCase(); + return str; +} + +docs.forEach((doc) => { + if (doc.includes('gen-design-docs.js')) return; + const fileName = canmelCase(path.basename(doc)); + const data = fs.readFileSync(doc, 'utf-8').toString(); + let [, designContent] = data.split('## 组件设计指南'); + if (!designContent || fileName === 'gen') return; + + designContent = `${designContent}`; + fs.writeFileSync(path.join(__dirname, `../design/${fileName}.md`), designContent); +}); diff --git a/docs/miniprogram/design/action-sheet.md b/docs/miniprogram/design/action-sheet.md new file mode 100644 index 0000000000..28d6f7335c --- /dev/null +++ b/docs/miniprogram/design/action-sheet.md @@ -0,0 +1,73 @@ + + +### 何时使用 + +需要提供一组与当前场景操作相关的关联操作时使用。 + +### 组件搭配使用 + +##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。 + +
    + +
    + + +
    + +### 常见用法 +##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
    + +
    + +##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发 + +
    + +
    + + +
    + +### 推荐/慎用示例 + +##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。 + +
    +
    + + +
    + +
    + + +
    +
    + +##### 动作面板中的操作项不建议用icon完成替代文字。 + +
    +
    + + +
    + + +
    + + +
    +
    + + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | diff --git a/docs/miniprogram/design/button.md b/docs/miniprogram/design/button.md new file mode 100644 index 0000000000..69084c4b84 --- /dev/null +++ b/docs/miniprogram/design/button.md @@ -0,0 +1,84 @@ + + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
    +
    + + +
    +
    + +
    + +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
    +
    + + +
    + +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    + +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
    +
    + + +
    +
    + + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。 + +
    +
    + + +
    + +
    + + +
    +
    + + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | +| [返回顶部](./backtop) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/design/checkbox.md b/docs/miniprogram/design/checkbox.md new file mode 100644 index 0000000000..992f4f83e8 --- /dev/null +++ b/docs/miniprogram/design/checkbox.md @@ -0,0 +1,57 @@ + + +### 何时使用 + +当用户需要从一组数据选择多个选项时使用。 + +### 组件搭配使用 + +##### 多选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + +
    +
    + +
    + +
    + +
    +
    +
    + + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。 + +
    + + +
    + +
    + + +
    + + +
    + +##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 + + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 | diff --git a/docs/miniprogram/design/dialog.md b/docs/miniprogram/design/dialog.md new file mode 100644 index 0000000000..7e370cf3bc --- /dev/null +++ b/docs/miniprogram/design/dialog.md @@ -0,0 +1,67 @@ + + +### 何时使用 + +需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。 + +### 组件搭配使用 + +##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。 + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + +### 常见用法 + +##### 用于较为重要的信息提示。 + +
    +
    + +
    +
    + +##### 用于较为重要的信息提示，且需要用户决定。 + +
    +
    + + +
    +
    + + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。 + +
    +
    + + +
    + +
    + + +
    +
    + + diff --git a/docs/miniprogram/design/divider.md b/docs/miniprogram/design/divider.md new file mode 100644 index 0000000000..c598e4dd73 --- /dev/null +++ b/docs/miniprogram/design/divider.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +为了区分内容与内容之间的分组、层级关系时可使用。 + +### 与页面布局相关 + +##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。 + +
    +
    + + +
    +
    + + +##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 + +
    +
    + + +
    +
    + +##### 组合分割线：通栏分割线与内嵌分割线组合布局。 + +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。 + +
    +
    + + +
    + +
    + + +
    +
    diff --git a/docs/miniprogram/design/drawer.md b/docs/miniprogram/design/drawer.md new file mode 100644 index 0000000000..b802a36667 --- /dev/null +++ b/docs/miniprogram/design/drawer.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +需要收折展示一组数量较多的菜单时使用。 + +### 组件搭配使用 + +##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。 + +
    + +
    + +
    + +### 常见用法 + +##### 在网站场景，通常用来收折展示整个网站的菜单导航。 + +
    + +
    + +
    + +##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。 + +
    + +
    + +
    + +### 推荐/慎用示例 + +##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [动作面板](./actionsheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | diff --git a/docs/miniprogram/design/fab.md b/docs/miniprogram/design/fab.md new file mode 100644 index 0000000000..3955a23d7d --- /dev/null +++ b/docs/miniprogram/design/fab.md @@ -0,0 +1,86 @@ + + +### 何时使用 + +当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 + +### 与页面布局相关 + +##### 为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    +
    + + +
    +
    + + + +
    + +### 组件搭配使用 + +##### 悬浮按钮与[动作面板](./actionsheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
    + + +
    +
    + +### 推荐/慎用示例 + +##### 通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。 + +
    +
    + + +
    + +
    + + +
    +
    + + +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | +| [返回顶部](./backtop ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | + diff --git a/docs/miniprogram/design/image-viewer.md b/docs/miniprogram/design/image-viewer.md new file mode 100644 index 0000000000..98326bd7f1 --- /dev/null +++ b/docs/miniprogram/design/image-viewer.md @@ -0,0 +1,43 @@ + + +### 何时使用 + +当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 + +### 组件搭配使用 + +##### 图片预览与[图片](./image)组合使用，通过图片作为缩略图，点击后进行图片预览。 + +
    + +
    + +
    + +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./actionsheet)组合使用，对删除操作进行二次确认。 + +
    + +
    + +
    + + +### 推荐/慎用示例 + +##### 在可点击进入详情的卡片入口中，不建议针对图片添加图片预览能力。 + +
    + + +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片](./image) | 当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 | diff --git a/docs/miniprogram/design/image.md b/docs/miniprogram/design/image.md new file mode 100644 index 0000000000..1c5ee7d669 --- /dev/null +++ b/docs/miniprogram/design/image.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 + +### 组件搭配使用 + +##### 可使用[宫格](./grid)、[单元格](./cell)承载图片，作为某种功能、某类信息的入口。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 图片与[下拉刷新](./pulldownrefresh)组合使用，用于图片瀑布流时的内容更新。 + +
    +
    + +
    +
    + + +
    + + +### 推荐/慎用示例 + +##### 当图片仅为展示，不具备预览功能时，应避免图片尺寸过小，从而影响图像信息的浏览和获取。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片预览](./imageviewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | diff --git a/docs/miniprogram/design/pull-down-refresh.md b/docs/miniprogram/design/pull-down-refresh.md new file mode 100644 index 0000000000..07bbdc419f --- /dev/null +++ b/docs/miniprogram/design/pull-down-refresh.md @@ -0,0 +1,57 @@ + + +### 何时使用 + +当需要对页面信息进行整体刷新或加载更多同类信息时使用。 + +### 与页面布局相关 + +##### 下拉刷新位于内容最上方；通常在页面最顶部或者选项卡、吸顶模块之下。 + +
    + +
    + +
    + +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    + + +### 常见用法 + +##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。 + +
    +
    + +
    +
    + +##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。 + +
    +
    + + +
    +
    + + +
    +
    + +
    diff --git a/docs/miniprogram/design/radio.md b/docs/miniprogram/design/radio.md new file mode 100644 index 0000000000..1abb7dab43 --- /dev/null +++ b/docs/miniprogram/design/radio.md @@ -0,0 +1,62 @@ + + +### 何时使用 + +当用户需要从一组数据选择一个选项时使用。 + +### 组件搭配使用 + +##### 单选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + + +
    +
    + +
    + +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不太建议用单选框触发一个弹窗。 + +
    + + +
    + +
    + + +
    + +
    + +##### 不建议用单选框开启/关闭一个功能，建议使用开关组件。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [多选框](./checkbox) | 当用户需要从一组数据选择多个选项时使用。 | diff --git a/docs/miniprogram/design/slider.md b/docs/miniprogram/design/slider.md new file mode 100644 index 0000000000..02820dd5ae --- /dev/null +++ b/docs/miniprogram/design/slider.md @@ -0,0 +1,60 @@ + + +### 何时使用 + +当用户需要快捷地进行数值/程度选择时使用。 + +### 组件搭配使用 + +##### 滑动选择器与[单元格](./cell)组合使用，单元格作为承载滑动选择器的容器。 + +
    +
    + +
    +
    + + +
    + +### 常见用法 + +##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 + +
    +
    + +
    +
    + +##### 用于难以量化的对立数据，以此表示程度。 + +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 当有多个刻度区间时，避免区间数值不一致，造成滑动调整不准确。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + diff --git a/docs/miniprogram/design/tab-bar.md b/docs/miniprogram/design/tab-bar.md new file mode 100644 index 0000000000..d1e23aacab --- /dev/null +++ b/docs/miniprogram/design/tab-bar.md @@ -0,0 +1,81 @@ + + +### 何时使用 + +目标模块/视图需要从应用的任何地方直接进行访问时使用。 + +### 组件搭配使用 + +##### 标签栏与[徽标](./adge)组合使用，用于告知用户该模块/视图的状态变化。 + +
    +
    + +
    + +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 避免在同个状态下有不同颜色的文本和图标。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 文本是对标签的简要说明，不建议将文本进行截断或换行，所以应避免使用长文本。 + +
    +
    + + +
    +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/design/tabs.md b/docs/miniprogram/design/tabs.md new file mode 100644 index 0000000000..8ce0dfa141 --- /dev/null +++ b/docs/miniprogram/design/tabs.md @@ -0,0 +1,112 @@ + + +### 何时使用 + +当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 + +
    +
    + +
    + +
    + +
    +
    +
    + +### 组件搭配使用 + +##### 选项卡与[徽标](./badge)组合使用，用于展示户该分类的状态变化或营销信息。 + +
    +
    + +
    +
    + + +
    + + +### 常见用法 + +##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 + +
    +
    + +
    + +
    + +
    +
    + +
    +
    + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 不建议使用选项卡来实现功能模块间的切换。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 建议文本简明扼要，不建议将文本进行截断或换行；若需要使用较长文本，建议使用等距选项卡。 + +
    + + +
    + +
    + + +
    + +
    + +##### 尽量避免使用多个选项卡进行嵌套，若使用，建议避免使用相同样式进行嵌套；一般情况下选项卡内的信息需要进一步分类，建议使用下拉菜单或标签进行选择过滤。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [底部标签栏](./tabbar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 。 | diff --git a/docs/miniprogram/overview.md b/docs/miniprogram/overview.md new file mode 100644 index 0000000000..86f965a6be --- /dev/null +++ b/docs/miniprogram/overview.md @@ -0,0 +1,420 @@ +--- +title: 组件概览 +description: 将根据业务实践持续新增组件类型，敬请留意组件库更新日志。 +spline: explain +--- + +

    基础5

    +
    +
    + + + +

    Button 按钮

    +     +
    + +
    + + + +

    Divider 分割线

    +     +
    + +
    + + + +

    Fab 悬浮按钮

    +     +
    + +
    + + + +

    Icon 图标

    +     +
    + +
    + + + +

    Link 链接

    +     +
    +
    + +

    导航8

    +
    +
    + + + +

    BackTop 返回顶部

    +     +
    +
    + + + +

    Drawer 抽屉

    +     +
    +
    + + + +

    Indexes 索引

    +     +
    +
    + + + +

    Navbar 导航条

    +     +
    +
    + + + +

    SideBar 侧边导航栏

    +     +
    +
    + + + +

    Steps 步骤条

    +     +
    +
    + + + +

    TabBar 标签栏

    +     +
    +
    + + + +

    Tabs 选项卡

    +     +
    +
    + +

    输入14

    +
    +
    + + + +

    Calendar 日历

    +     +
    +
    + + + +

    Cascader 级联选择器

    +     +
    +
    + + + +

    CheckBox 多选框

    +     +
    +
    + + + +

    DateTimePicker 日期选择器

    +     +
    +
    + + + +

    Input 输入框

    +     +
    +
    + + + +

    Picker 选择器

    +     +
    + +
    + + + +

    Radio 单选框

    +     +
    +
    + + + +

    Rate 评分

    +     +
    +
    + + + +

    Search 搜索框

    +     +
    +
    + + + +

    Slider 滑动选择器

    +     +
    +
    + + + +

    Stepper 步进器

    +     +
    +
    + + + +

    Switch 开关

    +     +
    +
    + + + +

    Textarea 多行文本框

    +     +
    +
    + + + +

    Upload 上传

    +     +
    +
    + +

    数据展示16

    +
    +
    + + + +

    Avatar 头像

    +     +
    + +
    + + + +

    Badge 徽章

    +     +
    + +
    + + + +

    Cell 单元格

    +     +
    + +
    + + + +

    Collapse 折叠面板

    +     +
    + +
    + + + +

    CountDown 倒计时

    +     +
    + +
    + + + +

    DropdownMenu 下拉菜单

    +     +
    + +
    + + + +

    Empty 空状态

    +     +
    + +
    + + + +

    Footer 页脚

    +     +
    + +
    + + + +

    Grid 宫格

    +     +
    + +
    + + + +

    Image 图片

    +     +
    + +
    + + + +

    ImageViewer 图片预览

    +     +
    + +
    + + + +

    Result 结果

    +     +
    + +
    + + + +

    Skeleton 骨架屏

    +     +
    + +
    + + + +

    Sticky 吸顶容器

    +     +
    + +
    + + + +

    Swiper 轮播图

    +     +
    + +
    + + + +

    Tag 标签

    +     +
    +
    + +

    反馈10

    +
    +
    + + + +

    ActionSheet 动作面板

    +     +
    + +
    + + + +

    Dialog 对话框

    +     +
    +
    + + + +

    Loading 加载

    +     +
    + +
    + + + +

    Message 全局提示

    +     +
    + +
    + + + +

    NoticeBar 消息提醒

    +     +
    + +
    + + + +

    Popup 弹出层

    +     +
    +
    + + + +

    Progress 进度条

    +     +
    +
    + + + +

    PullDownRefresh 下拉刷新

    +     +
    +
    + + + +

    SwipeCell 滑动操作

    +     +
    +
    + + + +

    Toast 轻提示

    +     +
    +
    diff --git "a/docs/mobile/_design/\346\214\211\351\222\256Button.md" "b/docs/mobile/_design/\346\214\211\351\222\256Button.md" new file mode 100644 index 0000000000..cd03efc95c --- /dev/null +++ "b/docs/mobile/_design/\346\214\211\351\222\256Button.md" @@ -0,0 +1,80 @@ +# 按钮 Button + +## 组件设计指南 + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
    + + +
    + + +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
    +
    + + +
    + +
    + + +
    +
    +
    + + +
    + + +
    + +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
    +
    + + +
    +
    + + +
    +
    + + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，禁止同时使用多个主按钮。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | + diff --git a/docs/mobile/design/button.md b/docs/mobile/design/button.md new file mode 100644 index 0000000000..139597f9cb --- /dev/null +++ b/docs/mobile/design/button.md @@ -0,0 +1,2 @@ + + From eafebccb6b2e9515e79bf80ce9db0263d9896d24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E9=A1=BA=E9=A1=BA?= Date: Mon, 27 Feb 2023 23:58:40 +0800 Subject: [PATCH 179/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dmenu-item?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=BA=86href=E5=B1=9E=E6=80=A7=E5=92=8Cicon?= =?UTF-8?q?=E6=8F=92=E6=A7=BD=E5=90=8E=EF=BC=8C=E8=8F=9C=E5=8D=95=E6=8A=98?= =?UTF-8?q?=E5=8F=A0=E5=AF=BC=E8=87=B4=E7=9A=84icon=E5=8F=98=E5=B0=8F?= =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E5=B1=95=E5=BC=80=E6=97=B6=EF=BC=8C=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E5=8F=B3=E4=BE=A7=E7=A9=BA=E7=99=BD=E5=A4=84=E4=B8=8D?= =?UTF-8?q?=E8=83=BD=E8=B7=B3=E8=BD=AC=E7=9A=84=E9=97=AE=E9=A2=98=20(#1158?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/menu/_index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 90cf99bfee..a7ecce6402 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -186,6 +186,9 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { padding: 0 14px; justify-content: center; + .@{prefix}-menu__item-link { + display: none; + } } } @@ -629,6 +632,7 @@ a.@{prefix}-menu__item { &.@{prefix}-menu__item-link { color: unset; + flex: 1; } } From 5ee8cea0f5947776066108ca9489190ed3a0c8ff Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 28 Feb 2023 18:19:00 +0800 Subject: [PATCH 180/312] fix(dialog): default config btn theme (#1164) --- js/global-config/default-config.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/global-config/default-config.ts b/js/global-config/default-config.ts index d7b098933b..05961146ce 100644 --- a/js/global-config/default-config.ts +++ b/js/global-config/default-config.ts @@ -20,18 +20,18 @@ export default { closeOnOverlayClick: true, confirmBtnTheme: { default: 'primary', - info: 'info', - warning: 'warning', - danger: 'danger', - success: 'success', + info: 'primary', + warning: 'primary', + danger: 'primary', + success: 'primary', }, }, message: {}, popconfirm: { confirmBtnTheme: { default: 'primary', - warning: 'warning', - danger: 'danger', + warning: 'primary', + danger: 'primary', }, }, table: { From 08cbe5f40f5d9f8c38953d726860628d732d9ec1 Mon Sep 17 00:00:00 2001 From: TabSpace Date: Tue, 28 Feb 2023 18:51:21 +0800 Subject: [PATCH 181/312] =?UTF-8?q?feat:=20tree=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=99=9A=E6=8B=9F=E6=BB=9A=E5=8A=A8=E8=83=BD?= =?UTF-8?q?=E5=8A=9B=20(#1159)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(tree): label 禁止折行 * fix(tree): 完善 tree 样式细节与示例 * fix(tree): 完善 tree 组件连线样式，解决叶节点连线过短问题 * refactor(tree): tree 组件，移除无用样式，完善样式顺序格式 * fix(tree): tree 组件，连线对齐图标 * refactor(tree): tree 组件，样式变量名称改进，统一规范 * docs(tree): tree 组件样式示例，可选中示例添加长文案示例 * fix(tree): 增大图标点击区域 * docs(tree): tree 样式示例改进，自定义图标位置修正 * feat(tree): tree 组件添加嵌套布局样式 * fix(tree): tree 组件，为节点不限制高度提供可能性 * fix(tree): tree 组件添加子节点动画 * fix: tree 组件完善嵌套布局时使用的动画 * fix(tree): 动画涉及的属性，仅在动画启用时生效 * chore(tree): tree 组件，添加虚拟滚动所需部分样式 * fix: 🐛 tree 组件，解决同一个 siblings 下，前置节点插入时位置错误的问题。 * chore: 🤖 完善项目依赖 * refactor: 💡 添加事件派发器，以简化事件传播方式 * fix: 🐛 tree tree 组件, insertAfter, insertBefore 方法，完善传入参数类型 * fix: 🐛 tree 组件动画优化 * fix: 🐛 tree 组件修正图标背景偏移的问题 * chore: 🤖 type的版本先固定 不然过不了CI的ts检测 * fix: 🐛 tree 组件添加 value 重复错误提示 * fix: 🐛 tree 组件，解决拖动样式与重构后的高度样式冲突的问题 * fix: 🐛 tree 组件，完善折行标签示例，移除嵌套模式相关样式 * fix: 🐛 tree 组件修正图标背景尺寸与位置 * fix: 🐛 tree 组件完善图标样式 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件完善虚拟滚动样式，添加滚动中样式 * fix: 🐛 tree 节点添加独立的私有 id ，专用于渲染 * fix: 🐛 tree 组件添加节点私有 id 映射 * fix: 🐛 tree 组件，解决动画样式导致虚拟滚动卡顿的问题 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，收纳所有动画效果到动画 class 之下管理 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，改进默认样式，支持滚动 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件修正单元测试方案，不直接审查唯一 key 的值。移除冗余判断条件，准备改进过滤方案。 * fix: 🐛 完善类型指定 * fix: 🐛 tree 组件，改进对 allowFoldNodeOnFilter 的支持，过滤节点时不影响折叠状态 * fix: 🐛 tree 组件，解决手风琴效果丢失的问题 * fix: 🐛 tree 组件，解决父组件状态未能正确更新的问题 * docs: ✏️ 添加虚拟滚动示例 --- docs/web/api/tree.md | 4 + js/tree/tree-node.ts | 127 ++++++++++++++++---------- js/tree/tree-store.ts | 96 +++++++++---------- js/tree/types.ts | 2 +- style/web/components/tree/_index.less | 83 ++++++++++++++--- test/unit/tree/tree-append.test.js | 13 ++- 6 files changed, 211 insertions(+), 114 deletions(-) diff --git a/docs/web/api/tree.md b/docs/web/api/tree.md index 0224ed37ea..0b365081ee 100644 --- a/docs/web/api/tree.md +++ b/docs/web/api/tree.md @@ -98,3 +98,7 @@ spline: data + +### 虚拟滚动 + +{{ vscroll }} diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index e86a8dd718..7765fafa8f 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -22,7 +22,7 @@ import log from '../log'; const { hasOwnProperty } = Object.prototype; -const defaultStatus = { +export const defaultStatus = { expandMutex: false, activable: false, checkable: false, @@ -31,6 +31,8 @@ const defaultStatus = { loading: false, }; +export const privateKey = '__tdesign_id__'; + // vm 开头为视图属性，不可以外部设置 // 用于触发视图更新 export class TreeNode { @@ -124,33 +126,40 @@ export class TreeNode { const propLabel = keys.label || 'label'; const propValue = keys.value || 'value'; + // 初始化状态 this.model = null; this.children = null; this.vmCheckable = false; this.vmIsLeaf = false; this.vmIsFirst = false; this.vmIsLast = false; - this.vmIsRest = true; + this.vmIsRest = false; this.vmIsLocked = false; + this.level = 0; + this.visible = true; + + // 为节点设置唯一 id + // tree 数据替换时，value 相同有可能导致节点状态渲染冲突 + // 用这个 唯一 id 来解决，用于类似 vue 组件的唯一 key 指定场景 + this[privateKey] = uniqueId(prefix); const spec = { ...defaultStatus, - actived: false, - expanded: false, - checked: false, ...data, }; const children = spec[propChildren]; this.set(spec); this.label = spec[propLabel] || ''; - this.value = isNil(spec[propValue]) ? uniqueId(prefix) : spec[propValue]; + // 没有 value 的时候，value 默认使用自动生成的 唯一 id + this.value = isNil(spec[propValue]) ? this[privateKey] : spec[propValue]; - const { nodeMap } = tree; + const { nodeMap, privateMap } = tree; if (nodeMap.get(this.value)) { log.warn('Tree', `Dulplicate value: ${this.value}`); } nodeMap.set(this.value, this); + privateMap.set(this[privateKey], this); if (parent && parent instanceof TreeNode) { this.parent = parent; @@ -164,17 +173,22 @@ export class TreeNode { this.children = children; } - // 初始化状态计算 - this.level = 0; - this.visible = true; - - this.actived = spec.actived; + this.actived = false; + if (typeof spec.actived !== 'undefined') { + this.actived = spec.actived; + } this.initActived(); - this.expanded = spec.expanded; + this.expanded = config.expandAll; + if (typeof spec.expanded !== 'undefined') { + this.expanded = spec.expanded; + } this.initExpanded(); - this.checked = spec.checked; + this.checked = false; + if (typeof spec.checked !== 'undefined') { + this.checked = spec.checked; + } this.initChecked(); this.update(); @@ -221,9 +235,6 @@ export class TreeNode { tree.expandedMap.set(this.value, true); expanded = true; } - if (config.expandAll) { - expanded = true; - } if (this.children === true && config.lazy) { expanded = false; } @@ -349,6 +360,7 @@ export class TreeNode { const node = item; node.tree = tree; tree.nodeMap.set(node.value, node); + tree.privateMap.set(node[privateKey], node); if (node.expanded) { tree.expandedMap.set(node.value, true); } @@ -430,6 +442,7 @@ export class TreeNode { tree.checkedMap.delete(value); tree.expandedMap.delete(value); tree.nodeMap.delete(value); + tree.privateMap.delete(this[privateKey]); } // 异步加载子节点数据 @@ -533,10 +546,12 @@ export class TreeNode { const { config, filterMap, + hasFilter, } = this.tree; - let rest = true; - if (isFunction(config.filter)) { + let rest = false; + if (hasFilter) { + // 仅在存在过滤条件时，过滤命中才有效 const nodeModel = this.getModel(); rest = config.filter(nodeModel); } @@ -554,40 +569,47 @@ export class TreeNode { public isVisible(): boolean { const { nodeMap, + hasFilter, + config, } = this.tree; + const { allowFoldNodeOnFilter } = config; let visible = true; - // 锁定状态，直接呈现 - if (this.vmIsLocked) { - return true; + if (!nodeMap.get(this.value)) { + // 节点不在当前树上，所以不可见 + return false; } - // 在当前树上，未被移除 - if (nodeMap.get(this.value)) { - // 节点未被过滤 - const filterVisible = this.isRest(); - - // 所有父节点展开 - let expandVisible = true; - const parents = this.getParents(); - if (parents.length > 0) { - expandVisible = parents.every((node: TreeNode) => node.isExpanded()); - } + if (hasFilter && !allowFoldNodeOnFilter) { + // 如果存在过滤条件 + // 锁定状态和过滤命中状态，直接呈现 + visible = (this.vmIsLocked || this.vmIsRest); + return visible; + } - // 节点为未被过滤节点的父节点 - visible = expandVisible && filterVisible; + // 标志所有父节点展开导致的可见状态 + let expandVisible = true; + const parents = this.getParents(); + if (parents.length > 0) { + expandVisible = parents.every((node: TreeNode) => node.expanded); + } + + if (hasFilter) { + visible = expandVisible && (this.vmIsRest || this.vmIsLocked); } else { - visible = false; + visible = expandVisible; } return visible; } // 判断节点是否被禁用 public isDisabled() { - if (this.vmIsLocked) return true; - const treeDisabled = get(this, 'tree.config.disabled'); - return !!(treeDisabled || this.disabled); + const { tree } = this; + const { hasFilter, config } = tree; + const { disabled, allowFoldNodeOnFilter } = config; + if (hasFilter && !allowFoldNodeOnFilter && this.vmIsLocked && !this.vmIsRest) return true; + return !!(disabled || this.disabled); } // 判断节点是否能拖拽 @@ -620,7 +642,9 @@ export class TreeNode { // 检查节点是否已展开 public isExpanded(map?: Map): boolean { const { tree, value, vmIsLocked } = this; - if (vmIsLocked) return true; + const { hasFilter, config } = tree; + const { allowFoldNodeOnFilter } = config; + if (hasFilter && !allowFoldNodeOnFilter && vmIsLocked) return true; const expandedMap = map || tree.expandedMap; return !!(tree.nodeMap.get(value) && expandedMap.get(value)); } @@ -733,6 +757,7 @@ export class TreeNode { // 设置节点展开状态 public setExpanded(expanded: boolean, opts?: TypeSettingOptions): TreeNodeValue[] { const { tree } = this; + const { config } = tree; const options = { directly: false, ...opts, @@ -745,27 +770,37 @@ export class TreeNode { // 手风琴效果，先折叠同级节点 if (expanded) { + // 列举需要展开的节点 const shouldExpandNodes = []; + // 自己一定在展开列表中 shouldExpandNodes.push(this); - if (get(tree, 'config.expandParent')) { + if (config.expandParent) { + // expandParent 为 true，则父节点都要展开 this.getParents().forEach((node) => { shouldExpandNodes.push(node); }); } shouldExpandNodes.forEach((node) => { let isExpandMutex = false; + // 对于每一个节点，都需要判断是否启用手风琴效果 if (node.parent) { isExpandMutex = node.parent.isExpandMutex(); } else { isExpandMutex = tree?.config?.expandMutex; } if (isExpandMutex) { + // 折叠列表中，先移除同级节点 const siblings = node.getSiblings(); siblings.forEach((snode) => { map.delete(snode.value); + // 同级节点相关状态更新 + snode.update(); + snode.updateChildren(); }); } + // 最后设置自己的折叠状态 map.set(node.value, true); + node.update(); }); } else { map.delete(this.value); @@ -874,14 +909,14 @@ export class TreeNode { // 更新节点状态 public update(): void { this.level = this.getLevel(); - this.actived = this.isActived(); - this.expanded = this.isExpanded(); - this.vmCheckable = this.isCheckable(); - this.visible = this.isVisible(); - this.vmIsRest = this.isRest(); this.vmIsFirst = this.isFirst(); this.vmIsLast = this.isLast(); this.vmIsLeaf = this.isLeaf(); + this.vmCheckable = this.isCheckable(); + this.vmIsRest = this.isRest(); + this.actived = this.isActived(); + this.expanded = this.isExpanded(); + this.visible = this.isVisible(); this.tree.updated(this); } diff --git a/js/tree/tree-store.ts b/js/tree/tree-store.ts index 30bd773de5..8d78c2d713 100644 --- a/js/tree/tree-store.ts +++ b/js/tree/tree-store.ts @@ -20,7 +20,6 @@ import { TypeTreeFilterOptions, TypeRelatedNodesOptions, TypeTreeEventState, - TypeTreeNodeModel, } from './types'; // 构建一个树的数据模型 @@ -36,6 +35,9 @@ export class TreeStore { // 所有节点映射 public nodeMap: Map; + // 节点 私有 ID 映射 + public privateMap: Map; + // 配置选项 public config: TypeTreeStoreOptions; @@ -60,12 +62,12 @@ export class TreeStore { // 识别是否需要重排 public shouldReflow: boolean; + // 存在过滤器标志 + public hasFilter: boolean; + // 树节点过滤器 public prevFilter: TypeTreeFilter; - // 一个空节点 model - public nullNodeModel: TypeTreeNodeModel; - // 事件派发器 public emitter: ReturnType; @@ -90,6 +92,9 @@ export class TreeStore { onLoad: null, onReflow: null, onUpdate: null, + // 每次搜索条件变更，重置展开状态，路径节点展开，显示命中节点 + // allowFoldNodeOnFilter 为 true 时，搜索条件不变的情况下，允许折叠路径节点 + // 默认状态，allowFoldNodeOnFilter 为 false 时，路径节点无法折叠 allowFoldNodeOnFilter: false, ...options, }; @@ -97,6 +102,7 @@ export class TreeStore { this.nodes = []; this.children = []; this.nodeMap = new Map(); + this.privateMap = new Map(); this.activedMap = new Map(); this.expandedMap = new Map(); this.checkedMap = new Map(); @@ -107,30 +113,23 @@ export class TreeStore { this.updateTimer = null; // 在子节点增删改查时，将此属性设置为 true，来触发视图更新 this.shouldReflow = false; + // 这个标志会被大量用到 + this.hasFilter = isFunction(config.filter); this.emitter = mitt(); - this.initNullNodeModel(); - } - - // 初始化空节点 model - public initNullNodeModel() { - // 空节点，用于判定当前的 filterText 是否为空，如果 filter(nullNode) 为 true, 那么可以判定 filterText 为空 - // 这里初始化空节点的方式似乎不是很完美 - const nullNode = new TreeNode(this, { value: '', label: '', children: [] }); - this.nullNodeModel = nullNode.getModel(); - // 需要将节点从树中移除 - nullNode.remove(); } // 配置选项 public setConfig(options: TypeTreeStoreOptions) { + const { config } = this; let hasChanged = false; Object.keys(options).forEach((key) => { const val = options[key]; - if (val !== this.config[key]) { + if (val !== config[key]) { hasChanged = true; - this.config[key] = val; + config[key] = val; } }); + this.hasFilter = isFunction(config.filter); if (hasChanged) { // 在 td-tree 的 render 方法中调用 setConfig // 这样减少了 watch 属性 @@ -375,7 +374,7 @@ export class TreeStore { this.updatedMap.set(node.value, true); } if (this.updateTimer) return; - this.updateTimer = +setTimeout(() => { + this.updateTimer = setTimeout(() => { clearTimeout(this.updateTimer); this.updateTimer = null; @@ -388,7 +387,7 @@ export class TreeStore { // 检查节点是否有被过滤，锁定路径节点 // 在此之前要遍历节点生成一个经过排序的节点数组 // 以便于优化锁定检查算法 - if (!this.config?.allowFoldNodeOnFilter) this.lockFilterPathNodes(); + this.lockFilterPathNodes(); const updatedList = Array.from(this.updatedMap.keys()); if (updatedList.length > 0) { @@ -654,15 +653,23 @@ export class TreeStore { } // 锁定过滤节点的路径节点 - // 使得路径节点展开，可见，且不可操作 + // 使得路径节点展开，可见 public lockFilterPathNodes() { const { config } = this; const allNodes = this.getNodes(); - // 如果之前有进行过滤，则先解锁所有节点 if (this.prevFilter) { + // 过滤条件清空时，也需要清理锁定节点 + // 所在判断过滤条件是否存在之前，就要调用这里的清理逻辑 + // 不想在每次渲染时都做这个清空判断 + // 所以判断一下之前是否有进行过滤 allNodes.forEach((node: TreeNode) => { - node.lock(false); + // 先清空所有锁定状态 + if (node.vmIsLocked) { + // lock 方法内部有状态计算 + // 所以要减少 lock 方法调用次数 + node.lock(false); + } }); } @@ -670,42 +677,25 @@ export class TreeStore { // 当前没有过滤器 // 则无需处理锁定节点 if (!currentFilter || !isFunction(currentFilter)) return; - - if (currentFilter(this.nullNodeModel)) return; - this.prevFilter = config.filter; - // 构造路径节点map - const map = new Map(); - // 全部节点要经过排序，才能使用这个算法 + // 全部节点要经过排序，才能使用这个遍历 // 比起每个过滤节点调用 getParents 方法检查父节点状态 - // 算法复杂度 O(N*log(N)) => O(N) - allNodes.reverse().forEach((item: TreeNode) => { - const node = item; - - // 被过滤节点父节点固定为展开状态 + // 复杂度 O(N*log(N)) => O(N) + allNodes.reverse().forEach((node: TreeNode) => { + // 数组颠倒后，等于是从每个节点的子节点开始判断 + // 想象为从展开树的最底部向上遍历 const parent = node.getParent(); - if (node.vmIsRest) { - if (parent) { - // 被过滤节点的父节点固定为展开状态 - parent.expanded = true; + if (!parent) return; + if (node.vmIsRest || node.vmIsLocked) { + // 当前节点被过滤条件命中 + // 或者当前节点被锁定 + // 则需要判定父节点状态 + if (!parent.vmIsLocked) { + // 父节点已被锁定，则忽略动作 + // lock 方法有内置状态判断 + parent.lock(true); } - // 被过滤节点固定为展示状态 - node.visible = true; - } - if (node.vmIsRest || map.get(node.value)) { - if (parent && !parent.vmIsRest) { - map.set(parent.value, true); - } - } - }); - - // 锁定路径节点展示样式 - const filterPathValues = Array.from(map.keys()); - filterPathValues.forEach((value: TreeNodeValue) => { - const node = this.getNode(value); - if (node) { - node.lock(true); } }); } diff --git a/js/tree/types.ts b/js/tree/types.ts index 655bf96489..968d3027fb 100644 --- a/js/tree/types.ts +++ b/js/tree/types.ts @@ -190,7 +190,7 @@ export type TypeIdMap = Map; export type TypeValueMode = 'all' | 'parentFirst' | 'onlyLeaf'; -export type TypeTimer = number; +export type TypeTimer = ReturnType; export interface TypeSettingOptions { directly?: boolean; diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index 79058b635f..af9e60db36 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -16,6 +16,8 @@ font: @tree-font; color: @tree-node-text-color; + overflow-y: auto; + position: relative; // 禁用态颜色处理 &.@{prefix}-is-disabled { @@ -85,7 +87,6 @@ .@{prefix}-tree__icon--default { .t-icon { - transition: color, transform @anim-time-fn-easing @anim-duration-base; transform: rotate(0); } } @@ -211,7 +212,6 @@ font-size: 0; user-select: none; cursor: pointer; - transition: color, transform @anim-duration-moderate @anim-time-fn-easing; } // svg 动画与 icon 背景进行隔离 @@ -225,7 +225,6 @@ width: calc(@tree-node-icon-size + 4px); height: calc(@tree-node-icon-size + 4px); border-radius: @border-radius-default; - transition: @anim-duration-base linear; } // 仅在有图标时呈现背景 @@ -233,7 +232,6 @@ // ::after 仅用于增大点击范围 &__icon:not(:empty):hover { background-color: @tree-node-bg-hover-color; - transition: @anim-duration-base linear; } // 没有图标时不呈现指针 @@ -250,7 +248,6 @@ margin-left: @tree-label-margin-left; border-radius: @border-radius-default; cursor: pointer; - transition: background-color @anim-duration-moderate @anim-time-fn-easing; .text-ellipsis(); &.@{prefix}-is-checked { @@ -297,18 +294,39 @@ } } -.@{prefix}-tree--vscroll { - overflow-y: auto; -} - .@{prefix}-tree { &__item--hidden { display: none; } } -// 节点收缩隐藏动画 +// 节点动画 .@{prefix}-tree--transition { + // 标签动画 + .@{prefix}-tree__label { + transition: background-color @anim-duration-moderate @anim-time-fn-easing; + } + + // 默认图标 + .@{prefix}-tree__icon { + transition: color, transform @anim-duration-moderate @anim-time-fn-easing; + } + + .@{prefix}-tree__icon::after { + transition: @anim-duration-base linear; + } + + .@{prefix}-tree__icon:not(:empty):hover { + transition: @anim-duration-base linear; + } + + // 图标动画 + .@{prefix}-tree__icon--default { + .t-icon { + transition: color, transform @anim-time-fn-easing @anim-duration-base; + } + } + // 节点展示动画 .@{prefix}-tree__item--visible { display: flex; @@ -327,7 +345,7 @@ overflow: hidden; pointer-events: none; user-select: none; - animation: none; + animation: initial; transition: opacity @tree-node-transition-time linear 0s, max-height @tree-node-transition-time linear @tree-node-transition-time; } @@ -343,6 +361,49 @@ } } +// 虚拟滚动样式 +.@{prefix}-tree__vscroll { + overflow-y: auto; +} + +// 虚拟滚动游标 +.@{prefix}-tree__vscroll-cursor { + position: absolute; + width: 1px; + height: 1px; + transition: transform @anim-duration-base; +} + +.@{prefix}-tree--scrolling { + .@{prefix}-tree__item { + will-change: initial; + } + .v-enter, + .v-leave, + .@{prefix}-tree__item--visible, + .@{prefix}-tree__item--hidden, + .@{prefix}-tree__item--enter, + .@{prefix}-tree__item--enter-active, + .@{prefix}-tree__item--enter-to, + .@{prefix}-tree__item--leave, + .@{prefix}-tree__item--leave-active + .@{prefix}-tree__item--leave-to { + animation: none; + transition: none; + } + .@{prefix}-tree__item--visible { + max-height: initial; + } + .@{prefix}-tree__item--enter-to, + .@{prefix}-tree__item--enter-active { + max-height: initial; + } + .@{prefix}-tree__item--leave-to, + .@{prefix}-tree__item--leave-active { + max-height: 0; + } +} + @keyframes t-tree-toggle { 0% { opacity: 0; diff --git a/test/unit/tree/tree-append.test.js b/test/unit/tree/tree-append.test.js index afbe7e147f..184c3a0f05 100644 --- a/test/unit/tree/tree-append.test.js +++ b/test/unit/tree/tree-append.test.js @@ -5,11 +5,18 @@ describe('tree', () => { describe('tree:append', () => { it('append 方法添加多个节点', async () => { const tree = new TreeStore(); - tree.append([{}, {}]); + tree.append([{ + value: 't5' + }, { + value: 't6' + }]); await wait(1); const nodes = tree.getNodes(); - expect(nodes[0].value).toBe('t1'); - expect(nodes[1].value).toBe('t2'); + // 内部生成的唯一 key 不应当绑定测试状态 + // 生成的唯一 key 与节点顺序无关，只需确保唯一 + expect(nodes[0].value).toBe('t5'); + expect(nodes[1].value).toBe('t6'); + expect(nodes.length).toBe(2); }); }); }); From 4977c4c4ff9496c9001be3f32d14ebc18a0e5218 Mon Sep 17 00:00:00 2001 From: caixuan29 <96420688+caixuan29@users.noreply.github.com> Date: Tue, 28 Feb 2023 20:05:22 +0800 Subject: [PATCH 182/312] Update PullDownRefresh.md (#1163) --- docs/miniprogram/_design/PullDownRefresh.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/miniprogram/_design/PullDownRefresh.md b/docs/miniprogram/_design/PullDownRefresh.md index fe7aabcb1d..00823e705b 100644 --- a/docs/miniprogram/_design/PullDownRefresh.md +++ b/docs/miniprogram/_design/PullDownRefresh.md @@ -13,11 +13,11 @@
    - +
    - +
    @@ -26,7 +26,7 @@
    - +
    @@ -39,7 +39,7 @@
    - +
    @@ -47,11 +47,11 @@
    - +
    - +
    From 52d814f34f3e084a5b45111ab2732691bd732a5a Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 1 Mar 2023 13:34:45 +0800 Subject: [PATCH 183/312] =?UTF-8?q?[Upload]=20=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=B9=E6=B3=95=EF=BC=8C=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=E8=AF=B7=E6=B1=82=E4=B8=8A=E4=BC=A0=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E5=A4=9A=E4=B8=AA=E6=96=87=E4=BB=B6=E7=9A=84=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=9B=9E=E6=98=BE=20(#1165)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(image): support .avif * feat(web): upload support multiple files in one request --------- Co-authored-by: sheepluo --- js/upload/main.ts | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/js/upload/main.ts b/js/upload/main.ts index 8d208dd9a9..038b1e33a5 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -114,8 +114,8 @@ export function handleRequestMethodResponse(res: RequestMethodResponse) { log.error('Upload', '`requestMethodResponse.status` must be `success` or `fail`, examples `{ status: \'success\', response: { url: \'\' } }`'); return false; } - if (res.status === 'success' && (!res.response || !res.response.url)) { - log.warn('Upload', '`requestMethodResponse.response.url` is required as `status` is `success`'); + if (res.status === 'success' && (!res.response || (!res.response.url && !res.response.files))) { + log.warn('Upload', '`requestMethodResponse.response.url` or `requestMethodResponse.response.files` is required if `status` is `success`'); } return true; } @@ -147,16 +147,33 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { + file.status = res.status; + file.response = response; + file.url = response.url; + }); + resultFiles = toUploadFiles; + } else if (response.files) { + // 一个请求上传并返回多个文件 + resultFiles = response.files.map((file) => { + const fileInfo = toUploadFiles.find((toFile) => ( + (file.name && toFile.name === file.name) || (file.raw && toFile.raw === file.raw) + )); + return { ...fileInfo, ...file }; + }); } - toUploadFiles.forEach((file) => { - file.status = res.status; - file.response = response; - file.url = response.url; - }); - const result = { response, file: toUploadFiles[0], files: toUploadFiles }; + const result = { + response, + file: resultFiles[0], + files: resultFiles + }; if (res.status === 'success') { params.onResponseSuccess?.(result); } else if (res.status === 'fail') { From b72c1ef4acfc9a4dc539ea1f597e5bf52b6fbd85 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 1 Mar 2023 14:11:34 +0800 Subject: [PATCH 184/312] chore: fix type (#1166) --- js/upload/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/upload/main.ts b/js/upload/main.ts index 038b1e33a5..b7395a72fc 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -162,7 +162,7 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { + resultFiles = response.files.map((file: UploadFile) => { const fileInfo = toUploadFiles.find((toFile) => ( (file.name && toFile.name === file.name) || (file.raw && toFile.raw === file.raw) )); From 72940c34ce4da2d965bda033ae4e10d240c17f34 Mon Sep 17 00:00:00 2001 From: duanbaosheng <1065140483@qq.com> Date: Wed, 1 Mar 2023 14:41:44 +0800 Subject: [PATCH 185/312] feat: fix textarea tysle (#1157) * feat: fix textarea tysle * feat: textarea style * feat: textarea style * feat: textarea style * feat: modify textarea style * feat: modify textarea styles --- style/web/components/textarea/_index.less | 17 ++++++++++++----- style/web/components/textarea/_var.less | 3 +-- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less index 7873c4d923..f519b2ad76 100644 --- a/style/web/components/textarea/_index.less +++ b/style/web/components/textarea/_index.less @@ -1,5 +1,4 @@ // 组件允许单个组件打包，因此默认引入公共基础样式 - @import "../../base.less"; @import "./_var.less"; @@ -9,6 +8,7 @@ @import "../../mixins/_reset.less"; .@{prefix}-textarea { + .reset; position: relative; @@ -48,11 +48,18 @@ .textarea-status(error); } + &__info_wrapper { + display: flex; + column-gap: @textarea-tips-gap; + justify-content: space-between; + } + + &__info_wrapper_align { + justify-content: end; + } + &__limit { - position: absolute; - bottom: @textarea-limit-position-bottom; - right: @textarea-limit-position-right; - font: @textarea-font; + font: @textarea-tips-font; color: @textarea-limit-color; background: @textarea-bg-color-default; } diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less index 34ddf27590..23ccb2da34 100644 --- a/style/web/components/textarea/_var.less +++ b/style/web/components/textarea/_var.less @@ -40,8 +40,7 @@ // 间距 @textarea-padding: calc(calc(@comp-size-m - @text-line-height-base) / 2) @comp-paddingLR-s; -@textarea-limit-position-right: calc(@comp-paddingLR-s * 2); -@textarea-limit-position-bottom: @comp-paddingTB-s; +@textarea-tips-gap: @comp-margin-s; // 边框 @textarea-border-color: @border-level-2-color; From f9ef37bb5a020887c8b158a7b8c982c4a30e6507 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 1 Mar 2023 15:09:15 +0800 Subject: [PATCH 186/312] fix: upload failed (#1167) * fix: upload * fix: lint error --------- Co-authored-by: sheepluo --- js/upload/main.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/js/upload/main.ts b/js/upload/main.ts index b7395a72fc..c4f43377b9 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -146,14 +146,13 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { file.status = res.status; file.response = response; @@ -166,13 +165,18 @@ export function uploadOneRequest(params: HandleUploadParams): Promise ( (file.name && toFile.name === file.name) || (file.raw && toFile.raw === file.raw) )); - return { ...fileInfo, ...file }; + return { + ...fileInfo, + ...file, + status: res.status, + response, + }; }); } const result = { response, file: resultFiles[0], - files: resultFiles + files: resultFiles, }; if (res.status === 'success') { params.onResponseSuccess?.(result); From e7b64c7ac5fed067ec90083cce7bf7d05675117a Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Wed, 1 Mar 2023 16:28:00 +0800 Subject: [PATCH 187/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dtree=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E6=BB=9A=E5=8A=A8=E6=9D=A1=20(#1168)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/tree/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index af9e60db36..6f4d254ddf 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -16,7 +16,6 @@ font: @tree-font; color: @tree-node-text-color; - overflow-y: auto; position: relative; // 禁用态颜色处理 From 04a808f419a1e90851e89701a32cf260ee983d3a Mon Sep 17 00:00:00 2001 From: TabSpace Date: Fri, 3 Mar 2023 16:07:53 +0800 Subject: [PATCH 188/312] =?UTF-8?q?[fix]=20tree=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E5=96=84=E8=99=9A=E6=8B=9F=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=AE=8C=E5=96=84=E8=BF=87=E6=BB=A4?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=9A=84=E6=A0=B7=E5=BC=8F=20(#1177)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(tree): label 禁止折行 * fix(tree): 完善 tree 样式细节与示例 * fix(tree): 完善 tree 组件连线样式，解决叶节点连线过短问题 * refactor(tree): tree 组件，移除无用样式，完善样式顺序格式 * fix(tree): tree 组件，连线对齐图标 * refactor(tree): tree 组件，样式变量名称改进，统一规范 * docs(tree): tree 组件样式示例，可选中示例添加长文案示例 * fix(tree): 增大图标点击区域 * docs(tree): tree 样式示例改进，自定义图标位置修正 * feat(tree): tree 组件添加嵌套布局样式 * fix(tree): tree 组件，为节点不限制高度提供可能性 * fix(tree): tree 组件添加子节点动画 * fix: tree 组件完善嵌套布局时使用的动画 * fix(tree): 动画涉及的属性，仅在动画启用时生效 * chore(tree): tree 组件，添加虚拟滚动所需部分样式 * fix: 🐛 tree 组件，解决同一个 siblings 下，前置节点插入时位置错误的问题。 * chore: 🤖 完善项目依赖 * refactor: 💡 添加事件派发器，以简化事件传播方式 * fix: 🐛 tree tree 组件, insertAfter, insertBefore 方法，完善传入参数类型 * fix: 🐛 tree 组件动画优化 * fix: 🐛 tree 组件修正图标背景偏移的问题 * chore: 🤖 type的版本先固定 不然过不了CI的ts检测 * fix: 🐛 tree 组件添加 value 重复错误提示 * fix: 🐛 tree 组件，解决拖动样式与重构后的高度样式冲突的问题 * fix: 🐛 tree 组件，完善折行标签示例，移除嵌套模式相关样式 * fix: 🐛 tree 组件修正图标背景尺寸与位置 * fix: 🐛 tree 组件完善图标样式 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件完善虚拟滚动样式，添加滚动中样式 * fix: 🐛 tree 节点添加独立的私有 id ，专用于渲染 * fix: 🐛 tree 组件添加节点私有 id 映射 * fix: 🐛 tree 组件，解决动画样式导致虚拟滚动卡顿的问题 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，收纳所有动画效果到动画 class 之下管理 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，改进默认样式，支持滚动 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件修正单元测试方案，不直接审查唯一 key 的值。移除冗余判断条件，准备改进过滤方案。 * fix: 🐛 完善类型指定 * fix: 🐛 tree 组件，改进对 allowFoldNodeOnFilter 的支持，过滤节点时不影响折叠状态 * fix: 🐛 tree 组件，解决手风琴效果丢失的问题 * fix: 🐛 tree 组件，解决父组件状态未能正确更新的问题 * docs: ✏️ 添加虚拟滚动示例 * fix: 🐛 tree 组件，虚拟滚动延迟加载模式，使用 class t-tree__lazyload * fix: 🐛 tree 组件，解决过滤允许折叠时，锁定的路径节点样式未变更的问题 --- style/web/components/tree/_index.less | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index 6f4d254ddf..8d829bf8ed 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -102,10 +102,21 @@ } } + // 允许点击 &--clickable { cursor: pointer; } + // 过滤时被命中为路径节点 + &--locked { + color: @tree-disabled-color; + } + + // 过滤时被命中 + &--matched { + color: inherit; + } + &--draggable { cursor: pointer; @@ -365,6 +376,11 @@ overflow-y: auto; } +// 虚拟滚动延迟加载模式 +.@{prefix}-tree__lazyload { + overflow-y: auto; +} + // 虚拟滚动游标 .@{prefix}-tree__vscroll-cursor { position: absolute; From 19338a21a6bce16fcd9ed84da403c27e7f27219d Mon Sep 17 00:00:00 2001 From: Y Date: Fri, 3 Mar 2023 18:47:12 +0800 Subject: [PATCH 189/312] style: update css token (#1169) * style: update css token * fix: fix lint * fix: fix cr --- style/mobile/_variables.less | 342 ++++++++++-------- .../components/action-sheet/_index.less | 2 +- .../mobile/components/action-sheet/_var.less | 2 +- style/mobile/components/avatar/_var.less | 8 +- style/mobile/components/back-top/_index.less | 4 +- style/mobile/components/back-top/_var.less | 4 +- style/mobile/components/badge/_index.less | 2 +- style/mobile/components/badge/_var.less | 2 +- .../components/button-group/_index.less | 2 +- .../mobile/components/button-group/_var.less | 2 +- style/mobile/components/button/_index.less | 10 +- style/mobile/components/button/_var.less | 35 +- style/mobile/components/calendar/_index.less | 10 +- style/mobile/components/cascader/_var.less | 12 +- style/mobile/components/cell-group/_var.less | 6 +- style/mobile/components/cell/_index.less | 14 +- style/mobile/components/cell/_var.less | 4 +- style/mobile/components/checkbox/_index.less | 2 +- style/mobile/components/checkbox/_var.less | 10 +- style/mobile/components/collapse/_var.less | 14 +- style/mobile/components/count-down/_var.less | 10 +- style/mobile/components/dialog/_index.less | 4 +- style/mobile/components/dialog/_var.less | 36 +- .../components/dropdown-menu/_index.less | 2 +- .../mobile/components/dropdown-menu/_var.less | 16 +- style/mobile/components/fab/_index.less | 2 +- style/mobile/components/grid-item/_var.less | 2 +- style/mobile/components/image/_index.less | 4 +- style/mobile/components/image/_var.less | 2 +- style/mobile/components/indexes/_var.less | 4 +- style/mobile/components/input/_index.less | 2 +- style/mobile/components/input/_var.less | 12 +- style/mobile/components/loading/_var.less | 2 +- style/mobile/components/message/_index.less | 2 +- style/mobile/components/message/_var.less | 4 +- style/mobile/components/navbar/_index.less | 2 +- style/mobile/components/navbar/_var.less | 2 +- .../mobile/components/notice-bar/_index.less | 10 +- style/mobile/components/notice-bar/_var.less | 4 +- style/mobile/components/picker/_index.less | 18 +- .../components/pull-down-refresh/_var.less | 2 +- style/mobile/components/radio/_index.less | 4 +- style/mobile/components/radio/_var.less | 14 +- style/mobile/components/rate/_var.less | 4 +- style/mobile/components/result/_index.less | 4 +- style/mobile/components/result/_var.less | 6 +- style/mobile/components/search/_index.less | 6 +- style/mobile/components/search/_var.less | 18 +- style/mobile/components/slider/_index.less | 10 +- style/mobile/components/slider/_var.less | 16 +- style/mobile/components/stepper/_var.less | 8 +- style/mobile/components/steps/_index.less | 12 +- style/mobile/components/steps/_mixin.less | 26 +- style/mobile/components/swiper/_index.less | 4 +- style/mobile/components/switch/_var.less | 10 +- style/mobile/components/tab-bar/_var.less | 8 +- style/mobile/components/tabs/_var.less | 8 +- style/mobile/components/tag/_index.less | 131 ++++--- style/mobile/components/tag/_var.less | 107 +++--- style/mobile/components/textarea/_var.less | 12 +- style/mobile/components/toast/_index.less | 18 +- style/mobile/components/toast/_var.less | 2 +- style/mobile/components/upload/_index.less | 2 +- style/mobile/components/upload/_var.less | 54 +-- style/mobile/mixins/_hairline.less | 10 +- style/web/components/guide/_index.less | 2 +- style/web/components/image-viewer/_index.less | 2 +- 67 files changed, 577 insertions(+), 550 deletions(-) diff --git a/style/mobile/_variables.less b/style/mobile/_variables.less index c0572de830..dd80555f15 100644 --- a/style/mobile/_variables.less +++ b/style/mobile/_variables.less @@ -2,169 +2,191 @@ @prefix: t; // 颜色色板 - -@primary-color-1: #ECF2FE; -@primary-color-2: #D4E3FC; -@primary-color-3: #BBD3FB; -@primary-color-4: #96BBF8; -@primary-color-5: #699EF5; -@primary-color-6: #4787F0; -@primary-color-7: #266FE8; -@primary-color-8: #0052D9; -@primary-color-9: #0034B5; -@primary-color-10: #001F97; - -@warning-color-1: #FEF3E6; -@warning-color-2: #F9E0C7; -@warning-color-3: #F7C797; -@warning-color-4: #F2995F; -@warning-color-5: #ED7B2F; -@warning-color-6: #D35A21; -@warning-color-7: #BA431B; -@warning-color-8: #9E3610; -@warning-color-9: #842B0B; -@warning-color-10: #5A1907; - -@error-color-1: #FDECEE; -@error-color-2: #F9D7D9; -@error-color-3: #F8B9BE; -@error-color-4: #F78D94; -@error-color-5: #F36D78; -@error-color-6: #E34D59; -@error-color-7: #C9353F; -@error-color-8: #B11F26; -@error-color-9: #951114; -@error-color-10: #680506; - -@success-color-1: #E8F8F2; -@success-color-2: #BCEBDC; -@success-color-3: #85DBBE; -@success-color-4: #48C79C; -@success-color-5: #00A870; -@success-color-6: #078D5C; -@success-color-7: #067945; -@success-color-8: #056334; -@success-color-9: #044F2A; -@success-color-10: #033017; - -@gray-color-1: #F3F3F3; -@gray-color-2: #EEEEEE; -@gray-color-3: #E7E7E7; -@gray-color-4: #DCDCDC; -@gray-color-5: #C5C5C5; -@gray-color-6: #A6A6A6; -@gray-color-7: #8B8B8B; -@gray-color-8: #777777; -@gray-color-9: #5E5E5E; -@gray-color-10: #4B4B4B; -@gray-color-11: #383838; -@gray-color-12: #2C2C2C; -@gray-color-13: #242424; -@gray-color-14: #181818; - -// 基础颜色 -@primary-color: @primary-color-8; // 色彩-品牌-可操作 -@warning-color: @warning-color-5; // 色彩-功能-警告 -@error-color: @error-color-6; // 色彩-功能-失败 -@success-color: @success-color-5; // 色彩-功能-成功 - -// 基础颜色的扩展 用于 hover / 禁用 / 点击 等状态 - -// 主题色扩展 -@primary-color-active: @primary-color-9; -@primary-color-disabled: @primary-color-3; - -// 警告色扩展 -@warning-color-active: @warning-color-6; -@warning-color-disabled: @warning-color-3; - -// 失败/错误色扩展 -@error-color-active: @error-color-7; -@error-color-disabled: @error-color-3; - -// 成功色扩展 -@success-color-active: @success-color-6; -@success-color-disabled: @success-color-3; -// 遮罩 -@mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出 -@mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用 - -// 背景色 -@bg-color: #fbfbfb; // 色彩-背景 -@bg-color-fade: #fbfbfb; // 色彩-中层背景 -@bg-color-active: #f5f5f5; // 色彩-hover / click 背景 / 搜索输入框 -@bg-color-disabled: #ffffff; // 色彩-disabled -@bg-color-block: #fff; // 色彩-模块 - -@bg-color-icon-fade: #cccccc; -@bg-color-icon-dark: #444444; - -// 文本颜色 -@text-level-1-color: rgba(0, 0, 0, .9); // 色彩-文字-一级 -@text-level-2-color: rgba(0, 0, 0, .6); // 色彩-文字-二级 -@text-level-3-color: rgba(0, 0, 0, .4); // 色彩-文字-三级 -@text-level-4-color: rgba(0, 0, 0, .26); // 色彩-文字-四级 -@text-color-disabled: @text-level-4-color; // 文字禁用色 -@text-anti-primary-color: rgba(255, 255, 255, .9); // 色彩-文字-主色反色 -@text-primary-color: @text-level-1-color; // 色彩-文字-主要 - -@placeholder-color: @text-level-3-color; - -// 背景色 -@bg-color-page: @gray-color-2; // 色彩 - page -@bg-color-container: #fff; // 色彩 - 容器 -@bg-color-container-active: @gray-color-3; // 色彩 - 容器 - active - -@bg-color-secondarycontainer: @gray-color-1; // 色彩 - 次级容器 -@bg-color-secondarycontainer-active: @gray-color-4; // 色彩 - 次级容器 - active - -@bg-color-component: @gray-color-3; // 色彩 - 组件 -@bg-color-component-active: @gray-color-6; // 色彩 - 组件 - active -@bg-color-component-disabled: @gray-color-1; // 色彩 - 组件 - disabled +@brand-color-1: var(--td-brand-color-1, #f2f3ff); +@brand-color-2: var(--td-brand-color-2, #d9e1ff); +@brand-color-3: var(--td-brand-color-3, #b5c7ff); +@brand-color-4: var(--td-brand-color-4, #8eabff); +@brand-color-5: var(--td-brand-color-5, #618dff); +@brand-color-6: var(--td-brand-color-6, #366ef4); +@brand-color-7: var(--td-brand-color-7, #0052d9); +@brand-color-8: var(--td-brand-color-8, #003cab); +@brand-color-9: var(--td-brand-color-9, #002a7c); +@brand-color-10: var(--td-brand-color-10, #001a57); + +@error-color-1: var(--td-error-color-1, #fff0ed); +@error-color-2: var(--td-error-color-2, #ffd8d2); +@error-color-3: var(--td-error-color-3, #ffb9b0); +@error-color-4: var(--td-error-color-4, #ff9285); +@error-color-5: var(--td-error-color-5, #f6685d); +@error-color-6: var(--td-error-color-6, #d54941); +@error-color-7: var(--td-error-color-7, #ad352f); +@error-color-8: var(--td-error-color-8, #881f1c); +@error-color-9: var(--td-error-color-9, #68070a); +@error-color-10: var(--td-error-color-10, #490002); + +@warning-color-1: var(--td-warning-color-1, #fff1e9); +@warning-color-2: var(--td-warning-color-2, #ffd9c2); +@warning-color-3: var(--td-warning-color-3, #ffb98c); +@warning-color-4: var(--td-warning-color-4, #fa9550); +@warning-color-5: var(--td-warning-color-5, #e37318); +@warning-color-6: var(--td-warning-color-6, #be5a00); +@warning-color-7: var(--td-warning-color-7, #954500); +@warning-color-8: var(--td-warning-color-8, #713300); +@warning-color-9: var(--td-warning-color-9, #532300); +@warning-color-10: var(--td-warning-color-10, #3b1700); + +@success-color-1: var(--td-success-color-1, #e3f9e9); +@success-color-2: var(--td-success-color-2, #c6f3d7); +@success-color-3: var(--td-success-color-3, #92dab2); +@success-color-4: var(--td-success-color-4, #56c08d); +@success-color-5: var(--td-success-color-5, #2ba471); +@success-color-6: var(--td-success-color-6, #008858); +@success-color-7: var(--td-success-color-7, #006c45); +@success-color-8: var(--td-success-color-8, #005334); +@success-color-9: var(--td-success-color-9, #003b23); +@success-color-10: var(--td-success-color-10, #002515); + +@gray-color-1: var(--td-gray-color-1, #f3f3f3); +@gray-color-2: var(--td-gray-color-2, #eeeeee); +@gray-color-3: var(--td-gray-color-3, #e7e7e7); +@gray-color-4: var(--td-gray-color-4, #dcdcdc); +@gray-color-5: var(--td-gray-color-5, #c5c5c5); +@gray-color-6: var(--td-gray-color-6, #a6a6a6); +@gray-color-7: var(--td-gray-color-7, #8b8b8b); +@gray-color-8: var(--td-gray-color-8, #777777); +@gray-color-9: var(--td-gray-color-9, #5e5e5e); +@gray-color-10: var(--td-gray-color-10, #4b4b4b); +@gray-color-11: var(--td-gray-color-11, #383838); +@gray-color-12: var(--td-gray-color-12, #2c2c2c); +@gray-color-13: var(--td-gray-color-13, #242424); +@gray-color-14: var(--td-gray-color-14, #181818); + +@font-gray-1: var(--td-font-gray-1, rgba(0, 0, 0, .9)); +@font-gray-2: var(--td-font-gray-2, rgba(0, 0, 0, .6)); +@font-gray-3: var(--td-font-gray-3, rgba(0, 0, 0, .4)); +@font-gray-4: var(--td-font-gray-4, rgba(0, 0, 0, .26)); + +@font-white-1: var(--td-font-white-1, rgba(255, 255, 255, 1)); +@font-white-2: var(--td-font-white-2, rgba(255, 255, 255, .55)); +@font-white-3: var(--td-font-white-3, rgba(255, 255, 255, .35)); +@font-white-4: var(--td-font-white-4, rgba(255, 255, 255, .22)); // 边框色 -@border-level-1-color: @gray-color-3; -@border-level-2-color: @gray-color-4; +@border-color: var(--td-border-color, @gray-color-3); // Spacer -@spacer: 4px; -@spacer-1: @spacer; // 间距-小-x -@spacer-2: @spacer * 2; // 间距-小 -@spacer-3: @spacer * 3; // 间距-中 -@spacer-4: @spacer * 4; // 间距-大 -@spacer-5: @spacer * 6; // 间距-大-x -@spacer-6: @spacer * 10; // 间距-大-xx +@spacer: var(--td-spacer, 8px); +@spacer-1: var(--td-spacer-1, 12px); // 间距-小-x +@spacer-2: var(--td-spacer-2, 16px); // 间距-小 +@spacer-3: var(--td-spacer-3, 24px); // 间距-中 +@spacer-4: var(--td-spacer-4, 32px); // 间距-大 +@spacer-5: var(--td-spacer-5, 48px); // 间距-大-x +@spacer-6: var(--td-spacer-6, 80px); // 间距-大-xx // Font -@font-size: 10px; -@font-size-xs: @font-size; // 字号-一级字号 -@font-size-s: @font-size * 1.2; // 字号-二级字号 -@font-size-base: @font-size * 1.4; // 字号-三级字号 -@font-size-l: @font-size * 1.6; // 字号-四级字号 -@font-size-xl: @font-size * 1.8; // 字号-五级字号 - -@text-line-height: 1.5; // - -@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规 -@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体 - -// Border Radius -@border-radius: 4px; // 圆角-全局 -@border-radius-50: 50%; // 圆角-全圆角 - -// 表单相关 -@form-height: 30px; -@form-text-color: @text-level-1-color; -@form-bg-color: @bg-color-block; -@form-border-color: @border-level-2-color; - -// shadow -@shadow-1: 1px 1px 5px 1px rgba(0, 0, 0, .03); -@shadow-2: 3px 3px 8px 2px rgba(0, 0, 0, .06); - -// 图标尺寸 -@icon-x: 16px; -@icon-default: 24px; - -// 暗色模式 -@dark-bg-color: #272B30; // 色彩-深色背景 +@font-size: var(--td-font-size, 10px); +@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号 +@font-size-s: var(--td-font-size-s, 12px); // 字号-二级字号 +@font-size-base: var(--td-font-size-base, 14px); // 字号-三级字号 +@font-size-m: var(--td-font-size-m, 16px); // 字号-二级字号 +@font-size-l: var(--td-font-size-l, 20px); // 字号-四级字号 +@font-size-xl: var(--td-font-size-xl, 36px); // 字号-五级字号 + +@font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规 +@font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体 + +// 圆角 +@radius-small: var(--td-radius-small, 3px); +@radius-default: var(--td-radius-default, 6px); +@radius-large: var(--td-radius-large, 9px); +@radius-extra-large: var(--td-radius-extra-large, 12px); +@radius-round: var(--td-radius-round, 999px); +@radius-circle: var(--td-radius-circle, 50%); + +// 阴影 +@shadow-1: var( + --td-shadow-1, + 0 1px 10px rgba(0, 0, 0, 5%), + 0 4px 5px rgba(0, 0, 0, 8%), + 0 2px 4px -1px rgba(0, 0, 0, 12%) +); +@shadow-2: var( + --td-shadow-2, + 0 3px 14px 2px rgba(0, 0, 0, 5%), + 0 8px 10px 1px rgba(0, 0, 0, 6%), + 0 5px 5px -3px rgba(0, 0, 0, 10%) +); +@shadow-3: var( + --td-shadow-3, + 0 6px 30px 5px rgba(0, 0, 0, 5%), + 0 16px 24px 2px rgba(0, 0, 0, 4%), + 0 8px 10px -5px rgba(0, 0, 0, 8%) +); +@shadow-4: var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, .06)); + +// 动画 +@anim-time-fn-easing: var(--td-anim-time-fn-easing, cubic-bezier(.38, 0, .24, 1)); +@anim-time-fn-ease-out: var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, .15, 1)); +@anim-time-fn-ease-in: var(--td-anim-time-fn-ease-in, cubic-bezier(.82, 0, 1, .9)); +@anim-duration-base: var(--td-anim-duration-base, .2s); +@anim-duration-moderate: var(--td-anim-duration-moderate, .24s); +@anim-duration-slow: var(--td-anim-duration-slow, .28s); + +// 背景色 +@bg-color-page: var(--td-bg-color-page, @gray-color-1); // 色彩 - page +@bg-color-container: var(--td-bg-color-container, @font-white-1); // 色彩 - 容器 +@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3); // 色彩 - 容器 - active + +@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1); // 色彩 - 次级容器 +@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active, @gray-color-4); // 色彩 - 次级容器 - active + +@bg-color-component: var(--td-bg-color-component, @gray-color-3); // 色彩 - 组件 +@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6); // 色彩 - 组件 - active +@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2); // 色彩 - 组件 - disabled + +@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4); +@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6); + +@component-stroke: var(--td-component-stroke, @gray-color-3); +@component-border: var(--td-component-border, @gray-color-4); + +// 主题 +@brand-color: var(--td-brand-color, @brand-color-7); +@brand-color-active: var(--td-brand-color-active, @brand-color-8); +@brand-color-disabled: var(--td-brand-color-disabled, @brand-color-3); +@brand-color-focus: var(--td-brand-color-focus, @brand-color-1); +@brand-color-light: var(--td-brand-color-light, @brand-color-1); +@brand-color-light-active: var(--td-brand-color-light-active, @brand-color-2); + +@error-color: var(--td-error-color, @error-color-6); +@error-color-active: var(--td-error-color-active, @error-color-7); +@error-color-disabled: var(--td-error-color-disabled, @error-color-3); +@error-color-focus: var(--td-error-color-focus, @error-color-2); +@error-color-light: var(--td-error-color-light, @error-color-1); + +@warning-color: var(--td-warning-color, @warning-color-5); +@warning-color-active: var(--td-warning-color-active, @warning-color-6); +@warning-color-disabled: var(--td-warning-color-disabled, @warning-color-3); +@warning-color-focus: var(--td-warning-color-focus, @warning-color-2); +@warning-color-light: var(--td-warning-color-light, @warning-color-1); + +@success-color: var(--td-success-color, @success-color-5); +@success-color-active: var(--td-success-color-active, @success-color-6); +@success-color-disabled: var(--td-success-color-disabled, @success-color-3); +@success-color-focus: var(--td-success-color-focus, @success-color-2); +@success-color-light: var(--td-success-color-light, @success-color-1); + +// 文字 +@text-color-primary: var(--td-text-color-primary, @font-gray-1); // 色彩-文字-主要 +@text-color-secondary: var(--td-text-color-secondary, @font-gray-2); // 色彩-文字-次要 +@text-color-placeholder: var(--td-text-color-placeholder, @font-gray-3); // 色彩-文字-占位符/说明 +@text-color-disabled: var(--td-text-color-disabled, @font-gray-4); // 色彩-文字-禁用 +@text-color-anti: var(--td-text-color-anti, @font-white-1); // 色彩-文字-反色 +@text-color-brand: var(--td-text-color-brand, @brand-color); // 色彩-文字-品牌 +@text-color-link: var(--td-text-color-link, @brand-color); // 色彩-文字-链接 + +// 遮罩 +@mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出 +@mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用 + +@text-line-height: 1.5; diff --git a/style/mobile/components/action-sheet/_index.less b/style/mobile/components/action-sheet/_index.less index 03aaa60fd4..11d7359eba 100644 --- a/style/mobile/components/action-sheet/_index.less +++ b/style/mobile/components/action-sheet/_index.less @@ -129,7 +129,7 @@ } &-item.on { - background-color: @primary-color; + background-color: @brand-color; } } } diff --git a/style/mobile/components/action-sheet/_var.less b/style/mobile/components/action-sheet/_var.less index 271e21c4db..bc3720a169 100644 --- a/style/mobile/components/action-sheet/_var.less +++ b/style/mobile/components/action-sheet/_var.less @@ -30,4 +30,4 @@ @action-sheet-grid-indicator-color: #CCCCCC; -@action-sheet-grid-text-color: @text-level-1-color; +@action-sheet-grid-text-color: @text-color-primary; diff --git a/style/mobile/components/avatar/_var.less b/style/mobile/components/avatar/_var.less index 5af8d6464d..01580f6da9 100644 --- a/style/mobile/components/avatar/_var.less +++ b/style/mobile/components/avatar/_var.less @@ -1,6 +1,6 @@ //颜色 @avatar-bg-color: rgba(212,227,252,1); -@avatar-text-color: @primary-color; +@avatar-text-color: @brand-color; //头像大小 @avatar-size-small: 32px; @@ -13,12 +13,12 @@ @avatar-font-large: @font-size-l; //图标 -@avatar-icon-small: @icon-x; -@avatar-icon-medium: @icon-default; +@avatar-icon-small: 16px; +@avatar-icon-medium: 24px; @avatar-icon-large: 32px; //边框 -@avatar-border-radius-cicle: @border-radius-50; +@avatar-border-radius-cicle: @radius-circle; @avatar-border-radius-round: 3px; @avatar-border-color: @bg-color-container; diff --git a/style/mobile/components/back-top/_index.less b/style/mobile/components/back-top/_index.less index 54c546a6b7..b5dd7079c3 100644 --- a/style/mobile/components/back-top/_index.less +++ b/style/mobile/components/back-top/_index.less @@ -15,7 +15,7 @@ transition: opacity .5s ease; &--round { - border-radius: @border-radius-50; + border-radius: @radius-circle; background-color: @back-top-backgroud-color-white; color: @back-top-text-color-black; border: 1px solid; @@ -43,7 +43,7 @@ &--round-dark { background-color: @back-top-backgroud-color-black; color: @back-top-text-color-white; - border-radius: @border-radius-50; + border-radius: @radius-circle; flex-direction: column; } diff --git a/style/mobile/components/back-top/_var.less b/style/mobile/components/back-top/_var.less index 03fc8ba1ef..2265ab1ef5 100644 --- a/style/mobile/components/back-top/_var.less +++ b/style/mobile/components/back-top/_var.less @@ -12,7 +12,7 @@ @back-top-text-size: @font-size; // 文案颜色 -@back-top-text-color-black: @text-primary-color; +@back-top-text-color-black: @text-color-primary; @back-top-text-color-white: @bg-color-container; // 背景颜色 @@ -20,4 +20,4 @@ @back-top-backgroud-color-white: @bg-color-container; // 边框颜色 -@back-top-border-color: @border-level-2-color; +@back-top-border-color: @component-border; diff --git a/style/mobile/components/badge/_index.less b/style/mobile/components/badge/_index.less index c43e278c80..740cb5e36d 100644 --- a/style/mobile/components/badge/_index.less +++ b/style/mobile/components/badge/_index.less @@ -36,7 +36,7 @@ &--dot { height: @badge-dot-height; min-width: @badge-dot-height; - border-radius: @border-radius-50; + border-radius: @radius-circle; padding: 0; } diff --git a/style/mobile/components/badge/_var.less b/style/mobile/components/badge/_var.less index 59ec2421f8..510fd6645f 100644 --- a/style/mobile/components/badge/_var.less +++ b/style/mobile/components/badge/_var.less @@ -11,7 +11,7 @@ // 如：@button-line-bg-color-hover // 如：@button-line-height-s -@badge-text-color: @text-anti-primary-color; +@badge-text-color: @text-color-anti; @badge-color: @error-color; @badge-font-size: @font-size-xs; @badge-height: 16px; diff --git a/style/mobile/components/button-group/_index.less b/style/mobile/components/button-group/_index.less index 4e0480bdc8..c6fdd03097 100644 --- a/style/mobile/components/button-group/_index.less +++ b/style/mobile/components/button-group/_index.less @@ -20,7 +20,7 @@ left: 0; content: ""; width: 0; - border-left: solid @border-level-1-color 1px; + border-left: solid @component-stroke 1px; } } diff --git a/style/mobile/components/button-group/_var.less b/style/mobile/components/button-group/_var.less index e80cb769e4..ce08a0c061 100644 --- a/style/mobile/components/button-group/_var.less +++ b/style/mobile/components/button-group/_var.less @@ -1,4 +1,4 @@ -@button-group-background-color: @bg-color-block; +@button-group-background-color: @bg-color-container; @button-group-default-height: 44px; diff --git a/style/mobile/components/button/_index.less b/style/mobile/components/button/_index.less index 6b8432fa5f..fda92630b3 100644 --- a/style/mobile/components/button/_index.less +++ b/style/mobile/components/button/_index.less @@ -33,7 +33,7 @@ .@{prefix}-icon + .@{prefix}-button__text:not(:empty), .@{prefix}-loading + .@{prefix}-button__text:not(:empty) { - margin-left: @spacer; + margin-left: calc(@spacer / 2); } // 主要按钮 @@ -44,22 +44,22 @@ .button-attr-color("text-gray", color); &.@{prefix}-button--primary { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("primary", background-color); } &.@{prefix}-button--success { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("success", background-color); } &.@{prefix}-button--warning { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("warning", background-color); } &.@{prefix}-button--danger { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("danger", background-color); } diff --git a/style/mobile/components/button/_var.less b/style/mobile/components/button/_var.less index f48e1a1a72..69d9206aa1 100644 --- a/style/mobile/components/button/_var.less +++ b/style/mobile/components/button/_var.less @@ -8,7 +8,7 @@ // @btn-height-block: 44px; // 圆角 -@btn-border-radius: @border-radius; +@btn-border-radius: @radius-small; @btn-shape-border-radius-s: (@btn-height-s / 2); @btn-shape-border-radius-default: (@btn-height-default / 2); @btn-shape-border-radius-l: (@btn-height-l / 2); @@ -21,7 +21,7 @@ @btn-font-small: @font-size-base; // 图标大小 // @btn-icon-size: 22px; -@btn-loading-size: (@font-size * 1.4); +@btn-loading-size: calc(@font-size * 1.4); // 图标大小 @btn-icon-size-small: 20px; @@ -29,17 +29,14 @@ @btn-icon-size-large: 24px; // padding -@btn-padding-horizontal: (@spacer * 4); -// @btn-padding-horizontal-s: (@spacer * 4); -// @btn-padding-horizontal-default: (@spacer * 5); -// @btn-padding-horizontal-l: (@spacer * 4); +@btn-padding-horizontal: 16px; @btn-border-width: 1px; // 状态色 - 主色 -@btn-color-primary: @primary-color; -@btn-color-primary-active: @primary-color-active; -@btn-color-primary-disabled: @primary-color-disabled; +@btn-color-primary: @brand-color; +@btn-color-primary-active: @brand-color-active; +@btn-color-primary-disabled: @brand-color-disabled; // 状态色 - 成功 @btn-color-success: @success-color; @@ -58,13 +55,13 @@ // 状态色 - 白 背景 @btn-color-white-bg: @btn-bg-color-container; -@btn-color-white-bg-active: @bg-color-active; +@btn-color-white-bg-active: @bg-color-component-active; @btn-color-white-bg-disabled: @bg-color-component-disabled; // 状态色 - 白 ghost @btn-color-white-ghost: @bg-color-container; @btn-color-white-ghost-active: @bg-color-container-active; -@btn-color-white-ghost-disabled: @border-level-2-color; +@btn-color-white-ghost-disabled: @component-border; // 状态色 - 灰 背景 @btn-color-gray-bg: @bg-color-component; @@ -77,22 +74,22 @@ @btn-color-text-bg-disabled: transparent; // 状态色 - border 灰 -@btn-color-border-gray: @border-level-2-color; -@btn-color-border-gray-active: @border-level-2-color; -@btn-color-border-gray-disabled: @border-level-2-color; +@btn-color-border-gray: @component-border; +@btn-color-border-gray-active: @component-border; +@btn-color-border-gray-disabled: @component-border; // 状态色 - 文字 for 描边 -@btn-color-text: @text-primary-color; -@btn-color-text-active: @primary-color-active; +@btn-color-text: @text-color-primary; +@btn-color-text-active: @brand-color-active; @btn-color-text-disabled: @text-color-disabled; // 状态色 - 灰字 for base default | 灰色文字按钮 -@btn-color-text-gray: @text-primary-color; -@btn-color-text-gray-active: @text-primary-color; +@btn-color-text-gray: @text-color-primary; +@btn-color-text-gray-active: @text-color-primary; @btn-color-text-gray-disabled: @text-color-disabled; @btn-color-none: transparent; @btn-color-none-active: transparent; @btn-color-none-disabled: transparent; -@btn-text-variant-base-color: @text-anti-primary-color; +@btn-text-variant-base-color: @text-color-anti; diff --git a/style/mobile/components/calendar/_index.less b/style/mobile/components/calendar/_index.less index e67c645368..af15037b7d 100644 --- a/style/mobile/components/calendar/_index.less +++ b/style/mobile/components/calendar/_index.less @@ -1,11 +1,11 @@ @import "../../base.less"; @title-font-size: 18px; -@title-color: @text-level-1-color; -@days-item-color: @text-level-2-color; -@dates-item-suffix-color: @text-level-3-color; -@calendar-disabled-color: @text-level-4-color; -@calendar-centre-color: @primary-color-1; +@title-color: @text-color-primary; +@days-item-color: @text-color-secondary; +@dates-item-suffix-color: @text-color-placeholder; +@calendar-disabled-color: @text-color-disabled; +@calendar-centre-color: @brand-color-light; .@{prefix}-calendar { position: relative; diff --git a/style/mobile/components/cascader/_var.less b/style/mobile/components/cascader/_var.less index 15904d339f..787113d0ed 100644 --- a/style/mobile/components/cascader/_var.less +++ b/style/mobile/components/cascader/_var.less @@ -3,14 +3,14 @@ @wrapper-min-height: 400px; @cascader-disabled-color: #c0c0c0; -@cascader-title-color: @text-level-1-color; -@cascader-options-title-color: @text-level-3-color; +@cascader-title-color: @text-color-primary; +@cascader-options-title-color: @text-color-placeholder; -@cascader-border-color: @border-level-1-color; +@cascader-border-color: @component-stroke; // steps @cascader-step-height: 44px; -@cascader-step-active-color: @primary-color; +@cascader-step-active-color: @brand-color; @cascader-step-dot-size: 8px; -@cascader-step-dot-color: @text-level-4-color; -@cascader-step-line-color: @text-level-4-color; +@cascader-step-dot-color: @text-color-disabled; +@cascader-step-line-color: @text-color-disabled; diff --git a/style/mobile/components/cell-group/_var.less b/style/mobile/components/cell-group/_var.less index acbf7d8025..017db6a011 100644 --- a/style/mobile/components/cell-group/_var.less +++ b/style/mobile/components/cell-group/_var.less @@ -1,7 +1,7 @@ // CellGroup -@cell-group-background-color: transparent; //@bg-color-block; -@cell-group-color: @text-level-3-color; +@cell-group-background-color: transparent; //@bg-color-container; +@cell-group-color: @text-color-placeholder; @cell-group-background-color: #F5F5F5; -@cell-group-padding: @spacer-3 16px ; +@cell-group-padding: @spacer-1 16px ; @cell-group-font-size: @font-size-base; @cell-group-line-height: 22px; diff --git a/style/mobile/components/cell/_index.less b/style/mobile/components/cell/_index.less index 3819389e6a..ffbb6d5381 100644 --- a/style/mobile/components/cell/_index.less +++ b/style/mobile/components/cell/_index.less @@ -17,11 +17,11 @@ &__title { flex: 1 1 auto; - color: @text-level-1-color; + color: @text-color-primary; } &__description { - color: @text-level-3-color; + color: @text-color-placeholder; font-size: @cell-summary-font-size; line-height: 22px; margin-top: @spacer; @@ -31,7 +31,7 @@ flex: 1; text-align: right; overflow: hidden; - color: @text-level-3-color; + color: @text-color-placeholder; display: flex; justify-content: flex-end; align-items: center; @@ -45,9 +45,9 @@ &__left-icon { flex-shrink: 0; - color: @text-level-1-color; + color: @text-color-primary; line-height: 24px; - margin-right: @spacer-2; + margin-right: @spacer; font-size: 24px; align-self: flex-start; @@ -57,9 +57,9 @@ } &__right-icon { - color: @text-level-3-color; + color: @text-color-placeholder; line-height: 24px; - margin-left: @spacer-2; + margin-left: @spacer; font-size: 24px; & > .@{prefix}-icon { diff --git a/style/mobile/components/cell/_var.less b/style/mobile/components/cell/_var.less index be029ccea5..5147dce1c3 100644 --- a/style/mobile/components/cell/_var.less +++ b/style/mobile/components/cell/_var.less @@ -4,9 +4,9 @@ @cell-label-width: 80px; -@cell-border-color: @border-level-1-color; +@cell-border-color: @component-stroke; -@cell-background-color: @bg-color-block; +@cell-background-color: @bg-color-container; @cell-font-size: @font-size-l; diff --git a/style/mobile/components/checkbox/_index.less b/style/mobile/components/checkbox/_index.less index 84c96ed69f..6940916f12 100644 --- a/style/mobile/components/checkbox/_index.less +++ b/style/mobile/components/checkbox/_index.less @@ -18,7 +18,7 @@ line-height: 24px; &-left { - margin-right: @spacer-2; + margin-right: @spacer; //padding-right: @checkbox-label-wrap-left-padding; } } diff --git a/style/mobile/components/checkbox/_var.less b/style/mobile/components/checkbox/_var.less index 02b044890a..0396fcd268 100644 --- a/style/mobile/components/checkbox/_var.less +++ b/style/mobile/components/checkbox/_var.less @@ -1,15 +1,15 @@ -@checkbox-title-font-size: @font-size * 1.6; -@checkbox-title-color: @text-level-1-color; +@checkbox-title-font-size: calc(@font-size * 1.6); +@checkbox-title-color: @text-color-primary; @checkbox-title-color-disabled: @text-color-disabled; @checkbox-icon-size: 22px; -@checkbox-icon-checked: @font-size * 2.4; +@checkbox-icon-checked: calc(@font-size * 2.4); @checkbox-icon-unchecked-color: @gray-color-4; -@checkbox-icon-checked-color: @primary-color; +@checkbox-icon-checked-color: @brand-color; -@checkbox-icon-margin: @spacer-2; +@checkbox-icon-margin: @spacer; @checkbox-content-inner-top-margin: 4px; diff --git a/style/mobile/components/collapse/_var.less b/style/mobile/components/collapse/_var.less index b70536e16f..eb6fb96afb 100644 --- a/style/mobile/components/collapse/_var.less +++ b/style/mobile/components/collapse/_var.less @@ -1,12 +1,12 @@ -@collapse-header-text-color: @text-level-1-color; -@collapse-content-text-color: @text-level-1-color; -@collapse-header-text-diabled-color: @text-level-4-color; -@collapse-list-content-text-color: @text-level-1-color; +@collapse-header-text-color: @text-color-primary; +@collapse-content-text-color: @text-color-primary; +@collapse-header-text-diabled-color: @text-color-disabled; +@collapse-list-content-text-color: @text-color-primary; // font-size -@collapse-title-font-size: @font-size * 1.6; -@collapse-extra-font-size: @font-size * 1.6; -@collapse-content-font-size: @font-size * 1.4; +@collapse-title-font-size: calc(@font-size * 1.6); +@collapse-extra-font-size: calc(@font-size * 1.6); +@collapse-content-font-size: calc(@font-size * 1.4); @collapse-header-height: 48px; @collapse-horizontal-padding: 16px; diff --git a/style/mobile/components/count-down/_var.less b/style/mobile/components/count-down/_var.less index 3f3f6eff8a..68a65e8737 100644 --- a/style/mobile/components/count-down/_var.less +++ b/style/mobile/components/count-down/_var.less @@ -17,7 +17,7 @@ // theme="default" && splitWidthUnit={true} @countdown-digit-font-size-default-split-with-unit-small: @font-size-l; @countdown-digit-font-size-default-split-with-unit-medium: @font-size-xl; -@countdown-digit-font-size-default-split-with-unit-large: @font-size * 2; +@countdown-digit-font-size-default-split-with-unit-large: calc(@font-size * 2); // theme="square" @countdown-digit-font-size-square-small: @font-size-s; @countdown-digit-font-size-square-medium: @font-size-base; @@ -39,11 +39,11 @@ // digit border-radius // theme="square" -@countdown-digit-border-radius-square-small: @border-radius; -@countdown-digit-border-radius-square-medium: @border-radius; -@countdown-digit-border-radius-square-large: @border-radius + 2px; +@countdown-digit-border-radius-square-small: @radius-small; +@countdown-digit-border-radius-square-medium: @radius-small; +@countdown-digit-border-radius-square-large: calc(@radius-small + 2px); // theme="round" -@countdown-digit-border-radius-round: @border-radius-50; +@countdown-digit-border-radius-round: @radius-circle; // digit size // theme="square" @countdown-digit-size-square-small: 20px; diff --git a/style/mobile/components/dialog/_index.less b/style/mobile/components/dialog/_index.less index 300ddf0491..0a12272852 100644 --- a/style/mobile/components/dialog/_index.less +++ b/style/mobile/components/dialog/_index.less @@ -95,14 +95,14 @@ flex: 1; &--primary { - color: @primary-color; + color: @brand-color; } } &__text { /* stylelint-disable-line */ & + .@{prefix}-dialog__input { - margin-top: @dialog-input-margin-top * 2; + margin-top: calc(@dialog-input-margin-top * 2); } } diff --git a/style/mobile/components/dialog/_var.less b/style/mobile/components/dialog/_var.less index 9290fe8394..491fc62acb 100644 --- a/style/mobile/components/dialog/_var.less +++ b/style/mobile/components/dialog/_var.less @@ -1,23 +1,23 @@ // color @dialog-bg-color: #fff; -@dialog-title-text-color: @text-primary-color; -@dialog-body-text-color: @text-level-2-color; +@dialog-title-text-color: @text-color-primary; +@dialog-body-text-color: @text-color-secondary; @dialog-btn-border-color: #eee; @dialog-btn-bg-color-active: rgba(0, 0, 0, .05); -@dialog-btn-default-color: @text-level-1-color; -@dialog-btn-primary-color: @primary-color; +@dialog-btn-default-color: @text-color-primary; +@dialog-btn-primary-color: @brand-color; @dialog-btn-success-color: @success-color; @dialog-btn-warning-color: @warning-color; @dialog-btn-error-color: @error-color; @dialog-input-bg-color: #f0f0f0; -@dialog-input-color: @text-level-1-color; -@dialog-input-placeholder-color: @text-level-4-color; +@dialog-input-color: @text-color-primary; +@dialog-input-placeholder-color: @text-color-disabled; // font-size -@dialog-title-font-size: @font-size * 1.6; -@dialog-body-font-size: @font-size * 1.6; -@dialog-btn-font-size: @font-size * 1.6; -@dialog-input-font-size: @font-size * 1.6; +@dialog-title-font-size: calc(@font-size * 1.6); +@dialog-body-font-size: calc(@font-size * 1.6); +@dialog-btn-font-size: calc(@font-size * 1.6); +@dialog-input-font-size: calc(@font-size * 1.6); // size @dialog-btn-height: 56px; @@ -34,17 +34,17 @@ @dialog-body-max-height: 288px; // padding -@dialog-header-padding: 32px @spacer-5 0; -@dialog-body-padding: 0 @spacer-5; +@dialog-header-padding: 32px calc(@spacer * 2.5) 0; +@dialog-body-padding: 0 calc(@spacer * 2.5); -@dialog-body-first-child-padding: 32px @spacer-5; -@dialog-btn-padding: 0 @spacer-3; -@dialog-input-padding: @spacer * 1.5; +@dialog-body-first-child-padding: 32px calc(@spacer * 2.5); +@dialog-btn-padding: 0 @spacer-1; +@dialog-input-padding: calc(@spacer * .75); // margin @dialog-footer-margin-top: 32px; -@dialog-input-margin-top: @spacer * 1.5; +@dialog-input-margin-top: calc(@spacer * .75); // border-radius -@dialog-border-radius: @border-radius; -@dialog-input-radius: @border-radius / 2; +@dialog-border-radius: @radius-small; +@dialog-input-radius: calc(@radius-small / 2); diff --git a/style/mobile/components/dropdown-menu/_index.less b/style/mobile/components/dropdown-menu/_index.less index e5a52a59bd..747c219c3e 100644 --- a/style/mobile/components/dropdown-menu/_index.less +++ b/style/mobile/components/dropdown-menu/_index.less @@ -179,7 +179,7 @@ .@{prefix}-radio { &.@{prefix}-is-checked .@{prefix}-radio__content-title { - color: @primary-color; + color: @brand-color; } } } diff --git a/style/mobile/components/dropdown-menu/_var.less b/style/mobile/components/dropdown-menu/_var.less index a89d07e87c..e9e01d55bd 100644 --- a/style/mobile/components/dropdown-menu/_var.less +++ b/style/mobile/components/dropdown-menu/_var.less @@ -1,13 +1,13 @@ -@dropdown-menu-primary-color: @primary-color; -@dropdown-menu-primary-color-1:@primary-color-1; +@dropdown-menu-primary-color: @brand-color; +@dropdown-menu-primary-color-1: @brand-color-light; -@dropdown-menu-color-block: @bg-color-block; +@dropdown-menu-color-block: @bg-color-container; -@dropdown-menu-disabled-color: @text-level-4-color; +@dropdown-menu-disabled-color: @text-color-disabled; -@dropdown-menu-level-2-color: @text-level-2-color; +@dropdown-menu-level-2-color: @text-color-secondary; -@dropdown-menu-level-1-color: @text-level-1-color; +@dropdown-menu-level-1-color: @text-color-primary; @dropdown-menu-tree-col1-color: #f5f5f5; @@ -15,7 +15,7 @@ @dropdown-item-height: 100%; -@dropdown-item-border-radius: @border-radius; +@dropdown-item-border-radius: @radius-small; @cell-vertical-padding: 12px; @cell-horizontal-padding: 16px; -@cell-border-color: @border-level-1-color; +@cell-border-color: @component-stroke; diff --git a/style/mobile/components/fab/_index.less b/style/mobile/components/fab/_index.less index c1f4be40ca..f67386bf16 100644 --- a/style/mobile/components/fab/_index.less +++ b/style/mobile/components/fab/_index.less @@ -27,6 +27,6 @@ &--icon-only { padding: 0; - border-radius: @border-radius-50; + border-radius: @radius-circle; } } diff --git a/style/mobile/components/grid-item/_var.less b/style/mobile/components/grid-item/_var.less index 49b70eaeb1..2fab1ef7a9 100644 --- a/style/mobile/components/grid-item/_var.less +++ b/style/mobile/components/grid-item/_var.less @@ -14,4 +14,4 @@ @grid-item-hover-bg-color: #f2f3f5; -@grid-item-border-color: @border-level-1-color; +@grid-item-border-color: @component-stroke; diff --git a/style/mobile/components/image/_index.less b/style/mobile/components/image/_index.less index e2db044aaa..91a96f7e98 100644 --- a/style/mobile/components/image/_index.less +++ b/style/mobile/components/image/_index.less @@ -33,11 +33,11 @@ } .@{prefix}-image--circle { - border-radius: @border-radius-50; + border-radius: @radius-circle; } .@{prefix}-image--round { - border-radius: @border-radius; + border-radius: @radius-small; } .@{prefix}-image--square { diff --git a/style/mobile/components/image/_var.less b/style/mobile/components/image/_var.less index 18fdea2b72..6ffb23aae8 100644 --- a/style/mobile/components/image/_var.less +++ b/style/mobile/components/image/_var.less @@ -2,7 +2,7 @@ @image-background-color: @bg-color-page; // 默认提示文字颜色 -@image-text-color: @text-level-3-color; +@image-text-color: @text-color-placeholder; // 图标大小 @image-icon-size: 22px; diff --git a/style/mobile/components/indexes/_var.less b/style/mobile/components/indexes/_var.less index 83c03f284e..75dff28088 100644 --- a/style/mobile/components/indexes/_var.less +++ b/style/mobile/components/indexes/_var.less @@ -1,7 +1,7 @@ @indexes-bg-color: #F5F5F5; -@indexes-active-color: @primary-color; +@indexes-active-color: @brand-color; -@indexes-anchor-color: @text-level-1-color; +@indexes-anchor-color: @text-color-primary; @indexes-anchor-font-size: @font-size-l; diff --git a/style/mobile/components/input/_index.less b/style/mobile/components/input/_index.less index 135d46664c..97f569f980 100644 --- a/style/mobile/components/input/_index.less +++ b/style/mobile/components/input/_index.less @@ -10,7 +10,7 @@ .@{prefix}-cell__title { width: @input-label-width; flex: none; - margin-right: @spacer-4; + margin-right: @spacer-2; display: flex; } diff --git a/style/mobile/components/input/_var.less b/style/mobile/components/input/_var.less index 0c2c974f47..df0c014cf2 100644 --- a/style/mobile/components/input/_var.less +++ b/style/mobile/components/input/_var.less @@ -1,16 +1,16 @@ @input-label-width: 80px; -@input-label-text-color: @text-level-1-color; +@input-label-text-color: @text-color-primary; -@input-text-color: @text-level-1-color; +@input-text-color: @text-color-primary; -@input-placeholder-text-color: @text-level-3-color; +@input-placeholder-text-color: @text-color-placeholder; -@input-disabled-text-color: @text-level-3-color; +@input-disabled-text-color: @text-color-placeholder; -@input-suffix-color: @text-level-1-color; +@input-suffix-color: @text-color-primary; -@input-icon-color: @text-level-3-color; +@input-icon-color: @text-color-placeholder; @input-error-text-color: @error-color; diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index 687c1d82ae..9c1ca70d3f 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -3,7 +3,7 @@ // 字体 @loading-text-line-height: @text-line-height; -@loading-text-color: @text-level-1-color; +@loading-text-color: @text-color-primary; @loading-text-size: @font-size-base; @loading-text-size-small: @font-size-s; diff --git a/style/mobile/components/message/_index.less b/style/mobile/components/message/_index.less index 0a038de355..db3f0a27d4 100644 --- a/style/mobile/components/message/_index.less +++ b/style/mobile/components/message/_index.less @@ -56,7 +56,7 @@ } &--info { - color: @primary-color; + color: @brand-color; } &--success { diff --git a/style/mobile/components/message/_var.less b/style/mobile/components/message/_var.less index af34e4a2a9..d912269ecb 100644 --- a/style/mobile/components/message/_var.less +++ b/style/mobile/components/message/_var.less @@ -2,7 +2,7 @@ @message-margin-y: @message-margin-x; -@message-text-color: @text-anti-primary-color; +@message-text-color: @text-color-anti; @message-text-font-size: @font-size-base; @@ -26,7 +26,7 @@ @message-icon-margin-left: 8px; -@message-border-radius: @border-radius; +@message-border-radius: @radius-small; @message-z-index: 5000; diff --git a/style/mobile/components/navbar/_index.less b/style/mobile/components/navbar/_index.less index f5d1a6fb7c..a26914f0b6 100644 --- a/style/mobile/components/navbar/_index.less +++ b/style/mobile/components/navbar/_index.less @@ -3,7 +3,7 @@ @import "./_var.less"; .@{prefix}-navbar { - background-color: @bg-color-block; + background-color: @bg-color-container; position: relative; display: flex; height: @navbar-height; diff --git a/style/mobile/components/navbar/_var.less b/style/mobile/components/navbar/_var.less index 56138e847e..4eec4bc664 100644 --- a/style/mobile/components/navbar/_var.less +++ b/style/mobile/components/navbar/_var.less @@ -12,6 +12,6 @@ @navbar-icon-font-size: 24px; -@navbar-font-color: @text-level-1-color; +@navbar-font-color: @text-color-primary; @navbar-close-marginleft: 12px; diff --git a/style/mobile/components/notice-bar/_index.less b/style/mobile/components/notice-bar/_index.less index 5faa8f79f8..625c1ed5b4 100644 --- a/style/mobile/components/notice-bar/_index.less +++ b/style/mobile/components/notice-bar/_index.less @@ -75,11 +75,11 @@ &__inner { display: flex; - padding: @spacer-3 @spacer-4; + padding: @spacer-1 @spacer-2; } &__hd { - margin-right: @spacer-2; + margin-right: @spacer; } &__bd { @@ -125,7 +125,7 @@ padding-left: @spacer-2; line-height: 1.5; font-size: @noticebar-text-font-size; - color: @primary-color; + color: @brand-color; text-decoration: underline; } @@ -134,7 +134,7 @@ } &__ft { - margin-left: @spacer * 5; + margin-left: calc(@spacer * 2.5); } .@{prefix}-icon, @@ -145,6 +145,6 @@ } & + & { - margin-top: @spacer * 5; + margin-top: calc(@spacer * 2.5); } } diff --git a/style/mobile/components/notice-bar/_var.less b/style/mobile/components/notice-bar/_var.less index 65c8a3c4f7..ee49fcfd73 100644 --- a/style/mobile/components/notice-bar/_var.less +++ b/style/mobile/components/notice-bar/_var.less @@ -18,7 +18,7 @@ @noticebar-bg-color-error: #FDECEE; // 文本色 -@noticebar-text-color-info: @primary-color; +@noticebar-text-color-info: @brand-color; @noticebar-text-color-success: @success-color; @noticebar-text-color-warning: @warning-color; @noticebar-text-color-error: @error-color; @@ -26,7 +26,7 @@ // 文本大小 @noticebar-text-font-size: 14px; -@noticebar-icon-color-info: @primary-color; +@noticebar-icon-color-info: @brand-color; @noticebar-icon-color-success: @success-color; @noticebar-icon-color-warning: @warning-color; @noticebar-icon-color-error: @error-color; diff --git a/style/mobile/components/picker/_index.less b/style/mobile/components/picker/_index.less index 0989644e30..af5be9e9f6 100644 --- a/style/mobile/components/picker/_index.less +++ b/style/mobile/components/picker/_index.less @@ -13,7 +13,7 @@ align-items: center; justify-content: space-between; height: @picker-toolbar--height; - box-shadow: inset 0 -.5px 0 0 @border-level-1-color; + box-shadow: inset 0 -.5px 0 0 @component-stroke; overflow: hidden; button { @@ -29,16 +29,16 @@ } .@{prefix}-picker__title { - color: @text-level-1-color; + color: @text-color-primary; font-weight: @picker--font-weight; } .@{prefix}-picker__cancel { - color: @text-level-2-color; + color: @text-color-secondary; } .@{prefix}-picker__confirm { - color: @primary-color; + color: @brand-color; } .@{prefix}-picker__main { @@ -93,8 +93,8 @@ top: 0; right: 0; height: 1px; - border-top: 1px solid @border-level-1-color; - color: @border-level-1-color; + border-top: 1px solid @component-stroke; + color: @component-stroke; transform-origin: 0 0; transform: scaleY(.5); } @@ -106,8 +106,8 @@ bottom: 0; right: 0; height: 1px; - border-bottom: 1px solid @border-level-1-color; - color: @border-level-1-color; + border-bottom: 1px solid @component-stroke; + color: @component-stroke; transform-origin: 0 100%; transform: scaleY(.5); } @@ -119,5 +119,5 @@ justify-content: center; height: @picker-item--height; line-height: @picker-item--line-height; - color: @text-level-1-color; + color: @text-color-primary; } diff --git a/style/mobile/components/pull-down-refresh/_var.less b/style/mobile/components/pull-down-refresh/_var.less index f73e948a67..09d34a4666 100644 --- a/style/mobile/components/pull-down-refresh/_var.less +++ b/style/mobile/components/pull-down-refresh/_var.less @@ -1,2 +1,2 @@ // 文案颜色 -@pull-down-refresh-text-color: @text-level-4-color; +@pull-down-refresh-text-color: @text-color-disabled; diff --git a/style/mobile/components/radio/_index.less b/style/mobile/components/radio/_index.less index 0cc5267e39..8008c5ae2e 100644 --- a/style/mobile/components/radio/_index.less +++ b/style/mobile/components/radio/_index.less @@ -38,8 +38,8 @@ &--checked { color: #fff; - border-color: @primary-color; - background-color: @primary-color; + border-color: @brand-color; + background-color: @brand-color; } &--disabled { diff --git a/style/mobile/components/radio/_var.less b/style/mobile/components/radio/_var.less index 1035e80164..d38008417c 100644 --- a/style/mobile/components/radio/_var.less +++ b/style/mobile/components/radio/_var.less @@ -1,16 +1,16 @@ -@radio-title-font-size: @font-size * 1.6; +@radio-title-font-size: calc(@font-size * 1.6); -@radio-title-font-color: @text-level-1-color; +@radio-title-font-color: @text-color-primary; -@radio-content-font-size: @font-size * 1.4; +@radio-content-font-size: calc(@font-size * 1.4); -@radio-title-color: @text-level-1-color; +@radio-title-color: @text-color-primary; -@radio-content-color: @text-level-3-color; +@radio-content-color: @text-color-placeholder; @radio-border-color: @gray-color-4; -@radio-selected-color: @primary-color; +@radio-selected-color: @brand-color; @radio-disable-color: @gray-color-4; @@ -26,7 +26,7 @@ @radio-icon-wrap-height: 24px; -@radio-icon-wrap-font-size: @font-size * 2.4; +@radio-icon-wrap-font-size: calc(@font-size * 2.4); @radio-icon-wrap-margin-right: 10px; diff --git a/style/mobile/components/rate/_var.less b/style/mobile/components/rate/_var.less index 9e0fd0377a..25bc51a9a7 100644 --- a/style/mobile/components/rate/_var.less +++ b/style/mobile/components/rate/_var.less @@ -1,7 +1,7 @@ @rate-bg-color-default: #E3E6EB; @rate-bg-color-selected: #EA7029; @rate-icon-size: 20px; -@rate-space: @spacer-2; +@rate-space: @spacer; @rate-text-font-size: 16px; -@rate-text-color: @text-level-2-color; +@rate-text-color: @text-color-secondary; @rate-text-margin-left: 14px; diff --git a/style/mobile/components/result/_index.less b/style/mobile/components/result/_index.less index d0bfe666eb..6dbb04bf8d 100644 --- a/style/mobile/components/result/_index.less +++ b/style/mobile/components/result/_index.less @@ -19,7 +19,7 @@ } &__thumb + &__title:not(:empty) { - margin-top: @spacer * 2; + margin-top: @spacer; } &__description { @@ -30,7 +30,7 @@ } &__title + &__description:not(:empty) { - margin-top: @spacer * 3; + margin-top: @spacer-1; } // theme diff --git a/style/mobile/components/result/_var.less b/style/mobile/components/result/_var.less index 7ef1e238c4..78ed09a593 100644 --- a/style/mobile/components/result/_var.less +++ b/style/mobile/components/result/_var.less @@ -1,9 +1,9 @@ @result-title-font: @font-size-l; -@result-title-line-height: @font-size * 2.8; +@result-title-line-height: calc(@font-size * 2.8); @result-title-color: rgba(0, 0, 0, .9); -@result-description-font: @font-size * 1.4; -@result-description-line-height: @font-size * 2.2; +@result-description-font: calc(@font-size * 1.4); +@result-description-line-height: calc(@font-size * 2.2); @result-description-color: rgba(0, 0, 0, .6); @result-default-color: #0052d9; diff --git a/style/mobile/components/search/_index.less b/style/mobile/components/search/_index.less index 081747f3aa..f659d6fa2d 100644 --- a/style/mobile/components/search/_index.less +++ b/style/mobile/components/search/_index.less @@ -80,7 +80,7 @@ transform: translateX(-100%) translateY(-50%); font-size: 24px; line-height: 1; - color: @text-level-3-color; + color: @text-color-placeholder; } &__label-icon-search { @@ -95,7 +95,7 @@ right: 12px; font-size: 24px; line-height: 1; - color: @text-level-3-color; + color: @text-color-placeholder; } &__cancel-button { @@ -104,7 +104,7 @@ color: @search-cancel-button-text-color; padding: @search-cancel-button-padding; margin-left: @search-cancel-button-margin-left; - margin-right: -@search-cancel-button-margin-left; + margin-right: calc(-@search-cancel-button-margin-left); } &.@{prefix}-is-focused { diff --git a/style/mobile/components/search/_var.less b/style/mobile/components/search/_var.less index 5500fe6463..afe05c3477 100644 --- a/style/mobile/components/search/_var.less +++ b/style/mobile/components/search/_var.less @@ -1,6 +1,6 @@ -@search-vertical-padding: @spacer-2; +@search-vertical-padding: @spacer; -@search-horizontal-padding: @spacer-4; +@search-horizontal-padding: @spacer-2; @search-background-color: #FFFFFF; @@ -8,24 +8,24 @@ @search-input-background-color: #F5F5F5; -@search-input-horizontal-padding: @spacer-2; +@search-input-horizontal-padding: @spacer; @search-input-border-radius: 4px; -@search-text-color: @text-level-1-color; +@search-text-color: @text-color-primary; @search-text-size: 16px; -@search-placeholder-text-color: @text-level-3-color; +@search-placeholder-text-color: @text-color-placeholder; @search-placeholder-text-size: 16px; -@search-placeholder-text-margin-left: @spacer-2; +@search-placeholder-text-margin-left: @spacer; @search-cancel-button-text-size: 16px; -@search-cancel-button-text-color: @primary-color; +@search-cancel-button-text-color: @brand-color; -@search-cancel-button-padding: @spacer-2; +@search-cancel-button-padding: @spacer; -@search-cancel-button-margin-left: @spacer-2; +@search-cancel-button-margin-left: @spacer; diff --git a/style/mobile/components/slider/_index.less b/style/mobile/components/slider/_index.less index e59b355c31..1a8a16167a 100644 --- a/style/mobile/components/slider/_index.less +++ b/style/mobile/components/slider/_index.less @@ -38,7 +38,7 @@ height: @slider-hander-height; margin-top: (-@slider-hander-height / 2); background-color: #fff; - border: solid 2px @primary-color; + border: solid 2px @brand-color; border-radius: 50%; transform: translateX(-50%); transition: border-color .3s, transform .3s cubic-bezier(.18, .89, .32, 1.28); @@ -79,7 +79,7 @@ } &.@{prefix}-is-active::after { - background-color: @primary-color; + background-color: @brand-color; } } } @@ -94,16 +94,16 @@ } &__value { - min-width: @spacer * 3; + min-width: @spacer-1; margin-left: @slider-value-margin-left; flex-shrink: 0; color: @slider-value-color; font-size: @slider-value-font-size; &--left { - min-width: @spacer * 3; + min-width: @spacer-1; margin-left: 0; - margin-right: @spacer * 4; + margin-right: @spacer-2; flex-shrink: 0; color: @slider-value-color; font-size: @slider-value-font-size; diff --git a/style/mobile/components/slider/_var.less b/style/mobile/components/slider/_var.less index d51cded255..793e705d86 100644 --- a/style/mobile/components/slider/_var.less +++ b/style/mobile/components/slider/_var.less @@ -1,16 +1,16 @@ -@slider-track-bg-color:@primary-color; -@slider-bar-bg-color: @border-level-1-color; +@slider-track-bg-color: @brand-color; +@slider-bar-bg-color: @component-stroke; @slider-bar-height:2px; @slider-hander-height: 20px; @slider-hander-width: 20px; @slider-font-size-base:@font-size-base; -@slider-value-color: @text-level-1-color; +@slider-value-color: @text-color-primary; @slider-value-font-size: @font-size-l; -@slider-mark-text-color: @text-level-1-color; +@slider-mark-text-color: @text-color-primary; @slider-title-font-size: @font-size-l; -@slider-title-color: @text-level-1-color; -@slider-title-margin-right: @spacer-4; -@slider-value-margin-left: @spacer-4; +@slider-title-color: @text-color-primary; +@slider-title-margin-right: @spacer-2; +@slider-value-margin-left: @spacer-2; @slider-disabled-color: @primary-color-3; -@slider-disabled-text-color: @text-level-4-color; +@slider-disabled-text-color: @text-color-disabled; diff --git a/style/mobile/components/stepper/_var.less b/style/mobile/components/stepper/_var.less index 9dc7c7f0d8..bacae4cee1 100644 --- a/style/mobile/components/stepper/_var.less +++ b/style/mobile/components/stepper/_var.less @@ -8,7 +8,7 @@ @stepper-input-height: 24px; -@stepper-input-color: @text-level-1-color; +@stepper-input-color: @text-color-primary; @stepper-input-font-size: 16px; @@ -16,11 +16,11 @@ @stepper-button-height: 24px; -@stepper-icon-color: @text-level-1-color; +@stepper-icon-color: @text-color-primary; -@stepper-icon-color-disabled: @text-level-4-color; +@stepper-icon-color-disabled: @text-color-disabled; -@stepper-color-disabled: @text-level-4-color; +@stepper-color-disabled: @text-color-disabled; @stepper-pure-icon-width: 9px; diff --git a/style/mobile/components/steps/_index.less b/style/mobile/components/steps/_index.less index 9e5861c23a..86116625ba 100644 --- a/style/mobile/components/steps/_index.less +++ b/style/mobile/components/steps/_index.less @@ -46,7 +46,7 @@ width: @step-horizontal-icon-width; height: @step-horizontal-icon-width; box-sizing: border-box; - border: 1px solid @primary-color; + border: 1px solid @brand-color; border-radius: 50%; margin-top: 1px; } @@ -138,7 +138,7 @@ width: @step-dot-anchor-width; height: @step-dot-anchor-width; box-sizing: border-box; - border: 1px solid @primary-color; + border: 1px solid @brand-color; border-radius: 50%; margin-top: 1px; } @@ -167,23 +167,23 @@ &--readonly { .@{prefix}-step-title { - color: @text-level-4-color; + color: @text-color-disabled; } .@{prefix}-step-description { - color: @text-level-4-color; + color: @text-color-disabled; } .@{prefix}-step--error, .@{prefix}-step--process, .@{prefix}-step--finish { .@{prefix}-step-description { - color: @text-level-3-color; + color: @text-color-placeholder; } } .@{prefix}-step--finish { .@{prefix}-step-title { - color: @text-level-1-color; + color: @text-color-primary; } } } diff --git a/style/mobile/components/steps/_mixin.less b/style/mobile/components/steps/_mixin.less index 7cbd0b202b..21f8a6394d 100644 --- a/style/mobile/components/steps/_mixin.less +++ b/style/mobile/components/steps/_mixin.less @@ -17,7 +17,7 @@ vertical-align: top; font-size: @font-size-base; position: relative; - color: @text-level-4-color; + color: @text-color-disabled; &__number { box-sizing: border-box; @@ -27,9 +27,9 @@ width: @step-connector-default-icon-width; height: @step-connector-default-icon-width; text-align: center; - border: 1px solid @text-level-4-color; + border: 1px solid @text-color-disabled; border-radius: 50%; - color: @text-level-4-color; + color: @text-color-disabled; } } @@ -47,7 +47,7 @@ &-title { position: relative; - color: @text-level-1-color; + color: @text-color-primary; text-align: center; line-height: 22px; font-size: @font-size-base; @@ -56,7 +56,7 @@ } &-description { - color: @text-level-3-color; + color: @text-color-placeholder; line-height: 20px; font-size: @font-size-s; margin-bottom: @spacer; @@ -74,7 +74,7 @@ content: ""; display: block; height: 1px; - background-color: @text-level-4-color; + background-color: @text-color-disabled; position: absolute; width: calc(100% - @step-connector-default-icon-width); left: calc(50% + @step-connector-default-icon-width / 2); @@ -115,7 +115,7 @@ .@{prefix}-step--default:not(:last-child) { .@{prefix}-step__inner:after { - background-color: @primary-color; + background-color: @brand-color; } } } @@ -125,22 +125,22 @@ & when(@anchor-status = default) { .@{prefix}-step-icon__number { - border-color: @primary-color; - color: @primary-color; + border-color: @brand-color; + color: @brand-color; } }; & when(@anchor-status = finish) { .@{prefix}-step-icon__number { - border-color: @primary-color; - color: @primary-color; + border-color: @brand-color; + color: @brand-color; } }; & when(@anchor-status = process) { .@{prefix}-step-icon__number { - background-color: @primary-color; + background-color: @brand-color; color: #fff; - border-color: @primary-color; + border-color: @brand-color; } .@{prefix}-step-title { color: @primary-color-8; diff --git a/style/mobile/components/swiper/_index.less b/style/mobile/components/swiper/_index.less index fce831e779..bebea6d7f5 100644 --- a/style/mobile/components/swiper/_index.less +++ b/style/mobile/components/swiper/_index.less @@ -17,7 +17,7 @@ display: inline-block; width: @swiper-page-btn-size; height: @swiper-page-btn-size; - background-color: @text-level-2-color; + background-color: @text-color-secondary; border-radius: 50%; position: absolute; top: 50%; @@ -48,7 +48,7 @@ &-fraction { height: @swiper-page-fraction-height; line-height: @swiper-page-fraction-height; - background-color: @text-level-3-color; + background-color: @text-color-placeholder; color: @gray-color-1; padding: 0 12px; border-radius: @swiper-page-fraction-radius; diff --git a/style/mobile/components/switch/_var.less b/style/mobile/components/switch/_var.less index d2f5d3e61b..75a3b4a2f8 100644 --- a/style/mobile/components/switch/_var.less +++ b/style/mobile/components/switch/_var.less @@ -1,4 +1,4 @@ -@switch-font-size: @font-size * 1.6; +@switch-font-size: calc(@font-size * 1.6); @switch-width: 44px; @switch-height: 24px; @switch-border-radius: 15px; @@ -10,15 +10,15 @@ @switch-node-height: 20px; @switch-node-z-index: 1; -@switch-node-color: @bg-color-block; -@switch-node-background-color: @bg-color-block; +@switch-node-color: @bg-color-container; +@switch-node-background-color: @bg-color-container; @switch-node-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); @switch-checked-translate-x: 22px; -@switch-checked-background-color: @primary-color; +@switch-checked-background-color: @brand-color; @switch-checked-background-color-disabled: @primary-color-3; -@switch-text-color: @text-level-3-color; +@switch-text-color: @text-color-placeholder; @switch-text-color-disabled: @text-color-disabled; @switch-text-height: 24px; @switch-text-margin: 0 18px; diff --git a/style/mobile/components/tab-bar/_var.less b/style/mobile/components/tab-bar/_var.less index a396be5339..a478080e12 100644 --- a/style/mobile/components/tab-bar/_var.less +++ b/style/mobile/components/tab-bar/_var.less @@ -1,11 +1,11 @@ @tab-bar-height: 48px; -@tab-bar-bg-color: @bg-color-block; +@tab-bar-bg-color: @bg-color-container; -@tab-bar-border-color: @border-level-1-color; +@tab-bar-border-color: @component-stroke; @tab-bar-hover-bg-color: rgba(0, 0, 0, .05); -@tab-bar-active-color: @primary-color; +@tab-bar-active-color: @brand-color; -@tab-bar-color: @text-level-2-color; +@tab-bar-color: @text-color-secondary; diff --git a/style/mobile/components/tabs/_var.less b/style/mobile/components/tabs/_var.less index 0250b06526..8935bf59ae 100644 --- a/style/mobile/components/tabs/_var.less +++ b/style/mobile/components/tabs/_var.less @@ -1,6 +1,6 @@ -@tab-nav-bg-color: @bg-color-block; +@tab-nav-bg-color: @bg-color-container; -@tab-nav-text-color: @text-level-2-color; +@tab-nav-text-color: @text-color-secondary; @tab-nav-disabled-color: rgba(0, 0, 0, .25); @@ -14,7 +14,7 @@ @tab-line-active-color: #0052d9; -@tab-line-color: @border-level-1-color; +@tab-line-color: @component-stroke; @tab-line-height: 2px; @@ -30,4 +30,4 @@ @tab-nav-horizontal-item-padding: 0 0 0 2px; -@tab-panel-bg-color: @bg-color-block; +@tab-panel-bg-color: @bg-color-container; diff --git a/style/mobile/components/tag/_index.less b/style/mobile/components/tag/_index.less index 00447d5070..f4f00cf26d 100644 --- a/style/mobile/components/tag/_index.less +++ b/style/mobile/components/tag/_index.less @@ -6,40 +6,35 @@ @themes: primary, success, warning, default, danger; -.genVariant(@fontColorWeight; @borderColorWeight; @backgroundColorWeight) { - .for(@themes, @i: 1) when(@i =< length(@themes)) { - @theme: extract(@themes, @i); - @theme-color: "tag-@{theme}-color"; - @theme-font-color: "tag-@{theme}-font-color"; - - &.@{prefix}-tag--theme-@{theme} { - background-color: mix(@@theme-color, @@theme-font-color, @backgroundColorWeight); - border-color: mix(@@theme-color, @@theme-font-color, @borderColorWeight); - color: mix(@@theme-color, @@theme-font-color, @fontColorWeight); +.genVariant(@variant) { + @themes: default, primary, success, warning, danger; + each(@themes, { + @theme-color: "tag-@{value}-color"; + @theme-light-color: "tag-@{value}-light-color"; + + &.@{prefix}-tag--@{value} { + color: if(@variant = dark, @font-white-1, @@theme-color); + border-color: if(@variant = light, @@theme-light-color, @@theme-color); + background-color: if(@variant = dark, @@theme-color, @@theme-light-color); } - - .for(@themes, (@i + 1)); - } - - .for(@themes); + }); } .@{prefix}-tag { - display: flex; + display: inline-flex; align-items: center; border: 1px solid transparent; box-sizing: border-box; - border-radius: @border-radius-square; + border-radius: @tag-square-border-radius; font-size: @tag-medium-font-size; user-select: none; + vertical-align: middle; &__text { word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - height: @tag-medium-height; - line-height: @tag-medium-height; } &__icon, @@ -50,13 +45,13 @@ &__icon:not(:empty) + &__text:not(:empty), &__text:not(:empty) + &__icon-close:not(:empty) { - margin-left: (@spacer / 2); + margin-left: calc(@spacer / 2); } - &.@{prefix}-tag--size { - &-small { + &.@{prefix}-tag { + &--small { height: @tag-small-height; - line-height: @tag-small-height - 2px; + line-height: @tag-small-height; padding: 0 @tag-small-padding; font-size: @tag-small-font-size; @@ -64,11 +59,16 @@ .@{prefix}-icon-close { font-size: @tag-small-icon-size; } + + .@{prefix}-tag__icon:not(:empty) + .@{prefix}-tag__text:not(:empty), + .@{prefix}-tag__text:not(:empty) + .@{prefix}-tag__icon-close:not(:empty) { + margin-left: 4rpx; + } } - &-medium { + &--medium { height: @tag-medium-height; - line-height: @tag-medium-height - 2px; + line-height: @tag-medium-height; padding: 0 @tag-medium-padding; font-size: @tag-medium-font-size; @@ -78,9 +78,9 @@ } } - &-large { + &--large { height: @tag-large-height; - line-height: @tag-large-height - 2px; + line-height: @tag-large-height; padding: 0 @tag-large-padding; font-size: @tag-large-font-size; @@ -89,52 +89,65 @@ font-size: @tag-large-icon-size; } } + + &--extra-large { + height: @tag-extra-large-height; + line-height: @tag-extra-large-height; + padding: 0 @tag-extra-large-padding; + font-size: @tag-extra-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-extra-large-icon-size; + } + } } - &.@{prefix}-tag--shape { - &-square { - border-radius: @border-radius-square; + &.@{prefix}-tag { + &--square { + border-radius: @tag-square-border-radius; } - &-round { - border-radius: @border-radius-round; + &--round { + border-radius: @tag-round-border-radius; } - &-mark { - border-radius: 0 @border-radius-mark @border-radius-mark 0; + &--mark { + border-radius: 0 @tag-mark-border-radius @tag-mark-border-radius 0; } } - &--variant { - &-dark { - .genVariant(0, 100, 100); + &--dark { + .genVariant(dark); + &.@{prefix}-tag--default { + color: @tag-default-font-color; } + } - &-light { - .genVariant(100, 10, 10); - &.@{prefix}-tag--theme-default { - color: @tag-default-font-color; - border-color: rgba(243, 243, 243, 100%); - background-color: rgba(243, 243, 243, 100%); - } + &--outline { + .genVariant(outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; } - - &-outline { - .genVariant(100, 100, 0); - &.@{prefix}-tag--theme-default { - color: @tag-default-font-color; - border-color: rgba(220, 220, 220, 100%); - background-color: #fff; + each(@themes, { + &.@{prefix}-tag--@{value} { + background-color: @tag-outline-bg-color; } + }); + } + + &--light { + .genVariant(light); + &.@{prefix}-tag--default { + color: @tag-default-font-color; } + } - &-light-outline { - .genVariant(100, 100, 10); - &.@{prefix}-tag--theme-default { - color: @tag-default-font-color; - border-color: rgba(220, 220, 220, 100%); - background-color: rgba(243, 243, 243, 100%); - } + &--light-outline { + .genVariant(light-outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + border-color: @component-border; } } @@ -152,7 +165,7 @@ &.@{prefix}-tag--checked.@{prefix}-tag--disabled { color: @color-white; - background-color: @primary-color-disabled; + background-color: @brand-color-disabled; } &.@{prefix}-tag--disabled { diff --git a/style/mobile/components/tag/_var.less b/style/mobile/components/tag/_var.less index 9aed71bb2e..6e5bf53aac 100644 --- a/style/mobile/components/tag/_var.less +++ b/style/mobile/components/tag/_var.less @@ -1,59 +1,54 @@ -// 组件变量 -// 名称可按如下规则定义： -// -[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 - +// checkable @color-white: #fff; - @tag-default-background-color: #e7e7e7; @tag-default-border-color: #e7e7e7; - -@primary-color-disabled: #bbd3fb; - -@tag-default-color: rgba(231, 231, 231, 1); -@tag-primary-color: @primary-color; -@tag-success-color: @success-color; -@tag-warning-color: @warning-color; -@tag-danger-color: @error-color; - -@tag-default-font-color: rgba(0, 0, 0, .9); -@tag-primary-font-color: @color-white; -@tag-success-font-color: @color-white; -@tag-warning-font-color: @color-white; -@tag-danger-font-color: @color-white; - -@tag-disabled-color: rgba(0, 0, 0, 26%); -@tag-disabled-background-color: rgba(231, 231, 231, 1); -@tag-disabled-border-color: rgba(231, 231, 231, 1); - -@tag-checked-color: @primary-color; -@tag-checked-border-color: @primary-color; -@tag-checked-background-color: @primary-color; - -@tag-small-padding: @spacer * 1.5 - 1px; -@tag-medium-padding: @spacer * 2 - 1px; -@tag-large-padding: @spacer * 3 - 1px; - -@tag-small-font-size: @font-size; -@tag-medium-font-size: @font-size-s; -@tag-large-font-size: @font-size-base; - -@tag-small-icon-size: @font-size * 1.2; -@tag-medium-icon-size: @font-size * 1.4; -@tag-large-icon-size: @font-size * 1.8; - -@tag-small-height: 22px; -@tag-medium-height: 24px; -@tag-large-height: 30px; - -@border-radius-square: 4px; -@border-radius-round: 999px; -@border-radius-mark: @border-radius-round; +@tag-checked-color: @brand-color; +@tag-checked-border-color: @brand-color; +@tag-checked-background-color: @brand-color; + +// themes +@tag-default-color: var(--td-tag-default-color, @bg-color-component); +@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer); +@tag-primary-color: var(--td-tag-primary-color, @brand-color); +@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light); +@tag-success-color: var(--td-tag-success-color, @success-color); +@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1); +@tag-warning-color: var(--td-tag-warning-color, @warning-color); +@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1); +@tag-danger-color: var(--td-tag-danger-color, @error-color); +@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1); + +// variant +@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); +@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); + +// status +@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); +@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); + +// size +@tag-small-padding: var(--td-tag-small-padding, 6px - 1px); +@tag-medium-padding: var(--td-tag-medium-padding, 8px - 1px); +@tag-large-padding: var(--td-tag-large-padding, 8px - 1px); +@tag-extra-large-padding: var(--td-tag-extra-large-padding, 16px - 1px); + +@tag-small-font-size: var(--td-tag-small-font-size, @font-size); +@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s); +@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base); +@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base); + +@tag-small-icon-size: var(--td-tag-small-icon-size, 12px); +@tag-medium-icon-size: var(--td-tag-medium-icon-size, 14px); +@tag-large-icon-size: var(--td-tag-large-icon-size, 16px); +@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 16px); + +@tag-small-height: var(--td-tag-small-height, 20px); +@tag-medium-height: var(--td-tag-medium-height, 24px); +@tag-large-height: var(--td-tag-large-height, 28px); +@tag-extra-large-height: var(--td-tag-extra-large-height, 40px); + +@tag-square-border-radius: var(--td-tag-square-border-radius, 4px); +@tag-round-border-radius: var(--td-tag-round-border-radius, 999px); +@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius); +@tag-close-icon-color: var(--td-tag-close-icon-color, @font-gray-3); diff --git a/style/mobile/components/textarea/_var.less b/style/mobile/components/textarea/_var.less index 616acc7f28..dd680b1e02 100644 --- a/style/mobile/components/textarea/_var.less +++ b/style/mobile/components/textarea/_var.less @@ -1,13 +1,13 @@ -@textarea-background-color: @bg-color-block; -@textarea-text-color: @text-level-1-color; -@textarea-placeholder-text-color: @placeholder-color; +@textarea-background-color: @bg-color-container; +@textarea-text-color: @text-color-primary; +@textarea-placeholder-text-color: @text-color-placeholder; @textarea-disabled-text-color: @text-color-disabled; @textarea-font-size: @font-size-l; @textarea-line-height: 24px; -@textarea-counter-color: @text-level-3-color; +@textarea-counter-color: @text-color-placeholder; @textarea-counter-font-size: @font-size-s; @textarea-counter-line-height: 20px; @textarea-height: 96px; // 间距 -@textarea-vertical-padding: @spacer-3; -@textarea-horizontal-padding: @spacer-4; +@textarea-vertical-padding: @spacer-1; +@textarea-horizontal-padding: @spacer-2; diff --git a/style/mobile/components/toast/_index.less b/style/mobile/components/toast/_index.less index 8b9b91e5fd..2b73dec356 100644 --- a/style/mobile/components/toast/_index.less +++ b/style/mobile/components/toast/_index.less @@ -12,15 +12,15 @@ justify-content: center; min-width: 104px; max-width: 188px; - border-radius: @border-radius; + border-radius: @radius-small; color: @toast-text-color; background: rgba(0, 0, 0, 60%); text-align: center; - padding: @spacer-5; + padding: calc(@spacer * 2.5); z-index: @toast-z-index; &:not(&--text)&--column { - border-radius: @border-radius * 2; + border-radius: calc(@radius-small * 2); } .@{prefix}-icon { @@ -33,7 +33,7 @@ white-space: pre-wrap; word-break: break-word; line-height: 22px; - margin-top: @spacer-3; + margin-top: @spacer-1; min-width: 82px; } @@ -50,8 +50,8 @@ /** 有无icon判断 */ &--icononly { - padding-top: @spacer-3; - padding-bottom: @spacer-3; + padding-top: @spacer-1; + padding-bottom: @spacer-1; min-width: 88px; min-height: 88px !important; // stylelint-disable-line flex-direction: initial; @@ -65,13 +65,13 @@ &--top { left: 50%; - top: @spacer-3; + top: @spacer-1; transform: translateX(-50%); } &--bottom { left: 50%; - bottom: @spacer-3; + bottom: @spacer-1; transform: translateX(-50%); } @@ -86,7 +86,7 @@ .@{prefix}-toast__text { margin-top: 0; - margin-left: @spacer-2; + margin-left: @spacer; min-width: auto; line-height: 24px; } diff --git a/style/mobile/components/toast/_var.less b/style/mobile/components/toast/_var.less index c4497d9030..dada709744 100644 --- a/style/mobile/components/toast/_var.less +++ b/style/mobile/components/toast/_var.less @@ -1,4 +1,4 @@ -@toast-text-color:@text-anti-primary-color; +@toast-text-color:@text-color-anti; @toast-font-size-base:@font-size-base; @toast-z-index: 2000; diff --git a/style/mobile/components/upload/_index.less b/style/mobile/components/upload/_index.less index 3d298d26bf..cbea0eb167 100644 --- a/style/mobile/components/upload/_index.less +++ b/style/mobile/components/upload/_index.less @@ -110,7 +110,7 @@ } > p { - color: @placeholder-color; + color: @text-color-placeholder; } } diff --git a/style/mobile/components/upload/_var.less b/style/mobile/components/upload/_var.less index 289cd1c49e..2f2113f8a9 100644 --- a/style/mobile/components/upload/_var.less +++ b/style/mobile/components/upload/_var.less @@ -14,27 +14,27 @@ // 颜色 @upload-icon-check-circle-filled-color: @success-color; @upload-icon-error-circle-filled-color: @error-color; -@upload-icon-loading-color: @primary-color; -@upload-icon-time-filled-color: @placeholder-color; -@upload-highlight-color: @text-primary-color; -@upload-icon-add-color: @text-level-3-color; -@upload-small-color: @placeholder-color; -@upload-placeholder-color: @placeholder-color; -@upload-icon-color: @placeholder-color; -@upload-icon-color-hover: @text-level-2-color; -@upload-list-file-icon-color: @primary-color; +@upload-icon-loading-color: @brand-color; +@upload-icon-time-filled-color: @text-color-placeholder; +@upload-highlight-color: @text-color-primary; +@upload-icon-add-color: @text-color-placeholder; +@upload-small-color: @text-color-placeholder; +@upload-placeholder-color: @text-color-placeholder; +@upload-icon-color: @text-color-placeholder; +@upload-icon-color-hover: @text-color-secondary; +@upload-list-file-icon-color: @brand-color; @upload-list-item-error-color: @error-color; @upload-list-control-color-hover: @error-color; @upload-card-item-error-icon-warning-color: @error-color; @upload-card-item-status-color: @error-color; @upload-card-item-bg-color: @bg-color-page; -@upload-card-item-bg-border-color-hover: @primary-color; -@upload-card-name-color: @text-primary-color; +@upload-card-item-bg-border-color-hover: @brand-color; +@upload-card-name-color: @text-color-primary; @upload-card-box-bg-color: @bg-color-page; @upload-card-container-bg-color: @bg-color-secondarycontainer; @upload-card-status-color: @text-color-disabled; @upload-card-mask-color: @bg-color-container; -@upload-card-mask-bg-color: @text-level-2-color; +@upload-card-mask-bg-color: @text-color-secondary; @upload-tips-error-color: @error-color; // 背景 @upload-card-mask-opacity-disabled: .3; @@ -59,31 +59,31 @@ // @upload-card-mask-item-width: 30px; // @upload-card-mask-item-height: 30px; @upload-icon-size: @font-size-l; -@upload-icon-size-middle: (@font-size * 2); -@upload-icon-size-large: (@font-size * 2.4); +@upload-icon-size-middle: calc(@font-size * 2); +@upload-icon-size-large: calc(@font-size * 2.4); // 边框 -@upload-card-item-bg-border: 1px dashed @border-level-1-color; -@upload-card-box-border: 1px dashed @border-level-1-color; -@upload-card-box-border-radius: @border-radius; -@upload-card-content-border: 1px solid @border-level-1-color; -@upload-card-contariner-border: 1px dashed @border-level-1-color; +@upload-card-item-bg-border: 1px dashed @component-stroke; +@upload-card-box-border: 1px dashed @component-stroke; +@upload-card-box-border-radius: @radius-small; +@upload-card-content-border: 1px solid @component-stroke; +@upload-card-contariner-border: 1px dashed @component-stroke; // 位置 // 间距 -@upload-card-padding: 0 0 0 @spacer-4; +@upload-card-padding: 0 0 0 @spacer; @upload-card-line-height: @text-line-height; -@upload-card-item-padding: 0 @spacer-2 0 0; -@upload-card-item-margin: 0 0 @spacer-2 0; +@upload-card-item-padding: 0 @spacer 0 0; +@upload-card-item-margin: 0 0 @spacer 0; @upload-card-item-error-icon-warning-margin-bottom: 10px; @upload-card-icon-loading-margin-bottom: 10px; -@upload-card-name-margin-top: @spacer-2; -@upload-card-container-icon-add-margin-bottom: @spacer-2; -@upload-card-content-padding: @spacer-2; +@upload-card-name-margin-top: @spacer; +@upload-card-container-icon-add-margin-bottom: @spacer; +@upload-card-content-padding: @spacer; @upload-card-status-wrap-svg-margin-bottom: 6px; @upload-small-line-height: 20px; @upload-display-text-margin-top: 10px; @upload-icon-clear-circle-filled-margin-top: 2px; -@upload-tips-margin-top: @spacer-2; -@upload-card-mask-divider-margin: 0 @spacer-2; +@upload-tips-margin-top: @spacer; +@upload-card-mask-divider-margin: 0 @spacer; diff --git a/style/mobile/mixins/_hairline.less b/style/mobile/mixins/_hairline.less index 61ca32099c..2dfef43ed8 100644 --- a/style/mobile/mixins/_hairline.less +++ b/style/mobile/mixins/_hairline.less @@ -7,7 +7,7 @@ pointer-events: none; } -.hairline(@color: @border-level-1-color) { +.hairline(@color: @border-color) { top: -50%; right: -50%; bottom: -50%; @@ -17,7 +17,7 @@ .hairline-base(); } -.hairline-top(@color: @border-level-1-color) { +.hairline-top(@color: @border-color) { right: 0; left: 0; top: 0; @@ -26,7 +26,7 @@ .hairline-base(); } -.hairline-bottom(@color: @border-level-1-color) { +.hairline-bottom(@color: @border-color) { right: 0; left: 0; bottom: 0; @@ -35,7 +35,7 @@ .hairline-base(); } -.hairline-left(@color: @border-level-1-color) { +.hairline-left(@color: @border-color) { top: 0; bottom: 0; left: 0; @@ -44,7 +44,7 @@ .hairline-base(); } -.hairline-right(@color: @border-level-1-color) { +.hairline-right(@color: @border-color) { top: 0; bottom: 0; right: 0; diff --git a/style/web/components/guide/_index.less b/style/web/components/guide/_index.less index d3893f2788..4114dcd2ce 100644 --- a/style/web/components/guide/_index.less +++ b/style/web/components/guide/_index.less @@ -140,7 +140,7 @@ } &--dialog { - margin-top: @spacer-3; + margin-top: @spacer-1; .@{prefix}-@{componentName} { &__action { diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 7554a6bb81..519b963da2 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -484,7 +484,7 @@ background-color: @bg-color-secondarycontainer; &-content { - margin-left: @spacer-4; + margin-left: @spacer-2; justify-content: center; } } From 51ea9c299f0015a63fd4e838264e854082d0fb40 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sun, 5 Mar 2023 23:47:08 +0800 Subject: [PATCH 190/312] docs(web): update image docs (#1178) --- docs/web/api/image.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/web/api/image.md b/docs/web/api/image.md index f002acf5fc..4c7531ce93 100644 --- a/docs/web/api/image.md +++ b/docs/web/api/image.md @@ -74,4 +74,7 @@ placeholder 在图像加载时占位显示。 支持使用 `srcset` 设置特殊格式的图片渲染，如 `.avif` 和 `.webp`。 +- [查看 AVIF 压缩](https://cloud.tencent.com/document/product/436/60455) +- [查看 WebP 压缩](https://cloud.tencent.com/document/product/436/60453) + {{ avif }} From 8f1bec511b0db9cb6eb076fe72ebd465db351c05 Mon Sep 17 00:00:00 2001 From: mickey Date: Sun, 5 Mar 2023 23:50:15 +0800 Subject: [PATCH 191/312] feat: add back-top component (#1175) * add back-top style * feat: add back-top style * feat: add back-top styles * feat: update back-top.md --------- Co-authored-by: mickeylin --- docs/web/api/back-top.md | 31 +++++++++ style/web/_variables.less | 1 + style/web/components/_index.less | 2 + style/web/components/back-top/_index.less | 76 +++++++++++++++++++++++ style/web/components/back-top/_mixin.less | 41 ++++++++++++ style/web/components/back-top/_var.less | 49 +++++++++++++++ 6 files changed, 200 insertions(+) create mode 100644 docs/web/api/back-top.md create mode 100644 style/web/components/back-top/_index.less create mode 100644 style/web/components/back-top/_mixin.less create mode 100644 style/web/components/back-top/_var.less diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md new file mode 100644 index 0000000000..239d87c899 --- /dev/null +++ b/docs/web/api/back-top.md @@ -0,0 +1,31 @@ +--- +title: BackTop 返回顶部 +description: 用于返回页面顶部 +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### 基础使用 + +{{ base }} + +### 不同尺寸 + +提供标准（默认）、小两种尺寸。 + +{{ size }} + +### 不同形状 + +提供圆形和方形两种不同形状。 + +{{ shape }} + +### 不同主题 + +{{ theme }} + +### 自定义内容 + +{{ custom }} diff --git a/style/web/_variables.less b/style/web/_variables.less index 2198155da2..5a86d5e768 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -365,6 +365,7 @@ @anim-duration-slow: .28s; // 统一管理各组件层级关系 +@z-index-back-top: 300; @z-index-affix: 500; @z-index-drawer: 1500; @z-index-dialog: 2500; diff --git a/style/web/components/_index.less b/style/web/components/_index.less index 49fa9b8577..f3f6f6b64a 100644 --- a/style/web/components/_index.less +++ b/style/web/components/_index.less @@ -97,3 +97,5 @@ @import "./timeline/_index.less"; @import "./space/_index.less"; + +@import "./back-top/_index.less"; diff --git a/style/web/components/back-top/_index.less b/style/web/components/back-top/_index.less new file mode 100644 index 0000000000..ed795f0668 --- /dev/null +++ b/style/web/components/back-top/_index.less @@ -0,0 +1,76 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +@import "./_mixin.less"; + +.@{prefix-block} { + position: fixed; + z-index: @z-index-back-top; + overflow: hidden; + outline: none; + border-color: transparent; + background-color: transparent; + cursor: pointer; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + vertical-align: middle; + white-space: nowrap; + border-width: .5px; + border-style: solid; + transition: + background @anim-duration-base linear, + border @anim-duration-base linear, + color @anim-duration-base linear, + opacity @anim-duration-base linear, + visibility @anim-duration-base linear; + touch-action: manipulation; + box-shadow: @back-top-box-shadow; + visibility: hidden; + opacity: 0; + + &__text { + font: @font-body-small; + text-align: center; + margin-top: @comp-margin-xxs; + } + + &__icon { + font-size: @font-headline-small; + } +} + +.@{prefix-block}--show { + visibility: visible; + opacity: 1; +} + +@themes: light, primary, dark; + +each(@themes, { + .@{prefix-block}--theme-@{value} { + .back-top-theme("@{value}"); + } +}); + +@m: medium; +@s: small; +@sizes: s, m; + +each(@sizes, { + .@{prefix}-size-@{value} { + .back-top-size(@@value) + } +}); + +@shapes: circle, square; + +each(@shapes, { + .@{prefix-block}--@{value} { + .back-top-shape("@{value}") + } +}) diff --git a/style/web/components/back-top/_mixin.less b/style/web/components/back-top/_mixin.less new file mode 100644 index 0000000000..d783c5b786 --- /dev/null +++ b/style/web/components/back-top/_mixin.less @@ -0,0 +1,41 @@ +@prefix-block: e("@{prefix}-back-top"); + +.back-top-attr(@attr, @modify, @isTarget: false, @target: '') { + @value: if((boolean(@isTarget)), e("back-top-@{target}-@{attr}-@{modify}"), e("back-top-@{attr}-@{modify}")); + + @{attr}: @@value; +} + +.back-top-bg-color(@theme, @isHover) { + @bg-color: if((boolean(@isHover)), e("back-top-bg-color-@{theme}-hover"), e("back-top-bg-color-@{theme}")); + + background-color: @@bg-color; +} + +.back-top-theme(@theme) { + .back-top-attr(border-color, @theme); + .back-top-bg-color(@theme, false); + + &:hover { + .back-top-attr(border-color, "@{theme}-hover"); + .back-top-bg-color(@theme, true); + } + .@{prefix-block}__text { + .back-top-attr(color, @theme, true, "text"); + } + .@{prefix-block}__icon { + .back-top-attr(color, @theme, true, "icon"); + } +} + +.back-top-size(@size) { + .back-top-attr(width, @size); + .back-top-attr(height, @size); + .@{prefix-block}__text { + .back-top-attr(display, @size, true, "text"); + } +} + +.back-top-shape(@shape) { + .back-top-attr(border-radius, @shape); +} diff --git a/style/web/components/back-top/_var.less b/style/web/components/back-top/_var.less new file mode 100644 index 0000000000..ddc1b16e5b --- /dev/null +++ b/style/web/components/back-top/_var.less @@ -0,0 +1,49 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[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 +@back-top-border-radius-circle: @border-radius-circle; +@back-top-border-radius-square: @border-radius-medium; + +@back-top-width-small: @comp-size-xxl; +@back-top-height-small: @comp-size-xxl; + +@back-top-text-display-small: none; +@back-top-text-display-medium: block; + +@back-top-width-medium: @comp-size-xxxxl; +@back-top-height-medium: @comp-size-xxxxl; + +@back-top-text-color-light: @text-color-secondary; +@back-top-text-color-primary: @font-white-1; +@back-top-text-color-dark: @font-white-1; + +@back-top-icon-color-light: @text-color-primary; +@back-top-icon-color-primary: @font-white-1; +@back-top-icon-color-dark: @font-white-1; + +@back-top-bg-color-light: @bg-color-container; +@back-top-bg-color-primary: @brand-color; +@back-top-bg-color-dark: @gray-color-14; + +@back-top-bg-color-light-hover: @bg-color-container-hover; +@back-top-bg-color-primary-hover: @brand-color-hover; +@back-top-bg-color-dark-hover: @gray-color-9; + +@back-top-border-color-light: @component-border; +@back-top-border-color-primary: @back-top-bg-color-primary; +@back-top-border-color-dark: @back-top-bg-color-dark; + +@back-top-border-color-light-hover: @back-top-bg-color-light-hover; +@back-top-border-color-primary-hover: @back-top-bg-color-primary-hover; +@back-top-border-color-dark-hover: @back-top-bg-color-dark-hover; + +@back-top-box-shadow: @shadow-3; From 14e450fe53ca1515ed6b56d59e8f4abed300894d Mon Sep 17 00:00:00 2001 From: TabSpace Date: Mon, 6 Mar 2023 14:48:07 +0800 Subject: [PATCH 192/312] =?UTF-8?q?fix:=20tree=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E8=A7=A3=E5=86=B3=E6=BF=80=E6=B4=BB=E6=80=81=E6=9C=AA?= =?UTF-8?q?=E8=83=BD=E6=AD=A3=E7=A1=AE=E6=9B=B4=E6=96=B0=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20(#1180)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(tree): label 禁止折行 * fix(tree): 完善 tree 样式细节与示例 * fix(tree): 完善 tree 组件连线样式，解决叶节点连线过短问题 * refactor(tree): tree 组件，移除无用样式，完善样式顺序格式 * fix(tree): tree 组件，连线对齐图标 * refactor(tree): tree 组件，样式变量名称改进，统一规范 * docs(tree): tree 组件样式示例，可选中示例添加长文案示例 * fix(tree): 增大图标点击区域 * docs(tree): tree 样式示例改进，自定义图标位置修正 * feat(tree): tree 组件添加嵌套布局样式 * fix(tree): tree 组件，为节点不限制高度提供可能性 * fix(tree): tree 组件添加子节点动画 * fix: tree 组件完善嵌套布局时使用的动画 * fix(tree): 动画涉及的属性，仅在动画启用时生效 * chore(tree): tree 组件，添加虚拟滚动所需部分样式 * fix: 🐛 tree 组件，解决同一个 siblings 下，前置节点插入时位置错误的问题。 * chore: 🤖 完善项目依赖 * refactor: 💡 添加事件派发器，以简化事件传播方式 * fix: 🐛 tree tree 组件, insertAfter, insertBefore 方法，完善传入参数类型 * fix: 🐛 tree 组件动画优化 * fix: 🐛 tree 组件修正图标背景偏移的问题 * chore: 🤖 type的版本先固定 不然过不了CI的ts检测 * fix: 🐛 tree 组件添加 value 重复错误提示 * fix: 🐛 tree 组件，解决拖动样式与重构后的高度样式冲突的问题 * fix: 🐛 tree 组件，完善折行标签示例，移除嵌套模式相关样式 * fix: 🐛 tree 组件修正图标背景尺寸与位置 * fix: 🐛 tree 组件完善图标样式 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件完善虚拟滚动样式，添加滚动中样式 * fix: 🐛 tree 节点添加独立的私有 id ，专用于渲染 * fix: 🐛 tree 组件添加节点私有 id 映射 * fix: 🐛 tree 组件，解决动画样式导致虚拟滚动卡顿的问题 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，收纳所有动画效果到动画 class 之下管理 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，改进默认样式，支持滚动 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件修正单元测试方案，不直接审查唯一 key 的值。移除冗余判断条件，准备改进过滤方案。 * fix: 🐛 完善类型指定 * fix: 🐛 tree 组件，改进对 allowFoldNodeOnFilter 的支持，过滤节点时不影响折叠状态 * fix: 🐛 tree 组件，解决手风琴效果丢失的问题 * fix: 🐛 tree 组件，解决父组件状态未能正确更新的问题 * docs: ✏️ 添加虚拟滚动示例 * fix: 🐛 tree 组件，虚拟滚动延迟加载模式，使用 class t-tree__lazyload * fix: 🐛 tree 组件，解决过滤允许折叠时，锁定的路径节点样式未变更的问题 * fix: 🐛 tree 组件，解决 active 状态切换后，旧激活节点状态未更新的问题 --- js/tree/tree-node.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index 7765fafa8f..d3a7b1d044 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -834,17 +834,20 @@ export class TreeNode { } if (this.isActivable()) { if (actived) { + const prevKeys = Array.from(map.keys()); if (!config.activeMultiple) { map.clear(); } + prevKeys.forEach((value) => { + const node = tree.getNode(value); + node.update(); + }); map.set(this.value, true); } else { map.delete(this.value); } } - if (options.directly) { - this.update(); - } + this.update(); return tree.getActived(map); } From 7263f3570726218e8c14de5bbf426ebd90315f4b Mon Sep 17 00:00:00 2001 From: TabSpace Date: Mon, 6 Mar 2023 15:53:16 +0800 Subject: [PATCH 193/312] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E6=8F=92=E5=85=A5=E8=87=AA=E8=BA=AB=E5=BC=95=E5=8F=91?= =?UTF-8?q?=E6=AD=BB=E5=BE=AA=E7=8E=AF=E7=9A=84=E9=97=AE=E9=A2=98=20(#1181?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(tree): label 禁止折行 * fix(tree): 完善 tree 样式细节与示例 * fix(tree): 完善 tree 组件连线样式，解决叶节点连线过短问题 * refactor(tree): tree 组件，移除无用样式，完善样式顺序格式 * fix(tree): tree 组件，连线对齐图标 * refactor(tree): tree 组件，样式变量名称改进，统一规范 * docs(tree): tree 组件样式示例，可选中示例添加长文案示例 * fix(tree): 增大图标点击区域 * docs(tree): tree 样式示例改进，自定义图标位置修正 * feat(tree): tree 组件添加嵌套布局样式 * fix(tree): tree 组件，为节点不限制高度提供可能性 * fix(tree): tree 组件添加子节点动画 * fix: tree 组件完善嵌套布局时使用的动画 * fix(tree): 动画涉及的属性，仅在动画启用时生效 * chore(tree): tree 组件，添加虚拟滚动所需部分样式 * fix: 🐛 tree 组件，解决同一个 siblings 下，前置节点插入时位置错误的问题。 * chore: 🤖 完善项目依赖 * refactor: 💡 添加事件派发器，以简化事件传播方式 * fix: 🐛 tree tree 组件, insertAfter, insertBefore 方法，完善传入参数类型 * fix: 🐛 tree 组件动画优化 * fix: 🐛 tree 组件修正图标背景偏移的问题 * chore: 🤖 type的版本先固定 不然过不了CI的ts检测 * fix: 🐛 tree 组件添加 value 重复错误提示 * fix: 🐛 tree 组件，解决拖动样式与重构后的高度样式冲突的问题 * fix: 🐛 tree 组件，完善折行标签示例，移除嵌套模式相关样式 * fix: 🐛 tree 组件修正图标背景尺寸与位置 * fix: 🐛 tree 组件完善图标样式 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件完善虚拟滚动样式，添加滚动中样式 * fix: 🐛 tree 节点添加独立的私有 id ，专用于渲染 * fix: 🐛 tree 组件添加节点私有 id 映射 * fix: 🐛 tree 组件，解决动画样式导致虚拟滚动卡顿的问题 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，收纳所有动画效果到动画 class 之下管理 * fix: 🐛 tree 组件完善动画样式 * fix: 🐛 tree 组件，改进默认样式，支持滚动 * fix: 🐛 tree 组件完善虚拟滚动样式 * fix: 🐛 tree 组件修正单元测试方案，不直接审查唯一 key 的值。移除冗余判断条件，准备改进过滤方案。 * fix: 🐛 完善类型指定 * fix: 🐛 tree 组件，改进对 allowFoldNodeOnFilter 的支持，过滤节点时不影响折叠状态 * fix: 🐛 tree 组件，解决手风琴效果丢失的问题 * fix: 🐛 tree 组件，解决父组件状态未能正确更新的问题 * docs: ✏️ 添加虚拟滚动示例 * fix: 🐛 tree 组件，虚拟滚动延迟加载模式，使用 class t-tree__lazyload * fix: 🐛 tree 组件，解决过滤允许折叠时，锁定的路径节点样式未变更的问题 * fix: 🐛 tree 组件，解决 active 状态切换后，旧激活节点状态未更新的问题 * fix: 🐛 tree 组件，不允许节点插入到自身，并给出提示信息 --- js/tree/tree-node.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index d3a7b1d044..ece288a342 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -303,6 +303,10 @@ export class TreeNode { throw new Error('无法将父节点插入到子节点'); } + if (parentNode === this) { + throw new Error('无法将节点插入到本节点'); + } + if (Array.isArray(parentNode?.children)) { const targetPosNode = parentNode?.children[targetIndex]; if (targetPosNode && targetPosNode === this) { From 3f8933727fd62fe3c09a70e2002e30cd9c1584df Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 7 Mar 2023 10:56:11 +0800 Subject: [PATCH 194/312] fix: restoring wrongly modified content (#1184) --- style/web/components/guide/_index.less | 2 +- style/web/components/image-viewer/_index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/web/components/guide/_index.less b/style/web/components/guide/_index.less index 4114dcd2ce..d3893f2788 100644 --- a/style/web/components/guide/_index.less +++ b/style/web/components/guide/_index.less @@ -140,7 +140,7 @@ } &--dialog { - margin-top: @spacer-1; + margin-top: @spacer-3; .@{prefix}-@{componentName} { &__action { diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 519b963da2..7554a6bb81 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -484,7 +484,7 @@ background-color: @bg-color-secondarycontainer; &-content { - margin-left: @spacer-2; + margin-left: @spacer-4; justify-content: center; } } From 06597674880d15541257387d231a926856a974c9 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 7 Mar 2023 11:49:40 +0800 Subject: [PATCH 195/312] style: primary renamed brand (#1185) --- style/mobile/components/loading/_var.less | 8 ++++---- style/mobile/components/message/_var.less | 2 +- style/mobile/components/slider/_var.less | 2 +- style/mobile/components/steps/_index.less | 2 +- style/mobile/components/steps/_mixin.less | 4 ++-- style/mobile/components/switch/_var.less | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index 9c1ca70d3f..c5ecf765fd 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -1,5 +1,5 @@ //颜色 -@loading-color: @primary-color-8; +@loading-color: @brand-color-8; // 字体 @loading-text-line-height: @text-line-height; @@ -22,10 +22,10 @@ @dot-height: 8px; @dot-radius: calc(@dotWidth / 2); -@dot-color: @primary-color-8; +@dot-color: @brand-color-8; @dot-bg-color: @dot-color; -@dot-before-color: rgba(@primary-color-8, .15); -@dot-after-color: rgba(@primary-color-8, .15); +@dot-before-color: rgba(@brand-color-8, .15); +@dot-after-color: rgba(@brand-color-8, .15); @dot-spacing: calc(@dotWidth * 2); diff --git a/style/mobile/components/message/_var.less b/style/mobile/components/message/_var.less index d912269ecb..7e07ec55f9 100644 --- a/style/mobile/components/message/_var.less +++ b/style/mobile/components/message/_var.less @@ -30,4 +30,4 @@ @message-z-index: 5000; -@message-color: @primary-color-8; +@message-color: @brand-color-8; diff --git a/style/mobile/components/slider/_var.less b/style/mobile/components/slider/_var.less index 793e705d86..8078987717 100644 --- a/style/mobile/components/slider/_var.less +++ b/style/mobile/components/slider/_var.less @@ -11,6 +11,6 @@ @slider-title-color: @text-color-primary; @slider-title-margin-right: @spacer-2; @slider-value-margin-left: @spacer-2; -@slider-disabled-color: @primary-color-3; +@slider-disabled-color: @brand-color-3; @slider-disabled-text-color: @text-color-disabled; diff --git a/style/mobile/components/steps/_index.less b/style/mobile/components/steps/_index.less index 86116625ba..764483dbee 100644 --- a/style/mobile/components/steps/_index.less +++ b/style/mobile/components/steps/_index.less @@ -59,7 +59,7 @@ content: ""; display: block; height: 1px; - background-color: @primary-color-5; + background-color: @brand-color-5; position: absolute; width: calc(100% - @step-horizontal-icon-width); left: calc(50% + @step-horizontal-icon-width / 2); diff --git a/style/mobile/components/steps/_mixin.less b/style/mobile/components/steps/_mixin.less index 21f8a6394d..1d4f5f5654 100644 --- a/style/mobile/components/steps/_mixin.less +++ b/style/mobile/components/steps/_mixin.less @@ -91,7 +91,7 @@ .@{prefix}-step--default:not(:last-child) { .@{prefix}-step__inner:after { - background-color: @primary-color-5; + background-color: @brand-color-5; } } } @@ -143,7 +143,7 @@ border-color: @brand-color; } .@{prefix}-step-title { - color: @primary-color-8; + color: @brand-color-8; } }; & when(@anchor-status = error) { diff --git a/style/mobile/components/switch/_var.less b/style/mobile/components/switch/_var.less index 75a3b4a2f8..7e34340fdc 100644 --- a/style/mobile/components/switch/_var.less +++ b/style/mobile/components/switch/_var.less @@ -16,7 +16,7 @@ @switch-checked-translate-x: 22px; @switch-checked-background-color: @brand-color; -@switch-checked-background-color-disabled: @primary-color-3; +@switch-checked-background-color-disabled: @brand-color-3; @switch-text-color: @text-color-placeholder; @switch-text-color-disabled: @text-color-disabled; From bdc55f9adf866f7c06ed002d83e248a5742f8afa Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 7 Mar 2023 17:42:01 +0800 Subject: [PATCH 196/312] =?UTF-8?q?feat:=20datepicker=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?defaultTime=20(#1186)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: datepicker 支持defaultTime * feat: datepicker 支持defaultTime * feat: datepicker 支持defaultTime --- js/date-picker/format.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index e52d1564cc..3c1936eebb 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -183,13 +183,14 @@ export function formatDate( } // 格式化时间 -export function formatTime(value: DateValue | DateValue[], timeFormat: string) { +export function formatTime(value: DateValue | DateValue[], timeFormat: string, defaultTime: string | string[]) { let result; if (Array.isArray(value)) { - result = value.map((v) => dayjs(v || new Date(new Date().setHours(0, 0, 0, 0))).format(timeFormat)); + result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : defaultTime[i])); + result = result.length ? result : defaultTime; } else { - result = dayjs((value || new Date(new Date().setHours(0, 0, 0, 0)))).format(timeFormat); + result = value ? dayjs(value).format(timeFormat) : defaultTime; } return result; From db4f09f2a5988b466b62163debf932a77518e6ca Mon Sep 17 00:00:00 2001 From: KMethod Date: Thu, 9 Mar 2023 15:06:37 +0800 Subject: [PATCH 197/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddialog=20?= =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD=20(#1187)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: methodchen --- style/web/components/dialog/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index d15e486ca0..b7f3283b9d 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -252,6 +252,7 @@ // 因为内容会超出 使用flex布局 display: flex; justify-content: center; + min-height: 100%; width: 100%; // 通过修改position为absolute进行拖拽定位 position: relative; From fad0821b611374dc9caf0d95e0a3cf4e1b581055 Mon Sep 17 00:00:00 2001 From: yc910920 Date: Thu, 9 Mar 2023 15:35:25 +0800 Subject: [PATCH 198/312] =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0=20?= =?UTF-8?q?(#1182)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/web/api/image.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/web/api/image.md b/docs/web/api/image.md index 4c7531ce93..8ddeaf2c5d 100644 --- a/docs/web/api/image.md +++ b/docs/web/api/image.md @@ -72,9 +72,6 @@ placeholder 在图像加载时占位显示。 ### 支持 `avif` 和 `webp` 格式的图片 -支持使用 `srcset` 设置特殊格式的图片渲染，如 `.avif` 和 `.webp`。 - -- [查看 AVIF 压缩](https://cloud.tencent.com/document/product/436/60455) -- [查看 WebP 压缩](https://cloud.tencent.com/document/product/436/60453) +支持使用 `srcset` 设置特殊格式的图片渲染，如 `.avif` 和 `.webp`。图片转码为 AVIF/WEBP 推荐使用腾讯云数据万象图片压缩服务。 {{ avif }} From 6bdbd24e3f8e70c811e231ff20851397aed8f371 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Sun, 12 Mar 2023 10:58:31 +0800 Subject: [PATCH 199/312] feat(web): table, disabled fixed column draggable (#1179) * feat(web): table, disbaled fixed column draggable * docs(web): update table docs * doc(web): table --------- Co-authored-by: sheepluo --- docs/web/api/table.md | 6 ++++-- style/web/components/table/_index.less | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/web/api/table.md b/docs/web/api/table.md index f841dcae49..eb6c6f9e39 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -13,7 +13,7 @@ spline: data 因此，表格组件有三个：`BaseTable`（基础表格）、`PrimaryTable`（主表格）、`EnhancedTable`（增强型表格），三种表格都会导出。默认导出 `PrimaryTable`。 - `BaseTable`（基础表格）包含一些基础功能：固定表头、固定列、冻结行、加载态、分页、多级表头、合并单元格、自定义单元格、自定义表头、自定义表尾、文本省略、对齐方式、表格事件、尺寸、行类名、边框、斑马线、悬浮态、空数据等 -- `PrimaryTable` 或 `Table`（主表格）包含一些更高级的功能：行展开/收起、过滤、排序、异步加载、拖拽排序等。`PrimaryTable` 和 `Table` 包含 `BaseTable` 的所有功能。`Table` 和 `PrimaryTable` 完全等价。 +- `PrimaryTable` 或 `Table`（主表格）包含一些更高级的功能：行选中、行展开/收起、过滤、排序、异步加载、拖拽排序等。`PrimaryTable` 和 `Table` 包含 `BaseTable` 的所有功能。`Table` 和 `PrimaryTable` 完全等价。 - `EnhancedTable`（增强型表格）包含一些更复杂的功能：树形结构等。`EnhancedTable` 包含 `BaseTable` 和 `PrimaryTable` 的所有功能 一般情况下，直接使用 `PrimaryTable` 即可满足 90% 的需求，即默认导出的表格。涉及到非常复杂的需求后，使用 `EnhancedTable`。 @@ -207,6 +207,7 @@ spline: data - `onSelectChange` 会在选中行发生变化时触发 - 设置 `columns: [{ colKey: 'row-select', type: 'multiple' }]` 可以将任意列定义为行选中操作列。 - 分页场景下的行选中，默认允许跨分页选中，即翻页时，上一页选中结果依然保存。如果希望每一页单独控制选中，互不影响，可设置 `reserveSelectedRowOnPaginate=false` +- 注意：如果发现点击某一行便选中了全部，说明 `rowKey` 设置不正确，或者没有设置，请确保 `rowKey` 的值为 `data` 中的字段。 {{ select-multiple }} @@ -239,6 +240,7 @@ spline: data - 列配置 `filter.showConfirmAndReset` 用于控制是否显示“确认”“重置”按钮. - 列配置 `filter.resetValue` 用于设置点击“重置”按钮时的重置值，并非每个场景都会重置为 `''` 或 `[]` `null`，默认重置为 `''`。 - 表格属性 `filterRow` 可完全自定义过滤结果行显示内容，设置 `filterRow={() => null}` 隐藏过滤行。 +- 更多接口请查看 API 文档中的 `TableColumnFilter` {{ filter-controlled }} @@ -334,7 +336,7 @@ spline: data ### 可编辑的表格 -可编辑的表格分为单元格编辑表格和行编辑表格两种。 +可编辑的表格分为单元格编辑表格和行编辑表格两种。详细完整的接口请查看 API 文档中的 `TableEditableCellConfig`。 #### 可编辑单元格的表格 diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index ecc0a85885..e700554c06 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -1036,7 +1036,7 @@ .@{prefix}-table__handle-draggable:hover, .@{prefix}-table--row-draggable tr, -.@{prefix}-table--col-draggable .@{prefix}-table__th-cell-inner { +.@{prefix}-table__th--drag-sort { cursor: move; } From 58e656190379409a1859e7e59e121d910a19bfe2 Mon Sep 17 00:00:00 2001 From: puppetsheep <30862891+puppetsheep@users.noreply.github.com> Date: Mon, 13 Mar 2023 11:35:37 +0800 Subject: [PATCH 200/312] =?UTF-8?q?feat(locale):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=B9=81=E9=AB=94=E4=B8=AD=E6=96=87(=E5=8F=B0=E7=81=A3?= =?UTF-8?q?=E5=9C=B0=E5=8D=80)=E8=AA=9E=E8=A8=80=E6=94=AF=E6=8C=81=20(#118?= =?UTF-8?q?9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/global-config/locale/zh_TW.ts | 227 +++++++++++++++++++++++++++++++ 1 file changed, 227 insertions(+) create mode 100644 js/global-config/locale/zh_TW.ts diff --git a/js/global-config/locale/zh_TW.ts b/js/global-config/locale/zh_TW.ts new file mode 100644 index 0000000000..ba8cc3c95a --- /dev/null +++ b/js/global-config/locale/zh_TW.ts @@ -0,0 +1,227 @@ +/* eslint-disable no-template-curly-in-string */ +// 文件有效，为国际化做准备 +import 'dayjs/locale/zh-tw'; + +export default { + pagination: { + itemsPerPage: '{size} 條/頁', + jumpTo: '跳至', + page: '頁', + total: '共 {total} 項數據', + }, + cascader: { + empty: '暫無數據', + loadingText: '加載中', + placeholder: '請選擇', + }, + calendar: { + yearSelection: '{year} 年', + monthSelection: '{month} 月', + yearRadio: '年', + monthRadio: '月', + hideWeekend: '隱藏周末', + showWeekend: '顯示周末', + today: '今天', + thisMonth: '本月', + week: '一,二,三,四,五,六,日', + cellMonth: '1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月', + }, + transfer: { + title: '{checked} / {total} 項', + empty: '暫無數據', + placeholder: '請輸入關鍵詞搜索', + }, + timePicker: { + dayjsLocale: 'zh-tw', + now: '此刻', + confirm: '確定', + anteMeridiem: '上午', + postMeridiem: '下午', + placeholder: '選擇時間', + }, + dialog: { + confirm: '確定', + cancel: '取消', + }, + drawer: { + confirm: '確定', + cancel: '取消', + }, + popconfirm: { + confirm: { + content: '確定', + }, + cancel: { + content: '取消', + }, + }, + table: { + empty: '暫無數據', + loadingText: '正在加載中，請稍後', + loadingMoreText: '點擊加載更多', + filterInputPlaceholder: '請輸入内容（無默認值）', + sortAscendingOperationText: '點擊升序', + sortCancelOperationText: '點擊取消排序', + sortDescendingOperationText: '點擊降序', + clearFilterResultButtonText: '清空篩選', + columnConfigButtonText: '列配置', + columnConfigTitleText: '表格列配置', + columnConfigDescriptionText: '請選擇需要在表格中顯示的數據列', + confirmText: '確認', + cancelText: '取消', + resetText: '重置', + selectAllText: '全選', + searchResultText: '搜索"{result}"，找到{count}條結果', + }, + select: { + empty: '暫無數據', + loadingText: '加載中', + placeholder: '請選擇', + }, + tree: { + empty: '暫無數據', + }, + treeSelect: { + empty: '暫無數據', + loadingText: '加載中', + placeholder: '請選擇', + }, + datePicker: { + dayjsLocale: 'zh-tw', + placeholder: { + date: '請選擇日期', + month: '請選擇月份', + year: '請選擇年份', + }, + weekdays: ['一', '二', '三', '四', '五', '六', '日'], + months: [ + '1月', + '2月', + '3月', + '4月', + '5月', + '6月', + '7月', + '8月', + '9月', + '10月', + '11月', + '12月', + ], + quarters: ['一季度', '二季度', '三季度', '四季度'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: '日', + weekAbbreviation: '周', + yearAriaLabel: '年', + monthAriaLabel: '月', + comfirm: '確定', + selectTime: '選擇時間', + selectDate: '選擇日期', + nextYear: '下一年', + preYear: '上一年', + nextMonth: '下個月', + preMonth: '上個月', + preDecade: '上十年', + nextDecade: '下十年', + now: '當前', + }, + upload: { + sizeLimitMessage: '文件大小不能超過 {sizeLimit}', + cancelUploadText: '取消上傳', + triggerUploadText: { + fileInput: '選擇文件', + image: '點擊上傳圖片', + normal: '點擊上傳', + // 选择文件和上传文件是 2 个步骤，文本需明确步骤 + reupload: '重新選擇', + continueUpload: '繼續選擇', + delete: '刪除', + uploading: '上傳中', + }, + dragger: { + dragDropText: '釋放鼠標', + draggingText: '拖拽到此區域', + clickAndDragText: '點擊上方“選擇文件”或將文件拖拽到此區域', + }, + file: { + fileNameText: '文件名', + fileSizeText: '文件大小', + fileStatusText: '狀態', + fileOperationText: '操作', + fileOperationDateText: '上傳日期', + }, + progress: { + uploadingText: '正在上傳', + waitingText: '等待上傳', + failText: '上傳失敗', + successText: '上傳成功', + }, + }, + form: { + errorMessage: { + date: '請輸入正確的${name}', + url: '請輸入正確的${name}', + required: '${name}必填', + max: '${name}字符長度不能超過 ${validate} 個字符，一個中文等於兩個字符', + min: '${name}字符長度不能少於 ${validate} 個字符，一個中文等於兩個字符', + len: '${name}字符長度必須是 ${validate}', + enum: '${name}只能是${validate}等', + idcard: '請輸入正確的${name}', + telnumber: '請輸入正確的${name}', + pattern: '請輸入正確的${name}', + validator: '${name}不符合要求', + boolean: '${name}數據類型必須是布爾類型', + number: '${name}必須是數字', + }, + }, + input: { + placeholder: '請輸入', + }, + list: { + loadingText: '正在加載中，請稍後', + loadingMoreText: '點擊加載更多', + }, + alert: { + expandText: '展開更多', + collapseText: '收起', + }, + anchor: { + copySuccessText: '鏈接複製成功', + copyText: '複製鏈接', + }, + colorPicker: { + swatchColorTitle: '系統預設顔色', + recentColorTitle: '最近使用的顔色', + clearConfirmText: '確定清空最近使用的顔色嗎？', + }, + guide: { + finishButtonProps: { + content: '完成', + theme: 'primary', + }, + nextButtonProps: { + content: '下一步', + theme: 'primary', + }, + skipButtonProps: { + content: '跳過', + theme: 'default', + }, + prevButtonProps: { + content: '上一步', + theme: 'default', + }, + }, + image: { + errorText: '圖片無法顯示', + loadingText: '圖片加載中', + }, + imageViewer: { + errorText: '圖片加載失敗，可嘗試重新加載', + mirrorTipText: '鏡像', + rotateTipText: '旋轉', + originalSizeTipText: '原始大小', + }, +} as const; From fd559d8c520a24a5ef12a6573b2e2830bca79211 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Mon, 13 Mar 2023 15:50:47 +0800 Subject: [PATCH 201/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A5?= =?UTF-8?q?=E8=AF=AD=E9=9F=A9=E8=AF=AD=E6=98=9F=E6=9C=9F=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1190)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/global-config/locale/ja_JP.ts | 2 +- js/global-config/locale/ko_KR.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 7af51d250e..a49cafd146 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -93,7 +93,7 @@ export default { month: '月を選択してください', year: '年度を選択してください', }, - weekdays: ['一', '二', '三', '四', '五', '六', '日'], + weekdays: ['月', '火', '水', '木', '金', '土', '日'], months: [ '1 月', '2 月', diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index ea8bcb9123..75367a988b 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -93,7 +93,7 @@ export default { month: '월을 선택하세요', year: '연도를 선택하세요', }, - weekdays: ['하나', '둘', '삼', '4', '다섯', '여섯', '낮'], + weekdays: ['월', '화', '수', '목', '금', '토', '일'], months: [ '1 월', '2 월', From fa8bec984064b8163aca3f9598d514cbab235d32 Mon Sep 17 00:00:00 2001 From: azhe Date: Tue, 14 Mar 2023 09:48:26 +0800 Subject: [PATCH 202/312] Feat/optimize eslint config (#1191) * feat: add hex color rule * fix: correct color token variables * feat: add disallowed named color rule * fix: color vars lint error --------- Co-authored-by: sunzhe --- .stylelintrc | 12 +++++++++++- style/web/components/color-picker/_index.less | 13 +++++++++---- style/web/components/loading/_index.less | 3 +-- style/web/components/tooltip/_index.less | 10 +++++----- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index a4f6ae60e7..b04f6ee2e0 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -29,5 +29,15 @@ "color-function-notation": "legacy", "value-keyword-case": null }, - "overrides": [{ "files": ["**/*.less"], "customSyntax": "postcss-less" }] + "overrides": [ + { "files": ["**/*.less"], "customSyntax": "postcss-less" }, + { + "files": ["style/web/components/**/*.less"], + "ignoreFiles": ["**/_docs.less"], + "rules": { + "color-no-hex": true, + "color-named": "never" + } + } + ] } diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less index 72f021b021..bf4ea99ecd 100644 --- a/style/web/components/color-picker/_index.less +++ b/style/web/components/color-picker/_index.less @@ -84,7 +84,7 @@ height: @color-picker-slider-thumb-size; border-radius: @border-radius-circle; box-shadow: @color-picker-thumbs-shadow; - background: white; + background: @text-color-anti; color: @text-color-brand; padding: @color-picker-slider-thumb-padding; box-sizing: border-box; @@ -117,10 +117,12 @@ } &::before { + /* stylelint-disable-next-line color-no-hex */ background: linear-gradient(90deg, #fff, transparent); } &::after { + /* stylelint-disable-next-line color-no-hex */ background: linear-gradient(0deg, #000, transparent); } @@ -133,6 +135,7 @@ } .transparentBgImage () { + /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; @@ -144,11 +147,12 @@ position: relative; &--hue-type { + /* stylelint-disable-next-line color-named */ background: red; } &--alpha-type { - background: #fff; + background: @text-color-anti; .transparentBgImage(); } } @@ -193,6 +197,7 @@ } .@{prefix}-color-picker__hue { + /* stylelint-disable color-no-hex, color-named */ background: linear-gradient( 90deg, red, @@ -228,7 +233,7 @@ height: @color-picker-gradient-preview-height; border-radius: @color-picker-gradient-preview-radius; overflow: hidden; - background: #fff; + background: @text-color-anti; .transparentBgImage(); &-inner { @@ -544,7 +549,7 @@ border-radius: @color-picker-slider-wrapper-radius; .@{prefix}-color-picker--bg-alpha { - background: #fff; + background: @text-color-anti; .transparentBgImage(); } } diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less index 64d68448ed..2d8066bfa3 100644 --- a/style/web/components/loading/_index.less +++ b/style/web/components/loading/_index.less @@ -100,12 +100,11 @@ &-conic { width: 100%; height: 100%; - background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); border-radius: @border-radius-circle; /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); - /* stylelint-disable-next-line */ + /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); } } diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less index 88433d2936..d978b3c369 100644 --- a/style/web/components/tooltip/_index.less +++ b/style/web/components/tooltip/_index.less @@ -23,23 +23,23 @@ .@{prefix}-popup__content { color: @tooltip-text-color; background: @tooltip-bg; - box-shadow: inset 0 .5px 0 #5e5e5e, inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; + box-shadow: inset 0 .5px 0 @gray-color-9, inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9; } &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before { - box-shadow: inset -.5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; + box-shadow: inset -.5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9; } &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before { - box-shadow: inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e; + box-shadow: inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9; } &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before { - box-shadow: inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e; + box-shadow: inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9; } &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before { - box-shadow: inset .5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e; + box-shadow: inset .5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9; } } From 82abb269311397849fc8fa93cb93a13dd3bf52e6 Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 14 Mar 2023 11:16:34 +0800 Subject: [PATCH 203/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E6=A0=BC=E5=BC=8F=E5=8C=96=E9=97=AE=E9=A2=98=20(#1194?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复时间格式化问题 * fix: 修复时间格式化问题 --- js/date-picker/format.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 3c1936eebb..0164390a9a 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -182,15 +182,27 @@ export function formatDate( return result; } +// 对齐格式化时间 +export function calcFormatTime(time, timeFormat) { + if (time && timeFormat) { + const timeArr = time.split(':'); + const timeFormatArr = timeFormat.split(':'); + return timeArr.slice(0, timeFormatArr.length).join(':'); + } + return time; +} + // 格式化时间 export function formatTime(value: DateValue | DateValue[], timeFormat: string, defaultTime: string | string[]) { let result; if (Array.isArray(value)) { - result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : defaultTime[i])); - result = result.length ? result : defaultTime; + // eslint-disable-next-line no-param-reassign + if (!Array.isArray(defaultTime)) defaultTime = [defaultTime, defaultTime]; + result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); + result = result.length ? result : defaultTime.map((t) => calcFormatTime(t, timeFormat)); } else { - result = value ? dayjs(value).format(timeFormat) : defaultTime; + result = value ? dayjs(value).format(timeFormat) : calcFormatTime(defaultTime, timeFormat); } return result; From 7ba389ae0e49035ba1310e449e6877a2b171e77a Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 14 Mar 2023 14:18:46 +0800 Subject: [PATCH 204/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E6=A3=80=E6=B5=8B=E9=97=AE=E9=A2=98=20(#1195)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/date-picker/format.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 0164390a9a..f18c151bd7 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -183,7 +183,7 @@ export function formatDate( } // 对齐格式化时间 -export function calcFormatTime(time, timeFormat) { +export function calcFormatTime(time: string, timeFormat: string) { if (time && timeFormat) { const timeArr = time.split(':'); const timeFormatArr = timeFormat.split(':'); From 294fb4a9e3eb757180ec641bfa12666eb29e843f Mon Sep 17 00:00:00 2001 From: Kyrielin Date: Tue, 14 Mar 2023 14:57:31 +0800 Subject: [PATCH 205/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E6=A3=80=E6=B5=8B=E9=97=AE=E9=A2=98=20(#1196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/date-picker/format.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index f18c151bd7..994ce78b35 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -202,7 +202,7 @@ export function formatTime(value: DateValue | DateValue[], timeFormat: string, d result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); result = result.length ? result : defaultTime.map((t) => calcFormatTime(t, timeFormat)); } else { - result = value ? dayjs(value).format(timeFormat) : calcFormatTime(defaultTime, timeFormat); + result = value ? dayjs(value).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); } return result; From ee74bd99977ed91ab7b86f936a6f7f30bca2c9a1 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 14 Mar 2023 16:31:39 +0800 Subject: [PATCH 206/312] chore: fix typo (#1193) --- docs/web/api/link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/web/api/link.md b/docs/web/api/link.md index b1fdf870ce..9ee68e112e 100644 --- a/docs/web/api/link.md +++ b/docs/web/api/link.md @@ -35,7 +35,7 @@ spline: base ### 提示不同状态的链接 -在`default、primary、success、warming、danger`不同状态下，可提供对应的链接主题色。 +在`default、primary、success、warning、danger`不同状态下，可提供对应的链接主题色。 {{ theme }} From 61a972b6bebd6e0e8f4c4ef012bb4f47af270dee Mon Sep 17 00:00:00 2001 From: pechelhuang <649041955@qq.com> Date: Tue, 14 Mar 2023 17:03:48 +0800 Subject: [PATCH 207/312] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AD=98?= =?UTF-8?q?=E5=9C=A8=E8=A1=A8=E6=A0=BC=E5=B7=A6=E8=BE=B9=E5=86=BB=E7=BB=93?= =?UTF-8?q?=E5=88=97=EF=BC=8C=E5=BE=80=E5=8F=B3=E8=BE=B9=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=97=B6=EF=BC=8Chover=E8=A1=A8=E5=A4=B4=E5=87=BA=E7=8E=B0?= =?UTF-8?q?=E8=BE=B9=E6=A1=86=E5=90=8E=EF=BC=8C=E8=A1=A8=E5=A4=B4=E5=86=BB?= =?UTF-8?q?=E7=BB=93=E5=88=97=E5=92=8C=E8=A1=A8=E6=A0=BC=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E5=86=BB=E7=BB=93=E5=88=97=E6=B2=A1=E6=9C=89=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1197)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复表格左边冻结列左右滚动时，hover表头出现边框后，表头冻结列和表格内容冻结列没有对齐问题 * fix(table): 修复格式 --------- Co-authored-by: pechelhuang --- style/web/components/table/_index.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index e700554c06..4e511033d1 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -1093,6 +1093,16 @@ border-top: @border; } } + + /** 表格左边有冻结列滚动时，去掉hover表头时多出的一个像素，避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ + &.@{prefix}-table__content--scrollable-to-left.@{prefix}-table__content--scrollable-to-right, + &.@{prefix}-table__content--scrollable-to-left { + thead.@{prefix}-table__header:hover { + .@{prefix}-table__cell--fixed-left-last:not(:last-child) { + border-right: 0; + } + } + } } /** 可选中行的场景下，将 Checkbox 和 Radio 铺满整个单元格，增大点击范围，方便用户选中 */ From 13f2977a0df729b5053f98caae796e3b90d72d2a Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 14 Mar 2023 20:27:56 +0800 Subject: [PATCH 208/312] style(Stepper): update style for mobile (#1198) --- docs/mobile/api/stepper.md | 26 +-- style/mobile/components/stepper/_index.less | 179 ++++++++++++-------- style/mobile/components/stepper/_var.less | 54 +++--- 3 files changed, 148 insertions(+), 111 deletions(-) diff --git a/docs/mobile/api/stepper.md b/docs/mobile/api/stepper.md index 7aa687e0c3..1f4fe6bd80 100644 --- a/docs/mobile/api/stepper.md +++ b/docs/mobile/api/stepper.md @@ -6,24 +6,30 @@ isComponent: true toc: false --- -### 类型 +## 代码演示 -#### 基础步进器 +### 组件类型 -使用场景：在表单中需要用户输入数量时可以使用 +基础步进器 {{ base }} -#### 带单位步进器 +### 组件状态 -{{ unit-stepper }} +最大最小状态 -#### 纯步进器 +{{ min-max }} -{{ pure-stepper }} +禁用状态 -### 状态 +{{ status }} -#### 步进器状态 +### 组件样式 -{{ status }} \ No newline at end of file +步进器样式 + +{{ theme }} + +步进器尺寸 + +{{ size }} diff --git a/style/mobile/components/stepper/_index.less b/style/mobile/components/stepper/_index.less index bcd0e2136c..044cca35fe 100644 --- a/style/mobile/components/stepper/_index.less +++ b/style/mobile/components/stepper/_index.less @@ -2,86 +2,133 @@ @import "./_var.less"; -.@{prefix}-stepper { - overflow: hidden; +@stepper: ~"@{prefix}-stepper"; + +.@{stepper} { display: flex; align-items: center; - justify-content: flex-end; - width: 100%; - padding: @stepper-padding; - font-size: @stepper-font-size; - line-height: @stepper-line-height; + color: @stepper-input-color; &__minus, &__plus { - width: @stepper-button-width; - height: @stepper-button-height; - position: relative; - font-size: 24px; - color: @stepper-icon-color; + padding: 4px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + } - &.@{prefix}-is-disabled { - color: @stepper-icon-color-disabled; - } + &__input, + &__minus-icon, + &__plus-icon { + color: inherit; + } + + &__input--normal, + &__input--filled, + &__input--outline { + height: inherit; + box-sizing: border-box; } - &__icon { - display: block; + &--small { + height: @stepper-small-height; + font-size: @stepper-small-font-size; + } + + &--medium { + height: @stepper-medium-height; + font-size: @stepper-medium-font-size; + } + + &--large { + height: @stepper-large-height; + font-size: @stepper-large-font-size; } &__input { - display: inline-block; - width: @stepper-input-width; - height: @stepper-input-height; - font-size: @stepper-input-font-size; - color: @stepper-input-color; text-align: center; border: 0; vertical-align: top; background: 0; - box-sizing: border-box; - padding-top: 0; - padding-bottom: 0; - - &:disabled { - color: @stepper-color-disabled; - } - } - - &__pure { - width: auto; - display: inline-flex; - .@{prefix}-stepper__minus, - .@{prefix}-stepper__plus, - .@{prefix}-stepper__input { - border-radius: @stepper-pure-border; - background-color: @stepper-pure-background-color; - } - .@{prefix}-stepper__input { - width: @stepper-pure-input-width; - margin: @stepper-pure-input-margin; - font-size: @stepper-pure-input-font-size; - } - .@{prefix}-stepper__minus, - .@{prefix}-stepper__plus { - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - } - } - .@{prefix}-stepper__label { - white-space: nowrap; - } - - &.@{prefix}-is-disabled { - .@{prefix}-stepper__minus, - .@{prefix}-stepper__plus { - color: @stepper-icon-color-disabled; - } - - .@{prefix}-stepper__input { - color: @stepper-color-disabled; - } + height: inherit; + min-height: inherit; + } + + &__input--normal, + &__input--filled { + margin: 0 4px; + } + + &__input--small { + width: @stepper-small-input-width; + } + + &__input--medium { + height: @stepper-medium-height; + width: @stepper-medium-input-width; + } + + &__input--large { + width: @stepper-large-input-width; + } + + &__icon--small { + width: @stepper-small-height; + height: @stepper-small-height; + font-size: @stepper-small-icon-size; + } + + &__icon--medium { + width: @stepper-medium-height; + height: @stepper-medium-height; + font-size: @stepper-medium-icon-size; + } + + &__icon--large { + width: @stepper-large-height; + height: @stepper-large-height; + font-size: @stepper-large-icon-size; + } + + &__minus--outline, + &__plus--outline { + border: @stepper-border-width solid @stepper-border-color; + } + + &__input--outline { + padding: 0 4px; + border: none; + border-top: @stepper-border-width solid @stepper-border-color; + border-bottom: @stepper-border-width solid @stepper-border-color; + } + + &__minus--outline, + &__minus--filled { + border-radius: @stepper-border-radius 0 0 @stepper-border-radius; + } + + &__plus--outline, + &__plus--filled { + border-radius: 0 @stepper-border-radius @stepper-border-radius 0; + } + + &__minus--filled, + &__plus--filled { + background-color: @bg-color-secondarycontainer; + } + + &__input--filled { + background-color: @bg-color-secondarycontainer; + } + + &--normal-disabled { + color: @stepper-input-disabled-color; + } + + &--filled-disabled, + &--outline-disabled { + color: @stepper-input-disabled-color; + background-color: @stepper-input-disabled-bg; } } diff --git a/style/mobile/components/stepper/_var.less b/style/mobile/components/stepper/_var.less index bacae4cee1..dc41909fed 100644 --- a/style/mobile/components/stepper/_var.less +++ b/style/mobile/components/stepper/_var.less @@ -1,35 +1,19 @@ -@stepper-padding: 0; - -@stepper-font-size: @font-size-l; - -@stepper-line-height: 24px; - -@stepper-input-width: 70px; - -@stepper-input-height: 24px; - -@stepper-input-color: @text-color-primary; - -@stepper-input-font-size: 16px; - -@stepper-button-width: 24px; - -@stepper-button-height: 24px; - -@stepper-icon-color: @text-color-primary; - -@stepper-icon-color-disabled: @text-color-disabled; - -@stepper-color-disabled: @text-color-disabled; - -@stepper-pure-icon-width: 9px; - -@stepper-pure-background-color: @gray-color-3; - -@stepper-pure-border: 2px; - -@stepper-pure-input-width: 36px; - -@stepper-pure-input-margin: 0 3px; - -@stepper-pure-input-font-size: @font-size-s; +@stepper-small-height: 20px; +@stepper-medium-height: 24px; +@stepper-large-height: 26px; +@stepper-small-font-size: 10px; +@stepper-medium-font-size: 12px; +@stepper-large-font-size: 16px; +@stepper-small-icon-size: 12px; +@stepper-medium-icon-size: 16px; +@stepper-large-icon-size: 20px; +@stepper-small-input-width: 34px; +@stepper-medium-input-width: 38px; +@stepper-large-input-width: 45px; +@stepper-border-width: 1px; + +@stepper-border-radius: var(--td-stepper-border-radius, @radius-small); +@stepper-border-color: var(--td-stepper-border-color, @component-border); +@stepper-input-color: var(--td-stepper-input-color, @font-gray-1); +@stepper-input-disabled-color: var(--td-stepper-input-disabled-color, @font-gray-4); +@stepper-input-disabled-bg: var(--td-stepper-input-disabled-bg, @bg-color-component-disabled); From d1fd22e9acf6308c4eb5beec11a176482a169f7f Mon Sep 17 00:00:00 2001 From: Y Date: Wed, 15 Mar 2023 10:31:56 +0800 Subject: [PATCH 209/312] feat: add api_v2 folder (#1199) --- docs/mobile/api/stepper.md | 26 +-- docs/mobile/api_v2/action-sheet.md | 28 +++ docs/mobile/api_v2/avatar.md | 28 +++ docs/mobile/api_v2/back-top.md | 23 +++ docs/mobile/api_v2/badge.md | 19 ++ docs/mobile/api_v2/button.md | 37 ++++ docs/mobile/api_v2/calendar.md | 31 +++ docs/mobile/api_v2/cascader.md | 19 ++ docs/mobile/api_v2/cell.md | 27 +++ docs/mobile/api_v2/checkbox.md | 35 ++++ docs/mobile/api_v2/collapse.md | 21 ++ docs/mobile/api_v2/count-down.md | 15 ++ docs/mobile/api_v2/date-time-picker.md | 23 +++ docs/mobile/api_v2/dialog.md | 25 +++ docs/mobile/api_v2/divider.md | 23 +++ docs/mobile/api_v2/drawer.md | 15 ++ docs/mobile/api_v2/dropdown-menu.md | 38 ++++ docs/mobile/api_v2/fab.md | 19 ++ docs/mobile/api_v2/grid.md | 19 ++ docs/mobile/api_v2/icon.md | 7 + docs/mobile/api_v2/image-viewer.md | 19 ++ docs/mobile/api_v2/image.md | 51 +++++ docs/mobile/api_v2/indexes.md | 11 ++ docs/mobile/api_v2/input.md | 35 ++++ docs/mobile/api_v2/list.md | 21 ++ docs/mobile/api_v2/loading.md | 43 +++++ docs/mobile/api_v2/message.md | 21 ++ docs/mobile/api_v2/navbar.md | 20 ++ docs/mobile/api_v2/notice-bar.md | 36 ++++ docs/mobile/api_v2/overlay.md | 11 ++ docs/mobile/api_v2/picker.md | 19 ++ docs/mobile/api_v2/popup.md | 41 ++++ docs/mobile/api_v2/progress.md | 33 ++++ docs/mobile/api_v2/pull-down-refresh.md | 23 +++ docs/mobile/api_v2/radio.md | 17 ++ docs/mobile/api_v2/rate.md | 39 ++++ docs/mobile/api_v2/result.md | 17 ++ docs/mobile/api_v2/search.md | 17 ++ docs/mobile/api_v2/skeleton.md | 31 +++ docs/mobile/api_v2/slider.md | 39 ++++ docs/mobile/api_v2/stepper.md | 35 ++++ docs/mobile/api_v2/steps.md | 35 ++++ docs/mobile/api_v2/sticky.md | 21 ++ docs/mobile/api_v2/swipe-cell.md | 53 ++++++ docs/mobile/api_v2/swiper.md | 23 +++ docs/mobile/api_v2/switch.md | 23 +++ docs/mobile/api_v2/tab-bar.md | 29 +++ docs/mobile/api_v2/tabs.md | 41 ++++ docs/mobile/api_v2/tag.md | 45 +++++ docs/mobile/api_v2/textarea.md | 37 ++++ docs/mobile/api_v2/toast.md | 35 ++++ docs/mobile/api_v2/upload.md | 15 ++ style/mobile/components/_index.less | 3 + style/mobile/components/stepper/_index.less | 179 +++++++----------- style/mobile/components/stepper/_var.less | 54 ++++-- .../mobile/components/stepper/v2/_index.less | 135 +++++++++++++ style/mobile/components/stepper/v2/_var.less | 19 ++ 57 files changed, 1656 insertions(+), 148 deletions(-) create mode 100644 docs/mobile/api_v2/action-sheet.md create mode 100644 docs/mobile/api_v2/avatar.md create mode 100644 docs/mobile/api_v2/back-top.md create mode 100644 docs/mobile/api_v2/badge.md create mode 100644 docs/mobile/api_v2/button.md create mode 100644 docs/mobile/api_v2/calendar.md create mode 100644 docs/mobile/api_v2/cascader.md create mode 100644 docs/mobile/api_v2/cell.md create mode 100644 docs/mobile/api_v2/checkbox.md create mode 100644 docs/mobile/api_v2/collapse.md create mode 100644 docs/mobile/api_v2/count-down.md create mode 100644 docs/mobile/api_v2/date-time-picker.md create mode 100644 docs/mobile/api_v2/dialog.md create mode 100644 docs/mobile/api_v2/divider.md create mode 100644 docs/mobile/api_v2/drawer.md create mode 100644 docs/mobile/api_v2/dropdown-menu.md create mode 100644 docs/mobile/api_v2/fab.md create mode 100644 docs/mobile/api_v2/grid.md create mode 100644 docs/mobile/api_v2/icon.md create mode 100644 docs/mobile/api_v2/image-viewer.md create mode 100644 docs/mobile/api_v2/image.md create mode 100644 docs/mobile/api_v2/indexes.md create mode 100644 docs/mobile/api_v2/input.md create mode 100644 docs/mobile/api_v2/list.md create mode 100644 docs/mobile/api_v2/loading.md create mode 100644 docs/mobile/api_v2/message.md create mode 100644 docs/mobile/api_v2/navbar.md create mode 100644 docs/mobile/api_v2/notice-bar.md create mode 100644 docs/mobile/api_v2/overlay.md create mode 100644 docs/mobile/api_v2/picker.md create mode 100644 docs/mobile/api_v2/popup.md create mode 100644 docs/mobile/api_v2/progress.md create mode 100644 docs/mobile/api_v2/pull-down-refresh.md create mode 100644 docs/mobile/api_v2/radio.md create mode 100644 docs/mobile/api_v2/rate.md create mode 100644 docs/mobile/api_v2/result.md create mode 100644 docs/mobile/api_v2/search.md create mode 100644 docs/mobile/api_v2/skeleton.md create mode 100644 docs/mobile/api_v2/slider.md create mode 100644 docs/mobile/api_v2/stepper.md create mode 100644 docs/mobile/api_v2/steps.md create mode 100644 docs/mobile/api_v2/sticky.md create mode 100644 docs/mobile/api_v2/swipe-cell.md create mode 100644 docs/mobile/api_v2/swiper.md create mode 100644 docs/mobile/api_v2/switch.md create mode 100644 docs/mobile/api_v2/tab-bar.md create mode 100644 docs/mobile/api_v2/tabs.md create mode 100644 docs/mobile/api_v2/tag.md create mode 100644 docs/mobile/api_v2/textarea.md create mode 100644 docs/mobile/api_v2/toast.md create mode 100644 docs/mobile/api_v2/upload.md create mode 100644 style/mobile/components/stepper/v2/_index.less create mode 100644 style/mobile/components/stepper/v2/_var.less diff --git a/docs/mobile/api/stepper.md b/docs/mobile/api/stepper.md index 1f4fe6bd80..7aa687e0c3 100644 --- a/docs/mobile/api/stepper.md +++ b/docs/mobile/api/stepper.md @@ -6,30 +6,24 @@ isComponent: true toc: false --- -## 代码演示 +### 类型 -### 组件类型 +#### 基础步进器 -基础步进器 +使用场景：在表单中需要用户输入数量时可以使用 {{ base }} -### 组件状态 +#### 带单位步进器 -最大最小状态 +{{ unit-stepper }} -{{ min-max }} +#### 纯步进器 -禁用状态 +{{ pure-stepper }} -{{ status }} +### 状态 -### 组件样式 +#### 步进器状态 -步进器样式 - -{{ theme }} - -步进器尺寸 - -{{ size }} +{{ status }} \ No newline at end of file diff --git a/docs/mobile/api_v2/action-sheet.md b/docs/mobile/api_v2/action-sheet.md new file mode 100644 index 0000000000..7e7518b9f5 --- /dev/null +++ b/docs/mobile/api_v2/action-sheet.md @@ -0,0 +1,28 @@ +--- +title: ActionSheet 动作面板 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 +spline: base +isComponent: true +toc: false +--- + +### 列表型 + +列表选项为左右两端的列表； +选项为纯文字； +对于警示操作（如不可逆的破坏性操作），建议将更改操作放在最后并用红色标识。 +列表型根据选择项内容的差异，可以有以下不同的样式 + +{{ list }} + +### 宫格型 + +面板左右贯通，根据操作数量使用 3 列或 4 列的宫格结构，尽量使菜单内容饱满。 +菜单选项使用图标加文字的形式呈现。 +菜单项的数量超过 8 个时，可作翻页处理。 + +{{ grid }} + +### 宫格型-多页 + +{{ grid-multiple }} diff --git a/docs/mobile/api_v2/avatar.md b/docs/mobile/api_v2/avatar.md new file mode 100644 index 0000000000..53f17a3775 --- /dev/null +++ b/docs/mobile/api_v2/avatar.md @@ -0,0 +1,28 @@ +--- +title: Avatar 头像 +description: 用图标、图片、字符的形式展示用户或事物信息 +spline: data +isComponent: true +toc: false +--- + +### 头像类型 + +头像样式可为默认头像、微信头像圆形、方形、自定义文字 + +{{ shape }} + +### 纯展示 从上往下 + +{{ exhibition }} + +### 带操作 从下往上 + +{{ action }} + +### 头像大小尺寸 + +头像默认支持三种大小：`small`、`medium`、`large`，用户可自定义设置大小 + +{{ size }} + diff --git a/docs/mobile/api_v2/back-top.md b/docs/mobile/api_v2/back-top.md new file mode 100644 index 0000000000..b22cfb6ced --- /dev/null +++ b/docs/mobile/api_v2/back-top.md @@ -0,0 +1,23 @@ +--- +title: BackTop 返回顶部 +description: 当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部。 +spline: base +isComponent: true +toc: false +--- + +### 圆型返回顶部 + +基础用法默认为白底圆形，固定在页面右下角，点击后返回页面顶部 + +通过 theme 属性可以设置按钮形状，可选项有 `round` / `half-round` / `round-dark` / `half-round-dark` + +通过 `text` 属性可以自定义按钮文案 + +通过 `icon` 属性可以自定义按钮 icon + +{{ round }} + +### 半圆型返回顶部 + +{{ half-round }} diff --git a/docs/mobile/api_v2/badge.md b/docs/mobile/api_v2/badge.md new file mode 100644 index 0000000000..22f1f7b0c5 --- /dev/null +++ b/docs/mobile/api_v2/badge.md @@ -0,0 +1,19 @@ +--- +title: Badge 徽标 +description: 用于告知用户，该区域的状态变化或者待处理任务的数量。 +spline: base +isComponent: true +toc: false +--- + +### 普通徽标 + +{{ base }} + +### 按钮徽标 + +{{ button }} + +### 单行徽标 + +{{ cell }} \ No newline at end of file diff --git a/docs/mobile/api_v2/button.md b/docs/mobile/api_v2/button.md new file mode 100644 index 0000000000..f2d5726530 --- /dev/null +++ b/docs/mobile/api_v2/button.md @@ -0,0 +1,37 @@ +--- +title: Button 按钮 +description: 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 +spline: base +isComponent: true +toc: false +--- + +### 类型 + +#### 基础按钮 + +##### 次按钮 + +使用场景：在用户进行的操作为流程中的辅助操作，或者进行不那么重要的交互行为时，选择用次按钮；次要按钮通常和主要按钮一起出现 + +##### 主按钮 + +使用场景：大部分场景都可以使用，例如反馈页、表单页、对话框，一个页面建议最多只出现一个主按钮； + +##### 文字按钮 + +使用场景：它的操作通常和其旁边内容相关，通常出现在标题旁、字段旁、列表最下方 + +{{ base }} + +### 状态 + +#### 按钮禁用态 + +{{ status }} + +### 规格 + +#### 按钮尺寸 + +{{ size }} \ No newline at end of file diff --git a/docs/mobile/api_v2/calendar.md b/docs/mobile/api_v2/calendar.md new file mode 100644 index 0000000000..ae83f1c945 --- /dev/null +++ b/docs/mobile/api_v2/calendar.md @@ -0,0 +1,31 @@ +--- +title: Calendar 日历 +description: 按照日历形式展示数据或日期的容器。 +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### 单个选择日期 + +{{ base }} + +### 多个选择日期 + +{{ multiple }} + +### 区间选择日期 + +{{ range }} + +### 自定义文案 + +{{ custom-text }} + +### 自定义按钮 + +{{ custom-button }} + +### 自定义日期区间 + +{{ custom-range }} \ No newline at end of file diff --git a/docs/mobile/api_v2/cascader.md b/docs/mobile/api_v2/cascader.md new file mode 100644 index 0000000000..7abdbf6754 --- /dev/null +++ b/docs/mobile/api_v2/cascader.md @@ -0,0 +1,19 @@ +--- +title: Cascader 级联选择器 +description: 用于多层级数据选择，主要为树形结构，可展示更多的数据。 +spline: base +isComponent: true +toc: false +--- + +### 基础 + +#### 基本用法 + +{{ base }} + +### 状态 + +#### 禁用可选项 + +{{ status }} diff --git a/docs/mobile/api_v2/cell.md b/docs/mobile/api_v2/cell.md new file mode 100644 index 0000000000..a772a80e87 --- /dev/null +++ b/docs/mobile/api_v2/cell.md @@ -0,0 +1,27 @@ +--- +title: Cell 单元格 +description: 用于各个类别行的信息展示。 +spline: base +isComponent: true +toc: false +--- + +### 单行单元格 + +{{ single }} + +### 多行单元格 + +{{ multiple }} + +### 组合单元格 + +{{ group }} + +### 显示组边框 + +{{ border }} + +### 单元格点击时触发 + +{{ click }} diff --git a/docs/mobile/api_v2/checkbox.md b/docs/mobile/api_v2/checkbox.md new file mode 100644 index 0000000000..e3c5df83b9 --- /dev/null +++ b/docs/mobile/api_v2/checkbox.md @@ -0,0 +1,35 @@ +--- +title: Checkbox 复选框 +description: 用于预设的一组选项中执行多项选择，并呈现选择结果。 +spline: base +isComponent: true +toc: false +--- + +### 基础多选框 + +{{ base }} + +### 右侧多选框 + +{{ right }} + +### 带全选多选框 + +{{ group }} + +### 限制最多可选数量 + +{{ max }} + +### 状态 + +{{ disable }} + +### 特殊类型 + +{{ icon }} + +### 规格 + +{{ size }} diff --git a/docs/mobile/api_v2/collapse.md b/docs/mobile/api_v2/collapse.md new file mode 100644 index 0000000000..daf5649623 --- /dev/null +++ b/docs/mobile/api_v2/collapse.md @@ -0,0 +1,21 @@ +--- +title: Collapse 折叠面板 +description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等 +spline: base +isComponent: true +toc: false +--- + +### 基础折叠面板 + +主要用于对复杂区域进行分组和隐藏 常用于订单信息展示等 +{{ base }} + +### 带操作说明 + +{{ action }} + +### 手风琴式 + +对信息进行分组展示和隐藏，每次只展示一组信息 +{{ accordion }} diff --git a/docs/mobile/api_v2/count-down.md b/docs/mobile/api_v2/count-down.md new file mode 100644 index 0000000000..11dce7fd48 --- /dev/null +++ b/docs/mobile/api_v2/count-down.md @@ -0,0 +1,15 @@ +--- +title: CountDown 倒计时 +description: 用于实时展示倒计时数值。 +spline: base +isComponent: true +toc: false +--- + +### 类型 + +{{ base }} + +### 规格 + +{{ specs }} diff --git a/docs/mobile/api_v2/date-time-picker.md b/docs/mobile/api_v2/date-time-picker.md new file mode 100644 index 0000000000..768fa537d5 --- /dev/null +++ b/docs/mobile/api_v2/date-time-picker.md @@ -0,0 +1,23 @@ +--- +title: DateTimePicker 时间选择器 +description: 用于选择一个时间点或者一个时间段。 +spline: data +isComponent: true +toc: false +--- + +### 基础时间选择器 + +{{ base }} + +### 选择年月 + +{{ year-month }} + +### 选择时分 + +{{ time }} + +### 自定义选择范围 + +{{ custom-range }} diff --git a/docs/mobile/api_v2/dialog.md b/docs/mobile/api_v2/dialog.md new file mode 100644 index 0000000000..4d090165a8 --- /dev/null +++ b/docs/mobile/api_v2/dialog.md @@ -0,0 +1,25 @@ +--- +title: Dialog 对话框 +description: 一种打断当前操作的模态视图，用于显示重要提示或请求用户进行重要操作 +spline: base +isComponent: true +toc: false +--- + +### 反馈类对话框 + +用于用户进行了一个操作，需传达重要信息，告知用户当前状况的情况。 + +{{ feedback }} + +### 确认类对话框 + +用于用户进行了一个操作，后果比较严重，需要用户二次确认的情况。 例如 退出、删除、清空等操作 + +{{ confirm }} + +### 输入对话框 + +用于用户进行了一个操作，需输入下一步操作的必要信息。 例如 输入密码 + +{{ input }} diff --git a/docs/mobile/api_v2/divider.md b/docs/mobile/api_v2/divider.md new file mode 100644 index 0000000000..56b396b822 --- /dev/null +++ b/docs/mobile/api_v2/divider.md @@ -0,0 +1,23 @@ +--- +title: Divider 分割符 +description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 +spline: base +isComponent: true +toc: false +--- + +### 基础分割符 + +基础分割线是没有文字的独立线条，又分为水平分割线和垂直分割线。水平分割线常用来对不同元素内容进行分割，垂直分割线常用来做行内分割。 + +{{ base }} + +### 文字 + 直线 + +{{ align }} + +### 纯文字 + 分割 + +带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用 + +{{ vertical }} diff --git a/docs/mobile/api_v2/drawer.md b/docs/mobile/api_v2/drawer.md new file mode 100644 index 0000000000..c0afed4763 --- /dev/null +++ b/docs/mobile/api_v2/drawer.md @@ -0,0 +1,15 @@ +--- +title: Drawer 抽屉 +description: 屏幕边缘滑出的浮层面板。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +{{ base }} + +### 带图标抽屉 + +{{ icon }} diff --git a/docs/mobile/api_v2/dropdown-menu.md b/docs/mobile/api_v2/dropdown-menu.md new file mode 100644 index 0000000000..89afa89f70 --- /dev/null +++ b/docs/mobile/api_v2/dropdown-menu.md @@ -0,0 +1,38 @@ +--- +title: DropdownMenu 下拉菜单 +description: 菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。 +spline: base +isComponent: true +toc: false +--- + +### 单选下拉菜单 + +用于选择项需要单选的场景 + +{{ single }} + +### 多选下拉菜单 + +用于选择项可以进行多选的场景 +选择后标签不改变名称，标题最多展示 4 个字符超出“…”处理 +多选下拉菜单根据选择项内容的差异，可以有以下不同的样式 + +{{ multiple }} + +### 树形下拉菜单 + +用于选择项需要多级选择的场景 例如地区、区域、食物的选择 + +{{ tree }} + +### 禁用菜单/选项 + +{{ disabled }} + + diff --git a/docs/mobile/api_v2/fab.md b/docs/mobile/api_v2/fab.md new file mode 100644 index 0000000000..d1d726f998 --- /dev/null +++ b/docs/mobile/api_v2/fab.md @@ -0,0 +1,19 @@ +--- +title: Fab 悬浮按钮 +description: 用于承载用户快速执行某个重要/高频的操作 +spline: base +isComponent: true +toc: false +--- + +### 基础使用 + +纯图标悬浮按钮，使用场景：当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布 + +{{ display }} + +### 进阶使用 + +图标加文字悬浮按钮，使用场景：当功能使用图标无法表意清楚需要文字辅助描述时，可使用图标加文字悬浮按钮 + +{{ text }} diff --git a/docs/mobile/api_v2/grid.md b/docs/mobile/api_v2/grid.md new file mode 100644 index 0000000000..dee21473c6 --- /dev/null +++ b/docs/mobile/api_v2/grid.md @@ -0,0 +1,19 @@ +--- +title: Grid 宫格 +description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。 +spline: base +isComponent: true +toc: false +--- + +### 基础宫格 + +{{ base }} + +### 带说明宫格 + +{{ desc }} + +### 带徽标宫格 + +{{ badge }} \ No newline at end of file diff --git a/docs/mobile/api_v2/icon.md b/docs/mobile/api_v2/icon.md new file mode 100644 index 0000000000..45256b0698 --- /dev/null +++ b/docs/mobile/api_v2/icon.md @@ -0,0 +1,7 @@ +--- +title: Icon 图标 +description: Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。 +usage: { title: '', description: '' } +spline: base +toc: true +--- diff --git a/docs/mobile/api_v2/image-viewer.md b/docs/mobile/api_v2/image-viewer.md new file mode 100644 index 0000000000..e2e381276b --- /dev/null +++ b/docs/mobile/api_v2/image-viewer.md @@ -0,0 +1,19 @@ +--- +title: ImageViewer 图片预览 +description: 预览图片内容。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +{{ base }} + +### 不展示关闭按钮 + +{{ closeBtn }} + +### 监听关闭事件 + +{{ closeEvent }} diff --git a/docs/mobile/api_v2/image.md b/docs/mobile/api_v2/image.md new file mode 100644 index 0000000000..a26b3bc5bf --- /dev/null +++ b/docs/mobile/api_v2/image.md @@ -0,0 +1,51 @@ +--- +title: Image 图片 +description: 增强版的img标签，提供多种图片填充方式，并且支持图片懒加载、加载中提示、加载失败提示。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +基础用法和原生 img 标签一样，可以设置 `src`、`alt`、`class` 等原生属性 + +{{ base }} + +### 图片形状 + +通过 `shape` 属性可以设置图片形状，可选项有 `circle` | `round` | `square`，分别代表圆形、圆角方形、方形 + +当图片长宽不相等时，无法使用 `circle` 展示一个完整圆形 + +{{ shape }} + +#### 填充模式 + +通过 `fit` 属性可以设置图片填充模式，可选项有 `contain` | `cover` | `fill` | `none` | `scale-down`，效果与原生的 `object-fit` 属性一致 + +{{ fit }} + +#### 图片位置 + +通过 `position` 属性可以设置图片位置，效果与原生的 `object-position` 属性一致 + +{{ position }} + +#### 图片懒加载 + +通过lazy属性来开启图片懒加载 + +{{ lazy }} + +### 加载中提示 + +Image 组件提供了默认的加载中提示，也支持通过 `loading` 插槽自定义提示内容 + +{{ loading }} + +### 加载失败提示 + +Image 组件提供了默认的加载失败提示，也支持通过 `error` 插槽自定义提示内容 + +{{ error }} diff --git a/docs/mobile/api_v2/indexes.md b/docs/mobile/api_v2/indexes.md new file mode 100644 index 0000000000..0d49c62fbb --- /dev/null +++ b/docs/mobile/api_v2/indexes.md @@ -0,0 +1,11 @@ +--- +title: Indexes 索引 +description: 用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。 +spline: base +isComponent: true +toc: false +--- + +### 基础索引 + +{{ base }} diff --git a/docs/mobile/api_v2/input.md b/docs/mobile/api_v2/input.md new file mode 100644 index 0000000000..9f56734b65 --- /dev/null +++ b/docs/mobile/api_v2/input.md @@ -0,0 +1,35 @@ +--- +title: Input 输入框 +description: 用于文本信息输入。 +spline: base +isComponent: true +toc: false +--- + +### 类型 + +{{ type }} + +### 状态 + +输入框状态可分为：正常、禁用、异常（带提示）、带额外内容提示、带状态图标提示。 + +{{ status }} + +### 特殊类型 + +使用场景：较复杂场景的文字填写，主要运用于密码输入、手机验证码输入、价格数量重量输入等场景 + +{{ special }} + +### 规格 + +{{ size }} + +### 内容位置 + +{{ align }} + +### 字数限制 + +{{ limit }} diff --git a/docs/mobile/api_v2/list.md b/docs/mobile/api_v2/list.md new file mode 100644 index 0000000000..8723c133f2 --- /dev/null +++ b/docs/mobile/api_v2/list.md @@ -0,0 +1,21 @@ +--- +title: List 列表 +description: 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。 +spline: base +isComponent: true +toc: false +--- + +### 基础列表 + + +{{ base }} + +### 下拉刷新 + +{{ pull-refresh }} + +### 错误提示 + +{{ err-tip }} + diff --git a/docs/mobile/api_v2/loading.md b/docs/mobile/api_v2/loading.md new file mode 100644 index 0000000000..e0402657d8 --- /dev/null +++ b/docs/mobile/api_v2/loading.md @@ -0,0 +1,43 @@ +--- +title: Loading 加载中 +description: 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。 +spline: base +isComponent: true +toc: false +--- + +### 类型 + +#### 纯icon + +{{ base }} + +#### icon加文字横向 + +{{ horz }} + +#### icon加文字竖向 + +{{ vert }} + +#### 纯文字 + +{{ pure-text }} + +#### 页面进度条加载 + +{{ bar }} + +#### 延迟加载 + +{{ delay }} + + +### 加载速度 + +{{ speed }} +### 规格 + +{{ size }} + + diff --git a/docs/mobile/api_v2/message.md b/docs/mobile/api_v2/message.md new file mode 100644 index 0000000000..e9a2001215 --- /dev/null +++ b/docs/mobile/api_v2/message.md @@ -0,0 +1,21 @@ +--- +title: Message 消息通知 +description: 用于轻量级反馈或提示，不会打断用户操作。 +spline: base +isComponent: true +toc: false +--- + +### 基础消息通知 + +弹窗内容为纯文本、标题和副标题、带操作按钮。 + + +{{ base }} + + +### 不同状态的消息通知 + +消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error），用 API `Message.info` 方法调用反馈类对话框 + +{{ theme }} diff --git a/docs/mobile/api_v2/navbar.md b/docs/mobile/api_v2/navbar.md new file mode 100644 index 0000000000..2e3e077d20 --- /dev/null +++ b/docs/mobile/api_v2/navbar.md @@ -0,0 +1,20 @@ +--- +title: Navbar 导航栏 +description: 用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。 +spline: base +isComponent: true +toc: false +--- + +### 类型 +#### 基础导航栏 + +{{ base }} + +#### 左侧双操作导航栏 + +{{ left-icon }} + +#### 右侧双操作导航栏 + +{{ right-icon }} diff --git a/docs/mobile/api_v2/notice-bar.md b/docs/mobile/api_v2/notice-bar.md new file mode 100644 index 0000000000..a6320f46f5 --- /dev/null +++ b/docs/mobile/api_v2/notice-bar.md @@ -0,0 +1,36 @@ +--- +title: Noticebar 公告栏 +description: 在导航栏下方，用于给用户显示提示消息 +spline: base +isComponent: true +toc: false +--- + +### 基础静态公告栏 + +{{ base }} + +### 带图标静态公告栏 + +{{ icon }} + +### 带操作公告栏 + +{{ event }} + +### 滚动公告栏 + +{{ scrolling }} + +### 自定义样式 + +{{ custom }} + +### 不同状态的公告栏 +公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error） + +{{ theme }} + +### 多行文字消息栏 + +{{ customization }} diff --git a/docs/mobile/api_v2/overlay.md b/docs/mobile/api_v2/overlay.md new file mode 100644 index 0000000000..93c8e6e61b --- /dev/null +++ b/docs/mobile/api_v2/overlay.md @@ -0,0 +1,11 @@ +--- +title: Overlay 遮罩层 +description: 通过遮罩层，可以强调部分内容 +spline: base +isComponent: true +toc: false +--- + +### 基础类型 + +{{ base }} \ No newline at end of file diff --git a/docs/mobile/api_v2/picker.md b/docs/mobile/api_v2/picker.md new file mode 100644 index 0000000000..c2b4f0f0c4 --- /dev/null +++ b/docs/mobile/api_v2/picker.md @@ -0,0 +1,19 @@ +--- +title: Picker 选择器 +description: 用于一组预设数据中的选择。 +spline: base +isComponent: true +toc: false +--- + +### 基础类型 + +{{ base }} + +### 多级联动 + +{{ cascade }} + +### 对象选择 + +{{ object }} \ No newline at end of file diff --git a/docs/mobile/api_v2/popup.md b/docs/mobile/api_v2/popup.md new file mode 100644 index 0000000000..23d31c83e7 --- /dev/null +++ b/docs/mobile/api_v2/popup.md @@ -0,0 +1,41 @@ +--- +title: Popup 弹出层 +description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。 +spline: base +isComponent: true +toc: false +--- + +### 中部弹出 + +使用场景：常用于轻提示场景 + +{{ placement-center }} + +### 底部弹出 + +使用场景：常用于较重要的操作反馈提示场景或不打断主任务的临时操作 + +{{ placement-bottom }} + +### 顶部弹出 + +使用场景：常用于及时反馈 + +{{ placement-top }} + +### 左侧弹出 + +使用场景：常用于页面导航场景 + +{{ placement-left }} + +### 右侧弹出 + +使用场景：常用于页面导航场景 + +{{ placement-right }} + +### 自定义动画 + +{{ custom-animation }} diff --git a/docs/mobile/api_v2/progress.md b/docs/mobile/api_v2/progress.md new file mode 100644 index 0000000000..67fcffb4f9 --- /dev/null +++ b/docs/mobile/api_v2/progress.md @@ -0,0 +1,33 @@ +--- +title: Progress 进度条 +description: 用于需要准确告知某个任务的当前进度 +spline: base +isComponent: true +toc: false +--- + +### 基础进度条 + +一般用于操作任务周期较长时，表示当前任务所处的阶段 + +{{ base }} + +### 隐藏数值进度条 + +相比基础进度条更轻量，一般用于任务提示较短的场景 + +{{ noText }} + +### 自定义样式 + +{{ custom }} + +### 自定义线宽 + +{{ strokeWidth }} + +### 状态 + +{{ status }} + + diff --git a/docs/mobile/api_v2/pull-down-refresh.md b/docs/mobile/api_v2/pull-down-refresh.md new file mode 100644 index 0000000000..def615f79c --- /dev/null +++ b/docs/mobile/api_v2/pull-down-refresh.md @@ -0,0 +1,23 @@ +--- +title: PullDownRefresh 下拉刷新 +description: 用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。 +spline: base +isComponent: true +toc: false +--- + +### 顶部下拉刷新 + +下拉刷新会触发 refresh 事件 + +通过 `loadingTexts` 属性可以自定义多个状态的文案，默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] + +通过 `loadingBarHeight` 属性可以自定义下拉区域高度，默认为 50px + +通过 `maxBarHeight` 属性可以自定义最大下拉高度，默认为 80px + +通过 `loadingProps` 属性可以自定义 loading 图标的属性 + +通过 `refreshTimeout` 属性可以自定义加载超时时间，默认为 3000ms。超时后会触发 timeout 事件，可传入回调函数 + +{{ base }} diff --git a/docs/mobile/api_v2/radio.md b/docs/mobile/api_v2/radio.md new file mode 100644 index 0000000000..643e9f40be --- /dev/null +++ b/docs/mobile/api_v2/radio.md @@ -0,0 +1,17 @@ +--- +title: Radio 单选框 +description: 用于在预设的一组选项中执行单项选择，并呈现选择结果。 +spline: base +isComponent: true +toc: false +--- + +### 基础单选框 + +使用场景：基本文本框 + +{{ base }} + +### 单选项组 + +{{ group }} diff --git a/docs/mobile/api_v2/rate.md b/docs/mobile/api_v2/rate.md new file mode 100644 index 0000000000..99cd2481e0 --- /dev/null +++ b/docs/mobile/api_v2/rate.md @@ -0,0 +1,39 @@ +--- +title: Rate 评分 +description: 用于对某行为/事物进行打分。 +spline: base +isComponent: true +toc: false +--- + +### 实心评分 + +{{ filled }} + +### 空心评分 + +{{ outline }} + +### 自定义数量评分 + +{{ count }} + +### 半星评分 + +{{ allow-half }} + +### 带描述评分 + +{{ text }} + +### 禁用评分 + +{{ disabled }} + +### 设置评分颜色 + +{{ color }} + +### 评价规格 + +{{ size }} diff --git a/docs/mobile/api_v2/result.md b/docs/mobile/api_v2/result.md new file mode 100644 index 0000000000..69d842acad --- /dev/null +++ b/docs/mobile/api_v2/result.md @@ -0,0 +1,17 @@ +--- +title: Result 结果 +description: 反馈结果 +spline: base +isComponent: true +toc: false +--- + +### 不同结果状态 + +表示当前任务的结果 + +{{ theme }} + +### 自定义样式 + +{{ custom }} diff --git a/docs/mobile/api_v2/search.md b/docs/mobile/api_v2/search.md new file mode 100644 index 0000000000..6beeb5248e --- /dev/null +++ b/docs/mobile/api_v2/search.md @@ -0,0 +1,17 @@ +--- +title: Search 搜索框 +description: 用于用户输入搜索信息，并进行页面内容搜索 +spline: base +isComponent: true +toc: false +--- + +### 基础搜索框 + +使用场景：常用于全局内容搜索，位于搜索内容上方 + +{{ base }} + +### 不同输入状态 + +{{ status }} diff --git a/docs/mobile/api_v2/skeleton.md b/docs/mobile/api_v2/skeleton.md new file mode 100644 index 0000000000..1c38203921 --- /dev/null +++ b/docs/mobile/api_v2/skeleton.md @@ -0,0 +1,31 @@ +--- +title: Skeleton 骨架屏 +description: 当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。 +spline: base +isComponent: true +toc: false +--- + +### 基础骨架屏 + +基础 + +{{ base }} + +头像组合 + +{{ avatar-text }} + +图片组合 + +{{ pic-text }} + +### 动画 + +渐变加载动画 + +{{ gradient }} + +### 闪烁加载动画 + +{{ flashed }} diff --git a/docs/mobile/api_v2/slider.md b/docs/mobile/api_v2/slider.md new file mode 100644 index 0000000000..687e0b5fb4 --- /dev/null +++ b/docs/mobile/api_v2/slider.md @@ -0,0 +1,39 @@ +--- +title: Slider 滑动选择器 +description: 用于选择横轴上的数值、区间、档位。 +spline: base +isComponent: true +toc: false +--- + +### 基础滑动选择器 + +使用场景：当仅需简单调节某事物的程度值、数量值，不需要精准度量时可使用 + +{{ base }} + +### 带数值滑动选择器 + +使用场景：当需简精准知晓调节某事物的程度值、数量值、区间值时可使用 + +{{ value }} + +### 起始非零滑动选择器 + +{{ unZero }} + +### 带刻度滑动选择器 + +{{ mark }} + +### 区间滑动选择器 + +{{ range }} + +### 滑动选择器禁用状态 + +{{ disable }} + +### 有标题滑动选择器 + +{{ title }} diff --git a/docs/mobile/api_v2/stepper.md b/docs/mobile/api_v2/stepper.md new file mode 100644 index 0000000000..1f4fe6bd80 --- /dev/null +++ b/docs/mobile/api_v2/stepper.md @@ -0,0 +1,35 @@ +--- +title: Stepper 步进器 +description: 用户通过调整“+”按钮、“-”按钮、数字输入框来调整具体需要的数值，可设置最大值和最小值 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 组件类型 + +基础步进器 + +{{ base }} + +### 组件状态 + +最大最小状态 + +{{ min-max }} + +禁用状态 + +{{ status }} + +### 组件样式 + +步进器样式 + +{{ theme }} + +步进器尺寸 + +{{ size }} diff --git a/docs/mobile/api_v2/steps.md b/docs/mobile/api_v2/steps.md new file mode 100644 index 0000000000..2c672103a4 --- /dev/null +++ b/docs/mobile/api_v2/steps.md @@ -0,0 +1,35 @@ +--- +title: Steps 步骤条 +description: 用于任务步骤展示或任务进度展示。 +spline: base +isComponent: true +toc: false +--- + +### 横向可操作步骤条 + +使用场景：常用于表单页，展示线性流程，且步骤支持随意切回/跳过 + +{{ click }} + +### 横向带图标可操作步骤条 + +{{ icon }} + +### 横向只读步骤条 + +使用场景：常用于表单页，展示线性流程，且不能随意切回/跳过步骤 + +{{ horizontal }} + +### 竖向只读步骤条 + +{{ vertical-readonly }} + +### 竖向简化只读步骤条 + +{{ vertical }} + +### 自定义内容步骤条 + +{{ content }} diff --git a/docs/mobile/api_v2/sticky.md b/docs/mobile/api_v2/sticky.md new file mode 100644 index 0000000000..f0dc61ad20 --- /dev/null +++ b/docs/mobile/api_v2/sticky.md @@ -0,0 +1,21 @@ +--- +title: Sticky 吸顶容器 +description: 用于常驻页面顶部的信息、操作展示。 +spline: base +isComponent: true +toc: false +--- + +### 基础吸顶 + +将内容包裹在 `Sticky` 组件内 + +{{ base }} + +### 吸顶距离 + +{{ offsetTop }} + +### 指定容器 + +{{ container }} diff --git a/docs/mobile/api_v2/swipe-cell.md b/docs/mobile/api_v2/swipe-cell.md new file mode 100644 index 0000000000..b8b1cd8fe0 --- /dev/null +++ b/docs/mobile/api_v2/swipe-cell.md @@ -0,0 +1,53 @@ +--- +title: SwipeCell 滑动单元格 +description: 用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。 +spline: base +isComponent: true +toc: false +--- + +### 左滑单操作 + +{{ left-one-menu }} + +### 左滑双操作 + +{{ left-two-menu }} + +### 左滑多操作 + +{{ left-more-menu }} + +### 左滑大列表 + +{{ left-card }} + +### 右滑单操作 + +{{ right-menu }} + +### 通过 expanded 实现父子组件联动 + +{{ bind }} + +### 通过直接传入内容或者使用 slot#content 来渲染 + +{{ content }} + +### 是否启用滑动功能 + +{{ disabled }} + +### 左右两侧都有菜单 + +{{ btns }} + +### 点击事件 + +{{ event }} + +### css 样式 + +- slot 里面的内容需要自己定义样式 +- 当使用 slot 插入按钮时，插槽第一层包裹组件设置了 height: 100%, 但是第二层内容没有设置，为了实现垂直铺满的效果，需要手动设置 style="height:100%" +- 如果是使用 #right 和#left 属性传递按钮数组，可以使用 theme 快速指定菜单背景颜色，theme 取值为 t-button 组件的 theme 取值 diff --git a/docs/mobile/api_v2/swiper.md b/docs/mobile/api_v2/swiper.md new file mode 100644 index 0000000000..e9ce7bf55a --- /dev/null +++ b/docs/mobile/api_v2/swiper.md @@ -0,0 +1,23 @@ +--- +title: Swiper 轮播 +description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +{{ base }} + +### 指定分页器类型 + +{{ pagination-type }} + +### 垂直方向 + +{{ direction }} + +### 受控方式 + +{{ control }} diff --git a/docs/mobile/api_v2/switch.md b/docs/mobile/api_v2/switch.md new file mode 100644 index 0000000000..adc38318d6 --- /dev/null +++ b/docs/mobile/api_v2/switch.md @@ -0,0 +1,23 @@ +--- +title: Switch 开关 +description: 用于控制某个功能的开启和关闭。 +spline: base +isComponent: true +toc: false +--- + +### 基础开关 + +使用场景：不需要通过文案强调开关状态时，可用基础开关 + +{{ base }} + +### 带描述开关 + +使用场景：需要通过描述解释、提示结果时，可用带描述开关 + +{{ desc }} + +### 禁用状态 + +{{ disabled }} diff --git a/docs/mobile/api_v2/tab-bar.md b/docs/mobile/api_v2/tab-bar.md new file mode 100644 index 0000000000..b9cbc97199 --- /dev/null +++ b/docs/mobile/api_v2/tab-bar.md @@ -0,0 +1,29 @@ +--- +title: TabBar 标签栏 +description: 用于在不同功能模块之间进行快速切换，位于页面底部。 +spline: base +isComponent: true +toc: false +--- + +### 基础标签栏 + +文本标签栏，分为单层双层，可以自定义标签栏内容 + +{{ base }} + +### 带徽章标签栏 + +{{ badge-props }} + +### 纯文本标签栏 + +{{ text }} + +### 纯图标标签栏 + +{{ pure-icon }} + +### 双层级纯文本标签栏 + +{{ text-spread }} diff --git a/docs/mobile/api_v2/tabs.md b/docs/mobile/api_v2/tabs.md new file mode 100644 index 0000000000..7cac3bd6df --- /dev/null +++ b/docs/mobile/api_v2/tabs.md @@ -0,0 +1,41 @@ +--- +title: Tabs 选项卡 +description: 用于内容分类后的展示切换。 +spline: base +isComponent: true +toc: false +--- + +### 横向选项卡 + +使用场景：常用于某事物不同状态的展示切换，例如购物场景下的订单状态，“待付款”“待发货”等 + +{{ base }} + +### 超过屏幕滑动 + +使用场景：常用于某事物不同类型的展示切换，例如影视场景下的“电影”“电视剧”“综艺”等 + +{{ scroll }} + +### 无下划线 + +{{ underscore }} + +### 无下划线 + +{{ animation }} + +### 选项卡状态 + +{{ disabled }} + +### 竖向选项卡 + +使用场景：常用于全量类目的展示切换，例如购物列表场景下的“服装“”家居“”珠宝“等，且内容区有可能为该类目下的二级分类 + +{{ vertical }} + +### 选中态文字尺寸规格 + +{{ size }} \ No newline at end of file diff --git a/docs/mobile/api_v2/tag.md b/docs/mobile/api_v2/tag.md new file mode 100644 index 0000000000..8e2ce1207e --- /dev/null +++ b/docs/mobile/api_v2/tag.md @@ -0,0 +1,45 @@ +--- +title: Tag 标签 +description: 用于表明主体的类目，属性或状态。 +spline: base +isComponent: true +toc: false +--- + +### 展示型标签 + +通常跟在标题后方或内容信息下方，用于内容属性或状态的辅助性展示，不可点击。一般用在列表的场景中标签文字建议控制在 4 个汉字以内（2 英文字母= 1 汉字） + +#### 风格 + +{{ theme }} + +#### 主题效果 + +{{ variant }} + +#### 大小 + +{{ size }} + +#### 圆角 + +{{ shape }} + +#### 超长省略 + +{{ ellipsis }} + +### 点击型标签 + +用于展示内容分类，单击后改变标签状态，对当前页面内容进行筛选及选择。 +标签文字建议控制在 6 个汉字以内（2 英文字母= 1 汉字） +不带图标型，点击后只改变状态 + +#### 可关闭 + +{{ closable }} + +#### 可选中 + +{{ checkable }} diff --git a/docs/mobile/api_v2/textarea.md b/docs/mobile/api_v2/textarea.md new file mode 100644 index 0000000000..91c753da90 --- /dev/null +++ b/docs/mobile/api_v2/textarea.md @@ -0,0 +1,37 @@ +--- +title: Textarea 多行文本框 +description: 用于多行文本信息输入。 +spline: base +isComponent: true +toc: false +--- + +### 基础多行文本框 + +使用场景：最常规的文字填写，且需填写的文字字数较少时可以使用 + +{{ base }} + +### 带标题多行文本框 + +{{ label }} + +### 自动增高多行文本框 + +{{ autosize }} + +### 禁用多行文本框 + +{{ status }} + +### 设置最大字符个数 + +{{ maxlength }} + +### 设置最大字符个数，一个汉字表示两个字符 + +{{ maxcharacter }} + +### 带事件文本框 + +{{ events }} diff --git a/docs/mobile/api_v2/toast.md b/docs/mobile/api_v2/toast.md new file mode 100644 index 0000000000..366f058141 --- /dev/null +++ b/docs/mobile/api_v2/toast.md @@ -0,0 +1,35 @@ +--- +title: Toast 轻提示 +description: 用于轻量级反馈或提示，不会打断用户操作。 +spline: base +isComponent: true +toc: false +--- + +### 文本轻提示 + +当进行某一操作，需要对该操作进行解释或者提示时，提示 2 秒后自动消失 提示内容整体居中对齐，最多显示两行 整体位置可以位于内容区顶部、底部、中心等，需整体居中对齐 + +{{ text }} + +### 默认提示 + +相比图标轻提示可以加一些辅助文字，对当前状态进行解释说明 + +{{ iconText }} + +### 不同位置的提示 + +{{ position }} + +### 显示遮罩 + +{{ preventScrollThrough }} + +### 手动关闭 + +{{ mask }} + +### 透传 Overlay + +{{ overlay }} diff --git a/docs/mobile/api_v2/upload.md b/docs/mobile/api_v2/upload.md new file mode 100644 index 0000000000..ec1538fb85 --- /dev/null +++ b/docs/mobile/api_v2/upload.md @@ -0,0 +1,15 @@ +--- +title: Upload 上传 +description: 用于相册读取或拉起拍照的图片上传功能。 +spline: base +isComponent: true +toc: false +--- + +### 单选上传图片 + +{{ base }} + +### 多选上传图片 + +{{ multiple }} diff --git a/style/mobile/components/_index.less b/style/mobile/components/_index.less index 261f17d670..420f64a909 100644 --- a/style/mobile/components/_index.less +++ b/style/mobile/components/_index.less @@ -87,3 +87,6 @@ @import "./pull-down-refresh/_index.less"; @import "./result/_index.less"; + +// mobile vue 临时使用 +@import "./stepper/v2/_index.less"; diff --git a/style/mobile/components/stepper/_index.less b/style/mobile/components/stepper/_index.less index 044cca35fe..bcd0e2136c 100644 --- a/style/mobile/components/stepper/_index.less +++ b/style/mobile/components/stepper/_index.less @@ -2,133 +2,86 @@ @import "./_var.less"; -@stepper: ~"@{prefix}-stepper"; - -.@{stepper} { +.@{prefix}-stepper { + overflow: hidden; display: flex; align-items: center; - color: @stepper-input-color; + justify-content: flex-end; + width: 100%; + padding: @stepper-padding; + font-size: @stepper-font-size; + line-height: @stepper-line-height; &__minus, &__plus { - padding: 4px; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - } + width: @stepper-button-width; + height: @stepper-button-height; + position: relative; + font-size: 24px; + color: @stepper-icon-color; - &__input, - &__minus-icon, - &__plus-icon { - color: inherit; - } - - &__input--normal, - &__input--filled, - &__input--outline { - height: inherit; - box-sizing: border-box; + &.@{prefix}-is-disabled { + color: @stepper-icon-color-disabled; + } } - &--small { - height: @stepper-small-height; - font-size: @stepper-small-font-size; - } - - &--medium { - height: @stepper-medium-height; - font-size: @stepper-medium-font-size; - } - - &--large { - height: @stepper-large-height; - font-size: @stepper-large-font-size; + &__icon { + display: block; } &__input { + display: inline-block; + width: @stepper-input-width; + height: @stepper-input-height; + font-size: @stepper-input-font-size; + color: @stepper-input-color; text-align: center; border: 0; vertical-align: top; background: 0; - height: inherit; - min-height: inherit; - } - - &__input--normal, - &__input--filled { - margin: 0 4px; - } - - &__input--small { - width: @stepper-small-input-width; - } - - &__input--medium { - height: @stepper-medium-height; - width: @stepper-medium-input-width; - } - - &__input--large { - width: @stepper-large-input-width; - } - - &__icon--small { - width: @stepper-small-height; - height: @stepper-small-height; - font-size: @stepper-small-icon-size; - } - - &__icon--medium { - width: @stepper-medium-height; - height: @stepper-medium-height; - font-size: @stepper-medium-icon-size; - } - - &__icon--large { - width: @stepper-large-height; - height: @stepper-large-height; - font-size: @stepper-large-icon-size; - } - - &__minus--outline, - &__plus--outline { - border: @stepper-border-width solid @stepper-border-color; - } - - &__input--outline { - padding: 0 4px; - border: none; - border-top: @stepper-border-width solid @stepper-border-color; - border-bottom: @stepper-border-width solid @stepper-border-color; - } - - &__minus--outline, - &__minus--filled { - border-radius: @stepper-border-radius 0 0 @stepper-border-radius; - } - - &__plus--outline, - &__plus--filled { - border-radius: 0 @stepper-border-radius @stepper-border-radius 0; - } - - &__minus--filled, - &__plus--filled { - background-color: @bg-color-secondarycontainer; - } - - &__input--filled { - background-color: @bg-color-secondarycontainer; - } - - &--normal-disabled { - color: @stepper-input-disabled-color; - } - - &--filled-disabled, - &--outline-disabled { - color: @stepper-input-disabled-color; - background-color: @stepper-input-disabled-bg; + box-sizing: border-box; + padding-top: 0; + padding-bottom: 0; + + &:disabled { + color: @stepper-color-disabled; + } + } + + &__pure { + width: auto; + display: inline-flex; + .@{prefix}-stepper__minus, + .@{prefix}-stepper__plus, + .@{prefix}-stepper__input { + border-radius: @stepper-pure-border; + background-color: @stepper-pure-background-color; + } + .@{prefix}-stepper__input { + width: @stepper-pure-input-width; + margin: @stepper-pure-input-margin; + font-size: @stepper-pure-input-font-size; + } + .@{prefix}-stepper__minus, + .@{prefix}-stepper__plus { + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + } + } + .@{prefix}-stepper__label { + white-space: nowrap; + } + + &.@{prefix}-is-disabled { + .@{prefix}-stepper__minus, + .@{prefix}-stepper__plus { + color: @stepper-icon-color-disabled; + } + + .@{prefix}-stepper__input { + color: @stepper-color-disabled; + } } } diff --git a/style/mobile/components/stepper/_var.less b/style/mobile/components/stepper/_var.less index dc41909fed..bacae4cee1 100644 --- a/style/mobile/components/stepper/_var.less +++ b/style/mobile/components/stepper/_var.less @@ -1,19 +1,35 @@ -@stepper-small-height: 20px; -@stepper-medium-height: 24px; -@stepper-large-height: 26px; -@stepper-small-font-size: 10px; -@stepper-medium-font-size: 12px; -@stepper-large-font-size: 16px; -@stepper-small-icon-size: 12px; -@stepper-medium-icon-size: 16px; -@stepper-large-icon-size: 20px; -@stepper-small-input-width: 34px; -@stepper-medium-input-width: 38px; -@stepper-large-input-width: 45px; -@stepper-border-width: 1px; - -@stepper-border-radius: var(--td-stepper-border-radius, @radius-small); -@stepper-border-color: var(--td-stepper-border-color, @component-border); -@stepper-input-color: var(--td-stepper-input-color, @font-gray-1); -@stepper-input-disabled-color: var(--td-stepper-input-disabled-color, @font-gray-4); -@stepper-input-disabled-bg: var(--td-stepper-input-disabled-bg, @bg-color-component-disabled); +@stepper-padding: 0; + +@stepper-font-size: @font-size-l; + +@stepper-line-height: 24px; + +@stepper-input-width: 70px; + +@stepper-input-height: 24px; + +@stepper-input-color: @text-color-primary; + +@stepper-input-font-size: 16px; + +@stepper-button-width: 24px; + +@stepper-button-height: 24px; + +@stepper-icon-color: @text-color-primary; + +@stepper-icon-color-disabled: @text-color-disabled; + +@stepper-color-disabled: @text-color-disabled; + +@stepper-pure-icon-width: 9px; + +@stepper-pure-background-color: @gray-color-3; + +@stepper-pure-border: 2px; + +@stepper-pure-input-width: 36px; + +@stepper-pure-input-margin: 0 3px; + +@stepper-pure-input-font-size: @font-size-s; diff --git a/style/mobile/components/stepper/v2/_index.less b/style/mobile/components/stepper/v2/_index.less new file mode 100644 index 0000000000..2b5a30277d --- /dev/null +++ b/style/mobile/components/stepper/v2/_index.less @@ -0,0 +1,135 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +@stepper: ~"@{prefix}-stepper"; + +.@{stepper} { + display: flex; + align-items: center; + color: @stepper-input-color; + + &__minus, + &__plus { + padding: 4px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + } + + &__input, + &__minus-icon, + &__plus-icon { + color: inherit; + font-size: inherit; + } + + &__input--normal, + &__input--filled, + &__input--outline { + height: inherit; + box-sizing: border-box; + } + + &--small { + height: @stepper-small-height; + font-size: @stepper-small-font-size; + } + + &--medium { + height: @stepper-medium-height; + font-size: @stepper-medium-font-size; + } + + &--large { + height: @stepper-large-height; + font-size: @stepper-large-font-size; + } + + &__input { + text-align: center; + border: 0; + vertical-align: top; + background: 0; + height: inherit; + min-height: inherit; + } + + &__input--normal, + &__input--filled { + margin: 0 4px; + } + + &__input--small { + width: @stepper-small-input-width; + } + + &__input--medium { + height: @stepper-medium-height; + width: @stepper-medium-input-width; + } + + &__input--large { + width: @stepper-large-input-width; + } + + &__icon--small { + width: @stepper-small-height; + height: @stepper-small-height; + font-size: @stepper-small-icon-size; + } + + &__icon--medium { + width: @stepper-medium-height; + height: @stepper-medium-height; + font-size: @stepper-medium-icon-size; + } + + &__icon--large { + width: @stepper-large-height; + height: @stepper-large-height; + font-size: @stepper-large-icon-size; + } + + &__minus--outline, + &__plus--outline { + border: @stepper-border-width solid @stepper-border-color; + } + + &__input--outline { + padding: 0 4px; + border: none; + border-top: @stepper-border-width solid @stepper-border-color; + border-bottom: @stepper-border-width solid @stepper-border-color; + } + + &__minus--outline, + &__minus--filled { + border-radius: @stepper-border-radius 0 0 @stepper-border-radius; + } + + &__plus--outline, + &__plus--filled { + border-radius: 0 @stepper-border-radius @stepper-border-radius 0; + } + + &__minus--filled, + &__plus--filled { + background-color: @bg-color-secondarycontainer; + } + + &__input--filled { + background-color: @bg-color-secondarycontainer; + } + + &--normal-disabled { + color: @stepper-input-disabled-color; + } + + &--filled-disabled, + &--outline-disabled { + color: @stepper-input-disabled-color; + background-color: @stepper-input-disabled-bg; + } +} diff --git a/style/mobile/components/stepper/v2/_var.less b/style/mobile/components/stepper/v2/_var.less new file mode 100644 index 0000000000..dc41909fed --- /dev/null +++ b/style/mobile/components/stepper/v2/_var.less @@ -0,0 +1,19 @@ +@stepper-small-height: 20px; +@stepper-medium-height: 24px; +@stepper-large-height: 26px; +@stepper-small-font-size: 10px; +@stepper-medium-font-size: 12px; +@stepper-large-font-size: 16px; +@stepper-small-icon-size: 12px; +@stepper-medium-icon-size: 16px; +@stepper-large-icon-size: 20px; +@stepper-small-input-width: 34px; +@stepper-medium-input-width: 38px; +@stepper-large-input-width: 45px; +@stepper-border-width: 1px; + +@stepper-border-radius: var(--td-stepper-border-radius, @radius-small); +@stepper-border-color: var(--td-stepper-border-color, @component-border); +@stepper-input-color: var(--td-stepper-input-color, @font-gray-1); +@stepper-input-disabled-color: var(--td-stepper-input-disabled-color, @font-gray-4); +@stepper-input-disabled-bg: var(--td-stepper-input-disabled-bg, @bg-color-component-disabled); From b028ddac1b75bfc373e565afb154aad70bdcc2ec Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 15 Mar 2023 11:57:57 +0800 Subject: [PATCH 210/312] feat: add formatThousandths utils (#1200) --- js/input-number/number.ts | 9 +++++++++ test/unit/input-number/number.test.js | 12 +++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 31329c41d2..a355f35609 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -249,3 +249,12 @@ export function canInputNumber(number: string, largeNumber: boolean) { if (String(number).match(/-/g)?.length > 1) return false; return true; } + +/** + * 对千分位进行处理 111,111,222 -> 111111222 + */ +export function formatThousandths(number: string) { + const thousandthsRegExp = /^[-+]?\d{1,3}(,\d{3})*(\.(\d*))?$/; + if (thousandthsRegExp.test(number)) return number.replace(/,/g, ''); + return number; +} diff --git a/test/unit/input-number/number.test.js b/test/unit/input-number/number.test.js index 244e717a37..17a2c556d7 100644 --- a/test/unit/input-number/number.test.js +++ b/test/unit/input-number/number.test.js @@ -1,4 +1,4 @@ -import { add, subtract } from '../../../js/input-number/number'; +import { add, subtract, formatThousandths } from '../../../js/input-number/number'; describe('add', () => { it('0.1 + 0.2', () => { @@ -83,3 +83,13 @@ describe('subtract', () => { expect(subtract(-1, -0.766)).toBe(-0.234); }); }); + +describe('formatThousandths', () => { + it('111,222,000', () => { + expect(formatThousandths('111,222,000')).toBe('111222000'); + }); + + it('111.,000.1', () => { + expect(formatThousandths('111.,000.1')).toBe('111.,000.1'); + }); +}); From 2ee98a709716317b4219f17941266bc306014f5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E9=A1=BA=E9=A1=BA?= Date: Wed, 15 Mar 2023 14:14:55 +0800 Subject: [PATCH 211/312] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=85transparent?= =?UTF-8?q?=E5=8F=98=E9=87=8F=EF=BC=8C=E4=BF=AE=E5=A4=8Dtextarea=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E7=84=A6=E7=82=B9=E5=90=8E=E7=9A=84=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=97=AE=E9=A2=98(#2509)=20(#1176)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 补充transparent变量，修复textarea获取焦点后的样式问题(#2509) * fix(textarea): remove css var --- style/web/components/textarea/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less index f519b2ad76..819d946e78 100644 --- a/style/web/components/textarea/_index.less +++ b/style/web/components/textarea/_index.less @@ -61,7 +61,6 @@ &__limit { font: @textarea-tips-font; color: @textarea-limit-color; - background: @textarea-bg-color-default; } .@{prefix}-is-disabled { From 5583116990888e70385ec7d084cd3b90d4c97ff8 Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Wed, 15 Mar 2023 18:47:17 +0800 Subject: [PATCH 212/312] feature(sticky-tool): add sticky-tool component style (#1183) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 --------- Co-authored-by: yiranwu --- style/web/components/sticky-tool/_index.less | 26 ++++++++++ style/web/components/sticky-tool/_mixin.less | 52 ++++++++++++++++++++ style/web/components/sticky-tool/_var.less | 39 +++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 style/web/components/sticky-tool/_index.less create mode 100644 style/web/components/sticky-tool/_mixin.less create mode 100644 style/web/components/sticky-tool/_var.less diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less new file mode 100644 index 0000000000..c983d4f934 --- /dev/null +++ b/style/web/components/sticky-tool/_index.less @@ -0,0 +1,26 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +@import "./_mixin.less"; + +.@{prefix}-sticky-tool { + position: fixed; + opacity: 1; + box-sizing: border-box; + background-color: @sticky-tool-background; + border: @sticky-tool-border; + box-shadow: @sticky-tool-shadow; + + .sticky-item-basic(); + + &--square { + border-radius: @sticky-tool-border-radius-square; + } + + &--round { + border-radius: @sticky-tool-border-radius-round; + } +} diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less new file mode 100644 index 0000000000..be7bf59420 --- /dev/null +++ b/style/web/components/sticky-tool/_mixin.less @@ -0,0 +1,52 @@ +.sticky-item-basic() { + .@{prefix}-sticky-item { + opacity: 1; + position: relative; + margin: @sticky-item-margin; + text-align: center; + font-size: @sticky-item-font-size; + + &:hover { + cursor: pointer; + background-color: @sticky-item-bgcolor-hover; + } + + &--normal { + width: @sticky-item-size-normal; + height: @sticky-item-size-normal; + + .t-icon { + width: @sticky-item-icon-size; + height: @sticky-item-icon-size; + margin: @sticky-item-icon-margin-normal; + } + } + + &--compact { + width: @sticky-item-size-compact; + height: @sticky-item-size-compact; + + .t-icon { + width: @sticky-item-icon-size; + height: @sticky-item-icon-size; + margin: @sticky-item-icon-margin-compact; + } + } + + &--square { + border-radius: @sticky-item-border-radius-square; + } + + &--round { + border-radius: @sticky-item-border-radius-round; + } + + .@{prefix}-sticky-item__label { + width: 100%; + height: @sticky-item-label-height; + line-height: @sticky-item-label-height; + margin-top: @sticky-item-label-margin-top; + text-align: center; + } + } +} diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less new file mode 100644 index 0000000000..2d859b501f --- /dev/null +++ b/style/web/components/sticky-tool/_var.less @@ -0,0 +1,39 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[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 + +// sticky-tool组件整体样式 +@sticky-tool-background: @bg-color-container; +@sticky-tool-border: @component-border; +@sticky-tool-shadow: @shadow-3; + +// sticky-tool shape=square +@sticky-tool-border-radius-square: @border-radius-medium; +@sticky-item-border-radius-square: @border-radius-default; + +// sticky-tool shape=round +@sticky-tool-border-radius-round: @border-radius-round; +@sticky-item-border-radius-round: @border-radius-circle; + +// sticky-item组件整体样式 +@sticky-item-margin: @comp-margin-xs; +@sticky-item-bgcolor-hover: @bg-color-container-hover; +@sticky-item-label-height: @comp-size-xxs; +@sticky-item-label-margin-top: @comp-margin-xxs; +@sticky-item-font-size: @font-size-s; +@sticky-item-icon-size: @icon-l; +// sticky-tool type=normal +@sticky-item-size-normal: @comp-size-xxxl; +@sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l; +// sticky-tool type=compact +@sticky-item-size-compact: @comp-size-xl; +@sticky-item-icon-margin-compact: @comp-margin-s; From 9463a794f252dd52d12083a301c49e67f86f04f0 Mon Sep 17 00:00:00 2001 From: Y Date: Wed, 15 Mar 2023 19:44:20 +0800 Subject: [PATCH 213/312] feat: add v2 folder (#1201) --- style/mobile/components/_index.less | 124 +++++ .../components/action-sheet/v2/_index.less | 145 ++++++ .../components/action-sheet/v2/_var.less | 10 + style/mobile/components/avatar/v2/_index.less | 145 ++++++ style/mobile/components/avatar/v2/_var.less | 27 ++ .../mobile/components/back-top/v2/_index.less | 75 +++ style/mobile/components/back-top/v2/_var.less | 17 + style/mobile/components/badge/v2/_index.less | 103 ++++ style/mobile/components/badge/v2/_var.less | 15 + style/mobile/components/button/v2/_index.less | 458 ++++++++++++++++++ style/mobile/components/button/v2/_var.less | 123 +++++ .../mobile/components/calendar/v2/_index.less | 192 ++++++++ style/mobile/components/calendar/v2/_var.less | 10 + .../mobile/components/cascader/v2/_index.less | 113 +++++ style/mobile/components/cascader/v2/_var.less | 15 + .../components/cell-group/v2/_index.less | 37 ++ .../mobile/components/cell-group/v2/_var.less | 6 + style/mobile/components/cell/v2/_index.less | 112 +++++ style/mobile/components/cell/v2/_var.less | 24 + .../components/check-tag/v2/_index.less | 135 ++++++ .../mobile/components/check-tag/v2/_var.less | 43 ++ .../mobile/components/checkbox/v2/_index.less | 211 ++++++++ style/mobile/components/checkbox/v2/_var.less | 20 + .../components/collapse-panel/v2/_index.less | 113 +++++ .../components/collapse-panel/v2/_var.less | 16 + .../mobile/components/collapse/v2/_index.less | 11 + style/mobile/components/collapse/v2/_var.less | 0 .../components/count-down/v2/_index.less | 105 ++++ .../mobile/components/count-down/v2/_var.less | 41 ++ .../date-time-picker/v2/_index.less | 12 + .../components/date-time-picker/v2/_var.less | 1 + style/mobile/components/dialog/v2/_index.less | 117 +++++ style/mobile/components/dialog/v2/_var.less | 17 + .../mobile/components/divider/v2/_index.less | 70 +++ style/mobile/components/divider/v2/_var.less | 4 + style/mobile/components/drawer/v2/_index.less | 56 +++ style/mobile/components/drawer/v2/_var.less | 13 + .../components/dropdown-item/v2/_index.less | 94 ++++ .../components/dropdown-item/v2/_var.less | 10 + .../components/dropdown-menu/v2/_index.less | 46 ++ .../components/dropdown-menu/v2/_var.less | 8 + style/mobile/components/empty/_index.less | 29 ++ style/mobile/components/empty/_var.less | 8 + style/mobile/components/fab/v2/_index.less | 11 + style/mobile/components/fab/v2/_var.less | 1 + style/mobile/components/footer/_index.less | 63 +++ style/mobile/components/footer/_var.less | 16 + .../components/grid-item/v2/_index.less | 127 +++++ .../mobile/components/grid-item/v2/_var.less | 18 + style/mobile/components/grid/v2/_index.less | 19 + style/mobile/components/grid/v2/_var.less | 2 + .../components/image-viewer/v2/_index.less | 86 ++++ .../components/image-viewer/v2/_var.less | 10 + style/mobile/components/image/v2/_index.less | 43 ++ style/mobile/components/image/v2/_var.less | 4 + .../components/indexes-anchor/v2/_index.less | 45 ++ .../components/indexes-anchor/v2/_var.less | 7 + .../mobile/components/indexes/v2/_index.less | 54 +++ style/mobile/components/indexes/v2/_var.less | 13 + style/mobile/components/input/v2/_index.less | 170 +++++++ style/mobile/components/input/v2/_var.less | 23 + style/mobile/components/link/_index.less | 82 ++++ style/mobile/components/link/_var.less | 42 ++ .../mobile/components/loading/v2/_index.less | 193 ++++++++ style/mobile/components/loading/v2/_var.less | 5 + .../mobile/components/message/v2/_index.less | 74 +++ style/mobile/components/message/v2/_var.less | 20 + style/mobile/components/navbar/v2/_index.less | 118 +++++ style/mobile/components/navbar/v2/_var.less | 14 + .../components/notice-bar/v2/_index.less | 85 ++++ .../mobile/components/notice-bar/v2/_var.less | 19 + .../mobile/components/overlay/v2/_index.less | 21 + style/mobile/components/overlay/v2/_var.less | 3 + .../components/picker-item/v2/_index.less | 35 ++ .../components/picker-item/v2/_var.less | 6 + style/mobile/components/picker/v2/_index.less | 89 ++++ style/mobile/components/picker/v2/_var.less | 21 + style/mobile/components/popup/v2/_index.less | 94 ++++ style/mobile/components/popup/v2/_var.less | 6 + .../mobile/components/progress/v2/_index.less | 177 +++++++ style/mobile/components/progress/v2/_var.less | 42 ++ .../pull-down-refresh/v2/_index.less | 39 ++ .../components/pull-down-refresh/v2/_var.less | 1 + style/mobile/components/rate/v2/_index.less | 88 ++++ style/mobile/components/rate/v2/_var.less | 7 + style/mobile/components/result/v2/_index.less | 54 +++ style/mobile/components/result/v2/_var.less | 17 + style/mobile/components/search/v2/_index.less | 74 +++ style/mobile/components/search/v2/_var.less | 12 + .../components/side-bar-item/v2/_index.less | 78 +++ .../components/side-bar-item/v2/_var.less | 9 + .../mobile/components/side-bar/v2/_index.less | 16 + style/mobile/components/side-bar/v2/_var.less | 3 + .../mobile/components/skeleton/v2/_index.less | 108 +++++ style/mobile/components/skeleton/v2/_var.less | 10 + style/mobile/components/slider/v2/_index.less | 204 ++++++++ style/mobile/components/slider/v2/_var.less | 15 + .../components/step-item/v2/_index.less | 194 ++++++++ .../mobile/components/step-item/v2/_var.less | 35 ++ style/mobile/components/steps/v2/_index.less | 23 + style/mobile/components/steps/v2/_var.less | 3 + .../components/swipe-cell/v2/_index.less | 42 ++ .../mobile/components/swipe-cell/v2/_var.less | 0 style/mobile/components/switch/v2/_index.less | 165 +++++++ style/mobile/components/switch/v2/_var.less | 45 ++ .../components/tab-bar-item/v2/_index.less | 133 +++++ .../components/tab-bar-item/v2/_var.less | 12 + .../mobile/components/tab-bar/v2/_index.less | 47 ++ style/mobile/components/tab-bar/v2/_var.less | 5 + .../components/tab-panel/v2/_index.less | 15 + .../mobile/components/tab-panel/v2/_var.less | 0 style/mobile/components/tabs/v2/_index.less | 213 ++++++++ style/mobile/components/tabs/v2/_var.less | 27 ++ style/mobile/components/tag/v2/_index.less | 162 +++++++ style/mobile/components/tag/v2/_var.less | 47 ++ .../mobile/components/textarea/v2/_index.less | 70 +++ style/mobile/components/textarea/v2/_var.less | 30 ++ style/mobile/components/toast/v2/_index.less | 88 ++++ style/mobile/components/toast/v2/_var.less | 6 + .../mobile/components/tree-select/_index.less | 43 ++ style/mobile/components/tree-select/_var.less | 6 + style/mobile/components/upload/v2/_index.less | 95 ++++ style/mobile/components/upload/v2/_var.less | 4 + 123 files changed, 7034 insertions(+) create mode 100644 style/mobile/components/action-sheet/v2/_index.less create mode 100644 style/mobile/components/action-sheet/v2/_var.less create mode 100644 style/mobile/components/avatar/v2/_index.less create mode 100644 style/mobile/components/avatar/v2/_var.less create mode 100644 style/mobile/components/back-top/v2/_index.less create mode 100644 style/mobile/components/back-top/v2/_var.less create mode 100644 style/mobile/components/badge/v2/_index.less create mode 100644 style/mobile/components/badge/v2/_var.less create mode 100644 style/mobile/components/button/v2/_index.less create mode 100644 style/mobile/components/button/v2/_var.less create mode 100644 style/mobile/components/calendar/v2/_index.less create mode 100644 style/mobile/components/calendar/v2/_var.less create mode 100644 style/mobile/components/cascader/v2/_index.less create mode 100644 style/mobile/components/cascader/v2/_var.less create mode 100644 style/mobile/components/cell-group/v2/_index.less create mode 100644 style/mobile/components/cell-group/v2/_var.less create mode 100644 style/mobile/components/cell/v2/_index.less create mode 100644 style/mobile/components/cell/v2/_var.less create mode 100644 style/mobile/components/check-tag/v2/_index.less create mode 100644 style/mobile/components/check-tag/v2/_var.less create mode 100644 style/mobile/components/checkbox/v2/_index.less create mode 100644 style/mobile/components/checkbox/v2/_var.less create mode 100644 style/mobile/components/collapse-panel/v2/_index.less create mode 100644 style/mobile/components/collapse-panel/v2/_var.less create mode 100644 style/mobile/components/collapse/v2/_index.less create mode 100644 style/mobile/components/collapse/v2/_var.less create mode 100644 style/mobile/components/count-down/v2/_index.less create mode 100644 style/mobile/components/count-down/v2/_var.less create mode 100644 style/mobile/components/date-time-picker/v2/_index.less create mode 100644 style/mobile/components/date-time-picker/v2/_var.less create mode 100644 style/mobile/components/dialog/v2/_index.less create mode 100644 style/mobile/components/dialog/v2/_var.less create mode 100644 style/mobile/components/divider/v2/_index.less create mode 100644 style/mobile/components/divider/v2/_var.less create mode 100644 style/mobile/components/drawer/v2/_index.less create mode 100644 style/mobile/components/drawer/v2/_var.less create mode 100644 style/mobile/components/dropdown-item/v2/_index.less create mode 100644 style/mobile/components/dropdown-item/v2/_var.less create mode 100644 style/mobile/components/dropdown-menu/v2/_index.less create mode 100644 style/mobile/components/dropdown-menu/v2/_var.less create mode 100644 style/mobile/components/empty/_index.less create mode 100644 style/mobile/components/empty/_var.less create mode 100644 style/mobile/components/fab/v2/_index.less create mode 100644 style/mobile/components/fab/v2/_var.less create mode 100644 style/mobile/components/footer/_index.less create mode 100644 style/mobile/components/footer/_var.less create mode 100644 style/mobile/components/grid-item/v2/_index.less create mode 100644 style/mobile/components/grid-item/v2/_var.less create mode 100644 style/mobile/components/grid/v2/_index.less create mode 100644 style/mobile/components/grid/v2/_var.less create mode 100644 style/mobile/components/image-viewer/v2/_index.less create mode 100644 style/mobile/components/image-viewer/v2/_var.less create mode 100644 style/mobile/components/image/v2/_index.less create mode 100644 style/mobile/components/image/v2/_var.less create mode 100644 style/mobile/components/indexes-anchor/v2/_index.less create mode 100644 style/mobile/components/indexes-anchor/v2/_var.less create mode 100644 style/mobile/components/indexes/v2/_index.less create mode 100644 style/mobile/components/indexes/v2/_var.less create mode 100644 style/mobile/components/input/v2/_index.less create mode 100644 style/mobile/components/input/v2/_var.less create mode 100644 style/mobile/components/link/_index.less create mode 100644 style/mobile/components/link/_var.less create mode 100644 style/mobile/components/loading/v2/_index.less create mode 100644 style/mobile/components/loading/v2/_var.less create mode 100644 style/mobile/components/message/v2/_index.less create mode 100644 style/mobile/components/message/v2/_var.less create mode 100644 style/mobile/components/navbar/v2/_index.less create mode 100644 style/mobile/components/navbar/v2/_var.less create mode 100644 style/mobile/components/notice-bar/v2/_index.less create mode 100644 style/mobile/components/notice-bar/v2/_var.less create mode 100644 style/mobile/components/overlay/v2/_index.less create mode 100644 style/mobile/components/overlay/v2/_var.less create mode 100644 style/mobile/components/picker-item/v2/_index.less create mode 100644 style/mobile/components/picker-item/v2/_var.less create mode 100644 style/mobile/components/picker/v2/_index.less create mode 100644 style/mobile/components/picker/v2/_var.less create mode 100644 style/mobile/components/popup/v2/_index.less create mode 100644 style/mobile/components/popup/v2/_var.less create mode 100644 style/mobile/components/progress/v2/_index.less create mode 100644 style/mobile/components/progress/v2/_var.less create mode 100644 style/mobile/components/pull-down-refresh/v2/_index.less create mode 100644 style/mobile/components/pull-down-refresh/v2/_var.less create mode 100644 style/mobile/components/rate/v2/_index.less create mode 100644 style/mobile/components/rate/v2/_var.less create mode 100644 style/mobile/components/result/v2/_index.less create mode 100644 style/mobile/components/result/v2/_var.less create mode 100644 style/mobile/components/search/v2/_index.less create mode 100644 style/mobile/components/search/v2/_var.less create mode 100644 style/mobile/components/side-bar-item/v2/_index.less create mode 100644 style/mobile/components/side-bar-item/v2/_var.less create mode 100644 style/mobile/components/side-bar/v2/_index.less create mode 100644 style/mobile/components/side-bar/v2/_var.less create mode 100644 style/mobile/components/skeleton/v2/_index.less create mode 100644 style/mobile/components/skeleton/v2/_var.less create mode 100644 style/mobile/components/slider/v2/_index.less create mode 100644 style/mobile/components/slider/v2/_var.less create mode 100644 style/mobile/components/step-item/v2/_index.less create mode 100644 style/mobile/components/step-item/v2/_var.less create mode 100644 style/mobile/components/steps/v2/_index.less create mode 100644 style/mobile/components/steps/v2/_var.less create mode 100644 style/mobile/components/swipe-cell/v2/_index.less create mode 100644 style/mobile/components/swipe-cell/v2/_var.less create mode 100644 style/mobile/components/switch/v2/_index.less create mode 100644 style/mobile/components/switch/v2/_var.less create mode 100644 style/mobile/components/tab-bar-item/v2/_index.less create mode 100644 style/mobile/components/tab-bar-item/v2/_var.less create mode 100644 style/mobile/components/tab-bar/v2/_index.less create mode 100644 style/mobile/components/tab-bar/v2/_var.less create mode 100644 style/mobile/components/tab-panel/v2/_index.less create mode 100644 style/mobile/components/tab-panel/v2/_var.less create mode 100644 style/mobile/components/tabs/v2/_index.less create mode 100644 style/mobile/components/tabs/v2/_var.less create mode 100644 style/mobile/components/tag/v2/_index.less create mode 100644 style/mobile/components/tag/v2/_var.less create mode 100644 style/mobile/components/textarea/v2/_index.less create mode 100644 style/mobile/components/textarea/v2/_var.less create mode 100644 style/mobile/components/toast/v2/_index.less create mode 100644 style/mobile/components/toast/v2/_var.less create mode 100644 style/mobile/components/tree-select/_index.less create mode 100644 style/mobile/components/tree-select/_var.less create mode 100644 style/mobile/components/upload/v2/_index.less create mode 100644 style/mobile/components/upload/v2/_var.less diff --git a/style/mobile/components/_index.less b/style/mobile/components/_index.less index 420f64a909..2221534f88 100644 --- a/style/mobile/components/_index.less +++ b/style/mobile/components/_index.less @@ -89,4 +89,128 @@ @import "./result/_index.less"; // mobile vue 临时使用 +@import "./action-sheet/v2/_index.less"; + +@import "./avatar/v2/_index.less"; + +@import "./back-top/v2/_index.less"; + +@import "./badge/v2/_index.less"; + +@import "./button/v2/_index.less"; + +@import "./calendar/v2/_index.less"; + +@import "./cascader/v2/_index.less"; + +@import "./cell/v2/_index.less"; + +@import "./cell-group/v2/_index.less"; + +@import "./check-tag/v2/_index.less"; + +@import "./checkbox/v2/_index.less"; + +@import "./collapse/v2/_index.less"; + +@import "./collapse-panel/v2/_index.less"; + +@import "./count-down/v2/_index.less"; + +@import "./date-time-picker/v2/_index.less"; + +@import "./dialog/v2/_index.less"; + +@import "./divider/v2/_index.less"; + +@import "./drawer/v2/_index.less"; + +@import "./dropdown-item/v2/_index.less"; + +@import "./dropdown-menu/v2/_index.less"; + +@import "./empty/_index.less"; // 新组件 + +@import "./fab/v2/_index.less"; + +@import "./footer/_index.less"; // 新组件 + +@import "./grid/v2/_index.less"; + +@import "./grid-item/v2/_index.less"; + +@import "./image/v2/_index.less"; + +@import "./image-viewer/v2/_index.less"; + +@import "./indexes/v2/_index.less"; + +@import "./indexes-anchor/v2/_index.less"; + +@import "./input/v2/_index.less"; + +@import "./link/_index.less"; // 新组件 + +@import "./loading/v2/_index.less"; + +@import "./message/v2/_index.less"; + +@import "./navbar/v2/_index.less"; + +@import "./notice-bar/v2/_index.less"; + +@import "./overlay/v2/_index.less"; + +@import "./picker/v2/_index.less"; + +@import "./picker-item/v2/_index.less"; + +@import "./popup/v2/_index.less"; + +@import "./progress/v2/_index.less"; + +@import "./pull-down-refresh/v2/_index.less"; + +@import "./rate/v2/_index.less"; + +@import "./result/v2/_index.less"; + +@import "./search/v2/_index.less"; + +@import "./side-bar-item/v2/_index.less"; + +@import "./side-bar/v2/_index.less"; + +@import "./skeleton/v2/_index.less"; + +@import "./slider/v2/_index.less"; + +@import "./step-item/v2/_index.less"; + +@import "./steps/v2/_index.less"; + +@import "./sticky/_index.less"; + @import "./stepper/v2/_index.less"; + +@import "./swipe-cell/v2/_index.less"; + +@import "./switch/v2/_index.less"; + +@import "./tab-bar-item/v2/_index.less"; + +@import "./tab-bar/v2/_index.less"; + +@import "./tab-panel/v2/_index.less"; + +@import "./tabs/v2/_index.less"; + +@import "./tag/v2/_index.less"; + +@import "./textarea/v2/_index.less"; + +@import "./toast/v2/_index.less"; + +@import "./tree-select/_index.less"; // 新组件 + +@import "./upload/v2/_index.less"; diff --git a/style/mobile/components/action-sheet/v2/_index.less b/style/mobile/components/action-sheet/v2/_index.less new file mode 100644 index 0000000000..4b69892ede --- /dev/null +++ b/style/mobile/components/action-sheet/v2/_index.less @@ -0,0 +1,145 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{action-sheet} { + &__content { + color: @action-sheet-color; + border-top-left-radius: @action-sheet-border-radius; + border-top-right-radius: @action-sheet-border-radius; + background-color: @bg-color-container; + overflow: hidden; + + &--grid { + padding-top: 16rpx; + } + + &:focus { + outline: 0; + } + } + + .flex-center() { + display: flex; + align-items: center; + justify-content: center; + } + + .ellipsis() { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__grid { + padding-bottom: 16rpx; + + &--swiper { + padding-bottom: 48rpx; + } + } + + &__description { + color: @action-sheet-description-color; + line-height: 44rpx; + font-size: 28rpx; + text-align: @action-sheet-text-align; + padding: 24rpx 32rpx; + + &:focus { + outline: 0; + } + .border(bottom, @action-sheet-border-color); + + &--left { + text-align: left; + + &::after { + left: 32rpx; + } + } + } + + &__list { + &-item { + .flex-center(); + .border(bottom, @action-sheet-border-color); + + height: @action-sheet-list-item-height; + padding: 0 32rpx; + + &:focus { + outline: 0; + } + + &--left { + justify-content: start; + + &::after { + left: 32rpx; + } + } + + &--disabled { + color: @action-sheet-list-item-disabled-color; + } + + &-text { + font-size: @font-size-m; + .ellipsis(); + } + + &-icon { + margin-right: 16rpx; + } + } + } + + &__swiper-wrap { + margin-top: 8rpx; + position: relative; + } + + &__footer { + background-color: @bg-color-container; + } + + &__gap-list { + height: 16rpx; + background-color: @action-sheet-border-color; + } + + &__gap-grid { + height: 1rpx; + background-color: @action-sheet-border-color; + } + + &__cancel { + .flex-center(); + + height: @action-sheet-cancel-height; + } + + &__dots { + position: absolute; + left: 50%; + bottom: 32rpx; + transform: translateX(-50%); + display: flex; + flex-direction: row; + + &-item { + width: 16rpx; + height: 16rpx; + background-color: #dcdcdc; + border-radius: 50%; + margin: 0 16rpx; + transition: all .4s ease-in; + + &.@{prefix}-is-active { + background-color: #0052d9; + } + } + } +} diff --git a/style/mobile/components/action-sheet/v2/_var.less b/style/mobile/components/action-sheet/v2/_var.less new file mode 100644 index 0000000000..b25946f1ac --- /dev/null +++ b/style/mobile/components/action-sheet/v2/_var.less @@ -0,0 +1,10 @@ +@action-sheet: ~"@{prefix}-action-sheet"; + +@action-sheet-list-item-height: var(--td-action-sheet-list-item-height, 56px); +@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @font-gray-4); +@action-sheet-border-color: var(--td-action-sheet-border-color, @gray-color-1); +@action-sheet-color: var(--td-action-sheet-color, @font-gray-1); +@action-sheet-border-radius: var(--td-action-sheet-border-radius, @radius-extra-large); +@action-sheet-description-color: var(--td-action-sheet-description-color, @font-gray-3); +@action-sheet-text-align: var(--td-action-sheet-text-align, center); +@action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 48px); diff --git a/style/mobile/components/avatar/v2/_index.less b/style/mobile/components/avatar/v2/_index.less new file mode 100644 index 0000000000..ff3c860039 --- /dev/null +++ b/style/mobile/components/avatar/v2/_index.less @@ -0,0 +1,145 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-avatar { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + background-color: @avatar-bg-color; + color: @avatar-content-color; + + &__wrapper { + display: inline-flex; + position: relative; + vertical-align: top; + margin-left: @avatar-margin-left; + } + + &--large { + width: @avatar-large-width; + height: @avatar-large-width; + font-size: @avatar-text-large-font-size; + + .@{prefix}-avatar__icon { + font-size: @avatar-icon-large-font-size; + } + } + + &--medium { + width: @avatar-medium-width; + height: @avatar-medium-width; + font-size: @avatar-text-medium-font-size; + + .@{prefix}-avatar__icon { + font-size: @avatar-icon-medium-font-size; + } + } + + &--small { + width: @avatar-small-width; + height: @avatar-small-width; + font-size: @avatar-text-small-font-size; + + .@{prefix}-avatar__icon { + font-size: @avatar-icon-small-font-size; + } + } + + .@{prefix}-image, + &__image { + width: 100%; + height: 100%; + } + + &--circle { + border-radius: @avatar-circle-border-radius; + overflow: hidden; + } + + &--round { + border-radius: @avatar-round-border-radius; + overflow: hidden; + } + + &__text, + &__icon { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + &:empty { + width: 0; + height: 0; + } + } + + // 头像边框 + &--border { + border-color: @avatar-border-color; + border-style: solid; + + &-small { + border-width: @avatar-border-width-small; + } + + &-medium { + border-width: @avatar-border-width-medium; + } + + &-large { + border-width: @avatar-border-width-large; + } + } +} + +// 头像组 +.@{prefix}-avatar-group { + display: inline-flex; + align-items: center; + + &-offset-left { + &-small { + --td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距 + } + + &-medium { + --td-avatar-margin-left: @avatar-group-offset-medium; // ‘medium’尺寸组合头像偏移间距 + } + + &-large { + --td-avatar-margin-left: @avatar-group-offset-large; // ‘large’尺寸组合头像偏移间距 + } + } + + &-offset-right { + &-small { + --td-avatar-margin-left: @avatar-group-offset-small; + } + + &-medium { + --td-avatar-margin-left: @avatar-group-offset-medium; + } + + &-large { + --td-avatar-margin-left: @avatar-group-offset-large; + } + } + + &__collapse--slot { + float: left; + } + + &__collapse--slot:not(:empty) + &__collapse--default { + display: none; + float: left; + } + + &__collapse--slot:empty + &__collapse--default { + display: block; + float: left; + } +} diff --git a/style/mobile/components/avatar/v2/_var.less b/style/mobile/components/avatar/v2/_var.less new file mode 100644 index 0000000000..0b632b067f --- /dev/null +++ b/style/mobile/components/avatar/v2/_var.less @@ -0,0 +1,27 @@ +@avatar-bg-color: var(--td-avatar-bg-color, @brand-color-light-active); +@avatar-content-color: var(--td-avatar-content-color, @brand-color); +@avatar-small-width: var(--td-avatar-small-width, 40px); +@avatar-medium-width: var(--td-avatar-medium-width, 48px); +@avatar-large-width: var(--td-avatar-large-width, 64px); + +@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-s); +@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-base); +@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, 16px); + +@avatar-icon-small-font-size: var(--td-avatar-icon-small-font-size, 20px); +@avatar-icon-medium-font-size: var(--td-avatar-icon-medium-font-size, 24px); +@avatar-icon-large-font-size: var(--td-avatar-icon-large-font-size, 32px); + +@avatar-border-width-small: var(--td-avatar-border-width-small, 2px); +@avatar-border-width-medium: var(--td-avatar-border-width-medium, 3px); +@avatar-border-width-large: var(--td-avatar-border-width-large, 4px); +@avatar-border-color: var(--td-avatar-border-color, #fff); +@avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle); +@avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default); + +@avatar-margin-left: var(--td-avatar-margin-left, 0); + +//组合头像偏移量 +@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -4px); +@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -6px); +@avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -8px); diff --git a/style/mobile/components/back-top/v2/_index.less b/style/mobile/components/back-top/v2/_index.less new file mode 100644 index 0000000000..3fa6ac231b --- /dev/null +++ b/style/mobile/components/back-top/v2/_index.less @@ -0,0 +1,75 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{backtop} { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: transparent; + overflow: hidden; + box-sizing: border-box; + transition: height .2s; + height: auto; + + &--fixed { + position: fixed; + right: @back-top-fixed-right; + bottom: @back-top-fixed-bottom; + } + + &--round, + &--round-dark { + width: @back-top-round-width; + height: @back-top-round-width; + border-radius: @back-top-round-border-radius; + } + + &--round, + &--half-round { + color: @back-top-round-color; + border: 1rpx solid @back-top-round-border-color; + background-color: @back-top-round-bg-color; + } + + &--round-dark, + &--half-round-dark { + color: @back-top-round-dark-color; + background-color: @back-top-round-dark-bg-color; + } + + &--half-round, + &--half-round-dark { + width: @back-top-half-round-width; + height: @back-top-half-round-height; + border-radius: @back-top-half-round-border-radius 0 0 @back-top-half-round-border-radius; + flex-direction: row; + right: 0; + } + + &__text--round, + &__text--round-dark, + &__text--half-round, + &__text--half-round-dark { + font-size: @back-top-text-font-size; + line-height: @back-top-text-line-height; + } + + &__text--half-round, + &__text--half-round-dark { + width: 2em; + } + + &__icon:not(:empty) + &__text--half-round, + &__icon:not(:empty) + &__text--half-round-dark { + margin-left: 8rpx; + } + + &__icon { + display: flex; + justify-content: center; + align-items: center; + font-size: @back-top-icon-font-size; + } +} diff --git a/style/mobile/components/back-top/v2/_var.less b/style/mobile/components/back-top/v2/_var.less new file mode 100644 index 0000000000..24b8a95d48 --- /dev/null +++ b/style/mobile/components/back-top/v2/_var.less @@ -0,0 +1,17 @@ +@backtop: ~"@{prefix}-back-top"; +@back-top-text-font-size: @font-size; +@back-top-text-line-height: 12px; +@back-top-icon-font-size: 22px; +@back-top-round-width: 48px; +@back-top-half-round-width: 60px; +@back-top-half-round-height: 40px; +@back-top-fixed-right: @spacer; +@back-top-fixed-bottom: @spacer-2; + +@back-top-round-color: var(--td-back-top-round-color, @font-gray-1); +@back-top-round-bg-color: var(--td-back-top-round-bg-color, @font-white-1); +@back-top-round-border-color: var(--td-back-top-round-border-color, @component-border); +@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); +@back-top-round-dark-color: var(--td-back-top-round-dark-color, @font-white-1); +@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-14); +@back-top-half-round-border-radius: var(--td-back-top-half-round-border-radius, @radius-round); diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less new file mode 100644 index 0000000000..20c2b6ac78 --- /dev/null +++ b/style/mobile/components/badge/v2/_index.less @@ -0,0 +1,103 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-badge { + position: relative; + display: inline-block; + vertical-align: top; + + &--basic { + z-index: 100; + padding: 0 @badge-basic-padding; + font-size: @badge-font-size; + color: @badge-text-color; + background-color: @badge-color; + text-align: center; + height: @badge-basic-height; + line-height: @badge-basic-height; + font-weight: @badge-font-weight; + border-radius: @badge-border-radius; + } + + &--dot { + height: @badge-dot-size; + border-radius: 50%; + min-width: @badge-dot-size; + padding: 0; + } + + &--count { + min-width: @badge-basic-width; + white-space: nowrap; + box-sizing: border-box; + } + + &--circle { + border-radius: calc(@badge-basic-height / 2); + } + + &__ribbon { + &-outer { + position: absolute; + top: 0; + right: 0; + } + + &--before, + &--after { + content: ""; + position: absolute; + width: 0; + height: 0; + bottom: 0; + border-bottom: @badge-basic-height solid @badge-color; + } + + &--before { + left: calc(-1 * @badge-basic-height + .5px); + border-left: @badge-basic-height solid transparent; + } + + &--after { + right: calc(-1 * @badge-basic-height + .5px); + border-right: @badge-basic-height solid transparent; + } + } + + &--ribbon { + display: inline-block; + transform: rotate(45deg); + border-radius: 0; + // padding: 0; + } + + &--bubble { + border-radius: @border-bubble-border-radius; + } + + // size + &--large { + font-size: @badge-large-font-size; + height: @badge-large-height; + min-width: @badge-large-height; + line-height: @badge-large-height; + padding: 0 @badge-large-padding; + } + + &--large&--circle { + border-radius: calc(@badge-large-height / 2); + } + + &__content:not(:empty) + .t-has-count { + transform: translate(50%, -50%); + position: absolute; + right: 0; + top: 0; + } + + &__content-text { + display: block; + line-height: 24px; + } +} diff --git a/style/mobile/components/badge/v2/_var.less b/style/mobile/components/badge/v2/_var.less new file mode 100644 index 0000000000..f1f9d04c3e --- /dev/null +++ b/style/mobile/components/badge/v2/_var.less @@ -0,0 +1,15 @@ +@badge-text-color: var(--td-badge-text-color, @font-white-1); +@badge-color: var(--td-badge-bg-color, @error-color); +@badge-font-size: var(--td-badge-font-size, @font-size-xs); +@badge-basic-height: var(--td-badge-basic-height, 16px); +@badge-basic-width: var(--td-badge-basic-width, 16px); +@badge-basic-padding: var(--td-badge-basic-padding, 4px); +@badge-font-weight: var(--td-badge-font-weight, 600); +@badge-border-radius: var(--td-badge-border-radius, 2px); +@border-bubble-border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px); +@badge-dot-size: var(--td-badge-dot-size, 8px); + +// large +@badge-large-font-size: var(--td-badge-large-font-size, @font-size-s); +@badge-large-height: var(--td-badge-large-height, 20px); +@badge-large-padding: var(--td-badge-large-padding, 5px); diff --git a/style/mobile/components/button/v2/_index.less b/style/mobile/components/button/v2/_index.less new file mode 100644 index 0000000000..9bcccac2cd --- /dev/null +++ b/style/mobile/components/button/v2/_index.less @@ -0,0 +1,458 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.button-size(@size) { + @fontSize: "button-@{size}-font-size"; + @padding: "button-@{size}-padding-horizontal"; + @height: "button-@{size}-height"; + @iconSize: "button-@{size}-icon-font-size"; + + .@{button}--size-@{size} { + font-size: @@fontSize; + padding-left: @@padding; + padding-right: @@padding; + height: @@height; + line-height: @@height; + + & .@{button}__icon { + font-size: @@iconSize; + } + } +} + +.button-theme(@theme) { + @color: "button-@{theme}-color"; + @bgColor: "button-@{theme}-bg-color"; + @borderColor: "button-@{theme}-border-color"; + @disabledColor: "button-@{theme}-disabled-color"; + @disabledBorderColor: "button-@{theme}-disabled-border-color"; + @disabledBgColor: "button-@{theme}-disabled-bg"; + @activeBgColor: "button-@{theme}-active-bg-color"; + @activeBorderColor: "button-@{theme}-active-border-color"; + + .@{button}--@{theme} { + color: @@color; + background-color: @@bgColor; + + &::after { + border-width: @button-border-width; + border-color: @@borderColor; + } + + &.@{button}--hover { + z-index: 0; + + &::after { + background-color: @@activeBgColor; + border-color: @@activeBorderColor; + } + } + + &.@{button}--disabled { + color: @@disabledColor; + background-color: @@disabledBgColor; + + &::after { + border-color: @@disabledBorderColor; + } + } + } +} + +.button-size(extra-small); +.button-size(small); +.button-size(medium); +.button-size(large); + +.button-theme(default); +.button-theme(primary); +.button-theme(light); +.button-theme(danger); + +.@{button} { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + white-space: nowrap; + text-align: center; + background-image: none; + transition: all .3s; + touch-action: manipulation; + border-radius: @button-border-radius; + outline: none; + /* stylelint-disable-next-line */ + font-family: PingFang SC, Microsoft YaHei, Arial Regular; + font-weight: @button-font-weight; + vertical-align: top; + + .cursor-pointer(); + + /* stylelint-disable-next-line */ + -webkit-appearance: none; + + &::after { + border-radius: calc(@button-border-radius * 2); + } + + &--text { + color: @button-default-color; + background: none; + + &::after { + border: 0; + } + + &.@{button}--hover::after { + background-color: @button-default-text-active-bg-color; + } + + &.@{button}--primary { + color: @button-primary-text-color; + background: none; + + &.@{button}--hover::after { + background-color: @button-primary-text-active-bg-color; + } + + &.@{button}--disabled { + color: @button-primary-text-disabled-color; + background: none; + } + } + + &.@{button}--danger { + color: @button-danger-text-color; + background: none; + + &.@{button}--hover::after { + background-color: @button-danger-text-active-bg-color; + } + + &.@{button}--disabled { + color: @button-danger-text-disabled-color; + background: none; + } + } + + &.@{button}--light { + color: @button-light-text-color; + background: none; + + &.@{button}--hover::after { + background-color: @button-light-text-active-bg-color; + } + } + + &.@{button}--disabled { + color: @button-default-disabled-color; + } + } + + &--ghost { + background-color: transparent; + color: @button-ghost-color; + + &::after { + border-color: @button-ghost-border-color; + } + + &.@{button}--hover::after { + background: none; + } + + &.@{button}--primary { + color: @button-ghost-primary-color; + + &::after { + border-color: @button-ghost-primary-border-color; + } + } + + &.@{button}--danger { + color: @button-ghost-danger-color; + + &::after { + border-color: @button-ghost-danger-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-ghost-disabled-color; + + &::after { + border-color: @button-ghost-disabled-color; + } + } + } + + &--outline { + color: @button-default-outline-color; + background-color: transparent; + + &::after { + border-color: @button-default-outline-border-color; + } + + &.@{button}--hover::after { + background-color: @button-default-outline-active-bg-color; + border-color: @button-default-outline-active-border-color; + } + + &.@{button}--disabled { + color: @button-default-outline-disabled-color; + + &::after { + border-color: @button-default-outline-disabled-color; + } + } + + &.@{button}--primary { + color: @button-primary-outline-color; + + &::after { + border-color: @button-primary-outline-border-color; + } + + &.@{button}--hover { + color: @button-primary-outline-active-border-color; + + &::after { + background-color: @button-primary-outline-active-bg-color; + border-color: @button-primary-outline-active-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-primary-outline-disabled-color; + + &::after { + border-color: @button-primary-outline-disabled-color; + } + } + } + + &.@{button}--danger { + color: @button-danger-outline-color; + + &::after { + border-color: @button-danger-outline-border-color; + } + + &.@{button}--hover { + color: @button-danger-outline-active-border-color; + + &::after { + background-color: @button-danger-outline-active-bg-color; + border-color: @button-danger-outline-active-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-danger-outline-disabled-color; + + &::after { + border-color: @button-danger-outline-disabled-color; + } + } + } + + &.@{button}--light { + color: @button-light-outline-color; + background-color: @button-light-outline-bg-color; + + &::after { + border-color: @button-light-outline-border-color; + } + + &.@{button}--hover { + color: @button-light-outline-active-border-color; + + &::after { + background-color: @button-light-outline-active-bg-color; + border-color: @button-light-outline-active-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-light-outline-disabled-color; + + &::after { + border-color: @button-light-outline-disabled-color; + } + } + } + } + + &--dashed { + background-color: transparent; + border-style: dashed; + + &.@{button}--primary { + color: @button-primary-dashed-color; + + &::after { + border-color: @button-primary-dashed-border-color; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-primary-dashed-disabled-color; + + &::after { + border-color: @button-primary-dashed-disabled-color; + } + } + } + + &.@{button}--danger { + color: @button-danger-dashed-color; + + &::after { + border-color: @button-danger-dashed-border-color; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-danger-dashed-disabled-color; + + &::after { + border-color: @button-danger-dashed-disabled-color; + } + } + } + } + + &__loading + &__content:not(:empty), + &__icon + &__content:not(:empty) { + margin-left: 8rpx; + } + + &__icon { + border-radius: @button-icon-border-radius; + } + + // 圆角长方形 + &--round { + &.@{button}--size-large { + border-radius: calc(@button-large-height / 2); + + &::after { + border-radius: @button-large-height; + } + } + + &.@{button}--size-medium { + border-radius: calc(@button-medium-height / 2); + + &::after { + border-radius: @button-medium-height; + } + } + + &.@{button}--size-small { + border-radius: calc(@button-small-height / 2); + + &::after { + border-radius: @button-small-height; + } + } + + &.@{button}--size-extra-small { + border-radius: calc(@button-extra-small-height / 2); + + &::after { + border-radius: @button-extra-small-height; + } + } + } + + // 正方形 + &--square { + padding: 0; + + &.@{button}--size-large { + width: @button-large-height; + } + + &.@{button}--size-medium { + width: @button-medium-height; + } + + &.@{button}--size-small { + width: @button-small-height; + } + + &.@{button}--size-extra-small { + width: @button-extra-small-height; + } + } + + // 圆形 + &--circle { + padding: 0; + border-radius: 50%; + + &.@{button}--size-large { + width: @button-large-height; + + &::after { + border-radius: 50%; + } + } + + &.@{button}--size-medium { + width: @button-medium-height; + + &::after { + border-radius: 50%; + } + } + + &.@{button}--size-small { + width: @button-small-height; + + &::after { + border-radius: 50%; + } + } + + &.@{button}--size-extra-small { + width: @button-extra-small-height; + + &::after { + border-radius: 50%; + } + } + } + + &--block { + display: flex; + width: 100%; + } + + &--disabled { + cursor: not-allowed; + } + + &__loading { + &--wrapper { + display: flex; + align-items: center; + justify-content: center; + } + + &--indicator { + color: @font-white-1; + } + } + + &.@{button}--hover::after { + z-index: -1; + } +} diff --git a/style/mobile/components/button/v2/_var.less b/style/mobile/components/button/v2/_var.less new file mode 100644 index 0000000000..2273968567 --- /dev/null +++ b/style/mobile/components/button/v2/_var.less @@ -0,0 +1,123 @@ +@button-border-width: var(--td-button-border-width, 2px); +@button-border-radius: var(--td-button-border-radius, @radius-default); +@button-font-weight: var(--td-button-font-weight, 600); + +@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base); +@button-small-font-size: var(--td-button-small-font-size, @font-size-base); +@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m); +@button-large-font-size: var(--td-button-large-font-size, @font-size-m); + +@button-extra-small-height: var(--td-button-extra-small-height, 28px); +@button-small-height: var(--td-button-small-height, 32px); +@button-medium-height: var(--td-button-medium-height, 40px); +@button-large-height: var(--td-button-large-height, 48px); + +// button icon +@button-icon-spacer: var(--td-button-icon-spacer, @spacer); +@button-icon-border-radius: var(--td-button-icon-border-radius, 4px); + +// padding +@button-extra-small-padding-horizontal: var(--td-button-extra-small-padding-horizontal, 8px); +@button-small-padding-horizontal: var(--td-button-small-padding-horizontal, 12px); +@button-medium-padding-horizontal: var(--td-button-medium-padding-horizontal, 16px); +@button-large-padding-horizontal: var(--td-button-large-padding-horizontal, 20px); + +// 图标大小 +@button-extra-small-icon-font-size: var(--td-button-extra-small-icon-font-size, 18px); +@button-small-icon-font-size: var(--td-button-small-icon-font-size, 18px); +@button-medium-icon-font-size: var(--td-button-medium-icon-font-size, 20px); +@button-large-icon-font-size: var(--td-button-large-icon-font-size, 24px); + +// default +@button-default-color: var(--td-button-default-color, @font-gray-1); +@button-default-bg-color: var(--td-button-default-bg-color, @bg-color-component); +@button-default-border-color: var(--td-button-default-border-color, @bg-color-component); +@button-default-disabled-color: var(--td-button-default-disabled-color, @font-gray-4); +@button-default-disabled-bg: var(--td-button-default-disabled-bg, @bg-color-component-disabled); +@button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @bg-color-component-disabled); +// primary +@button-primary-color: var(--td-button-primary-color, @font-white-1); +@button-primary-border-color: var(--td-button-primary-border-color, @brand-color); +@button-primary-bg-color: var(--td-button-primary-bg-color, @brand-color); +@button-primary-disabled-color: var(--td-button-primary-disabled-color, @font-white-1); +@button-primary-disabled-bg: var(--td-button-primary-disabled-bg, @brand-color-disabled); +@button-primary-disabled-border-color: var(--td-button-primary-disabled-border-color, @brand-color-disabled); +// light +@button-light-color: var(--td-button-light-color, @brand-color); +@button-light-border-color: var(--td-button-light-border-color, @brand-color-light); +@button-light-bg-color: var(--td-button-light-bg-color, @brand-color-light); +@button-light-disabled-color: var(--td-button-light-disabled-color, @brand-color-disabled); +@button-light-disabled-bg: var(--td-button-light-disabled-bg, @brand-color-light); +@button-light-disabled-border-color: var(--td-button-light-disabled-border-color, @brand-color-light); +// danger +@button-danger-color: var(--td-button-danger-color, @font-white-1); +@button-danger-border-color: var(--td-button-danger-border-color, @error-color); +@button-danger-bg-color: var(--td-button-danger-bg-color, @error-color); +@button-danger-disabled-color: var(--td-button-danger-disabled-color, @font-white-1); +@button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3); +@button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3); +// default + outline +@button-default-outline-color: var(--td-button-default-outline-color, @font-gray-1); +@button-default-outline-border-color: var(--td-button-default-outline-border-color, @component-border); +@button-default-outline-disabled-color: var(--td-button-default-outline-disabled-color, @component-border); +// primary + outline +@button-primary-outline-color: var(--td-button-primary-outline-color, @brand-color); +@button-primary-outline-border-color: var(--td-button-primary-outline-border-color, @button-primary-outline-color); +@button-primary-outline-disabled-color: var(--td-button-primary-outline-disabled-color, @brand-color-disabled); +// danger + outline +@button-danger-outline-color: var(--td-button-danger-outline-color, @error-color); +@button-danger-outline-border-color: var(--td-button-danger-outline-border-color, @button-danger-outline-color); +@button-danger-outline-disabled-color: var(--td-button-danger-outline-disabled-color, @error-color-3); +// light + outline +@button-light-outline-color: var(--td-button-light-outline-color, @brand-color); +@button-light-outline-border-color: var(--td-button-light-outline-border-color, @button-light-outline-color); +@button-light-outline-bg-color: var(--td-button-light-outline-bg-color, @brand-color-light); +@button-light-outline-disabled-color: var(--td-button-light-outline-disabled-color, @brand-color-disabled); +// primary + dashed +@button-primary-dashed-color: var(--td-button-primary-dashed-color, @brand-color); +@button-primary-dashed-border-color: var(--td-button-primary-dashed-border-color, @button-primary-dashed-color); +@button-primary-dashed-disabled-color: var(--td-button-primary-dashed-disabled-color, @brand-color-disabled); +// danger + dashed +@button-danger-dashed-color: var(--td-button-danger-dashed-color, @error-color); +@button-danger-dashed-border-color: var(--td-button-danger-dashed-border-color, @button-danger-dashed-color); +@button-danger-dashed-disabled-color: var(--td-button-danger-dashed-disabled-color, @button-danger-disabled-color); +// primary + text +@button-primary-text-color: var(--td-button-primary-text-color, @brand-color); +@button-primary-text-disabled-color: var(--td-button-primary-text-disabled-color, @brand-color-disabled); +// danger + text +@button-danger-text-color: var(--td-button-danger-text-color, @error-color); +@button-danger-text-disabled-color: var(--td-button-danger-text-disabled-color, @button-danger-disabled-color); +// light + text +@button-light-text-color: var(--td-button-light-text-color, @brand-color); +// ghost 优先级高于 theme，固定透明背景，白色边框，白色字体 +@button-ghost-color: var(--td-button-ghost-color, @bg-color-container); +@button-ghost-border-color: var(--td-button-ghost-border-color, @button-ghost-color); +@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, .35)); +@button-ghost-primary-color: var(--td-button-ghost-primary-color, @brand-color); +@button-ghost-primary-border-color: var(--td-button-ghost-primary-border-color, @brand-color); +@button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color); +@button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color); + +// 激活态背景和边框色 +@button-default-active-bg-color: var(--td-button-default-active-bg-color, @bg-color-component-active); +@button-default-active-border-color: var(--td-button-default-active-border-color, @bg-color-component-active); +@button-light-active-bg-color: var(--td-button-light-active-bg-color, @brand-color-light-active); +@button-light-active-border-color: var(--td-button-light-active-border-color, @brand-color-light-active); +@button-primary-active-bg-color: var(--td-button-primary-active-bg-color, @brand-color-active); +@button-primary-active-border-color: var(--td-button-primary-active-border-color, @brand-color-active); +@button-danger-active-bg-color: var(--td-button-danger-active-bg-color, @error-color-7); +@button-danger-active-border-color: var(--td-button-danger-active-border-color, @error-color-7); +@button-default-outline-active-bg-color: var(--td-button-default-outline-active-bg-color, @bg-color-container-active); +@button-default-outline-active-border-color: var(--td-button-default-outline-active-border-color, @component-border); +@button-primary-outline-active-bg-color: var(--td-button-primary-outline-active-bg-color, @bg-color-container-active); +@button-primary-outline-active-border-color: var(--td-button-primary-outline-active-border-color, @brand-color-active); +@button-danger-outline-active-bg-color: var(--td-button-danger-outline-active-bg-color, @bg-color-container-active); +@button-danger-outline-active-border-color: var(--td-button-danger-outline-active-border-color, @error-color-7); +@button-light-outline-active-bg-color: var(--td-button-light-outline-active-bg-color, @brand-color-light-active); +@button-light-outline-active-border-color: var(--td-button-light-outline-active-border-color, @brand-color-active); +@button-default-text-active-bg-color: var(--td-button-default-text-active-bg-color, @bg-color-container-active); +@button-primary-text-active-bg-color: var(--td-button-primary-text-active-bg-color, @bg-color-container-active); +@button-danger-text-active-bg-color: var(--td-button-danger-text-active-bg-color, @bg-color-container-active); +@button-light-text-active-bg-color: var(--td-button-light-text-active-bg-color, @bg-color-container-active); + +@button: ~"@{prefix}-button"; diff --git a/style/mobile/components/calendar/v2/_index.less b/style/mobile/components/calendar/v2/_index.less new file mode 100644 index 0000000000..21f6da320f --- /dev/null +++ b/style/mobile/components/calendar/v2/_index.less @@ -0,0 +1,192 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-calendar { + position: relative; + z-index: 9999; + background: @calendar-bg-color; + overflow-x: hidden; + + &--popup { + border-top-left-radius: @calendar-radius; + border-top-right-radius: @calendar-radius; + } + + &__title { + display: flex; + align-items: center; + justify-content: center; + font-size: @calendar-title-font-size; + font-weight: 600; + color: @calendar-title-color; + height: 26px; + padding: 16px; + + &:focus { + outline: 0; + } + } + + &__close-btn { + position: absolute; + top: 16px; + right: 16px; + margin: -12px; + padding: 12px; + } + + &__days { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-column-gap: 4px; + padding: 0 16px; + text-align: center; + line-height: 46px; + + &-item { + height: 46px; + font-size: 14px; + color: @calendar-days-color; + } + } + + &__content { + min-height: 200px; + display: flex; + flex-direction: column; + } + + &__month { + font-size: 14px; + color: @calendar-title-color; + font-weight: 600; + padding: 16px 0 0; + + &s { + height: 60vh; + padding: 0 16px 16px; + box-sizing: border-box; + + &::-webkit-scrollbar { + display: none; + } + } + } + + &__dates { + flex: 1; + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-column-gap: 4px; + + &-item { + position: relative; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + border-radius: 8px; + height: 60px; + line-height: 24px; + font-weight: 600; + margin-top: 8px; + + .cursor-pointer(); + + &-prefix, + &-suffix { + position: absolute; + font-size: 10px; + line-height: 16px; + width: 100%; + text-align: center; + font-weight: 400; + } + + &-prefix { + top: 4px; + } + + &-suffix { + bottom: 4px; + color: @calendar-item-suffix-color; + + &--selected, + &--start, + &--end { + color: @calendar-selected-color; + } + + &--disabled { + color: @calendar-item-disabled-color; + } + } + + &--selected, + &--start, + &--end { + background: @calendar-active-color; + color: @calendar-selected-color; + border-radius: 4px; + } + + &--start { + border-radius: 4px 0 0 4px; + } + + &--end { + border-radius: 0 4px 4px 0; + } + + &--start + &--end { + &::before { + content: ""; + display: block; + position: absolute; + top: 0; + width: 4px; + height: 100%; + background: @calendar-active-color; + } + + &::before { + left: -4px; + } + } + + &--centre { + border-radius: 0; + background-color: @calendar-item-centre-color; + + &::before, + &::after { + content: ""; + display: block; + position: absolute; + top: 0; + width: 4px; + height: 100%; + background-color: @calendar-item-centre-color; + } + + &::before { + left: -4px; + } + + &::after { + right: -4px; + } + } + + &--disabled { + color: @calendar-item-disabled-color; + cursor: default; + } + } + } + + &__footer { + padding: 16px; + } +} diff --git a/style/mobile/components/calendar/v2/_var.less b/style/mobile/components/calendar/v2/_var.less new file mode 100644 index 0000000000..dd10ae09b2 --- /dev/null +++ b/style/mobile/components/calendar/v2/_var.less @@ -0,0 +1,10 @@ +@calendar-radius: var(--td-calendar-radius, 12px); +@calendar-bg-color: var(--td-calendar-bg-color, @bg-color-container); +@calendar-active-color: var(--td-calendar-active-color, @brand-color); +@calendar-selected-color: var(--td-calendar-selected-color, @font-white-1); +@calendar-title-font-size: var(--td-calendar-title-font-size, 18px); +@calendar-title-color: var(--td-calendar-title-color, @font-gray-1); +@calendar-days-color: var(--td-calendar-days-color, @font-gray-2); +@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @font-gray-3); +@calendar-item-centre-color: var(--td-calendar-item-centre-color, @brand-color-light); +@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @font-gray-4); diff --git a/style/mobile/components/cascader/v2/_index.less b/style/mobile/components/cascader/v2/_index.less new file mode 100644 index 0000000000..2710d87f77 --- /dev/null +++ b/style/mobile/components/cascader/v2/_index.less @@ -0,0 +1,113 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{cascader} { + display: flex; + flex-direction: column; + background-color: #fff; + color: @cascader-title-color; + border-radius: 12px 12px 0 0; + + --td-radio-icon-checked-color: @cascader-active-color; + --td-tab-item-active-color: @cascader-active-color; + --td-tab-track-color: @cascader-active-color; + + &__close-btn { + right: 16px; + top: 12px; + position: absolute; + } + + &__title { + position: relative; + font-weight: 700; + text-align: center; + line-height: 48px; + font-size: @cascder-title-font-size; + } + + &__content { + width: 100%; + flex: 1; + display: flex; + flex-direction: column; + } + + &__options { + width: 100vw; + height: @cascader-options-height; + + &-title { + margin-top: 20px; + color: @cascader-options-title-color; + font-size: 14px; + line-height: 22px; + padding-left: 16px; + } + + &-content { + flex: 1; + height: 100%; + overflow: auto; + padding-left: 16px; + } + + &-container { + display: flex; + transition: all ease .3s; + } + } + + &__step { + display: flex; + align-items: center; + height: @cascader-step-height; + + &s { + padding: 0 16px 5px; + .border(bottom, @cascader-border-color); + } + + &-dot { + position: relative; + width: @cascader-step-dot-size; + height: @cascader-step-dot-size; + border-radius: 50%; + border: 1px solid @cascader-active-color; + box-sizing: border-box; + + &:not(.@{cascader}__step-dot--last)::after { + content: ""; + display: block; + position: absolute; + left: 50%; + top: calc(@cascader-step-dot-size + 7px); + height: 18px; + width: 1px; + background: @cascader-active-color; + transform: translateX(-50%); + } + + &--active { + background: @cascader-active-color; + border-color: @cascader-active-color; + } + } + + &-label { + padding-left: 16px; + font-size: 16px; + + &--active { + color: @cascader-active-color; + font-weight: 600; + } + } + + &-arrow { + color: @cascader-step-arrow-color; + margin-left: auto; + } + } +} diff --git a/style/mobile/components/cascader/v2/_var.less b/style/mobile/components/cascader/v2/_var.less new file mode 100644 index 0000000000..420b7b5e5d --- /dev/null +++ b/style/mobile/components/cascader/v2/_var.less @@ -0,0 +1,15 @@ +@cascader: ~"@{prefix}-cascader"; + +@cascader-active-color: var(--td-cascader-active-color, @brand-color); +@cascader-disabled-color: var(--td-cascader-disabled-color, @font-gray-4); +@cascader-title-color: var(--td-cascader-title-color, @font-gray-1); +@cascader-options-title-color: var(--td-cascader-options-title-color, @font-gray-3); +@cascader-border-color: var(--td-cascader-border-color, @border-color); + +@cascader-options-height: var(--td-cascader-options-height, 320px); +@cascder-title-font-size: var(--td-cascder-title-font-size, 18px); + +// steps +@cascader-step-height: var(--td-cascader-step-height, 44px); +@cascader-step-dot-size: var(--td-cascader-step-dot-size, 8px); +@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @font-gray-3); diff --git a/style/mobile/components/cell-group/v2/_index.less b/style/mobile/components/cell-group/v2/_index.less new file mode 100644 index 0000000000..1137d04ab4 --- /dev/null +++ b/style/mobile/components/cell-group/v2/_index.less @@ -0,0 +1,37 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-cell-group { + position: relative; + + &__title { + font-family: PingFangSC-Regular; + font-size: @cell-group-title-font-size; + color: @cell-group-title-color; + text-align: left; + line-height: @cell-group-title-line-height; + background-color: @cell-group-title-bg-color; + padding-left: @cell-group-title-padding-left; + } + + &--bordered { + &::before { + .hairline-top(@cell-group-border-color); + + z-index: 1; + } + + &::after { + .hairline-bottom(@cell-group-border-color); + + z-index: 1; + } + } + + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/mobile/components/cell-group/v2/_var.less b/style/mobile/components/cell-group/v2/_var.less new file mode 100644 index 0000000000..330ef7aa31 --- /dev/null +++ b/style/mobile/components/cell-group/v2/_var.less @@ -0,0 +1,6 @@ +@cell-group-title-font-size: var(--td-cell-group-title-font-size, 14px); +@cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px); +@cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px); +@cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer); +@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3); +@cell-group-border-color: var(--td-cell-group-border-color, @border-color); diff --git a/style/mobile/components/cell/v2/_index.less b/style/mobile/components/cell/v2/_index.less new file mode 100644 index 0000000000..dffd84afeb --- /dev/null +++ b/style/mobile/components/cell/v2/_index.less @@ -0,0 +1,112 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-cell { + position: relative; + display: flex; + box-sizing: border-box; + width: 100%; + overflow: hidden; + padding: @cell-vertical-padding @cell-horizontal-padding; + line-height: @cell-line-height; + height: @cell-height; + background-color: @cell-bg-color; + + &::after { + .hairline-bottom(@cell-border-color); + + left: @cell-border-left-space; + right: @cell-border-right-space; + } + + &--borderless::after { + display: none; + } + + &__description { + font-size: @cell-description-font-size; + line-height: @cell-description-line-height; + color: @cell-description-color; + + &-text { + margin-top: calc(@spacer / 2); + } + } + + &__note { + display: flex; + align-items: center; + justify-content: flex-end; + color: @cell-note-color; + font-size: @cell-note-font-size; + } + + &__title, + &__note { + flex: 1 1 auto; + + &:empty { + display: none; + } + } + + &__title-text { + display: flex; + font-size: @cell-title-font-size; + color: @cell-title-color; + font-weight: 400; + } + + &__left, + &__right { + display: flex; + align-items: center; + } + + &__left { + &:not(:empty) { + margin-right: @spacer; + } + + &-icon { + color: @cell-left-icon-color; + font-size: @cell-left-icon-font-size; + } + + &-image { + height: @cell-image-height; + width: @cell-image-width; + } + } + + &__right { + margin-left: calc(@spacer / 2); + + &-icon { + color: @cell-right-icon-color; + font-size: @cell-right-icon-font-size; + } + } + + &--hover { + background-color: @cell-hover-color; + } + + &--required { + font-size: @cell-required-font-size; + color: @cell-required-color; + } + + &--middle { + align-items: center; + } + + &--top { + align-items: flex-start; + } + + &--bottom { + align-items: flex-end; + } +} diff --git a/style/mobile/components/cell/v2/_var.less b/style/mobile/components/cell/v2/_var.less new file mode 100644 index 0000000000..daafd50cea --- /dev/null +++ b/style/mobile/components/cell/v2/_var.less @@ -0,0 +1,24 @@ +@cell-height: var(--td-cell-height, auto); +@cell-line-height: var(--td-cell-line-height, 24px); +@cell-vertical-padding: var(--td-cell-vertical-padding, 16px); +@cell-horizontal-padding: var(--td-cell-horizontal-padding, 16px); +@cell-bg-color: var(--td-cell-bg-color, @bg-color-container); +@cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer); +@cell-border-color: var(--td-cell-border-color, @component-stroke); +@cell-border-left-space: var(--td-border-left-space, @cell-horizontal-padding); +@cell-border-right-space: var(--td-border-right-space, 0); +@cell-description-color: var(--td-cell-description-color, @font-gray-2); +@cell-description-font-size: var(--td-cell-description-font-size, @font-size-base); +@cell-description-line-height: var(--td-cell-description-line-height, 22px); +@cell-note-color: var(--td-cell-note-color, @font-gray-3); +@cell-note-font-size: var(--td-cell-note-font-size, @font-size-m); +@cell-title-color: var(--td-cell-title-color, @font-gray-1); +@cell-title-font-size: var(--td-cell-title-font-size, @font-size-m); +@cell-left-icon-color: var(--td-cell-left-icon-color, @brand-color); +@cell-left-icon-font-size: var(--td-cell-left-icon-font-size, 24px); +@cell-right-icon-color: var(--td-cell-right-icon-color, @font-gray-3); +@cell-right-icon-font-size: var(--td-cell-right-icon-font-size, 24px); +@cell-required-color: var(--td-cell-required-color, @error-color-6); +@cell-required-font-size: var(--td-cell-required-font-size, @font-size-m); +@cell-image-width: var(--td-cell-image-width, 48px); +@cell-image-height: var(--td-cell-image-height, 48px); diff --git a/style/mobile/components/check-tag/v2/_index.less b/style/mobile/components/check-tag/v2/_index.less new file mode 100644 index 0000000000..10e7ab0291 --- /dev/null +++ b/style/mobile/components/check-tag/v2/_index.less @@ -0,0 +1,135 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.genVariant(@variant) { + @themes: default, primary, success, warning, danger; + each(@themes, { + @theme-color: "tag-@{value}-color"; + @theme-light-color: "tag-@{value}-light-color"; + + &.@{prefix}-tag--@{value} { + color: if(@variant = dark, @font-white-1, @@theme-color); + border-color: if(@variant = light, @@theme-light-color, @@theme-color); + background-color: if(@variant = dark, @@theme-color, @@theme-light-color); + } + }); +} + +.@{prefix}-tag { + display: inline-flex; + align-items: center; + border: 1px solid transparent; + box-sizing: border-box; + border-radius: @tag-square-border-radius; + font-size: @tag-medium-font-size; + user-select: none; + vertical-align: middle; + + &__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__icon { + display: flex; + align-items: center; + } + + &__icon:not(:empty) + &__text:not(:empty) { + margin-left: 4px; + } + + &--small { + height: @tag-small-height; + line-height: @tag-small-height; + padding: 0 @tag-small-padding; + font-size: @tag-small-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-small-icon-size; + } + } + + &--medium { + height: @tag-medium-height; + line-height: @tag-medium-height; + padding: 0 @tag-medium-padding; + font-size: @tag-medium-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-medium-icon-size; + } + } + + &--large { + height: @tag-large-height; + line-height: @tag-large-height; + padding: 0 @tag-large-padding; + font-size: @tag-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-large-icon-size; + } + } + + &--extra-large { + height: @tag-extra-large-height; + line-height: @tag-extra-large-height; + padding: 0 @tag-extra-large-padding; + font-size: @tag-extra-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-extra-large-icon-size; + } + } + + &--dark { + .genVariant(dark); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--outline { + .genVariant(outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + each(@themes, { + &.@{prefix}-tag--@{value} { + background-color: @tag-outline-bg-color; + } + }); + } + + &--light { + .genVariant(light); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--light-outline { + .genVariant(light-outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + border-color: @component-border; + } + } + + &.@{prefix}-tag--closable { + &.@{prefix}-tag--disabled { + cursor: not-allowed; + color: @tag-disabled-color; + background-color: @tag-disabled-background-color; + border-color: @tag-disabled-border-color; + } + } +} diff --git a/style/mobile/components/check-tag/v2/_var.less b/style/mobile/components/check-tag/v2/_var.less new file mode 100644 index 0000000000..727630ee9d --- /dev/null +++ b/style/mobile/components/check-tag/v2/_var.less @@ -0,0 +1,43 @@ +// themes +@tag-default-color: var(--td-tag-default-color, @bg-color-component); +@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer); +@tag-primary-color: var(--td-tag-primary-color, @brand-color); +@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light); +@tag-success-color: var(--td-tag-success-color, @success-color); +@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1); +@tag-warning-color: var(--td-tag-warning-color, @warning-color); +@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1); +@tag-danger-color: var(--td-tag-danger-color, @error-color); +@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1); + +// variant +@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); +@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); + +// status +@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); +@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); + +// size +@tag-small-padding: var(--td-tag-small-padding, 6px - 1px); +@tag-medium-padding: var(--td-tag-medium-padding, 8px - 1px); +@tag-large-padding: var(--td-tag-large-padding, 8px - 1px); +@tag-extra-large-padding: var(--td-tag-extra-large-padding, 16px - 1px); + +@tag-small-font-size: var(--td-tag-small-font-size, @font-size); +@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s); +@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base); +@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base); + +@tag-small-icon-size: var(--td-tag-small-icon-size, 12px); +@tag-medium-icon-size: var(--td-tag-medium-icon-size, 14px); +@tag-large-icon-size: var(--td-tag-large-icon-size, 16px); +@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 16px); + +@tag-small-height: var(--td-tag-small-height, 20px); +@tag-medium-height: var(--td-tag-medium-height, 24px); +@tag-large-height: var(--td-tag-large-height, 28px); +@tag-extra-large-height: var(--td-tag-extra-large-height, 40px); + +@tag-square-border-radius: var(--td-tag-square-border-radius, 4px); diff --git a/style/mobile/components/checkbox/v2/_index.less b/style/mobile/components/checkbox/v2/_index.less new file mode 100644 index 0000000000..6be07cede6 --- /dev/null +++ b/style/mobile/components/checkbox/v2/_index.less @@ -0,0 +1,211 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{checkbox} { + display: inline-flex; + vertical-align: middle; + position: relative; + font-size: @checkbox-font-size; + background: @checkbox-bg-color; + + &:focus { + outline: 0; + } + + &--block { + display: flex; + padding: @checkbox-vertical-padding; + } + + &--right { + flex-direction: row-reverse; + } + + .limit-title-row { + display: box; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .image-center { + position: absolute; + top: 50%; + transform: translateY(-50%); + } + + &__icon-left { + margin-right: 20px; + width: 20px; + } + + &__icon-right { + right: 0; + display: contents; + .image-center(); + } + + &__icon-image { + width: @checkbox-icon-size; + height: @checkbox-icon-size; + vertical-align: top; + } + + &__icon { + position: relative; + display: block; + width: @checkbox-icon-size; + height: @checkbox-icon-size; + color: @checkbox-icon-color; + font-size: @checkbox-icon-size; + + &:empty { + display: none; + } + + &--checked { + color: @checkbox-icon-checked-color; + } + + &--disabled { + cursor: not-allowed; + color: @checkbox-icon-disabled-color; + } + + &--left { + margin-right: 8px; + } + + &-circle { + width: calc((@checkbox-icon-size - @checkbox-border-width) * 2); + height: calc((@checkbox-icon-size - @checkbox-border-width) * 2); + border: @checkbox-border-width solid @checkbox-icon-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @checkbox-icon-disabled-bg-color; + } + } + + &-rectangle { + width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2); + height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2); + border: @checkbox-border-width solid @checkbox-icon-color; + border-radius: 2px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @checkbox-icon-disabled-bg-color; + } + } + + &-line { + &::before, + &::after { + content: ""; + display: block; + position: absolute; + width: 2.5px; + border-radius: 1px; + background: @checkbox-icon-checked-color; + transform-origin: top center; + } + + &::before { + height: 8px; + left: 4px; + top: 11px; + transform: rotate(-45deg); + } + + &::after { + height: 13px; + right: 4px; + top: 7px; + transform: rotate(45deg); + } + + &--disabled { + &::before, + &::after { + background: @checkbox-icon-disabled-color; + } + } + } + } + + &__content { + flex: 1; + } + + &__title { + color: @checkbox-title-color; + line-height: @checkbox-title-line-height; + .limit-title-row(); + + &--disabled { + color: @checkbox-title-disabled-color; + } + } + + &__description { + color: @checkbox-description-color; + .limit-title-row(); + + font-size: 14px; + line-height: @checkbox-description-line-height; + + &--disabled { + color: @checkbox-description-disabled-color; + } + } + + &__title + &__description:not(:empty) { + margin-top: 4px; + } + + &__border { + position: absolute; + bottom: 0; + left: 48px; + right: 0; + height: 1px; + background: @checkbox-border-color; + transform: scaleY(.5); + + &--right { + left: 16px; + } + } + + &--tag { + font-size: 14px; + padding-top: 8px; + padding-bottom: 8px; + text-align: center; + background-color: #f3f3f3; + border-radius: 6px; + + &.@{checkbox}--checked { + color: @checkbox-tag-active-color; + background-color: @checkbox-tag-active-bg-color; + } + + .@{checkbox}__title--checked { + color: @checkbox-tag-active-color; + } + + .@{checkbox}__content { + margin-right: 0; + } + } +} diff --git a/style/mobile/components/checkbox/v2/_var.less b/style/mobile/components/checkbox/v2/_var.less new file mode 100644 index 0000000000..fb696b21ca --- /dev/null +++ b/style/mobile/components/checkbox/v2/_var.less @@ -0,0 +1,20 @@ +@checkbox: ~"@{prefix}-checkbox"; + +@checkbox-border-width: 3px; +@checkbox-icon-size: var(--td-checkbox-icon-size, 24px); +@checkbox-font-size: var(--td-checkbox-font-size, 16px); +@checkbox-title-line-height: var(--td-checkbox-title-line-height, 24px); +@checkbox-description-line-height: var(--td-checkbox-description-line-height, 22px); +@checkbox-vertical-padding: var(--td-checkbox-vertical-padding, 16px); +@checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container); +@checkbox-border-color: var(--td-checkbox-border-color, @component-stroke); +@checkbox-title-color: var(--td-checkbox-title-color, @font-gray-1); +@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @font-gray-4); +@checkbox-description-color: var(--td-checkbox-description-color, @font-gray-2); +@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @font-gray-4); +@checkbox-icon-color: var(--td-checkbox-icon-color, @gray-color-4); +@checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled); +@checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled); +@checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color); +@checkbox-tag-active-bg-color: var(--td-checkbox-tag-active-bg-color, @brand-color-light); +@checkbox-tag-active-color: var(--td-checkbox-tag-active-color, @brand-color); diff --git a/style/mobile/components/collapse-panel/v2/_index.less b/style/mobile/components/collapse-panel/v2/_index.less new file mode 100644 index 0000000000..8ca9cf29d3 --- /dev/null +++ b/style/mobile/components/collapse-panel/v2/_index.less @@ -0,0 +1,113 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-collapse-panel { + .border(bottom, @collapse-border-color); + + background-color: @collapse-panel-bg-color; + + &--disabled { + pointer-events: none; + + .@{prefix}-collapse-panel__content, + .@{prefix}-collapse-panel__header { + opacity: .3; + } + } + + &--top { + display: flex; + flex-direction: column-reverse; + } + + &__header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: @collapse-horizontal-padding; + height: @collapse-header-height; + color: @collapse-header-text-color; + + &--top { + .border(top, @collapse-border-color); + } + + &--bottom { + .border(bottom, @collapse-border-color); + } + + &::after { + display: none; + left: 16px; + } + + &--expanded { + &::after { + display: block; + } + } + + &-right { + display: inline-flex; + align-items: center; + height: 100%; + } + + &-icon { + // 增大热区 + height: 100%; + padding-left: 8px; + width: 44px; + padding-right: 8px; + color: var(--td-collapse-icon-color, @font-gray-3); + } + } + + &__extra { + font-size: @collapse-extra-font-size; + } + + &__body { + .border(bottom, @collapse-border-color); + } + + &__wrapper { + height: 0; + overflow: hidden; + } + + &__content { + color: @collapse-content-text-color; + font-size: @collapse-content-font-size; + padding: @collapse-content-padding; + line-height: @collapse-content-line-height; + } + + &__arrow--top { + transform: rotate(180deg); + } +} + +.class { + &-title { + font-size: @collapse-title-font-size; + + &--disabled { + color: @font-gray-4; + } + } + + &-note { + &--disabled { + color: @font-gray-4; + } + } + + &-right-icon { + &--disabled { + color: @font-gray-4; + } + } +} diff --git a/style/mobile/components/collapse-panel/v2/_var.less b/style/mobile/components/collapse-panel/v2/_var.less new file mode 100644 index 0000000000..b5d42692fa --- /dev/null +++ b/style/mobile/components/collapse-panel/v2/_var.less @@ -0,0 +1,16 @@ +@collapse-header-text-color: var(--td-collapse-header-text-color, @font-gray-1); +@collapse-content-text-color: var(--td-collapse-content-text-color, @font-gray-1); +@collapse-header-text-diabled-color: var(--td-collapse-header-text-diabled-color, @font-gray-4); + +// font-size +@collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m); +@collapse-extra-font-size: var(--td-collapse-extra-font-size, @font-size-m); +@collapse-content-font-size: var(--td-collapse-content-font-size, @font-size-base); + +@collapse-header-height: var(--td-collapse-header-height, 48px); +@collapse-horizontal-padding: var(--td-collapse-horizontal-padding, 16px); +@collapse-content-padding: var(--td-collapse-content-padding, 16px); +@collapse-content-line-height: var(--td-collapse-content-line-height, 1.5); +@collapse-border-color: var(--td-collapse-border-color, @border-color); + +@collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container); diff --git a/style/mobile/components/collapse/v2/_index.less b/style/mobile/components/collapse/v2/_index.less new file mode 100644 index 0000000000..1a6ef60597 --- /dev/null +++ b/style/mobile/components/collapse/v2/_index.less @@ -0,0 +1,11 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-collapse { + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/mobile/components/collapse/v2/_var.less b/style/mobile/components/collapse/v2/_var.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/style/mobile/components/count-down/v2/_index.less b/style/mobile/components/count-down/v2/_index.less new file mode 100644 index 0000000000..aa36830de8 --- /dev/null +++ b/style/mobile/components/count-down/v2/_index.less @@ -0,0 +1,105 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.count-down-size(@size) { + .@{countdown} { + @defaultFontSize: "countdown-@{size}-default-font-size"; + @roundFontSize: "countdown-@{size}-round-font-size"; + @squareFontSize: "countdown-@{size}-square-font-size"; + @width: "countdown-@{size}-bg-width"; + @height: "countdown-@{size}-bg-width"; + @dotMargin: "countdown-@{size}-no-unit-margin"; + @dotFontSize: "countdown-@{size}-no-unit-font-size"; + @textMargin: "countdown-@{size}-unit-margin"; + @textFontSize: "countdown-@{size}-unit-font-size"; + + &--@{size} { + &.@{countdown}--default { + font-size: @@defaultFontSize; + } + + &.@{countdown}--round { + > .@{item} { + font-size: @@roundFontSize; + } + } + + &.@{countdown}--square { + > .@{item} { + font-size: @@squareFontSize; + } + } + + &.@{countdown}--round, + &.@{countdown}--square { + > .@{item} { + width: @@width; + height: @@height; + } + } + + &.@{countdown}--round, + &.@{countdown}--square { + > .@{split}--dot { + margin: 0 @@dotMargin; + font-size: @@dotFontSize; + font-weight: 700; + } + + > .@{split}--text { + margin: 0 @@textMargin; + font-size: @@textFontSize; + } + } + } + } +} + +.count-down-size(small); +.count-down-size(medium); +.count-down-size(large); + +.@{countdown} { + font-family: "DIN Alternate", "Courier New", Courier, monospace; + + .@{item}, + .@{split} { + display: inline-flex; + align-items: center; + justify-content: center; + } + + &--square, + &--round { + > .@{split}--dot { + color: @countdown-no-unit-color; + } + + > .@{split}--text { + color: @countdown-unit-color; + } + } + + &--default { + color: @countdown-default-text-color; + } + + &--square { + color: @countdown-text-color; + + > .@{item} { + border-radius: @countdown-square-border-radius; + background: @countdown-bg-color; + } + } + + &--round { + color: @countdown-text-color; + + > .@{item} { + border-radius: @countdown-round-border-radius; + background: @countdown-bg-color; + } + } +} diff --git a/style/mobile/components/count-down/v2/_var.less b/style/mobile/components/count-down/v2/_var.less new file mode 100644 index 0000000000..942a6d3cc8 --- /dev/null +++ b/style/mobile/components/count-down/v2/_var.less @@ -0,0 +1,41 @@ +@countdown-small-unit-margin: 4px; // 'small'尺寸单位分割文本左右间距 +@countdown-medium-unit-margin: 5px; // 'medium'尺寸单位分割文本左右间距 +@countdown-large-unit-margin: 6px; // 'large'尺寸单位分割文本左右间距 +@countdown-unit-color: @font-gray-1; // 带单位分割线文本颜色 +@countdown-no-unit-color: @error-color-6; // 无单位分割线文本颜色 +@countdown-large-no-unit-margin: 6px; // 'large'尺寸无单位分割文本左右间距 +@countdown-medium-no-unit-margin: 3px; // 'medium'尺寸无单位分割文本左右间距 +@countdown-small-no-unit-margin: 2px; // 'small'尺寸无单位分割文本左右间距 +@countdown-small-bg-width: 20px; // 'small'尺寸方/圆底背景宽高 +@countdown-medium-bg-width: 24px; // 'medium'尺寸方/圆底背景宽高 +@countdown-large-bg-width: 28px; // 'large'尺寸方/圆底背景宽高 +@countdown-small-default-font-size: @font-size-base; // 'small'尺寸纯数字倒计时文本大小 +@countdown-small-square-font-size: @font-size-s; // 'small'尺寸带方形底倒计时文本大小 +@countdown-small-round-font-size: @font-size-s; // 'small'尺寸带圆形底倒计时文本大小 +@countdown-small-unit-font-size: @font-size; // 'small'尺寸单位分割文本大小 +@countdown-small-no-unit-font-size: @font-size-base; // 'small'尺寸无单位分割文本大小 +@countdown-medium-default-font-size: @font-size-m; // 'medium'尺寸纯数字倒计时文本大小 +@countdown-medium-square-font-size: @font-size-base; // 'medium'尺寸带方形底倒计时文本大小 +@countdown-medium-round-font-size: @font-size-base; // 'medium'尺寸带圆形底倒计时文本大小 +@countdown-medium-unit-font-size: @font-size-s; // 'medium'尺寸单位分割文本大小 +@countdown-medium-no-unit-font-size: @font-size-m; // 'medium'尺寸无单位分割文本大小 +@countdown-large-default-font-size: 18px; // 'large'尺寸纯数字倒计时文本大小 +@countdown-large-square-font-size: @font-size-m; // 'large'尺寸带方形底倒计时文本大小 +@countdown-large-round-font-size: @font-size-m; // 'large'尺寸带圆形底倒计时文本大小 +@countdown-large-unit-font-size: @font-size-base; // 'large'尺寸单位分割文本大小 +@countdown-large-no-unit-font-size: 18px; // 'large'尺寸无单位分割文本大小 + +// 纯数字倒计时文本颜色 +@countdown-default-text-color: var(--td-countdown-default-color, @font-gray-1); +// 方形/圆形底倒计时文本颜色 +@countdown-text-color: var(--td-countdown-round-color, @font-white-1); +// 方形/圆形底背景颜色 +@countdown-bg-color: var(--td-countdown-bg-color, @error-color-6); +// 带方形底倒计时圆角大小 +@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: ~"@{prefix}-count-down"; +@item: ~"@{countdown}__item"; +@split: ~"@{countdown}__split"; diff --git a/style/mobile/components/date-time-picker/v2/_index.less b/style/mobile/components/date-time-picker/v2/_index.less new file mode 100644 index 0000000000..21ecbb6a2a --- /dev/null +++ b/style/mobile/components/date-time-picker/v2/_index.less @@ -0,0 +1,12 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-date-time-picker { + &__item { + &--roomly { + width: @data-time-picker-year-width; + flex: 0 0 @data-time-picker-year-width; + } + } +} diff --git a/style/mobile/components/date-time-picker/v2/_var.less b/style/mobile/components/date-time-picker/v2/_var.less new file mode 100644 index 0000000000..f874ef26ee --- /dev/null +++ b/style/mobile/components/date-time-picker/v2/_var.less @@ -0,0 +1 @@ +@data-time-picker-year-width: var(--td-data-time-picker-year-width, 64px); diff --git a/style/mobile/components/dialog/v2/_index.less b/style/mobile/components/dialog/v2/_index.less new file mode 100644 index 0000000000..911822e0d1 --- /dev/null +++ b/style/mobile/components/dialog/v2/_index.less @@ -0,0 +1,117 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{dialog} { + overflow: hidden; + width: @dialog-width; + border-radius: @radius-default; + background-color: @bg-color-container; + + &__close-btn { + position: absolute; + top: 16rpx; + right: 16rpx; + color: @dialog-close-color; + } + + &__content { + padding: @spacer-4 @spacer-3 0; + max-height: @dialog-body-max-height; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + font-size: @font-size-m; + } + + &__header { + text-align: center; + font-weight: bold; + font-size: @dialog-title-font-size; + line-height: @dialog-title-line-height; + color: @dialog-title-color; + } + + &__header + &__body { + margin-top: 16rpx; + } + + &__body { + overflow-y: scroll; + text-align: center; + -webkit-overflow-scrolling: touch; + font-size: @dialog-content-font-size; + color: @dialog-content-color; + line-height: @dialog-content-line-height; + + &-text { + word-wrap: break-word; + } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } + } + + &__footer { + display: flex; + padding: 48rpx; + + &--column { + flex-flow: column-reverse; + + .@{dialog}__button { + width: 100%; + } + } + + &--full { + padding: 64rpx 0 0; + } + } + + &__button { + position: relative; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &--horizontal + &--horizontal { + margin-left: 24rpx; + } + + &--vertical + &--vertical { + margin-bottom: 24rpx; + } + + &--text { + flex: 1; + + --td-button-border-radius: 0; + --td-button-medium-height: 112rpx; + + border-radius: 0; + + &::before { + content: " "; + position: absolute; + box-sizing: border-box; + top: 0; + left: 0; + border-top: 1px solid @border-color; + border-left: 1px solid @border-color; + transform: scale(.5); + transform-origin: 0 0; + width: 200%; + height: 200%; + border-radius: 0; + } + } + } +} diff --git a/style/mobile/components/dialog/v2/_var.less b/style/mobile/components/dialog/v2/_var.less new file mode 100644 index 0000000000..53b72f1c59 --- /dev/null +++ b/style/mobile/components/dialog/v2/_var.less @@ -0,0 +1,17 @@ +@dialog: ~"@{prefix}-dialog"; +@dialogBtn: ~"@{dialog}__button"; + +// size +@dialog-width: var(--td-dialog-width, 311px); +@dialog-body-max-height: var(--td-dialog-body-max-height, 456px); + +// color +@dialog-title-font-size: var(--td-dialog-title-font-size, 18px); +@dialog-title-color: var(--td-dialog-title-color, @font-gray-1); +@dialog-title-line-height: var(--td-dialog-title-line-height, 36px); + +@dialog-content-font-size: var(--td-dialog-content-font-size, 16px); +@dialog-content-color: var(--td-dialog-content-color, @font-gray-2); +@dialog-content-line-height: var(--td-dialog-content-line-height, 24px); + +@dialog-close-color: var(--td-dialog-close-color, @font-gray-3); diff --git a/style/mobile/components/divider/v2/_index.less b/style/mobile/components/divider/v2/_index.less new file mode 100644 index 0000000000..0e2400ab83 --- /dev/null +++ b/style/mobile/components/divider/v2/_index.less @@ -0,0 +1,70 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-divider { + display: flex; + color: @divider-color; + border-color: @divider-color; + border-style: solid; + border-width: 0; + + &::before, + &::after { + content: ""; + display: block; + flex: 1; + box-sizing: border-box; + border: inherit; + border-color: inherit; + border-style: inherit; + } + + &--horizontal { + align-items: center; + margin-top: 20rpx; + margin-bottom: 20rpx; + + &::before, + &::after { + border-top-width: 1px; + transform: scaleY(.5); + } + + .@{prefix}-divider__content:not(:empty) { + margin: 0 24rpx; + } + } + + &--vertical { + flex-direction: column; + height: 1em; + margin: 0 16rpx; + + &::before, + &::after { + border-left-width: 1px; + transform: scaleX(.5); + } + + &-center { + align-items: center; + height: 100%; + } + } + + &--dashed { + border-style: dashed; + } + + &__content { + font-size: @divider-content-font-size; + line-height: @divider-content-line-height; + color: @divider-content-color; + } + + &--left::before, + &--right::after { + max-width: 60rpx; + } +} diff --git a/style/mobile/components/divider/v2/_var.less b/style/mobile/components/divider/v2/_var.less new file mode 100644 index 0000000000..6f37a421ec --- /dev/null +++ b/style/mobile/components/divider/v2/_var.less @@ -0,0 +1,4 @@ +@divider-color: var(--td-divider-color, @bg-color-component); +@divider-content-color: var(--td-divider-content-color, @font-gray-3); +@divider-content-font-size: var(--td-divider-content-font-size, 12px); +@divider-content-line-height: var(--td-divider-content-line-height, 20px); diff --git a/style/mobile/components/drawer/v2/_index.less b/style/mobile/components/drawer/v2/_index.less new file mode 100644 index 0000000000..922ef0d2f9 --- /dev/null +++ b/style/mobile/components/drawer/v2/_index.less @@ -0,0 +1,56 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-drawer { + background: @drawer-bg-color; + height: 100vh; + width: @drawer-width; + display: flex; + flex-direction: column; + + &--hover { + background-color: @drawer-hover-color; + } + + &__title { + font-weight: 600; + font-size: @drawer-title-font-size; + padding: 24px 16px 8px; + } + + &__sidebar { + height: @drawer-sidebar-height; + + &-item { + display: flex; + align-items: center; + .border(bottom, @drawer-border-color); + + padding: @drawer-item-padding 0 @drawer-item-padding @drawer-item-padding; + line-height: @drawer-item-height; + + &::after { + left: @drawer-item-padding; + } + + &-title { + flex: 1; + color: var(--td-drawer-title-color); + } + + &-icon { + padding-right: 8px; + color: @drawer-icon-color; + font-size: @drawer-item-icon-size; + } + } + } + + &__footer { + flex: 1; + display: flex; + flex-direction: column; + padding-bottom: @drawer-footer-padding-bottom; + } +} diff --git a/style/mobile/components/drawer/v2/_var.less b/style/mobile/components/drawer/v2/_var.less new file mode 100644 index 0000000000..543147deb8 --- /dev/null +++ b/style/mobile/components/drawer/v2/_var.less @@ -0,0 +1,13 @@ +@drawer-width: var(--td-drawer-width, 280px); +@drawer-title-font-size: var(--td-drawer-title-font-size, 18px); +@drawer-title-padding: var(--td-drawer-title-padding, 24px 16px 8px); +@drawer-bg-color: var(--td-drawer-bg-color, @bg-color-container); +@drawer-border-color: var(--td-drawer-border-color, @border-color); +@drawer-title-color: var(--td-drawer-title-color, @font-gray-1); +@drawer-icon-color: var(--td-drawer-title-color, @drawer-title-color); +@drawer-item-padding: var(--td-drawer-item-padding, 16px); +@drawer-item-height: var(--td-drawer-item-height, 24px); +@drawer-item-icon-size: var(--td-drawer-item-icon-size, 24px); +@drawer-sidebar-height: var(--td-drawer-sidebar-height, 70vh); +@drawer-footer-padding-bottom: var(--td-drawer-footer-padding-bottom, 20px); +@drawer-hover-color: var(--td-drawer-hover-color, @bg-color-secondarycontainer); diff --git a/style/mobile/components/dropdown-item/v2/_index.less b/style/mobile/components/dropdown-item/v2/_index.less new file mode 100644 index 0000000000..b15002ce1d --- /dev/null +++ b/style/mobile/components/dropdown-item/v2/_index.less @@ -0,0 +1,94 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +/** dropdown-item */ +.@{item} { + position: fixed; + right: 0; + left: 0; + top: 0; + overflow: hidden; + bottom: 0; + + &__content { + display: flex; + flex-direction: column; + z-index: 11600; + overflow: hidden; + } + + &__popup-host { + // 为了解决虚拟节点偶尔出现的问题 + display: block; + width: 100%; + height: max-content; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + } + + &__body { + flex: 1; + background: @dropdown-menu-bg-color; + overflow: auto; + max-height: @dropdown-body-max-height; + + &--tree { + display: flex; + overflow: hidden; + } + + &--multi { + padding-top: @spacer; + padding-bottom: @spacer; + overflow-y: auto; + } + } + + &__footer { + display: flex; + background: @dropdown-menu-bg-color; + position: relative; + padding: 16px; + .border(top, @component-border); + + &-btn { + flex: 1; + } + + &-btn + &-btn { + margin-left: 32rpx; + } + } + + &__radio, + &__checkbox { + width: 100%; + overflow: scroll; + box-sizing: border-box; + } + + &__checkbox { + &-group { + display: grid; + padding: 16px; + grid-gap: 12px; + } + } + + /** 树形结构 */ + &__tree { + &-item { + height: @tree-item-height; + line-height: @tree-item-height; + font-size: @tree-item-font-size; + padding-left: 16px; + + &--active { + color: @tree-item-active-color; + } + } + } +} diff --git a/style/mobile/components/dropdown-item/v2/_var.less b/style/mobile/components/dropdown-item/v2/_var.less new file mode 100644 index 0000000000..5b1ccbf659 --- /dev/null +++ b/style/mobile/components/dropdown-item/v2/_var.less @@ -0,0 +1,10 @@ +@dropdown-menu-bg-color: var(--td-dropdown-menu-bg-color, @bg-color-container); +@dropdown-body-max-height: var(--td-dropdown-body-max-height, 280px); + +@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-height: var(--td-tree-item-height, 48px); +@tree-item-font-size: var(--td-tree-item-font-size, 16px); + +@item: ~"@{prefix}-dropdown-item"; diff --git a/style/mobile/components/dropdown-menu/v2/_index.less b/style/mobile/components/dropdown-menu/v2/_index.less new file mode 100644 index 0000000000..fc76ffef3d --- /dev/null +++ b/style/mobile/components/dropdown-menu/v2/_index.less @@ -0,0 +1,46 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{dropdownMenu} { + position: relative; + display: flex; + height: 48px; + background: @dropdown-menu-bg-color; + .border(bottom); + + &__item { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + padding: 0 @spacer; + position: relative; + overflow: hidden; + color: @dropdown-menu-color; + + &--active { + color: @dropdown-menu-active-color; + } + + &--disabled { + color: @dropdown-menu-disabled-color; + } + } + + &__icon { + font-size: @dropdown-menu-icon-size; + transition: transform 240ms ease; + + &--active { + transform: rotate(180deg); + } + } + + &__title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: @dropdown-menu-font-size; + } +} diff --git a/style/mobile/components/dropdown-menu/v2/_var.less b/style/mobile/components/dropdown-menu/v2/_var.less new file mode 100644 index 0000000000..4843ea3699 --- /dev/null +++ b/style/mobile/components/dropdown-menu/v2/_var.less @@ -0,0 +1,8 @@ +@dropdown-menu-bg-color: var(--td-dropdown-menu-bg-colorm, @bg-color-container); +@dropdown-menu-color: var(--td-dropdown-menu-colorm, @font-gray-1); +@dropdown-menu-active-color: var(--td-dropdown-menu-active-colorm, @brand-color); +@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @font-gray-4); +@dropdown-menu-font-size: var(--td-dropdown-menu-font-sizem, 14px); +@dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 24px); + +@dropdownMenu: ~"@{prefix}-dropdown-menu"; diff --git a/style/mobile/components/empty/_index.less b/style/mobile/components/empty/_index.less new file mode 100644 index 0000000000..e8af390fb8 --- /dev/null +++ b/style/mobile/components/empty/_index.less @@ -0,0 +1,29 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-empty { + display: flex; + flex-direction: column; + align-items: center; + + &__icon { + font-size: @empty-icon-font-size; + color: @empty-icon-color; + } + + &__thumb + &__description:not(:empty) { + margin-top: @empty-description-margin-top; // 描述内容顶部间距 + } + + &__description { + text-align: center; + color: @empty-description-color; // 描述内容颜色 + font-size: @empty-description-font-size; // 描述内容字体大小 + line-height: @empty-description-line-height; // 描述内容行高 + } + + &__description + &__actions:not(:empty) { + margin-top: @empty-action-margin-top; // 操作内容顶部间距 + } +} diff --git a/style/mobile/components/empty/_var.less b/style/mobile/components/empty/_var.less new file mode 100644 index 0000000000..2441f32e28 --- /dev/null +++ b/style/mobile/components/empty/_var.less @@ -0,0 +1,8 @@ +@empty-icon-font-size: 96px; + +@empty-description-color: var(--td-empty-description-color, @font-gray-3); +@empty-icon-color: var(--td-empty-icon-color, @font-gray-3); +@empty-description-font-size: var(--td-empty-description-font-size, @font-size-base); +@empty-description-line-height: var(--td-empty-description-line-height, 44rpx); +@empty-description-margin-top: var(--td-empty-description-margin-top, @spacer-2); +@empty-action-margin-top: var(--td-empty-action-margin-top, @spacer-4); diff --git a/style/mobile/components/fab/v2/_index.less b/style/mobile/components/fab/v2/_index.less new file mode 100644 index 0000000000..5220fc6a30 --- /dev/null +++ b/style/mobile/components/fab/v2/_index.less @@ -0,0 +1,11 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-fab { + position: fixed; + + &__button { + box-shadow: @fab-shadow; + } +} diff --git a/style/mobile/components/fab/v2/_var.less b/style/mobile/components/fab/v2/_var.less new file mode 100644 index 0000000000..0f78e40655 --- /dev/null +++ b/style/mobile/components/fab/v2/_var.less @@ -0,0 +1 @@ +@fab-shadow: var(--td-fab-shadow, @shadow-2); diff --git a/style/mobile/components/footer/_index.less b/style/mobile/components/footer/_index.less new file mode 100644 index 0000000000..88db393a68 --- /dev/null +++ b/style/mobile/components/footer/_index.less @@ -0,0 +1,63 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + &__text { + font-size: @footer-text-font-size; // 版权信息文本大小 + line-height: @footer-text-line-height; // 版权信息文本行高 + color: @footer-text-color; // 版权信息文本颜色 + } + + &__link-list + &__text:not(:empty) { + margin-top: @footer-text-margin-top; // 版权信息顶部间距 + } + + &__link-list { + display: flex; + justify-content: center; + align-items: center; + } + + &__link-item { + color: @footer-link-color; // 链接文本颜色 + font-size: @footer-link-font-size; // 链接文本大小 + line-height: @footer-link-line-height; // 链接文本行高 + text-decoration: underline; + } + + &__link-line { + font-size: 24rpx; + color: @footer-link-dividing-line-color; // 链接分界线颜色 + display: inline-block; + padding: 0 @footer-link-dividing-line-padding; // 链接分界线左右间距 + } + + &__logo { + display: flex; + justify-content: center; + align-items: center; + } + + &__icon { + width: @footer-logo-icon-width; // 图标宽度 + height: @footer-logo-icon-height; // 图标高度 + margin-right: @footer-logo-icon-margin-right; // 图标右部间距 + } + + &__title { + font-weight: bold; + font-size: @footer-logo-title-font-size; // 图标配置，标题文本大小 + line-height: @footer-logo-title-line-height; // 图标配置，标题文本行高 + font-style: italic; + } + + &__title-url { + width: @footer-logo-title-url-width; // 图标配置，链接跳转地址宽度 + } +} diff --git a/style/mobile/components/footer/_var.less b/style/mobile/components/footer/_var.less new file mode 100644 index 0000000000..70b513ce9c --- /dev/null +++ b/style/mobile/components/footer/_var.less @@ -0,0 +1,16 @@ +@footer-text-color: var(--td-footer-text-color, @font-gray-3); +@footer-text-font-size: var(--td-footer-text-font-size, @font-size-s); +@footer-text-line-height: var(--td-footer-text-line-height, 20px); +@footer-text-margin-top: var(--td-footer-text-margin-top, 4px); +@footer-link-color: var(--td-footer-link-color, @brand-color); +@footer-link-font-size: var(--td-footer-link-font-size, @font-size-s); +@footer-link-line-height: var(--td-footer-link-line-height, 20px); + +@footer-link-dividing-line-padding: var(--td-footer-link-dividing-line-padding, @spacer-1); +@footer-link-dividing-line-color: var(--td-footer-link-dividing-line-color, @font-gray-3); +@footer-logo-icon-width: var(--td-footer-logo-icon-width, 24px); +@footer-logo-icon-height: var(--td-footer-logo-icon-height, 24px); +@footer-logo-icon-margin-right: var(--td-footer-logo-icon-margin-right, @spacer); +@footer-logo-title-font-size: var(--td-footer-logo-title-font-size, @font-size-m); +@footer-logo-title-url-width: var(--td-footer-logo-title-url-width, 128px); +@footer-logo-title-line-height: var(--td-footer-logo-title-line-height, 24px); diff --git a/style/mobile/components/grid-item/v2/_index.less b/style/mobile/components/grid-item/v2/_index.less new file mode 100644 index 0000000000..f66328fc28 --- /dev/null +++ b/style/mobile/components/grid-item/v2/_index.less @@ -0,0 +1,127 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{item} { + box-sizing: border-box; + height: 100%; + // float: left; + display: inline-block; + vertical-align: top; + + &--hover { + background-color: @grid-item-hover-bg-color; + } + + &--auto-size { + width: 84px; + } + + &__wrapper { + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + position: relative; + padding: @grid-item-padding 0 12px; + + &--horizontal { + flex-direction: row; + padding-left: @grid-item-padding; + } + } + + &__words { + width: 100%; + text-align: center; + position: relative; + flex-direction: column; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + + &--horizontal { + margin-left: 12px; + } + + &:empty { + display: none; + } + } + + &__image { + &:not(:empty) { + width: @grid-item-image-width; + height: @grid-item-image-width; + + &.@{item}__image--small { + width: 32px; + height: 32px; + } + + &.@{item}__image--middle { + width: 40px; + height: 40px; + } + + .@{prefix}-grid__image { + width: 100%; + height: 100%; + } + } + + &--icon { + display: flex; + align-items: center; + justify-content: center; + background: @bg-color-secondarycontainer; + border-radius: @radius-default; + } + } + + &--left { + justify-self: flex-start; + align-items: flex-start; + + .@{prefix}-grid-item__words { + text-align: left; + } + } + + &__text { + width: inherit; + color: @grid-item-text-color; + font-size: @grid-item-text-font-size; + line-height: @grid-item-text-line-height; + padding-top: @grid-item-text-padding-top; + + &--small, + &--middle { + font-size: 12px; + } + + &--horizontal { + padding-top: 0; + text-align: left; + } + } + + &__description { + width: inherit; + color: @grid-item-description-color; + font-size: @grid-item-description-font-size; + line-height: @grid-item-description-line-height; + + &--horizontal { + text-align-last: left; + } + } + + &__icon { + font-size: @grid-item-icon-font-size; + } +} diff --git a/style/mobile/components/grid-item/v2/_var.less b/style/mobile/components/grid-item/v2/_var.less new file mode 100644 index 0000000000..1b4da35764 --- /dev/null +++ b/style/mobile/components/grid-item/v2/_var.less @@ -0,0 +1,18 @@ +@item: ~"@{prefix}-grid-item"; + +@grid-item-icon-font-size: 24px; + +@grid-item-padding: var(--td-grid-item-padding, 16px); +@grid-item-bg-color: var(--td-grid-item-bg-color, @bg-color-container); +@grid-item-image-width: var(--td-grid-item-image-width, 48px); +@grid-item-text-color: var(--td-grid-item-text-color, @font-gray-1); +@grid-item-text-font-size: var(--td-grid-item-text-font-size, 14px); +@grid-item-text-line-height: var(--td-grid-item-text-line-height, 22px); +@grid-item-text-padding-top: var(--td-grid-item-text-padding-top, 8px); +@grid-item-description-font-size: var(--td-grid-item-description-font-size, 12px); +@grid-item-description-line-height: var(--td-grid-item-description-line-height, 20px); +@grid-item-description-color: var(--td-grid-item-description-color, @font-gray-3); +@grid-item-description-padding-top: var(--td-grid-item-description-padding-top, 4px); +@grid-item-hover-bg-color: var(--td-grid-item-hover-bg-color, @bg-color-secondarycontainer); +@grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 12px); +@grid-item-horizontal-text-description-top: var(--td-grid-item-horizontal-text-description-top, 2px); diff --git a/style/mobile/components/grid/v2/_index.less b/style/mobile/components/grid/v2/_index.less new file mode 100644 index 0000000000..07bbbec6c0 --- /dev/null +++ b/style/mobile/components/grid/v2/_index.less @@ -0,0 +1,19 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-grid { + position: relative; + overflow: hidden; + background-color: @grid-bg-color; + + &__content { + width: auto; + } + + &--card { + margin: 0 16px; + border-radius: @grid-card-radius; + overflow: hidden; + } +} diff --git a/style/mobile/components/grid/v2/_var.less b/style/mobile/components/grid/v2/_var.less new file mode 100644 index 0000000000..db0a8ce536 --- /dev/null +++ b/style/mobile/components/grid/v2/_var.less @@ -0,0 +1,2 @@ +@grid-bg-color: var(--td-grid-bg-color, @bg-color-container); +@grid-card-radius: var(--td-grid-card-radius, @radius-large); diff --git a/style/mobile/components/image-viewer/v2/_index.less b/style/mobile/components/image-viewer/v2/_index.less new file mode 100644 index 0000000000..c322c6b0f3 --- /dev/null +++ b/style/mobile/components/image-viewer/v2/_index.less @@ -0,0 +1,86 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{image-viewer} { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1001; + height: 100%; + transform: translateZ(0); + overflow: hidden; + + &__mask { + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + &__content { + width: 100vw; + display: inline-block; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1005; + } + + &__image { + width: 100%; + display: inline-block; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + + .t-image--external { + width: inherit; + height: inherit; + display: block; + } + + &__nav { + width: 100%; + position: fixed; + display: flex; + align-items: center; + justify-content: space-between; + height: @image-viewer-nav-height; // 操作条高度 + background-color: @image-viewer-nav-bg-color; // 操作条背景色 + left: 0; + color: @image-viewer-nav-color; // 操作条文本颜色 + z-index: 1005; + + &-close { + margin-left: @image-viewer-close-margin-left; // 关闭操作按钮左部间距 + + &:empty { + display: none; + } + } + + &-delete { + margin-right: @image-viewer-delete-margin-right; // 删除操作按钮右部间距 + &:empty { + display: none; + } + } + + &-close, + &-delete { + font-size: @image-viewer-icon-font-size; + } + + &-index { + flex: 1; + font-size: @image-viewer-nav-index-font-size; // 索引文本大小 + text-align: center; + } + } +} diff --git a/style/mobile/components/image-viewer/v2/_var.less b/style/mobile/components/image-viewer/v2/_var.less new file mode 100644 index 0000000000..c86a6a408e --- /dev/null +++ b/style/mobile/components/image-viewer/v2/_var.less @@ -0,0 +1,10 @@ +@image-viewer: ~"@{prefix}-image-viewer"; + +@image-viewer-icon-font-size: 24px; + +@image-viewer-nav-height: var(--td-image-viewer-nav-height, 48px); +@image-viewer-nav-bg-color: var(--td-image-viewer-nav-bg-color, @font-gray-3); +@image-viewer-nav-color: var(--td-image-viewer-nav-color, @font-white-1); +@image-viewer-nav-index-font-size: var(--td-image-viewer-nav-index-font-size, @font-size-base); +@image-viewer-close-margin-left: var(--td-image-viewer-close-margin-left, @spacer-1); +@image-viewer-delete-margin-right: var(--td-image-viewer-delete-margin-right, @spacer-1); diff --git a/style/mobile/components/image/v2/_index.less b/style/mobile/components/image/v2/_index.less new file mode 100644 index 0000000000..6b3e7c9cba --- /dev/null +++ b/style/mobile/components/image/v2/_index.less @@ -0,0 +1,43 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-image { + color: @image-color; + vertical-align: top; + + &__mask { + display: flex; + align-items: center; + justify-content: center; + background-color: @image-loading-bg-color; + color: @image-loading-color; + } + + &--loading-text { + width: 0; + height: 0; + } + + &__common { + width: 100%; + height: 100%; + } + + &--shape { + &-circle { + border-radius: 50%; + overflow: hidden; + } + + &-round { + border-radius: @image-round-radius; + overflow: hidden; + } + + &-square { + border-radius: 0; + overflow: hidden; + } + } +} diff --git a/style/mobile/components/image/v2/_var.less b/style/mobile/components/image/v2/_var.less new file mode 100644 index 0000000000..9957952e1d --- /dev/null +++ b/style/mobile/components/image/v2/_var.less @@ -0,0 +1,4 @@ +@image-color: var(--td-image-color, @font-gray-3); +@image-loading-bg-color: var(--td-image-loading-bg-color, @bg-color-secondarycontainer); +@image-loading-color: var(--td-image-loading-color, @font-gray-3); +@image-round-radius: var(--td-image-round-radius, @radius-default); diff --git a/style/mobile/components/indexes-anchor/v2/_index.less b/style/mobile/components/indexes-anchor/v2/_index.less new file mode 100644 index 0000000000..4ecc6b5921 --- /dev/null +++ b/style/mobile/components/indexes-anchor/v2/_index.less @@ -0,0 +1,45 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-indexes-anchor { + color: @indexes-anchor-color; + font-size: @indexes-anchor-font-size; + line-height: @indexes-anchor-line-height; + + &__header { + display: none; + padding: 4px 16px; + background-color: @indexes-anchor-bg-color; + + &--active { + background-color: @indexes-anchor-active-bg-color; + .border(bottom); + } + } + + &__slot { + overflow: hidden; + } + + &__slot:empty + &__header { + display: block; + } + + &__wrapper { + will-change: transform; + + &--sticky { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1; + } + + &--active { + color: @indexes-anchor-active-color; + font-weight: @indexes-anchor-active-font-weight; + } + } +} diff --git a/style/mobile/components/indexes-anchor/v2/_var.less b/style/mobile/components/indexes-anchor/v2/_var.less new file mode 100644 index 0000000000..69220c4391 --- /dev/null +++ b/style/mobile/components/indexes-anchor/v2/_var.less @@ -0,0 +1,7 @@ +@indexes-anchor-color: var(--td-indexes-anchor-color, @font-gray-1); +@indexes-anchor-active-color: var(--td-indexes-anchor-active-color, @brand-color); +@indexes-anchor-bg-color: var(--td-indexes-anchor-bg-color, @bg-color-secondarycontainer); +@indexes-anchor-active-bg-color: var(--td-indexes-anchor-active-bg-color, @bg-color-container); +@indexes-anchor-font-size: var(--td-indexes-anchor-font-size, 14px); +@indexes-anchor-line-height: var(--td-indexes-anchor-line-height, 22px); +@indexes-anchor-active-font-weight: var(--td-indexes-anchor-active-font-weight, 600); diff --git a/style/mobile/components/indexes/v2/_index.less b/style/mobile/components/indexes/v2/_index.less new file mode 100644 index 0000000000..f351693d32 --- /dev/null +++ b/style/mobile/components/indexes/v2/_index.less @@ -0,0 +1,54 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-indexes { + position: relative; + height: 100vh; + + &__sidebar { + position: fixed; + right: @indexes-sidebar-right; + width: @indexes-sidebar-item-size; + color: @indexes-sidebar-color; + font-size: @indexes-sidebar-font-size; + line-height: @indexes-sidebar-line-height; + display: flex; + flex-flow: column nowrap; + top: 50%; + transform: translateY(-50%); + z-index: 1; + + &-item { + border-radius: 50%; + position: relative; + text-align: center; + + &--active { + background-color: @indexes-sidebar-active-bg-color; + color: @indexes-sidebar-active-color; + } + } + + &-item + &-item { + margin-top: 2px; + } + + &-tips { + width: @indexes-sidebar-tips-size; + height: @indexes-sidebar-tips-size; + line-height: @indexes-sidebar-tips-size; + text-align: center; + font-size: @indexes-sidebar-tips-font-size; + font-weight: 700; + color: @indexes-sidebar-tips-color; + background-color: @indexes-sidebar-tips-bg-color; + border-radius: 50%; + position: absolute; + top: 50%; + bottom: 0; + transform: translateY(-50%); + right: @indexes-sidebar-tips-right; + } + } +} diff --git a/style/mobile/components/indexes/v2/_var.less b/style/mobile/components/indexes/v2/_var.less new file mode 100644 index 0000000000..4a6370b79d --- /dev/null +++ b/style/mobile/components/indexes/v2/_var.less @@ -0,0 +1,13 @@ +@indexes-sidebar-color: var(--td-indexes-sidebar-color, @font-gray-1); +@indexes-sidebar-item-size: var(--td-indexes-sidebar-item-size, 20px); +@indexes-sidebar-font-size: var(--td-indexes-sidebar-font-size, 12px); +@indexes-sidebar-line-height: var(--td-indexes-sidebar-line-height, 20px); +@indexes-sidebar-active-color: var(--td-indexes-sidebar-active-color, @font-white-1); +@indexes-sidebar-active-bg-color: var(--td-indexes-sidebar-active-bg-color, @brand-color); +@indexes-sidebar-right: var(--td-indexes-sidebar-right, 8px); + +@indexes-sidebar-tips-size: var(--td-indexes-sidebar-tips-size, 48px); +@indexes-sidebar-tips-font-size: var(--td-indexes-sidebar-tips-font-size, 20px); +@indexes-sidebar-tips-color: var(--td-indexes-sidebar-tips-color, @brand-color); +@indexes-sidebar-tips-bg-color: var(--td-indexes-sidebar-tips-bg-color, @brand-color-light); +@indexes-sidebar-tips-right: var(--td-indexes-sidebar-tips-right, 38px); diff --git a/style/mobile/components/input/v2/_index.less b/style/mobile/components/input/v2/_index.less new file mode 100644 index 0000000000..dab8741224 --- /dev/null +++ b/style/mobile/components/input/v2/_index.less @@ -0,0 +1,170 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-input { + background-color: @input-bg-color; + display: flex; + align-items: center; + flex: 1; + padding: @input-vertical-padding; + + &--border { + .border(bottom, @input-border-color); + + &::after { + left: @input-border-left-space; + right: @input-border-right-space; + } + } + + &--layout-vertical { + flex-direction: column; + } + + &__wrap--prefix { + display: flex; + } + + &__icon--prefix { + font-size: 24px; + color: @input-prefix-icon-color; + } + + &__label:not(:empty) { + min-width: 2em; + max-width: 5em; + font-size: @font-size-m; + line-height: 24px; + color: @input-label-text-color; + margin-right: @spacer-2; + .@{prefix}-input--layout-vertical & { + font-size: @font-size-base; + padding-bottom: 4px; + } + } + + &__icon--prefix:not(:empty) + &__label:not(:empty) { + padding-left: 4px; + } + + &__label:not(:empty) + &__wrap { + margin-left: @spacer-2; + } + + &__icon--prefix:not(:empty) + &__label:empty { + margin-right: @spacer-2; + } + + &__wrap { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + flex: 1; + flex-shrink: 1; + + .@{prefix}-input__content { + display: flex; + align-items: center; + line-height: 24px; + font-size: @font-size-m; + } + + &--clearable-icon, + &--suffix-icon, + &--suffix { + flex: 0 0 auto; + padding-left: @spacer-1; + + &:empty { + display: none; + } + } + + &--clearable-icon, + &--suffix-icon { + font-size: 24px; + color: @input-suffix-icon-color; + } + + &--suffix { + font-size: @font-size-m; + color: @input-suffix-text-color; + } + } + + &__icon--prefix, + &__tips, + &__wrap--clearable-icon, + &__wrap--suffix-icon, + &__wrap--suffix { + &:empty { + display: none; + } + } + + &__control { + display: block; + box-sizing: border-box; + width: 100%; + min-width: 0; // for flex-shrink in field__button + min-height: 24px; + margin: 0; + padding: 0; + color: @input-default-text-color; + line-height: inherit; + background-color: transparent; + border: 0; + resize: none; + font-size: inherit; + + &--disabled { + color: @input-disabled-text-color; + cursor: not-allowed; + opacity: 1; + -webkit-text-fill-color: currentColor; // fix disabled color in iOS + } + + &--read-only { + cursor: default; + } + } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } + + &--center { + text-align: center; + } + + &__placeholder { + color: @input-placeholder-text-color; + font-size: @font-size-m; + } + + &__tips { + font-size: @font-size-s; + line-height: 20px; + padding-top: 4px; + } +} + +.input-status(@status) { + @tipsColor: "input-@{status}-tips-color"; + + .@{prefix}-input--@{status} + .@{prefix}-input__tips { + color: @@tipsColor; + } +} + +// status +.input-status(default); +.input-status(success); +.input-status(warning); +.input-status(error); diff --git a/style/mobile/components/input/v2/_var.less b/style/mobile/components/input/v2/_var.less new file mode 100644 index 0000000000..af3e0f0669 --- /dev/null +++ b/style/mobile/components/input/v2/_var.less @@ -0,0 +1,23 @@ +@input-vertical-padding: var(--td-input-vertical-padding, 16px); //输入框垂直方向内间距 + +@input-default-text-color: var(--td-input-default-text-color, @font-gray-1); // 'default' 状态输入框文本颜色 +@input-success-text-color: var(--td-input-success-text-color, @success-color); // 'success' 状态输入框文本颜色 +@input-warning-text-color: var(--td-input-warning-text-color, @warning-color); // 'warning' 状态输入框文本颜色 +@input-error-text-color: var(--td-input-error-text-color, @error-color); // 'error' 状态输入框文本颜色 + +@input-default-tips-color: var(--td-input-default-tips-color, @font-gray-3); // 'default' 状态辅助文本颜色 +@input-success-tips-color: var(--td-input-success-tips-color, @success-color); // 'success' 状态辅助文本颜色 +@input-warning-tips-color: var(--td-input-warning-tips-color, @warning-color); // 'warning' 状态辅助文本颜色 +@input-error-tips-color: var(--td-input-error-tips-color, @error-color); // 'error' 状态辅助文本颜色 + +@input-bg-color: var(--td-input-bg-color, @bg-color-container); // 输入框背景颜色 +@input-border-color: var(--td-input-border-color, @component-stroke); // 输入框分割线颜色 +@input-border-left-space: var(--td-input-border-left-space, 16px); +@input-border-right-space: var(--td-input-border-right-space, 0); +@input-placeholder-text-color: var(--td-input-placeholder-text-color, @text-color-placeholder); // 输入框占位符文本颜色 +@input-prefix-icon-color: var(--td-input-prefix-icon-color, @font-gray-1); // // 输入框前缀图标颜色 +@input-suffix-icon-color: var(--td-input-suffix-icon-color, @font-gray-3); // 输入框后缀图标颜色 +@input-label-text-color: var(--td-input-label-text-color, @font-gray-1); // 左侧文本颜色 +@input-suffix-text-color: var(--td-input-suffix-text-color, @font-gray-1); // 后置图标前的后置内容文本颜色 +@input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色 +@input-border-radius: var(--td-input-border-radius, @radius-default); // 边框圆角大小 diff --git a/style/mobile/components/link/_index.less b/style/mobile/components/link/_index.less new file mode 100644 index 0000000000..d78ac1296d --- /dev/null +++ b/style/mobile/components/link/_index.less @@ -0,0 +1,82 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.link-size(@size) { + @contentFontSize: "link-content-@{size}-font-size"; + @contentLineHeight: "link-content-@{size}-line-height"; + @iconSize: "link-icon-@{size}-font-size"; + + .@{link}--@{size} { + .@{link}__content { + font-size: @@contentFontSize; + line-height: @@contentLineHeight; + } + .@{link}__prefix-icon, + .@{link}__suffix-icon { + font-size: @@iconSize; + } + } +} + +.link-theme(@theme) { + @color: "link-@{theme}-color"; + @activeColor: "link-@{theme}-active-color"; + @disabledColor: "link-@{theme}-disabled-color"; + + .@{link}--@{theme} { + color: @@color; + + &.@{link}--underline::after { + border-color: @@color; + } + + &.@{link}--disabled { + color: @@disabledColor; + } + + &.@{link}--hover { + color: @@activeColor; + + &.@{link}--underline::after { + border-color: @@activeColor; + } + } + } +} + +.link-size(small); +.link-size(medium); +.link-size(large); + +.link-theme(primary); +.link-theme(success); +.link-theme(warning); +.link-theme(default); +.link-theme(danger); + +.@{link} { + position: relative; + display: flex; + align-items: center; + box-sizing: content-box; + + &--underline::after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + opacity: 1; + border-bottom: 1px solid rgb(205, 11, 231); + } + + &__prefix-icon:not(:empty) + &__content:not(:empty) { + padding-left: 4px; + } + + &__content:not(:empty) + &__suffix-icon:not(:empty) { + padding-left: 4px; + } +} diff --git a/style/mobile/components/link/_var.less b/style/mobile/components/link/_var.less new file mode 100644 index 0000000000..94cd5fb2cf --- /dev/null +++ b/style/mobile/components/link/_var.less @@ -0,0 +1,42 @@ +// 状态色 - 默认色 + +@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色 +@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色 +@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色 + +// 状态色 - 主色 +@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色 +@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色 +@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色 + +// 状态色 - 成功 +@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色 +@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色 +@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色 + +// 状态色 - 警告 +@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色 +@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色 +@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色 + +// 状态色 - 危险 +@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色 +@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色 +@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色 + +// 字号 +@link-content-small-font-size: 12px; +@link-content-small-line-height: 20px; +@link-icon-small-font-size: 14px; + +@link-content-medium-font-size: 14px; +@link-content-medium-line-height: 22px; +@link-icon-medium-font-size: 16px; + +@link-content-large-font-size: 16px; +@link-content-large-line-height: 24px; +@link-icon-large-font-size: 18px; + +@themes: primary, success, warning, default, danger; + +@link: ~"@{prefix}-link"; diff --git a/style/mobile/components/loading/v2/_index.less b/style/mobile/components/loading/v2/_index.less new file mode 100644 index 0000000000..08b48d97f8 --- /dev/null +++ b/style/mobile/components/loading/v2/_index.less @@ -0,0 +1,193 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{loading} { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + + &__spinner { + position: relative; + box-sizing: border-box; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + animation: rotate .8s linear infinite; + color: @loading-color; + + &.reverse { + animation-name: rotateReverse; + } + + &--spinner { + animation-timing-function: steps(12); + color: @font-gray-1; + + .@{loading}__dot { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + &::before { + display: block; + width: 2.5px; + height: 25%; + margin: 0 auto; + background-color: currentColor; + border-radius: 40%; + content: " "; + } + } + } + + &--circular { + .@{loading}__circular { + border-radius: 100%; + width: 100%; + height: 100%; + background: conic-gradient( + from 180deg at 50% 50%, + rgba(255, 255, 255, 0%) 0deg, + rgba(255, 255, 255, 0%) 60deg, + currentColor 330deg, + rgba(255, 255, 255, 0%) 360deg + ); + mask: radial-gradient(transparent calc(50% - .5px), #fff 50%); + + /* stylelint-disable-next-line */ + -webkit-mask: radial-gradient(transparent calc(50% - .5px), #fff 50%); + } + } + + &--dots { + display: flex; + justify-content: space-between; + align-items: center; + animation: none; + + .@{loading}__dot { + width: 20%; + height: 20%; + border-radius: 50%; + background-color: currentColor; + animation-duration: 1.8s; + animation-name: dotting; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-fill-mode: both; + } + } + } + + &__text { + font-size: @loading-text-font-size; + line-height: @loading-text-line-height; + + &--vertical:not(:first-child):not(:empty) { + margin-top: 6px; + } + + &--horizontal:not(:first-child):not(:empty) { + margin-left: 8px; + } + } + + &--vertical { + flex-direction: column; + } + + &--horizontal { + flex-direction: row; + vertical-align: top; + } +} + +@keyframes t-bar { + 0% { + width: 0; + } + + 50% { + width: 70%; + } + + 100% { + width: 80%; + } +} + +@keyframes t-bar-loaded { + 0% { + height: 3px; + opacity: 1; + width: 90%; + } + + 50% { + height: 3px; + opacity: 1; + width: 100%; + } + + 100% { + height: 0; + opacity: 0; + width: 100%; + } +} + +.generate(@n, @i: 1) when (@i =< @n) { + .@{loading}__dot:nth-of-type(@{i}) { + transform: rotate(@i * 30deg); + opacity: (1 / 12) * (@i - 1); + } + .generate(@n, (@i + 1)); +} +.generate(12); + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes rotateReverse { + from { + transform: rotate(360deg); + } + + to { + transform: rotate(0deg); + } +} + +@keyframes dotting { + 0% { + opacity: .15; + } + + 1% { + opacity: .8; + } + + 33% { + opacity: .8; + } + + 34% { + opacity: .15; + } + + 100% { + opacity: .15; + } +} diff --git a/style/mobile/components/loading/v2/_var.less b/style/mobile/components/loading/v2/_var.less new file mode 100644 index 0000000000..5fea0e575d --- /dev/null +++ b/style/mobile/components/loading/v2/_var.less @@ -0,0 +1,5 @@ +@loading: ~"@{prefix}-loading"; + +@loading-color: var(--td-loading-color, @brand-color); +@loading-text-font-size: var(--td-loading-text-font-size, 12px); +@loading-text-line-height: var(--td-loading-text-line-height, 20px); diff --git a/style/mobile/components/message/v2/_index.less b/style/mobile/components/message/v2/_index.less new file mode 100644 index 0000000000..0ae53178bc --- /dev/null +++ b/style/mobile/components/message/v2/_index.less @@ -0,0 +1,74 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{message} { + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: @message-align; + height: @message-height; + align-items: center; + z-index: @message-z-index; + padding: 0 @message-horizontal-padding; + box-sizing: border-box; + border-radius: @message-border-radius; + line-height: 1; + background-color: @message-bg-color; + box-shadow: @message-box-shadow; + + &__text { + display: inline-block; + color: @message-content-font-color; + font-size: @message-content-font-size; + line-height: @message-content-height; + } + + &__text-wrap { + flex: 1 1 auto; + overflow-x: hidden; + text-overflow: ellipsis; + } + + &__text-nowrap { + word-break: keep-all; + white-space: nowrap; + } + + &--info { + color: @message-info-color; + } + + &--success { + color: @message-success-color; + } + + &--warning { + color: @message-warning-color; + } + + &--error { + color: @message-error-color; + } + + &__icon--left, + &__icon--right { + font-size: @message-icon-size; + } + + &__icon--left:not(:empty) { + margin-right: @spacer; + } + + &__icon--right { + color: @message-close-icon-color; + } + + &__icon--right:not(:empty), + &__link { + flex: 0 0 auto; + margin-left: @spacer; + } +} diff --git a/style/mobile/components/message/v2/_var.less b/style/mobile/components/message/v2/_var.less new file mode 100644 index 0000000000..419652bcc2 --- /dev/null +++ b/style/mobile/components/message/v2/_var.less @@ -0,0 +1,20 @@ +@message-height: 48px; +@message-horizontal-padding: 16px; +@message-z-index: 15000; + +@message-align: flex-start; +@message-icon-size: 22px; +@message-content-height: 22px; +@message-content-font-size: @font-size-base; + +@message-bg-color: var(--td-message-bg-color, @bg-color-container); // 消息通知背景颜色 +@message-box-shadow: var(--td-message-box-shadow, @shadow-4); // 消息通知阴影 +@message-border-radius: var(--td-message-border-radius, @radius-default); // 消息通知圆角大小 +@message-content-font-color: var(--td-message-content-font-color, @font-gray-1); // 内容文本颜色 +@message-info-color: var(--td-message-info-color, @brand-color); // 'info'主题色 +@message-success-color: var(--td-message-success-color, @success-color); // 'success'主题色 +@message-warning-color: var(--td-message-warning-color, @warning-color); // 'warning'主题色 +@message-error-color: var(--td-message-error-color, @error-color); // 'error'主题色 +@message-close-icon-color: var(--td-message-close-icon-color, @font-gray-3); // 关闭按钮图标颜色 + +@message: ~"@{prefix}-message"; diff --git a/style/mobile/components/navbar/v2/_index.less b/style/mobile/components/navbar/v2/_index.less new file mode 100644 index 0000000000..856548153d --- /dev/null +++ b/style/mobile/components/navbar/v2/_index.less @@ -0,0 +1,118 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-navbar { + &--fixed { + .@{prefix}-navbar__content { + position: fixed; + top: 0; + left: 0; + z-index: 5001; + } + } + + &--visible { + display: ""; + } + + &--visible-animation { + opacity: 1; + transition: opacity .3s cubic-bezier(.645, .045, .355, 1); + } + + &--hide-animation { + opacity: 0; + transition: opacity .3s cubic-bezier(.645, .045, .355, 1); + } + + &--hide { + display: none; + } + + &__placeholder { + height: @navbar-height; + padding-top: @navbar-padding-top; + position: relative; + visibility: hidden; + } + + &__content { + position: relative; + z-index: 1; + height: @navbar-height; + width: calc(100% - @navbar-right); + padding-right: @navbar-right; + padding-top: @navbar-padding-top; + color: @navbar-color; + background-color: @navbar-bg-color; + display: flex; + align-items: center; + } + + &__left { + position: relative; + box-sizing: border-box; + // width: @navbar-right; + display: flex; + align-items: center; + margin-left: @spacer-1; + + &-arrow { + font-size: @navbar-left-arrow-size; + } + } + + &__capsule { + box-sizing: border-box; + width: @navbar-capsule-width; + height: @navbar-capsule-height; + display: flex; + align-items: center; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + transform: scale(.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: calc(@navbar-capsule-border-radius * 2); + border: 1px solid @navbar-capsule-border-color; + } + + &:empty { + display: none; + } + } + + &__center { + font-size: 18px; + text-align: center; + position: absolute; + left: @navbar-right; + width: calc(100% - @navbar-right * 2); + height: @navbar-height; + line-height: @navbar-height; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + + &:empty { + display: none; + } + + &-title { + font-size: @navbar-title-font-size; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + font-weight: @navbar-title-font-weight; + } + } +} diff --git a/style/mobile/components/navbar/v2/_var.less b/style/mobile/components/navbar/v2/_var.less new file mode 100644 index 0000000000..c8a4ad4e63 --- /dev/null +++ b/style/mobile/components/navbar/v2/_var.less @@ -0,0 +1,14 @@ +@navbar-color: var(--td-navbar-color, @font-gray-1); +@navbar-bg-color: var(--td-navbar-bg-color, @bg-color-container); +@navbar-height: var(--td-navbar-height, 48px); +@navbar-right: var(--td-navbar-right, 95px); // 默认右上角胶囊按钮宽度，组件会在初始化时尝试自动获取胶囊按钮宽度并覆写该值 +@navbar-padding-top: var(--td-navbar-padding-top, 20px); // 导航栏顶部间距，组件会在初始化时尝试取右侧系统胶囊位置进行覆盖 +@navbar-title-font-size: var(--td-navbar-title-font-size, 18px); +@navbar-title-font-weight: var(--td-navbar-title-font-weight, 600); +@navbar-left-arrow-size: var(--td-navbar-left-arrow-size, 24px); + +// capsule +@navbar-capsule-border-color: var(--td-navbar-capsule-border-color, #e3e6ea); +@navbar-capsule-border-radius: var(--td-navbar-capsule-border-radius, 16px); +@navbar-capsule-width: var(--td-navbar-capsule-width, 88px); +@navbar-capsule-height: var(--td-navbar-capsule-height, 32px); diff --git a/style/mobile/components/notice-bar/v2/_index.less b/style/mobile/components/notice-bar/v2/_index.less new file mode 100644 index 0000000000..86b39c5ec9 --- /dev/null +++ b/style/mobile/components/notice-bar/v2/_index.less @@ -0,0 +1,85 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{notice-bar} { + display: flex; + align-items: flex-start; + padding: @notice-bar-vertical-padding @notice-bar-horizontal-padding; + font-size: @notice-bar-font-size; + + &__content-wrap { + flex: 1; + overflow-x: hidden; + line-height: @notice-bar-line-height; + color: @notice-bar-font-color; + } + + &__content { + white-space: nowrap; + } + + &__content-wrapable { + white-space: normal; + } + + &__content--vertical { + height: @notice-bar-line-height; + line-height: @notice-bar-line-height; + + &-item { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &__prefix-icon { + color: inherit; + } + + &__prefix-icon:not(:empty) { + padding-right: @spacer; + } + + &__suffix-icon { + color: @notice-bar-suffix-icon-color; + } + + &__prefix-icon, + &__suffix-icon { + font-size: @notice-bar-icon-font-size; + } + + &__operation { + display: inline-flex; + vertical-align: top; + color: @notice-bar-operation-font-color; + font-weight: 700; + } + + &__suffix-icon:not(:empty) { + padding-left: @spacer; + } + + // theme + &--info { + color: @notice-bar-info-color; + background-color: @notice-bar-info-bg-color; + } + + &--success { + color: @notice-bar-success-color; + background-color: @notice-bar-success-bg-color; + } + + &--warning { + color: @notice-bar-warning-color; + background-color: @notice-bar-warning-bg-color; + } + + &--error { + color: @notice-bar-error-color; + background-color: @notice-bar-error-bg-color; + } +} diff --git a/style/mobile/components/notice-bar/v2/_var.less b/style/mobile/components/notice-bar/v2/_var.less new file mode 100644 index 0000000000..aa00e59f3d --- /dev/null +++ b/style/mobile/components/notice-bar/v2/_var.less @@ -0,0 +1,19 @@ +@notice-bar-font-size: @font-size-base; +@notice-bar-horizontal-padding: 16px; +@notice-bar-vertical-padding: 13px; +@notice-bar-line-height: 22px; +@notice-bar-icon-font-size: 22px; + +@notice-bar-font-color: var(--td-notice-bar-font-color, @font-gray-1); // 公告栏文本颜色 +@notice-bar-info-color: var(--td-notice-bar-info-color, @brand-color); // 'info' 主题色 +@notice-bar-info-bg-color: var(--td-notice-bar-info-bg-color, @brand-color-light); // 'info' 主题背景色 +@notice-bar-success-color: var(--td-notice-bar-success-color, @success-color); // 'success' 主题色 +@notice-bar-success-bg-color: var(--td-notice-bar-success-bg-color, @success-color-1); // 'success' 主题背景色 +@notice-bar-warning-color: var(--td-notice-bar-warning-color, @warning-color); // 'warning' 主题色 +@notice-bar-warning-bg-color: var(--td-notice-bar-warning-bg-color, @warning-color-1); // 'warning' 主题背景色 +@notice-bar-error-color: var(--td-notice-bar-error-color, @error-color-6); // 'error' 主题色 +@notice-bar-error-bg-color: var(--td-notice-bar-error-bg-color, @error-color-1); // 'error' 主题背景色 +@notice-bar-suffix-icon-color: var(--td-notice-bar-suffix-icon-color, @font-gray-3); // 后缀图标颜色 +@notice-bar-operation-font-color: var(--td-notice-bar-operation-font-color, @brand-color); // 额外信息文本颜色 + +@notice-bar: ~"@{prefix}-notice-bar"; diff --git a/style/mobile/components/overlay/v2/_index.less b/style/mobile/components/overlay/v2/_index.less new file mode 100644 index 0000000000..696eb4702d --- /dev/null +++ b/style/mobile/components/overlay/v2/_index.less @@ -0,0 +1,21 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{overlay} { + position: fixed; + top: 0; + left: 0; + width: 100%; + bottom: 0; + background-color: @overlay-bg-color; + transition: opacity @overlay-transition-duration ease; +} + +.t-fade-enter { + opacity: 0; +} + +.t-fade-leave-to { + opacity: 0; +} diff --git a/style/mobile/components/overlay/v2/_var.less b/style/mobile/components/overlay/v2/_var.less new file mode 100644 index 0000000000..62c33856ac --- /dev/null +++ b/style/mobile/components/overlay/v2/_var.less @@ -0,0 +1,3 @@ +@overlay: ~"@{prefix}-overlay"; +@overlay-bg-color: var(--td-overlay-bg-color, @font-gray-2); +@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms); diff --git a/style/mobile/components/picker-item/v2/_index.less b/style/mobile/components/picker-item/v2/_index.less new file mode 100644 index 0000000000..831f6e64bc --- /dev/null +++ b/style/mobile/components/picker-item/v2/_index.less @@ -0,0 +1,35 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +:host { + display: flex; +} + +.@{item} { + &__group { + height: @picker-group-height; + overflow: hidden; + flex: 1; + z-index: 1; + } + + &__wrapper { + padding: 72px 0; + } + + &__item { + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: @picker-item-height; + line-height: @picker-item-height; + color: @picker-item-color; + + &--active { + color: @picker-item-active-color; + font-weight: 600; + } + } +} diff --git a/style/mobile/components/picker-item/v2/_var.less b/style/mobile/components/picker-item/v2/_var.less new file mode 100644 index 0000000000..0c146df3f2 --- /dev/null +++ b/style/mobile/components/picker-item/v2/_var.less @@ -0,0 +1,6 @@ +@picker: ~"@{prefix}-picker"; +@item: ~"@{picker}-item"; +@picker-group-height: var(--td-picker-group-height, 200px); +@picker-item-height: var(--td-picker-item-height, 40px); +@picker-item-color: var(--td-picker-item-color, @font-gray-2); +@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); diff --git a/style/mobile/components/picker/v2/_index.less b/style/mobile/components/picker/v2/_index.less new file mode 100644 index 0000000000..d78ac7c570 --- /dev/null +++ b/style/mobile/components/picker/v2/_index.less @@ -0,0 +1,89 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{picker} { + position: relative; + background-color: @picker-bg-color; + border-top-left-radius: @picker-border-radius; + border-top-right-radius: @picker-border-radius; + + &__toolbar { + display: flex; + align-items: center; + justify-content: space-between; + overflow: hidden; + height: @picker-toolbar-height; + } + + &__title { + flex: 1; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: @picker-title-color; + line-height: @picker-title-line-height; + font-weight: @picker-title-font-weight; + font-size: @picker-title-font-size; + } + + &__cancel, + &__confirm { + display: flex; + align-items: center; + justify-content: center; + user-select: none; + font-size: @picker-button-font-size; + height: 100%; + padding: 0 16px; + } + + &__cancel { + color: @picker-cancel-color; + } + + &__confirm { + color: @picker-confirm-color; + } + + &__main { + position: relative; + display: flex; + justify-content: center; + padding-left: 32px; + padding-right: 32px; + } + + &__mask { + position: absolute; + left: 0; + right: 0; + z-index: 3; + backface-visibility: hidden; + pointer-events: none; + height: 48px; + + &--top { + top: 0; + background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0%) 100%); + } + + &--bottom { + bottom: 0; + background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0%) 100%); + transform: matrix(1, 0, 0, -1, 0, 0); + } + } + + &__indicator { + height: @picker-item-height; + position: absolute; + left: 16px; + right: 16px; + top: 72px; + pointer-events: none; + background-color: @picker-indicator-bg-color; + border-radius: @picker-indicator-border-radius; + } +} diff --git a/style/mobile/components/picker/v2/_var.less b/style/mobile/components/picker/v2/_var.less new file mode 100644 index 0000000000..d3e8382422 --- /dev/null +++ b/style/mobile/components/picker/v2/_var.less @@ -0,0 +1,21 @@ +@picker: ~"@{prefix}-picker"; + +@picker-border-radius: var(--td-picker-border-radius, 12px); +@picker-toolbar-height: var(--td-picker-toolbar-height, 58px); + +@picker-cancel-color: var(--td-picker-cancel-color, @font-gray-2); +@picker-confirm-color: var(--td-picker-confirm-color, @brand-color); +@picker-button-font-size: var(--td-picker-button-font-size, 16px); + +@picker-title-font-size: var(--td-picker-title-font-size, 18px); +@picker-title-font-weight: var(--td-picker-title-font-weight, 600); +@picker-title-line-height: var(--td-picker-title-line-height, 26px); +@picker-title-color: var(--td-picker-title-color, @font-gray-1); + +@picker-item-height: var(--td-picker-item-height, 40px); +@picker-bg-color: var(--td-picker-bg-color, @bg-color-container); +@picker-mask-color-top: var(--td-picker-mask-color-top, hsla(0, 0%, 100%, .92)); +@picker-mask-color-bottom: var(--td-picker-mask-color-bottom, hsla(0, 0%, 100%, .4)); + +@picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer); +@picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 6px); diff --git a/style/mobile/components/popup/v2/_index.less b/style/mobile/components/popup/v2/_index.less new file mode 100644 index 0000000000..3bf5647b50 --- /dev/null +++ b/style/mobile/components/popup/v2/_index.less @@ -0,0 +1,94 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{popup} { + position: fixed; + z-index: 11500; + max-height: 100vh; + transition: all 300ms ease; + background-color: @popup-bg-color; + + &__content { + position: relative; + z-index: 1; + } + + &__close { + position: absolute; + top: 0; + right: 0; + padding: 10px; + line-height: 1; + } + + &--top { + top: 0; + left: 0; + width: 100%; + border-bottom-left-radius: @popup-border-radius; + border-bottom-right-radius: @popup-border-radius; + } + + &--bottom { + bottom: 0; + left: 0; + width: 100vw; + border-top-left-radius: @popup-border-radius; + border-top-right-radius: @popup-border-radius; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } + + &--left { + top: 0; + left: 0; + height: 100vh; + } + + &--right { + top: 0; + right: 0; + height: 100vh; + } + + &--center { + top: 50%; + left: 50%; + transform: scale(1) translate3d(-50%, -50%, 0); + transform-origin: 0% 0%; + border-radius: @popup-border-radius; + } + + &.@{prefix}-fade-enter, + &.@{prefix}-fade-leave-to { + &.@{popup}--top { + transform: translateY(-100%); + } + + &.@{popup}--bottom { + transform: translateY(100%); + } + + &.@{popup}--left { + transform: translateX(-100%); + } + + &.@{popup}--right { + transform: translateX(100%); + } + + &.@{popup}--center { + transform: scale(.6) translate3d(-50%, -50%, 0); + opacity: 0; + } + } + + &.@{prefix}-dialog-enter, + &.@{prefix}-dialog-leave-to { + &.@{popup}--center { + transform: scale(.6) translate3d(-50%, -50%, 0); + opacity: 0; + } + } +} diff --git a/style/mobile/components/popup/v2/_var.less b/style/mobile/components/popup/v2/_var.less new file mode 100644 index 0000000000..7912bd13bd --- /dev/null +++ b/style/mobile/components/popup/v2/_var.less @@ -0,0 +1,6 @@ +@popup: ~"@{prefix}-popup"; +@popup-position: ~"@{popup}--position"; +@popup-transition: ~"@{popup}--transition"; + +@popup-bg-color: var(--td-popup-bg-color, @bg-color-container); +@popup-border-radius: var(--td-popup-border-radius, @radius-default); diff --git a/style/mobile/components/progress/v2/_index.less b/style/mobile/components/progress/v2/_index.less new file mode 100644 index 0000000000..20749232cf --- /dev/null +++ b/style/mobile/components/progress/v2/_index.less @@ -0,0 +1,177 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +// 进度条基本样式 +.@{progress} { + &__inner { + position: relative; + height: 100%; + background: @progress-inner-bg-color; + border-radius: @radius-round; + transition: @progress-inner-transition; + } + + &__bar { + width: 100%; + height: @progress-line-stroke-width; + overflow: hidden; + background: @progress-track-bg-color; + border-radius: @radius-round; + } + + &__info { + margin-left: @progress-info-spacer; + color: @progress-info-dark-color; + white-space: nowrap; + display: inline-flex; + } +} + +//标准进度条 +.@{progress}--thin { + display: flex; + justify-content: space-between; + align-items: center; + + .@{progress}__icon { + font-size: @progress-line-icon-font-size; + } +} + +//条形进度条 百分比内置 +.@{progress}--plump { + height: @progress-stroke-plump-width; + border-radius: calc(@progress-stroke-plump-width / 2); + display: flex; + align-items: center; + + .@{progress}__info { + font-size: @progress-plump-label-font-size; + } +} + +.@{progress}--over-ten { + .@{progress}__info { + position: absolute; + top: 50%; + right: @progress-info-spacer; + color: @progress-info-light-color; + transform: translateY(-50%); + } +} + +.@{progress}--under-ten { + .@{progress}__info, + .@{progress}__inner { + display: inline-block; + } + + .@{progress}__info { + vertical-align: top; + } +} + +// 环形 +.@{progress}__canvas--circle { + position: relative; + width: @progress-circle-width; + height: @progress-circle-width; + border-radius: @radius-circle; + + .@{progress}__canvas--inner { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: calc(100% - @progress-stroke-circle-width*2); + height: calc(100% - @progress-stroke-circle-width*2); + border-radius: @radius-circle; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: @progress-circle-inner-bg-color; + } + + .@{progress}__info { + margin: 0; + font-size: @progress-circle-label-font-size; + font-weight: @progress-circle-label-font-weight; + line-height: @progress-circle-label-line-height; + overflow: hidden; + text-overflow: ellipsis; + display: box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .@{progress}__icon { + font-size: @progress-circle-icon-font-size; + } +} + +//进度条状态 +.@{progress}--status--active { + .@{progress}__inner { + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + content: ""; + animation: progress-active-animation 2s cubic-bezier(.23, .99, .86, .2) infinite; + background: @progress-inner-bg-color-active; + opacity: .2; + } + } +} + +.@{progress}--status--success { + .@{progress}__inner { + background: @progress-inner-bg-color-success; + } + + .@{progress}__icon { + color: @success-color; + } +} + +.@{progress}--status--warning { + .@{progress}__inner { + background: @progress-inner-bg-color-warning; + } + + .@{progress}__icon { + color: @warning-color; + } +} + +.@{progress}--status--error { + .@{progress}__inner { + background: @progress-inner-bg-color-error; + } + + .@{progress}__icon { + color: @error-color; + } +} + +@keyframes progress-active-animation { + 0% { + width: 0; + opacity: .1; + } + + 35% { + width: 50%; + opacity: .4; + } + + 100% { + width: 100%; + opacity: 0; + } +} diff --git a/style/mobile/components/progress/v2/_var.less b/style/mobile/components/progress/v2/_var.less new file mode 100644 index 0000000000..88fde86e27 --- /dev/null +++ b/style/mobile/components/progress/v2/_var.less @@ -0,0 +1,42 @@ +@progress-line-stroke-width: 6px; // line 进度条线宽 +@progress-stroke-plump-width: 20px; // plump 进度条线宽 +@progress-stroke-circle-width: 6px; // circle 进度条线宽 +@progress-line-icon-font-size: calc(@font-size-base + 2px); +@progress-circle-icon-font-size: 48px; +@progress-plump-label-font-size: @font-size-s; +@progress-circle-width: 112px; +@progress-circle-label-font-size: 20px; +@progress-circle-label-line-height: 28px; +@progress-circle-label-font-weight: 700; +@progress-info-spacer: @spacer; // 间距 +@progress-inner-transition: all @anim-duration-base @anim-time-fn-easing; + +@progress-track-bg-color: var(--td-progress-track-bg-color, @bg-color-component); // 进度条背景色值(未完成部分进度) +@progress-inner-bg-color: var(--td-progress-inner-bg-color, @brand-color); // 进度条已完成进度色值(默认状态) +@progress-inner-bg-color-success: var( + --td-progress-inner-bg-color-success, + @success-color +); // 进度条已完成进度色值(success 状态) +@progress-inner-bg-color-error: var( + --td-progress-inner-bg-color-error, + @error-color +); // 进度条已完成进度色值(error 状态) +@progress-inner-bg-color-warning: var( + --td-progress-inner-bg-color-warning, + @warning-color +); // 进度条已完成进度色值(warning 状态) +@progress-inner-bg-color-active: var( + --td-progress-inner-bg-color-active, + @bg-color-container +); // 进度条已完成进度色值(active 状态) +@progress-info-dark-color: var( + --td-progress-info-dark-color, + @text-color-primary +); // 进度条深色label字体颜色(在进度条外或未完成进度灰色色块里显示的色值) +@progress-info-light-color: var( + --td-progress-info-light-color, + @font-white-1 +); // 进度条浅色label字体颜色(在进度条色块内显示的色值) +@progress-circle-inner-bg-color: var(--td-progress-circle-inner-bg-color, @font-white-1); // 环境进度条内圆背景色 + +@progress: ~"@{prefix}-progress"; diff --git a/style/mobile/components/pull-down-refresh/v2/_index.less b/style/mobile/components/pull-down-refresh/v2/_index.less new file mode 100644 index 0000000000..b52c55c733 --- /dev/null +++ b/style/mobile/components/pull-down-refresh/v2/_index.less @@ -0,0 +1,39 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-pull-down-refresh { + overflow: hidden; + max-height: 100vh; + height: 100%; + + &__track { + position: relative; + + &--loosing { + transition: transform ease .24s; + } + } + + &__tips { + position: absolute; + color: @pull-down-refresh-color; + font-size: 12px; + top: 0; + width: 100%; + transform: translateY(-100%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + overflow: hidden; + } + + &__text { + margin: 8px 0 0; + } + + &__wrap { + position: relative; + } +} diff --git a/style/mobile/components/pull-down-refresh/v2/_var.less b/style/mobile/components/pull-down-refresh/v2/_var.less new file mode 100644 index 0000000000..11dbbbd952 --- /dev/null +++ b/style/mobile/components/pull-down-refresh/v2/_var.less @@ -0,0 +1 @@ +@pull-down-refresh-color: var(--td-pull-down-refresh-color, @font-gray-3); diff --git a/style/mobile/components/rate/v2/_index.less b/style/mobile/components/rate/v2/_index.less new file mode 100644 index 0000000000..3c1fe213cf --- /dev/null +++ b/style/mobile/components/rate/v2/_index.less @@ -0,0 +1,88 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-rate { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + + &__wrapper { + line-height: 1em; + display: inline-flex; + } + + &__icon { + display: block; + line-height: 1em; + width: 1em; + transition: transform .3s ease; + + &--current { + transform: scale(@rate-icon-scale); + } + + &--selected { + color: @rate-selected-color; + + &-half { + color: transparent; + background: linear-gradient( + to right, + @rate-selected-color 0%, + @rate-selected-color 50%, + @rate-unselected-color 51%, + @rate-unselected-color 100% + ); + background-clip: text; + } + } + + &--unselected { + color: @rate-unselected-color; + } + } + + &__text { + font-size: @rate-text-font-size; + color: @rate-text-color; + margin-left: 16px; + vertical-align: middle; + + &--active { + color: @rate-text-active-color; + font-weight: @rate-text-active-font-weight; + } + } + + &__tips { + position: absolute; + display: flex; + align-items: center; + bottom: calc(100% + 8px); + padding: 4px; + border-radius: 6px; + box-shadow: @shadow-1; + background-color: @bg-color-container; + transform: translateX(-50%); + + &-item { + display: flex; + flex-direction: column; + align-items: center; + width: 32px; + border-radius: 3px; + + &--active { + background-color: @bg-color-secondarycontainer; + } + } + + &-text { + text-align: center; + font-size: 12px; + line-height: 20px; + } + } +} diff --git a/style/mobile/components/rate/v2/_var.less b/style/mobile/components/rate/v2/_var.less new file mode 100644 index 0000000000..038231b6a4 --- /dev/null +++ b/style/mobile/components/rate/v2/_var.less @@ -0,0 +1,7 @@ +@rate-text-font-size: var(--td-rate-text-font-size, @font-size-m); +@rate-text-color: var(--td-rate-text-color, @font-gray-4); +@rate-text-active-color: var(--td-rate-text-active-color, @font-gray-1); +@rate-selected-color: var(--td-rate-selected-color, @warning-color); +@rate-unselected-color: var(--td-rate-unselected-color, @bg-color-secondarycomponent); +@rate-text-active-font-weight: var(--td-rate-text-active-font-weight, 600); +@rate-icon-scale: var(--td-rate-icon-scale, 1.33); diff --git a/style/mobile/components/result/v2/_index.less b/style/mobile/components/result/v2/_index.less new file mode 100644 index 0000000000..85216a982e --- /dev/null +++ b/style/mobile/components/result/v2/_index.less @@ -0,0 +1,54 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-result { + display: flex; + flex-direction: column; + align-items: center; + + &__icon { + font-size: @result-icon-font-size; + } + + &__title { + line-height: @result-title-line-height; // 标题行高 + font-size: @result-title-font-size; // 标题文字大小 + font-weight: 700; + color: @result-title-color; // 标题颜色 + } + + &__thumb:not(:empty) + &__title:not(:empty) { + margin-top: @result-title-margin-top; // 标题内容上边距 + } + + &__description { + text-align: center; + color: @result-description-color; // 描述颜色 + font-size: @result-description-font-size; // 描述文字大小 + line-height: @result-description-line-height; // 描述行高 + } + + &__title + &__description:not(:empty) { + margin-top: @result-description-margin-top; // 描述内容上边距 + } + + // theme + &--theme { + &-default { + color: @result-icon-default-color; // 默认状态图标颜色 + } + + &-success { + color: @result-icon-success-color; // 成功状态图标颜色 + } + + &-warning { + color: @result-icon-warning-color; // 警示状态图标颜色 + } + + &-error { + color: @result-icon-error-color; // 失败状态图标颜色 + } + } +} diff --git a/style/mobile/components/result/v2/_var.less b/style/mobile/components/result/v2/_var.less new file mode 100644 index 0000000000..ea73a42d14 --- /dev/null +++ b/style/mobile/components/result/v2/_var.less @@ -0,0 +1,17 @@ +@result-icon-font-size: 80px; + +@result-title-font-size: var(--td-result-title-font-size, @font-size-l); +@result-title-line-height: var(--td-result-title-line-height, 28px); +@result-title-color: var(--td-result-title-color, @font-gray-1); + +@result-description-font-size: var(--td-result-description-font-size, @font-size-base); +@result-description-line-height: var(--td-result-description-line-height, 22px); +@result-description-color: var(--td-result-description-color, @font-gray-2); + +@result-icon-default-color: var(--td-result-icon-default-color, @brand-color); +@result-icon-success-color: var(--td-result-icon-success-color, @success-color); +@result-icon-warning-color: var(--td-result-icon-warning-color, @warning-color); +@result-icon-error-color: var(--td-result-icon-error-color, @error-color); + +@result-title-margin-top: var(--td-result-title-margin-top, @spacer-1); +@result-description-margin-top: var(--td-result-description-margin-top, @spacer); diff --git a/style/mobile/components/search/v2/_index.less b/style/mobile/components/search/v2/_index.less new file mode 100644 index 0000000000..23a52aa2ae --- /dev/null +++ b/style/mobile/components/search/v2/_index.less @@ -0,0 +1,74 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-search { + display: flex; + justify-content: space-between; + align-items: center; + + &__label { + padding: 4px; + color: @search-label-color; + } + + &__input-box { + flex: 1; + box-sizing: border-box; + display: flex; + height: @search-height; + align-items: center; + border: 1px solid @search-bg-color; + background: @search-bg-color; + padding: @search-padding; + + &.@{prefix}-is-focused { + border-color: @search-bg-color; + } + + &--round { + border-radius: @search-round-radius; + } + + &--square { + border-radius: @search-square-radius; + } + + &--center { + text-align: center; + } + + .@{prefix}-input__keyword { + display: inline-block; + flex: 1; + color: @search-text-color; + font-size: @search-font-size; + padding-left: 5px; + } + + .@{prefix}-icon { + color: @search-icon-color; + } + } + + &__clear { + position: relative; + margin-left: 10px; + color: @search-clear-icon-color; + .hotspot-expanded(); + } + + &__search-action { + margin-left: 15px; + font-size: @search-font-size; + color: @search-action-color; + } + + &__placeholder { + color: @search-placeholder-color; + + &--center { + text-align: center; + } + } +} diff --git a/style/mobile/components/search/v2/_var.less b/style/mobile/components/search/v2/_var.less new file mode 100644 index 0000000000..8462a6d075 --- /dev/null +++ b/style/mobile/components/search/v2/_var.less @@ -0,0 +1,12 @@ +@search-bg-color: var(--td-search-bg-color, @bg-color-secondarycontainer); +@search-text-color: var(--td-search-text-color, @font-gray-1); +@search-label-color: var(--search-label-color, @font-gray-1); +@search-font-size: var(--td-search-font-size, @font-size-m); +@search-height: var(--td-search-height, 40px); +@search-padding: var(--td-search-padding, 8px 12px); +@search-placeholder-color: var(--td-search-placeholder-color, @font-gray-3); +@search-icon-color: var(--td-search-icon-color, @font-gray-3); +@search-square-radius: var(--td-search-square-radius, @radius-default); +@search-round-radius: calc(@search-height / 2); +@search-action-color: var(--td-search-action-color, @brand-color); +@search-clear-icon-color: var(--td-search-clear-icon-color, @font-gray-3); diff --git a/style/mobile/components/side-bar-item/v2/_index.less b/style/mobile/components/side-bar-item/v2/_index.less new file mode 100644 index 0000000000..d646a8e0b8 --- /dev/null +++ b/style/mobile/components/side-bar-item/v2/_index.less @@ -0,0 +1,78 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-side-bar-item { + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 16px; + font-size: @side-bar-font-size; + color: @side-bar-color; + background: @side-bar-bg-color; + min-height: @side-bar-item-height; + box-sizing: border-box; + white-space: wrap; + line-height: @side-bar-item-line-height; + + &--active { + font-weight: 600; + background: @bg-color-container; + color: @side-bar-active-color; + } + + &__icon { + font-size: @side-bar-icon-size; + margin-right: 2px; + } + + &__prefix, + &__suffix { + z-index: 1; + position: absolute; + right: 0; + width: calc(@side-bar-border-radius * 2); + height: calc(@side-bar-border-radius * 2); + background: #fff; + + &::after { + content: ""; + display: block; + width: 100%; + height: 100%; + background-color: @side-bar-bg-color; + } + } + + &__prefix { + top: calc(@side-bar-border-radius * -2); + + &::after { + border-bottom-right-radius: @side-bar-border-radius; + } + } + + &__suffix { + bottom: calc(@side-bar-border-radius * -2); + + &::after { + border-top-right-radius: @side-bar-border-radius; + } + } + + &--disabled { + color: @side-bar-disabled-color; + } + + &__line { + width: 3px; + height: 14px; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + background: @side-bar-active-color; + border-radius: 4px; + } +} diff --git a/style/mobile/components/side-bar-item/v2/_var.less b/style/mobile/components/side-bar-item/v2/_var.less new file mode 100644 index 0000000000..a79d5e4c42 --- /dev/null +++ b/style/mobile/components/side-bar-item/v2/_var.less @@ -0,0 +1,9 @@ +@side-bar-color: var(--td-side-bar-color, @font-gray-1); +@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-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, @font-gray-4); +@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); diff --git a/style/mobile/components/side-bar/v2/_index.less b/style/mobile/components/side-bar/v2/_index.less new file mode 100644 index 0000000000..64a50f818e --- /dev/null +++ b/style/mobile/components/side-bar/v2/_index.less @@ -0,0 +1,16 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-side-bar { + display: flex; + flex-direction: column; + width: @side-bar-width; + height: @side-bar-height; + overflow-y: auto; + + &__padding { + flex: 1; + background-color: @side-bar-bg-color; + } +} diff --git a/style/mobile/components/side-bar/v2/_var.less b/style/mobile/components/side-bar/v2/_var.less new file mode 100644 index 0000000000..6c275700f8 --- /dev/null +++ b/style/mobile/components/side-bar/v2/_var.less @@ -0,0 +1,3 @@ +@side-bar-width: var(--td-side-bar-width, 103px); +@side-bar-height: var(--td-side-bar-height, 100%); +@side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer); diff --git a/style/mobile/components/skeleton/v2/_index.less b/style/mobile/components/skeleton/v2/_index.less new file mode 100644 index 0000000000..e6b131cdad --- /dev/null +++ b/style/mobile/components/skeleton/v2/_index.less @@ -0,0 +1,108 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-skeleton { + box-sizing: border-box; + + &__row { + display: flex; + margin-bottom: @skeleton-row-spacing; // 骨架屏行间距 + align-items: center; + justify-content: space-between; + } + + &__row:only-child, + &__row:last-child { + margin-bottom: 0; + } + + &__col { + background-color: @skeleton-bg-color; // 骨架屏背景颜色 + display: flex; + align-items: center; + justify-content: center; + + &:first-child:last-child, + &:last-child { + margin-right: 0; + } + } + + &--type { + &-text { + width: 100%; + height: @skeleton-text-height; // 'text'类型骨架屏列高 + border-radius: @skeleton-text-border-radius; // 'text'类型骨架屏列圆角 + } + + &-rect { + width: 100%; + height: @skeleton-rect-height; // 'rect'类型骨架屏列高 + border-radius: @skeleton-rect-border-radius; // rect'类型骨架屏列圆角 + } + + &-circle { + width: @skeleton-circle-height; // 'circle'类型骨架屏列宽 + height: @skeleton-circle-height; // 'circle'类型骨架屏列高 + border-radius: var( + --td-skeleton-circle-border-radius, + @skeleton-circle-border-radius + ); // 'circle'类型骨架屏列圆角 + + flex-shrink: 0; + } + } + + &--animation { + &-gradient { + position: relative; + overflow-x: hidden; + + &::after { + content: " "; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0%), + @skeleton-animation-gradient, + rgba(255, 255, 255, 0%) + ); + animation: t-skeleton--gradient 1.5s linear 2s infinite; + } + } + + &-flashed { + animation: t-skeleton--flashed 2s linear 2s infinite; + } + } + + @keyframes t-skeleton--gradient { + 0% { + transform: translateX(-100%) skewX(-15deg); + } + + 100% { + transform: translateX(100%) skewX(-15deg); + } + } + + @keyframes t-skeleton--flashed { + 0% { + opacity: 1; + } + + 50% { + background-color: @skeleton-animation-flashed; + opacity: .3; + } + + 100% { + opacity: 1; + } + } +} diff --git a/style/mobile/components/skeleton/v2/_var.less b/style/mobile/components/skeleton/v2/_var.less new file mode 100644 index 0000000000..b2f02bb1e9 --- /dev/null +++ b/style/mobile/components/skeleton/v2/_var.less @@ -0,0 +1,10 @@ +@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, rgba(0, 0, 0, 4%)); +@skeleton-animation-flashed: var(--td-skeleton-animation-flashed, rgba(90%, 90%, 90%, .3)); +@skeleton-bg-color: var(--td-skeleton-bg-color, @bg-color-page); +@skeleton-row-spacing: var(--td-skeleton-row-spacing, @spacer-2); +@skeleton-text-height: var(--td-skeleton-text-height, 16px); +@skeleton-rect-height: var(--td-skeleton-rect-height, 16px); +@skeleton-circle-height: var(--td-skeleton-circle-height, 48px); +@skeleton-text-border-radius: var(--td-skeleton-text-border-radius, @radius-small); +@skeleton-rect-border-radius: var(--td-skeleton-rect-border-radius, @radius-default); +@skeleton-circle-border-radius: var(--td-skeleton-circle-border-radius, @radius-circle); diff --git a/style/mobile/components/slider/v2/_index.less b/style/mobile/components/slider/v2/_index.less new file mode 100644 index 0000000000..cc5229b3cb --- /dev/null +++ b/style/mobile/components/slider/v2/_index.less @@ -0,0 +1,204 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{slider} { + font-size: 14px; + display: flex; + align-items: center; + + &--disabled { + .@{slider}__value, + .@{slider}__range-extreme, + .@{slider}__dot-value, + .@{slider}__scale-desc { + color: @slider-disabled-text-color; + } + } + + &--top { + padding-top: 20px; + } + + &__line { + position: absolute; + top: 0; + height: @slider-bar-height; + border-radius: calc(@slider-bar-height / 2); + background-color: @slider-active-color; + + &--disabled { + background-color: @slider-active-disabled-color; + } + + &--capsule { + height: @slider-capsule-line-heihgt; + } + + &--capsule&--single { + border-top-left-radius: calc(@slider-capsule-line-heihgt / 2); + border-bottom-left-radius: calc(@slider-capsule-line-heihgt / 2); + } + } + + &__dot { + border-radius: 50%; + border: 1px solid @slider-dot-color; + position: absolute; + top: 50%; + right: 0; + transform: translate3d(50%, -50%, 0); + z-index: 2; + background-color: @slider-dot-bg-color; + width: @slider-dot-size; + height: @slider-dot-size; + box-shadow: @shadow-1; + box-sizing: border-box; + + &--left { + left: 0; + transform: translate3d(-50%, -50%, 0); + } + + &-value { + position: relative; + left: 50%; + transform: translateX(-50%); + top: -26px; + text-align: center; + width: 48px; + height: 22px; + line-height: 22px; + } + } + + &__value, + &__range-extreme, + &__dot-value { + color: rgba(0, 0, 0, 90%); + + &--sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + clip-path: inset(50%); + border: 0; + } + } + + &__dot-slider { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + } + + &__value--min { + margin-left: 16px; + } + + &__value--max { + margin-right: 16px; + } + + &__value--right { + flex-basis: 40px; + + &__value--text { + margin-right: 16px; + text-align: right; + display: block; + } + } + + &__bar { + margin: 8px 16px; + flex: 10; + background-clip: content-box; + height: @slider-bar-height; + border-radius: calc(@slider-bar-height / 2); + position: relative; + background-color: @slider-default-color; + + &--capsule { + height: @slider-capsule-bar-heihgt; + border-radius: calc(@slider-capsule-bar-heihgt / 2); + background-color: @slider-capsule-bar-color; + border: 3px solid @slider-capsule-bar-color; + box-sizing: border-box; + } + + &--marks { + background-color: @slider-default-color; + } + + &--disabled { + background-color: @slider-default-disabled-color; + } + } + + &__range-extreme--min { + margin-left: 16px; + text-align: left; + } + + &__range-extreme--max { + margin-right: 16px; + text-align: right; + } + + // 刻度样式 + &__scale { + &-item { + background-color: @slider-default-color; + height: 8px; + width: 8px; + border-radius: 50%; + position: absolute; + top: 50%; + margin-top: -4px; + z-index: 1; + + &--active { + background-color: @slider-active-color; + } + + &--disabled { + background-color: @slider-default-disabled-color; + } + + &--active&--disabled { + background-color: @slider-active-disabled-color; + } + + &--capsule { + height: @slider-capsule-line-heihgt; + width: 2px; + border-radius: 0; + background-color: @slider-capsule-bar-color; + margin-top: calc(-.5 * @slider-capsule-line-heihgt); + } + + &--hidden { + background-color: transparent; + } + } + + &-desc { + position: absolute; + left: 50%; + color: rgba(0, 0, 0, 90%); + transform: translateX(-50%); + bottom: 16px; + + &--capsule { + bottom: 23px; + } + } + } +} diff --git a/style/mobile/components/slider/v2/_var.less b/style/mobile/components/slider/v2/_var.less new file mode 100644 index 0000000000..63e97413eb --- /dev/null +++ b/style/mobile/components/slider/v2/_var.less @@ -0,0 +1,15 @@ +@slider: ~"@{prefix}-slider"; +@slider-bar-height: var(--td-slider-bar-height, 4px); +@slider-dot-bg-color: var(--td-slider-dot-bg-color, @bg-color-container); +@slider-dot-size: var(--td-slider-dot-size, 20px); +@slider-dot-color: var(--td-slider-dot-color, @bg-color-secondarycontainer); +@slider-default-color: var(--td-slider-default-color, @bg-color-secondarycomponent); +@slider-default-disabled-color: var(--td-slider-default-color, @bg-color-component-disabled); +@slider-active-color: var(--td-slider-active-color, @brand-color); +@slider-active-disabled-color: var(--td-slider-disabled-color, @brand-color-disabled); +@slider-disabled-text-color: var(--td-slider-disabled-text-color, @font-gray-4); + +// capsule +@slider-capsule-bar-heihgt: var(--td-slider-capsule-bar-heihgt, 24px); +@slider-capsule-bar-color: var(--td-slider-capsule-bar-color, @bg-color-component); +@slider-capsule-line-heihgt: var(--td-slider-capsule-line-heihgt, 18px); diff --git a/style/mobile/components/step-item/v2/_index.less b/style/mobile/components/step-item/v2/_index.less new file mode 100644 index 0000000000..c5b0100a1a --- /dev/null +++ b/style/mobile/components/step-item/v2/_index.less @@ -0,0 +1,194 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.color-generate() { + @status: default, process, finish, error; + each(@status, { + @bgVar: ~"step-item-@{value}-circle-bg"; + @colorVar: ~"step-item-@{value}-circle-color"; + @titleColorVar: ~"step-item-@{value}-title-color"; + @iconColorVar: ~"step-item-@{value}-icon-color"; + @dotBorderColorVar: ~"step-item-@{value}-dot-border-color"; + + &__circle--@{value} { + color: @@colorVar; + background-color: @@bgVar; + } + + &__title--@{value} { + color: @@titleColorVar; + } + + &__icon--@{value} { + color: @@iconColorVar; + } + + &__dot--@{value} { + border-color: @@dotBorderColorVar; + } + }); +} + +.@{item} { + flex: 1; + vertical-align: top; + position: relative; + display: flex; + + .color-generate(); + + &--horizontal { + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__anchor { + display: flex; + align-items: center; + justify-content: center; + + &--vertical { + width: @step-item-circle-size; + height: @step-item-circle-size; + } + } + + &__circle { + display: flex; + justify-content: center; + align-items: center; + width: @step-item-circle-size; + height: @step-item-circle-size; + text-align: center; + border-radius: 50%; + font-size: @step-item-circle-font-size; + } + + &__icon { + z-index: 1; + vertical-align: top; + font-size: @font-size-base; + position: relative; + + &--finsh, + &--process { + color: @brand-color; + } + } + + &__dot { + width: @step-item-dot-size; + height: @step-item-dot-size; + border-radius: 50%; + border-width: 1px; + border-style: solid; + box-sizing: border-box; + + &--finish { + background-color: @step-item-process-dot-border-color; + } + + &--error { + background-color: @step-item-error-dot-border-color; + } + } + + &__content { + text-align: center; + + &--horizontal { + max-width: 80px; + margin-top: 8px; + } + + &--vertical { + margin-left: 8px; + flex: 1; + padding-bottom: 16px; + } + + &--vertical&--last { + padding-bottom: 0; + } + } + + &__title { + position: relative; + line-height: @step-item-circle-size; + font-size: @font-size-base; + + &--process { + font-weight: 600; + } + + &--vertical { + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 4px; + } + } + + &__description { + color: @step-item-descrition-color; + line-height: 20px; + font-size: @font-size-s; + + &--vertical { + text-align: left; + } + } + + &__extra { + &:not(:empty) { + margin-top: 8px; + } + } + + &__line { + background-color: @step-item-line-color; + content: ""; + display: block; + position: absolute; + + &--horizontal { + height: 1px; + transform: translateY(-50%); + width: calc(100% - 16px - @step-item-circle-size); + top: calc(@step-item-circle-size / 2 + 1px); + left: calc(50% + @step-item-circle-size / 2 + 8px); + } + + &--horizontal&--dot { + top: calc(@step-item-dot-size / 2); + } + + &--finish { + background-color: @step-item-finish-line-color; + } + + &--vertical { + height: calc(100% - 16px - @step-item-circle-size); + width: 1px; + transform: translateX(-50%); + left: calc(@step-item-circle-size / 2); + top: calc(@step-item-circle-size + 8px); + } + + &--vertical&--dot { + top: @step-item-circle-size; + height: calc(100% - @step-item-circle-size); + } + } +} + +:host { + flex: 1; + vertical-align: top; + position: relative; + align-self: flex-start; + width: inherit; +} diff --git a/style/mobile/components/step-item/v2/_var.less b/style/mobile/components/step-item/v2/_var.less new file mode 100644 index 0000000000..e434e98e24 --- /dev/null +++ b/style/mobile/components/step-item/v2/_var.less @@ -0,0 +1,35 @@ +@step-item-dot-size: var(--td-step-item-dot-size, 8px); +@step-item-circle-size: var(--td-step-item-circle-size, 22px); +@step-item-circle-font-size: var(--td-step-item-circle-font-size, 14px); +@step-item-descrition-color: var(--td-step-item-descrition-color, @font-gray-3); + +@step-item-default-circle-bg: var(--td-step-item-default-circle-bg, @bg-color-secondarycontainer); +@step-item-default-circle-color: var(--td-step-item-default-circle-color, @font-gray-3); +@step-item-default-title-color: var(--td-step-item-default-title-color, @font-gray-3); +@step-item-default-icon-color: var(--td-step-item-default-icon-color, @font-gray-3); +@step-item-default-dot-border-color: var(--td-step-item-default-dot-border-color, @component-border); + +@step-item-process-circle-color: var(--td-step-item-process-circle-color, @font-white-1); +@step-item-process-circle-bg: var(--td-step-item-process-circle-bg, @brand-color); +@step-item-process-title-color: var(--td-step-item-process-title-color, @brand-color); +@step-item-process-icon-color: var(--td-step-item-process-icon-color, @brand-color); +@step-item-process-dot-border-color: var(--td-step-item-process-dot-border-color, @brand-color); + +@step-item-finish-circle-color: var(--td-step-item-finish-circle-color, @brand-color); +@step-item-finish-circle-bg: var(--td-step-item-finish-circle-bg, @brand-color-light); +@step-item-finish-title-color: var(--td-step-item-finish-title-color, @font-gray-1); +@step-item-finish-icon-color: var(--td-step-item-finish-icon-color, @brand-color); +@step-item-finish-dot-border-color: var(--td-step-item-finish-dot-border-color, @brand-color); + +@step-item-error-circle-color: var(--td-step-item-error-circle-color, @error-color); +@step-item-error-circle-bg: var(--td-step-item-error-circle-bg, @error-color-1); +@step-item-error-title-color: var(--td-step-item-error-title-color, @error-color); +@step-item-error-icon-color: var(--td-step-item-error-icon-color, @error-color); +@step-item-error-dot-border-color: var(--td-step-item-error-dot-border-color, @error-color); + +@step-item-line-color: var(--td-step-item-line-color, @component-border); +@step-item-finish-line-color: var(--td-step-item-finish-line-color, @brand-color); + +@step: ~"@{prefix}-step"; +@steps: ~"@{step}s"; +@item: ~"@{steps}-item"; diff --git a/style/mobile/components/steps/v2/_index.less b/style/mobile/components/steps/v2/_index.less new file mode 100644 index 0000000000..3df1d8ca88 --- /dev/null +++ b/style/mobile/components/steps/v2/_index.less @@ -0,0 +1,23 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +:host { + display: flex; +} + +.@{step} { + &--vertical { + padding-right: 16px; + } +} + +.@{steps} { + display: flex; + width: 100%; + + // 垂直 + &--vertical { + flex-direction: column; + } +} diff --git a/style/mobile/components/steps/v2/_var.less b/style/mobile/components/steps/v2/_var.less new file mode 100644 index 0000000000..a7db479fed --- /dev/null +++ b/style/mobile/components/steps/v2/_var.less @@ -0,0 +1,3 @@ +@step: ~"@{prefix}-step"; +@steps: ~"@{step}s"; +@item: ~"@{step}-item"; diff --git a/style/mobile/components/swipe-cell/v2/_index.less b/style/mobile/components/swipe-cell/v2/_index.less new file mode 100644 index 0000000000..5a0738f569 --- /dev/null +++ b/style/mobile/components/swipe-cell/v2/_index.less @@ -0,0 +1,42 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-swipe-cell { + position: relative; + overflow: hidden; + + &__left, + &__right { + position: absolute; + top: 0; + height: 100%; + } + + &__left { + left: 0; + transform: translate3d(-100%, 0, 0); + } + + &__right { + right: 0; + transform: translate3d(100%, 0, 0); + } + + &__content { + display: inline-flex; + justify-content: center; + align-items: center; + padding: 0 @spacer-2; + } + + &__icon { + font-size: @font-size-l; + } + + &__icon + &__text:not(:empty) { + margin-left: @spacer; + font-size: @font-size-base; + line-height: 22px; + } +} diff --git a/style/mobile/components/swipe-cell/v2/_var.less b/style/mobile/components/swipe-cell/v2/_var.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less new file mode 100644 index 0000000000..f6953a8b51 --- /dev/null +++ b/style/mobile/components/switch/v2/_index.less @@ -0,0 +1,165 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-switch { + display: flex; + align-items: center; + overflow: hidden; + + &__label { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + font-size: @swtich-label-font-size; + color: @switch-label-color; + overflow: hidden; + + &--checked { + color: @switch-label-checked-color; + } + + &--disabled { + color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + color: @switch-checked-disabled-color; + } + + &--large { + font-size: @swtich-label-large-font-size; + } + + &--small { + font-size: @swtich-label-small-font-size; + } + + &:empty { + display: none; + } + } + + &__icon { + font-size: @switch-icon-size; + + &--large { + font-size: @switch-icon-large-size; + } + + &--small { + font-size: @switch-icon-small-size; + } + } + + &__loading { + color: @switch-label-checked-color; + } + + &__body { + vertical-align: middle; + width: @switch-width; + height: @switch-height; + border-radius: @switch-radius; + background-color: @switch-unchecked-color; + position: relative; + transition: all .3s ease; + overflow: hidden; + + &--checked { + background-color: @switch-checked-color; + } + + &--disabled { + background-color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + background-color: @switch-checked-disabled-color; + } + + &--large { + width: @switch-large-width; + height: @switch-large-height; + border-radius: @switch-large-radius; + } + + &--small { + width: @switch-small-width; + height: @switch-small-height; + border-radius: @switch-small-radius; + } + } + + &__dot { + position: absolute; + left: @switch-dot-horizontal-margin; + top: 50%; + width: @switch-dot-size; + height: @switch-dot-size; + border-radius: 50%; + background-color: @bg-color-container; + transition: all .3s; + transform: translateY(-50%); + box-shadow: @switch-dot-shadow; + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + width: 200%; + height: 200%; + border: 1px solid @switch-dot-border-color; + border-radius: 50%; + transform: scale(.5); + transform-origin: 0 0; + box-sizing: border-box; + } + + &--large { + width: @switch-dot-large-size; + height: @switch-dot-large-size; + } + + &--small { + width: @switch-dot-small-size; + height: @switch-dot-small-size; + } + + &--checked { + left: calc(@switch-width - @switch-dot-size - @switch-dot-horizontal-margin); + } + + &--large&--checked { + left: calc(@switch-large-width - @switch-dot-large-size - @switch-dot-horizontal-margin); + } + + &--small&--checked { + left: calc(@switch-small-width - @switch-dot-small-size - @switch-dot-horizontal-margin); + } + + &--plain:not(&--checked) { + width: @switch-dot-plain-size; + height: @switch-dot-plain-size; + left: @switch-dot-plain-horizontal-margin; + } + + &--large&--plain:not(&--checked) { + width: @switch-dot-plain-large-size; + height: @switch-dot-plain-large-size; + } + + &--small&--plain:not(&--checked) { + width: @switch-dot-plain-small-size; + height: @switch-dot-plain-small-size; + } + } +} diff --git a/style/mobile/components/switch/v2/_var.less b/style/mobile/components/switch/v2/_var.less new file mode 100644 index 0000000000..1c88c734ed --- /dev/null +++ b/style/mobile/components/switch/v2/_var.less @@ -0,0 +1,45 @@ +@switch-checked-color: var(--td-switch-checked-color, @brand-color); +@switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled); +@switch-unchecked-color: var(--td-switch-unchecked-color, @font-gray-4); +@switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled); + +@switch-width: var(--td-switch-width, 45px); +@switch-height: var(--td-switch-height, 28px); +@switch-radius: var(--td-switch-radius, calc(@switch-height / 2)); + +// large +@switch-large-width: var(--td-switch-large-width, 52px); +@switch-large-height: var(--td-switch-large-height, 32px); +@switch-large-radius: var(--td-switch-large-radius, calc(@switch-large-height / 2)); + +// small +@switch-small-width: var(--td-switch-small-width, 39px); +@switch-small-height: var(--td-switch-small-height, 24px); +@switch-small-radius: var(--td-switch-small-radius, calc(@switch-small-height / 2)); + +@switch-dot-size: var(--td-switch-dot-size, 22px); +@switch-dot-plain-size: var(--td-switch-dot-plain-size, 18px); +@switch-dot-horizontal-margin: var(--td-switch-dot-horizontal-margin, 3px); +@switch-dot-plain-horizontal-margin: var(--td-switch-dot-plain-horizontal-margin, 5px); +@switch-dot-shadow: var(--td-switch-dot-shadow, @shadow-1); +@switch-dot-border-color: var(--td-switch-dot-border-color, @bg-color-secondarycontainer); + +// large dot +@switch-dot-large-size: var(--td-switch-dot-large-size, 26px); +@switch-dot-plain-large-size: var(--td-switch-dot-plain-large-size, 22px); + +// small dot +@switch-dot-small-size: var(--td-switch-dot-small-size, 18px); +@switch-dot-plain-small-size: var(--td-switch-dot-plain-small-size, 14px); + +@swtich-label-font-size: var(--td-swtich-label-font-size, 14px); +@swtich-label-large-font-size: var(--td-swtich-label-font-size, 16px); +@swtich-label-small-font-size: var(--td-swtich-label-font-size, 12px); + +@switch-label-color: var(--td-switch-label-color, @font-gray-4); +@switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color); + +// icon +@switch-icon-size: var(--td-switch-icon-size, 20px); +@switch-icon-large-size: var(--td-switch-icon-large-size, 24px); +@switch-icon-small-size: var(--td-switch-icon-small-size, 16px); diff --git a/style/mobile/components/tab-bar-item/v2/_index.less b/style/mobile/components/tab-bar-item/v2/_index.less new file mode 100644 index 0000000000..97fe3411a6 --- /dev/null +++ b/style/mobile/components/tab-bar-item/v2/_index.less @@ -0,0 +1,133 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{item} { + flex: 1; + height: @tab-bar-height; + box-sizing: border-box; + user-select: none; + position: relative; + margin: 8px 0; + background-color: @tab-bar-bg-color; + padding: 0 12px; + + &--text-only { + font-size: 16px; + } + + &--split::before { + .hairline-left(@color: @tab-bar-border-color); + + top: 8px; + bottom: 8px; + } + + &--crowded { + padding: 0 8px; + } + + &--round { + border-radius: 99px; + } + + &__content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 8px; + color: @tab-bar-color; + + &--checked { + color: @tab-bar-active-color; + font-weight: 600; + } + + &--tag { + border-radius: 99px; + } + + &--tag&--checked { + background-color: @tab-bar-active-bg; + } + + // &--active { + // background-color: @tab-bar-hover-bg-color; + // } + } + + .@{prefix}-badge-class { + transform: translate(50%, -10%) !important; // stylelint-disable-line + } + + &__text { + display: flex; + align-items: center; + + &--small { + font-size: 10px; + line-height: 16px; + } + } + + &__icon-menu { + margin-right: 4px; + } + + &__spread { + position: absolute; + top: 0; + left: 7%; + width: 86%; + background-color: @tab-bar-bg-color; + transform: translate3d(0, calc(-100% - 16px), 0); + z-index: 1; + border-radius: 6px; + color: @tab-bar-color; + box-shadow: @tab-bar-spread-shadow; + + &::before { + display: block; + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 0; + border: 8px solid transparent; + border-top: 8px solid @tab-bar-bg-color; + transform: translate3d(-50%, 16px, 0); + } + + &-item { + width: 100%; + height: 48px; + display: flex; + align-items: center; + justify-content: flex-start; + position: relative; + flex-direction: column; + + &--active { + background-color: @tab-bar-hover-bg-color; + } + + &-split { + box-sizing: border-box; + content: " "; + pointer-events: none; + background-color: @tab-bar-spread-border-color; + width: 80%; + height: 1px; + transform: translateY(.5); + } + + &-text { + padding-top: 12px; + } + } + } +} diff --git a/style/mobile/components/tab-bar-item/v2/_var.less b/style/mobile/components/tab-bar-item/v2/_var.less new file mode 100644 index 0000000000..c2a0b70d7d --- /dev/null +++ b/style/mobile/components/tab-bar-item/v2/_var.less @@ -0,0 +1,12 @@ +@item: ~"@{prefix}-tab-bar-item"; + +@tab-bar-height: var(--td-tab-bar-height, 40px); +@tab-bar-color: var(--td-tab-bar-color, @font-gray-1); +@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); +@tab-bar-border-color: var(--td-tab-bar-border-color, @border-color); +@tab-bar-hover-bg-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, .05)); +@tab-bar-active-color: var(--td-tab-bar-active-color, @brand-color); +@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); +@tab-bar-active-bg: var(--td-tab-bar-active-bg, @brand-color-light); +@tab-bar-spread-shadow: var(--td-tab-bar-spread-shadow, @shadow-3); +@tab-bar-spread-border-color: var(--td-tab-bar-spread-border-color, @border-color); diff --git a/style/mobile/components/tab-bar/v2/_index.less b/style/mobile/components/tab-bar/v2/_index.less new file mode 100644 index 0000000000..1389586e92 --- /dev/null +++ b/style/mobile/components/tab-bar/v2/_index.less @@ -0,0 +1,47 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{tab-bar-cls} { + display: flex; + flex-wrap: nowrap; + align-items: center; + position: relative; + font-size: 16px; + background-color: @tab-bar-bg-color; + box-sizing: border-box; + + &--normal&--border::before { + z-index: 1; + .hairline-top(@color: @tab-bar-border-color); + } + + &--fixed { + position: fixed; + left: 0; + bottom: 0; + right: 0; + } + + &--normal&--safe { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } + + &--round { + margin-left: 16px; + margin-right: 16px; + border-radius: 999px; + box-shadow: @tab-bar-round-shadow; + } + + &--fixed&--round&--safe { + bottom: constant(safe-area-inset-bottom); + bottom: env(safe-area-inset-bottom); + } + + &--fixed&--round&--safe { + bottom: constant(safe-area-inset-bottom); + bottom: env(safe-area-inset-bottom); + } +} diff --git a/style/mobile/components/tab-bar/v2/_var.less b/style/mobile/components/tab-bar/v2/_var.less new file mode 100644 index 0000000000..bc6b1aa0a5 --- /dev/null +++ b/style/mobile/components/tab-bar/v2/_var.less @@ -0,0 +1,5 @@ +@tab-bar-cls: ~"@{prefix}-tab-bar"; + +@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); +@tab-bar-border-color: var(--td-tab-bar-border-color, @border-color); +@tab-bar-round-shadow: var(--td-tab-bar-round-shadow, @shadow-3); diff --git a/style/mobile/components/tab-panel/v2/_index.less b/style/mobile/components/tab-panel/v2/_index.less new file mode 100644 index 0000000000..4b075c81d5 --- /dev/null +++ b/style/mobile/components/tab-panel/v2/_index.less @@ -0,0 +1,15 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +:host { + flex-shrink: 0; + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.@{prefix}-tab-panel { + height: inherit; + width: inherit; +} diff --git a/style/mobile/components/tab-panel/v2/_var.less b/style/mobile/components/tab-panel/v2/_var.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/style/mobile/components/tabs/v2/_index.less b/style/mobile/components/tabs/v2/_index.less new file mode 100644 index 0000000000..2eac250bd3 --- /dev/null +++ b/style/mobile/components/tabs/v2/_index.less @@ -0,0 +1,213 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-tabs { + position: relative; + font-size: @tab-font-size; + background: @tab-nav-bg-color; + + &__wrapper { + display: flex; + overflow: hidden; + background: @tab-nav-bg-color; + + &--card { + background: @bg-color-secondarycontainer; + + --td-tab-border-color: transparent; + } + } + + &__item { + position: relative; + display: flex; + flex: none; + align-items: center; + justify-content: center; + font-weight: 400; + color: @tab-item-color; + padding: 0 16px; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + + &--active { + font-weight: 600; + color: @tab-item-active-color; + } + + &--disabled { + color: @tab-item-disabled-color; + } + + &--evenly { + flex: 1; + } + + &--top, + &--bottom { + height: @tab-item-height; + } + + &-inner { + display: flex; + align-items: center; + justify-content: center; + + &--tag { + width: 100%; + text-align: center; + padding: 0 16px; + line-height: @tab-item-tag-height; + border-radius: calc(@tab-item-tag-height / 2); + background-color: @tab-item-tag-bg; + } + + &--active&--tag { + background-color: @tab-item-tag-active-bg; + } + } + + &--tag:not(&--evenly) { + padding: 0 4px; + + &:first-child { + margin-left: 8px; + } + + &:last-child { + padding-right: 12px; + } + } + + &--tag { + padding: 0 8px; + } + + &--card { + &.@{item}--active { + background-color: @bg-color-container; + border-radius: 9px 9px 0 0; + + &:first-child { + border-top-left-radius: 0; + } + + &:last-child { + border-top-right-radius: 0; + } + } + + &.@{item}--pre { + border-bottom-right-radius: 9px; + } + } + + &-prefix, + &-suffix { + position: absolute; + bottom: 0; + width: 18px; + height: 18px; + background: #fff; + + &::after { + content: ""; + display: block; + width: 100%; + height: 100%; + background-color: @bg-color-secondarycontainer; + } + } + + &-prefix { + right: 0; + + &::after { + border-bottom-right-radius: 9px; + } + } + + &-suffix { + left: 0; + + &::after { + border-bottom-left-radius: 9px; + } + } + } + + &__icon { + font-size: @tab-icon-size; + margin-right: 2px; + } + + &__content { + overflow: hidden; + } + + &__nav { + position: relative; + user-select: none; + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + &__track { + position: absolute; + font-weight: 600; + z-index: 1; + transition-duration: .3s; + background-color: @tab-track-color; + + &--top, + &--bottom { + left: 0; + bottom: .5px; + width: @tab-track-width; + height: @tab-track-thickness; + border-radius: @tab-track-radius; + } + } + + &__scroll { + &--top, + &--bottom { + height: @tab-item-height; + position: relative; + } + + &--top { + .border(bottom, @tab-border-color); + } + } + + &__content-inner { + display: block; + } + + &--top, + &--bottom { + flex-wrap: wrap; + + .@{prefix}-tabs__content { + width: 100%; + + &--animated .@{prefix}-tabs__content-inner { + position: relative; + width: 100%; + height: 100%; + display: flex; + will-change: left; + transition-property: transform; + } + } + } + + &--bottom { + flex-direction: column-reverse; + } +} diff --git a/style/mobile/components/tabs/v2/_var.less b/style/mobile/components/tabs/v2/_var.less new file mode 100644 index 0000000000..7c1bb79ca7 --- /dev/null +++ b/style/mobile/components/tabs/v2/_var.less @@ -0,0 +1,27 @@ +@tabs: ~"@{prefix}-tabs"; +@item: ~"@{tabs}__item"; + +@tab-font-size: var(--tab-font-size, 14px); +@tab-nav-bg-color: var(--td-tab-nav-bg-color, @bg-color-container); + +@tab-item-height: var(--td-tab-item-height, 48px); +@tab-item-vertical-height: var(--td-tab-item-vertical-height, 54px); +@tab-item-vertical-width: var(--td-tab-item-vertical-width, 104px); + +@tab-item-color: var(--td-tab-item-color, @font-gray-1); +@tab-item-active-color: var(--td-tab-item-active-color, @brand-color); +@tab-item-disabled-color: var(--td-tab-item-disabled-color, @font-gray-4); +@tab-border-color: var(--td-tab-border-color, @component-stroke); + +// track +@tab-track-color: var(--td-tab-track-color, @brand-color); +@tab-track-thickness: var(--td-tab-track-thickness, 3px); +@tab-track-width: var(--td-tab-track-width, 16px); +@tab-track-radius: var(--td-tab-track-radius, 4px); + +// theme = tag +@tab-item-tag-height: var(--td-tab-item-tag-height, 32px); +@tab-item-tag-bg: var(--td-tab-item-tag-bg, @bg-color-secondarycontainer); +@tab-item-tag-active-bg: var(--td-tab-item-tag-active-bg, @brand-color-light); + +@tab-icon-size: var(--td-tab-icon-size, 16px); diff --git a/style/mobile/components/tag/v2/_index.less b/style/mobile/components/tag/v2/_index.less new file mode 100644 index 0000000000..2e844b14c1 --- /dev/null +++ b/style/mobile/components/tag/v2/_index.less @@ -0,0 +1,162 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.genVariant(@variant) { + @themes: default, primary, success, warning, danger; + each(@themes, { + @theme-color: "tag-@{value}-color"; + @theme-light-color: "tag-@{value}-light-color"; + + &.@{prefix}-tag--@{value} { + color: if(@variant = dark, @font-white-1, @@theme-color); + border-color: if(@variant = light, @@theme-light-color, @@theme-color); + background-color: if(@variant = dark, @@theme-color, @@theme-light-color); + } + }); +} + +.@{prefix}-tag { + display: inline-flex; + align-items: center; + border: 1px solid transparent; + box-sizing: border-box; + border-radius: @tag-square-border-radius; + font-size: @tag-medium-font-size; + user-select: none; + vertical-align: middle; + + &__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__icon, + &__icon-close { + display: flex; + align-items: center; + } + + &__icon-close { + color: @tag-close-icon-color; + } + + &__icon:not(:empty) + &__text:not(:empty), + &__text:not(:empty) + &__icon-close:not(:empty) { + margin-left: 4px; + } + + &.@{prefix}-tag { + &--small { + height: @tag-small-height; + line-height: @tag-small-height; + padding: 0 @tag-small-padding; + font-size: @tag-small-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-small-icon-size; + } + + .@{prefix}-tag__icon:not(:empty) + .@{prefix}-tag__text:not(:empty), + .@{prefix}-tag__text:not(:empty) + .@{prefix}-tag__icon-close:not(:empty) { + margin-left: 2px; + } + } + + &--medium { + height: @tag-medium-height; + line-height: @tag-medium-height; + padding: 0 @tag-medium-padding; + font-size: @tag-medium-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-medium-icon-size; + } + } + + &--large { + height: @tag-large-height; + line-height: @tag-large-height; + padding: 0 @tag-large-padding; + font-size: @tag-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-large-icon-size; + } + } + + &--extra-large { + height: @tag-extra-large-height; + line-height: @tag-extra-large-height; + padding: 0 @tag-extra-large-padding; + font-size: @tag-extra-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-extra-large-icon-size; + } + } + } + + &.@{prefix}-tag { + &--square { + border-radius: @tag-square-border-radius; + } + + &--round { + border-radius: @tag-round-border-radius; + } + + &--mark { + border-radius: 0 @tag-mark-border-radius @tag-mark-border-radius 0; + } + } + + &--dark { + .genVariant(dark); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--outline { + .genVariant(outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + each(@themes, { + &.@{prefix}-tag--@{value} { + background-color: @tag-outline-bg-color; + } + }); + } + + &--light { + .genVariant(light); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--light-outline { + .genVariant(light-outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + border-color: @component-border; + } + } + + &.@{prefix}-tag--closable { + &.@{prefix}-tag--disabled { + cursor: not-allowed; + color: @tag-disabled-color; + background-color: @tag-disabled-background-color; + border-color: @tag-disabled-border-color; + } + } +} diff --git a/style/mobile/components/tag/v2/_var.less b/style/mobile/components/tag/v2/_var.less new file mode 100644 index 0000000000..c0c0b887e4 --- /dev/null +++ b/style/mobile/components/tag/v2/_var.less @@ -0,0 +1,47 @@ +// themes +@tag-default-color: var(--td-tag-default-color, @bg-color-component); +@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer); +@tag-primary-color: var(--td-tag-primary-color, @brand-color); +@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light); +@tag-success-color: var(--td-tag-success-color, @success-color); +@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1); +@tag-warning-color: var(--td-tag-warning-color, @warning-color); +@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1); +@tag-danger-color: var(--td-tag-danger-color, @error-color); +@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1); + +// variant +@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); +@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); + +// status +@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); +@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); + +// size +@tag-small-padding: var(--td-tag-small-padding, 6px - 1px); +@tag-medium-padding: var(--td-tag-medium-padding, 8px - 1px); +@tag-large-padding: var(--td-tag-large-padding, 8px - 1px); +@tag-extra-large-padding: var(--td-tag-extra-large-padding, 16px - 1px); + +@tag-small-font-size: var(--td-tag-small-font-size, @font-size); +@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s); +@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base); +@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base); + +@tag-small-icon-size: var(--td-tag-small-icon-size, 12px); +@tag-medium-icon-size: var(--td-tag-medium-icon-size, 14px); +@tag-large-icon-size: var(--td-tag-large-icon-size, 16px); +@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 16px); + +@tag-small-height: var(--td-tag-small-height, 20px); +@tag-medium-height: var(--td-tag-medium-height, 24px); +@tag-large-height: var(--td-tag-large-height, 28px); +@tag-extra-large-height: var(--td-tag-extra-large-height, 40px); + +@tag-square-border-radius: var(--td-tag-square-border-radius, 4px); +@tag-round-border-radius: var(--td-tag-round-border-radius, 999px); +@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius); + +@tag-close-icon-color: var(--td-tag-close-icon-color, @font-gray-3); diff --git a/style/mobile/components/textarea/v2/_index.less b/style/mobile/components/textarea/v2/_index.less new file mode 100644 index 0000000000..da3396cdfe --- /dev/null +++ b/style/mobile/components/textarea/v2/_index.less @@ -0,0 +1,70 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-textarea { + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: @textarea-vertical-padding @textarea-horizontal-padding; + background-color: @textarea-background-color; + + &__label:not(:empty) { + font-size: @textarea-label-font-size; + color: @textarea-label-color; + flex-shrink: 0; + line-height: @textarea-label-line-height; + padding-bottom: @textarea-label-padding-bottom; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__wrapper { + display: flex; + flex-direction: column; + width: 100%; + flex: 1 1 auto; + overflow: hidden; + + &-inner { + flex: 1 1 auto; + box-sizing: border-box; + width: inherit; + min-width: 0; + height: 100%; + min-height: 20px; + margin: 0; + padding: 0; + text-align: left; + background-color: transparent; + border: 0; + resize: none; + font-size: @textarea-text-font-size; + color: @textarea-text-color; + line-height: @textarea-text-line-height; + } + } + + &__placeholder { + color: @textarea-placeholder-color; + font-size: @textarea-placeholder-font-size; + } + + &__indicator:not(:empty) { + color: @textarea-indicator-text-color; + font-size: @textarea-indicator-text-font-size; + text-align: @textarea-indicator-text-align; + line-height: @textarea-indicator-text-line-height; + padding-top: @textarea-indicator-text-padding-top; + } + + &--border { + border-radius: @textarea-border-radius; + border: @textarea-border-width solid @textarea-border-color; + } + + .@{prefix}-is-disabled { + color: @textarea-disabled-text-color; + } +} diff --git a/style/mobile/components/textarea/v2/_var.less b/style/mobile/components/textarea/v2/_var.less new file mode 100644 index 0000000000..c799aa44d1 --- /dev/null +++ b/style/mobile/components/textarea/v2/_var.less @@ -0,0 +1,30 @@ +@textarea-vertical-padding: 16px; // 文本框垂直方向间距 +@textarea-horizontal-padding: 16px; // 文本框水平方向间距 +@textarea-text-line-height: 24px; // 输入框文本行高 +@textarea-label-line-height: 22px; // 标签文本行高 +@textarea-label-padding-bottom: @spacer; +@textarea-indicator-text-line-height: 20px; // 计数器文本行高 +@textarea-indicator-text-padding-top: @spacer; // 计数器文本顶部间距 +@textarea-indicator-text-align: right; // 计数器文本对齐方式 +@textarea-border-width: 1px; // 文本框边框大小 +@textarea-indicator-text-font-size: @spacer-1; // 计数器文本大小 +@textarea-label-font-size: @font-size-base; // 标签文本大小 +@textarea-text-font-size: @font-size-m; // 输入框文本大小 +@textarea-placeholder-font-size: @font-size-m; // 占位符文本大小 + +// 文本框背景颜色 +@textarea-background-color: var(--td-textarea-background-color, @bg-color-container); +// 占位符文本颜色 +@textarea-placeholder-color: var(--td-textarea-placeholder-color, @font-gray-3); +// 输入框文本颜色 +@textarea-text-color: var(--td-textarea-text-color, @font-gray-1); +// 标签文本颜色 +@textarea-label-color: var(--td-textarea-label-color, @font-gray-1); +// 计数器文本颜色 +@textarea-indicator-text-color: var(--td-textarea-indicator-text-color, @font-gray-3); +// 文本框圆角大小 +@textarea-border-radius: var(--td-textarea-border-radius, @radius-default); +// 文本框边框颜色 +@textarea-border-color: var(--td-textarea-border-color, rgba(220, 220, 220, 1)); +// 文本框禁用状态时的输入文本颜色 +@textarea-disabled-text-color: var(--td-textarea-disabled-text-color, @font-gray-4); diff --git a/style/mobile/components/toast/v2/_index.less b/style/mobile/components/toast/v2/_index.less new file mode 100644 index 0000000000..ee2f3a1042 --- /dev/null +++ b/style/mobile/components/toast/v2/_index.less @@ -0,0 +1,88 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-toast { + position: fixed; + right: -50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 12001; + opacity: 1; + transition: opacity 300ms ease; + background-color: @toast-bg-color; + border-radius: @toast-radius; + font-size: 24px; + color: @toast-color; + max-width: @toast-max-width; + width: fit-content; + box-sizing: border-box; + + &--column { + padding: 24px; + min-width: 80px; + min-height: 80px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + } + + &--loading&--with-text { + min-width: 102px; + min-height: 102px; + padding-top: 0; + padding-bottom: 0; + } + + &__content { + align-items: center; + line-height: 22px; + + &--row { + display: flex; + text-align: left; + padding: 14px 22px; + } + + &--column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + } + + &__icon { + &--row { + display: flex; + font-size: @toast-row-icon-size; + } + + &--column { + font-size: @toast-column-icon-size; + } + } + + &__text { + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + display: box; + -webkit-box-orient: vertical; + white-space: pre-line; + + &--column:not(:empty):not(:only-child) { + margin-top: 8px; + } + + &--row:not(:empty):not(:only-child) { + margin-left: 8px; + } + } + + &.@{prefix}-fade-enter, + &.@{prefix}-fade-leave-to { + opacity: 0; + } +} diff --git a/style/mobile/components/toast/v2/_var.less b/style/mobile/components/toast/v2/_var.less new file mode 100644 index 0000000000..c7c0b45c92 --- /dev/null +++ b/style/mobile/components/toast/v2/_var.less @@ -0,0 +1,6 @@ +@toast-color: var(--td-toast-color, @font-white-1); +@toast-bg-color: var(--td-toast-bg-color, @font-gray-2); +@toast-max-width: var(--td-toast-max-width, 187px); +@toast-radius: var(--td-toast-radius, 4px); +@toast-row-icon-size: var(--td-toast-row-icon-size, 24px); +@toast-column-icon-size: var(--td-toast-column-icon-size, 32px); diff --git a/style/mobile/components/tree-select/_index.less b/style/mobile/components/tree-select/_index.less new file mode 100644 index 0000000000..c2ddfdb47a --- /dev/null +++ b/style/mobile/components/tree-select/_index.less @@ -0,0 +1,43 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-tree-select { + display: flex; + background-color: @tree-bg-color; + + &__column { + width: @tree-colum-width; + + &--left { + background: @tree-root-bg-color; + } + + &--right { + flex: 1; + } + + ::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + color: transparent; + } + } + + &__item { + height: @tree-item-height; + line-height: @tree-item-height; + font-size: @tree-item-font-size; + padding-left: 16px; + + &--active { + font-weight: 600; + color: @tree-item-active-color; + } + } + + &-column { + width: 100%; + } +} diff --git a/style/mobile/components/tree-select/_var.less b/style/mobile/components/tree-select/_var.less new file mode 100644 index 0000000000..a9ca4c3481 --- /dev/null +++ b/style/mobile/components/tree-select/_var.less @@ -0,0 +1,6 @@ +@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-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); diff --git a/style/mobile/components/upload/v2/_index.less b/style/mobile/components/upload/v2/_index.less new file mode 100644 index 0000000000..be24211e97 --- /dev/null +++ b/style/mobile/components/upload/v2/_index.less @@ -0,0 +1,95 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-upload { + &__grid { + &-content { + padding: 0; + } + + &-file { + position: relative; + } + } + + &__add-icon { + width: 100%; + height: 100%; + display: none; + align-items: center; + justify-content: center; + font-size: @upload-add-icon-font-size; + background-color: @upload-add-bg-color; + color: @upload-add-color; + border-radius: @upload-radius; + + &:only-child { + display: flex; + } + } + + &__thumbnail { + width: 100%; + height: 100%; + max-height: 100%; + overflow: hidden; + } + + &__wrapper { + position: relative; + border-radius: @upload-radius; + overflow: hidden; + } + + &__close-btn { + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border-top-right-radius: @upload-radius; + border-bottom-left-radius: @upload-radius; + background-color: @font-gray-3; + } + + &__progress { + &-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: @font-gray-3; + display: flex; + flex-direction: column; + align-items: center; + border-radius: @upload-radius; + color: @font-white-1; + padding: 16px 0; + } + + &-text { + font-size: 12px; + line-height: 20px; + margin-top: 4px; + } + + &-loading { + animation: spin infinite linear .6s; + } + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/style/mobile/components/upload/v2/_var.less b/style/mobile/components/upload/v2/_var.less new file mode 100644 index 0000000000..4ca48bafbb --- /dev/null +++ b/style/mobile/components/upload/v2/_var.less @@ -0,0 +1,4 @@ +@upload-add-color: var(--td-upload-add-color, @font-gray-3); +@upload-add-bg-color: var(--td-upload-add-bg-color, @bg-color-secondarycontainer); +@upload-radius: var(--td-upload-radius, @radius-default); +@upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 28px); From fe9e95bf2b9de27f50ce47619480c84da15c698c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Thu, 16 Mar 2023 11:57:54 +0800 Subject: [PATCH 214/312] =?UTF-8?q?feat(locale):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E4=BF=84=E8=AF=AD=E3=80=81=E6=84=8F=E5=A4=A7=E5=88=A9=E8=AF=AD?= =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E8=AF=AD=E8=A8=80=E6=94=AF=E6=8C=81?= =?UTF-8?q?=20(#1202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(loacle): 新增俄语(俄罗斯)语言支持文件 * feat(loacle): 新增意大利语(意大利)语言支持文件 * fix: lint use singlequote --- js/global-config/locale/it-IT.ts | 227 +++++++++++++++++++++++++++++++ js/global-config/locale/ru_RU.ts | 226 ++++++++++++++++++++++++++++++ 2 files changed, 453 insertions(+) create mode 100644 js/global-config/locale/it-IT.ts create mode 100644 js/global-config/locale/ru_RU.ts diff --git a/js/global-config/locale/it-IT.ts b/js/global-config/locale/it-IT.ts new file mode 100644 index 0000000000..08b009116c --- /dev/null +++ b/js/global-config/locale/it-IT.ts @@ -0,0 +1,227 @@ +/* eslint-disable no-template-curly-in-string */ +// 意大利语-意大利 Italian +import 'dayjs/locale/it'; + +export default { + pagination: { + itemsPerPage: '{size} articoli/pagina', + jumpTo: 'Vai a', + page: 'pagina', + total: 'totale {total} elementi dati', + }, + cascader: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso', + placeholder: 'Seleziona', + }, + calendar: { + yearSelection: '{year} anno', + monthSelection: '{month} mese', + yearRadio: 'anno', + monthRadio: 'mese', + hideWeekend: 'Nascondi weekend', + showWeekend: 'Mostra weekend', + today: 'Oggi', + thisMonth: 'Questo mese', + week: 'Lun,Mar,Mer,Gio,Ven,Sab,Dom', + cellMonth: 'Gen,Feb,Mar,Apr,Mag,Giu,Lug,Ago,Set,Ott,Nov,Dic', + }, + transfer: { + title: '{checked} / {total} elementi', + empty: 'Nessun dato', + placeholder: 'Inserisci la parola chiave per la ricerca', + }, + timePicker: { + dayjsLocale: 'it', + now: 'Ora', + confirm: 'Conferma', + anteMeridiem: 'AM', + postMeridiem: 'PM', + placeholder: 'Seleziona ora', + }, + dialog: { + confirm: 'OK', + cancel: 'Annulla', + }, + drawer: { + confirm: 'OK', + cancel: 'Annulla', + }, + popconfirm: { + confirm: { + content: 'OK', + }, + cancel: { + content: 'Annulla', + }, + }, + table: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso, attendere', + loadingMoreText: 'Clicca per caricare di più', + filterInputPlaceholder: 'Inserisci il contenuto (nessun valore predefinito)', + sortAscendingOperationText: 'Clicca per ordinare in modo crescente', + sortCancelOperationText: "Clicca per annullare l'ordinamento", + sortDescendingOperationText: 'Clicca per ordinare in modo decrescente', + clearFilterResultButtonText: 'Pulisci il filtro', + columnConfigButtonText: 'Configurazione delle colonne', + columnConfigTitleText: 'Configurazione delle colonne della tabella', + columnConfigDescriptionText: 'Seleziona le colonne dei dati da visualizzare nella tabella', + confirmText: 'Conferma', + cancelText: 'Annulla', + resetText: 'Ripristina', + selectAllText: 'Seleziona tutto', + searchResultText: 'Ricerca "{result}", trovati {count} risultati', + }, + select: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso', + placeholder: 'Seleziona', + }, + tree: { + empty: 'Nessun dato', + }, + treeSelect: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso', + placeholder: 'Seleziona', + }, + datePicker: { + dayjsLocale: 'it', + placeholder: { + date: 'Seleziona la data', + month: 'Seleziona il mese', + year: "Seleziona l'anno", + }, + weekdays: ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'], + months: [ + 'Gen', + 'Feb', + 'Mar', + 'Apr', + 'Mag', + 'Giu', + 'Lug', + 'Ago', + 'Set', + 'Ott', + 'Nov', + 'Dic', + ], + quarters: ['Primo trimestre', 'Secondo trimestre', 'Terzo trimestre', 'Quarto trimestre'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'DD-MM-YYYY', + dayAriaLabel: 'Giorno', + weekAbbreviation: 'Sett.', + yearAriaLabel: 'Anno', + monthAriaLabel: 'Mese', + confirm: 'Conferma', + selectTime: 'Seleziona ora', + selectDate: 'Seleziona data', + nextYear: 'Anno successivo', + preYear: 'Anno precedente', + nextMonth: 'Mese successivo', + preMonth: 'Mese precedente', + preDecade: 'Decennio precedente', + nextDecade: 'Decennio successivo', + now: 'Ora', + }, + upload: { + sizeLimitMessage: 'La dimensione del file non può superare {sizeLimit}', + cancelUploadText: 'Annulla caricamento', + triggerUploadText: { + fileInput: 'Seleziona file', + image: 'Clicca per caricare immagine', + normal: 'Clicca per caricare', + reupload: 'Seleziona di nuovo', + continueUpload: 'Continua a selezionare', + delete: 'Elimina', + uploading: 'Caricamento in corso', + }, + dragger: { + dragDropText: 'Rilascia il mouse', + draggingText: 'Trascina in questa area', + clickAndDragText: + 'Clicca su "Seleziona file" sopra o trascina i file in questa area', + }, + file: { + fileNameText: 'Nome del file', + fileSizeText: 'Dimensione del file', + fileStatusText: 'Stato', + fileOperationText: 'Operazione', + fileOperationDateText: 'Data di caricamento', + }, + progress: { + uploadingText: 'Caricamento in corso', + waitingText: 'In attesa di caricamento', + failText: 'Caricamento fallito', + successText: 'Caricamento riuscito', + }, + }, + form: { + errorMessage: { + date: 'Inserisci la ${name} corretta', + url: 'Inserisci la ${name} corretta', + required: '${name} obbligatorio', + max: 'La lunghezza dei caratteri di ${name} non può superare i ${validate} caratteri', + min: 'La lunghezza dei caratteri di ${name} non può essere inferiore a ${validate} caratteri', + len: 'La lunghezza dei caratteri di ${name} deve essere ${validate}', + enum: '${name} può essere solo ${validate}, ecc.', + idcard: 'Inserisci la ${name} corretta', + telnumber: 'Inserisci la ${name} corretta', + pattern: 'Inserisci la ${name} corretta', + validator: '${name} non conforme ai requisiti', + boolean: 'Il tipo di dati di ${name} deve essere booleano', + number: '${name} deve essere un numero', + }, + }, + input: { + placeholder: 'Inserisci', + }, + list: { + loadingText: 'Caricamento in corso, attendere prego', + loadingMoreText: 'Clicca per caricare di più', + }, + alert: { + expandText: 'Espandi per maggiori dettagli', + collapseText: 'Riduci', + }, + anchor: { + copySuccessText: 'Link copiato con successo', + copyText: 'Copia link', + }, + colorPicker: { + swatchColorTitle: 'Colori predefiniti dal sistema', + recentColorTitle: 'Colori usati di recente', + clearConfirmText: 'Sei sicuro di voler cancellare i colori usati di recente?', + }, + guide: { + finishButtonProps: { + content: 'Finito', + theme: 'primario', + }, + nextButtonProps: { + content: 'Prossimo', + theme: 'primario', + }, + skipButtonProps: { + content: 'Salta', + theme: 'predefinito', + }, + prevButtonProps: { + content: 'Precedente', + theme: 'predefinito', + }, + }, + image: { + errorText: "L'immagine non può essere visualizzata", + loadingText: 'Caricamento immagine in corso', + }, + imageViewer: { + errorText: 'Caricamento immagine fallito, puoi provare a ricaricare', + mirrorTipText: 'Specchio', + rotateTipText: 'Ruota', + originalSizeTipText: 'Dimensione originale', + }, +} as const; diff --git a/js/global-config/locale/ru_RU.ts b/js/global-config/locale/ru_RU.ts new file mode 100644 index 0000000000..44f05d8006 --- /dev/null +++ b/js/global-config/locale/ru_RU.ts @@ -0,0 +1,226 @@ +/* eslint-disable no-template-curly-in-string */ +// 俄语-俄罗斯 Russian +import 'dayjs/locale/ru'; + +export default { + pagination: { + itemsPerPage: '{size} шт./стр.', + jumpTo: 'Перейти к', + page: 'стр.', + total: 'Всего {total} элементов данных', + }, + cascader: { + empty: 'Нет данных', + loadingText: 'Загрузка', + placeholder: 'Выберите', + }, + calendar: { + yearSelection: '{year} год', + monthSelection: '{month} месяц', + yearRadio: 'Год', + monthRadio: 'Месяц', + hideWeekend: 'Скрыть выходные', + showWeekend: 'Показать выходные', + today: 'Сегодня', + thisMonth: 'Этот месяц', + week: 'Пн,Вт,Ср,Чт,Пт,Сб,Вс', + cellMonth: '1 мес.,2 мес.,3 мес.,4 мес.,5 мес.,6 мес.,7 мес.,8 мес.,9 мес.,10 мес.,11 мес.,12 мес.', + }, + transfer: { + title: '{checked} / {total} шт.', + empty: 'Нет данных', + placeholder: 'Введите ключевое слово для поиска', + }, + timePicker: { + dayjsLocale: 'zh-cn', + now: 'Сейчас', + confirm: 'Ок', + anteMeridiem: 'До полудня', + postMeridiem: 'После полудня', + placeholder: 'Выберите время', + }, + dialog: { + confirm: 'Подтвердить', + cancel: 'Отмена', + }, + drawer: { + confirm: 'Подтвердить', + cancel: 'Отмена', + }, + popconfirm: { + confirm: { + content: 'Подтвердить', + }, + cancel: { + content: 'Отмена', + }, + }, + table: { + empty: 'Нет данных', + loadingText: 'Загрузка, пожалуйста, подождите', + loadingMoreText: 'Нажмите, чтобы загрузить больше', + filterInputPlaceholder: 'Введите содержание (нет значения по умолчанию)', + sortAscendingOperationText: 'Сортировать по возрастанию', + sortCancelOperationText: 'Отменить сортировку', + sortDescendingOperationText: 'Сортировать по убыванию', + clearFilterResultButtonText: 'Очистить фильтр', + columnConfigButtonText: 'Настройка столбцов', + columnConfigTitleText: 'Настройка столбцов таблицы', + columnConfigDescriptionText: 'Пожалуйста, выберите столбцы данных, которые нужно отобразить в таблице', + confirmText: 'Подтвердить', + cancelText: 'Отмена', + resetText: 'Сбросить', + selectAllText: 'Выбрать все', + searchResultText: 'Поиск «{result}», найдено {count} результатов', + }, + select: { + empty: 'Нет данных', + loadingText: 'Загрузка', + placeholder: 'Выберите', + }, + tree: { + empty: 'Нет данных', + }, + treeSelect: { + empty: 'Нет данных', + loadingText: 'Загрузка', + placeholder: 'Выберите', + }, + datePicker: { + dayjsLocale: 'ru', + placeholder: { + date: 'Выберите дату', + month: 'Выберите месяц', + year: 'Выберите год', + }, + weekdays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'], + months: [ + 'Январь', + 'Февраль', + 'Март', + 'Апрель', + 'Май', + 'Июнь', + 'Июль', + 'Август', + 'Сентябрь', + 'Октябрь', + 'Ноябрь', + 'Декабрь', + ], + quarters: ['1-й квартал', '2-й квартал', '3-й квартал', '4-й квартал'], + rangeSeparator: '-', + direction: 'ltr', + format: 'DD.MM.YYYY', + dayAriaLabel: 'День', + weekAbbreviation: 'Неделя', + yearAriaLabel: 'Год', + monthAriaLabel: 'Месяц', + confirm: 'Подтвердить', + selectTime: 'Выберите время', + selectDate: 'Выберите дату', + nextYear: 'Следующий год', + preYear: 'Предыдущий год', + nextMonth: 'Следующий месяц', + preMonth: 'Предыдущий месяц', + preDecade: 'Предыдущее десятилетие', + nextDecade: 'Следующее десятилетие', + now: 'Сейчас', + }, + upload: { + sizeLimitMessage: 'Размер файла не должен превышать {sizeLimit}', + cancelUploadText: 'Отменить загрузку', + triggerUploadText: { + fileInput: 'Выбрать файл', + image: 'Нажмите, чтобы загрузить изображение', + normal: 'Нажмите, чтобы загрузить', + reupload: 'Выбрать заново', + continueUpload: 'Продолжить выбор', + delete: 'Удалить', + uploading: 'Загрузка', + }, + dragger: { + dragDropText: 'Отпустите мышь', + draggingText: 'Перетащите в эту область', + clickAndDragText: 'Нажмите на кнопку «Выбрать файл» выше или перетащите файл в эту область', + }, + file: { + fileNameText: 'Имя файла', + fileSizeText: 'Размер файла', + fileStatusText: 'Статус', + fileOperationText: 'Операция', + fileOperationDateText: 'Дата загрузки', + }, + progress: { + uploadingText: 'Загрузка', + waitingText: 'Ожидание загрузки', + failText: 'Загрузка не удалась', + successText: 'Загрузка успешна', + }, + }, + form: { + errorMessage: { + date: 'Введите правильный ${name}', + url: 'Введите правильный ${name}', + required: '${name} обязательно для заполнения', + max: 'Длина символов ${name} не должна превышать ${validate} символов', + min: 'Длина символов ${name} не должна быть меньше ${validate} символов', + len: 'Длина символов ${name} должна быть ${validate}', + enum: '${name} может быть только ${validate} и т.д.', + idcard: 'Введите правильный ${name}', + telnumber: 'Введите правильный ${name}', + pattern: 'Введите правильный ${name}', + validator: '${name} не соответствует требованиям', + boolean: 'Тип данных ${name} должен быть булевым', + number: '${name} должно быть числом', + }, + }, + input: { + placeholder: 'Введите', + }, + list: { + loadingText: 'Загрузка, пожалуйста, подождите', + loadingMoreText: 'Нажмите, чтобы загрузить больше', + }, + alert: { + expandText: 'Развернуть больше', + collapseText: 'Свернуть', + }, + anchor: { + copySuccessText: 'Ссылка скопирована успешно', + copyText: 'Скопировать ссылку', + }, + colorPicker: { + swatchColorTitle: 'Системные предустановленные цвета', + recentColorTitle: 'Недавно использованные цвета', + clearConfirmText: 'Вы уверены, что хотите очистить недавно использованные цвета?', + }, + guide: { + finishButtonProps: { + content: 'Готово', + theme: 'primary', + }, + nextButtonProps: { + content: 'Следующий шаг', + theme: 'primary', + }, + skipButtonProps: { + content: 'Пропустить', + theme: 'default', + }, + prevButtonProps: { + content: 'Предыдущий шаг', + theme: 'default', + }, + }, + image: { + errorText: 'Изображение не может быть отображено', + loadingText: 'Загрузка изображения', + }, + imageViewer: { + errorText: 'Не удалось загрузить изображение, попробуйте перезагрузить', + mirrorTipText: 'Зеркало', + rotateTipText: 'Поворот', + originalSizeTipText: 'Оригинальный размер', + }, +} as const; From 3c1bf23179f5afd38a5276a55800a4cbd0afe417 Mon Sep 17 00:00:00 2001 From: caixuan29 <96420688+caixuan29@users.noreply.github.com> Date: Thu, 16 Mar 2023 14:10:53 +0800 Subject: [PATCH 215/312] Update PullDownRefresh.md (#1162) From 1f7b498c5702a6257b9f3d73bcd25848aa5919a9 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 16 Mar 2023 14:34:33 +0800 Subject: [PATCH 216/312] docs: update docs for i18n (#1203) --- docs/web/api/config-provider.en-US.md | 15 ++++++++++++++- docs/web/api/config-provider.md | 15 ++++++++++++++- js/global-config/locale/{it-IT.ts => it_IT.ts} | 0 3 files changed, 28 insertions(+), 2 deletions(-) rename js/global-config/locale/{it-IT.ts => it_IT.ts} (100%) diff --git a/docs/web/api/config-provider.en-US.md b/docs/web/api/config-provider.en-US.md index 230478e4fb..2cd7005aab 100644 --- a/docs/web/api/config-provider.en-US.md +++ b/docs/web/api/config-provider.en-US.md @@ -6,7 +6,20 @@ tdDocTabs: [{ tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }] spline: 'explain' --- -### global +### Internationalization + +The supported language TDesign provided: + +Language | File +-- | -- +Chinese (Simplified) | `zh_CN` +Chinese (Traditional) | `zh_TW` +English | `en_US` +Korean | `ko_KR` +Japanese | `ja_JP` +Russian | `ru_RU` +Italian | `it_IT` +Arabic | `ar_KW` {{ global }} diff --git a/docs/web/api/config-provider.md b/docs/web/api/config-provider.md index b8148f4d7f..00c1f55cff 100644 --- a/docs/web/api/config-provider.md +++ b/docs/web/api/config-provider.md @@ -6,7 +6,20 @@ tdDocTabs: [{ tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }] spline: 'explain' --- -### 全局配置 +### 国际化配置 + +TDesign 支持国际化/多语言配置，目前支持的语言包括: + +语言 | 对应文件 +-- | -- +简体中文 | `zh_CN` +繁体中文 | `zh_TW` +英语 | `en_US` +韩语 | `ko_KR` +日语 | `ja_JP` +俄语 | `ru_RU` +意大利语 | `it_IT` +阿拉伯语 | `ar_KW` {{ global }} diff --git a/js/global-config/locale/it-IT.ts b/js/global-config/locale/it_IT.ts similarity index 100% rename from js/global-config/locale/it-IT.ts rename to js/global-config/locale/it_IT.ts From d848bdeb4a296db4a4827923488b18ae95f67d39 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 16 Mar 2023 16:55:10 +0800 Subject: [PATCH 217/312] feat(radio): update the radio style on mobile (#1204) * feat(radio): update the radio style on mobile * fix: resolve lint errors * fix: resolve lint errors * fix: resolve lint errors * fix: update stylelint config * fix: update style * fix: resolve lint errors * docs: update api * fix: using correct token --- .stylelintrc | 3 +- docs/mobile/api_v2/radio.md | 28 ++- style/mobile/base.less | 8 + style/mobile/components/radio/v2/_index.less | 174 +++++++++++++++++++ style/mobile/components/radio/v2/_var.less | 15 ++ style/mobile/index.less | 8 - style/mobile/mixins/_index.less | 6 + 7 files changed, 228 insertions(+), 14 deletions(-) create mode 100644 style/mobile/components/radio/v2/_index.less create mode 100644 style/mobile/components/radio/v2/_var.less diff --git a/.stylelintrc b/.stylelintrc index b04f6ee2e0..3fbeb5629e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -27,7 +27,8 @@ "no-descending-specificity": null, "selector-type-no-unknown": null, "color-function-notation": "legacy", - "value-keyword-case": null + "value-keyword-case": null, + "property-no-unknown": [true, { "checkPrefixed": true }] }, "overrides": [ { "files": ["**/*.less"], "customSyntax": "postcss-less" }, diff --git a/docs/mobile/api_v2/radio.md b/docs/mobile/api_v2/radio.md index 643e9f40be..8e2fc1e4db 100644 --- a/docs/mobile/api_v2/radio.md +++ b/docs/mobile/api_v2/radio.md @@ -6,12 +6,30 @@ isComponent: true toc: false --- -### 基础单选框 - -使用场景：基本文本框 +### 纵向单选框 {{ base }} -### 单选项组 +### 横向单选框 + +{{ horizontal }} + +### 单选框状态 + +{{ status }} + +### 勾选样式 + +{{ icon }} + +### 勾选显示位置 + +{{ placement }} + +### 非通栏单选框 + +{{ card }} + +### 特殊样式 -{{ group }} +{{ custom }} \ No newline at end of file diff --git a/style/mobile/base.less b/style/mobile/base.less index 87949697ac..d0eb387136 100644 --- a/style/mobile/base.less +++ b/style/mobile/base.less @@ -1,3 +1,11 @@ // 变量 @import "./_variables.less"; + +// mixins + +@import "./mixins/_index.less"; + +// 工具类 + +@import "./utilities/_index.less"; diff --git a/style/mobile/components/radio/v2/_index.less b/style/mobile/components/radio/v2/_index.less new file mode 100644 index 0000000000..64f49134e6 --- /dev/null +++ b/style/mobile/components/radio/v2/_index.less @@ -0,0 +1,174 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-radio { + position: relative; + display: inline-flex; + vertical-align: middle; + font-size: @radio-font-size; + background: @radio-bg-color; + + &:focus { + outline: 0; + } + + &--block { + display: flex; + padding: @radio-vertical-padding; + } + + &--right { + flex-direction: row-reverse; + } + + &__icon { + position: relative; + width: @radio-icon-size; + height: @radio-icon-size; + font-size: @radio-icon-size; + color: @radio-icon-color; + overflow: hidden; + + &:empty { + display: none; + } + + &--left { + margin-right: 8px; + } + + &--checked { + color: @radio-icon-checked-color; + } + + &--disabled { + cursor: not-allowed; + color: @radio-icon-disabled-color; + } + + &-circle { + width: 42px; + height: 42px; + border: 3px solid @radio-icon-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @radio-icon-disabled-bg-color; + } + } + + &-dot { + width: 42px; + height: 42px; + border: 3px solid @radio-icon-checked-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + &::after { + content: ""; + display: block; + width: 24px; + height: 24px; + background: @radio-icon-checked-color; + border-radius: 50%; + } + + &--disabled { + border-color: @radio-icon-disabled-color; + + &::after { + background: @radio-icon-disabled-color; + } + } + } + } + + &__image { + line-height: @radio-icon-size; + } + + &-icon__image { + height: @radio-icon-size; + width: @radio-icon-size; + vertical-align: sub; + } + + &__content { + flex: 1; + + &:empty { + display: none; + } + } + + &__title { + .limit-title-row(); + + color: @radio-label-color; + line-height: @radio-label-line-height; + + &--disabled { + cursor: not-allowed; + color: @radio-label-disabled-color; + } + } + + &__description { + .limit-title-row(); + + color: @radio-content-color; + font-size: 14px; + line-height: @radio-content-line-height; + + &--disabled { + cursor: not-allowed; + color: @radio-content-disabled-color; + } + + &:empty { + display: none; + } + } + + &__title + &__description { + margin-top: 4px; + } + + &__border { + position: absolute; + bottom: 0; + height: 1px; + background: @radio-border-color; + left: 48px; + right: 0; + transform: scaleY(.5); + + &--right { + left: 16px; + } + } + + // mobile vue + &__original { + opacity: 0; + width: 0; + height: 0; + } + + &__icon-wrap { + display: block; + } +} diff --git a/style/mobile/components/radio/v2/_var.less b/style/mobile/components/radio/v2/_var.less new file mode 100644 index 0000000000..d0dd6129ff --- /dev/null +++ b/style/mobile/components/radio/v2/_var.less @@ -0,0 +1,15 @@ +@radio-icon-size: var(--td-radio-icon-size, 24px); +@radio-font-size: var(--td-radio-font-size, 16px); +@radio-label-line-height: var(--td-radio-label-line-height, 24px); +@radio-content-line-height: var(--td-radio-content-line-height, 22px); +@radio-vertical-padding: var(--td-radio-vertical-padding, 16px); +@radio-bg-color: var(--td-radio-bg-color, @bg-color-container); +@radio-border-color: var(--td-radio-border-color, @component-stroke); +@radio-label-color: var(--td-radio-label-color, @font-gray-1); +@radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled); +@radio-content-color: var(--td-radio-content-color, @font-gray-2); +@radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled); +@radio-icon-color: var(--td-radio-icon-color, @component-border); +@radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled); +@radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled); +@radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color); diff --git a/style/mobile/index.less b/style/mobile/index.less index 883e225d82..60dda73b44 100644 --- a/style/mobile/index.less +++ b/style/mobile/index.less @@ -6,14 +6,6 @@ @import "./theme/_index.less"; -// mixins - -@import "./mixins/_index.less"; - -// 工具类 - -@import "./utilities/_index.less"; - // components @import "./components/_index.less"; diff --git a/style/mobile/mixins/_index.less b/style/mobile/mixins/_index.less index a1ec3edc46..a1afe3972f 100644 --- a/style/mobile/mixins/_index.less +++ b/style/mobile/mixins/_index.less @@ -1,3 +1,9 @@ @import "./_clearfix.less"; @import "./_hairline.less"; + +.limit-title-row() { + display: box; + -webkit-box-orient: vertical; + overflow: hidden; +} From 0a709515dd1bdebc42e18f4224c6b99395b01a55 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Fri, 17 Mar 2023 11:34:26 +0800 Subject: [PATCH 218/312] feat(switch): update style for mobile (#1206) * feat(switch): update style for mobile * fix: resolve lint errors --- docs/mobile/api_v2/switch.md | 10 ++- style/mobile/components/switch/v2/_index.less | 66 +++++++++---------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/mobile/api_v2/switch.md b/docs/mobile/api_v2/switch.md index adc38318d6..f2afd3507c 100644 --- a/docs/mobile/api_v2/switch.md +++ b/docs/mobile/api_v2/switch.md @@ -16,8 +16,12 @@ toc: false 使用场景：需要通过描述解释、提示结果时，可用带描述开关 -{{ desc }} +{{ label }} -### 禁用状态 +### 组件状态 -{{ disabled }} +{{ status }} + +### 开关尺寸 + +{{ size }} \ No newline at end of file diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less index f6953a8b51..201368ee26 100644 --- a/style/mobile/components/switch/v2/_index.less +++ b/style/mobile/components/switch/v2/_index.less @@ -5,8 +5,39 @@ .@{prefix}-switch { display: flex; align-items: center; + vertical-align: middle; + width: @switch-width; + height: @switch-height; + border-radius: @switch-radius; + background-color: @switch-unchecked-color; + position: relative; + transition: all .3s ease; overflow: hidden; + &--checked { + background-color: @switch-checked-color; + } + + &--disabled { + background-color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + background-color: @switch-checked-disabled-color; + } + + &--large { + width: @switch-large-width; + height: @switch-large-height; + border-radius: @switch-large-radius; + } + + &--small { + width: @switch-small-width; + height: @switch-small-height; + border-radius: @switch-small-radius; + } + &__label { position: absolute; top: 0; @@ -62,41 +93,6 @@ color: @switch-label-checked-color; } - &__body { - vertical-align: middle; - width: @switch-width; - height: @switch-height; - border-radius: @switch-radius; - background-color: @switch-unchecked-color; - position: relative; - transition: all .3s ease; - overflow: hidden; - - &--checked { - background-color: @switch-checked-color; - } - - &--disabled { - background-color: @switch-unchecked-disabled-color; - } - - &--checked&--disabled { - background-color: @switch-checked-disabled-color; - } - - &--large { - width: @switch-large-width; - height: @switch-large-height; - border-radius: @switch-large-radius; - } - - &--small { - width: @switch-small-width; - height: @switch-small-height; - border-radius: @switch-small-radius; - } - } - &__dot { position: absolute; left: @switch-dot-horizontal-margin; From 091d75a63c9ce4ad597da375061448e2015babf4 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 20 Mar 2023 12:38:37 +0800 Subject: [PATCH 219/312] fix: resolve the file path error (#1208) --- style/mobile/components/empty/_index.less | 2 +- style/mobile/components/footer/_index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/empty/_index.less b/style/mobile/components/empty/_index.less index e8af390fb8..a519540a0a 100644 --- a/style/mobile/components/empty/_index.less +++ b/style/mobile/components/empty/_index.less @@ -1,4 +1,4 @@ -@import "../../../base.less"; +@import "../../base.less"; @import "./_var.less"; diff --git a/style/mobile/components/footer/_index.less b/style/mobile/components/footer/_index.less index 88db393a68..09e39bdd20 100644 --- a/style/mobile/components/footer/_index.less +++ b/style/mobile/components/footer/_index.less @@ -1,4 +1,4 @@ -@import "../../../base.less"; +@import "../../base.less"; @import "./_var.less"; From 11d4cfc53c2e2ef0b05d90325ceeff4e77085961 Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 20 Mar 2023 12:39:21 +0800 Subject: [PATCH 220/312] feat:add color token (#1207) Co-authored-by: kadenzhong --- style/web/_variables.less | 4 ++++ style/web/theme/_dark.less | 4 ++++ style/web/theme/_light.less | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/style/web/_variables.less b/style/web/_variables.less index 5a86d5e768..6bb5cef5c4 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -85,6 +85,7 @@ @brand-color-active: var(--td-brand-color-active); // 点击态 @brand-color-disabled: var(--td-brand-color-disabled); // 禁用态 @brand-color-light: var(--td-brand-color-light); // 浅色的选中态 +@brand-color-light-hover: var(--td-brand-color-light-hover); // 警告色扩展 @warning-color-hover: var(--td-warning-color-hover); @@ -92,6 +93,7 @@ @warning-color-active: var(--td-warning-color-active); @warning-color-disabled: var(--td-warning-color-disabled); @warning-color-light: var(--td-warning-color-light); +@warning-color-light-hover: var(--td-warning-color-light-hover); // 失败/错误色扩展 @error-color-hover: var(--td-error-color-hover); @@ -99,6 +101,7 @@ @error-color-active: var(--td-error-color-active); @error-color-disabled: var(--td-error-color-disabled); @error-color-light: var(--td-error-color-light); +@error-color-light-hover: var(--td-error-color-light-hover); // 成功色扩展 @success-color-hover: var(--td-success-color-hover); @@ -106,6 +109,7 @@ @success-color-active: var(--td-success-color-active); @success-color-disabled: var(--td-success-color-disabled); @success-color-light: var(--td-success-color-light); +@success-color-light-hover: var(--td-success-color-light-hover); // 遮罩 @mask-active: var(--td-mask-active); // 遮罩-弹出 diff --git a/style/web/theme/_dark.less b/style/web/theme/_dark.less index 2ba24dd6aa..a4d7130fe0 100644 --- a/style/web/theme/_dark.less +++ b/style/web/theme/_dark.less @@ -76,6 +76,7 @@ --td-brand-color-active: var(--td-brand-color-9); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); @@ -83,6 +84,7 @@ --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); @@ -90,6 +92,7 @@ --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); @@ -97,6 +100,7 @@ --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出 diff --git a/style/web/theme/_light.less b/style/web/theme/_light.less index 68b9d653f9..2752fc9c74 100644 --- a/style/web/theme/_light.less +++ b/style/web/theme/_light.less @@ -77,6 +77,7 @@ --td-brand-color-active: var(--td-brand-color-8); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); @@ -84,6 +85,7 @@ --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); @@ -91,6 +93,7 @@ --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); @@ -98,6 +101,7 @@ --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出 From 2e6873897b68c9b117d8cdb21ec68836e4a8a288 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 21 Mar 2023 17:32:44 +0800 Subject: [PATCH 221/312] docs(Textarea): update docs (#1209) --- docs/mobile/api_v2/textarea.md | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/docs/mobile/api_v2/textarea.md b/docs/mobile/api_v2/textarea.md index 91c753da90..215f1b4d88 100644 --- a/docs/mobile/api_v2/textarea.md +++ b/docs/mobile/api_v2/textarea.md @@ -1,37 +1,43 @@ --- title: Textarea 多行文本框 description: 用于多行文本信息输入。 -spline: base +spline: form isComponent: true toc: false --- -### 基础多行文本框 +## 代码演示 -使用场景：最常规的文字填写，且需填写的文字字数较少时可以使用 +### 组件类型 + +基础多行文本框 {{ base }} -### 带标题多行文本框 +带标题多行文本框 {{ label }} -### 自动增高多行文本框 +自动增高多行文本框 {{ autosize }} -### 禁用多行文本框 - -{{ status }} - -### 设置最大字符个数 +设置最大字符个数 {{ maxlength }} -### 设置最大字符个数，一个汉字表示两个字符 +设置最大字符个数，一个汉字表示两个字符 {{ maxcharacter }} -### 带事件文本框 +### 组件状态 + +禁用多行文本框 + +{{ disabled }} + +### 自定义组件样式 + +标签外置输入框 -{{ events }} +{{ custom }} \ No newline at end of file From 0431d540ce6b4aefbb86909a8b2337da2e957b86 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 21 Mar 2023 17:47:17 +0800 Subject: [PATCH 222/312] feat(loading): using new style (#1211) * feat(loading): using new style * fix: resolve lint errors --- docs/mobile/api_v2/loading.md | 22 +--- style/mobile/components/loading/_index.less | 123 +++++++------------- style/mobile/components/loading/_var.less | 44 ++----- 3 files changed, 53 insertions(+), 136 deletions(-) diff --git a/docs/mobile/api_v2/loading.md b/docs/mobile/api_v2/loading.md index e0402657d8..2135cb1ba8 100644 --- a/docs/mobile/api_v2/loading.md +++ b/docs/mobile/api_v2/loading.md @@ -6,17 +6,17 @@ isComponent: true toc: false --- -### 类型 +### 组件类型 -#### 纯icon +#### 纯图标 {{ base }} -#### icon加文字横向 +#### 图标加文字横向 {{ horz }} -#### icon加文字竖向 +#### 图标加文字竖向 {{ vert }} @@ -24,20 +24,10 @@ toc: false {{ pure-text }} -#### 页面进度条加载 - -{{ bar }} - -#### 延迟加载 - -{{ delay }} +### 组件尺寸 +{{ size }} ### 加载速度 {{ speed }} -### 规格 - -{{ size }} - - diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index ab4eb4dfb9..9921dc699b 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -4,26 +4,23 @@ @import "../../mixins/_index.less"; -.@{prefix}-loading { +.@{loading} { + display: flex; + align-items: center; position: relative; color: @loading-color; - font-size: @loading-text-size; - .@{prefix}-icon-loading { - font-size: @loading-icon-size; - } + font-size: @loading-size; &--inherit-color { color: inherit; } &--vertical { - display: flex; flex-direction: column; - align-items: center; .@{prefix}-loading__text { margin-left: 0; - margin-top: 6px; + margin-top: 8px; } } @@ -31,31 +28,11 @@ pointer-events: none; } - &.@{prefix}-size-s { - font-size: @loading-text-size-small; - .@{prefix}-icon-loading { - font-size: @loading-icon-size-small; - } - } - - &.@{prefix}-size-l { - font-size: @loading-text-size-large; - .@{prefix}-icon-loading { - font-size: @loading-icon-size-large; - } - } - &__text { color: @loading-text-color; - width: auto; - display: inline-block; - vertical-align: middle; - line-height: @loading-text-line-height; - margin-left: @loading-text-margin-left; - - &--error { - color: rgba(0, 0, 0, 40%); - } + line-height: 20px; + margin-left: 6px; + font-size: @loading-text-font-size; &--only { margin-left: 0; @@ -63,7 +40,7 @@ } &__gradient { - display: inline-flex; + display: flex; justify-content: center; align-items: center; vertical-align: middle; @@ -112,41 +89,27 @@ } } - &__dots { - background-color: @dot-bg-color; - border-radius: @dot-radius; - color: @dot-color; - height: @dot-height; - width: @dotWidth; - position: relative; - left: @dot-left-pos; - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-color, - @dot-x3 0 0 0 @dot-after-color; - animation: t-dot-typing 1.5s infinite linear; - } + &__dot { + width: @loading-dot-size; + height: @loading-dot-size; + border-radius: 50%; + background-color: currentColor; + animation-duration: 1.8s; + animation-name: dotting; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-fill-mode: both; - &__bar { - background: @loading-color; - position: fixed; - z-index: 1031; - top: 0; - left: 0; - width: 100%; - height: 2px; - transition: all 200ms ease 0s; - } + &--paused { + animation-play-state: paused; + } - &__shadow { - display: block; - position: absolute; - right: 0; - width: 100px; - height: 100%; - box-shadow: 0 0 10px #29d, 0 0 5px #29d; - opacity: 1; - transform: rotate(3deg) translate(0, -4px); + &s { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + animation: none; + } } } @@ -169,32 +132,24 @@ } } -@keyframes t-dot-typing { +@keyframes dotting { 0% { - box-shadow: - @dot-x1 0 0 0 @dot-color, - @dot-x2 0 0 0 @dot-before-color, - @dot-x3 0 0 0 @dot-after-color; + opacity: .15; + } + + 1% { + opacity: .8; } - 33.3333% { - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-color, - @dot-x3 0 0 0 @dot-after-color; + 33% { + opacity: .8; } - 66.6667% { - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-after-color, - @dot-x3 0 0 0 @dot-color; + 34% { + opacity: .15; } 100% { - box-shadow: - @dot-x1 0 0 0 @dot-color, - @dot-x2 0 0 0 @dot-before-color, - @dot-x3 0 0 0 @dot-after-color; + opacity: .15; } } diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index c5ecf765fd..1ea28a7e0d 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -1,36 +1,8 @@ -//颜色 -@loading-color: @brand-color-8; - -// 字体 -@loading-text-line-height: @text-line-height; -@loading-text-color: @text-color-primary; - -@loading-text-size: @font-size-base; -@loading-text-size-small: @font-size-s; -@loading-text-size-large: @font-size-l; - -// icon -@loading-icon-size: 28px; -@loading-icon-size-small: 24px; -@loading-icon-size-large: 32px; - -// 间距 -@loading-text-margin-left: 5px; - -// dots -@dotWidth: 8px; -@dot-height: 8px; -@dot-radius: calc(@dotWidth / 2); - -@dot-color: @brand-color-8; -@dot-bg-color: @dot-color; -@dot-before-color: rgba(@brand-color-8, .15); -@dot-after-color: rgba(@brand-color-8, .15); - -@dot-spacing: calc(@dotWidth * 2); - -@dot-left-pos: -9999px; - -@dot-x1: calc(0px - @dot-left-pos - @dot-spacing); -@dot-x2: -@dot-left-pos; -@dot-x3: calc(0px - @dot-left-pos + @dot-spacing); +@loading: ~"@{prefix}-loading"; + +@loading-color: var(--td-loading-color, @brand-color); +@loading-size: var(--td-loading-size, 20px); +@loading-text-color: var(--td-loading-text-color, @text-color-primary); +@loading-text-font-size: var(--td-loading-text-font-size, 12px); +@loading-text-line-height: var(--td-loading-text-line-height, 20px); +@loading-dot-size: var(--td-loading-dot-size, 8px); From 5191d5240ff96aed9422a3b468cbbc179f157554 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 21 Mar 2023 19:32:32 +0800 Subject: [PATCH 223/312] fix(tree): fix empty node (#1213) --- js/tree/tree-node.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index ece288a342..1d999946c8 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -844,7 +844,7 @@ export class TreeNode { } prevKeys.forEach((value) => { const node = tree.getNode(value); - node.update(); + node?.update(); }); map.set(this.value, true); } else { From a2a5496ea3a2769b9d33b64b063b85fa6bab5b18 Mon Sep 17 00:00:00 2001 From: mickey Date: Wed, 22 Mar 2023 09:33:08 +0800 Subject: [PATCH 224/312] feat: update backTop style and doc (#1214) --- docs/web/api/back-top.md | 18 +++++++++++------- style/web/components/back-top/_index.less | 8 +++++++- style/web/components/back-top/_var.less | 12 ++++++------ 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md index 239d87c899..5f7ed5af65 100644 --- a/docs/web/api/back-top.md +++ b/docs/web/api/back-top.md @@ -2,30 +2,34 @@ title: BackTop 返回顶部 description: 用于返回页面顶部 isComponent: true -usage: { title: '', description: '' } +usage: { title: 'BackTop 返回顶部', description: '用于返回页面顶部' } spline: data --- -### 基础使用 +### 基础型组件（默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms） -{{ base }} +{{ baseList }} -### 不同尺寸 +### 紧凑型组件 (滚动动画时长500ms) + +{{ baseListSmall }} + +### 组件尺寸 提供标准（默认）、小两种尺寸。 {{ size }} -### 不同形状 +### 组件形状 提供圆形和方形两种不同形状。 {{ shape }} -### 不同主题 +### 组件主题 {{ theme }} ### 自定义内容 -{{ custom }} +{{ custom }} \ No newline at end of file diff --git a/style/web/components/back-top/_index.less b/style/web/components/back-top/_index.less index ed795f0668..8f219a0a48 100644 --- a/style/web/components/back-top/_index.less +++ b/style/web/components/back-top/_index.less @@ -42,6 +42,12 @@ &__icon { font-size: @font-headline-small; } + + &.t-size-m { + .@{prefix-block}__icon { + margin-top: 2px; + } + } } .@{prefix-block}--show { @@ -62,7 +68,7 @@ each(@themes, { @sizes: s, m; each(@sizes, { - .@{prefix}-size-@{value} { + .@{prefix-block}.@{prefix}-size-@{value} { .back-top-size(@@value) } }); diff --git a/style/web/components/back-top/_var.less b/style/web/components/back-top/_var.less index ddc1b16e5b..80a0939854 100644 --- a/style/web/components/back-top/_var.less +++ b/style/web/components/back-top/_var.less @@ -23,20 +23,20 @@ @back-top-height-medium: @comp-size-xxxxl; @back-top-text-color-light: @text-color-secondary; -@back-top-text-color-primary: @font-white-1; -@back-top-text-color-dark: @font-white-1; +@back-top-text-color-primary: @text-color-anti; +@back-top-text-color-dark: @text-color-anti; @back-top-icon-color-light: @text-color-primary; -@back-top-icon-color-primary: @font-white-1; -@back-top-icon-color-dark: @font-white-1; +@back-top-icon-color-primary: @text-color-anti; +@back-top-icon-color-dark: @text-color-anti; @back-top-bg-color-light: @bg-color-container; @back-top-bg-color-primary: @brand-color; -@back-top-bg-color-dark: @gray-color-14; +@back-top-bg-color-dark: rgba(0, 0, 0, .9); @back-top-bg-color-light-hover: @bg-color-container-hover; @back-top-bg-color-primary-hover: @brand-color-hover; -@back-top-bg-color-dark-hover: @gray-color-9; +@back-top-bg-color-dark-hover: rgba(0, 0, 0, .6); @back-top-border-color-light: @component-border; @back-top-border-color-primary: @back-top-bg-color-primary; From 111eed27f8297df6b79a6b5f5666e67ad2e0d26e Mon Sep 17 00:00:00 2001 From: Wang Date: Wed, 22 Mar 2023 14:45:05 +0800 Subject: [PATCH 225/312] feat(checkbox): update new style and doc (#1212) * feat(checkbox): update new style and doc * fix: add stylelint for webkit-box --- docs/mobile/api_v2/checkbox.md | 40 ++++++++++++------- .../mobile/components/checkbox/v2/_index.less | 7 +++- .../mobile/components/progress/v2/_index.less | 3 +- style/mobile/components/toast/v2/_index.less | 3 +- style/mobile/mixins/_index.less | 3 +- 5 files changed, 38 insertions(+), 18 deletions(-) diff --git a/docs/mobile/api_v2/checkbox.md b/docs/mobile/api_v2/checkbox.md index e3c5df83b9..f653663f20 100644 --- a/docs/mobile/api_v2/checkbox.md +++ b/docs/mobile/api_v2/checkbox.md @@ -1,35 +1,47 @@ --- -title: Checkbox 复选框 +title: Checkbox 多选框 description: 用于预设的一组选项中执行多项选择，并呈现选择结果。 spline: base isComponent: true toc: false --- -### 基础多选框 +### 组件类型 + +纵向多选框 {{ base }} -### 右侧多选框 +横向多选框 -{{ right }} +{{ horizontal }} + +带全选多选框 + +{{ all }} -### 带全选多选框 +### 组件状态 -{{ group }} +多选框状态 -### 限制最多可选数量 +{{ status }} -{{ max }} +### 组件样式 -### 状态 +勾选样式 + +{{ type }} + +勾选显示位置 + +{{ right }} -{{ disable }} +非通栏多选样式 -### 特殊类型 +{{ card }} -{{ icon }} +### 组件规格 -### 规格 +多选框尺寸规格 -{{ size }} +{{ special }} \ No newline at end of file diff --git a/style/mobile/components/checkbox/v2/_index.less b/style/mobile/components/checkbox/v2/_index.less index 6be07cede6..613ae62ead 100644 --- a/style/mobile/components/checkbox/v2/_index.less +++ b/style/mobile/components/checkbox/v2/_index.less @@ -23,7 +23,8 @@ } .limit-title-row { - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } @@ -34,6 +35,10 @@ transform: translateY(-50%); } + &__icon-wrapper { + display: block; + } + &__icon-left { margin-right: 20px; width: 20px; diff --git a/style/mobile/components/progress/v2/_index.less b/style/mobile/components/progress/v2/_index.less index 20749232cf..f97035d8b0 100644 --- a/style/mobile/components/progress/v2/_index.less +++ b/style/mobile/components/progress/v2/_index.less @@ -101,7 +101,8 @@ line-height: @progress-circle-label-line-height; overflow: hidden; text-overflow: ellipsis; - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } diff --git a/style/mobile/components/toast/v2/_index.less b/style/mobile/components/toast/v2/_index.less index ee2f3a1042..49a111e85e 100644 --- a/style/mobile/components/toast/v2/_index.less +++ b/style/mobile/components/toast/v2/_index.less @@ -68,7 +68,8 @@ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; white-space: pre-line; diff --git a/style/mobile/mixins/_index.less b/style/mobile/mixins/_index.less index a1afe3972f..5dafcdd6a7 100644 --- a/style/mobile/mixins/_index.less +++ b/style/mobile/mixins/_index.less @@ -3,7 +3,8 @@ @import "./_hairline.less"; .limit-title-row() { - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } From db13c2489701f8e5693c222899e9fa2487ad6559 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 23 Mar 2023 13:22:44 +0800 Subject: [PATCH 226/312] feat(cell-group): add style for v2 (#1215) * feat(cell-group): add style for v2 * fix: resolve lint errors --- style/mobile/components/cell/v2/_index.less | 34 +++++++++++++++++++++ style/mobile/components/cell/v2/_var.less | 8 +++++ 2 files changed, 42 insertions(+) diff --git a/style/mobile/components/cell/v2/_index.less b/style/mobile/components/cell/v2/_index.less index dffd84afeb..fd85ea5779 100644 --- a/style/mobile/components/cell/v2/_index.less +++ b/style/mobile/components/cell/v2/_index.less @@ -110,3 +110,37 @@ align-items: flex-end; } } + +.@{prefix}-cell-group { + position: relative; + + &__title { + font-family: PingFangSC-Regular; + font-size: @cell-group-title-font-size; + color: @cell-group-title-color; + text-align: left; + line-height: @cell-group-title-line-height; + background-color: @cell-group-title-bg-color; + padding-left: @cell-group-title-padding-left; + } + + &--bordered { + &::before { + .hairline-top(@cell-group-border-color); + + z-index: 1; + } + + &::after { + .hairline-bottom(@cell-group-border-color); + + z-index: 1; + } + } + + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/mobile/components/cell/v2/_var.less b/style/mobile/components/cell/v2/_var.less index daafd50cea..a44c940ee8 100644 --- a/style/mobile/components/cell/v2/_var.less +++ b/style/mobile/components/cell/v2/_var.less @@ -22,3 +22,11 @@ @cell-required-font-size: var(--td-cell-required-font-size, @font-size-m); @cell-image-width: var(--td-cell-image-width, 48px); @cell-image-height: var(--td-cell-image-height, 48px); + +// cell group +@cell-group-title-font-size: var(--td-cell-group-title-font-size, 14px); +@cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px); +@cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px); +@cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer); +@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3); +@cell-group-border-color: var(--td-cell-group-border-color, @border-color); From ecd6c40f0ccb9547b644f594a1b98e0cd4aead3d Mon Sep 17 00:00:00 2001 From: Y Date: Fri, 24 Mar 2023 14:30:44 +0800 Subject: [PATCH 227/312] fix(Textarea): update class name (#1216) --- style/mobile/components/textarea/v2/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/textarea/v2/_index.less b/style/mobile/components/textarea/v2/_index.less index da3396cdfe..5a7076a9c1 100644 --- a/style/mobile/components/textarea/v2/_index.less +++ b/style/mobile/components/textarea/v2/_index.less @@ -64,7 +64,7 @@ border: @textarea-border-width solid @textarea-border-color; } - .@{prefix}-is-disabled { + &--disabled { color: @textarea-disabled-text-color; } } From 82c4f125af277ac2ed534b6cf36ddd9a04fbba4a Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 27 Mar 2023 11:02:06 +0800 Subject: [PATCH 228/312] feat(web): update table documents (#1219) Co-authored-by: sheepluo --- docs/web/api/table.md | 4 +- js/table/recalculate-column-width.ts | 217 --------------------------- js/table/set-column-width-by-drag.ts | 121 --------------- 3 files changed, 2 insertions(+), 340 deletions(-) delete mode 100644 js/table/recalculate-column-width.ts delete mode 100644 js/table/set-column-width-by-drag.ts diff --git a/docs/web/api/table.md b/docs/web/api/table.md index eb6c6f9e39..08e135fecc 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -239,8 +239,8 @@ spline: data - 列配置 `filter.component` 用于自定义筛选器，只要保证自定义筛选器包含 `value` 属性 和 `change` 事件，即可像内置筛选器一样正常使用。 - 列配置 `filter.showConfirmAndReset` 用于控制是否显示“确认”“重置”按钮. - 列配置 `filter.resetValue` 用于设置点击“重置”按钮时的重置值，并非每个场景都会重置为 `''` 或 `[]` `null`，默认重置为 `''`。 -- 表格属性 `filterRow` 可完全自定义过滤结果行显示内容，设置 `filterRow={() => null}` 隐藏过滤行。 -- 更多接口请查看 API 文档中的 `TableColumnFilter` +- 表格属性 `filterRow` 可完全自定义过滤结果行显示内容，设置 `filterRow=null` 隐藏过滤行。 +- 更多功能属性请查看 API 文档中的 `TableColumnFilter` {{ filter-controlled }} diff --git a/js/table/recalculate-column-width.ts b/js/table/recalculate-column-width.ts deleted file mode 100644 index 1aef995e2b..0000000000 --- a/js/table/recalculate-column-width.ts +++ /dev/null @@ -1,217 +0,0 @@ -import { BaseTableCol, ThMap } from './types'; -import { getColWidthAttr } from './utils'; - -/** - * 填充未设置width属性的列 - * @param columns 当前表格所有列 - * @param missingWidthCols 未设置width属性的列 - * @param thWidthList 列宽记录字典 - * @param tableLayout 表格布局 - * @param actualWidth 各列实际总列宽 - * @param tableWidth 表格总宽度 - */ -const setMissingColumnWidth = >( - columns: T[], - missingWidthCols: T[], - thWidthList: ThMap, - tableLayout: string, - actualWidth: number, - tableWidth: number -) : void => { - const thMap = thWidthList; - // 当前列宽总宽度小于表宽，将剩余宽度平均分配给未指定宽度的列 - if (actualWidth < tableWidth) { - let widthDiff = tableWidth - actualWidth; - const remainCols: T[] = []; - // 优先保证设置了minWidth的列满足最小宽度 - missingWidthCols.forEach((col) => { - const minWidth = getColWidthAttr(col, 'minWidth'); - if (minWidth) { - thMap[col.colKey] = minWidth; - widthDiff -= minWidth; - } else { - remainCols.push(col); - } - }); - - // 如果剩余宽度 > 0 - if (widthDiff > 0) { - // 如果存在未设置minWidth的列，这些列均分剩余宽度 - if (remainCols.length) { - const avgWidth = widthDiff / remainCols.length; - remainCols.forEach((col) => { - thMap[col.colKey] = avgWidth; - }); - } else { - // 否则所有列均分剩余宽度 - const avgWidth = widthDiff / missingWidthCols.length; - missingWidthCols.forEach((col) => { - thMap[col.colKey] += avgWidth; - }); - } - } else { - // 剩余宽度 <= 0, 所有剩余列默认填充100px - remainCols.forEach((col) => { - thMap[col.colKey] = 100; - }); - } - } else if (tableLayout === 'fixed') { - // 当前列表总宽度大于等于表宽，且当前排版模式为fixed，默认填充minWidth || 100px - missingWidthCols.forEach((col) => { - thMap[col.colKey] = getColWidthAttr(col, 'minWidth') || 100; - }); - } else { - // 当前列表总宽度大于等于表宽，且当前排版模式为aut - // 默认填充minWidth || 100px，然后按比例重新分配各列宽度 - let extraWidth = 0; - missingWidthCols.forEach((col) => { - extraWidth += getColWidthAttr(col, 'minWidth') || 100; - }); - const totalWidth = extraWidth + actualWidth; - columns.forEach((col) => { - if (!thMap[col.colKey]) { - const colWidth = getColWidthAttr(col, 'minWidth') || 100; - thMap[col.colKey] = (colWidth / totalWidth) * tableWidth; - } else { - thMap[col.colKey] = (thMap[col.colKey] / totalWidth) * tableWidth; - } - }); - } -}; - -/** - * 设置所有列的宽度 - * @param columns 当前表格所有列 - * @param thWidthList 列宽记录字典 - * @param actualWidth 各列实际总列宽 - * @param tableWidth 表格总宽度 - * @param notCalculateWidthCols 不需要参与计算的列id - */ -const setNormalColumnWidth = >( - columns: T[], - thWidthList: ThMap, - actualWidth: number, - tableWidth: number, - notCalculateWidthCols: string[] -) : void => { - const thMap = thWidthList; - columns.forEach((col) => { - if (notCalculateWidthCols.includes(col.colKey)) return; - thMap[col.colKey] = (thMap[col.colKey] / actualWidth) * tableWidth; - }); -}; - -/** - * 表格未初始化时默认填充各列宽度 - * @param missingWidthCols 未设置width属性的列 - * @param thWidthList 列宽记录字典 - */ -const setInitialColumnWidth = >( - missingWidthCols: T[], - thWidthList: { [colKey: string]: number }, -) : void => { - const thMap = thWidthList; - // 表格宽度未初始化，默认填充minWidth || 100px - missingWidthCols.forEach((col) => { - thMap[col.colKey] = getColWidthAttr(col, 'minWidth') || 100; - }); -}; - -/** - * 重新按规则分配各列宽度 - * @param columns 当前表格所有列 - * @param thWidthList 列宽记录字典 - * @param tableLayout 表格布局 - * @param tableElmWidth 表格宽度 - * @param notCalculateWidthCols 不需要参与计算的列 - * @param callback 回调函数 - */ -export default function recalculateColumnWidth>( - columns: T[], - thWidthList: ThMap, - tableLayout: string, - tableElmWidth: number, - notCalculateWidthCols: string[], - callback: (widthMap: { [colKey: string]: number }) => void -): void { - let actualWidth = 0; - const missingWidthCols: T[] = []; - const thMap: ThMap = {}; - - // 计算现有列的列宽总和 - columns.forEach((col) => { - if (!thWidthList[col.colKey]) { - thMap[col.colKey] = getColWidthAttr(col, 'width'); - } else { - thMap[col.colKey] = thWidthList[col.colKey]; - } - const originWidth = thMap[col.colKey]; - if (originWidth) { - actualWidth += originWidth; - } else { - missingWidthCols.push(col); - } - }); - - let tableWidth = tableElmWidth; - let needUpdate = false; - // 表宽没有初始化时，默认给没有指定列宽的列指定宽度为100px - if (tableWidth > 0) { - // 存在没有指定列宽的列 - if (missingWidthCols.length) { - setMissingColumnWidth( - columns, - missingWidthCols, - thMap, - tableLayout, - actualWidth, - tableWidth - ); - needUpdate = true; - } else { - // 所有列都已经指定宽度 - if (notCalculateWidthCols.length) { - // 存在不允许重新计算宽度的列（一般是resize后的两列），这些列不参与后续计算 - let sum = 0; - notCalculateWidthCols.forEach((colKey) => { - sum += thMap[colKey]; - }); - actualWidth -= sum; - tableWidth -= sum; - } - // 重新计算其他列的宽度，按表格剩余宽度进行按比例分配 - if (actualWidth !== tableWidth || notCalculateWidthCols.length) { - setNormalColumnWidth( - columns, - thMap, - actualWidth, - tableWidth, - notCalculateWidthCols - ); - needUpdate = true; - } - } - } else { - setInitialColumnWidth(missingWidthCols, thMap); - needUpdate = true; - } - - // 列宽转为整数 - if (needUpdate) { - let addon = 0; - Object.keys(thMap).forEach((key) => { - const width = thMap[key]; - addon += width - Math.floor(width); - thMap[key] = Math.floor(width) + (addon > 1 ? 1 : 0); - if (addon > 1) { - addon -= 1; - } - }); - if (addon > 0.5) { - thMap[columns[0].colKey] += 1; - } - } - - // 回调处理 - callback(thMap); -} diff --git a/js/table/set-column-width-by-drag.ts b/js/table/set-column-width-by-drag.ts deleted file mode 100644 index dd7e74b61a..0000000000 --- a/js/table/set-column-width-by-drag.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { BaseTableCol, ThMap } from './types'; -import { getColWidthAttr } from './utils'; - -/** - * 获取某一列的所有子列 - * @param col 表格某一列 - * @returns 当前列的所有子列 - */ -const findAllChildren = >(col: T): T[] => { - const loopQue: T[] = []; - const result: T[] = []; - if (col.children) { - col.children.forEach((child: T) => loopQue.push(child)); - while (loopQue.length) { - const child = loopQue.shift(); - if (!child.children || !child.children.length) { - result.push(child); - } else { - child.children.forEach((child: T) => loopQue.push(child)); - } - } - } - return result; -}; - -/** - * 更新拖动后的列宽记录 - * @param dragCol 被拖动的列 - * @param dragWidth 拖动大小 - * @param effectCol 受影响的列 - * @param options 配置参数 - * @param callback 回调函数 - */ -export default function setThWidthListByColumnDrag>( - dragCol: T, - dragWidth: number, - effectCol: T, - options: { - getThWidthList: () => ThMap, - DEFAULT_MIN_WIDTH: number - }, - callback: (widthMap: ThMap, colKeys: string[]) => void -): void { - const { getThWidthList, DEFAULT_MIN_WIDTH } = options; - const thWidthList = getThWidthList(); - - // 检测是否有多级表头 - const dragChildrenCols = findAllChildren(dragCol); - const effectChildrenCols = findAllChildren(effectCol); - - // 若有 - if (dragChildrenCols.length || effectChildrenCols.length) { - let oldWidth = 0; - let oldEffectWidth = 0; - const notCalculateCols: string[] = []; - let effectColsMinWidth = 0; - const updateMap: { [key: string]: number } = {}; - - // 将没有多级表头的列添加到列表中方便后续计算 - if (!dragChildrenCols.length) { - dragChildrenCols.push(dragCol); - } - - if (!effectChildrenCols.length) { - effectChildrenCols.push(effectCol); - } - - // 根据多级表头的叶节点计算实际宽度（拖动列） - dragChildrenCols.forEach((child) => { - oldWidth += thWidthList[child.colKey] || getColWidthAttr(child, 'width'); - notCalculateCols.push(child.colKey); - }); - - // 根据多级表头的叶节点计算实际宽度（受影响的列） - effectChildrenCols.forEach((child) => { - oldEffectWidth += thWidthList[child.colKey] || getColWidthAttr(child, 'width'); - notCalculateCols.push(child.colKey); - effectColsMinWidth += Math.max( - child.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(child, 'minWidth') || DEFAULT_MIN_WIDTH - ); - }); - - // 按比例划分新宽度（拖动列） - dragChildrenCols.forEach((child) => { - updateMap[child.colKey] = (thWidthList[child.colKey] / oldWidth) * dragWidth; - }); - - // 按比例划分新宽度（受影响的列） - const remainWidth = Math.max( - effectColsMinWidth, - oldWidth + oldEffectWidth - dragWidth, - Math.max( - getColWidthAttr(effectCol, 'minWidth') || DEFAULT_MIN_WIDTH, - effectCol.resize?.minWidth || DEFAULT_MIN_WIDTH - ), - ); - effectChildrenCols.forEach((child) => { - updateMap[child.colKey] = Math.max( - child.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(child, 'minWidth') || DEFAULT_MIN_WIDTH, - (thWidthList[child.colKey] / oldEffectWidth) * remainWidth, - ); - }); - - // 更新各列宽度 - callback(updateMap, notCalculateCols); - } else { - const oldWidth = thWidthList[dragCol.colKey] || getColWidthAttr(dragCol, 'width'); - const oldEffectWidth = thWidthList[effectCol.colKey] || getColWidthAttr(effectCol, 'width'); - - callback({ - [dragCol.colKey]: dragWidth, - [effectCol.colKey]: Math.max( - effectCol.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(effectCol, 'minWidth') || DEFAULT_MIN_WIDTH, - oldWidth + oldEffectWidth - dragWidth, - ), - }, [dragCol.colKey, effectCol.colKey]); - } -} From 8c2dfb30a06942f8d98c1d7deae244764086e232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Mon, 27 Mar 2023 18:41:37 +0800 Subject: [PATCH 229/312] feat(tatistic): Add statistic component style (#1218) * feat(tatistic): Add statistic component style * fix: lint fix * fix: Use the canonical font token --- docs/web/api/statistic.md | 38 ++++++++++++++++ style/web/components/statistic/_index.less | 50 ++++++++++++++++++++++ style/web/components/statistic/_var.less | 30 +++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 docs/web/api/statistic.md create mode 100644 style/web/components/statistic/_index.less create mode 100644 style/web/components/statistic/_var.less diff --git a/docs/web/api/statistic.md b/docs/web/api/statistic.md new file mode 100644 index 0000000000..2e64a4b432 --- /dev/null +++ b/docs/web/api/statistic.md @@ -0,0 +1,38 @@ +--- +title: Statistic 数值显示 +description: 突出展示某个或某组数字、带描述的统计类数据。 +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### 基础用法 + +当需要突出某个或某组数字或展示带描述的统计类数据时使用。 + +{{ base }} + +### 前缀后缀/自定义 + +通过 prefix 和 suffix 插槽可以添加前后缀。通过 styleValue 可以自定义数值显示的样式。 + +{{ slot }} + +### 数值动画 + +通过 `animatio` 可以开启数值动画。使用 `start`属性可以控制动画开始时刻。 +如果有特殊需求时也可以通过ref获取实例，调用`startUp`进行控制。 + +{{ animation }} + +### 加载中 + +通过 `loading` 可以控制数值的加载状态。 + +{{ loading }} + +### 计时组件 + +倒计时组件。可以通过 `now` 来传入 `Date.now()`，用于修复初始值显示的小误差问题。 + +{{ countdown }} diff --git a/style/web/components/statistic/_index.less b/style/web/components/statistic/_index.less new file mode 100644 index 0000000000..d3d461c4f2 --- /dev/null +++ b/style/web/components/statistic/_index.less @@ -0,0 +1,50 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +.@{statistic-cls} { + display: inline-block; + line-height: @text-line-height-xl; + color: @statistic-text-color; + + &-title { + font-size: @statistic-title-font-size; + margin-bottom: @statistic-title-margin-bottom; + color: @statistic-title-text-color; + } + + &-content { + .@{statistic-cls}-value { + white-space: nowrap; + font-size: @statistic-integer-font-size; + font-weight: @statistic-value-font-weight; + color: @statistic-value-text-color; + + &-integer { + white-space: nowrap; + } + + &-decimal { + font-size: @statistic-decimal-font-size; + display: inline-block; + } + + &-suffix { + font-size: @statistic-suffix-font-size; + margin-left: @statistic-suffix-margin-left; + } + + &-prefix { + font-size: @statistic-value-icon-size; + margin-right: @statistic-prefix-margin-right; + } + } + } + + &-extra { + margin-top: @statistic-extra-margin-top; + color: @statistic-extra-text-color; + } +} diff --git a/style/web/components/statistic/_var.less b/style/web/components/statistic/_var.less new file mode 100644 index 0000000000..1e7e74d7bb --- /dev/null +++ b/style/web/components/statistic/_var.less @@ -0,0 +1,30 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[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 "../../base.less"; + +@statistic-cls: ~"@{prefix}-statistic"; + +@statistic-title-font-size: @font-title-medium; +@statistic-title-margin-bottom: @spacer-1; +@statistic-extra-margin-top: @spacer-1; +@statistic-integer-font-size: 26px; +@statistic-decimal-font-size: @statistic-integer-font-size; +@statistic-value-font-weight: 500; +@statistic-value-text-color: @text-color-primary; +@statistic-text-color: @text-color-secondary; +@statistic-title-text-color: @text-color-secondary; +@statistic-extra-text-color: @text-color-secondary; +@statistic-value-icon-size: @font-size-base; +@statistic-suffix-font-size: @font-size-base; +@statistic-prefix-margin-right: @spacer-s; +@statistic-suffix-margin-left: @spacer-s; From f771efbe176510ae861d8cb33a7bbd21bb43c788 Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Tue, 28 Mar 2023 11:34:26 +0800 Subject: [PATCH 230/312] Feature/web/sticky tool (#1221) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 * feat: 暂存尝试联动backtop * feat: 初始化sticky-tool demo文档 * chore: update description --------- Co-authored-by: yiranwu Co-authored-by: yuyang --- docs/web/api/sticky-tool.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/web/api/sticky-tool.md diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md new file mode 100644 index 0000000000..a8f75a6aa5 --- /dev/null +++ b/docs/web/api/sticky-tool.md @@ -0,0 +1,20 @@ +--- +title: StickyTool 侧边栏 +description: 侧边栏组件用于常驻页面侧边的信息、操作展示。 +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### 基础侧边栏 + +{{ base }} + +#### 紧凑侧边栏 + +{{ compact }} + +#### 组件形状 +提供圆形和方形两种不同形状。 + +{{ shape }} From 3f76bdf43dcc28b5a3bb538ab6271035fdf31a6a Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 28 Mar 2023 15:43:49 +0800 Subject: [PATCH 231/312] chore: update backtop docs (#1222) --- docs/web/api/back-top.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md index 5f7ed5af65..cd9e9f1394 100644 --- a/docs/web/api/back-top.md +++ b/docs/web/api/back-top.md @@ -6,30 +6,33 @@ usage: { title: 'BackTop 返回顶部', description: '用于返回页面顶部' spline: data --- -### 基础型组件（默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms） +### 基础的回到顶部 + +默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms {{ baseList }} -### 紧凑型组件 (滚动动画时长500ms) +### 可设置不同耗时的回到顶部 {{ baseListSmall }} -### 组件尺寸 +### 不同组件尺寸的回到顶部 提供标准（默认）、小两种尺寸。 {{ size }} -### 组件形状 +### 不同组件形状的回到顶部 提供圆形和方形两种不同形状。 {{ shape }} -### 组件主题 +### 不同组件主题的回到顶部 + {{ theme }} -### 自定义内容 +### 可自定义内容的回到顶部 {{ custom }} \ No newline at end of file From 89da1164c2d27ae1ba01f66e26ef8b7bfc8c57dc Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 28 Mar 2023 16:26:34 +0800 Subject: [PATCH 232/312] chore: fix title (#1223) --- docs/web/api/sticky-tool.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md index a8f75a6aa5..33bfa64508 100644 --- a/docs/web/api/sticky-tool.md +++ b/docs/web/api/sticky-tool.md @@ -10,11 +10,11 @@ spline: navigation {{ base }} -#### 紧凑侧边栏 +### 紧凑侧边栏 {{ compact }} -#### 组件形状 +### 组件形状 提供圆形和方形两种不同形状。 {{ shape }} From f50d47c60f3ef276d01f81e5c3bee65ea24c4663 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Wed, 29 Mar 2023 10:18:14 +0800 Subject: [PATCH 233/312] fix: update picker style (#1224) --- .../components/picker-item/v2/_index.less | 35 ------------------- .../components/picker-item/v2/_var.less | 6 ---- style/mobile/components/picker/v2/_index.less | 30 +++++++++++++++- style/mobile/components/picker/v2/_var.less | 6 ++++ 4 files changed, 35 insertions(+), 42 deletions(-) delete mode 100644 style/mobile/components/picker-item/v2/_index.less delete mode 100644 style/mobile/components/picker-item/v2/_var.less diff --git a/style/mobile/components/picker-item/v2/_index.less b/style/mobile/components/picker-item/v2/_index.less deleted file mode 100644 index 831f6e64bc..0000000000 --- a/style/mobile/components/picker-item/v2/_index.less +++ /dev/null @@ -1,35 +0,0 @@ -@import "../../../base.less"; - -@import "./_var.less"; - -:host { - display: flex; -} - -.@{item} { - &__group { - height: @picker-group-height; - overflow: hidden; - flex: 1; - z-index: 1; - } - - &__wrapper { - padding: 72px 0; - } - - &__item { - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - height: @picker-item-height; - line-height: @picker-item-height; - color: @picker-item-color; - - &--active { - color: @picker-item-active-color; - font-weight: 600; - } - } -} diff --git a/style/mobile/components/picker-item/v2/_var.less b/style/mobile/components/picker-item/v2/_var.less deleted file mode 100644 index 0c146df3f2..0000000000 --- a/style/mobile/components/picker-item/v2/_var.less +++ /dev/null @@ -1,6 +0,0 @@ -@picker: ~"@{prefix}-picker"; -@item: ~"@{picker}-item"; -@picker-group-height: var(--td-picker-group-height, 200px); -@picker-item-height: var(--td-picker-item-height, 40px); -@picker-item-color: var(--td-picker-item-color, @font-gray-2); -@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); diff --git a/style/mobile/components/picker/v2/_index.less b/style/mobile/components/picker/v2/_index.less index d78ac7c570..08982dab87 100644 --- a/style/mobile/components/picker/v2/_index.less +++ b/style/mobile/components/picker/v2/_index.less @@ -81,9 +81,37 @@ position: absolute; left: 16px; right: 16px; - top: 72px; + top: 80px; pointer-events: none; background-color: @picker-indicator-bg-color; border-radius: @picker-indicator-border-radius; } } + +.@{item} { + // display: flex; + + &__group { + // padding: 72px 0; + box-sizing: border-box; + height: @picker-group-height; + overflow: hidden; + flex: 1; + z-index: 1; + } + + &__item { + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: @picker-item-height; + line-height: @picker-item-height; + color: @picker-item-color; + + &--active { + color: @picker-item-active-color; + font-weight: 600; + } + } +} diff --git a/style/mobile/components/picker/v2/_var.less b/style/mobile/components/picker/v2/_var.less index d3e8382422..d2a98bad10 100644 --- a/style/mobile/components/picker/v2/_var.less +++ b/style/mobile/components/picker/v2/_var.less @@ -1,4 +1,5 @@ @picker: ~"@{prefix}-picker"; +@item: ~"@{picker}-item"; @picker-border-radius: var(--td-picker-border-radius, 12px); @picker-toolbar-height: var(--td-picker-toolbar-height, 58px); @@ -19,3 +20,8 @@ @picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer); @picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 6px); + +@picker-group-height: var(--td-picker-group-height, 200px); +@picker-item-height: var(--td-picker-item-height, 40px); +@picker-item-color: var(--td-picker-item-color, @font-gray-2); +@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); From 792bd1ed6b86310ffe492d972a626cde37b4d7ae Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 29 Mar 2023 15:43:40 +0800 Subject: [PATCH 234/312] fix: format time with format (#1227) --- js/date-picker/format.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 994ce78b35..ee6a01ad7d 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -193,7 +193,7 @@ export function calcFormatTime(time: string, timeFormat: string) { } // 格式化时间 -export function formatTime(value: DateValue | DateValue[], timeFormat: string, defaultTime: string | string[]) { +export function formatTime(value: DateValue | DateValue[], format:string, timeFormat: string, defaultTime: string | string[]) { let result; if (Array.isArray(value)) { @@ -202,9 +202,8 @@ export function formatTime(value: DateValue | DateValue[], timeFormat: string, d result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); result = result.length ? result : defaultTime.map((t) => calcFormatTime(t, timeFormat)); } else { - result = value ? dayjs(value).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); + result = value ? dayjs(value, format).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); } - return result; } From 8ceb687b8ad0e9f0162375132f3792fff4c09a3f Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 29 Mar 2023 15:48:11 +0800 Subject: [PATCH 235/312] fix: format time for range (#1228) --- js/date-picker/format.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index ee6a01ad7d..29ac4551f7 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -199,7 +199,7 @@ export function formatTime(value: DateValue | DateValue[], format:string, timeFo if (Array.isArray(value)) { // eslint-disable-next-line no-param-reassign if (!Array.isArray(defaultTime)) defaultTime = [defaultTime, defaultTime]; - result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); + result = value.map((v, i) => (v ? dayjs(v, format).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); result = result.length ? result : defaultTime.map((t) => calcFormatTime(t, timeFormat)); } else { result = value ? dayjs(value, format).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); From f50bec0a425ae71a8839dfd7b7afb866c05d72fe Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 29 Mar 2023 18:07:28 +0800 Subject: [PATCH 236/312] fix: alert icon and close padding style bug (#1229) * fix: alert icon and close padding style bug * chore: fix lint --------- Co-authored-by: kadenzhong Co-authored-by: yuyang --- style/web/components/alert/_index.less | 16 ++++++++++++---- style/web/components/alert/_var.less | 11 ++++++----- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less index 65cc328dfc..a9528f4382 100644 --- a/style/web/components/alert/_index.less +++ b/style/web/components/alert/_index.less @@ -94,7 +94,6 @@ } .@{prefix}-alert__icon { - padding: @alert-icon-padding; font-size: @alert-icon-size; display: inherit; } @@ -107,7 +106,8 @@ .@{prefix}-alert__content { flex: 1 1 0; - font: @alert-font-size; + font-size: @alert-font-size; + line-height: @alert-line-height; overflow: hidden; } @@ -162,8 +162,16 @@ display: inline-flex; align-items: center; margin-left: @alert-close-margin-left; - font-size: @alert-close-size; color: @alert-close-color; - padding: @alert-close-padding; cursor: pointer; + transition: color @anim-duration-base; + + &:hover { + color: @alert-close-color-hover; + } + + > .t-icon { + font-size: @alert-close-size; + padding: @alert-close-padding; + } } diff --git a/style/web/components/alert/_var.less b/style/web/components/alert/_var.less index 3cec7e8591..7071ab500a 100644 --- a/style/web/components/alert/_var.less +++ b/style/web/components/alert/_var.less @@ -25,6 +25,7 @@ @alert-error-icon-color: @error-color; @alert-close-color: @text-color-secondary; +@alert-close-color-hover: @text-color-primary; @alert-success-trigger-color: @success-color-focus; @alert-info-trigger-color: @brand-color; @@ -37,16 +38,16 @@ @alert-error-trigger-active-color: @error-color; // size -@alert-font-size: @font-body-medium; -@alert-icon-size: calc(@font-size-base + 6px); -@alert-close-size: calc(@font-size-base + 2px); +@alert-font-size: @font-size-base; +@alert-line-height: @text-line-height-base; +@alert-icon-size: @alert-line-height; +@alert-close-size: calc(@alert-line-height - 2px); // 间距 @alert-padding: @comp-paddingTB-l @comp-paddingLR-xl; @alert-operation-padding: 0 @comp-paddingLR-s; @alert-margin-left: @comp-margin-s; @alert-close-margin-left: @comp-margin-l; -@alert-icon-padding: calc((@text-line-height-base - @alert-icon-size) / 2 ) 0; -@alert-close-padding: calc((@text-line-height-base - @alert-close-size) / 2 ) 0; +@alert-close-padding: calc((@alert-line-height - @alert-close-size) / 2 ) 0; @alert-description-margin-top: @comp-margin-s; @alert-collapse-margin-top: @comp-margin-s; From c6fc810345375c1820dcc1fd9e73872d23db8424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=AB=E9=BE=99=E6=9E=9C?= Date: Wed, 29 Mar 2023 21:46:57 +0800 Subject: [PATCH 237/312] =?UTF-8?q?fix(image-viewer):=20esm=E4=B8=8Bless?= =?UTF-8?q?=E4=BC=9A=E7=BC=96=E8=AF=91=E5=A4=B1=E8=B4=A5=EF=BC=8C=E9=9C=80?= =?UTF-8?q?=E8=A6=81=E8=BD=AC=E4=B9=89less=E6=96=87=E4=BB=B6=E4=B8=ADmin?= =?UTF-8?q?=E5=87=BD=E6=95=B0=20(#1225)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: gomezshui --- style/web/components/image-viewer/_index.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 7554a6bb81..54e6695cdc 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -135,8 +135,8 @@ .@{prefix}-image-viewer__modal-image { display: block; - max-width: min(90vw, 1000px); - max-height: min(90vh, 800px); + max-width: ~"min(90vw, 1000px)"; + max-height: ~"min(90vh, 800px)"; transition: all @anim-duration-base @anim-time-fn-easing; transform: rotate(0deg); object-fit: contain; @@ -419,8 +419,8 @@ } .@{prefix}-image-viewer-mini__content { - max-width: min(90vw, 1000px); - max-height: min(90vh, 800px); + max-width: ~"min(90vw, 1000px)"; + max-height: ~"min(90vh, 800px)"; .@{prefix}-image-viewer__modal-pic { @@ -443,8 +443,8 @@ .@{prefix}-image-viewer__modal-image { display: block; - max-width: min(80vw, 800px); - max-height: min(80vh, 600px); + max-width: ~"min(80vw, 800px)"; + max-height: ~"min(80vh, 600px)"; transition: all @anim-duration-base ease; transform: rotate(0deg); object-fit: contain; From c161827d113acac48377ea06e55d580b7d1d7db5 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 30 Mar 2023 09:57:12 +0800 Subject: [PATCH 238/312] chore: loading conic background backup (#1230) --- style/web/components/loading/_index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less index 2d8066bfa3..16d4368291 100644 --- a/style/web/components/loading/_index.less +++ b/style/web/components/loading/_index.less @@ -101,6 +101,8 @@ width: 100%; height: 100%; border-radius: @border-radius-circle; + /* stylelint-disable-next-line color-no-hex */ + background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); From 888c2ef1e86085af56344321eea928ef3eb4b601 Mon Sep 17 00:00:00 2001 From: Y Date: Thu, 30 Mar 2023 14:08:56 +0800 Subject: [PATCH 239/312] feat: add empty docs (#1231) --- docs/mobile/api_v2/empty.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/mobile/api_v2/empty.md diff --git a/docs/mobile/api_v2/empty.md b/docs/mobile/api_v2/empty.md new file mode 100644 index 0000000000..6a8b4c3f6a --- /dev/null +++ b/docs/mobile/api_v2/empty.md @@ -0,0 +1,23 @@ +--- +title: Empty 空状态 +description: 用于空状态时的占位提示。 +spline: data +isComponent: true +toc: false +--- + +## 代码演示 + +### 类型 + +图标空状态 + +{{ base }} + +自定义图片空状态 + +{{ imageEmpty }} + +带操作空状态 + +{{ buttonEmpty }} From 3818b0a3b408a37e686b8fde06341b10fa52a4dd Mon Sep 17 00:00:00 2001 From: GolderBrother <1204788939@qq.com> Date: Fri, 31 Mar 2023 10:20:39 +0800 Subject: [PATCH 240/312] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20breadcrumb?= =?UTF-8?q?=E3=80=81dropdown=E3=80=81menu=E3=80=81pagination=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84api=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=20(#1?= =?UTF-8?q?232)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 增加 breadcrumb、dropdown、menu、pagination 组件的api英文文档 * docs: menu 组件英文文档翻译内容调整 --------- Co-authored-by: James --- docs/web/api/breadcrumb.en-US.md | 36 ++++++++++++++++ docs/web/api/dropdown.en-US.md | 61 ++++++++++++++++++++++++++++ docs/web/api/menu.en-US.md | 70 ++++++++++++++++++++++++++++++++ docs/web/api/pagination.en-US.md | 54 ++++++++++++++++++++++++ 4 files changed, 221 insertions(+) create mode 100644 docs/web/api/breadcrumb.en-US.md create mode 100644 docs/web/api/dropdown.en-US.md create mode 100644 docs/web/api/menu.en-US.md create mode 100644 docs/web/api/pagination.en-US.md diff --git a/docs/web/api/breadcrumb.en-US.md b/docs/web/api/breadcrumb.en-US.md new file mode 100644 index 0000000000..68dfa68b66 --- /dev/null +++ b/docs/web/api/breadcrumb.en-US.md @@ -0,0 +1,36 @@ +--- +title: Breadcrumb +description:Displays the position of the current page in the system hierarchy, and can return to any previous page level. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Basic breadcrumb + +Suitable for a wide range of basic uses, the system has more than two levels of hierarchy for switching up any level of content. + +{{ base }} + +### Breadcrumbs with icons + +Can customize each content, unified icon plus text, icon placed in front of the text. + +{{ icon }} + +### Custom separator breadcrumbs + +Customize`separator`the separator character through the separator property, and it is recommended to use an icon instead of a text symbol. + +{{ custom }} + + + +### Using Options to Configure Breadcrumbs + +Use the `options` property to configure the content of the breadcrumbs. + +{{ options }} diff --git a/docs/web/api/dropdown.en-US.md b/docs/web/api/dropdown.en-US.md new file mode 100644 index 0000000000..08f1ffe379 --- /dev/null +++ b/docs/web/api/dropdown.en-US.md @@ -0,0 +1,61 @@ +--- +title: Dropdown +description:It is used to carry too many operation sets and accept more operations through drop-down expansion. +isComponent: true +usage: { title: "", description: "" } +spline: navigation +--- + +### Text drop-down menu + +The text button triggers a drop-down menu. It is commonly used in storage operation scenarios where space is extremely limited, and is generally used to store detailed operations in the form. + +{{ base }} + +### Button drop-down menu + +A normal button triggers a drop-down menu. It is often used to operate storage scenes. + +{{ button }} + +### With Split Line drop-down menu + +The different pull-down menu operations are distinguished by dividing lines. It is often used in scenarios where the results of different operations need to be distinguished. + +{{ split }} + +### Multi-level drop-down menu + +Action drop-down menu with logical hierarchy. It is often used in operational scenarios where multiple layers of logic need to be accommodated. + +{{ multiple }} + +### Drop-down menu with disabled action items + +The operation items of the drop-down menu can be set to be disabled. This is often used to disable some of the action items. + +{{ disabled }} + +### Customize drop-down menus for additional properties + +The drop-down menu depends on the`Popup`component and can pass through`Popup`the properties of the custom Popup component. + +{{ custom }} + +### Drop-down menu to define maximum height + +The drop-down menu supports defining the maximum height. + +{{ long }} + +### Custom theme drop-down menu + +The menu items of the drop-down menu support custom themes, which are used according to specific scenarios. + +{{ theme }} + +### Drop-down menu expanded to the left + +The drop-down menu supports expansion to the left. + +{{ left }} diff --git a/docs/web/api/menu.en-US.md b/docs/web/api/menu.en-US.md new file mode 100644 index 0000000000..e68339ad6f --- /dev/null +++ b/docs/web/api/menu.en-US.md @@ -0,0 +1,70 @@ +--- +title: Menu +description:Used to host the architecture of the site and provide a menu list to jump to. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Top Navigation + +#### Single-layer navigation + +There is only a single-layer structure of the top navigation, click to jump. It can be used on simple hierarchical websites that host a single product or a single line of business. + +{{ single }} + +#### Two-layer navigation + +The top navigation may host 2 levels of page navigation. It is often used to focus on secondary page navigation under a single business line. + +{{ double }} + +#### Multi-layer storage navigation + +The top navigation drop-down menu contains 2-3 levels of page navigation, which can be expanded to group display and is often used for fast switching navigation under multiple businesses. + +{{ multiple }} + +#### Customizable top navigation + +Custom functions can be added to the original navigation. It is used in business scenarios with complex logic or specific requirements. + +{{ custom-header }} + +### Side navigation + +#### Single-layer navigation + +There is only a single-layer structure of the side navigation, click to jump. It is generally combined with the single-layer top navigation as the side navigation of the secondary page. + +{{ single-side }} + +#### Tiled Side Navigation + +The side navigation can carry 1-3 levels of page navigation and be displayed tiled. It is suitable for deeper level websites. + +{{ multi-side }} + + + +#### Groupable Side Navigation + +Grouping large numbers of pages for display to facilitate user understanding and searching. Generally used on websites with a large number of businesses or pages to display. +{{ group-side }} + + + +#### Collapsible Side Navigation + +A collapse button is provided on the side navigation, which can minimize the sidebar when clicked. Commonly used in side navigation with icons. + +{{ closable-side }} diff --git a/docs/web/api/pagination.en-US.md b/docs/web/api/pagination.en-US.md new file mode 100644 index 0000000000..17baf9afac --- /dev/null +++ b/docs/web/api/pagination.en-US.md @@ -0,0 +1,54 @@ +--- +title: Pagination +description:Controls for switching content within a module. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Base paging + +#### Small number of pages +The most basic paging control, only show the page number. It is recommended to use lightweight pagination scenarios with less than 10 pages of content. + +{{ base }} + +#### More pages +With a large amount of data to display, paging allows users to quickly locate the current page number. It is recommended to use pagination scenarios with more than 10 pages of content. + +{{ more }} + +### Pagination with total data display +The data in the associated module is displayed, so that the user can quickly understand the data level without browsing all of them. Often used for statistics in tables. + +{{ total }} + +### Pagination with page display quantity selection +The number of items displayed on each page can be adjusted according to user requirements. + +{{ page-num }} + +### Pagination with quick jump +When the data needs to be quickly located, select to display the quick jump page. + +{{ jump }} + +### Minimalist pagination +Extremely simple page control, only show the current page, the total number of pages and page up and down. There is less horizontal space within the module and no need to pinpoint the scene of a specific page. + +{{ simple }} + +### Mini Pagination +Remove the border of the pagination control while retaining its main function. This is suitable for scenarios where space is limited within the module and lightweight pagination is needed to increase page utilization. + +{{ mini }} + +### Minimalist mini version pagination +Smaller size of the mini-style paging control, suitable for embedded in other components in the paging navigation. + +{{ simple-mini }} + +### PaginationMini Subassembly +The smallest unit paging control, suitable for embedded in other components with smaller space. + +{{ pagination-mini }} From 840eaf45a69a163ed06cc5698a679e0918affc13 Mon Sep 17 00:00:00 2001 From: GolderBrother <1204788939@qq.com> Date: Mon, 3 Apr 2023 10:54:54 +0800 Subject: [PATCH 241/312] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20drawer?= =?UTF-8?q?=E3=80=81message=E3=80=81notification=E3=80=81popu=E7=AD=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=20(#1235?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: James --- docs/web/api/drawer.en-US.md | 69 ++++++++++++++++++++++++++++++ docs/web/api/message.en-US.md | 16 +++++++ docs/web/api/notification.en-US.md | 36 ++++++++++++++++ docs/web/api/popconfirm.en-US.md | 36 ++++++++++++++++ docs/web/api/popup.en-US.md | 64 +++++++++++++++++++++++++++ 5 files changed, 221 insertions(+) create mode 100644 docs/web/api/drawer.en-US.md create mode 100644 docs/web/api/message.en-US.md create mode 100644 docs/web/api/notification.en-US.md create mode 100644 docs/web/api/popconfirm.en-US.md create mode 100644 docs/web/api/popup.en-US.md diff --git a/docs/web/api/drawer.en-US.md b/docs/web/api/drawer.en-US.md new file mode 100644 index 0000000000..4ade1d9699 --- /dev/null +++ b/docs/web/api/drawer.en-US.md @@ -0,0 +1,69 @@ +--- + +title: Drawer +description:Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. +isComponent: true +usage: { title: '', description: '' } +spline: message + +--- + +### Visible Drawers + +Carrying the informational content of the presentation. Drawers can be used to increase page scalability when page space is limited. + +{{ base }} + +### Operable Drawer + +The operation drawer carries the forms to be edited or operated in the drawer, and can be used when the user needs to operate. + +{{ operation }} + +### Drawers with no hidden layer + +By setting `showOverlay`, you can control whether to display the drawer overlay. + +{{ no-mask }} + +### Drawers in Different Positions + +With `placement`, the drawer can be displayed in different positions. + +{{ placement }} + +### Drawers of different size + +The width of the drawer display is controlled by the `size` attribute. + +{{ size }} + +### Customizing the Top and Bottom Drawers + +You can adjust the contents at the top and bottom of the drawer by using `header` and `footer`. + +{{ custom }} + +### Eject Mode Drawer + +Drawers can be displayed by covering or pushing the content area. For the `push` mode of the entire page,`attach` needs to be set to body. (The drawer component is mounted by default to the location of the element itself). + +{{ popup }} + +### Rendering and rendering in the drawer of the current parent element + +The `showInAttachedElement` attribute is used to specify the parent container element of the drawer. The parent element must have a positioning attribute, for example:position: relative。 + +{{ attach-parent }} + +### Destroy drawer when closing + +You can use `destroyOnClose` to destroy a drawer from a page node when closing it. + +{{ destroy }} + +### Draggable Drawers + +With `sizeDraggable`, you can drag and drop the edge of the drawer to change the size of the drawer. + +{{ size-draggable }} diff --git a/docs/web/api/message.en-US.md b/docs/web/api/message.en-US.md new file mode 100644 index 0000000000..ba2e705e8b --- /dev/null +++ b/docs/web/api/message.en-US.md @@ -0,0 +1,16 @@ +--- +title: Message global prompt description:Provide lightweight global feedback on user actions. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### General Global Prompt + +Use concise text to describe the action feedback. General global prompts include: general information, success information, warning information, error information, help information, and loading. + +{{ base }} + +### Prompt for Loading Information + +{{ loading }} diff --git a/docs/web/api/notification.en-US.md b/docs/web/api/notification.en-US.md new file mode 100644 index 0000000000..ac9293fdd5 --- /dev/null +++ b/docs/web/api/notification.en-US.md @@ -0,0 +1,36 @@ +--- +title: Notification Message Notification description:A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### Basic Message Notification + +Basic message notification, which can be manually closed or automatically exited. + +{{ base }} + +### Message Notification with Icon + +Message notifications with icons provide two scenarios:General and important message notifications (e.g.:system error, etc.). + +{{ icon }} + +### Message Notification with Operation + +Message notifications with actions provide the user with a next action point for brief and quick interaction in a message prompt box. + +{{ operation }} + +### Position Control + +The global prompt display position can be controlled.`placement` is used to control the approximate position, and `offset` is used to set the offset from the position of `placement`. + +{{ placement }} + +### Disabling Prompt + +You can also use the close function if you do not want to close by timing, or if the user clicks a button. + +{{ toggle }} diff --git a/docs/web/api/popconfirm.en-US.md b/docs/web/api/popconfirm.en-US.md new file mode 100644 index 0000000000..81e4c69ac1 --- /dev/null +++ b/docs/web/api/popconfirm.en-US.md @@ -0,0 +1,36 @@ +--- +title: Popconfirm Bubble confirmation box description:The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### Basic Bubble Confirmation Box + +Use the instruction text and operation buttons to confirm the simpler operation twice. + +{{ base }} + +### Bubble confirmation boxes for different icons + +Add icons before the description text, such as normal, warning and alarm icons, to enhance the expression to better attract the attention of users. + +{{ icon }} + +### Bubble confirmation box with description + +In addition to the main description text, the detailed description related to the operation is added to describe the more complicated and confusing operation in detail. + +{{ describe }} + +### Customize confirmation and cancel buttons + +with `confirmBtn` and `cancelBtn` attributes. You can pass Button component attributes or use slot method. + +{{ button }} + +### To control the position of the bubble confirmation box + +`popupProps` can be used to transparently transfer all the supported properties of the Popup component that the pop-up window depends on, such as controlling the position where the pop-up window appears. + +{{ inherit }} diff --git a/docs/web/api/popup.en-US.md b/docs/web/api/popup.en-US.md new file mode 100644 index 0000000000..e5d728930c --- /dev/null +++ b/docs/web/api/popup.en-US.md @@ -0,0 +1,64 @@ +--- +title: Popup description:The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### Basic pop-up layer + +It consists of a floating layer content and a trigger element, both of which can be customized. Use `content` to customize the floating layer content. + +{{ base }} + +### Trigger Element + +You can use `triggerElement` to customize the trigger element. + +{{ trigger-element }} + +### Popup Layer with Different Trigger Methods + +Trigger when floating (default), trigger when clicking, trigger when getting focus, trigger when right-clicking, etc. + +{{ trigger }} + +### Location Direction + +Use `placement` to control the direction of the floating layer. If you need a floating layer arrow, set `showArrow=true`. + +{{ placement }} + +### Floating Layer Style + +The floating layer style can be controlled using overlayClassName, overlayStyle, overlayInnerStyle. + +- `overlayClassName` is used to define the floating layer style class name. +- `overlayStyle` is used to define the floating layer style, such as the floating layer width. The width of the floating layer is rendered according to the content width by default, and the width and maximum width can be freely set. +- `overlayInnerStyle` is used to define the style of the floating layer content, such as the maximum height of the content and whether to display a scroll bar. When the value is of type function, the width of the floating layer content can be the same as that of the trigger element. + +{{ style }} + +### Pop-up layer that can be displayed + +You can freely control the display or hiding of the pop-up layer by using `visible`. + +{{ visible }} + +### Mounting Parent Node + +The default parent node of the floating layer is `body`. You can freely adjust the parent node element mounted by `attach`. + +{{ container }} + +### Destroy pop-up layer when it can be hidden + +`destroyOnClose` is used to control whether to destroy the floating layer content when the floating layer is hidden. + +{{ destroy }} + +### Disable pop-up layer + +When the component is turned off, the pop-up layer is no longer displayed. + +{{ disabled }} From f1206eaa4d519b1ae7c3b3fcc861d9b55839f8f8 Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Mon, 3 Apr 2023 14:09:25 +0800 Subject: [PATCH 242/312] Feature/web/sticky tool (#1241) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 * feat: 暂存尝试联动backtop * feat: 初始化sticky-tool demo文档 * chore: update description * fix: lint:fix * fix: lint:fix * fix: 颜色修复 --------- Co-authored-by: yiranwu Co-authored-by: yuyang --- style/web/components/sticky-tool/_index.less | 6 ++++++ style/web/components/sticky-tool/_mixin.less | 3 +++ style/web/components/sticky-tool/_var.less | 6 ++++++ 3 files changed, 15 insertions(+) diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less index c983d4f934..8f52b3badc 100644 --- a/style/web/components/sticky-tool/_index.less +++ b/style/web/components/sticky-tool/_index.less @@ -14,6 +14,12 @@ border: @sticky-tool-border; box-shadow: @sticky-tool-shadow; + &-popup-content { + box-shadow: @sticky-tool-popup-shadow; + font-size: @sticky-tool-popup-font-size; + color: @sticky-tool-popup-color; + } + .sticky-item-basic(); &--square { diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less index be7bf59420..0c36ffc9c7 100644 --- a/style/web/components/sticky-tool/_mixin.less +++ b/style/web/components/sticky-tool/_mixin.less @@ -5,6 +5,7 @@ margin: @sticky-item-margin; text-align: center; font-size: @sticky-item-font-size; + color: @sticky-item-text-color; &:hover { cursor: pointer; @@ -19,6 +20,7 @@ width: @sticky-item-icon-size; height: @sticky-item-icon-size; margin: @sticky-item-icon-margin-normal; + color: @sticky-item-icon-color; } } @@ -30,6 +32,7 @@ width: @sticky-item-icon-size; height: @sticky-item-icon-size; margin: @sticky-item-icon-margin-compact; + color: @sticky-item-icon-color; } } diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less index 2d859b501f..0ed96c434f 100644 --- a/style/web/components/sticky-tool/_var.less +++ b/style/web/components/sticky-tool/_var.less @@ -15,6 +15,9 @@ @sticky-tool-background: @bg-color-container; @sticky-tool-border: @component-border; @sticky-tool-shadow: @shadow-3; +@sticky-tool-popup-shadow: @shadow-3; +@sticky-tool-popup-font-size: @font-size-s; +@sticky-tool-popup-color: @text-color-secondary; // sticky-tool shape=square @sticky-tool-border-radius-square: @border-radius-medium; @@ -30,7 +33,10 @@ @sticky-item-label-height: @comp-size-xxs; @sticky-item-label-margin-top: @comp-margin-xxs; @sticky-item-font-size: @font-size-s; +@sticky-item-text-color: @text-color-secondary; @sticky-item-icon-size: @icon-l; +@sticky-item-icon-color: @text-color-primary; + // sticky-tool type=normal @sticky-item-size-normal: @comp-size-xxxl; @sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l; From 06a2aa444db9805bf52f1ecbee2fafff0c70dd55 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 3 Apr 2023 15:07:42 +0800 Subject: [PATCH 243/312] docs(Search): update docs (#1226) --- docs/mobile/api_v2/search.md | 24 +++++++-- style/mobile/components/search/v2/_index.less | 16 ++++++ style/mobile/utilities/_index.less | 50 +++++++++++++++++++ 3 files changed, 85 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api_v2/search.md b/docs/mobile/api_v2/search.md index 6beeb5248e..ab7e412897 100644 --- a/docs/mobile/api_v2/search.md +++ b/docs/mobile/api_v2/search.md @@ -1,17 +1,31 @@ --- title: Search 搜索框 -description: 用于用户输入搜索信息，并进行页面内容搜索 +description: 用于用户输入搜索信息，并进行页面内容搜索。 spline: base isComponent: true toc: false --- -### 基础搜索框 +## 代码演示 -使用场景：常用于全局内容搜索，位于搜索内容上方 +### 01 组件类型 + +基础搜索框 {{ base }} -### 不同输入状态 +获取焦点后显示取消按钮 + +{{ action }} + +### 02 组件样式 + +搜索框形状 + +{{ shape }} + +### 03 组件状态 + +默认状态其他对齐方式 -{{ status }} +{{ other }} diff --git a/style/mobile/components/search/v2/_index.less b/style/mobile/components/search/v2/_index.less index 23a52aa2ae..a71e695c2c 100644 --- a/style/mobile/components/search/v2/_index.less +++ b/style/mobile/components/search/v2/_index.less @@ -44,6 +44,8 @@ color: @search-text-color; font-size: @search-font-size; padding-left: 5px; + border: 0; + background: 0; } .@{prefix}-icon { @@ -71,4 +73,18 @@ text-align: center; } } + + // mobile vue + /* stylelint-disable-next-line */ + input::-webkit-input-placeholder, + input::placeholder { + color: @search-placeholder-color; + } + + input::-webkit-search-decoration, + input::-webkit-search-cancel-button, + input::-webkit-search-results-button, + input::-webkit-search-results-decoration { + display: none; + } } diff --git a/style/mobile/utilities/_index.less b/style/mobile/utilities/_index.less index f8770df6d0..36d1fc70dd 100644 --- a/style/mobile/utilities/_index.less +++ b/style/mobile/utilities/_index.less @@ -5,3 +5,53 @@ .@{prefix}-overflow-hidden { overflow: hidden; } + +.hotspot-expanded { + &.relative { + position: relative; + } + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + transform: scale(1.5); + } +} + +.border(@position: bottom, @border-color: @component-border) { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + top: if(@position = top, 0, unset); + bottom: if(@position = bottom, 0, unset); + left: if(@position = left, 0, unset); + right: if(@position = right, 0, unset); + background-color: @border-color; + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) { + &::after { + height: 1px; + left: 0; + right: 0; + transform: scaleY(.5); + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) { + &::after { + width: 1px; + top: 0; + bottom: 0; + transform: scaleX(.5); + } +} From 531c5df630663c10ab96fb3dd2bf2e4a6b250998 Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Tue, 4 Apr 2023 10:38:40 +0800 Subject: [PATCH 244/312] Feature/web/sticky tool (#1244) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 * feat: 暂存尝试联动backtop * feat: 初始化sticky-tool demo文档 * chore: update description * fix: lint:fix * fix: lint:fix * fix: 颜色修复 * feat: 添加hover动画 * feat: 完善动画 --------- Co-authored-by: yiranwu Co-authored-by: yuyang --- style/web/components/sticky-tool/_mixin.less | 1 + style/web/components/sticky-tool/_var.less | 1 + 2 files changed, 2 insertions(+) diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less index 0c36ffc9c7..2a151a7f0b 100644 --- a/style/web/components/sticky-tool/_mixin.less +++ b/style/web/components/sticky-tool/_mixin.less @@ -6,6 +6,7 @@ text-align: center; font-size: @sticky-item-font-size; color: @sticky-item-text-color; + transition: @sticky-item-bg-color-transition; &:hover { cursor: pointer; diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less index 0ed96c434f..d4f220bd9f 100644 --- a/style/web/components/sticky-tool/_var.less +++ b/style/web/components/sticky-tool/_var.less @@ -36,6 +36,7 @@ @sticky-item-text-color: @text-color-secondary; @sticky-item-icon-size: @icon-l; @sticky-item-icon-color: @text-color-primary; +@sticky-item-bg-color-transition: background-color @anim-duration-base linear; // sticky-tool type=normal @sticky-item-size-normal: @comp-size-xxxl; From aa1ab2b92ac1b31d0065dcc52611844e1ac47347 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 12:11:01 +0800 Subject: [PATCH 245/312] docs(Cascader): update docs (#1220) --- docs/mobile/api_v2/cascader.md | 22 ++++++++++++++----- .../mobile/components/cascader/v2/_index.less | 1 + 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api_v2/cascader.md b/docs/mobile/api_v2/cascader.md index 7abdbf6754..911e4d4e90 100644 --- a/docs/mobile/api_v2/cascader.md +++ b/docs/mobile/api_v2/cascader.md @@ -6,14 +6,26 @@ isComponent: true toc: false --- -### 基础 +## 代码演示 -#### 基本用法 +### 基础用法 {{ base }} -### 状态 +### 选项卡风格 -#### 禁用可选项 +{{ theme-tab }} -{{ status }} +### 进阶 + +#### 带初始值 + +{{ with-value }} + +#### 自定义 keys + +{{ keys }} + +#### 使用次级标题 + +{{ with-title }} diff --git a/style/mobile/components/cascader/v2/_index.less b/style/mobile/components/cascader/v2/_index.less index 2710d87f77..cd82d09bad 100644 --- a/style/mobile/components/cascader/v2/_index.less +++ b/style/mobile/components/cascader/v2/_index.less @@ -56,6 +56,7 @@ &-container { display: flex; transition: all ease .3s; + overflow-y: scroll; } } From 4b27bb8fae4bfdb8f5e4554a3b81904a59e75fb5 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 12:30:35 +0800 Subject: [PATCH 246/312] style(Search): update style (#1245) --- style/mobile/components/search/v2/_index.less | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/style/mobile/components/search/v2/_index.less b/style/mobile/components/search/v2/_index.less index a71e695c2c..64d4af6d45 100644 --- a/style/mobile/components/search/v2/_index.less +++ b/style/mobile/components/search/v2/_index.less @@ -12,6 +12,10 @@ color: @search-label-color; } + &--center { + text-align: center; + } + &__input-box { flex: 1; box-sizing: border-box; @@ -34,10 +38,6 @@ border-radius: @search-square-radius; } - &--center { - text-align: center; - } - .@{prefix}-input__keyword { display: inline-block; flex: 1; @@ -68,10 +68,6 @@ &__placeholder { color: @search-placeholder-color; - - &--center { - text-align: center; - } } // mobile vue From f8c5776dab7ed17729b907f71867dbee84aa5f5e Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 12:30:54 +0800 Subject: [PATCH 247/312] docs(Sticky): update docs (#1242) --- docs/mobile/api_v2/sticky.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/mobile/api_v2/sticky.md b/docs/mobile/api_v2/sticky.md index f0dc61ad20..c3a1c18f21 100644 --- a/docs/mobile/api_v2/sticky.md +++ b/docs/mobile/api_v2/sticky.md @@ -6,15 +6,18 @@ isComponent: true toc: false --- -### 基础吸顶 +## 代码演示 将内容包裹在 `Sticky` 组件内 +### 基础吸顶 + {{ base }} + ### 吸顶距离 -{{ offsetTop }} +{{ offset }} ### 指定容器 From 6e7679dd46f6fb17efca9188ed80e0f2f917c842 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 14:43:03 +0800 Subject: [PATCH 248/312] docs(Skeleton): update docs (#1243) --- docs/mobile/api_v2/skeleton.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/docs/mobile/api_v2/skeleton.md b/docs/mobile/api_v2/skeleton.md index 1c38203921..7cc98c08df 100644 --- a/docs/mobile/api_v2/skeleton.md +++ b/docs/mobile/api_v2/skeleton.md @@ -6,26 +6,27 @@ isComponent: true toc: false --- -### 基础骨架屏 +## 代码演示 -基础 +### 骨架屏类型 -{{ base }} +基础骨架屏 -头像组合 +{{ theme }} -{{ avatar-text }} +单元格骨架屏 -图片组合 +{{ cell-group }} -{{ pic-text }} -### 动画 +宫格骨架屏 -渐变加载动画 +{{ grid }} -{{ gradient }} +图文组合骨架屏 -### 闪烁加载动画 +{{ image-group }} -{{ flashed }} +### 组件动效 + +{{ animation }} \ No newline at end of file From ba68a9fc5b91eb929f01730b84fd6d70346b81e2 Mon Sep 17 00:00:00 2001 From: ccccpj Date: Tue, 4 Apr 2023 14:43:42 +0800 Subject: [PATCH 249/312] feat: input v2 & border (#1217) * feat: input v2 & border * fix: lint * fix: lint empty line --- style/mobile/components/input/v2/_index.less | 2 + style/mobile/utilities/_index.less | 52 +++++++++++++++++++- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/input/v2/_index.less b/style/mobile/components/input/v2/_index.less index dab8741224..4eabbd0df6 100644 --- a/style/mobile/components/input/v2/_index.less +++ b/style/mobile/components/input/v2/_index.less @@ -99,6 +99,8 @@ &__wrap--clearable-icon, &__wrap--suffix-icon, &__wrap--suffix { + display: flex; + &:empty { display: none; } diff --git a/style/mobile/utilities/_index.less b/style/mobile/utilities/_index.less index 36d1fc70dd..d1c0e81559 100644 --- a/style/mobile/utilities/_index.less +++ b/style/mobile/utilities/_index.less @@ -2,8 +2,56 @@ @import "./_animation.less"; -.@{prefix}-overflow-hidden { - overflow: hidden; +@import "../_variables.less"; + +.hotspot-expanded { + &.relative { + position: relative; + } + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + transform: scale(1.5); + } +} + +.border(@position: bottom, @border-color: @component-border) { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + top: if(@position = top, 0, unset); + bottom: if(@position = bottom, 0, unset); + left: if(@position = left, 0, unset); + right: if(@position = right, 0, unset); + background-color: @border-color; + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) { + &::after { + height: 1px; + left: 0; + right: 0; + transform: scaleY(.5); + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) { + &::after { + width: 1px; + top: 0; + bottom: 0; + transform: scaleX(.5); + } } .hotspot-expanded { From 542c5233dfc60206342f0e2932786e94f34baee3 Mon Sep 17 00:00:00 2001 From: Shine <791405318@qq.com> Date: Tue, 4 Apr 2023 14:44:19 +0800 Subject: [PATCH 250/312] docs(image): update image demo (#995) * docs: update image demo * docs: update image demo docs * docs(image): update image docs --- docs/mobile/api/image.md | 42 +++++++++++++--------------------------- 1 file changed, 13 insertions(+), 29 deletions(-) diff --git a/docs/mobile/api/image.md b/docs/mobile/api/image.md index a26b3bc5bf..110eb7a187 100644 --- a/docs/mobile/api/image.md +++ b/docs/mobile/api/image.md @@ -6,46 +6,30 @@ isComponent: true toc: false --- -### 基础用法 +### 基础类型 -基础用法和原生 img 标签一样，可以设置 `src`、`alt`、`class` 等原生属性 +图片样式可为圆形、圆角方形、方形 -{{ base }} +#### 裁切样式 -### 图片形状 +{{ crop }} -通过 `shape` 属性可以设置图片形状，可选项有 `circle` | `round` | `square`，分别代表圆形、圆角方形、方形 +#### 圆角样式 -当图片长宽不相等时，无法使用 `circle` 展示一个完整圆形 +{{ rounded }} -{{ shape }} +### 状态 -#### 填充模式 +#### 加载中提示 -通过 `fit` 属性可以设置图片填充模式，可选项有 `contain` | `cover` | `fill` | `none` | `scale-down`，效果与原生的 `object-fit` 属性一致 +{{ loading-tip }} -{{ fit }} +#### 加载失败提醒 -#### 图片位置 +{{ loading-error }} -通过 `position` 属性可以设置图片位置，效果与原生的 `object-position` 属性一致 +### 规格 -{{ position }} -#### 图片懒加载 +{{ size }} -通过lazy属性来开启图片懒加载 - -{{ lazy }} - -### 加载中提示 - -Image 组件提供了默认的加载中提示，也支持通过 `loading` 插槽自定义提示内容 - -{{ loading }} - -### 加载失败提示 - -Image 组件提供了默认的加载失败提示，也支持通过 `error` 插槽自定义提示内容 - -{{ error }} From 2980891c7644f63457936f555c7ad7a62c52d8af Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 4 Apr 2023 16:07:03 +0800 Subject: [PATCH 251/312] chore(deps-dev): bump lint-staged from 13.1.4 to 13.2.0 (#1236) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.1.4 to 13.2.0. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/commits/v13.2.0) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b278cb0d5d..4ebcbc1fea 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "jest": "^27.5.1", "jest-html-reporter": "^3.1.3", "jest-watch-typeahead": "^2.2.0", - "lint-staged": "~13.1.0", + "lint-staged": "~13.2.0", "min-indent": "^1.0.1", "postcss-less": "^5.0.0", "stylelint": "~14.16.1", From 7cc9e3cca337bb1690f73810f5a4ac74aff2c679 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 4 Apr 2023 17:23:47 +0800 Subject: [PATCH 252/312] fix: update loading style and image docs (#1248) --- docs/mobile/api_v2/image.md | 30 ++------------------ style/mobile/components/image/v2/_index.less | 30 ++++++++++---------- style/mobile/components/loading/_index.less | 10 +++---- 3 files changed, 22 insertions(+), 48 deletions(-) diff --git a/docs/mobile/api_v2/image.md b/docs/mobile/api_v2/image.md index a26b3bc5bf..1f5a94bab9 100644 --- a/docs/mobile/api_v2/image.md +++ b/docs/mobile/api_v2/image.md @@ -20,32 +20,6 @@ toc: false {{ shape }} -#### 填充模式 +### 组件状态 -通过 `fit` 属性可以设置图片填充模式，可选项有 `contain` | `cover` | `fill` | `none` | `scale-down`，效果与原生的 `object-fit` 属性一致 - -{{ fit }} - -#### 图片位置 - -通过 `position` 属性可以设置图片位置，效果与原生的 `object-position` 属性一致 - -{{ position }} - -#### 图片懒加载 - -通过lazy属性来开启图片懒加载 - -{{ lazy }} - -### 加载中提示 - -Image 组件提供了默认的加载中提示，也支持通过 `loading` 插槽自定义提示内容 - -{{ loading }} - -### 加载失败提示 - -Image 组件提供了默认的加载失败提示，也支持通过 `error` 插槽自定义提示内容 - -{{ error }} +{{ status }} diff --git a/style/mobile/components/image/v2/_index.less b/style/mobile/components/image/v2/_index.less index 6b3e7c9cba..3dc51c1053 100644 --- a/style/mobile/components/image/v2/_index.less +++ b/style/mobile/components/image/v2/_index.less @@ -12,6 +12,8 @@ justify-content: center; background-color: @image-loading-bg-color; color: @image-loading-color; + width: 100%; + height: 100%; } &--loading-text { @@ -24,20 +26,18 @@ height: 100%; } - &--shape { - &-circle { - border-radius: 50%; - overflow: hidden; - } - - &-round { - border-radius: @image-round-radius; - overflow: hidden; - } - - &-square { - border-radius: 0; - overflow: hidden; - } + &--circle { + border-radius: 50%; + overflow: hidden; + } + + &--round { + border-radius: @image-round-radius; + overflow: hidden; + } + + &--square { + border-radius: 0; + overflow: hidden; } } diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index 9921dc699b..9c21f0529d 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -90,8 +90,8 @@ } &__dot { - width: @loading-dot-size; - height: @loading-dot-size; + width: 20%; + height: 20%; border-radius: 50%; background-color: currentColor; animation-duration: 1.8s; @@ -105,9 +105,9 @@ } &s { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; + display: flex; + justify-content: space-between; + align-items: center; animation: none; } } From 1d28ee5fb13e3bbadbf5b86b181352b8705f3e0d Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Thu, 6 Apr 2023 10:34:10 +0800 Subject: [PATCH 253/312] fix(InputNumber): float add integer error (#1251) --- 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 a355f35609..1695342b85 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -110,7 +110,7 @@ export function positiveAdd(num1: number, num2: number): number { const r1 = num1.toString().split('.')[1]?.length || 0; const r2 = num2.toString().split('.')[1]?.length || 0; // 整数不存在精度问题，直接返回 - if (!r1 || !r2) return num1 + num2; + if (!r1 && !r2) return num1 + num2; let newNumber1 = num1; let newNumber2 = num2; const diff = Math.abs(r1 - r2); From 015257a520c336240b336f91456a8896424f3a09 Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 6 Apr 2023 15:18:02 +0800 Subject: [PATCH 254/312] docs: fix md format problem (#1253) Co-authored-by: sunzhe --- docs/web/api/breadcrumb.en-US.md | 2 +- docs/web/api/drawer.en-US.md | 2 +- docs/web/api/dropdown.en-US.md | 2 +- docs/web/api/menu.en-US.md | 2 +- docs/web/api/message.en-US.md | 3 ++- docs/web/api/notification.en-US.md | 3 ++- docs/web/api/pagination.en-US.md | 2 +- docs/web/api/popconfirm.en-US.md | 3 ++- docs/web/api/popup.en-US.md | 3 ++- 9 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/web/api/breadcrumb.en-US.md b/docs/web/api/breadcrumb.en-US.md index 68dfa68b66..c9b38a74df 100644 --- a/docs/web/api/breadcrumb.en-US.md +++ b/docs/web/api/breadcrumb.en-US.md @@ -1,6 +1,6 @@ --- title: Breadcrumb -description:Displays the position of the current page in the system hierarchy, and can return to any previous page level. +description: Displays the position of the current page in the system hierarchy, and can return to any previous page level. isComponent: true usage: { title: '', description: '' } spline: navigation diff --git a/docs/web/api/drawer.en-US.md b/docs/web/api/drawer.en-US.md index 4ade1d9699..543af32033 100644 --- a/docs/web/api/drawer.en-US.md +++ b/docs/web/api/drawer.en-US.md @@ -1,7 +1,7 @@ --- title: Drawer -description:Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. +description: Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/dropdown.en-US.md b/docs/web/api/dropdown.en-US.md index 08f1ffe379..bd70ffc859 100644 --- a/docs/web/api/dropdown.en-US.md +++ b/docs/web/api/dropdown.en-US.md @@ -1,6 +1,6 @@ --- title: Dropdown -description:It is used to carry too many operation sets and accept more operations through drop-down expansion. +description: It is used to carry too many operation sets and accept more operations through drop-down expansion. isComponent: true usage: { title: "", description: "" } spline: navigation diff --git a/docs/web/api/menu.en-US.md b/docs/web/api/menu.en-US.md index e68339ad6f..b555506c0c 100644 --- a/docs/web/api/menu.en-US.md +++ b/docs/web/api/menu.en-US.md @@ -1,6 +1,6 @@ --- title: Menu -description:Used to host the architecture of the site and provide a menu list to jump to. +description: Used to host the architecture of the site and provide a menu list to jump to. isComponent: true usage: { title: '', description: '' } spline: navigation diff --git a/docs/web/api/message.en-US.md b/docs/web/api/message.en-US.md index ba2e705e8b..ac401500c4 100644 --- a/docs/web/api/message.en-US.md +++ b/docs/web/api/message.en-US.md @@ -1,5 +1,6 @@ --- -title: Message global prompt description:Provide lightweight global feedback on user actions. +title: Message +description: Provide lightweight global feedback on user actions. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/notification.en-US.md b/docs/web/api/notification.en-US.md index ac9293fdd5..0125ede4f2 100644 --- a/docs/web/api/notification.en-US.md +++ b/docs/web/api/notification.en-US.md @@ -1,5 +1,6 @@ --- -title: Notification Message Notification description:A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing. +title: Notification +description: A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/pagination.en-US.md b/docs/web/api/pagination.en-US.md index 17baf9afac..ea8a7bd983 100644 --- a/docs/web/api/pagination.en-US.md +++ b/docs/web/api/pagination.en-US.md @@ -1,6 +1,6 @@ --- title: Pagination -description:Controls for switching content within a module. +description: Controls for switching content within a module. isComponent: true usage: { title: '', description: '' } spline: navigation diff --git a/docs/web/api/popconfirm.en-US.md b/docs/web/api/popconfirm.en-US.md index 81e4c69ac1..bb7a5dfabb 100644 --- a/docs/web/api/popconfirm.en-US.md +++ b/docs/web/api/popconfirm.en-US.md @@ -1,5 +1,6 @@ --- -title: Popconfirm Bubble confirmation box description:The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it. +title: Popconfirm +description: The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/popup.en-US.md b/docs/web/api/popup.en-US.md index e5d728930c..4da67d45a6 100644 --- a/docs/web/api/popup.en-US.md +++ b/docs/web/api/popup.en-US.md @@ -1,5 +1,6 @@ --- -title: Popup description:The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component. +title: Popup +description: The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component. isComponent: true usage: { title: '', description: '' } spline: message From 642cc0d7df341b67b4a876cf8bb9428225465181 Mon Sep 17 00:00:00 2001 From: GolderBrother <1204788939@qq.com> Date: Thu, 6 Apr 2023 17:31:54 +0800 Subject: [PATCH 255/312] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20cascader?= =?UTF-8?q?=E3=80=81checkbox=E3=80=81date-picker=E7=AD=89=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E7=BB=84=E4=BB=B6=E7=9A=84=E8=8B=B1=E6=96=87=E6=96=87?= =?UTF-8?q?=E6=A1=A3=20(#1249)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 增加 cascader、checkbox、date-picker等输入组件的英文文档 * docs: md 文档开头的格式规范，description字段前面添加换行，后面添加空格 --------- Co-authored-by: James --- docs/web/api/cascader.en-US.md | 103 +++++++++++++++++++++++ docs/web/api/checkbox.en-US.md | 31 +++++++ docs/web/api/color-picker.en-US.md | 51 ++++++++++++ docs/web/api/date-picker.en-US.md | 97 ++++++++++++++++++++++ docs/web/api/form.en-US.md | 97 ++++++++++++++++++++++ docs/web/api/input-number.en-US.md | 61 ++++++++++++++ docs/web/api/select-input.en-US.md | 88 ++++++++++++++++++++ docs/web/api/select.en-US.md | 128 +++++++++++++++++++++++++++++ docs/web/api/slider.en-US.md | 59 +++++++++++++ docs/web/api/switch.en-US.md | 31 +++++++ docs/web/api/tag-input.en-US.md | 60 ++++++++++++++ docs/web/api/textarea.en-US.md | 31 +++++++ docs/web/api/time-picker.en-US.md | 61 ++++++++++++++ docs/web/api/transfer.en-US.md | 42 ++++++++++ docs/web/api/tree-select.en-US.md | 54 ++++++++++++ docs/web/api/upload.en-US.md | 101 +++++++++++++++++++++++ 16 files changed, 1095 insertions(+) create mode 100644 docs/web/api/cascader.en-US.md create mode 100644 docs/web/api/checkbox.en-US.md create mode 100644 docs/web/api/color-picker.en-US.md create mode 100644 docs/web/api/date-picker.en-US.md create mode 100644 docs/web/api/form.en-US.md create mode 100644 docs/web/api/input-number.en-US.md create mode 100644 docs/web/api/select-input.en-US.md create mode 100644 docs/web/api/select.en-US.md create mode 100644 docs/web/api/slider.en-US.md create mode 100644 docs/web/api/switch.en-US.md create mode 100644 docs/web/api/tag-input.en-US.md create mode 100644 docs/web/api/textarea.en-US.md create mode 100644 docs/web/api/time-picker.en-US.md create mode 100644 docs/web/api/transfer.en-US.md create mode 100644 docs/web/api/tree-select.en-US.md create mode 100644 docs/web/api/upload.en-US.md diff --git a/docs/web/api/cascader.en-US.md b/docs/web/api/cascader.en-US.md new file mode 100644 index 0000000000..665c40aab8 --- /dev/null +++ b/docs/web/api/cascader.en-US.md @@ -0,0 +1,103 @@ +--- +title: Cascader +description: Cascading selectors are useful for data sets that have a clear hierarchical structure that the user can view and select through. in general, a cascade selector include:Selectors and cascades. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Single Cascaded Selector + +Provide a single cascade selector, after the selection of each level to display the selected content. + +{{ base }} + +### Multi-selection cascade selector + +Provide multi-choice cascading selector, display multi-choice content through label. + +{{ multiple }} + +### Collapsible Options Multi-selector + +In the case of multiple selections, the selected items are collapsed, and the selected items exceeding the value are collapsed. + +{{ collapsed }} + +### Cascade selectors of different size + +Provide large, medium and small three different height, width selector to adapt to different size layout. + +{{ size }} + +### Filterable Cascade Selector + +Enter the Filter option. It is used in business scenarios with specific requirements. Filter text by default. + +{{ filterable }} + +### Disabling Cascading Selectors + +Cascaded selectors that provide a disabled state. + +{{ disabled }} + +### Display only the last cascade selector + +You can display only the label of the last level of the selected item in the input box, rather than the full path of the selected item. + +{{ show-all-levels }} + +### Cascading selector for selecting any item + +When enabled, you can select any level of options. + +{{ check-strictly }} + +### Cascaded selector in full path mode + +The default input/output value type is the value of the leaf node. The full path value is used when `value-type="full"` + +{{ value-type }} + +### Customize Selected Value Mode + +Only valid for multiple-choice conditions.` onlyLeaft`indicates that only leaf nodes are selected in any case;`parentFirst`indicates that only parent nodes are selected when all child nodes are selected;`all`indicates that both parent nodes and child nodes are selected. + +{{ value-mode }} + +### Different Trigger Methods + +Submenus can be loaded by different triggering methods. + +{{ trigger }} + +### Display when the text is too long + +When the data text is too long, use the browser `title` to display the long text. + +{{ ellipsis }} + +### Limit the number of options + +Limits the maximum number of selections for a multi-choice selector. This is typically used when you need to limit the number of multi-choice options. + +{{ max }} + +### Customizing Data Field Aliases + +When using `options` to configure drop-down options, if the data fields are not `label` and `value`, you can use `keys` to define aliases. + +{{ keys }} + +### Dynamic Loading + +The selector contents can be customized according to requirements. It is used in business scenarios with complex logic or specific requirements. + +{{ load }} + +### Cascading Panels + +Cascading panel used alone for combination with other triggers + +{{ panel }} diff --git a/docs/web/api/checkbox.en-US.md b/docs/web/api/checkbox.en-US.md new file mode 100644 index 0000000000..9e52e71b78 --- /dev/null +++ b/docs/web/api/checkbox.en-US.md @@ -0,0 +1,31 @@ +--- +title: Checkbox +description: A check box is a selection control that allows the user to toggle between checked and unchecked with a single click. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Basic multi-selection box + +The simplest form of multi-selection box, often used for multi-selection of data in the form. + +{{ base }} + +### Linked Multi-check Box + +Linked check boxes are check boxes used in conjunction with other components. + +{{ link }} + +### Grouped Multi-check Box Groups + +A group of check boxes that are combined according to certain attributes. + +{{ group }} + +### Controlled Class Checkbox + +The checkbox supports v-model, controlled and uncontrolled usage. + +{{ controlled }} diff --git a/docs/web/api/color-picker.en-US.md b/docs/web/api/color-picker.en-US.md new file mode 100644 index 0000000000..5512b08338 --- /dev/null +++ b/docs/web/api/color-picker.en-US.md @@ -0,0 +1,51 @@ +--- +title: ColorPicker +description: Used for color selection, supports multiple formats. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Panel Color Selector + +There is no trigger and the color picker panel is displayed directly. + +{{ panel }} + +### Color Picker with Trigger Element + +Trigger the display selector panel through the trigger, and transparently transfer all attributes to the panel selector component. + +{{ trigger }} + +### Color selector for different color modes + +Support monochrome mode, linear gradient two color mode selection, can be used in a single mode, can also switch between two modes at the same time. Use `colorMode` to configure. + +{{ color-mode }} + +### Color picker with transparency adjustment + +Set `enableAlpha=true` to enable the transparency of the selector. + +{{ enable-alpha }} + +### Color Selector with Configurable System Color + +You can configure the system preset colors through `swatchColors`. If the value is null or [], the system colors will not be displayed. + +{{ swatch-color }} + +### Configurable Color Selector for Recently Used Color + +The most recently used color can be configured through `recentColors`. A value of [] indicates that the "Most Recently Used Color" in the component is used as the standard. If the value length is greater than 0, the "Most Recently Used Color" is displayed based on this value. A value of null does not display Recent Colors at all. + +{{ recent-color }} + +### Disabling Color Selector + +{{ status-disabled }} + +### Read-only Color Selector + +{{ status-readonly }} diff --git a/docs/web/api/date-picker.en-US.md b/docs/web/api/date-picker.en-US.md new file mode 100644 index 0000000000..f01ca0defa --- /dev/null +++ b/docs/web/api/date-picker.en-US.md @@ -0,0 +1,97 @@ +--- +title: DatePicker +description: Use to select a specific date or a range of dates. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Year Selector + +Used for year selection. It is used when the user only needs to enter the year information, and is often used in query scenarios where data is recorded by year, such as annual bills. + +{{ year }} + +### Month Selector + +Used for month selection. Use only when the user needs to enter month information. + +{{ month }} + +### Quarter Selector + +Used for quarterly selection. Use only when the user needs to enter quarterly information. + +{{ quarter }} + +### Week Selector + +Used for week selection. Used when the user only needs to enter year + week information. + +{{ week }} + +### Date Picker + +For selection of specific dates. Use only when the user needs to enter very specific date information. + +{{ base }} + +### Date Time Selector + +For date and time associated selections. Used when the user needs to enter a date including a time. + +{{ date-time }} + +### Date Range Selector + +Used for selection of a certain period of time. Used when the user needs to enter a date range. + +{{ date-range }} + +### Date picker with shortcut label + +with a time stamp that can be set in advance. When the date information is regular and needs to be clicked for quick input. + +{{ date-presets-alt }} + +### Date selector can be disabled + +The date that does not support user selection can be disabled from clicking. + +{{ disable-date }} + +### Selector for specifying the start of the week + +You can specify the day of the week from which a week starts through the `firstDayOfWeek` attribute. This is only valid when a date is selected (`mode = date`). The default value is 1, that is, it starts from Monday. You can set it to start from Sunday as follows. + +{{ first-day-of-week }} + +### Custom Icon Selector + +Prefix and suffix icons can be customized through `prefixIcon` and `suffixIcon`. + +{{ custom-icon }} + +### Date Selection Panel Used Alone + +You can use `DatePickerPanel` and `DateRangePickerPanel` separately. You can assemble your own date picker. + +{{ panel }} + +## FAQ + +### The backend data format is special. How can I format the date quickly? + +The `onChange` callback event will return the currently selected date object wrapped in `dayjs`. You can format it with the help of a third-party library or use the provided `dayjs` object for custom conversion. + +```js + { + const data = dayjsValue.format('YYYYMMDD'); + ... +}}> + + { + const data = dayjsValue.map(d => d.format('YYYYMMDD')); + ... +}}> +``` diff --git a/docs/web/api/form.en-US.md b/docs/web/api/form.en-US.md new file mode 100644 index 0000000000..29c71abb28 --- /dev/null +++ b/docs/web/api/form.en-US.md @@ -0,0 +1,97 @@ +--- +title: Form +description: Used to collect, verify and submit data, generally composed of input box, radio box, check box, selector and other controls. +isComponent: true +usage: { title: "", description: "" } +spline: form +--- + +### Typical Form + +A typical form component contains a variety of form items, such as input boxes, selectors, radio boxes, multicheck boxes, switches, text input, and so on. + +- If there is a submit button `
    + +
    + +### 推荐/慎用示例 + +##### 步骤不宜过多，过长的步骤建议优化流程或使用其它交互方式。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 每个小步骤建议尽量简洁清晰，以降低用户的理解和操作成本；若小步骤本身已经具有较高的复杂度，建议使用其它方式呈现。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 尽量避免嵌套步骤条。 + +
    + +
    +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| [进度条](.Progress) | | +| [选项卡](./Tabs) | | diff --git a/docs/miniprogram/_design/Swipecell.md b/docs/miniprogram/_design/Swipecell.md new file mode 100644 index 0000000000..744b300e3a --- /dev/null +++ b/docs/miniprogram/_design/Swipecell.md @@ -0,0 +1,81 @@ +# 滑动操作 Swipecell + +## 组件设计指南 + +### 何时使用 + +需要针对列表项目进行某项低频的辅助操作时使用。 + +### 组件搭配使用 + +##### 与单元格、按钮组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +### 常见用法 + +##### 通常使用在对话列表、收藏列表、购物车等场景中，承载删除、收藏等辅助操作。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。 + + +
    + +
    + +
    + +### 推荐/慎用示例 + +##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。 + +
    + + +
    + +
    + +##### 按钮的顺序、颜色使用需要符合用户预期。 +
    + + +
    + +
    + +##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。 +
    + + +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | | diff --git a/docs/miniprogram/_design/Switch.md b/docs/miniprogram/_design/Switch.md new file mode 100644 index 0000000000..8c51f59263 --- /dev/null +++ b/docs/miniprogram/_design/Switch.md @@ -0,0 +1,41 @@ +# 开关 Switch + +## 组件设计指南 + +### 何时使用 + +当需要切换某个功能的开启、关闭时使用。 + +### 推荐/慎用示例 + +##### 开关状态的颜色使用建议符合颜色语义，尽量避免让开启、关闭状态的颜色产生混淆。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。 +
    +
    + + +
    +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [时间选择器](./datetimepicker) | | diff --git a/docs/miniprogram/_design/Textarea.md b/docs/miniprogram/_design/Textarea.md new file mode 100644 index 0000000000..ef14a21fc6 --- /dev/null +++ b/docs/miniprogram/_design/Textarea.md @@ -0,0 +1,63 @@ +# 多行文本框 Textarea + +## 组件设计指南 + +### 何时使用 + +需要进行文字输入，且需填写的字数较多时使用。 + +### 常见用法 + +##### 常见于表单、内容发布的场景中，用于输入较长的文本内容。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 尽量避免输入过于复杂的文本内容，考虑将内容拆分，让用户分步输入。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 建议根据待输入的内容决定多行文本框的高度。 +
    +
    + + +
    + +
    + + +
    +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [多行文本框](./textarea) | | +| [搜索框](./search) | | diff --git a/docs/miniprogram/_design/Toast.md b/docs/miniprogram/_design/Toast.md new file mode 100644 index 0000000000..6a4d93980e --- /dev/null +++ b/docs/miniprogram/_design/Toast.md @@ -0,0 +1,57 @@ +# 轻提示 Toast + +## 组件设计指南 + +### 何时使用 + +当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 + +### 与页面布局相关 + +##### 轻提示通常放置在页面正中间，一段时间后自动消失。 + +
    +
    + +
    +
    + +
    + +### 组件搭配使用 + +##### 轻提示经常和加载搭配使用，在页面内进行某项操作后，用作加载反馈。 + +
    +
    + +
    +
    + +
    + +### 推荐/慎用示例 + +##### 轻提示的文案内容通常不超过30个字，确保用户有充足的时间进行阅读，若需要提示较长的文本内容，建议使用其它交互方式。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行更多交互时使用，轻提示会在一段时间后自动消失 | +| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭 | +| [公告栏](./noticeBar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失 | diff --git a/docs/miniprogram/_design/Upload.md b/docs/miniprogram/_design/Upload.md new file mode 100644 index 0000000000..19047a8c8e --- /dev/null +++ b/docs/miniprogram/_design/Upload.md @@ -0,0 +1,54 @@ +# 上传 Upload + +## 组件设计指南 + +### 何时使用 + +当需要进行图片上传时使用。 + +### 组件搭配使用 + +##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./actionsheet)，供用户选择不同渠道进行新的上传。 + +
    + +
    + +
    + +##### 点击已经上传的图片可跳转[图片预览](./imageview)，让用户对已上传的图片进行快速查看。 + +
    + +
    + +
    + +### 推荐/慎用示例 + +##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。 + +
    + + +
    + +
    + +##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。 + +
    +
    + + +
    +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片](./image) | | +| [图片预览](./imageview) | | diff --git a/docs/miniprogram/_design/avatar.md b/docs/miniprogram/_design/avatar.md new file mode 100644 index 0000000000..47851c9881 --- /dev/null +++ b/docs/miniprogram/_design/avatar.md @@ -0,0 +1,69 @@ +# 头像 Avatar + +## 组件设计指南 + +### 何时使用 + +作为一个用户信息展示，或用来代表某个/某些具体用户。 + +### 组件搭配使用 + +##### 头像与[动作面板](./actionSheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 + +
    +
    + +
    +
    +
    + +##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。 + +
    +
    + +
    +
    + +
    + +##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。 + +
    +
    + +
    +
    + +
    + +### 常见用法 + +##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。 + +
    + +
    + +
    + + +### 推荐/慎用示例 + +##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。 + +
    +
    + + +
    + +
    + + +
    +
    + + +
    + diff --git a/docs/miniprogram/_design/cascader.md b/docs/miniprogram/_design/cascader.md new file mode 100644 index 0000000000..9ad7ce91a3 --- /dev/null +++ b/docs/miniprogram/_design/cascader.md @@ -0,0 +1,62 @@ +# 级联选择器 Cascader + +## 组件设计指南 + +### 何时使用 + +当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 组件搭配使用 + +##### 级联选择器与[索引](./Indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 + +
    + +
    + +
    + +### 常见用法 + +##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。 +
    +
    + +
    +
    +
    + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
    +
    + + +
    +
    +
    + +##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选择器](./button) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/link.md b/docs/miniprogram/_design/link.md new file mode 100644 index 0000000000..76cca2bdd7 --- /dev/null +++ b/docs/miniprogram/_design/link.md @@ -0,0 +1,49 @@ +# 链接 Link + +## 组件设计指南 + +### 何时使用 + +当需要跳转至外链时使用。 + +### 组件搭配使用 + +##### 链接与[消息通知](./message)、[公告栏](./notiesbar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 + +
    +
    + +
    + +
    + +
    +
    +
    + + +### 推荐/慎用示例 + +##### 在同一段文本中如使用多个链接，需要利用纯文本字符等将其区隔开。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/_design/navbar.md b/docs/miniprogram/_design/navbar.md new file mode 100644 index 0000000000..81445cc4d2 --- /dev/null +++ b/docs/miniprogram/_design/navbar.md @@ -0,0 +1,52 @@ +# 导航栏 Navbar + +## 组件设计指南 + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 带图标的导航栏与[抽屉](./Drawer)、[动作面板](./ActionSheet)组合使用，用于唤起一组操作或功能。 + +
    + +
    + +
    + +
    + +
    + +### 常见用法 + +##### 通常用来承载页面标题和返回操作，点击跳转回到上一个打开的页面。 + +
    + +
    + +
    + +##### 在应用内，通常用来承载搜索、扫码等功能性高频操作。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 +
    +
    + +
    +
    diff --git a/docs/miniprogram/_design/swiper.md b/docs/miniprogram/_design/swiper.md new file mode 100644 index 0000000000..c98947257b --- /dev/null +++ b/docs/miniprogram/_design/swiper.md @@ -0,0 +1,45 @@ +# 轮播图 Swiper + +## 组件设计指南 + +### 何时使用 + +当需要承载一组banner或一组图片时使用。 + +### 常见用法 + +##### 用于放置营销活动或承载平台广告等具有时效性的内容入口。 + +
    +
    + +
    + +
    + +
    +
    +
    + + ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
    +
    + + +
    +
    + +
    diff --git a/docs/miniprogram/design/avatar.md b/docs/miniprogram/design/avatar.md new file mode 100644 index 0000000000..83167ab0a8 --- /dev/null +++ b/docs/miniprogram/design/avatar.md @@ -0,0 +1,67 @@ + + +### 何时使用 + +作为一个用户信息展示，或用来代表某个/某些具体用户。 + +### 组件搭配使用 + +##### 头像与[动作面板](./actionSheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 + +
    +
    + +
    +
    +
    + +##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。 + +
    +
    + +
    +
    + +
    + +##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。 + +
    +
    + +
    +
    + +
    + +### 常见用法 + +##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。 + +
    + +
    + +
    + + +### 推荐/慎用示例 + +##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。 + +
    +
    + + +
    + +
    + + +
    +
    + + +
    + diff --git a/docs/miniprogram/design/cascader.md b/docs/miniprogram/design/cascader.md new file mode 100644 index 0000000000..a8ef244319 --- /dev/null +++ b/docs/miniprogram/design/cascader.md @@ -0,0 +1,60 @@ + + +### 何时使用 + +当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 组件搭配使用 + +##### 级联选择器与[索引](./Indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 + +
    + +
    + +
    + +### 常见用法 + +##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。 +
    +
    + +
    +
    +
    + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
    +
    + + +
    +
    +
    + +##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选择器](./button) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/checkbox.md b/docs/miniprogram/design/checkbox.md index 992f4f83e8..cb066d37d0 100644 --- a/docs/miniprogram/design/checkbox.md +++ b/docs/miniprogram/design/checkbox.md @@ -41,7 +41,7 @@
    - +
    diff --git a/docs/miniprogram/design/dialog.md b/docs/miniprogram/design/dialog.md index 7e370cf3bc..b0e7499086 100644 --- a/docs/miniprogram/design/dialog.md +++ b/docs/miniprogram/design/dialog.md @@ -15,7 +15,7 @@
    - +
    diff --git a/docs/miniprogram/design/drawer.md b/docs/miniprogram/design/drawer.md index b802a36667..028eb68e5c 100644 --- a/docs/miniprogram/design/drawer.md +++ b/docs/miniprogram/design/drawer.md @@ -2,15 +2,15 @@ ### 何时使用 -需要收折展示一组数量较多的菜单时使用。 +需要收折展示一组数量较多的菜单时使用 ### 组件搭配使用 ##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。 -
    +
    -
    +
    @@ -18,17 +18,18 @@ ##### 在网站场景，通常用来收折展示整个网站的菜单导航。 -
    +
    -
    +
    ##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。 -
    +
    -
    +
    +
    diff --git a/docs/miniprogram/design/indexes.md b/docs/miniprogram/design/indexes.md new file mode 100644 index 0000000000..51ecae6a98 --- /dev/null +++ b/docs/miniprogram/design/indexes.md @@ -0,0 +1,54 @@ + + +### 何时使用 + +当数据项较多时，为方便用户快速找到目标数据项时使用。 + +### 组件搭配使用 + +##### 索引与[单选框](./Radio)、[多选框](./Checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。 + +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 索引项排序应具备一定的逻辑相关性。 + +
    + + +
    + +
    + + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [侧边栏](./Sidebar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/miniprogram/design/link.md b/docs/miniprogram/design/link.md new file mode 100644 index 0000000000..42bbc18d35 --- /dev/null +++ b/docs/miniprogram/design/link.md @@ -0,0 +1,47 @@ + + +### 何时使用 + +当需要跳转至外链时使用。 + +### 组件搭配使用 + +##### 链接与[消息通知](./message)、[公告栏](./notiesbar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 + +
    +
    + +
    + +
    + +
    +
    +
    + + +### 推荐/慎用示例 + +##### 在同一段文本中如使用多个链接，需要利用纯文本字符等将其区隔开。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/design/navbar.md b/docs/miniprogram/design/navbar.md new file mode 100644 index 0000000000..071de0eaa2 --- /dev/null +++ b/docs/miniprogram/design/navbar.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 带图标的导航栏与[抽屉](./Drawer)、[动作面板](./ActionSheet)组合使用，用于唤起一组操作或功能。 + +
    + +
    + +
    + +
    + +
    + +### 常见用法 + +##### 通常用来承载页面标题和返回操作，点击跳转回到上一个打开的页面。 + +
    + +
    + +
    + +##### 在应用内，通常用来承载搜索、扫码等功能性高频操作。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 +
    +
    + +
    +
    diff --git a/docs/miniprogram/design/pull-down-refresh.md b/docs/miniprogram/design/pull-down-refresh.md index 07bbdc419f..50813b6897 100644 --- a/docs/miniprogram/design/pull-down-refresh.md +++ b/docs/miniprogram/design/pull-down-refresh.md @@ -11,11 +11,11 @@
    - +
    - +
    @@ -24,7 +24,7 @@
    - +
    @@ -37,7 +37,7 @@
    - +
    @@ -45,11 +45,11 @@
    - +
    - +
    diff --git a/docs/miniprogram/design/swiper.md b/docs/miniprogram/design/swiper.md new file mode 100644 index 0000000000..f2598ed3ac --- /dev/null +++ b/docs/miniprogram/design/swiper.md @@ -0,0 +1,43 @@ + + +### 何时使用 + +当需要承载一组banner或一组图片时使用。 + +### 常见用法 + +##### 用于放置营销活动或承载平台广告等具有时效性的内容入口。 + +
    +
    + +
    + +
    + +
    +
    +
    + + ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 +
    +
    + +
    +
    + +
    + + +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
    +
    + + +
    +
    + +
    From e3f4a01150a9bd32e08a446d286d3e2db86a13d3 Mon Sep 17 00:00:00 2001 From: WenKang Date: Fri, 7 Apr 2023 17:43:59 +0800 Subject: [PATCH 258/312] fix:tab style bug (#1255) --- style/web/components/tabs/_mixin.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/tabs/_mixin.less b/style/web/components/tabs/_mixin.less index e7f5cabb18..9859aa43b9 100644 --- a/style/web/components/tabs/_mixin.less +++ b/style/web/components/tabs/_mixin.less @@ -7,5 +7,5 @@ right: @right; bottom: @bottom; left: @left; - background-color: @tab-card-bg; + background-color: @tab-card-stroke; } From 07d0764514f5b037f3967e7e79144f3350edc372 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 11 Apr 2023 11:20:07 +0800 Subject: [PATCH 259/312] fix: remove extra right style for autowidth inputnumber (#1258) --- style/web/components/input-number/_index.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less index bb6fe614d9..03e353dc02 100644 --- a/style/web/components/input-number/_index.less +++ b/style/web/components/input-number/_index.less @@ -68,10 +68,6 @@ .@{prefix}-input__inner { min-width: 42px; } - - &:not(.@{inputNumberCls}--column) .@{prefix}-input-number__increase { - right: -4px; - } } & &__decrease, From fc9761ecea37456a73258e001e22f73aac1a0b8c Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Tue, 11 Apr 2023 14:17:59 +0800 Subject: [PATCH 260/312] Fix/date picker wrong last week (#1257) * fix(datePicker): last week of year swapped into first error * docs(datePicker): add comment for codes --- js/date-picker/format.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 29ac4551f7..fe20eaefda 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -1,10 +1,15 @@ import isString from 'lodash/isString'; import dayjs from 'dayjs'; +import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'; +import isLeapYear from 'dayjs/plugin/isLeapYear'; import { extractTimeFormat } from './utils'; import log from '../log'; type DateValue = string | number | Date; +dayjs.extend(isoWeeksInYear); +dayjs.extend(isLeapYear); + export const TIME_FORMAT = 'HH:mm:ss'; // 统一解析日期格式字符串成 Dayjs 对象 @@ -26,8 +31,16 @@ export function parseToDayjs( const yearStr = dateText.split(/[-/.\s]/)[0]; const weekStr = dateText.split(/[-/.\s]/)[1]; const weekFormatStr = format.split(/[-/.\s]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').startOf('year'); - for (let i = 0; i <= 52; i += 1) { + + let firstWeek = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').startOf('year'); + // 第一周ISO定义: 本年度第一个星期四所在的星期 + // 如果第一年第一天在星期四后, 直接跳到下一周, 下一周必定是第一周 + // 否则本周即为第一周 + if (firstWeek.day() > 4 || firstWeek.day() === 0) firstWeek = firstWeek.add(1, 'week'); + + // 一年有52或者53周, 引入IsoWeeksInYear辅助查询 + const weekCounts = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').isoWeeksInYear(); + for (let i = 0; i <= weekCounts; i += 1) { let nextWeek = firstWeek.add(i, 'week'); // 重置为周的第一天 if (timeOfDay === 'start') nextWeek = nextWeek.subtract(5, 'day'); From 09585d3fc814c871746275ef923f926c7c7045e4 Mon Sep 17 00:00:00 2001 From: ccccpj Date: Tue, 11 Apr 2023 14:49:41 +0800 Subject: [PATCH 261/312] feat: update cursor-pointer (#1259) * feat: update cursor-pointer * fix: fix lint --------- Co-authored-by: anlyyao --- style/mobile/components/calendar/v2/_index.less | 2 ++ style/mobile/mixins/_cursor.less | 7 +++++++ 2 files changed, 9 insertions(+) create mode 100644 style/mobile/mixins/_cursor.less diff --git a/style/mobile/components/calendar/v2/_index.less b/style/mobile/components/calendar/v2/_index.less index 21f6da320f..6648975e0c 100644 --- a/style/mobile/components/calendar/v2/_index.less +++ b/style/mobile/components/calendar/v2/_index.less @@ -1,5 +1,7 @@ @import "../../../base.less"; +@import "../../../mixins/_cursor.less"; + @import "./_var.less"; .@{prefix}-calendar { diff --git a/style/mobile/mixins/_cursor.less b/style/mobile/mixins/_cursor.less new file mode 100644 index 0000000000..0b8c143268 --- /dev/null +++ b/style/mobile/mixins/_cursor.less @@ -0,0 +1,7 @@ +.cursor-pointer() { + cursor: pointer; + -webkit-tap-highlight-color: transparent; + /* stylelint-disable-next-line */ + -webkit-user-select: none; + user-select: none; +} From 00e9c77b0463986d94e10891340eddaface1ffe2 Mon Sep 17 00:00:00 2001 From: jarmywang Date: Tue, 11 Apr 2023 19:21:14 +0800 Subject: [PATCH 262/312] Update Badge.md (#1260) --- docs/mobile/api_v2/badge.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api_v2/badge.md b/docs/mobile/api_v2/badge.md index 22f1f7b0c5..e9c86d6a61 100644 --- a/docs/mobile/api_v2/badge.md +++ b/docs/mobile/api_v2/badge.md @@ -6,14 +6,14 @@ isComponent: true toc: false --- -### 普通徽标 +### 组件类型 {{ base }} -### 按钮徽标 +### 组件样式 -{{ button }} +{{ theme }} -### 单行徽标 +### 组件尺寸 -{{ cell }} \ No newline at end of file +{{ size }} \ No newline at end of file From 96145e4c8d6041f6ca6dc5010a3c2090cf2aac94 Mon Sep 17 00:00:00 2001 From: azhe Date: Wed, 12 Apr 2023 18:56:42 +0800 Subject: [PATCH 263/312] chore: remove useless code (#1262) Co-authored-by: sunzhe --- style/web/components/popup/_mixin.less | 2 -- style/web/components/tooltip/_index.less | 13 ------------- 2 files changed, 15 deletions(-) diff --git a/style/web/components/popup/_mixin.less b/style/web/components/popup/_mixin.less index 61907f449e..002552b4e4 100644 --- a/style/web/components/popup/_mixin.less +++ b/style/web/components/popup/_mixin.less @@ -56,8 +56,6 @@ .arrow-placement-top() { .@{prefix}-popup[data-popper-placement^="top"] .@{prefix}-popup__arrow { - bottom: calc(-@popup-arrow-width / 2); - &::before { border-top-left-radius: 100%; box-shadow: @popup-top-arrow-shadow; diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less index d978b3c369..ac98ecf869 100644 --- a/style/web/components/tooltip/_index.less +++ b/style/web/components/tooltip/_index.less @@ -73,7 +73,6 @@ .@{prefix}-popup__arrow { background: inherit; - width: auto; height: auto; &::before { @@ -88,15 +87,3 @@ } } } - -.@{prefix}-popup[data-popper-placement^="top"].@{prefix}-tooltip .@{prefix}-popup__arrow { - bottom: @tooltip-arrow-position; -} - -.@{prefix}-popup[data-popper-placement^="left"].@{prefix}-tooltip .@{prefix}-popup__arrow { - right: @tooltip-arrow-position; -} - -.@{prefix}-popup[data-popper-placement^="right"].@{prefix}-tooltip .@{prefix}-popup__arrow { - left: calc(0px - @tooltip-arrow-position); -} From 2343aabf64b68aa5b41dbbe10f7e44610160ccc5 Mon Sep 17 00:00:00 2001 From: PDeer <23275429@qq.com> Date: Thu, 13 Apr 2023 13:41:47 +0800 Subject: [PATCH 264/312] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E5=9C=A8?= =?UTF-8?q?=E9=83=A8=E5=88=86=E6=83=85=E5=86=B5=E4=B8=8Btimeline-item=5F?= =?UTF-8?q?=5Fdot=E4=B8=BA=E9=87=8D=E7=BD=AEbox-sizing=E8=80=8C=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=94=99=E8=AF=AF=20(#1264?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/web/components/timeline/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less index 1e7c5b7957..6ecb3dcb6d 100644 --- a/style/web/components/timeline/_index.less +++ b/style/web/components/timeline/_index.less @@ -26,6 +26,7 @@ .@{prefix}-timeline-item { &__dot { + box-sizing: unset; position: absolute; width: @timeline-wrapper-item-dot-size; height: @timeline-wrapper-item-dot-size; From 9e581e84b7f2a160789470325f70e0542eccb778 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 13 Apr 2023 13:55:36 +0800 Subject: [PATCH 265/312] fix(popconfirm): inner text font weight (#1265) --- style/web/components/popconfirm/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/web/components/popconfirm/_index.less b/style/web/components/popconfirm/_index.less index 518e6d9c23..048f5df926 100644 --- a/style/web/components/popconfirm/_index.less +++ b/style/web/components/popconfirm/_index.less @@ -45,7 +45,7 @@ display: inline-block; vertical-align: top; max-width: @popconfirm-max-width; - font: @font-title-small; + font: @font-body-medium; color: @text-color-primary; } From a16e37a99620a77c5c994140d617aa6e917b72c2 Mon Sep 17 00:00:00 2001 From: wangyang0210 Date: Thu, 13 Apr 2023 13:57:18 +0800 Subject: [PATCH 266/312] fix(input): override edge password input default style (#1261) --- style/web/components/input/_index.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less index 4f72a7ff60..ce52a0a90b 100644 --- a/style/web/components/input/_index.less +++ b/style/web/components/input/_index.less @@ -52,6 +52,11 @@ width: 100%; } + // 隐藏Edge浏览器默认的密码框样式 + &[type="password"]::-ms-reveal { + display: none; + } + &[type="search"]::-webkit-search-decoration, &[type="search"]::-webkit-search-cancel-button, &[type="search"]::-webkit-search-results-button, From 1c0f362b9aceb3c9edd2156580187fa6ca18c751 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 13 Apr 2023 14:33:33 +0800 Subject: [PATCH 267/312] fix(grid): update mobile style (#1263) * fix(grid): update mobile style * fix: resolve lint errors * fix: resolve lint errors * fix: resolve lint errors --- docs/mobile/api_v2/grid.md | 20 +++- .../components/grid-item/v2/_index.less | 112 +++++------------- .../mobile/components/grid-item/v2/_var.less | 1 + style/mobile/components/grid/v2/_index.less | 13 +- style/mobile/utilities/_index.less | 50 -------- 5 files changed, 58 insertions(+), 138 deletions(-) diff --git a/docs/mobile/api_v2/grid.md b/docs/mobile/api_v2/grid.md index dee21473c6..cc49995906 100644 --- a/docs/mobile/api_v2/grid.md +++ b/docs/mobile/api_v2/grid.md @@ -10,10 +10,26 @@ toc: false {{ base }} -### 带说明宫格 +### 带描述宫格 {{ desc }} +### 带边框宫格 + +{{ bordered }} + ### 带徽标宫格 -{{ badge }} \ No newline at end of file +{{ badge }} + +### 可滑动宫格 + +{{ scroll }} + +### 可传图标宫格 + +{{ icon }} + +### 卡片宫格 + +{{ card }} \ No newline at end of file diff --git a/style/mobile/components/grid-item/v2/_index.less b/style/mobile/components/grid-item/v2/_index.less index f66328fc28..f85afee35d 100644 --- a/style/mobile/components/grid-item/v2/_index.less +++ b/style/mobile/components/grid-item/v2/_index.less @@ -4,124 +4,74 @@ .@{item} { box-sizing: border-box; - height: 100%; - // float: left; - display: inline-block; - vertical-align: top; + display: flex; + align-items: center; + padding: 16px 0 8px; + flex-direction: column; + background: @grid-item-bg-color; + flex-basis: 84px; + flex-shrink: 0; + + &--bordered { + position: relative; + .border(top, @grid-item-border-color); - &--hover { - background-color: @grid-item-hover-bg-color; + &::before { + .hairline-left(@grid-item-border-color); + } } - &--auto-size { - width: 84px; + &--horizontal { + flex-direction: row; + justify-content: center; } - &__wrapper { + &--hover { + background-color: @grid-item-hover-bg-color; } &__content { - display: flex; - flex-direction: column; - align-items: center; overflow: hidden; position: relative; - padding: @grid-item-padding 0 12px; - - &--horizontal { - flex-direction: row; - padding-left: @grid-item-padding; - } - } - - &__words { - width: 100%; - text-align: center; - position: relative; - flex-direction: column; - display: flex; - flex: 1; - justify-content: center; - align-items: center; + margin-top: @grid-item-text-padding-top; &--horizontal { + margin-top: 0; margin-left: 12px; - } - - &:empty { - display: none; + text-align: left; } } &__image { - &:not(:empty) { - width: @grid-item-image-width; - height: @grid-item-image-width; - - &.@{item}__image--small { - width: 32px; - height: 32px; - } + width: @grid-item-image-width; + height: @grid-item-image-width; - &.@{item}__image--middle { - width: 40px; - height: 40px; - } - - .@{prefix}-grid__image { - width: 100%; - height: 100%; - } - } - - &--icon { - display: flex; - align-items: center; - justify-content: center; - background: @bg-color-secondarycontainer; - border-radius: @radius-default; + &--small { + width: 32px; + height: 32px; } - } - - &--left { - justify-self: flex-start; - align-items: flex-start; - .@{prefix}-grid-item__words { - text-align: left; + &--middle { + width: 40px; + height: 40px; } } - &__text { + &__title { width: inherit; color: @grid-item-text-color; font-size: @grid-item-text-font-size; line-height: @grid-item-text-line-height; - padding-top: @grid-item-text-padding-top; &--small, &--middle { font-size: 12px; } - - &--horizontal { - padding-top: 0; - text-align: left; - } } &__description { - width: inherit; color: @grid-item-description-color; font-size: @grid-item-description-font-size; line-height: @grid-item-description-line-height; - - &--horizontal { - text-align-last: left; - } - } - - &__icon { - font-size: @grid-item-icon-font-size; } } diff --git a/style/mobile/components/grid-item/v2/_var.less b/style/mobile/components/grid-item/v2/_var.less index 1b4da35764..4dada2810f 100644 --- a/style/mobile/components/grid-item/v2/_var.less +++ b/style/mobile/components/grid-item/v2/_var.less @@ -16,3 +16,4 @@ @grid-item-hover-bg-color: var(--td-grid-item-hover-bg-color, @bg-color-secondarycontainer); @grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 12px); @grid-item-horizontal-text-description-top: var(--td-grid-item-horizontal-text-description-top, 2px); +@grid-item-border-color: var(--td-grid-item-border-color, @component-stroke); diff --git a/style/mobile/components/grid/v2/_index.less b/style/mobile/components/grid/v2/_index.less index 07bbbec6c0..60fc77a9a3 100644 --- a/style/mobile/components/grid/v2/_index.less +++ b/style/mobile/components/grid/v2/_index.less @@ -5,15 +5,18 @@ .@{prefix}-grid { position: relative; overflow: hidden; - background-color: @grid-bg-color; - - &__content { - width: auto; - } + display: grid; + box-sizing: border-box; &--card { margin: 0 16px; border-radius: @grid-card-radius; overflow: hidden; } + + &--auto-size { + overflow: scroll; + flex-wrap: nowrap; + display: flex; + } } diff --git a/style/mobile/utilities/_index.less b/style/mobile/utilities/_index.less index d1c0e81559..24a8201627 100644 --- a/style/mobile/utilities/_index.less +++ b/style/mobile/utilities/_index.less @@ -53,53 +53,3 @@ transform: scaleX(.5); } } - -.hotspot-expanded { - &.relative { - position: relative; - } - - &::after { - content: ""; - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - transform: scale(1.5); - } -} - -.border(@position: bottom, @border-color: @component-border) { - position: relative; - - &::after { - content: ""; - display: block; - position: absolute; - top: if(@position = top, 0, unset); - bottom: if(@position = bottom, 0, unset); - left: if(@position = left, 0, unset); - right: if(@position = right, 0, unset); - background-color: @border-color; - } -} - -.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) { - &::after { - height: 1px; - left: 0; - right: 0; - transform: scaleY(.5); - } -} - -.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) { - &::after { - width: 1px; - top: 0; - bottom: 0; - transform: scaleX(.5); - } -} From 34175c2ddcba9d07d1325cb0c4136b1309842ecd Mon Sep 17 00:00:00 2001 From: chunqi feng <44807921+fengchunqi@users.noreply.github.com> Date: Thu, 13 Apr 2023 14:46:32 +0800 Subject: [PATCH 268/312] refactor(rate): rate popover (#1233) * refactor(rate): rate popover * docs: rate docs --- docs/mobile/api_v2/rate.md | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/docs/mobile/api_v2/rate.md b/docs/mobile/api_v2/rate.md index 99cd2481e0..e292acab67 100644 --- a/docs/mobile/api_v2/rate.md +++ b/docs/mobile/api_v2/rate.md @@ -6,34 +6,40 @@ isComponent: true toc: false --- -### 实心评分 +### 组件类型 -{{ filled }} +实心评分 -### 空心评分 +{{ base }} -{{ outline }} +自定义评分 -### 自定义数量评分 +{{ custom }} + +自定义评分数量 {{ count }} -### 半星评分 +带描述评分 + +{{ show-text }} -{{ allow-half }} +### 组件状态 -### 带描述评分 +{{ action }} -{{ text }} +### 组件样式 -### 禁用评分 +评分大小 -{{ disabled }} +{{ size }} -### 设置评分颜色 +设置评分颜色 {{ color }} -### 评价规格 +### 特殊样式 -{{ size }} +竖向带描述评分 + +{{ special }} From 083c4c577f3b6557cc74467ec5c6a3c6e7cbcd0d Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 13 Apr 2023 15:15:26 +0800 Subject: [PATCH 269/312] docs: fix md render error (#1266) Co-authored-by: sunzhe --- docs/web/api/slider.en-US.md | 2 +- docs/web/api/switch.en-US.md | 2 +- docs/web/api/transfer.en-US.md | 3 ++- docs/web/api/tree-select.en-US.md | 3 ++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/web/api/slider.en-US.md b/docs/web/api/slider.en-US.md index 34329ce54d..4e3be14be6 100644 --- a/docs/web/api/slider.en-US.md +++ b/docs/web/api/slider.en-US.md @@ -1,6 +1,6 @@ --- title: Slider Slider -description:A slider (slide type input device) is a control that allows the user to select the appropriate value (a value or range of values) by sliding in a continuous or intermittent interval. +description: A slider (slide type input device) is a control that allows the user to select the appropriate value (a value or range of values) by sliding in a continuous or intermittent interval. isComponent: true usage: { title: '', description: '' } spline: form diff --git a/docs/web/api/switch.en-US.md b/docs/web/api/switch.en-US.md index 4241ca88b0..91e704b4b2 100644 --- a/docs/web/api/switch.en-US.md +++ b/docs/web/api/switch.en-US.md @@ -1,6 +1,6 @@ --- title: Switch -description:A selection control used for two mutually exclusive options to turn the option on or off. +description: A selection control used for two mutually exclusive options to turn the option on or off. isComponent: true usage: { title: '', description: '' } spline: form diff --git a/docs/web/api/transfer.en-US.md b/docs/web/api/transfer.en-US.md index f05c41ad10..04b75c626b 100644 --- a/docs/web/api/transfer.en-US.md +++ b/docs/web/api/transfer.en-US.md @@ -1,7 +1,8 @@ --- title: Transfer description: Moving option elements in two columns in an intuitive manner is a data container for single or batch movement of options to complete the selection. The left column is Source and the right is Destination. -isComponent: true usage: { title: '', description: '' } +isComponent: true +usage: { title: '', description: '' } spline: form --- diff --git a/docs/web/api/tree-select.en-US.md b/docs/web/api/tree-select.en-US.md index 6bbb9eafdf..52b074330b 100644 --- a/docs/web/api/tree-select.en-US.md +++ b/docs/web/api/tree-select.en-US.md @@ -1,7 +1,8 @@ --- title: TreeSelect description: Information entry control similar to Select, suitable for selecting a tree data structure. -isComponent: true usage: { title: '', description: '' } +isComponent: true +usage: { title: '', description: '' } spline: form --- From 426b495c6016c93d6ac1695c9cf00f44e1f71314 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Fri, 14 Apr 2023 13:12:50 +0800 Subject: [PATCH 270/312] fix(upload): using new style (#1269) --- docs/mobile/api_v2/upload.md | 4 ++ style/mobile/components/image/v2/_index.less | 2 +- style/mobile/components/upload/v2/_index.less | 53 +++++++------------ style/mobile/components/upload/v2/_var.less | 1 + 4 files changed, 26 insertions(+), 34 deletions(-) diff --git a/docs/mobile/api_v2/upload.md b/docs/mobile/api_v2/upload.md index ec1538fb85..ece49f1f87 100644 --- a/docs/mobile/api_v2/upload.md +++ b/docs/mobile/api_v2/upload.md @@ -13,3 +13,7 @@ toc: false ### 多选上传图片 {{ multiple }} + +### 组件状态 + +{{ status }} \ No newline at end of file diff --git a/style/mobile/components/image/v2/_index.less b/style/mobile/components/image/v2/_index.less index 3dc51c1053..198e4bd92c 100644 --- a/style/mobile/components/image/v2/_index.less +++ b/style/mobile/components/image/v2/_index.less @@ -4,7 +4,7 @@ .@{prefix}-image { color: @image-color; - vertical-align: top; + font-size: 0; &__mask { display: flex; diff --git a/style/mobile/components/upload/v2/_index.less b/style/mobile/components/upload/v2/_index.less index be24211e97..2457b0c892 100644 --- a/style/mobile/components/upload/v2/_index.less +++ b/style/mobile/components/upload/v2/_index.less @@ -3,46 +3,32 @@ @import "./_var.less"; .@{prefix}-upload { - &__grid { - &-content { - padding: 0; - } - - &-file { - position: relative; - } - } + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px 8px; + padding: 16px; - &__add-icon { + &__item { + position: relative; width: 100%; - height: 100%; - display: none; - align-items: center; - justify-content: center; - font-size: @upload-add-icon-font-size; - background-color: @upload-add-bg-color; - color: @upload-add-color; - border-radius: @upload-radius; - &:only-child { - display: flex; + &--add { + padding-top: 100%; + font-size: @upload-add-icon-font-size; + background-color: @upload-add-bg-color; + color: @upload-add-color; + border-radius: @upload-radius; } } - &__thumbnail { - width: 100%; - height: 100%; - max-height: 100%; - overflow: hidden; - } - - &__wrapper { - position: relative; - border-radius: @upload-radius; - overflow: hidden; + &__add-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); } - &__close-btn { + &__delete-btn { position: absolute; top: 0; right: 0; @@ -51,6 +37,7 @@ justify-content: center; width: 20px; height: 20px; + color: @upload-delete-icon-color; border-top-right-radius: @upload-radius; border-bottom-left-radius: @upload-radius; background-color: @font-gray-3; @@ -61,8 +48,8 @@ position: absolute; left: 0; top: 0; + bottom: 0; width: 100%; - height: 100%; background-color: @font-gray-3; display: flex; flex-direction: column; diff --git a/style/mobile/components/upload/v2/_var.less b/style/mobile/components/upload/v2/_var.less index 4ca48bafbb..4b7efb3884 100644 --- a/style/mobile/components/upload/v2/_var.less +++ b/style/mobile/components/upload/v2/_var.less @@ -2,3 +2,4 @@ @upload-add-bg-color: var(--td-upload-add-bg-color, @bg-color-secondarycontainer); @upload-radius: var(--td-upload-radius, @radius-default); @upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 28px); +@upload-delete-icon-color: var(--td-upload-delete-icon-color, @font-white-1); From b6ba918ac0735a5e48b507456a2c8fcb5c9713ce Mon Sep 17 00:00:00 2001 From: yusuf <47958012+yusuf-yz@users.noreply.github.com> Date: Fri, 14 Apr 2023 15:48:29 +0800 Subject: [PATCH 271/312] refactor(message): new message (#1267) --- docs/mobile/api/message.md | 2 +- docs/mobile/api_v2/message.md | 2 +- .../mobile/components/message/v2/_index.less | 33 +++++++++++++++++++ 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/docs/mobile/api/message.md b/docs/mobile/api/message.md index e9a2001215..7c3f0f2b60 100644 --- a/docs/mobile/api/message.md +++ b/docs/mobile/api/message.md @@ -8,7 +8,7 @@ toc: false ### 基础消息通知 -弹窗内容为纯文本、标题和副标题、带操作按钮。 +用于轻量级反馈或提示，不会打断用户操作。 {{ base }} diff --git a/docs/mobile/api_v2/message.md b/docs/mobile/api_v2/message.md index e9a2001215..7c3f0f2b60 100644 --- a/docs/mobile/api_v2/message.md +++ b/docs/mobile/api_v2/message.md @@ -8,7 +8,7 @@ toc: false ### 基础消息通知 -弹窗内容为纯文本、标题和副标题、带操作按钮。 +用于轻量级反馈或提示，不会打断用户操作。 {{ base }} diff --git a/style/mobile/components/message/v2/_index.less b/style/mobile/components/message/v2/_index.less index 0ae53178bc..09586ffb83 100644 --- a/style/mobile/components/message/v2/_index.less +++ b/style/mobile/components/message/v2/_index.less @@ -37,6 +37,11 @@ white-space: nowrap; } + &__close-wrap { + display: flex; + align-items: center; + } + &--info { color: @message-info-color; } @@ -72,3 +77,31 @@ margin-left: @spacer; } } + +.message-enter-active { + animation: messageEnter .5s; +} + +.message-leave-active { + animation: messageOut .2s; +} + +@keyframes messageEnter { + from { + transform: translate3d(0, -@message-height, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes messageOut { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(0, -@message-height, 0); + } +} From 290d17f982629a7192102189a6c03892dbcf7342 Mon Sep 17 00:00:00 2001 From: brian Date: Fri, 14 Apr 2023 15:49:12 +0800 Subject: [PATCH 272/312] Refactor/link (#1270) * link Mobile Component * create link doc * fix: lint fix --- docs/mobile/api_v2/link.md | 15 ++++ style/mobile/components/link/v2/_index.less | 88 +++++++++++++++++++++ style/mobile/components/link/v2/_var.less | 43 ++++++++++ 3 files changed, 146 insertions(+) create mode 100644 docs/mobile/api_v2/link.md create mode 100644 style/mobile/components/link/v2/_index.less create mode 100644 style/mobile/components/link/v2/_var.less diff --git a/docs/mobile/api_v2/link.md b/docs/mobile/api_v2/link.md new file mode 100644 index 0000000000..6a9fbbc2f1 --- /dev/null +++ b/docs/mobile/api_v2/link.md @@ -0,0 +1,15 @@ +--- +title: Link 标签 +description: 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。 +spline: base +isComponent: true +toc: false +--- + +### 01 组件类型 + +{{ base }} + +### 02 组件状态 + +{{ status }} diff --git a/style/mobile/components/link/v2/_index.less b/style/mobile/components/link/v2/_index.less new file mode 100644 index 0000000000..382f78247e --- /dev/null +++ b/style/mobile/components/link/v2/_index.less @@ -0,0 +1,88 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.link-size(@size) { + @contentFontSize: "link-content-@{size}-font-size"; + @contentLineHeight: "link-content-@{size}-line-height"; + @iconSize: "link-icon-@{size}-font-size"; + + .@{link}--@{size} { + .@{link}__content { + font-size: @@contentFontSize; + line-height: @@contentLineHeight; + } + .@{link}__prefix-icon, + .@{link}__suffix-icon { + font-size: @@iconSize; + } + .@{link}__prefix-icon { + margin-left: @link-icon-margin; + } + .@{link}__suffix-icon { + margin-right: @link-icon-margin; + } + } +} + +.link-theme(@theme) { + @color: "link-@{theme}-color"; + @activeColor: "link-@{theme}-active-color"; + @disabledColor: "link-@{theme}-disabled-color"; + + .@{link}--@{theme} { + color: @@color; + + &.@{link}--underline::after { + border-color: @@color; + } + + &.@{link}--disabled { + color: @@disabledColor; + } + + &.@{link}--hover { + color: @@activeColor; + + &.@{link}--underline::after { + border-color: @@activeColor; + } + } + } +} + +.link-size(small); +.link-size(medium); +.link-size(large); + +.link-theme(primary); +.link-theme(success); +.link-theme(warning); +.link-theme(default); +.link-theme(danger); + +.@{link} { + position: relative; + display: flex; + align-items: center; + box-sizing: content-box; + + &--underline::after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 2px; + opacity: 1; + border-bottom: 1px solid rgb(205, 11, 231); + } + + &__prefix-icon:not(:empty) + &__content:not(:empty) { + padding-left: 4px; + } + + &__content:not(:empty) + &__suffix-icon:not(:empty) { + padding-left: 4px; + } +} diff --git a/style/mobile/components/link/v2/_var.less b/style/mobile/components/link/v2/_var.less new file mode 100644 index 0000000000..0e39ae9d64 --- /dev/null +++ b/style/mobile/components/link/v2/_var.less @@ -0,0 +1,43 @@ +// 状态色 - 默认色 + +@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色 +@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色 +@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色 + +// 状态色 - 主色 +@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色 +@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色 +@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色 + +// 状态色 - 成功 +@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色 +@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色 +@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色 + +// 状态色 - 警告 +@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色 +@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色 +@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色 + +// 状态色 - 危险 +@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色 +@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色 +@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色 + +// 字号 +@link-content-small-font-size: 12px; +@link-content-small-line-height: 20px; +@link-icon-small-font-size: 14px; + +@link-content-medium-font-size: 14px; +@link-content-medium-line-height: 22px; +@link-icon-medium-font-size: 14px; + +@link-content-large-font-size: 16px; +@link-content-large-line-height: 24px; +@link-icon-large-font-size: 18px; + +@link-icon-margin: 6px; +@themes: primary, success, warning, default, danger; + +@link: ~"@{prefix}-link"; From ec176b07cc753609fb41761bac9b1425a2c49198 Mon Sep 17 00:00:00 2001 From: jerimizhang <3435677954@qq.com> Date: Fri, 14 Apr 2023 15:50:03 +0800 Subject: [PATCH 273/312] Refractor dialog (#1250) --- docs/mobile/api_v2/dialog.md | 24 ++++++++++++++++--- style/mobile/components/dialog/v2/_index.less | 16 ++++++------- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/docs/mobile/api_v2/dialog.md b/docs/mobile/api_v2/dialog.md index 4d090165a8..4f3883c9ea 100644 --- a/docs/mobile/api_v2/dialog.md +++ b/docs/mobile/api_v2/dialog.md @@ -6,20 +6,38 @@ isComponent: true toc: false --- -### 反馈类对话框 +## 代码演示 + +按钮的样式，默认使用 `variant = text`，如果任意按钮改变了 `variant`，那么全部按钮都改变成这个。 + +### 组件类型 + +#### 反馈类对话框 用于用户进行了一个操作，需传达重要信息，告知用户当前状况的情况。 {{ feedback }} -### 确认类对话框 +#### 确认类对话框 用于用户进行了一个操作，后果比较严重，需要用户二次确认的情况。 例如 退出、删除、清空等操作 {{ confirm }} -### 输入对话框 +#### 输入对话框 用于用户进行了一个操作，需输入下一步操作的必要信息。 例如 输入密码 {{ input }} + +#### 带图片对话框 + +对话框中可以插入图片元素，并且自定义位置。 + +{{ image-dialog }} + +### 组件状态 + +文字按钮、水平基础按钮、垂直基础按钮、多按钮、附带关闭按钮 + +{{ multi-state }} diff --git a/style/mobile/components/dialog/v2/_index.less b/style/mobile/components/dialog/v2/_index.less index 911822e0d1..cdb3f451f1 100644 --- a/style/mobile/components/dialog/v2/_index.less +++ b/style/mobile/components/dialog/v2/_index.less @@ -10,8 +10,8 @@ &__close-btn { position: absolute; - top: 16rpx; - right: 16rpx; + top: 8px; + right: 8px; color: @dialog-close-color; } @@ -34,7 +34,7 @@ } &__header + &__body { - margin-top: 16rpx; + margin-top: 8px; } &__body { @@ -60,7 +60,7 @@ &__footer { display: flex; - padding: 48rpx; + padding: 24px; &--column { flex-flow: column-reverse; @@ -71,7 +71,7 @@ } &--full { - padding: 64rpx 0 0; + padding: 32px 0 0; } } @@ -83,18 +83,18 @@ white-space: nowrap; &--horizontal + &--horizontal { - margin-left: 24rpx; + margin-left: 12px; } &--vertical + &--vertical { - margin-bottom: 24rpx; + margin-bottom: 12px; } &--text { flex: 1; --td-button-border-radius: 0; - --td-button-medium-height: 112rpx; + --td-button-medium-height: 56px; border-radius: 0; From fa429d910c11d7b45514f6cda04e96546507d000 Mon Sep 17 00:00:00 2001 From: Y Date: Fri, 14 Apr 2023 16:40:05 +0800 Subject: [PATCH 274/312] feat: update design for miniprogram (#1271) * Create link.md * Create Indexes.md * Create cascader.md * Update cascader.md * Create avatar.md * Update cascader.md * Create swiper.md * Create navbar.md * Update navbar.md * Update Indexes.md * Update avatar.md * Update link.md * Update cascader.md * Update navbar.md * Update swiper.md * Update Drawer.md * Update Drawer.md * Update Drawer.md * Update Drawer.md * Update swiper.md * Update avatar.md * Update cascader.md * Update navbar.md * Update Indexes.md * Update Drawer.md * Update swiper.md * Update Drawer.md * Create Sliderbar.md * Update Sliderbar.md * Create Steps.md * Update link.md * Update Indexes.md * Update navbar.md * Update cascader.md * Update avatar.md * Update swiper.md * Create Calendar.md * Update avatar.md * Update link.md * Update Drawer.md * Update Indexes.md * Update navbar.md * Update navbar.md * Update cascader.md * Update swiper.md * Create DateTimePicker.md * Update DateTimePicker.md * Create Input.md * Create Picker.md * Create Rate.md * Create Search.md * Create Switch.md * Create Textarea.md * Create Upload.md * Create Badge.md * Create CountDown.md * Create Empty.md * Create Progress.md * Create Result.md * Create Loading.md * Create Message.md * Create Swipecell.md * Create Toast.md * Rename Sliderbar.md to Sidebar.md * Update and rename Sidebar.md to SideBar.md * Update SideBar.md * Update Steps.md * Update and rename Calendar.md to Calender.md * Update and rename Calender.md to Calendar.md * Update DateTimePicker.md * Update Input.md * Update Picker.md * Update Picker.md * Update Rate.md * Update Search.md * Update Switch.md * Update Textarea.md * Update Switch.md * Update Progress.md * Update Message.md * Update Swipecell.md * Update Toast.md * Update Calendar.md * Update Toast.md * Update Swipecell.md * Update Swipecell.md * Update Message.md * Update Progress.md * Update Empty.md * Update CountDown.md * Update Calendar.md * Update Calendar.md * Update Calendar.md * Update DateTimePicker.md * Update DateTimePicker.md * Update Input.md * Update Picker.md * Update Rate.md * Update Rate.md * Update Rate.md * Update Rate.md * Update Badge.md * Update PullDownRefresh.md * Update Drawer.md * Update Drawer.md * Update PullDownRefresh.md * Update Calendar.md * Update DateTimePicker.md * Update Input.md * Update Badge.md * Update Empty.md * Update Progress.md * Update Message.md * Update and rename Swipecell.md to SwipeCell.md * Update Toast.md * Update Checkbox.md * Update Radio.md * Update Slider.md * Update Slider.md * Update Button.md * Update Divider.md * Update Divider.md * Update Fab.md * Update link.md * Update Indexes.md * Update navbar.md * Update TabBar.md * Update Tabs.md * Update cascader.md * Update avatar.md * Update Image.md * Update ImageViewer.md * Update swiper.md * Update ActionSheet.md * Update Dialog.md * Update Loading.md * Update Loading.md * Update SideBar.md * Update Button.md * Update Divider.md * Update Button.md * Update Divider.md * Update TabBar.md * Update SideBar.md * Update SideBar.md * Update Steps.md * Update Steps.md * Update Steps.md * Update ActionSheet.md * Update Drawer.md * Update Badge.md * Update Calendar.md * Update CountDown.md * Update DateTimePicker.md * Update Dialog.md * Update Input.md * Update Loading.md * Update Message.md * Update Picker.md * Update Progress.md * Update PullDownRefresh.md * Update Rate.md * Update Result.md * Update Search.md * Update Slider.md * Update Steps.md * Update SwipeCell.md * Update TabBar.md * Update Tabs.md * Update Textarea.md * Update Toast.md * Update Upload.md * Update cascader.md * Update Switch.md * Update Upload.md * Update Upload.md * Update Textarea.md * Update Toast.md * Update Toast.md * Update Dialog.md * Update Result.md * Update Search.md * Update Button.md * Update TabBar.md * Update Textarea.md * Update Upload.md * Update Steps.md * Update Indexes.md * feat: update design --------- Co-authored-by: caixuan29 <96420688+caixuan29@users.noreply.github.com> Co-authored-by: eugegewu <103838357+eugenewoody@users.noreply.github.com> Co-authored-by: pageee1021 <94840745+pageee1021@users.noreply.github.com> --- docs/miniprogram/_design/ActionSheet.md | 12 +-- docs/miniprogram/_design/Badge.md | 31 ++++---- docs/miniprogram/_design/Button.md | 7 +- docs/miniprogram/_design/Calendar.md | 27 +++---- docs/miniprogram/_design/Checkbox.md | 10 +-- docs/miniprogram/_design/CountDown.md | 20 +++-- docs/miniprogram/_design/DateTimePicker.md | 29 +++---- docs/miniprogram/_design/Dialog.md | 13 +++- docs/miniprogram/_design/Divider.md | 6 +- docs/miniprogram/_design/Drawer.md | 17 ++-- docs/miniprogram/_design/Empty.md | 22 +++--- docs/miniprogram/_design/Fab.md | 18 ++--- docs/miniprogram/_design/Image.md | 8 +- docs/miniprogram/_design/ImageViewer.md | 5 +- docs/miniprogram/_design/Indexes.md | 28 +++---- docs/miniprogram/_design/Input.md | 30 ++++---- docs/miniprogram/_design/Loading.md | 29 +++---- docs/miniprogram/_design/Message.md | 21 +++-- docs/miniprogram/_design/Picker.md | 17 ++-- docs/miniprogram/_design/Progress.md | 27 +++---- docs/miniprogram/_design/PullDownRefresh.md | 26 ++++--- docs/miniprogram/_design/Radio.md | 6 +- docs/miniprogram/_design/Rate.md | 21 ++--- docs/miniprogram/_design/Result.md | 17 ++-- docs/miniprogram/_design/Search.md | 36 +++------ docs/miniprogram/_design/SideBar.md | 52 +++++++++++++ docs/miniprogram/_design/Sidebar.md | 47 ----------- docs/miniprogram/_design/Slider.md | 13 ++-- docs/miniprogram/_design/Steps.md | 51 ++++++------ docs/miniprogram/_design/SwipeCell.md | 77 +++++++++++++++++++ docs/miniprogram/_design/Switch.md | 14 +--- docs/miniprogram/_design/TabBar.md | 18 ++--- docs/miniprogram/_design/Tabs.md | 10 +-- docs/miniprogram/_design/Textarea.md | 32 ++++---- docs/miniprogram/_design/Toast.md | 20 ++--- docs/miniprogram/_design/Upload.md | 25 +++--- docs/miniprogram/_design/avatar.md | 7 +- docs/miniprogram/_design/cascader.md | 23 +++--- docs/miniprogram/_design/link.md | 9 +-- docs/miniprogram/_design/navbar.md | 13 ++-- docs/miniprogram/_design/swiper.md | 6 +- docs/miniprogram/design/action-sheet.md | 12 +-- docs/miniprogram/design/avatar.md | 7 +- docs/miniprogram/design/badge.md | 68 ++++++++++++++++ docs/miniprogram/design/button.md | 7 +- docs/miniprogram/design/calendar.md | 51 ++++++++++++ docs/miniprogram/design/cascader.md | 23 +++--- docs/miniprogram/design/checkbox.md | 10 +-- docs/miniprogram/design/count-down.md | 50 ++++++++++++ docs/miniprogram/design/date-time-picker.md | 42 ++++++++++ docs/miniprogram/design/dialog.md | 13 +++- docs/miniprogram/design/divider.md | 6 +- docs/miniprogram/design/drawer.md | 17 ++-- docs/miniprogram/design/empty.md | 44 +++++++++++ docs/miniprogram/design/fab.md | 18 ++--- docs/miniprogram/design/image-viewer.md | 5 +- docs/miniprogram/design/image.md | 8 +- docs/miniprogram/design/indexes.md | 28 +++---- docs/miniprogram/design/input.md | 72 +++++++++++++++++ docs/miniprogram/design/link.md | 9 +-- docs/miniprogram/design/loading.md | 58 ++++++++++++++ docs/miniprogram/design/message.md | 50 ++++++++++++ docs/miniprogram/design/navbar.md | 13 ++-- docs/miniprogram/design/picker.md | 40 ++++++++++ docs/miniprogram/design/progress.md | 62 +++++++++++++++ docs/miniprogram/design/pull-down-refresh.md | 26 ++++--- docs/miniprogram/design/radio.md | 6 +- docs/miniprogram/design/rate.md | 53 +++++++++++++ docs/miniprogram/design/result.md | 55 +++++++++++++ docs/miniprogram/design/search.md | 51 ++++++++++++ docs/miniprogram/design/sidebar.md | 50 ++++++++++++ docs/miniprogram/design/slider.md | 13 ++-- docs/miniprogram/design/steps.md | 74 ++++++++++++++++++ .../Swipecell.md => design/swipecell.md} | 38 ++++----- docs/miniprogram/design/swiper.md | 6 +- docs/miniprogram/design/switch.md | 31 ++++++++ docs/miniprogram/design/tab-bar.md | 18 ++--- docs/miniprogram/design/tabs.md | 10 +-- docs/miniprogram/design/textarea.md | 59 ++++++++++++++ docs/miniprogram/design/toast.md | 51 ++++++++++++ docs/miniprogram/design/upload.md | 45 +++++++++++ 81 files changed, 1563 insertions(+), 636 deletions(-) create mode 100644 docs/miniprogram/_design/SideBar.md delete mode 100644 docs/miniprogram/_design/Sidebar.md create mode 100644 docs/miniprogram/_design/SwipeCell.md create mode 100644 docs/miniprogram/design/badge.md create mode 100644 docs/miniprogram/design/calendar.md create mode 100644 docs/miniprogram/design/count-down.md create mode 100644 docs/miniprogram/design/date-time-picker.md create mode 100644 docs/miniprogram/design/empty.md create mode 100644 docs/miniprogram/design/input.md create mode 100644 docs/miniprogram/design/loading.md create mode 100644 docs/miniprogram/design/message.md create mode 100644 docs/miniprogram/design/picker.md create mode 100644 docs/miniprogram/design/progress.md create mode 100644 docs/miniprogram/design/rate.md create mode 100644 docs/miniprogram/design/result.md create mode 100644 docs/miniprogram/design/search.md create mode 100644 docs/miniprogram/design/sidebar.md create mode 100644 docs/miniprogram/design/steps.md rename docs/miniprogram/{_design/Swipecell.md => design/swipecell.md} (65%) create mode 100644 docs/miniprogram/design/switch.md create mode 100644 docs/miniprogram/design/textarea.md create mode 100644 docs/miniprogram/design/toast.md create mode 100644 docs/miniprogram/design/upload.md diff --git a/docs/miniprogram/_design/ActionSheet.md b/docs/miniprogram/_design/ActionSheet.md index e97342cf09..c92df4642e 100644 --- a/docs/miniprogram/_design/ActionSheet.md +++ b/docs/miniprogram/_design/ActionSheet.md @@ -15,8 +15,6 @@ -
    - ### 常见用法 ##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 @@ -24,6 +22,8 @@ +
    + ##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发
    @@ -31,7 +31,6 @@
    -
    ### 推荐/慎用示例 @@ -49,6 +48,8 @@ +
    + ##### 动作面板中的操作项不建议用icon完成替代文字。
    @@ -56,8 +57,6 @@
    - -
    @@ -66,10 +65,11 @@ - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | | [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | | [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/Badge.md b/docs/miniprogram/_design/Badge.md index 11e5ac4d22..019cf6285e 100644 --- a/docs/miniprogram/_design/Badge.md +++ b/docs/miniprogram/_design/Badge.md @@ -8,25 +8,28 @@ ### 组件搭配使用 -##### 徽标与选项卡、底部标签栏组合使用，置于文字段的右上方，用于展示状态信息或营销信息。 +##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。
    - + +
    + +
    +
    -##### 徽标与头像组合使用，可作为消息提示或数量提示。 +##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。
    - +
    -
    ### 常见用法 @@ -34,15 +37,14 @@
    - +
    - +
    - +
    -
    ### 推荐/慎用示例 @@ -50,20 +52,19 @@
    - +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [标签](./tag) | | +| 组件名 | 何时使用 | +| :------------ | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | diff --git a/docs/miniprogram/_design/Button.md b/docs/miniprogram/_design/Button.md index 4a6e7a275f..e12730d4aa 100644 --- a/docs/miniprogram/_design/Button.md +++ b/docs/miniprogram/_design/Button.md @@ -32,6 +32,7 @@
    +
    @@ -40,8 +41,6 @@
    -
    - ### 常见用法 ##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 @@ -56,7 +55,6 @@
    -
    ### 推荐/慎用示例 @@ -76,11 +74,10 @@ - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | | [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | | [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | -| [返回顶部](./backtop) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | +| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/_design/Calendar.md b/docs/miniprogram/_design/Calendar.md index 3d959711d8..6d174c5451 100644 --- a/docs/miniprogram/_design/Calendar.md +++ b/docs/miniprogram/_design/Calendar.md @@ -1,4 +1,4 @@ -# 日历 Calender +# 日历 Calendar ## 组件设计指南 @@ -8,28 +8,24 @@ ### 组件搭配使用 -##### 通常和单元格搭配使用，点击后唤起日历。 +##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。 -
    -
    - -
    +
    +
    -
    - ### 推荐/慎用 ##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。
    - +
    - +
    @@ -40,19 +36,18 @@
    - +
    - +
    -
    - ### 相似组件 -| 组件名 | 何时使用 | -| [时间选择器](./DateTimePicker) | 用于选择一个时间点或者一个时间段。 | +| 组件名 | 何时使用 | +| :------------------------------- | :------------------------------------- | +| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 | diff --git a/docs/miniprogram/_design/Checkbox.md b/docs/miniprogram/_design/Checkbox.md index 2eaecd586b..efa45d60a0 100644 --- a/docs/miniprogram/_design/Checkbox.md +++ b/docs/miniprogram/_design/Checkbox.md @@ -8,7 +8,7 @@ ### 组件搭配使用 -##### 多选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 +##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
    @@ -16,11 +16,10 @@
    - +
    -
    - + ### 推荐/慎用示例 @@ -36,7 +35,6 @@
    -
    ##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 @@ -48,8 +46,6 @@ -
    - ### 相似组件 diff --git a/docs/miniprogram/_design/CountDown.md b/docs/miniprogram/_design/CountDown.md index 70594545f9..fa50e0b56a 100644 --- a/docs/miniprogram/_design/CountDown.md +++ b/docs/miniprogram/_design/CountDown.md @@ -12,7 +12,7 @@
    - +
    @@ -22,12 +22,10 @@
    - +
    -
    - ### 推荐/慎用示例 @@ -35,20 +33,20 @@
    - +
    - +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [标签](./tag) | | +| 组件名 | 何时使用 | +| :-------------- | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 | diff --git a/docs/miniprogram/_design/DateTimePicker.md b/docs/miniprogram/_design/DateTimePicker.md index 18b55fad4d..173b7e5df0 100644 --- a/docs/miniprogram/_design/DateTimePicker.md +++ b/docs/miniprogram/_design/DateTimePicker.md @@ -8,28 +8,23 @@ ### 组件搭配使用 -##### 通常和单元格搭配使用，点击后唤起时间选择器。 +##### 通常和[单元格](./Cell)搭配使用，点击后唤起时间选择器。
    - +
    -
    - ### 常见用法 ##### 当需要输入时间区间时，通常使用两个时间选择器分别选择起、止时间。
    - +
    - -
    - -
    -
    - +
    + +
    ### 推荐/慎用示例 @@ -37,15 +32,13 @@
    - +
    -
    - - -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [日历](./calendar) | | +### 何时使用 +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------- | +| [日历](./Calendar) | 在表单中需要精确输入单个、多个、或区间日期时使用。 | diff --git a/docs/miniprogram/_design/Dialog.md b/docs/miniprogram/_design/Dialog.md index 27d9224698..98ae7ed66f 100644 --- a/docs/miniprogram/_design/Dialog.md +++ b/docs/miniprogram/_design/Dialog.md @@ -17,13 +17,11 @@
    - +
    -
    - ### 常见用法 @@ -35,6 +33,8 @@ +
    + ##### 用于较为重要的信息提示，且需要用户决定。
    @@ -48,7 +48,6 @@
    -
    ### 推荐/慎用示例 @@ -67,3 +66,9 @@ +### 何时使用 +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [轻提示](./toast) |当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。| +| [消息通知](./message) |当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。| + diff --git a/docs/miniprogram/_design/Divider.md b/docs/miniprogram/_design/Divider.md index 4e0df6d027..7c918325f6 100644 --- a/docs/miniprogram/_design/Divider.md +++ b/docs/miniprogram/_design/Divider.md @@ -17,6 +17,7 @@ +
    ##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 @@ -26,7 +27,8 @@ - +
    + ##### 组合分割线：通栏分割线与内嵌分割线组合布局。
    @@ -34,8 +36,6 @@
    - -
    ### 推荐/慎用示例 diff --git a/docs/miniprogram/_design/Drawer.md b/docs/miniprogram/_design/Drawer.md index 1ab3af730b..02db126364 100644 --- a/docs/miniprogram/_design/Drawer.md +++ b/docs/miniprogram/_design/Drawer.md @@ -14,8 +14,6 @@ -
    - ### 常见用法 ##### 在网站场景，通常用来收折展示整个网站的菜单导航。 @@ -33,8 +31,6 @@ -
    - ### 推荐/慎用示例 ##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 @@ -51,12 +47,11 @@ -
    - - - ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [动作面板](./actionsheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| 组件名 | 何时使用 | +| :-------------------------- | :------------------------------------------------------------------------------------------- | +| [动作面板](./action-sheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/Empty.md b/docs/miniprogram/_design/Empty.md index d8176974a4..e40a8081da 100644 --- a/docs/miniprogram/_design/Empty.md +++ b/docs/miniprogram/_design/Empty.md @@ -12,39 +12,35 @@
    - +
    - +
    - +
    -
    - ### 组件搭配使用 -##### 空状态与步骤条组合使用，通过步骤展示提示用户如何新建/添加。 +##### 空状态与[步骤条](./steps)组合使用，通过步骤展示提示用户如何新建/添加。
    - +
    -##### 空状态与按钮组合使用，引导用户直接新建/添加。 +##### 空状态与[按钮](./button)组合使用，引导用户直接新建/添加。
    - +
    -
    - ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------- | | [结果](./result) | 当需要向用户展示操作后的结果反馈时使用。 | diff --git a/docs/miniprogram/_design/Fab.md b/docs/miniprogram/_design/Fab.md index bff833178f..7d89149464 100644 --- a/docs/miniprogram/_design/Fab.md +++ b/docs/miniprogram/_design/Fab.md @@ -30,18 +30,15 @@ - -
    - ### 组件搭配使用 -##### 悬浮按钮与[动作面板](./actionsheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 +##### 悬浮按钮与[动作面板](./action-sheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
    - - -
    -
    + + + + ### 推荐/慎用示例 @@ -76,13 +73,10 @@ -
    - - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | | [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | -| [返回顶部](./backtop ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | +| [返回顶部](./back-top ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/_design/Image.md b/docs/miniprogram/_design/Image.md index 91939044da..92f3c745cb 100644 --- a/docs/miniprogram/_design/Image.md +++ b/docs/miniprogram/_design/Image.md @@ -22,7 +22,7 @@
    -##### 图片与[下拉刷新](./pulldownrefresh)组合使用，用于图片瀑布流时的内容更新。 +##### 图片与[下拉刷新](./pull-down-refresh)组合使用，用于图片瀑布流时的内容更新。
    @@ -31,8 +31,6 @@
    -
    - ### 推荐/慎用示例 @@ -50,12 +48,10 @@
    -
    - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | -| [图片预览](./imageviewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | +| [图片预览](./image-viewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | diff --git a/docs/miniprogram/_design/ImageViewer.md b/docs/miniprogram/_design/ImageViewer.md index fe4cf2105d..ae98582d3b 100644 --- a/docs/miniprogram/_design/ImageViewer.md +++ b/docs/miniprogram/_design/ImageViewer.md @@ -16,13 +16,12 @@
    -##### 当使用带删除操作的图片预览组件时，可与[动作面板](./actionsheet)组合使用，对删除操作进行二次确认。 +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./action-sheet)组合使用，对删除操作进行二次确认。
    -
    ### 推荐/慎用示例 @@ -34,8 +33,6 @@ -
    - ### 相似组件 diff --git a/docs/miniprogram/_design/Indexes.md b/docs/miniprogram/_design/Indexes.md index 9637fd7c06..4396b37d86 100644 --- a/docs/miniprogram/_design/Indexes.md +++ b/docs/miniprogram/_design/Indexes.md @@ -8,7 +8,7 @@ ### 组件搭配使用 -##### 索引与[单选框](./Radio)、[多选框](./Checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。 +##### 索引与[单选框](./radio)、[多选框](./checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。
    @@ -16,9 +16,6 @@
    -
    - - ### 推荐/慎用示例 ##### 索引项需要跟数据项小标题保持一致。 @@ -36,21 +33,24 @@
    - + ##### 索引项排序应具备一定的逻辑相关性。 -
    - +
    +
    + -
    - -
    - +
    +
    + + +
    +
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [侧边栏](./Sidebar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | +| 组件名 | 何时使用 | +| :------------------- | :------------------------------------------------------------- | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/miniprogram/_design/Input.md b/docs/miniprogram/_design/Input.md index 3a15580a38..7df39948df 100644 --- a/docs/miniprogram/_design/Input.md +++ b/docs/miniprogram/_design/Input.md @@ -12,18 +12,17 @@
    - +
    -
    ### 常见用法 ##### 通常使用在表单中进行文字填写，填写状态下可在右侧显示清空输入的按钮，供用户快速清空已输入的内容。
    - +
    @@ -32,28 +31,26 @@
    - +
    - +
    - +
    -
    - ### 推荐/慎用示例 ##### 标签、占位符文本简明扼要地描述用户需要输入的内容，标签超过10个字时请考虑使用其它展示方式。
    - +
    - +
    @@ -61,18 +58,17 @@
    ##### 当需要输入较长的复杂内容时，建议使用多行文本框输入。 -
    +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [多行文本框](./textarea) | | -| [搜索框](./search) | | +| 组件名 | 何时使用 | +| :----------------------- | :------------------------------------------- | +| [多行文本框](./textarea) | 需要进行文字输入，且需填写的字数较多时使用。 | +| [搜索框](./search) | 当需要从海量信息中准确提取准确的内容时使用。 | diff --git a/docs/miniprogram/_design/Loading.md b/docs/miniprogram/_design/Loading.md index ac0ebde67d..3da3dde123 100644 --- a/docs/miniprogram/_design/Loading.md +++ b/docs/miniprogram/_design/Loading.md @@ -12,15 +12,14 @@
    - +
    - +
    - +
    -
    ### 组件搭配使用 @@ -28,38 +27,34 @@
    - +
    - +
    - +
    -
    - ### 推荐/慎用示例 ##### 当加载时间较长，尤其是超过10秒的场景中，推荐使用进度条，向用户明确展示当前任务的进展，避免等待时间过长带来焦急的负面体验。
    - +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [加载](./loading) | | -| [进度条](./progress) | | -| [下拉刷新](./PullDownRefresh) | | +| 组件名 | 何时使用 | +| :------------------------------ | :--------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [下拉刷新](./pull-down-refresh) | 当需要对页面信息进行整体刷新或加载更多同类信息时使用。 | diff --git a/docs/miniprogram/_design/Message.md b/docs/miniprogram/_design/Message.md index 59adc50da9..e0a7c42ff2 100644 --- a/docs/miniprogram/_design/Message.md +++ b/docs/miniprogram/_design/Message.md @@ -12,15 +12,14 @@
    - +
    - +
    - +
    -
    ### 推荐/慎用示例 @@ -28,7 +27,7 @@
    - +
    @@ -39,17 +38,15 @@
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [消息通知](./message) | | -| [轻提示](./toast) | | -| [公告栏](./noticeBar) | | +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 | diff --git a/docs/miniprogram/_design/Picker.md b/docs/miniprogram/_design/Picker.md index fbfb41c155..5375b7e21c 100644 --- a/docs/miniprogram/_design/Picker.md +++ b/docs/miniprogram/_design/Picker.md @@ -12,7 +12,8 @@
    - + +
    @@ -22,22 +23,20 @@
    - +
    - +
    -
    - ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [时间选择器](./DateTimePicker ) | | -| [级联选择器](./cascader) | | +| 组件名 | 何时使用 | +| :-------------------------------- | :----------------------------------------------------------------------- | +| [时间选择器](./date-time-picker ) | 在表单中需要输入单个日期或时间时使用。 | +| [级联选择器](./Cascader) | 当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/Progress.md b/docs/miniprogram/_design/Progress.md index 0805c8872b..d7b048c316 100644 --- a/docs/miniprogram/_design/Progress.md +++ b/docs/miniprogram/_design/Progress.md @@ -12,23 +12,21 @@
    - +
    - +
    - +
    -
    - ### 常见用法 ##### 通常用于任务周期较长的场景中，配有文字或图标显示进度和状态。
    - +
    @@ -38,15 +36,14 @@
    - +
    - +
    - +
    -
    ### 推荐/慎用示例 @@ -54,16 +51,14 @@
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [进度条](./progress) | | -| [加载](./loading) | | +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/miniprogram/_design/PullDownRefresh.md b/docs/miniprogram/_design/PullDownRefresh.md index 00823e705b..f43851d555 100644 --- a/docs/miniprogram/_design/PullDownRefresh.md +++ b/docs/miniprogram/_design/PullDownRefresh.md @@ -13,47 +13,51 @@
    - +
    - +
    -
    - +
    -
    - - ### 常见用法 ##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。
    - +
    +
    + ##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。
    - +
    - +
    -
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [加载](./loading) |当打开新页面或操作完成后，等待加载时使用。| + diff --git a/docs/miniprogram/_design/Radio.md b/docs/miniprogram/_design/Radio.md index 02414adca4..7cd9b6f97a 100644 --- a/docs/miniprogram/_design/Radio.md +++ b/docs/miniprogram/_design/Radio.md @@ -8,7 +8,7 @@ ### 组件搭配使用 -##### 单选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 +##### 单选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
    @@ -21,8 +21,6 @@
    -
    - ### 推荐/慎用示例 @@ -54,8 +52,6 @@ -
    - ### 相似组件 diff --git a/docs/miniprogram/_design/Rate.md b/docs/miniprogram/_design/Rate.md index d0dba11ca8..849489aa7e 100644 --- a/docs/miniprogram/_design/Rate.md +++ b/docs/miniprogram/_design/Rate.md @@ -1,4 +1,3 @@ - # 评分 Rate ## 组件设计指南 @@ -13,36 +12,32 @@
    - +
    -
    - ### 常见用法 ##### 在较为严谨的评论场景，通常结合辅助文字，帮助用户更好地理解每个星级的含义，避免个体的打分标准不统一。
    - +
    -
    - ### 推荐/慎用示例 ##### 可结合业务场景自定义评分图标，如使用品牌的icon，增强品牌透出，但不建议使用过于复杂的图形作为评分图标。
    - +
    - +
    @@ -52,15 +47,9 @@ ##### 在同一个评论场景中，评分机制应保持一致，不建议将半星、整星的评分机制混用。
    - +
    -
    - - -### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | diff --git a/docs/miniprogram/_design/Result.md b/docs/miniprogram/_design/Result.md index 9642276038..6705d2d9c8 100644 --- a/docs/miniprogram/_design/Result.md +++ b/docs/miniprogram/_design/Result.md @@ -12,7 +12,7 @@
    - +
    @@ -22,7 +22,7 @@
    - +
    @@ -32,7 +32,7 @@
    - +
    @@ -43,8 +43,15 @@
    - +
    -
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :--------------------------- | +| [空状态](./empty ) | 当页面或模块数据为空时使用。 | + diff --git a/docs/miniprogram/_design/Search.md b/docs/miniprogram/_design/Search.md index 9f164ab41e..4b56e46c62 100644 --- a/docs/miniprogram/_design/Search.md +++ b/docs/miniprogram/_design/Search.md @@ -12,56 +12,42 @@
    - +
    - +
    - +
    -
    ### 常见用法 ##### 在可搜索内容类型较为单一的场景下，可直接在原页面激活搜索态进行搜索，并通过高亮命中字符的方式展示搜索结果，页面内容组织结构保持不变。
    - +
    ##### 在可搜索内容类型较丰富的场景下，通过模态承载搜索态，并在新页面中按分类呈现搜索结果。 -
    -
    - -
    - -
    - -
    +
    +
    ##### 在用户触发搜索后，对用户即将搜索的内容进行预判和推荐，并需要满足营销的诉求。 -
    -
    - -
    - -
    - -
    +
    +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [输入框](./input) | | +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./Input) | 需要进行文字输入，且需填写的字数较少时使用。 | diff --git a/docs/miniprogram/_design/SideBar.md b/docs/miniprogram/_design/SideBar.md new file mode 100644 index 0000000000..6c5de1da91 --- /dev/null +++ b/docs/miniprogram/_design/SideBar.md @@ -0,0 +1,52 @@ +# 侧边栏 SideBar + +## 组件设计指南 + +### 何时使用 + +当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 + +### 组件搭配使用 + +##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。 + +
    +
    + +
    +
    + + +### 正确/慎用示例 + +##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。 +
    +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------ | :---------------------------------------------------------------------------- | +| [标签栏](./tab-bar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/Sidebar.md b/docs/miniprogram/_design/Sidebar.md deleted file mode 100644 index b7b763aca3..0000000000 --- a/docs/miniprogram/_design/Sidebar.md +++ /dev/null @@ -1,47 +0,0 @@ -### 何时使用 - -当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 - -### 组件搭配使用 - -##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。 - -
    -
    - -
    -
    - -
    - -### 正确/慎用示例 - -##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。 - -
    -
    - -
    - -
    - -
    -
    - -
    - -##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。 - -
    - -
    - -
    - - -### 相似组件 - -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [标签栏](./Tabbar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 | -| [选项卡](./Tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/Slider.md b/docs/miniprogram/_design/Slider.md index 82ac2b5592..3f3d43d7df 100644 --- a/docs/miniprogram/_design/Slider.md +++ b/docs/miniprogram/_design/Slider.md @@ -17,8 +17,6 @@
    -
    - ### 常见用法 ##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 @@ -29,6 +27,8 @@
    +
    + ##### 用于难以量化的对立数据，以此表示程度。
    @@ -37,8 +37,6 @@
    -
    - ### 推荐/慎用示例 @@ -56,7 +54,8 @@ -
    - - +### 相似组件 +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [步进器](./stepper) |需要进行数量选择时使用。| diff --git a/docs/miniprogram/_design/Steps.md b/docs/miniprogram/_design/Steps.md index c4be5e26eb..21d64ed8c2 100644 --- a/docs/miniprogram/_design/Steps.md +++ b/docs/miniprogram/_design/Steps.md @@ -1,4 +1,6 @@ +# 步骤条 Steps +## 组件设计指南 ### 何时使用 @@ -7,13 +9,12 @@ ### 与页面布局相关 ##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 +
    +
    + +
    +
    -
    - -
    - - -
    ### 推荐/慎用示例 @@ -21,12 +22,12 @@
    - +
    - +
    @@ -37,12 +38,12 @@
    - +
    - +
    @@ -51,29 +52,25 @@ ##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。 -
    -
    - - -
    +
    + + +
    +
    + +##### 尽量避免嵌套步骤条。 +
    - +
    -
    -##### 尽量避免嵌套步骤条。 - -
    - -
    -
    - ### 相似组件 -| 组件名 | 何时使用 | -| [进度条](.Progress) | | -| [选项卡](./Tabs) | | +| 组件名 | 何时使用 | +| :------------------- | :---------------------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/SwipeCell.md b/docs/miniprogram/_design/SwipeCell.md new file mode 100644 index 0000000000..ca53df15b6 --- /dev/null +++ b/docs/miniprogram/_design/SwipeCell.md @@ -0,0 +1,77 @@ +# 滑动操作 SwipeCell + +## 组件设计指南 + +### 何时使用 + +需要针对列表项目进行某项低频的辅助操作时使用。 + +### 组件搭配使用 + +##### 与[单元格](./cell)、[按钮](./button)组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。 + +
    +
    + +
    + +
    + +
    +
    + + +### 常见用法 + +##### 通常使用在对话列表、收藏列表、购物车等场景中，承载删除、收藏等辅助操作。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。 + +
    + +
    + + +### 推荐/慎用示例 + +##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。 + +
    + + +
    + +
    + +##### 按钮的顺序、颜色使用需要符合用户预期。 +
    + + +
    + +
    + +##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。 +
    + + +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/_design/Switch.md b/docs/miniprogram/_design/Switch.md index 8c51f59263..f11d087fbe 100644 --- a/docs/miniprogram/_design/Switch.md +++ b/docs/miniprogram/_design/Switch.md @@ -12,12 +12,12 @@
    - +
    - +
    @@ -27,15 +27,7 @@ ##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。
    - +
    - -
    - -### 相似组件 - -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [时间选择器](./datetimepicker) | | diff --git a/docs/miniprogram/_design/TabBar.md b/docs/miniprogram/_design/TabBar.md index ce2022c539..c3e1722bc4 100644 --- a/docs/miniprogram/_design/TabBar.md +++ b/docs/miniprogram/_design/TabBar.md @@ -8,7 +8,7 @@ ### 组件搭配使用 -##### 标签栏与[徽标](./adge)组合使用，用于告知用户该模块/视图的状态变化。 +##### 标签栏与[徽标](./badge)组合使用，用于告知用户该模块/视图的状态变化。
    @@ -20,9 +20,6 @@
    -
    - - ### 推荐/慎用示例 ##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 @@ -66,18 +63,17 @@ -
    - - -
    - -
    +
    + + +
    ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | -| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | +| [选项卡](./tabs) |当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/_design/Tabs.md b/docs/miniprogram/_design/Tabs.md index 38942bff64..355ddb6761 100644 --- a/docs/miniprogram/_design/Tabs.md +++ b/docs/miniprogram/_design/Tabs.md @@ -19,7 +19,6 @@ -
    ### 组件搭配使用 @@ -32,9 +31,6 @@ -
    - - ### 常见用法 ##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 @@ -55,7 +51,6 @@ -
    ### 推荐/慎用示例 @@ -103,12 +98,11 @@ -
    - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | -| [底部标签栏](./tabbar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 。 | +| [标签栏](./tab-bar) | 当目标模块/视图需要从应用的任何地方直接进行访问时使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/_design/Textarea.md b/docs/miniprogram/_design/Textarea.md index ef14a21fc6..75f99e7cea 100644 --- a/docs/miniprogram/_design/Textarea.md +++ b/docs/miniprogram/_design/Textarea.md @@ -12,15 +12,14 @@
    - +
    - +
    - +
    -
    ### 推荐/慎用示例 @@ -28,13 +27,13 @@
    - - + +
    - - + +
    @@ -43,21 +42,20 @@ ##### 建议根据待输入的内容决定多行文本框的高度。
    - - + +
    - - + +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [多行文本框](./textarea) | | -| [搜索框](./search) | | +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 | + diff --git a/docs/miniprogram/_design/Toast.md b/docs/miniprogram/_design/Toast.md index 6a4d93980e..0846bfe2e9 100644 --- a/docs/miniprogram/_design/Toast.md +++ b/docs/miniprogram/_design/Toast.md @@ -12,11 +12,10 @@
    - +
    -
    ### 组件搭配使用 @@ -24,11 +23,10 @@
    - +
    -
    ### 推荐/慎用示例 @@ -36,22 +34,20 @@
    - +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行更多交互时使用，轻提示会在一段时间后自动消失 | -| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭 | -| [公告栏](./noticeBar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失 | +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------------- | +| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失。 | diff --git a/docs/miniprogram/_design/Upload.md b/docs/miniprogram/_design/Upload.md index 19047a8c8e..8711cdd371 100644 --- a/docs/miniprogram/_design/Upload.md +++ b/docs/miniprogram/_design/Upload.md @@ -8,28 +8,28 @@ ### 组件搭配使用 -##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./actionsheet)，供用户选择不同渠道进行新的上传。 +##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./action-sheet)，供用户选择不同渠道进行新的上传。
    - +
    -##### 点击已经上传的图片可跳转[图片预览](./imageview)，让用户对已上传的图片进行快速查看。 +##### 点击已经上传的图片可跳转[图片预览](./image-viewer)，让用户对已上传的图片进行快速查看。
    - +
    -
    + ### 推荐/慎用示例 ##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。
    - +
    @@ -37,18 +37,11 @@ ##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。 -
    +
    - - + +
    -
    - -### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [图片](./image) | | -| [图片预览](./imageview) | | diff --git a/docs/miniprogram/_design/avatar.md b/docs/miniprogram/_design/avatar.md index 47851c9881..8bae0abe39 100644 --- a/docs/miniprogram/_design/avatar.md +++ b/docs/miniprogram/_design/avatar.md @@ -8,7 +8,7 @@ ### 组件搭配使用 -##### 头像与[动作面板](./actionSheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 +##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。
    @@ -35,7 +35,6 @@
    -
    ### 常见用法 @@ -44,8 +43,7 @@
    - -
    + ### 推荐/慎用示例 @@ -65,5 +63,4 @@
    -
    diff --git a/docs/miniprogram/_design/cascader.md b/docs/miniprogram/_design/cascader.md index 9ad7ce91a3..4ca5b5ca66 100644 --- a/docs/miniprogram/_design/cascader.md +++ b/docs/miniprogram/_design/cascader.md @@ -9,23 +9,22 @@ ### 组件搭配使用 -##### 级联选择器与[索引](./Indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 +##### 级联选择器与[索引](./indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。
    - +
    -
    ### 常见用法 ##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。
    - +
    -
    + ### 推荐/慎用示例 @@ -33,30 +32,30 @@
    - +
    +
    ##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。
    - +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [选择器](./button) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------------------------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/link.md b/docs/miniprogram/_design/link.md index 76cca2bdd7..2f5bcd4f4a 100644 --- a/docs/miniprogram/_design/link.md +++ b/docs/miniprogram/_design/link.md @@ -8,7 +8,7 @@ ### 组件搭配使用 -##### 链接与[消息通知](./message)、[公告栏](./notiesbar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 +##### 链接与[消息通知](./message)、[公告栏](./notice-bar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。
    @@ -19,7 +19,6 @@
    -
    ### 推荐/慎用示例 @@ -38,12 +37,10 @@ -
    - ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | | [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/_design/navbar.md b/docs/miniprogram/_design/navbar.md index 81445cc4d2..c8c7b56e79 100644 --- a/docs/miniprogram/_design/navbar.md +++ b/docs/miniprogram/_design/navbar.md @@ -8,17 +8,18 @@ ### 组件搭配使用 -##### 带图标的导航栏与[抽屉](./Drawer)、[动作面板](./ActionSheet)组合使用，用于唤起一组操作或功能。 +##### 带图标的导航栏与[抽屉](./drawer)、[动作面板](./action-sheet)组合使用，用于唤起一组操作或功能。
    - + +
    +
    - -
    + ### 常见用法 @@ -36,12 +37,12 @@
    - +
    - +
    ##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 diff --git a/docs/miniprogram/_design/swiper.md b/docs/miniprogram/_design/swiper.md index c98947257b..069051b953 100644 --- a/docs/miniprogram/_design/swiper.md +++ b/docs/miniprogram/_design/swiper.md @@ -19,17 +19,16 @@ +
    ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 -
    +
    -
    - ### 推荐/慎用示例 @@ -42,4 +41,3 @@
    -
    diff --git a/docs/miniprogram/design/action-sheet.md b/docs/miniprogram/design/action-sheet.md index 28d6f7335c..fbe3df06c2 100644 --- a/docs/miniprogram/design/action-sheet.md +++ b/docs/miniprogram/design/action-sheet.md @@ -13,8 +13,6 @@ -
    - ### 常见用法 ##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 @@ -22,6 +20,8 @@ +
    + ##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发
    @@ -29,7 +29,6 @@
    -
    ### 推荐/慎用示例 @@ -47,6 +46,8 @@ +
    + ##### 动作面板中的操作项不建议用icon完成替代文字。
    @@ -54,8 +55,6 @@
    - -
    @@ -64,10 +63,11 @@ - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | | [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | | [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/avatar.md b/docs/miniprogram/design/avatar.md index 83167ab0a8..86b5d47d5e 100644 --- a/docs/miniprogram/design/avatar.md +++ b/docs/miniprogram/design/avatar.md @@ -6,7 +6,7 @@ ### 组件搭配使用 -##### 头像与[动作面板](./actionSheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 +##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。
    @@ -33,7 +33,6 @@
    -
    ### 常见用法 @@ -42,8 +41,7 @@
    - -
    + ### 推荐/慎用示例 @@ -63,5 +61,4 @@
    -
    diff --git a/docs/miniprogram/design/badge.md b/docs/miniprogram/design/badge.md new file mode 100644 index 0000000000..173d086096 --- /dev/null +++ b/docs/miniprogram/design/badge.md @@ -0,0 +1,68 @@ + + +### 何时使用 + +当需要展示特定对象的状态变化或承载运营性质提示时使用。 + +### 组件搭配使用 + +##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。 + +
    +
    + +
    + +
    + +
    +
    + +
    + +##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。 + +
    +
    + +
    +
    + + +### 常见用法 + +##### 当用户只需要关注是否有消息，而无需关注消息数量时，可使用红点型徽标；当提示的信息需要精确显示数量时，应使用带数字的徽标。 + +
    +
    + +
    + +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 建议根据场景和信息类型定义最长字数，不宜出现过长的情况。 + +
    +
    + + +
    + +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------ | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | diff --git a/docs/miniprogram/design/button.md b/docs/miniprogram/design/button.md index 69084c4b84..3bb7573b20 100644 --- a/docs/miniprogram/design/button.md +++ b/docs/miniprogram/design/button.md @@ -30,6 +30,7 @@ +
    @@ -38,8 +39,6 @@
    -
    - ### 常见用法 ##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 @@ -54,7 +53,6 @@
    -
    ### 推荐/慎用示例 @@ -74,11 +72,10 @@ - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | | [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | | [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | -| [返回顶部](./backtop) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | +| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/design/calendar.md b/docs/miniprogram/design/calendar.md new file mode 100644 index 0000000000..e606fada96 --- /dev/null +++ b/docs/miniprogram/design/calendar.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。 + +
    + +
    + +### 推荐/慎用 + +##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 区间选择尽量使用在较短时间的场景中，当涉及的时间通常在数月、数年的长度时，建议使用其它方式让用户输入。 + +
    +
    + + +
    + +
    + + +
    +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------- | :------------------------------------- | +| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 | diff --git a/docs/miniprogram/design/cascader.md b/docs/miniprogram/design/cascader.md index a8ef244319..1d02f8e3c3 100644 --- a/docs/miniprogram/design/cascader.md +++ b/docs/miniprogram/design/cascader.md @@ -7,23 +7,22 @@ ### 组件搭配使用 -##### 级联选择器与[索引](./Indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 +##### 级联选择器与[索引](./indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。
    - +
    -
    ### 常见用法 ##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。
    - +
    -
    + ### 推荐/慎用示例 @@ -31,30 +30,30 @@
    - +
    +
    ##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。
    - +
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [选择器](./button) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------------------------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/checkbox.md b/docs/miniprogram/design/checkbox.md index cb066d37d0..40dd0ca0d0 100644 --- a/docs/miniprogram/design/checkbox.md +++ b/docs/miniprogram/design/checkbox.md @@ -6,7 +6,7 @@ ### 组件搭配使用 -##### 多选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 +##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
    @@ -14,11 +14,10 @@
    - +
    -
    - + ### 推荐/慎用示例 @@ -34,7 +33,6 @@ -
    ##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 @@ -46,8 +44,6 @@ -
    - ### 相似组件 diff --git a/docs/miniprogram/design/count-down.md b/docs/miniprogram/design/count-down.md new file mode 100644 index 0000000000..dbb1ad4c22 --- /dev/null +++ b/docs/miniprogram/design/count-down.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当需要向用户提示剩余时间时使用。 + +### 常见用法 + +##### 在营销场景下，通过倒计时向用户展示运营活动开始倒计时或距活动结束的剩余时间，从而体现稀缺性吸引目标受众的注意力，勾起足够兴趣以此激励用户参与。 + +
    +
    + +
    +
    + +
    + +##### 在一些工作流场景下，提示用户还剩余多少时间来完成某项任务或处理某些事项，强化时间概念。 + +
    +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 不建议在同一个页面滥用倒计时，若需要反复使用，建议用较为轻量的样式. + +
    +
    + + +
    + +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------- | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 | diff --git a/docs/miniprogram/design/date-time-picker.md b/docs/miniprogram/design/date-time-picker.md new file mode 100644 index 0000000000..92a1cf0d48 --- /dev/null +++ b/docs/miniprogram/design/date-time-picker.md @@ -0,0 +1,42 @@ + + +### 何时使用 + +在表单中需要输入单个日期或时间时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./Cell)搭配使用，点击后唤起时间选择器。 + +
    + +
    + +### 常见用法 + +##### 当需要输入时间区间时，通常使用两个时间选择器分别选择起、止时间。 + +
    + +
    + +
    + +
    + +### 推荐/慎用示例 + +##### 选择时间后，建议使用标准化格式在表单中书写日期和时间。 + +
    +
    + + +
    +
    + + +### 何时使用 +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------- | +| [日历](./Calendar) | 在表单中需要精确输入单个、多个、或区间日期时使用。 | diff --git a/docs/miniprogram/design/dialog.md b/docs/miniprogram/design/dialog.md index b0e7499086..ddf930d34d 100644 --- a/docs/miniprogram/design/dialog.md +++ b/docs/miniprogram/design/dialog.md @@ -15,13 +15,11 @@
    - +
    -
    - ### 常见用法 @@ -33,6 +31,8 @@ +
    + ##### 用于较为重要的信息提示，且需要用户决定。
    @@ -46,7 +46,6 @@
    -
    ### 推荐/慎用示例 @@ -65,3 +64,9 @@ +### 何时使用 +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [轻提示](./toast) |当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。| +| [消息通知](./message) |当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。| + diff --git a/docs/miniprogram/design/divider.md b/docs/miniprogram/design/divider.md index c598e4dd73..c4ec583cbd 100644 --- a/docs/miniprogram/design/divider.md +++ b/docs/miniprogram/design/divider.md @@ -15,6 +15,7 @@ +
    ##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 @@ -24,7 +25,8 @@ - +
    + ##### 组合分割线：通栏分割线与内嵌分割线组合布局。
    @@ -32,8 +34,6 @@
    - -
    ### 推荐/慎用示例 diff --git a/docs/miniprogram/design/drawer.md b/docs/miniprogram/design/drawer.md index 028eb68e5c..63d524ca8b 100644 --- a/docs/miniprogram/design/drawer.md +++ b/docs/miniprogram/design/drawer.md @@ -12,8 +12,6 @@ -
    - ### 常见用法 ##### 在网站场景，通常用来收折展示整个网站的菜单导航。 @@ -31,8 +29,6 @@ -
    - ### 推荐/慎用示例 ##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 @@ -49,12 +45,11 @@ -
    - - - ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [动作面板](./actionsheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| 组件名 | 何时使用 | +| :-------------------------- | :------------------------------------------------------------------------------------------- | +| [动作面板](./action-sheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/empty.md b/docs/miniprogram/design/empty.md new file mode 100644 index 0000000000..3337f15219 --- /dev/null +++ b/docs/miniprogram/design/empty.md @@ -0,0 +1,44 @@ + + +### 何时使用 + +当页面或模块数据为空时使用。 + +### 与页面布局相关 + +##### 用于整个页面或某个独立模块的状态展示，在页面、模块内居中。 + +
    +
    + +
    + +
    + +
    +
    + +### 组件搭配使用 + +##### 空状态与[步骤条](./steps)组合使用，通过步骤展示提示用户如何新建/添加。 +
    +
    + +
    +
    + +
    + +##### 空状态与[按钮](./button)组合使用，引导用户直接新建/添加。 + +
    +
    + +
    +
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------- | +| [结果](./result) | 当需要向用户展示操作后的结果反馈时使用。 | diff --git a/docs/miniprogram/design/fab.md b/docs/miniprogram/design/fab.md index 3955a23d7d..c873dca237 100644 --- a/docs/miniprogram/design/fab.md +++ b/docs/miniprogram/design/fab.md @@ -28,18 +28,15 @@ - -
    - ### 组件搭配使用 -##### 悬浮按钮与[动作面板](./actionsheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 +##### 悬浮按钮与[动作面板](./action-sheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
    - - -
    -
    + + + + ### 推荐/慎用示例 @@ -74,13 +71,10 @@ -
    - - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | | [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | -| [返回顶部](./backtop ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | +| [返回顶部](./back-top ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/design/image-viewer.md b/docs/miniprogram/design/image-viewer.md index 98326bd7f1..dd4f1d3a94 100644 --- a/docs/miniprogram/design/image-viewer.md +++ b/docs/miniprogram/design/image-viewer.md @@ -14,13 +14,12 @@
    -##### 当使用带删除操作的图片预览组件时，可与[动作面板](./actionsheet)组合使用，对删除操作进行二次确认。 +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./action-sheet)组合使用，对删除操作进行二次确认。
    -
    ### 推荐/慎用示例 @@ -32,8 +31,6 @@ -
    - ### 相似组件 diff --git a/docs/miniprogram/design/image.md b/docs/miniprogram/design/image.md index 1c5ee7d669..5292350c08 100644 --- a/docs/miniprogram/design/image.md +++ b/docs/miniprogram/design/image.md @@ -20,7 +20,7 @@
    -##### 图片与[下拉刷新](./pulldownrefresh)组合使用，用于图片瀑布流时的内容更新。 +##### 图片与[下拉刷新](./pull-down-refresh)组合使用，用于图片瀑布流时的内容更新。
    @@ -29,8 +29,6 @@
    -
    - ### 推荐/慎用示例 @@ -48,12 +46,10 @@
    -
    - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | -| [图片预览](./imageviewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | +| [图片预览](./image-viewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | diff --git a/docs/miniprogram/design/indexes.md b/docs/miniprogram/design/indexes.md index 51ecae6a98..a6cef20142 100644 --- a/docs/miniprogram/design/indexes.md +++ b/docs/miniprogram/design/indexes.md @@ -6,7 +6,7 @@ ### 组件搭配使用 -##### 索引与[单选框](./Radio)、[多选框](./Checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。 +##### 索引与[单选框](./radio)、[多选框](./checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。
    @@ -14,9 +14,6 @@
    -
    - - ### 推荐/慎用示例 ##### 索引项需要跟数据项小标题保持一致。 @@ -34,21 +31,24 @@
    - + ##### 索引项排序应具备一定的逻辑相关性。 -
    - +
    +
    + -
    - -
    - +
    +
    + + +
    +
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [侧边栏](./Sidebar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | +| 组件名 | 何时使用 | +| :------------------- | :------------------------------------------------------------- | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/miniprogram/design/input.md b/docs/miniprogram/design/input.md new file mode 100644 index 0000000000..27aa917662 --- /dev/null +++ b/docs/miniprogram/design/input.md @@ -0,0 +1,72 @@ + + +### 何时使用 + +需要进行文字输入，且需填写的字数较少时使用。 + +### 组件搭配使用 + +##### 呈现在单元格中，可与按钮组件相结合，点击按钮触发相关功能。 + +
    +
    + +
    +
    + + +### 常见用法 + +##### 通常使用在表单中进行文字填写，填写状态下可在右侧显示清空输入的按钮，供用户快速清空已输入的内容。 + +
    + +
    + +
    + +##### 当需要进行较复杂的内容填写，如验证码等，可使用特定类型输入框，结合按钮、图形等辅助元素帮助用户完成流程。 + +
    +
    + +
    + +
    + +
    +
    + +### 推荐/慎用示例 + +##### 标签、占位符文本简明扼要地描述用户需要输入的内容，标签超过10个字时请考虑使用其它展示方式。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 当需要输入较长的复杂内容时，建议使用多行文本框输入。 +
    +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------------- | :------------------------------------------- | +| [多行文本框](./textarea) | 需要进行文字输入，且需填写的字数较多时使用。 | +| [搜索框](./search) | 当需要从海量信息中准确提取准确的内容时使用。 | diff --git a/docs/miniprogram/design/link.md b/docs/miniprogram/design/link.md index 42bbc18d35..1c5231861a 100644 --- a/docs/miniprogram/design/link.md +++ b/docs/miniprogram/design/link.md @@ -6,7 +6,7 @@ ### 组件搭配使用 -##### 链接与[消息通知](./message)、[公告栏](./notiesbar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 +##### 链接与[消息通知](./message)、[公告栏](./notice-bar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。
    @@ -17,7 +17,6 @@
    -
    ### 推荐/慎用示例 @@ -36,12 +35,10 @@ -
    - ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | | [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/design/loading.md b/docs/miniprogram/design/loading.md new file mode 100644 index 0000000000..a62bd77a06 --- /dev/null +++ b/docs/miniprogram/design/loading.md @@ -0,0 +1,58 @@ + + +### 何时使用 + +当打开新页面或操作完成后，等待加载时使用。 + +### 与页面布局相关 + +##### 当展示整个页面、或模块的加载进度时，通常放置在页面、模块的正中间。 + +
    +
    + +
    + +
    + +
    +
    + + +### 组件搭配使用 + +##### 在信息流页面中，可结合下拉刷新使用，对未展示出来的最新内容进行加载。 + +
    +
    + +
    + +
    + +
    +
    + +### 推荐/慎用示例 + +##### 当加载时间较长，尤其是超过10秒的场景中，推荐使用进度条，向用户明确展示当前任务的进展，避免等待时间过长带来焦急的负面体验。 + +
    +
    + + +
    + +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------ | :--------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [下拉刷新](./pull-down-refresh) | 当需要对页面信息进行整体刷新或加载更多同类信息时使用。 | diff --git a/docs/miniprogram/design/message.md b/docs/miniprogram/design/message.md new file mode 100644 index 0000000000..cfcc35ae63 --- /dev/null +++ b/docs/miniprogram/design/message.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。 + +### 与页面布局相关 + +##### 通知通常出现在页面顶部，叠加在页面的上层，可在一段时间后自动消失、或用户点击关闭。 + +
    +
    + +
    + +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 当需要在通知栏中展示按钮时，不建议超过1个。若需要使用更多按钮，建议使用其它交互方式。 + +
    +
    + + +
    +
    + +
    + +##### 消息通知是一种相对轻量、短时的反馈方式，尽量避免在页面中同时堆叠多个消息通知，用户可能会来不及关注它们。 + +
    +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 | diff --git a/docs/miniprogram/design/navbar.md b/docs/miniprogram/design/navbar.md index 071de0eaa2..2812619ef6 100644 --- a/docs/miniprogram/design/navbar.md +++ b/docs/miniprogram/design/navbar.md @@ -6,17 +6,18 @@ ### 组件搭配使用 -##### 带图标的导航栏与[抽屉](./Drawer)、[动作面板](./ActionSheet)组合使用，用于唤起一组操作或功能。 +##### 带图标的导航栏与[抽屉](./drawer)、[动作面板](./action-sheet)组合使用，用于唤起一组操作或功能。
    - + +
    +
    - -
    + ### 常见用法 @@ -34,12 +35,12 @@
    - +
    - +
    ##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 diff --git a/docs/miniprogram/design/picker.md b/docs/miniprogram/design/picker.md new file mode 100644 index 0000000000..fe98748bc5 --- /dev/null +++ b/docs/miniprogram/design/picker.md @@ -0,0 +1,40 @@ + + +### 何时使用 + +当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 + +### 推荐/慎用示例 + +##### 选择器若为一组有层级关系的选项时，选项层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
    +
    + + +
    +
    + +
    + +##### 选择器若为一组有层级关系的选项时，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
    +
    + + +
    + +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------------- | :----------------------------------------------------------------------- | +| [时间选择器](./date-time-picker ) | 在表单中需要输入单个日期或时间时使用。 | +| [级联选择器](./Cascader) | 当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/progress.md b/docs/miniprogram/design/progress.md new file mode 100644 index 0000000000..8f5428500c --- /dev/null +++ b/docs/miniprogram/design/progress.md @@ -0,0 +1,62 @@ + + +### 何时使用 + +当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 + +### 与页面布局相关 + +##### 当展示页面、模块的加载进度时，通常进度条放置在页面、模块的正中间。 + +
    +
    + +
    + +
    + +
    +
    + +### 常见用法 + +##### 通常用于任务周期较长的场景中，配有文字或图标显示进度和状态。 + +
    +
    + +
    +
    + +
    + +##### 当任务时间较短、或难以预估剩余时间时，通常弱化进度的百分比信息，如使用隐藏数值进度条、或微型的环形进度条。 + +
    +
    + +
    + +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 若任务需要等待的时间很长，可以提供大概的时间估计，让用户更有预期。 + +
    +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/miniprogram/design/pull-down-refresh.md b/docs/miniprogram/design/pull-down-refresh.md index 50813b6897..ded3d1d51c 100644 --- a/docs/miniprogram/design/pull-down-refresh.md +++ b/docs/miniprogram/design/pull-down-refresh.md @@ -11,47 +11,51 @@
    - +
    - +
    -
    - +
    -
    - - ### 常见用法 ##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。
    - +
    +
    + ##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。
    - +
    - +
    -
    + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [加载](./loading) |当打开新页面或操作完成后，等待加载时使用。| + diff --git a/docs/miniprogram/design/radio.md b/docs/miniprogram/design/radio.md index 1abb7dab43..28141fa0d0 100644 --- a/docs/miniprogram/design/radio.md +++ b/docs/miniprogram/design/radio.md @@ -6,7 +6,7 @@ ### 组件搭配使用 -##### 单选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 +##### 单选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
    @@ -19,8 +19,6 @@
    -
    - ### 推荐/慎用示例 @@ -52,8 +50,6 @@ -
    - ### 相似组件 diff --git a/docs/miniprogram/design/rate.md b/docs/miniprogram/design/rate.md new file mode 100644 index 0000000000..ffcacaedca --- /dev/null +++ b/docs/miniprogram/design/rate.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +当需要对某行为/事物进行简单的星级评定时使用。 + +### 组件搭配使用 + +##### 通常结合多行文本框、标签使用，常见于评论场景，用户对某事物进行星级评定后，可选择预设的文本标签、或在文本框中撰写内容来进行更详细的评价。 + +
    +
    + +
    +
    + +### 常见用法 + +##### 在较为严谨的评论场景，通常结合辅助文字，帮助用户更好地理解每个星级的含义，避免个体的打分标准不统一。 + +
    +
    + +
    +
    + +### 推荐/慎用示例 + +##### 可结合业务场景自定义评分图标，如使用品牌的icon，增强品牌透出，但不建议使用过于复杂的图形作为评分图标。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 在同一个评论场景中，评分机制应保持一致，不建议将半星、整星的评分机制混用。 +
    +
    + + +
    +
    + + diff --git a/docs/miniprogram/design/result.md b/docs/miniprogram/design/result.md new file mode 100644 index 0000000000..a55f5e2d8c --- /dev/null +++ b/docs/miniprogram/design/result.md @@ -0,0 +1,55 @@ + + +### 何时使用 + +当需要向用户展示操作后的结果反馈时使用。 + +### 常见用法 + +##### 任务本身在弹窗中进行或仅需要较为轻量的结果反馈时，可使用弹窗承载结果反馈。 + +
    +
    + +
    +
    + +
    + +##### 当任务结束并给予反馈后，需要推荐其他内容、任务、商品等给用户时，通常使用页面承载结果和推荐。 + +
    +
    + +
    +
    + +
    + +##### 当任务结果为失败时，通常会告知用户失败原因，甚至提供解决问题的操作。 + +
    +
    + +
    +
    + +
    + + +##### 当前操作结束后，若还存在一系列用户需关注的流程进度，通常会结合步骤条将流程展示于结果页。 + +
    +
    + +
    +
    + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :--------------------------- | +| [空状态](./empty ) | 当页面或模块数据为空时使用。 | + diff --git a/docs/miniprogram/design/search.md b/docs/miniprogram/design/search.md new file mode 100644 index 0000000000..d3e60af01a --- /dev/null +++ b/docs/miniprogram/design/search.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +当需要从海量信息中准确提取准确的内容时使用。 + +### 与页面布局相关 + +##### 位于页面或内容模块的最上方，通过搜索框、搜索icon等方式承载和触发功能。 + +
    +
    + +
    + +
    + +
    +
    + + +### 常见用法 + +##### 在可搜索内容类型较为单一的场景下，可直接在原页面激活搜索态进行搜索，并通过高亮命中字符的方式展示搜索结果，页面内容组织结构保持不变。 + +
    + +
    + +
    + +##### 在可搜索内容类型较丰富的场景下，通过模态承载搜索态，并在新页面中按分类呈现搜索结果。 + +
    + +
    + +
    + +##### 在用户触发搜索后，对用户即将搜索的内容进行预判和推荐，并需要满足营销的诉求。 + +
    + +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./Input) | 需要进行文字输入，且需填写的字数较少时使用。 | diff --git a/docs/miniprogram/design/sidebar.md b/docs/miniprogram/design/sidebar.md new file mode 100644 index 0000000000..bf1bbcaf7f --- /dev/null +++ b/docs/miniprogram/design/sidebar.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 + +### 组件搭配使用 + +##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。 + +
    +
    + +
    +
    + + +### 正确/慎用示例 + +##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。 +
    +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------ | :---------------------------------------------------------------------------- | +| [标签栏](./tab-bar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/design/slider.md b/docs/miniprogram/design/slider.md index 02820dd5ae..ecea810eb1 100644 --- a/docs/miniprogram/design/slider.md +++ b/docs/miniprogram/design/slider.md @@ -15,8 +15,6 @@ -
    - ### 常见用法 ##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 @@ -27,6 +25,8 @@ +
    + ##### 用于难以量化的对立数据，以此表示程度。
    @@ -35,8 +35,6 @@
    -
    - ### 推荐/慎用示例 @@ -54,7 +52,8 @@ -
    - - +### 相似组件 +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [步进器](./stepper) |需要进行数量选择时使用。| diff --git a/docs/miniprogram/design/steps.md b/docs/miniprogram/design/steps.md new file mode 100644 index 0000000000..014a2a73cb --- /dev/null +++ b/docs/miniprogram/design/steps.md @@ -0,0 +1,74 @@ + + +### 何时使用 + +当需要展示较为复杂的线性流程时使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 +
    +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 步骤不宜过多，过长的步骤建议优化流程或使用其它交互方式。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 每个小步骤建议尽量简洁清晰，以降低用户的理解和操作成本；若小步骤本身已经具有较高的复杂度，建议使用其它方式呈现。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。 + +
    + + +
    + +
    + +##### 尽量避免嵌套步骤条。 +
    +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :---------------------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/Swipecell.md b/docs/miniprogram/design/swipecell.md similarity index 65% rename from docs/miniprogram/_design/Swipecell.md rename to docs/miniprogram/design/swipecell.md index 744b300e3a..41432cc620 100644 --- a/docs/miniprogram/_design/Swipecell.md +++ b/docs/miniprogram/design/swipecell.md @@ -1,6 +1,4 @@ -# 滑动操作 Swipecell -## 组件设计指南 ### 何时使用 @@ -8,19 +6,18 @@ ### 组件搭配使用 -##### 与单元格、按钮组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。 +##### 与[单元格](./cell)、[按钮](./button)组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。
    - +
    - +
    - +
    -
    ### 常见用法 @@ -28,11 +25,11 @@
    - +
    - +
    - +
    @@ -40,19 +37,17 @@ ##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。 -
    - +
    - -
    + ### 推荐/慎用示例 -##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。 +##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。
    - +
    @@ -60,7 +55,7 @@ ##### 按钮的顺序、颜色使用需要符合用户预期。
    - +
    @@ -68,14 +63,13 @@ ##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。
    - +
    -
    ### 相似组件 -| 组件名 | 何时使用 | -| :----- | :----------------------------------- | -| [按钮](./button) | | +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/design/swiper.md b/docs/miniprogram/design/swiper.md index f2598ed3ac..9a276c6493 100644 --- a/docs/miniprogram/design/swiper.md +++ b/docs/miniprogram/design/swiper.md @@ -17,17 +17,16 @@ +
    ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 -
    +
    -
    - ### 推荐/慎用示例 @@ -40,4 +39,3 @@
    -
    diff --git a/docs/miniprogram/design/switch.md b/docs/miniprogram/design/switch.md new file mode 100644 index 0000000000..466c5ea5ed --- /dev/null +++ b/docs/miniprogram/design/switch.md @@ -0,0 +1,31 @@ + + +### 何时使用 + +当需要切换某个功能的开启、关闭时使用。 + +### 推荐/慎用示例 + +##### 开关状态的颜色使用建议符合颜色语义，尽量避免让开启、关闭状态的颜色产生混淆。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。 +
    +
    + + +
    +
    diff --git a/docs/miniprogram/design/tab-bar.md b/docs/miniprogram/design/tab-bar.md index d1e23aacab..51bf0b0a56 100644 --- a/docs/miniprogram/design/tab-bar.md +++ b/docs/miniprogram/design/tab-bar.md @@ -6,7 +6,7 @@ ### 组件搭配使用 -##### 标签栏与[徽标](./adge)组合使用，用于告知用户该模块/视图的状态变化。 +##### 标签栏与[徽标](./badge)组合使用，用于告知用户该模块/视图的状态变化。
    @@ -18,9 +18,6 @@
    -
    - - ### 推荐/慎用示例 ##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 @@ -64,18 +61,17 @@ -
    - - -
    - -
    +
    + + +
    ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | -| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | +| [选项卡](./tabs) |当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/design/tabs.md b/docs/miniprogram/design/tabs.md index 8ce0dfa141..cecdd26d81 100644 --- a/docs/miniprogram/design/tabs.md +++ b/docs/miniprogram/design/tabs.md @@ -17,7 +17,6 @@ -
    ### 组件搭配使用 @@ -30,9 +29,6 @@ -
    - - ### 常见用法 ##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 @@ -53,7 +49,6 @@ -
    ### 推荐/慎用示例 @@ -101,12 +96,11 @@ -
    - ### 相似组件 | 组件名 | 何时使用 | | :----- | :----------------------------------- | -| [底部标签栏](./tabbar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 。 | +| [标签栏](./tab-bar) | 当目标模块/视图需要从应用的任何地方直接进行访问时使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/design/textarea.md b/docs/miniprogram/design/textarea.md new file mode 100644 index 0000000000..ce907af8cf --- /dev/null +++ b/docs/miniprogram/design/textarea.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +需要进行文字输入，且需填写的字数较多时使用。 + +### 常见用法 + +##### 常见于表单、内容发布的场景中，用于输入较长的文本内容。 + +
    +
    + +
    + +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 尽量避免输入过于复杂的文本内容，考虑将内容拆分，让用户分步输入。 + +
    +
    + + +
    + +
    + + +
    +
    + +
    + +##### 建议根据待输入的内容决定多行文本框的高度。 +
    +
    + + +
    + +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 | + diff --git a/docs/miniprogram/design/toast.md b/docs/miniprogram/design/toast.md new file mode 100644 index 0000000000..43af7fa315 --- /dev/null +++ b/docs/miniprogram/design/toast.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 + +### 与页面布局相关 + +##### 轻提示通常放置在页面正中间，一段时间后自动消失。 + +
    +
    + +
    +
    + + +### 组件搭配使用 + +##### 轻提示经常和加载搭配使用，在页面内进行某项操作后，用作加载反馈。 + +
    +
    + +
    +
    + + +### 推荐/慎用示例 + +##### 轻提示的文案内容通常不超过30个字，确保用户有充足的时间进行阅读，若需要提示较长的文本内容，建议使用其它交互方式。 + +
    +
    + + +
    + +
    + + +
    +
    + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------------- | +| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失。 | diff --git a/docs/miniprogram/design/upload.md b/docs/miniprogram/design/upload.md new file mode 100644 index 0000000000..d8f14abb2c --- /dev/null +++ b/docs/miniprogram/design/upload.md @@ -0,0 +1,45 @@ + + +### 何时使用 + +当需要进行图片上传时使用。 + +### 组件搭配使用 + +##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./action-sheet)，供用户选择不同渠道进行新的上传。 + +
    + +
    + +
    + +##### 点击已经上传的图片可跳转[图片预览](./image-viewer)，让用户对已上传的图片进行快速查看。 + +
    + +
    + + + +### 推荐/慎用示例 + +##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。 + +
    + + +
    + +
    + +##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。 + +
    +
    + + +
    +
    + + From b606527f7d998312b6407d3f6325bdf986969fd3 Mon Sep 17 00:00:00 2001 From: brian Date: Fri, 14 Apr 2023 19:51:53 +0800 Subject: [PATCH 275/312] Refactor/link (#1272) * link Mobile Component * create link doc * fix: lint fix * fix: link hover style --- style/mobile/components/link/v2/_index.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/style/mobile/components/link/v2/_index.less b/style/mobile/components/link/v2/_index.less index 382f78247e..832cb727cd 100644 --- a/style/mobile/components/link/v2/_index.less +++ b/style/mobile/components/link/v2/_index.less @@ -41,11 +41,13 @@ color: @@disabledColor; } - &.@{link}--hover { - color: @@activeColor; + &:active { + &.@{link}--hover { + color: @@activeColor; - &.@{link}--underline::after { - border-color: @@activeColor; + &.@{link}--underline::after { + border-color: @@activeColor; + } } } } @@ -66,6 +68,7 @@ display: flex; align-items: center; box-sizing: content-box; + text-decoration: none; &--underline::after { content: ""; From bb08d0d71e1533f4b312f1b78add2d207a8612b6 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Mon, 17 Apr 2023 10:44:32 +0800 Subject: [PATCH 276/312] feat: add docs for footer (#1274) --- docs/mobile/api_v2/footer.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs/mobile/api_v2/footer.md diff --git a/docs/mobile/api_v2/footer.md b/docs/mobile/api_v2/footer.md new file mode 100644 index 0000000000..efa3267114 --- /dev/null +++ b/docs/mobile/api_v2/footer.md @@ -0,0 +1,19 @@ +--- +title: Footer 页脚 +description: 用于基础列表展示，可附带文字、品牌 logo、操作，常用商详、个人中心、设置等页面。 +spline: data +isComponent: true +toc: false +--- + +### 基础页脚 + +{{ base }} + +### 基础加链接页脚 + +{{ link }} + +### 品牌页脚 + +{{ logo }} \ No newline at end of file From 1ded9392341b517ee4b41f2e67393fdbd15d22d3 Mon Sep 17 00:00:00 2001 From: brian Date: Mon, 17 Apr 2023 18:25:35 +0800 Subject: [PATCH 277/312] Refactor/link (#1278) * link Mobile Component * create link doc * fix: lint fix * fix: link hover style * fix: update link style * feat: create link style --- style/mobile/components/link/v2/_index.less | 8 ++------ style/mobile/components/link/v2/_var.less | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/style/mobile/components/link/v2/_index.less b/style/mobile/components/link/v2/_index.less index 832cb727cd..5fba832844 100644 --- a/style/mobile/components/link/v2/_index.less +++ b/style/mobile/components/link/v2/_index.less @@ -16,12 +16,6 @@ .@{link}__suffix-icon { font-size: @@iconSize; } - .@{link}__prefix-icon { - margin-left: @link-icon-margin; - } - .@{link}__suffix-icon { - margin-right: @link-icon-margin; - } } } @@ -83,9 +77,11 @@ &__prefix-icon:not(:empty) + &__content:not(:empty) { padding-left: 4px; + display: inherit; } &__content:not(:empty) + &__suffix-icon:not(:empty) { padding-left: 4px; + display: inherit; } } diff --git a/style/mobile/components/link/v2/_var.less b/style/mobile/components/link/v2/_var.less index 0e39ae9d64..73a36aa275 100644 --- a/style/mobile/components/link/v2/_var.less +++ b/style/mobile/components/link/v2/_var.less @@ -31,7 +31,7 @@ @link-content-medium-font-size: 14px; @link-content-medium-line-height: 22px; -@link-icon-medium-font-size: 14px; +@link-icon-medium-font-size: 16px; @link-content-large-font-size: 16px; @link-content-large-line-height: 24px; From 0bae4abe8555edf7bd626d771c6eaaf5cd7058f7 Mon Sep 17 00:00:00 2001 From: jerimizhang <3435677954@qq.com> Date: Mon, 17 Apr 2023 23:14:04 +0800 Subject: [PATCH 278/312] fix: refractor dialog style (#1277) --- style/mobile/components/dialog/v2/_index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/mobile/components/dialog/v2/_index.less b/style/mobile/components/dialog/v2/_index.less index cdb3f451f1..b5f89c8783 100644 --- a/style/mobile/components/dialog/v2/_index.less +++ b/style/mobile/components/dialog/v2/_index.less @@ -67,6 +67,7 @@ .@{dialog}__button { width: 100%; + flex: unset; } } From 4786527eead757ae607aefdbd4587b6551433cb3 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 17 Apr 2023 23:46:32 +0800 Subject: [PATCH 279/312] feat: add form form mobile (#1276) * feat: add form form mobile * fix: fix cr * feat(Upload): enrich css variable * fix: fix cr --- docs/mobile/api_v2/form.md | 15 +++ style/mobile/components/form/_index.less | 120 ++++++++++++++++++ style/mobile/components/form/_var.less | 5 + style/mobile/components/upload/v2/_index.less | 2 +- style/mobile/components/upload/v2/_var.less | 1 + 5 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 docs/mobile/api_v2/form.md create mode 100644 style/mobile/components/form/_index.less create mode 100644 style/mobile/components/form/_var.less diff --git a/docs/mobile/api_v2/form.md b/docs/mobile/api_v2/form.md new file mode 100644 index 0000000000..f99d547350 --- /dev/null +++ b/docs/mobile/api_v2/form.md @@ -0,0 +1,15 @@ +--- +title: Form 表单 +description: 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 +spline: base +isComponent: true +toc: false +--- + +### 01 组件类型 + +基础表单 + +{{ horizontal }} + +{{ vertical }} diff --git a/style/mobile/components/form/_index.less b/style/mobile/components/form/_index.less new file mode 100644 index 0000000000..89c889c15f --- /dev/null +++ b/style/mobile/components/form/_index.less @@ -0,0 +1,120 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-form { + background-color: #fff; + + .@{prefix}-form__item { + display: flex; + box-sizing: border-box; + padding: @form-item-vertical-padding @form-item-horizontal-padding; + position: relative; + + &:not(:last-child)::after { + .hairline-bottom(@form-item-border-color); + + left: @form-item-border-left-space; + right: @form-item-border-right-space; + } + + &-help, + &-extra { + display: flex; + font-size: 12px; + margin: 0; + width: 100%; + height: auto; + min-height: 20px; + margin-top: 4px; + } + + &-help { + color: @font-gray-4; + } + + &-extra { + color: @error-color-6; + } + + &-wrap { + width: 100%; + } + + &--top { + display: flex; + flex-direction: column; + } + } + + &--top { + align-items: center; + } + + &__label { + float: left; + padding-right: 16px; + vertical-align: top; + line-height: 22px; + color: @font-gray-1; + box-sizing: border-box; + white-space: nowrap; + + &--top { + padding-bottom: 8px; + } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } + + &--required { + label::before { + display: inline-block; + margin-right: 2px; + color: @error-color-6; + line-height: 20px; + content: "*"; + } + } + + &--colon { + label::after { + content: ":"; + position: relative; + margin: 0 2px; + } + } + } + + &__controls { + display: flow-root; + position: relative; + + &-content { + display: flex; + align-items: center; + min-height: 24px; + } + + &--left { + justify-content: flex-start; + } + + &--right { + justify-content: flex-end; + } + } + + // 覆盖一些组件样式 + .@{prefix}-cell, + .@{prefix}-input, + .@{prefix}-textarea, + .@{prefix}-upload { + padding: 0; + } +} diff --git a/style/mobile/components/form/_var.less b/style/mobile/components/form/_var.less new file mode 100644 index 0000000000..6be5253f38 --- /dev/null +++ b/style/mobile/components/form/_var.less @@ -0,0 +1,5 @@ +@form-item-vertical-padding: 16px; +@form-item-horizontal-padding: 16px; +@form-item-border-left-space: @form-item-horizontal-padding; +@form-item-border-right-space: 0; +@form-item-border-color: @component-stroke; diff --git a/style/mobile/components/upload/v2/_index.less b/style/mobile/components/upload/v2/_index.less index 2457b0c892..a72b7a8c68 100644 --- a/style/mobile/components/upload/v2/_index.less +++ b/style/mobile/components/upload/v2/_index.less @@ -4,7 +4,7 @@ .@{prefix}-upload { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(@upload-grid-columns, 1fr); gap: 16px 8px; padding: 16px; diff --git a/style/mobile/components/upload/v2/_var.less b/style/mobile/components/upload/v2/_var.less index 4b7efb3884..9e8d8f4b4e 100644 --- a/style/mobile/components/upload/v2/_var.less +++ b/style/mobile/components/upload/v2/_var.less @@ -3,3 +3,4 @@ @upload-radius: var(--td-upload-radius, @radius-default); @upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 28px); @upload-delete-icon-color: var(--td-upload-delete-icon-color, @font-white-1); +@upload-grid-columns: var(--td-upload-grid-columns, 4); From 0aea279c8059c53b688200bd19203d41f8b2c559 Mon Sep 17 00:00:00 2001 From: jarmywang Date: Tue, 18 Apr 2023 09:58:04 +0800 Subject: [PATCH 280/312] =?UTF-8?q?feat:=20divider=E6=94=B9=E9=80=A0=20(#1?= =?UTF-8?q?281)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update Divider.md * fix(divider): add end line(#1281) --- docs/mobile/api_v2/divider.md | 12 +++--------- style/mobile/components/divider/v2/_index.less | 12 ++++++------ style/mobile/components/divider/v2/_var.less | 1 + 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/docs/mobile/api_v2/divider.md b/docs/mobile/api_v2/divider.md index 56b396b822..000171b39e 100644 --- a/docs/mobile/api_v2/divider.md +++ b/docs/mobile/api_v2/divider.md @@ -8,16 +8,10 @@ toc: false ### 基础分割符 -基础分割线是没有文字的独立线条，又分为水平分割线和垂直分割线。水平分割线常用来对不同元素内容进行分割，垂直分割线常用来做行内分割。 +分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向 {{ base }} -### 文字 + 直线 +### 虚线样式 -{{ align }} - -### 纯文字 + 分割 - -带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用 - -{{ vertical }} +{{ theme }} diff --git a/style/mobile/components/divider/v2/_index.less b/style/mobile/components/divider/v2/_index.less index 0e2400ab83..52f7a2932c 100644 --- a/style/mobile/components/divider/v2/_index.less +++ b/style/mobile/components/divider/v2/_index.less @@ -6,7 +6,7 @@ display: flex; color: @divider-color; border-color: @divider-color; - border-style: solid; + border-style: @divider-content-line-style; border-width: 0; &::before, @@ -22,8 +22,8 @@ &--horizontal { align-items: center; - margin-top: 20rpx; - margin-bottom: 20rpx; + margin-top: 10px; + margin-bottom: 10px; &::before, &::after { @@ -32,14 +32,14 @@ } .@{prefix}-divider__content:not(:empty) { - margin: 0 24rpx; + margin: 0 12px; } } &--vertical { flex-direction: column; height: 1em; - margin: 0 16rpx; + margin: 0 8px; &::before, &::after { @@ -65,6 +65,6 @@ &--left::before, &--right::after { - max-width: 60rpx; + max-width: 30px; } } diff --git a/style/mobile/components/divider/v2/_var.less b/style/mobile/components/divider/v2/_var.less index 6f37a421ec..ff548a1269 100644 --- a/style/mobile/components/divider/v2/_var.less +++ b/style/mobile/components/divider/v2/_var.less @@ -2,3 +2,4 @@ @divider-content-color: var(--td-divider-content-color, @font-gray-3); @divider-content-font-size: var(--td-divider-content-font-size, 12px); @divider-content-line-height: var(--td-divider-content-line-height, 20px); +@divider-content-line-style: var(--td-divider-content-line-style, solid); From 74a2dc7bc26804e8f3ff197a512c19fc387e51a4 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 18 Apr 2023 11:43:21 +0800 Subject: [PATCH 281/312] fix(overlay): update style (#1282) --- style/mobile/components/overlay/_index.less | 26 ++++----------------- style/mobile/components/overlay/_var.less | 5 ++-- style/mobile/components/popup/_index.less | 2 +- 3 files changed, 8 insertions(+), 25 deletions(-) diff --git a/style/mobile/components/overlay/_index.less b/style/mobile/components/overlay/_index.less index f496e3470f..4c38d59057 100644 --- a/style/mobile/components/overlay/_index.less +++ b/style/mobile/components/overlay/_index.less @@ -8,15 +8,11 @@ position: fixed; top: 0; left: 0; - z-index: @overlay-z-index; - display: block; + bottom: 0; width: 100%; - height: 100%; - background-color: @mask-bg-color; - - &--transparent { - background-color: transparent; - } + z-index: @overlay-zindex; + background-color: @overlay-bg-color; + transition-duration: @overlay-transition-duration; &-enter-from, &-leave-to { @@ -28,18 +24,4 @@ transition-property: background-color; transition-timing-function: ease; } - - &-aria-button { - position: absolute; - top: 0; - left: 0; - z-index: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - - &-content { - z-index: 1; - } } diff --git a/style/mobile/components/overlay/_var.less b/style/mobile/components/overlay/_var.less index 17c9686add..287dbdc10c 100644 --- a/style/mobile/components/overlay/_var.less +++ b/style/mobile/components/overlay/_var.less @@ -1,2 +1,3 @@ -@overlay-z-index: 1500; -@mask-bg-color:rgba(0, 0, 0, .6); +@overlay-zindex: var(--td-overlay-zindex, 1000); +@overlay-bg-color: var(--td-overlay-bg-color, @font-gray-2); +@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms); diff --git a/style/mobile/components/popup/_index.less b/style/mobile/components/popup/_index.less index 9bd49e1965..58c9464782 100644 --- a/style/mobile/components/popup/_index.less +++ b/style/mobile/components/popup/_index.less @@ -7,7 +7,7 @@ .@{prefix}-popup { &--content { position: fixed; - z-index: @overlay-z-index; + z-index: 1500; } &--content-top { From cbb41d9908d73197c5d1e090b92b04fd33091f09 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 18 Apr 2023 15:53:39 +0800 Subject: [PATCH 282/312] fix(Dialog): resolve close-icon style (#1283) --- style/mobile/components/dialog/v2/_index.less | 1 + style/mobile/components/dialog/v2/_var.less | 1 + 2 files changed, 2 insertions(+) diff --git a/style/mobile/components/dialog/v2/_index.less b/style/mobile/components/dialog/v2/_index.less index b5f89c8783..8610a2a965 100644 --- a/style/mobile/components/dialog/v2/_index.less +++ b/style/mobile/components/dialog/v2/_index.less @@ -12,6 +12,7 @@ position: absolute; top: 8px; right: 8px; + font-size: @dialog-close-font-size; color: @dialog-close-color; } diff --git a/style/mobile/components/dialog/v2/_var.less b/style/mobile/components/dialog/v2/_var.less index 53b72f1c59..ba8be0c7ae 100644 --- a/style/mobile/components/dialog/v2/_var.less +++ b/style/mobile/components/dialog/v2/_var.less @@ -14,4 +14,5 @@ @dialog-content-color: var(--td-dialog-content-color, @font-gray-2); @dialog-content-line-height: var(--td-dialog-content-line-height, 24px); +@dialog-close-font-size: var(--td-dialog-close-font-size, 22px); @dialog-close-color: var(--td-dialog-close-color, @font-gray-3); From 1c7009cb6e3585906c3362262f735b2312286cd7 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 18 Apr 2023 16:53:02 +0800 Subject: [PATCH 283/312] fix: fix design docs file name error (#1285) --- docs/miniprogram/design/{sidebar.md => side-bar.md} | 0 docs/miniprogram/design/{swipecell.md => swipe-cell.md} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename docs/miniprogram/design/{sidebar.md => side-bar.md} (100%) rename docs/miniprogram/design/{swipecell.md => swipe-cell.md} (100%) diff --git a/docs/miniprogram/design/sidebar.md b/docs/miniprogram/design/side-bar.md similarity index 100% rename from docs/miniprogram/design/sidebar.md rename to docs/miniprogram/design/side-bar.md diff --git a/docs/miniprogram/design/swipecell.md b/docs/miniprogram/design/swipe-cell.md similarity index 100% rename from docs/miniprogram/design/swipecell.md rename to docs/miniprogram/design/swipe-cell.md From b3064b7c99169817b49bef8822b5545c68ffa7cd Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 18 Apr 2023 20:26:38 +0800 Subject: [PATCH 284/312] fix(popup): update style for mobile (#1286) --- docs/mobile/api_v2/popup.md | 34 ++++--------- .../components/action-sheet/_index.less | 2 - style/mobile/components/popup/_index.less | 48 ------------------- style/mobile/components/popup/v2/_index.less | 28 ++--------- style/mobile/utilities/_animation.less | 4 +- style/mobile/utilities/_transition.less | 47 ++++++++++++++++++ 6 files changed, 60 insertions(+), 103 deletions(-) create mode 100644 style/mobile/utilities/_transition.less diff --git a/docs/mobile/api_v2/popup.md b/docs/mobile/api_v2/popup.md index 23d31c83e7..0b046ed755 100644 --- a/docs/mobile/api_v2/popup.md +++ b/docs/mobile/api_v2/popup.md @@ -6,36 +6,18 @@ isComponent: true toc: false --- -### 中部弹出 +### 基础类型 -使用场景：常用于轻提示场景 +#### 基础弹出层 -{{ placement-center }} +{{ base }} -### 底部弹出 +### 组件示例 -使用场景：常用于较重要的操作反馈提示场景或不打断主任务的临时操作 +#### 带标题和操作 -{{ placement-bottom }} +{{ with-title }} -### 顶部弹出 +#### 带自定义关闭按钮 -使用场景：常用于及时反馈 - -{{ placement-top }} - -### 左侧弹出 - -使用场景：常用于页面导航场景 - -{{ placement-left }} - -### 右侧弹出 - -使用场景：常用于页面导航场景 - -{{ placement-right }} - -### 自定义动画 - -{{ custom-animation }} +{{ custom-close }} \ No newline at end of file diff --git a/style/mobile/components/action-sheet/_index.less b/style/mobile/components/action-sheet/_index.less index 11d7359eba..4ec5954df2 100644 --- a/style/mobile/components/action-sheet/_index.less +++ b/style/mobile/components/action-sheet/_index.less @@ -4,8 +4,6 @@ @import "../../mixins/_index.less"; -@import "../popup/_index.less"; - .@{prefix}-action-sheet { &__panel { background-color: #fff; diff --git a/style/mobile/components/popup/_index.less b/style/mobile/components/popup/_index.less index 58c9464782..c8cad94eaa 100644 --- a/style/mobile/components/popup/_index.less +++ b/style/mobile/components/popup/_index.less @@ -41,51 +41,3 @@ transform: translate(-50%, -50%); } } - -.slide-top-enter-active { - animation: @slide-top-in .3s; -} - -.slide-top-leave-active { - animation: @slide-top-out .3s; -} - -.slide-right-enter-active { - animation: @slide-right-in .3s; -} - -.slide-right-leave-active { - animation: @slide-right-out .3s; -} - -.slide-bottom-enter-active { - animation: @slide-bottom-in .3s; -} - -.slide-bottom-leave-active { - animation: @slide-bottom-out .3s; -} - -.slide-left-enter-active { - animation: @slide-left-in .3s; -} - -.slide-left-leave-active { - animation: @slide-left-out .3s; -} - -.fade-zoom-enter-active { - animation: @fade-zoom-in .35s; -} - -.fade-zoom-leave-active { - animation: @fade-zoom-out .35s; -} - -.fade-enter-active { - animation: @fade-in .3s; -} - -.fade-leave-active { - animation: @fade-out .3s; -} diff --git a/style/mobile/components/popup/v2/_index.less b/style/mobile/components/popup/v2/_index.less index 3bf5647b50..b029fa60b3 100644 --- a/style/mobile/components/popup/v2/_index.less +++ b/style/mobile/components/popup/v2/_index.less @@ -2,12 +2,15 @@ @import "./_var.less"; +@import "../../../utilities/_transition.less"; + .@{popup} { position: fixed; z-index: 11500; max-height: 100vh; transition: all 300ms ease; background-color: @popup-bg-color; + box-sizing: border-box; &__content { position: relative; @@ -56,34 +59,9 @@ top: 50%; left: 50%; transform: scale(1) translate3d(-50%, -50%, 0); - transform-origin: 0% 0%; border-radius: @popup-border-radius; } - &.@{prefix}-fade-enter, - &.@{prefix}-fade-leave-to { - &.@{popup}--top { - transform: translateY(-100%); - } - - &.@{popup}--bottom { - transform: translateY(100%); - } - - &.@{popup}--left { - transform: translateX(-100%); - } - - &.@{popup}--right { - transform: translateX(100%); - } - - &.@{popup}--center { - transform: scale(.6) translate3d(-50%, -50%, 0); - opacity: 0; - } - } - &.@{prefix}-dialog-enter, &.@{prefix}-dialog-leave-to { &.@{popup}--center { diff --git a/style/mobile/utilities/_animation.less b/style/mobile/utilities/_animation.less index e1a38667b7..3802cd96a5 100644 --- a/style/mobile/utilities/_animation.less +++ b/style/mobile/utilities/_animation.less @@ -139,7 +139,7 @@ @keyframes @fade-zoom-in { 0% { opacity: 0; - transform: translate(-50%, -50%) scale(.8); + transform: translate(-50%, -50%) scale(.6); } 100% { @@ -156,6 +156,6 @@ 100% { opacity: 0; - transform: translate(-50%, -50%) scale(.8); + transform: translate(-50%, -50%) scale(.6); } } diff --git a/style/mobile/utilities/_transition.less b/style/mobile/utilities/_transition.less new file mode 100644 index 0000000000..b661e50541 --- /dev/null +++ b/style/mobile/utilities/_transition.less @@ -0,0 +1,47 @@ +.slide-top-enter-active { + animation: @slide-top-in .3s; +} + +.slide-top-leave-active { + animation: @slide-top-out .3s; +} + +.slide-right-enter-active { + animation: @slide-right-in .3s; +} + +.slide-right-leave-active { + animation: @slide-right-out .3s; +} + +.slide-bottom-enter-active { + animation: @slide-bottom-in .3s; +} + +.slide-bottom-leave-active { + animation: @slide-bottom-out .3s; +} + +.slide-left-enter-active { + animation: @slide-left-in .3s; +} + +.slide-left-leave-active { + animation: @slide-left-out .3s; +} + +.fade-zoom-enter-active { + animation: @fade-zoom-in .35s; +} + +.fade-zoom-leave-active { + animation: @fade-zoom-out .35s; +} + +.fade-enter-active { + animation: @fade-in .3s; +} + +.fade-leave-active { + animation: @fade-out .3s; +} From f21f02da912781022f691fac2a745e7efeafed84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=81=E4=B8=89?= <1045322254@qq.com> Date: Wed, 19 Apr 2023 16:50:24 +0800 Subject: [PATCH 285/312] =?UTF-8?q?feat:=20toast=E6=94=B9=E9=80=A0=20(#127?= =?UTF-8?q?9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: toast改造 * feat: toast-md更新 --------- Co-authored-by: thewang --- docs/mobile/api_v2/toast.md | 24 ++++++-------------- style/mobile/components/toast/v2/_index.less | 4 ++-- 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/docs/mobile/api_v2/toast.md b/docs/mobile/api_v2/toast.md index 366f058141..af895c59f8 100644 --- a/docs/mobile/api_v2/toast.md +++ b/docs/mobile/api_v2/toast.md @@ -6,30 +6,20 @@ isComponent: true toc: false --- -### 文本轻提示 +## 代码演示 -当进行某一操作，需要对该操作进行解释或者提示时，提示 2 秒后自动消失 提示内容整体居中对齐，最多显示两行 整体位置可以位于内容区顶部、底部、中心等，需整体居中对齐 +### 基础演示 -{{ text }} +{{ base }} -### 默认提示 +### 组件状态 -相比图标轻提示可以加一些辅助文字，对当前状态进行解释说明 - -{{ iconText }} - -### 不同位置的提示 - -{{ position }} +{{ theme }} ### 显示遮罩 -{{ preventScrollThrough }} +{{ cover }} ### 手动关闭 -{{ mask }} - -### 透传 Overlay - -{{ overlay }} +{{ close }} diff --git a/style/mobile/components/toast/v2/_index.less b/style/mobile/components/toast/v2/_index.less index 49a111e85e..593b401aa6 100644 --- a/style/mobile/components/toast/v2/_index.less +++ b/style/mobile/components/toast/v2/_index.less @@ -4,7 +4,7 @@ .@{prefix}-toast { position: fixed; - right: -50%; + top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12001; @@ -12,7 +12,7 @@ transition: opacity 300ms ease; background-color: @toast-bg-color; border-radius: @toast-radius; - font-size: 24px; + font-size: 14px; color: @toast-color; max-width: @toast-max-width; width: fit-content; From 074899b05b503617a1e3de9eb9b56bdbacd74bbf Mon Sep 17 00:00:00 2001 From: Y Date: Wed, 19 Apr 2023 17:59:23 +0800 Subject: [PATCH 286/312] fix(Toast): update style (#1287) * fix(Toast): update style * Update _index.less --- style/mobile/components/toast/v2/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/mobile/components/toast/v2/_index.less b/style/mobile/components/toast/v2/_index.less index 593b401aa6..7bf2f1cb9b 100644 --- a/style/mobile/components/toast/v2/_index.less +++ b/style/mobile/components/toast/v2/_index.less @@ -4,7 +4,6 @@ .@{prefix}-toast { position: fixed; - top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12001; From d33a555bcdca83caccd3db572ee76ed52431c076 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 20 Apr 2023 10:58:03 +0800 Subject: [PATCH 287/312] chore: update theme generator desc (#1288) --- theme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme.md b/theme.md index b16d9f051c..6a6ab7f1a7 100644 --- a/theme.md +++ b/theme.md @@ -20,9 +20,9 @@ TDesign 提供五大类 Design Token，包括`颜色`、`字体`、`圆角`、` #### 使用主题生成器配置 CSS 变量 -因为涉及到的 Token 数量很多，**我们提供了更直观的基于 CSS Token 实现的`主题配置生成器`，来帮助您快速定制您需要的主题。您可以通过`点击官网右下角的按钮`打开我们的主题配置生成器**。 +因为涉及到的 CSS 变量数量很多，**我们提供了更直观的基于 CSS 变量 实现的`主题配置生成器`，来帮助您快速定制您需要的主题。您可以通过`点击官网下方的悬浮按钮`打开我们的主题配置生成器**。 -通过主题配置生成器配置出您满意的 Token 之后，请点击`导出主题配置`，我们会导出一份全新的 CSS 文件到您本地，您只需要将文件放置进您的项目文件目录中，并在项目中 import 该 CSS 文件，即可得到一个全新主题样式的 TDesign 。 +通过主题配置生成器配置出您满意的主题 CSS 变量 之后，请点击`下载按钮`，我们会导出一份全新的 CSS 文件到您本地，您只需要将文件放置进您的项目文件目录中，并在项目中 import 该 CSS 文件，即可得到一个全新主题样式的 TDesign 。 ### 使用 less 变量 针对组件进行精细化定制 From 2082340b892552a452bfe952df94de0314a37f42 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 20 Apr 2023 16:09:29 +0800 Subject: [PATCH 288/312] fix(ColorPikcer): toggle color format in gradient mode (#1289) --- js/color-picker/color.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/color-picker/color.ts b/js/color-picker/color.ts index d44df1ad5a..1a561cb58f 100644 --- a/js/color-picker/color.ts +++ b/js/color-picker/color.ts @@ -103,6 +103,13 @@ export class Color { if (input === this.originColor) { return; } + if (this.isGradient) { + // 处理gradient模式下切换不同格式时的交互问题 + const colorHsv = tinyColor(input).toHsv(); + this.states = colorHsv; + this.updateCurrentGradientColor(); + return; + } this.originColor = input; this.isGradient = false; const gradientColors = parseGradientString(input); From 15cd2bc476ab2dc5427b298bccfa61ac27c12cd8 Mon Sep 17 00:00:00 2001 From: vapour <72777988+vapourma@users.noreply.github.com> Date: Fri, 21 Apr 2023 11:06:28 +0800 Subject: [PATCH 289/312] =?UTF-8?q?=E7=BF=BB=E8=AF=91issue=20(#1293)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/web/api/badge.en-US.md | 41 ++++ docs/web/api/calendar.en-US.md | 91 ++++++++ docs/web/api/collapse.en-US.md | 35 +++ docs/web/api/comment.en-US.md | 43 ++++ docs/web/api/divider.en-US.md | 30 +++ docs/web/api/grid.en-US.md | 43 ++++ docs/web/api/icon.en-US.md | 7 + docs/web/api/layout.en-US.md | 34 +++ docs/web/api/list.en-US.md | 37 ++++ docs/web/api/progress.en-US.md | 19 ++ docs/web/api/skeleton.en-US.md | 37 ++++ docs/web/api/steps.en-US.md | 57 +++++ docs/web/api/swiper.en-US.md | 56 +++++ docs/web/api/table.en-US.md | 394 +++++++++++++++++++++++++++++++++ docs/web/api/tag.en-US.md | 31 +++ docs/web/api/tooltip.en-US.md | 41 ++++ docs/web/api/tree.en-US.md | 107 +++++++++ 17 files changed, 1103 insertions(+) create mode 100644 docs/web/api/badge.en-US.md create mode 100644 docs/web/api/calendar.en-US.md create mode 100644 docs/web/api/collapse.en-US.md create mode 100644 docs/web/api/comment.en-US.md create mode 100644 docs/web/api/divider.en-US.md create mode 100644 docs/web/api/grid.en-US.md create mode 100644 docs/web/api/icon.en-US.md create mode 100644 docs/web/api/layout.en-US.md create mode 100644 docs/web/api/list.en-US.md create mode 100644 docs/web/api/progress.en-US.md create mode 100644 docs/web/api/skeleton.en-US.md create mode 100644 docs/web/api/steps.en-US.md create mode 100644 docs/web/api/swiper.en-US.md create mode 100644 docs/web/api/table.en-US.md create mode 100644 docs/web/api/tag.en-US.md create mode 100644 docs/web/api/tooltip.en-US.md create mode 100644 docs/web/api/tree.en-US.md diff --git a/docs/web/api/badge.en-US.md b/docs/web/api/badge.en-US.md new file mode 100644 index 0000000000..5c1c171f5e --- /dev/null +++ b/docs/web/api/badge.en-US.md @@ -0,0 +1,41 @@ +--- +title: Badge +description: The badge identifier that appears in the upper right corner of an icon or text. +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### Badge in the style of a red dot. + +It is displayed as a circle and is located in the upper right corner of an icon or after a text title when there is no icon. In scenarios with weak prompts, the number is not displayed and the user needs to manually click to view and clear it. + +{{ base }} + +### Badge in the style of a number. + +The badge containing a number, suitable for scenarios that require strong reminders and directly alerting the user to the number of related information. + +{{ number }} + +### Customized Badge + +The displayed information can be customized, such as displaying as “hot” or “new”. + +{{ custom }} + +### Badges of different sizes. + +Two sizes are provided: standard (default) and small. + +{{ size }} + +### Badges of different shapes. + +wo different shapes of badges are provided: round and square. + +{{ shape }} + +### Control the offset position of the badge display. + +{{ offset }} diff --git a/docs/web/api/calendar.en-US.md b/docs/web/api/calendar.en-US.md new file mode 100644 index 0000000000..daae512754 --- /dev/null +++ b/docs/web/api/calendar.en-US.md @@ -0,0 +1,91 @@ +--- +title: Calendar +description: Container for displaying data or dates in a calendar format. +isComponent: true +usage: { title: "", description: "" } +spline: data +--- + +### Event calendar panel + +A date display container that can display events within dates. It is commonly used when there is enough space and when it is necessary to carry or display event information. + +{{ base }} + +### Card mode calendar + +Using individual dates as units, nested within a container with limited space to display dates and other information. + +{{ card }} + +### Function example + +#### Specify highlighted dates + +Customize specified highlighted dates through component properties. The component defaults to highlighting “today” or “the current month”. The `value` attribute can be used to set this highlighted date. + +{{ value }} + +#### Switch mode Calendar/Monthly + +Specify the display form of the component through component properties. The component is displayed in calendar form by default and provides “Calendar” and “Monthly” mode switching buttons. Developers can switch modes by modifying the `mode` attribute. + +{{ mode }} + +#### Specify the first day of the week in the first column + +Specify the first day of the week in the first column: Specify the first day of the week in the calendar’s first column through component properties. The component defaults to “Monday” in the first column and can be set to other days of the week through the `firstDayOfWeek` attribute (only valid when `mode` is `month`). + +{{ first-day-of-week }} + +#### Control related configuration + +Customize the control of the component through component properties. In some business scenarios, it may be necessary to globally hide or disable controls. This can also be achieved through the `controllerConfig` attribute for local control. + +{{ controller-config }} + +### Customization + +#### Custom calendar range + +Specify the value range of the year and month selection box through component properties. By default, the component allows years to be selected from `1970 - ∞` and there is no restriction on months. The range attribute can be used to set the selectable `range` of the calendar. + +{{ range }} + +#### Customizing the display of weeks + +You can customize the display of weeks through the `week` attribute or slot. By default, the weeks in the calendar are displayed as “Monday” to “Sunday”, but in some scenarios, you may want to customize the display. + +{{ week }} + +### Event example + +Use `methods` to define the execution logic of events. Developers can use these events to implement more customized features. + +{{ events }} + +### Slot example + +#### Header slot (top left corner of the component) + +Display content in the top left corner of the component. In some business scenarios, you may need to display a title or similar content in the top left corner of the component. In this case, you can use the `head` named slot. + +{{ head }} + +#### Cell slot - Append content + +Append content to the existing cell display. By default, the current date is displayed in the calendar cell. If you need to display additional information, you can use the `cellAppend` named slot. + +{{ cell-append }} + +#### Cell slot - Custom content + +Completely rewrite the content displayed in the cell. Unlike the `cellAppend` named slot, the `cell` named slot allows you to fully customize the cell content. + +{{ cell }} + +#### Attribute slot + +Use the `Props API` to use slots. In some scenarios, you may want to render slot content through the `Props API`. `head`, `cell` and`cellAppend` all have their corresponding `Props API`. The following briefly demonstrates the `Props API` for `head` and `cell`. + +{{ slot-props-api }} diff --git a/docs/web/api/collapse.en-US.md b/docs/web/api/collapse.en-US.md new file mode 100644 index 0000000000..74c6b09f58 --- /dev/null +++ b/docs/web/api/collapse.en-US.md @@ -0,0 +1,35 @@ +--- +title: Collapse +description: You can group more or more complex content. The grouped content area can be collapsed, expanded or hidden. +isComponent: true +usage: { title: "", description: "" } +spline: data +--- + +### Basic collapsible panel + +Basic collapsible panel, with customizable panel content. + +{{ base }} + +### Accordion mode collapsible panel + +Accordion mode collapsible panel, only one panel can be opened at a time. + +{{ mutex }} + +### Collapsible panel with settable icons + +You can set whether to display the expand icon and the position of the icon display. + +{{ icon }} + +### Collapsible panel with settable right-side operation + +You can customize the right-side operation area of the panel. + +{{ rightSlot }} + +### Collapsible panel in different modes + +{{ other }} diff --git a/docs/web/api/comment.en-US.md b/docs/web/api/comment.en-US.md new file mode 100644 index 0000000000..393680c05d --- /dev/null +++ b/docs/web/api/comment.en-US.md @@ -0,0 +1,43 @@ +--- +title: Comment +description: Comment is used for feedback, evaluation, discussion, etc. on page content, such as evaluations of articles and discussions on topics. +isComponent: true +usage: { title: "", description: "" } +spline: data +--- + +### Basic comments + +The most basic comment component, including avatar, author, time, and comment content. Suitable for various scenarios where comments need to be displayed. + +{{ base }} + +### Comments with operations + +A component that allows you to perform related operations on comment content. Suitable for scenarios where a custom operation column is needed. + +{{ operation }} + +### List comments + +Comments displayed in list form. + +{{ list }} + +### Comments with replies + +A component that displays the reply content of a comment. Suitable for scenarios where comments need to be replied to. The author’s name can be followed by the name of the reply object. + +{{ reply }} + +### Comments with quotes + +Comments can quote other content to indicate the reference relationship between the comment and other content. + +{{ quote }} + +### Comments with reply form + +A component for replying to comment content. You can directly enter content in the reply form to reply. + +{{ reply-form }} diff --git a/docs/web/api/divider.en-US.md b/docs/web/api/divider.en-US.md new file mode 100644 index 0000000000..b71a570f4d --- /dev/null +++ b/docs/web/api/divider.en-US.md @@ -0,0 +1,30 @@ +--- +title: Divider +description: The divider is a linear lightweight component that serves to separate, organize, and refine. It is used to logically organize element content and page structure. +isComponent: true +usage: { title: '', description: '' } +spline: layout +--- + +### Basic divider + +The basic divider is an independent line without text, divided into horizontal and vertical dividers. + +#### Horizontal divider + +Horizontal dividers are commonly used to separate different element content. + +{{ base }} + +#### Vertical divider + +Vertical dividers are commonly used for inline separation. + +{{ vertical }} + +### Text divider + +The text divider is a divider with embedded text and is used when an explanation of the separated content is needed. + +{{ text }} + diff --git a/docs/web/api/grid.en-US.md b/docs/web/api/grid.en-US.md new file mode 100644 index 0000000000..05aaec3d55 --- /dev/null +++ b/docs/web/api/grid.en-US.md @@ -0,0 +1,43 @@ +--- +title: Grid +description: The grid is a regular grid array that guides and regulates the layout and information distribution of web pages, improving the consistency of the layout within the interface and saving costs. +isComponent: true +usage: { title: '', description: '' } +spline: layout +--- + +### Basic usage + +{{ base }} + +### Block spacing + +{{ gutter }} + +### Left and right offset + +{{ offset }} + +### Sorting + +{{ sort }} + +### Order + +{{ order }} + +### Layout + +{{ halign }} + +### Alignment + +{{ valign }} + +### Flex + +{{ flex }} + +### Responsive layout + +{{ responsive }} diff --git a/docs/web/api/icon.en-US.md b/docs/web/api/icon.en-US.md new file mode 100644 index 0000000000..d3213c2a1c --- /dev/null +++ b/docs/web/api/icon.en-US.md @@ -0,0 +1,7 @@ +--- +title: Icon +description: As an important element in the UI composition, the Icon affects the overall style of the UI interface to a certain extent. +isComponent: true +usage: { title: "", description: "" } +spline: base +--- diff --git a/docs/web/api/layout.en-US.md b/docs/web/api/layout.en-US.md new file mode 100644 index 0000000000..e2c05bf9b7 --- /dev/null +++ b/docs/web/api/layout.en-US.md @@ -0,0 +1,34 @@ +--- +title: Layout +description: Used to organize the framework structure of web pages. +isComponent: true +usage: { title: '', description: '' } +spline: layout +--- + + +### Basic usage + +``: layout container, can wrap child components `
    `, `