From 9479707b594c7cc9e7b79202d25db1958d0c159c Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Fri, 17 Nov 2023 15:04:31 +0800 Subject: [PATCH 01/57] =?UTF-8?q?fix(amis):=20=E9=9F=B3=E9=A2=91=E7=BB=84?= =?UTF-8?q?=E4=BB=B6/=E6=93=8D=E4=BD=9C=E8=BF=9B=E5=BA=A6=E6=9D=A1?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=A4=E7=A9=BA=E5=A4=84=E7=90=86=EF=BC=8C?= =?UTF-8?q?=E9=81=BF=E5=85=8D=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis/src/renderers/Audio.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/amis/src/renderers/Audio.tsx b/packages/amis/src/renderers/Audio.tsx index dcae2e4d254..d692e1f8615 100644 --- a/packages/amis/src/renderers/Audio.tsx +++ b/packages/amis/src/renderers/Audio.tsx @@ -266,6 +266,9 @@ export class Audio extends React.Component { @autobind onSeekMouseUp(e: any) { + if (!this.state.src) { + return; + } if (!this.state.seeking) { return; } From ebaf8bbbd62bcba354f8ce92795612f37c647f18 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Fri, 17 Nov 2023 15:17:18 +0800 Subject: [PATCH 02/57] =?UTF-8?q?fix(amis):=20=E4=BF=AE=E5=A4=8DAudio?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/scss/components/_audio.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amis-ui/scss/components/_audio.scss b/packages/amis-ui/scss/components/_audio.scss index 4a1a72e08e8..5d204da7f82 100644 --- a/packages/amis-ui/scss/components/_audio.scss +++ b/packages/amis-ui/scss/components/_audio.scss @@ -125,7 +125,7 @@ display: flex; flex-direction: row; align-items: center; - width: var(--Audio-volumeControl-width); + min-width: var(--Audio-volumeControl-width); height: var(--Audio-volume-height); line-height: var(--Audio-volume-lineHeight); margin-right: var(--Audio-item-margin); From a37bd5b01ddd34918d3fccc52ba0f504135f81ed Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:14:14 +0800 Subject: [PATCH 03/57] =?UTF-8?q?fix(amis-editor):=20CRUD2=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=A0=8F=E4=B8=BA=E7=A9=BA=E6=97=B6=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E9=94=99=E8=AF=AF;=20chore:=20=E5=B7=A5=E5=85=B7=E6=A0=8F?= =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E6=9B=B4=E6=96=B0=E9=80=BB=E8=BE=91=20(#8788?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../amis-core/src/renderers/wrapControl.tsx | 8 -- .../crud2-control/CRUDToolbarControl.tsx | 80 +++++++++++-------- 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/packages/amis-core/src/renderers/wrapControl.tsx b/packages/amis-core/src/renderers/wrapControl.tsx index 7a6d21249bc..670a3f36206 100644 --- a/packages/amis-core/src/renderers/wrapControl.tsx +++ b/packages/amis-core/src/renderers/wrapControl.tsx @@ -179,14 +179,6 @@ export function wrapControl< } if (!name) { - // 一般情况下这些表单项都是需要 name 的，提示一下 - if ( - typeof type === 'string' && - getRendererByName(type)?.isFormItem - ) { - console.warn('name is required', this.props.$schema); - } - return; } diff --git a/packages/amis-editor/src/renderer/crud2-control/CRUDToolbarControl.tsx b/packages/amis-editor/src/renderer/crud2-control/CRUDToolbarControl.tsx index 81ff4eb1ab3..9af65e6cee4 100644 --- a/packages/amis-editor/src/renderer/crud2-control/CRUDToolbarControl.tsx +++ b/packages/amis-editor/src/renderer/crud2-control/CRUDToolbarControl.tsx @@ -6,12 +6,13 @@ import React from 'react'; import {findDOMNode} from 'react-dom'; import cloneDeep from 'lodash/cloneDeep'; +import pick from 'lodash/pick'; import {FormItem, Button, Icon, toast, Spinner, autobind} from 'amis'; import {TooltipWrapper} from 'amis-ui'; -import {findTreeAll} from 'amis-core'; import {JSONPipeIn} from 'amis-editor-core'; import {DSFeature, DSFeatureType, DSFeatureEnum} from '../../builder'; -import {deepRemove} from '../../plugin/CRUD2/utils'; +import {traverseSchemaDeep} from '../../builder/utils'; +import {deepRemove, addSchema2Toolbar} from '../../plugin/CRUD2/utils'; import type {FormControlProps} from 'amis'; import type {EditorNodeType} from 'amis-editor-core'; @@ -68,35 +69,41 @@ export class CRUDToolbarControl extends React.Component< componentDidMount(): void { this.dom = findDOMNode(this) as HTMLElement; - const actions = this.getActions(this.props); + const actions = this.getActionNodes(this.props); this.initOptions(actions); } - componentDidUpdate(prevProps: Readonly): void { - if (prevProps.data.headerToolbar !== this.props.data.headerToolbar) { - const actions = this.getActions(this.props); - this.initOptions(actions); - } - } - - getActions(props: CRUDToolbarControlProps) { - const {manager, nodeId} = props; + getActionNodes(props: CRUDToolbarControlProps) { + const {manager, nodeId, name = 'headerToolbar'} = props; const store = manager.store; - const node: EditorNodeType = store.getNodeById(nodeId); - const actions = findTreeAll(node.children, item => - [ - DSFeatureEnum.Insert, - DSFeatureEnum.BulkEdit, - DSFeatureEnum.BulkDelete, - 'custom' - ].includes(item.schema.behavior) - ) as unknown as EditorNodeType[]; - - return actions; + const hostNode: EditorNodeType = store.getNodeById(nodeId); + const actionNodes: EditorNodeType[] = []; + traverseSchemaDeep( + pick(hostNode?.schema, name), + (key: string, value: any, host: any) => { + if ( + key === 'behavior' && + [ + DSFeatureEnum.Insert, + DSFeatureEnum.BulkEdit, + DSFeatureEnum.BulkDelete, + 'custom' + ].includes(value) + ) { + const node = store.getNodeById(host?.$$id); + + !!node && actionNodes.push(node); + } + + return [key, value]; + } + ); + + return actionNodes; } initOptions(actions: EditorNodeType[]) { - if (!actions || !actions.length) { + if (!actions || !Array.isArray(actions) || !actions.length) { this.setState({options: []}); return; } @@ -137,7 +144,14 @@ export class CRUDToolbarControl extends React.Component< @autobind async handleAddAction(type: ActionValue) { this.setState({loading: true}); - const {onBulkChange, data: ctx, nodeId, manager, builder} = this.props; + const { + onBulkChange, + onChange, + data: ctx, + nodeId, + manager, + builder + } = this.props; const options = this.state.options.concat(); const node = manager.store.getNodeById(nodeId); const CRUDSchemaID = node?.schema?.id; @@ -230,20 +244,16 @@ export class CRUDToolbarControl extends React.Component< }); this.setState({options, loading: false}, () => { - const target = headerToolbarSchema?.[0]?.items?.[0]?.body; - - if (target && Array.isArray(target)) { - target.push(actionSchema); - } else { - headerToolbarSchema.unshift(actionSchema); - } - onBulkChange?.({headerToolbar: headerToolbarSchema}); + const fakeCRUD = {headerToolbar: headerToolbarSchema}; + /** 自适应添加操作按钮到顶部工具栏 */ + addSchema2Toolbar(fakeCRUD, actionSchema, 'header', 'left'); + onChange?.(fakeCRUD.headerToolbar, true, true); }); } @autobind async handleDelete(option: Option, index: number) { - const {env, data: ctx, onBulkChange} = this.props; + const {env, data: ctx, onBulkChange, onChange} = this.props; const options = this.state.options.concat(); const confirmed = await env.confirm( `确定要删除工具栏中「${option.label}」吗？` @@ -261,7 +271,7 @@ export class CRUDToolbarControl extends React.Component< options.splice(index, 1); this.setState({options}, () => { - onBulkChange?.({headerToolbar: headerToolbarSchema}); + onChange?.(headerToolbarSchema, true, true); }); } } From cccca16e258ac616c11b7d697b9416b3975aca07 Mon Sep 17 00:00:00 2001 From: allenve Date: Fri, 17 Nov 2023 15:56:41 +0800 Subject: [PATCH 04/57] =?UTF-8?q?fix(amis):input-number=20=E5=B0=8F?= =?UTF-8?q?=E6=95=B0=E5=85=89=E6=A0=87=E5=81=8F=E7=A7=BB=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/__tests__/utils/math.test.ts | 2 ++ packages/amis-core/src/utils/math.ts | 12 ++++++++---- packages/amis/src/renderers/Form/InputNumber.tsx | 5 +++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/amis-core/__tests__/utils/math.test.ts b/packages/amis-core/__tests__/utils/math.test.ts index 96101a38add..3f2a4c5e2b1 100644 --- a/packages/amis-core/__tests__/utils/math.test.ts +++ b/packages/amis-core/__tests__/utils/math.test.ts @@ -16,6 +16,8 @@ test(`math safeSub:test`, () => { test('numberFormatter:test', () => { expect(numberFormatter(0)).toEqual('0'); + expect(numberFormatter(0.123)).toEqual('0.123'); + expect(numberFormatter(0.123, 0)).toEqual('0'); expect(numberFormatter(0, 2)).toEqual('0.00'); expect(numberFormatter(0, 8)).toEqual('0.00000000'); expect(numberFormatter(123456)).toEqual('123,456'); diff --git a/packages/amis-core/src/utils/math.ts b/packages/amis-core/src/utils/math.ts index 5a8baa5407e..4aa20edbacb 100644 --- a/packages/amis-core/src/utils/math.ts +++ b/packages/amis-core/src/utils/math.ts @@ -31,14 +31,18 @@ export function safeSub(arg1: number, arg2: number) { return (arg1 * maxDigits - arg2 * maxDigits) / maxDigits; } -export function numberFormatter(num: number | string, precision: number = 0) { +export function numberFormatter(num: number | string, precision?: number) { const ZERO = 0; const number = +num; + const finalP = + typeof precision === 'number' + ? precision + : number.toString().split('.')[1]?.length || 0; if (typeof number === 'number' && !isNaN(number)) { - const regexp = precision ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(\d{3})+$)/g; - return number.toFixed(precision).replace(regexp, '$1,'); + const regexp = finalP ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(\d{3})+$)/g; + return number.toFixed(finalP).replace(regexp, '$1,'); } - return ZERO.toFixed(precision); + return ZERO.toFixed(finalP); } /** diff --git a/packages/amis/src/renderers/Form/InputNumber.tsx b/packages/amis/src/renderers/Form/InputNumber.tsx index 1ebd5e001de..e171ad69867 100644 --- a/packages/amis/src/renderers/Form/InputNumber.tsx +++ b/packages/amis/src/renderers/Form/InputNumber.tsx @@ -330,6 +330,7 @@ export default class NumberControl extends React.Component< return; } const {kilobitSeparator, prefix} = this.props; + const integer = value > 0 ? Math.floor(value) : Math.ceil(value); let pos = `${value}`.length; if (prefix) { @@ -338,13 +339,13 @@ export default class NumberControl extends React.Component< if (kilobitSeparator) { // 处理有千分符的情况 123,456,789 - const ksLen = Math.floor((`${Math.abs(value)}`.length - 1) / 3); + const ksLen = Math.floor((`${Math.abs(integer)}`.length - 1) / 3); if (ksLen > 0) { pos += ksLen; } } - if (this.input) { + if (this.input && (kilobitSeparator || prefix)) { this.input.setSelectionRange?.(pos, pos); } } From e8cfe898697c81c99a8398e287186eb13f60810d Mon Sep 17 00:00:00 2001 From: jinye Date: Fri, 17 Nov 2023 16:53:28 +0800 Subject: [PATCH 05/57] =?UTF-8?q?fix(amis-editor):=20=E9=98=BB=E6=AD=A2inp?= =?UTF-8?q?utTable=E7=9A=84=E5=9C=A8editor=E4=B8=AD=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E6=97=B6=E7=9A=84change=E4=BA=8B=E4=BB=B6,=E9=81=BF=E5=85=8D?= =?UTF-8?q?=E7=89=B9=E6=AE=8Acase=E6=97=B6=E6=AD=BB=E5=BE=AA=E7=8E=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/src/mocker.ts | 5 ----- packages/amis-editor/src/plugin/Form/InputTable.tsx | 6 +++++- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/amis-editor-core/src/mocker.ts b/packages/amis-editor-core/src/mocker.ts index 5c6cd7a1f02..924119c98fb 100644 --- a/packages/amis-editor-core/src/mocker.ts +++ b/packages/amis-editor-core/src/mocker.ts @@ -17,11 +17,6 @@ export function mockValue(schema: any) { schema.type === 'input-month' ) { return moment().format('X'); - } else if (schema.type === 'number' || schema.type === 'input-number') { - const precision = schema.precision || 0; - return precision - ? (Math.random() * 10000).toFixed(precision) - : Math.random() * 10000; } else if (schema.type === 'image' || schema.type === 'static-image') { return placeholderImage; } else if (schema.type === 'images' || schema.type === 'static-images') { diff --git a/packages/amis-editor/src/plugin/Form/InputTable.tsx b/packages/amis-editor/src/plugin/Form/InputTable.tsx index d8c8af0ec45..6abcb109fa0 100644 --- a/packages/amis-editor/src/plugin/Form/InputTable.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTable.tsx @@ -1268,7 +1268,11 @@ export class TableControlPlugin extends BasePlugin { props.value = arr.slice(0, 10); } - return props; + return { + ...props, + // 阻止编辑器预览态的 change 事件，避免特殊case引发change后导致的死循环 + onChange: () => true + }; } // 自动插入 label From 5bf903e32e52f45c0bdb1fde7585bbce76a4b44f Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 20 Nov 2023 14:01:16 +0800 Subject: [PATCH 06/57] =?UTF-8?q?fix(amis-ui):=20=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E7=B1=BB=E6=8E=A7=E4=BB=B6=E6=89=8B=E5=8A=A8=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/src/components/DatePicker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/amis-ui/src/components/DatePicker.tsx b/packages/amis-ui/src/components/DatePicker.tsx index 3f018b64340..f599f357e37 100644 --- a/packages/amis-ui/src/components/DatePicker.tsx +++ b/packages/amis-ui/src/components/DatePicker.tsx @@ -742,10 +742,10 @@ export class DatePicker extends React.Component { } else { // 将输入的格式转成正则匹配，比如 YYYY-MM-DD HH:mm:ss 改成 \d\d\d\d\- // 只有匹配成功才更新 - const inputCheckRegex = string2regExp( - (displayFormat || inputFormat)! - .replace(/[ymdhs]/gi, `${string2regExp('\\d')}`) - .replace(/-/gi, `${string2regExp('\\-')}`) + const inputCheckRegex = new RegExp( + (valueFormat || inputFormat || displayFormat)! + .replace(/[ymdhs]/gi, '\\d') + .replace(/-/gi, '\\-') ); if (inputCheckRegex.test(value)) { From 835c1d17ab1db2046053a2c3a7b8834070ea7f66 Mon Sep 17 00:00:00 2001 From: wutong25 Date: Mon, 20 Nov 2023 20:05:07 +0800 Subject: [PATCH 07/57] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9input-date=20?= =?UTF-8?q?=E6=9C=80=E5=A4=A7=E6=9C=80=E5=B0=8F=E5=80=BC=E5=AE=9A=E4=B9=89?= =?UTF-8?q?schema?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor/src/plugin/Form/InputDate.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/amis-editor/src/plugin/Form/InputDate.tsx b/packages/amis-editor/src/plugin/Form/InputDate.tsx index 62c80d2a53d..bb2463f9a11 100644 --- a/packages/amis-editor/src/plugin/Form/InputDate.tsx +++ b/packages/amis-editor/src/plugin/Form/InputDate.tsx @@ -358,11 +358,7 @@ export class DateControlPlugin extends BasePlugin { name: 'minDate', header: '表达式或相对值', DateTimeType: FormulaDateType.IsDate, - rendererSchema: () => { - const schema = this.manager.store.getSchema( - context.schema?.id, - 'id' - ); + rendererSchema: (schema: Schema) => { return { ...schema, value: context?.schema.minDate @@ -376,11 +372,7 @@ export class DateControlPlugin extends BasePlugin { name: 'maxDate', header: '表达式或相对值', DateTimeType: FormulaDateType.IsDate, - rendererSchema: () => { - const schema = this.manager.store.getSchema( - context.schema?.id, - 'id' - ); + rendererSchema: (schema: Schema) => { return { ...schema, value: context?.schema.maxDate From fd8538ead257503e61c15a4f8765b62ffa9900e2 Mon Sep 17 00:00:00 2001 From: wanglinfang Date: Tue, 21 Nov 2023 10:10:53 +0800 Subject: [PATCH 08/57] =?UTF-8?q?fix:=20table=E5=B5=8C=E5=A5=97=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=B8=8BselectedChange=E5=8F=82=E6=95=B0=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E3=80=81table=E5=B1=95=E7=A4=BA=E5=8D=95=E9=80=89?= =?UTF-8?q?=E5=8F=AF=E5=A4=9A=E9=80=89=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/store/table.ts | 8 ++- packages/amis/src/renderers/Table/index.tsx | 63 +++++---------------- 2 files changed, 20 insertions(+), 51 deletions(-) diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts index 89123a711b0..3f166da67e4 100644 --- a/packages/amis-core/src/store/table.ts +++ b/packages/amis-core/src/store/table.ts @@ -1050,7 +1050,13 @@ export const TableStore = iRendererStore ); } - config.multiple !== undefined && (self.multiple = config.multiple); + if (config.multiple !== undefined) { + self.multiple = config.multiple; + } else { + // 如果通过crud或picker，multiple始终设置了true或false + // 如果仅使用table，默认multiple为true，但props未设置multiple的情况下其实是展示单选 + self.multiple = false; + } config.footable !== undefined && (self.footable = config.footable); config.expandConfig !== undefined && (self.expandConfig = config.expandConfig); diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx index f6b3fea48fe..ab903cf76a4 100644 --- a/packages/amis/src/renderers/Table/index.tsx +++ b/packages/amis/src/renderers/Table/index.tsx @@ -967,39 +967,20 @@ export default class Table extends React.Component { value = value !== undefined ? value : !item.checked; - let rows = [item]; if (shift) { - rows = store.getToggleShiftRows(item); - } - - const selectedItems = value - ? [ - ...store.selectedRows.map((row: IRow) => row.data), - ...rows.map((row: IRow) => row.data) - ] - : store.selectedRows - .filter( - (row: IRow) => - rows.findIndex((rowItem: IRow) => rowItem === row) === -1 - ) - .map((row: IRow) => row.data); - const unSelectedItems = value - ? store.unSelectedRows - .filter( - (row: IRow) => - rows.findIndex((rowItem: IRow) => rowItem === row) === -1 - ) - .map((row: IRow) => row.data) - : [ - ...store.unSelectedRows.map((row: IRow) => row.data), - ...rows.map((row: IRow) => row.data) - ]; + store.toggleShift(item, value); + } else { + // 如果picker的value是绑定的上层数量变量 + // 那么用户只能通过事件动作来更新上层变量来实现选中 + item.toggle(value); + } const rendererEvent = await dispatchEvent( 'selectedChange', createObject(data, { - selectedItems, - unSelectedItems + selectedItems: store.selectedRows.map(row => row.data), + unSelectedItems: store.unSelectedRows.map(row => row.data), + item: item.data }) ); @@ -1007,16 +988,6 @@ export default class Table extends React.Component { return; } - if (shift) { - store.toggleShift(item, value); - } else { - // 如果picker的value是绑定的上层数量变量 - // 那么用户只能通过事件动作来更新上层变量来实现选中 - // 但是注册了setValue动作后，会优先通过componentDidUpdate更新了selectedRows - // 那么这里直接toggle就判断出错了 需要明确是选中还是取消选中 - item.toggle(value); - } - this.syncSelected(); } @@ -1069,29 +1040,21 @@ export default class Table extends React.Component { const {store, data, dispatchEvent} = this.props; const items = store.rows.map((row: any) => row.data); - const allChecked = store.allChecked; - const selectedItems = store.getSelectedRows(); + store.toggleAll(); const rendererEvent = await dispatchEvent( 'selectedChange', createObject(data, { - selectedItems: allChecked - ? selectedItems.filter(item => !item.checkable).map(item => item.data) - : selectedItems.map(item => item.data), - unSelectedItems: allChecked ? selectedItems.map(item => item.data) : [], + selectedItems: store.selectedRows.map(row => row.data), + unSelectedItems: store.unSelectedRows.map(row => row.data), items }) ); + if (rendererEvent?.prevented) { return; } - // selectedChange事件注册的动作里，有可能已经通过setValue把selectedRows的情况改了 - // 没有改的情况下 才会去执行store.toogleAll() - if (allChecked === store.allChecked) { - store.toggleAll(); - } - this.syncSelected(); } From 4fd601a34e0791f129eb87b128b3e07837382be4 Mon Sep 17 00:00:00 2001 From: wanglinfang2014 Date: Tue, 21 Nov 2023 10:40:15 +0800 Subject: [PATCH 09/57] =?UTF-8?q?fix:=20crud=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E5=AF=BC=E8=87=B4=E6=8A=A5=E9=94=99=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E4=BF=AE=E5=A4=8D=20(#8806)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: wanglinfang --- docs/zh-CN/components/table2.md | 6153 ++++++++++++------------- packages/amis-core/src/store/crud.ts | 11 +- packages/amis/src/renderers/CRUD.tsx | 2 +- packages/amis/src/renderers/CRUD2.tsx | 3 +- 4 files changed, 3085 insertions(+), 3084 deletions(-) diff --git a/docs/zh-CN/components/table2.md b/docs/zh-CN/components/table2.md index 3a1eb503bfd..3c080e3aff0 100755 --- a/docs/zh-CN/components/table2.md +++ b/docs/zh-CN/components/table2.md @@ -16,70 +16,70 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "title": "表格标题 - ${rows.length}", + "source": "$rows", + "columns": [ { - "type": "table2", - "title": "表格标题 - ${rows.length}", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 120 - }, - { - "title": "Version", - "name": "version", - "type": "property", - "items": [ - { - "label": "cpu", - "content": "1 core" - }, - { - "label": "memory", - "content": "4G" - }, - { - "label": "disk", - "content": "80G" - }, - { - "label": "network", - "content": "4M", - "span": 2 - }, - { - "label": "IDC", - "content": "beijing" - }, - { - "label": "Note", - "content": "其它说明", - "span": 3 - } - ] - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ], - "footer": { - "type": "tpl", - "tpl": "表格Footer" + "title": "Engine", + "name": "engine", + "width": 120 + }, + { + "title": "Version", + "name": "version", + "type": "property", + "items": [ + { + "label": "cpu", + "content": "1 core" + }, + { + "label": "memory", + "content": "4G" + }, + { + "label": "disk", + "content": "80G" + }, + { + "label": "network", + "content": "4M", + "span": 2 + }, + { + "label": "IDC", + "content": "beijing" + }, + { + "label": "Note", + "content": "其它说明", + "span": 3 } + ] + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ], + "footer": { + "type": "tpl", + "tpl": "表格Footer" + } + } + ] } ``` @@ -93,39 +93,39 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "checkbox", + "keyField": "id" + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "checkbox", - "keyField": "id" - }, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -135,40 +135,40 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "checkbox", + "keyField": "id", + "rowClick": true + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "checkbox", - "keyField": "id", - "rowClick": true - }, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -178,44 +178,44 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "checkbox", + "keyField": "id", + "selectedRowKeys": [1, 2] + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "checkbox", - "keyField": "id", - "selectedRowKeys": [1, 2] - }, - "columns": [ - { - "title": "ID", - "name": "id" - }, - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "ID", + "name": "id" + }, + { + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -225,44 +225,44 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "checkbox", + "keyField": "id", + "selectedRowKeysExpr": "data.record.id === 1" + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "checkbox", - "keyField": "id", - "selectedRowKeysExpr": "data.record.id === 1" - }, - "columns": [ - { - "title": "ID", - "name": "id" - }, - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "ID", + "name": "id" + }, + { + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -272,33 +272,33 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "radio", + "keyField": "id", + "disableOn": "this.record.id === 1" + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "radio", - "keyField": "id", - "disableOn": "this.record.id === 1" - }, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" } - ] + ] + } + ] } ``` @@ -308,61 +308,61 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "checkbox", + "keyField": "id", + "selections": [ + { + "key": "all", + "text": "全选所有" + }, + { + "key": "invert", + "text": "反选当页" + }, + { + "key": "none", + "text": "清空所有" + }, + { + "key": "odd", + "text": "选择奇数行" + }, + { + "key": "even", + "text": "选择偶数行" + } + ] + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "checkbox", - "keyField": "id", - "selections": [ - { - "key": "all", - "text": "全选所有" - }, - { - "key": "invert", - "text": "反选当页" - }, - { - "key": "none", - "text": "清空所有" - }, - { - "key": "odd", - "text": "选择奇数行" - }, - { - "key": "even", - "text": "选择偶数行" - } - ] - }, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -372,40 +372,40 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "maxKeepItemSelectionLength": 2, + "rowSelection": { + "type": "checkbox", + "keyField": "id" + }, + "columns": [ { - "type": "table2", - "source": "$rows", - "maxKeepItemSelectionLength": 2, - "rowSelection": { - "type": "checkbox", - "keyField": "id" - }, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -415,52 +415,52 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine", - "sorter": true, - "filterMultiple": true, - "filters": [ - { - "text": "Joe", - "value": "Joe" - }, - { - "text": "Jim", - "value": "Jim" - } - ] - }, - { - "title": "Version", - "name": "version", - "sorter": true, - "width": 100 - }, - { - "title": "Browser", - "name": "browser", - "filters": [ - { - "text": "Joe", - "value": "Joe" - }, - { - "text": "Jim", - "value": "Jim" - } - ] - } - ] + "title": "Engine", + "name": "engine", + "sorter": true, + "filterMultiple": true, + "filters": [ + { + "text": "Joe", + "value": "Joe" + }, + { + "text": "Jim", + "value": "Jim" + } + ] + }, + { + "title": "Version", + "name": "version", + "sorter": true, + "width": 100 + }, + { + "title": "Browser", + "name": "browser", + "filters": [ + { + "text": "Joe", + "value": "Joe" + }, + { + "text": "Jim", + "value": "Jim" + } + ] } - ] + ] + } + ] } ``` @@ -470,38 +470,38 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "bordered": true, + "title": "标题", + "footer": "Footer", + "columns": [ { - "type": "table2", - "source": "$rows", - "bordered": true, - "title": "标题", - "footer": "Footer", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -515,48 +515,48 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ], - "expandable": { - "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)", - "keyField": "id", - "expandedRowClassNameExpr": "<%= data.rowIndex === 2 ? 'bg-success' : '' %>", - "expandedRowKeys": ["3"], - "type": "container", - "body": [ - { - "type": "tpl", - "html": "
测试测试
" - } - ] - } + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ], + "expandable": { + "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)", + "keyField": "id", + "expandedRowClassNameExpr": "<%= data.rowIndex === 2 ? 'bg-success' : '' %>", + "expandedRowKeys": ["3"], + "type": "container", + "body": [ + { + "type": "tpl", + "html": "
测试测试
" + } + ] + } + } + ] } ``` @@ -566,48 +566,48 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ], - "expandable": { - "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)", - "keyField": "id", - "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", - "expandedRowKeysExpr": "data.record.id == '3'", - "type": "container", - "body": [ - { - "type": "tpl", - "html": "
测试测试
" - } - ] - } + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ], + "expandable": { + "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)", + "keyField": "id", + "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", + "expandedRowKeysExpr": "data.record.id == '3'", + "type": "container", + "body": [ + { + "type": "tpl", + "html": "
测试测试
" + } + ] + } + } + ] } ``` @@ -617,64 +617,64 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ], - "expandable": { - "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)", - "keyField": "id", - "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", - "expandedRowKeys": ["3"], - "type": "container", - "position": "right", - "body": [ - { - "type": "tpl", - "html": "
测试测试
" - } - ] - }, - "footSummary": [ - { - "type": "text", - "text": "总计" - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 2 - }, - { - "type": "tpl", - "tpl": "最后一列" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ], + "expandable": { + "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)", + "keyField": "id", + "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", + "expandedRowKeys": ["3"], + "type": "container", + "position": "right", + "body": [ + { + "type": "tpl", + "html": "
测试测试
" + } + ] + }, + "footSummary": [ + { + "type": "text", + "text": "总计" + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 2 + }, + { + "type": "tpl", + "tpl": "最后一列" + } + ] + } + ] } ``` @@ -684,62 +684,62 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "id": "table-select", + "columns": [ { - "type": "table2", - "source": "$rows", - "id": "table-select", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "展开", - "size": "sm", - "onEvent": { - "click": { - "actions": [ - { - "actionType": "expand", - "componentId": "table-select", - "description": "展开行", - "args": { - "value": "${id}" - } - } - ] - } - } + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "展开", + "size": "sm", + "onEvent": { + "click": { + "actions": [ + { + "actionType": "expand", + "componentId": "table-select", + "description": "展开行", + "args": { + "value": "${id}" + } } - ], - "expandable": { - "keyField": "id", - "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", - "type": "container", - "position": "none", - "body": [ - { - "type": "tpl", - "html": "
测试测试
" - } - ] + ] } + } } - ] + ], + "expandable": { + "keyField": "id", + "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", + "type": "container", + "position": "none", + "body": [ + { + "type": "tpl", + "html": "
测试测试
" + } + ] + } + } + ] } ``` @@ -747,68 +747,68 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "container", + "style": { + "marginBottom": "5px" + }, + "body": [ { - "type": "container", - "style": { - "marginBottom": "5px" - }, - "body": [ - { - "type": "button", - "label": "展开", - "size": "sm", - "onEvent": { - "click": { - "actions": [ - { - "actionType": "expand", - "componentId": "table-select2", - "description": "展开行", - "args": { - "expandedRowsExpr": "data.record?.id === 1 || data.record?.id === 3" - } - } - ] - } - } + "type": "button", + "label": "展开", + "size": "sm", + "onEvent": { + "click": { + "actions": [ + { + "actionType": "expand", + "componentId": "table-select2", + "description": "展开行", + "args": { + "expandedRowsExpr": "data.record?.id === 1 || data.record?.id === 3" + } } - ] + ] + } + } + } + ] + }, + { + "type": "table2", + "source": "$rows", + "id": "table-select2", + "columns": [ + { + "title": "Engine", + "name": "engine" }, { - "type": "table2", - "source": "$rows", - "id": "table-select2", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser" - } - ], - "expandable": { - "keyField": "id", - "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", - "type": "container", - "position": "none", - "body": [ - { - "type": "tpl", - "html": "
测试测试
" - } - ] - } + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser" } - ] + ], + "expandable": { + "keyField": "id", + "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>", + "type": "container", + "position": "none", + "body": [ + { + "type": "tpl", + "html": "
测试测试
" + } + ] + } + } + ] } ``` @@ -818,42 +818,42 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version", - "rowSpanExpr": "<%= data.rowIndex === 2 ? 2 : 0 %>" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText", - "colSpanExpr": "<%= data.rowIndex === 6 ? 3 : 0 %>" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version", + "rowSpanExpr": "<%= data.rowIndex === 2 ? 2 : 0 %>" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText", + "colSpanExpr": "<%= data.rowIndex === 6 ? 3 : 0 %>" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -970,29 +970,29 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"y" : 200}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"y" : 200}, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -1002,48 +1002,48 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"x": 1000}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"x": 1000}, - "columns": [ - { - "title": "Engine", - "name": "engine", - "fixed": "left", - "width": 100 - }, - { - "title": "Version", - "name": "version", - "fixed": "left", - "width": 100 - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Platform", - "name": "platform", - "fixed": "right" - } - ] - } - ] -} -``` + "title": "Engine", + "name": "engine", + "fixed": "left", + "width": 100 + }, + { + "title": "Version", + "name": "version", + "fixed": "left", + "width": 100 + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Platform", + "name": "platform", + "fixed": "right" + } + ] + } + ] +} +``` ## 固定头和列 @@ -1051,74 +1051,74 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"x": 1000, "y": 200}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"x": 1000, "y": 200}, - "columns": [ - { - "title": "Engine", - "name": "engine", - "fixed": "left", - "width": 100 - }, - { - "title": "Version", - "name": "version", - "type": "property", - "width": 400, - "items": [ - { - "label": "cpu", - "content": "1 core" - }, - { - "label": "memory", - "content": "4G" - }, - { - "label": "disk", - "content": "80G" - }, - { - "label": "network", - "content": "4M", - "span": 2 - }, - { - "label": "IDC", - "content": "beijing" - }, - { - "label": "Note", - "content": "其它说明", - "span": 3 - } - ] - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Platform", - "name": "platform", - "fixed": "right" - } - ] + "title": "Engine", + "name": "engine", + "fixed": "left", + "width": 100 + }, + { + "title": "Version", + "name": "version", + "type": "property", + "width": 400, + "items": [ + { + "label": "cpu", + "content": "1 core" + }, + { + "label": "memory", + "content": "4G" + }, + { + "label": "disk", + "content": "80G" + }, + { + "label": "network", + "content": "4M", + "span": 2 + }, + { + "label": "IDC", + "content": "beijing" + }, + { + "label": "Note", + "content": "其它说明", + "span": 3 + } + ] + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Platform", + "name": "platform", + "fixed": "right" } - ] + ] + } + ] } ``` @@ -1128,53 +1128,53 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"y": 200}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"y": 200}, - "columns": [ - { - "title": "Engine", - "name": "engine", - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Grade1", - "name": "grade1", - "children": [ - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText", - "children": [ - { - "title": "ID", - "name": "id" - } - ] - } - ] - }, + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Grade1", + "name": "grade1", + "children": [ + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText", + "children": [ { - "title": "Platform", - "name": "platform" + "title": "ID", + "name": "id" } - ] + ] + } + ] + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -1182,64 +1182,64 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"y": 200}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"y": 200}, - "columns": [ - { - "title": "Engine", - "name": "engine", - }, - { - "title": "Version", - "name": "version" - }, + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Grade", + "name": "grade", + "colSpanExpr": "<%= data.rowIndex === 1 ? 3 : 0 %>" + }, + { + "title": "Grade1", + "name": "grade1", + "children": [ + { + "title": "Browser", + "name": "browser" + } + ] + }, + { + "title": "Platform1", + "name": "platform1", + "children": [ + { + "title": "Badge1", + "name": "badgeText1", + "children": [ { - "title": "Grade", - "name": "grade", - "colSpanExpr": "<%= data.rowIndex === 1 ? 3 : 0 %>" + "title": "ID", + "name": "id" }, { - "title": "Grade1", - "name": "grade1", - "children": [ - { - "title": "Browser", - "name": "browser" - } - ] + "title": "Platform", + "name": "platform" }, { - "title": "Platform1", - "name": "platform1", - "children": [ - { - "title": "Badge1", - "name": "badgeText1", - "children": [ - { - "title": "ID", - "name": "id" - }, - { - "title": "Platform", - "name": "platform" - }, - { - "title": "Badge", - "name": "badgeText" - } - ] - } - ] + "title": "Badge", + "name": "badgeText" } - ] + ] + } + ] } - ] + ] + } + ] } ``` @@ -1251,44 +1251,44 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "draggable": true, + "keyField": "id", + "columns": [ { - "type": "table2", - "source": "$rows", - "draggable": true, - "keyField": "id", - "columns": [ - { - "title": "ID", - "name": "id" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText", - "children": [ - { - "title": "Engine", - "name": "engine", - } - ] - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "ID", + "name": "id" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText", + "children": [ + { + "title": "Engine", + "name": "engine" + } + ] + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -1298,192 +1298,192 @@ order: 67 ```schema: scope="body" { - "type": "page", - "body": { - "type": "service", - "data": { - "rows": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1001, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 10001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 10002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 1002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 2001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.5", - "platform": "Win 95+", - "version": "5.5", - "grade": "A", - "id": 3, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 3001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 3002 - } - ] - }, + "type": "page", + "body": { + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001, + "children": [ { - "engine": "Trident", - "browser": "Internet Explorer 6", - "platform": "Win 98+", - "version": "6", - "grade": "A", - "id": 4, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 4001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 4002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 10001 }, { - "engine": "Trident", - "browser": "Internet Explorer 7", - "platform": "Win XP SP2+", - "version": "7", - "grade": "A", - "id": 5, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 5001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 5002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 10002 } - ] + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] }, - "body": [ + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, { - "type": "table2", - "source": "$rows", - "columns": [ - { - "name": "engine", - "title": "Engine" - }, - { - "name": "grade", - "title": "Grade" - }, - { - "name": "browser", - "title": "Browser" - }, - { - "name": "id", - "title": "ID" - }, - { - "name": "platform", - "title": "Platform" - } - ], - "keyField": "id", - "draggable": true + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 } - ] - } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 5002 + } + ] + } + ] + }, + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ + { + "name": "engine", + "title": "Engine" + }, + { + "name": "grade", + "title": "Grade" + }, + { + "name": "browser", + "title": "Browser" + }, + { + "name": "id", + "title": "ID" + }, + { + "name": "platform", + "title": "Platform" + } + ], + "keyField": "id", + "draggable": true + } + ] + } } ``` @@ -1497,56 +1497,56 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"y": 200}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"y": 200}, - "columns": [ - { - "title": "Engine", - "name": "engine", - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "headSummary": [ - { - "type": "text", - "text": "总计" - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - } - ], - "rowSelection": { - "type": "checkbox", - "keyField": "id" - } + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "headSummary": [ + { + "type": "text", + "text": "总计" + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 + } + ], + "rowSelection": { + "type": "checkbox", + "keyField": "id" + } + } + ] } ``` @@ -1556,65 +1556,65 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"y": 200}, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"y": 200}, - "columns": [ - { - "title": "Engine", - "name": "engine", - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "headSummary": [ - [ - { - "type": "text", - "text": "总计" - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - } - ], - [ - { - "type": "text", - "text": "总结", - "colSpan": 6 - } - ] - ], - "rowSelection": { - "type": "checkbox", - "keyField": "id" - } + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "headSummary": [ + [ + { + "type": "text", + "text": "总计" + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 + } + ], + [ + { + "type": "text", + "text": "总结", + "colSpan": 6 + } + ] + ], + "rowSelection": { + "type": "checkbox", + "keyField": "id" + } + } + ] } ``` @@ -1624,55 +1624,55 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "bordered": true, + "scroll": {"y": 200, "x": 1000}, + "columns": [ { - "type": "table2", - "source": "$rows", - "bordered": true, - "scroll": {"y": 200, "x": 1000}, - "columns": [ - { - "title": "Engine", - "name": "engine", - "fixed": "left" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "footSummary": [ - { - "type": "text", - "text": "总计", - "fixed": 'left' - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - } - ] + "title": "Engine", + "name": "engine", + "fixed": "left" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "footSummary": [ + { + "type": "text", + "text": "总计", + "fixed": 'left' + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 + } + ] + } + ] } ``` @@ -1682,62 +1682,62 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=10", - "body": [ + "type": "service", + "api": "/api/sample?perPage=10", + "body": [ + { + "type": "table2", + "source": "$rows", + "bordered": true, + "scroll": {"y": 200, "x": 1000}, + "columns": [ { - "type": "table2", - "source": "$rows", - "bordered": true, - "scroll": {"y": 200, "x": 1000}, - "columns": [ - { - "title": "Engine", - "name": "engine", - "fixed": "left" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Grade", - "name": "grade" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "footSummary": [ - { - "type": "text", - "text": "总计", - "colSpan": 6 - }, - [ - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - }, - { - "type": "text", - "text": "总结", - "colSpan": 1 - } - ] - ] + "title": "Engine", + "name": "engine", + "fixed": "left" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Grade", + "name": "grade" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "footSummary": [ + { + "type": "text", + "text": "总计", + "colSpan": 6 + }, + [ + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 + }, + { + "type": "text", + "text": "总结", + "colSpan": 1 + } + ] + ] + } + ] } ``` @@ -1747,48 +1747,48 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "scroll": {"x": 1000}, + "resizable": true, + "columns": [ { - "type": "table2", - "source": "$rows", - "scroll": {"x": 1000}, - "resizable": true, - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200, - "align": "center" - }, - { - "title": "Version", - "name": "version", - "width": 200, - "align": "right" - }, - { - "title": "Grade", - "name": "grade", - "width": 200 - }, - { - "title": "Browser", - "name": "browser", - "width": 200 - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine", + "width": 200, + "align": "center" + }, + { + "title": "Version", + "name": "version", + "width": 200, + "align": "right" + }, + { + "title": "Grade", + "name": "grade", + "width": 200 + }, + { + "title": "Browser", + "name": "browser", + "width": 200 + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -1800,48 +1800,48 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "columnsTogglable": true, + "title": "表格的标题", + "columns": [ { - "type": "table2", - "source": "$rows", - "columnsTogglable": true, - "title": "表格的标题", - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, - { - "title": "Version", - "name": "version", - "width": 200 - }, - { - "title": "Browser", - "name": "browser", - "width": 200, - "children": [ - { - "title": "Grade", - "name": "grade", - "width": 200 - } - ] - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine", + "width": 200 + }, + { + "title": "Version", + "name": "version", + "width": 200 + }, + { + "title": "Browser", + "name": "browser", + "width": 200, + "children": [ + { + "title": "Grade", + "name": "grade", + "width": 200 + } + ] + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -1851,50 +1851,50 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "columnsTogglable": { + "icon": "fa fa-user" + }, + "title": "表格的标题", + "columns": [ { - "type": "table2", - "source": "$rows", - "columnsTogglable": { - "icon": "fa fa-user" - }, - "title": "表格的标题", - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, - { - "title": "Version", - "name": "version", - "width": 200 - }, - { - "title": "Browser", - "name": "browser", - "width": 200, - "children": [ - { - "title": "Grade", - "name": "grade", - "width": 200 - } - ] - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine", + "width": 200 + }, + { + "title": "Version", + "name": "version", + "width": 200 + }, + { + "title": "Browser", + "name": "browser", + "width": 200, + "children": [ + { + "title": "Grade", + "name": "grade", + "width": 200 + } + ] + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -1904,45 +1904,45 @@ order: 67 ```schema { - "type": "table2", - "data": { - "items": [] + "type": "table2", + "data": { + "items": [] + }, + "columns": [ + { + "title": "Engine", + "name": "engine", + "width": 200 }, - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, - { - "title": "Version", - "name": "version", - "width": 200 - }, + { + "title": "Version", + "name": "version", + "width": 200 + }, + { + "title": "Browser", + "name": "browser", + "width": 200, + "children": [ { - "title": "Browser", - "name": "browser", - "width": 200, - "children": [ - { - "title": "Grade", - "name": "grade", - "width": 200 - } - ] - }, + "title": "Grade", + "name": "grade", + "width": 200 + } + ] + }, + { + "title": "Platform", + "name": "platform", + "children": [ { - "title": "Platform", - "name": "platform", - "children": [ - { - "title": "Badge", - "name": "badgeText" - } - ] + "title": "Badge", + "name": "badgeText" } - ], - "placeholder": "暂无数据" + ] + } + ], + "placeholder": "暂无数据" } ``` @@ -1952,45 +1952,45 @@ order: 67 ```schema { - "type": "table2", - "data": { - "items": [] + "type": "table2", + "data": { + "items": [] + }, + "columns": [ + { + "title": "Engine", + "name": "engine", + "width": 200 }, - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, + { + "title": "Version", + "name": "version", + "width": 200 + }, + { + "title": "Browser", + "name": "browser", + "width": 200, + "children": [ { - "title": "Version", - "name": "version", - "width": 200 + "title": "Grade", + "name": "grade", + "width": 200 }, { - "title": "Browser", - "name": "browser", - "width": 200, - "children": [ - { - "title": "Grade", - "name": "grade", - "width": 200 - }, - { - "title": "Badge", - "name": "badgeText", - "children": [ - { - "title": "Platform", - "name": "platform" - } - ] - } - ] + "title": "Badge", + "name": "badgeText", + "children": [ + { + "title": "Platform", + "name": "platform" + } + ] } - ], - "loading": true + ] + } + ], + "loading": true } ``` @@ -2002,199 +2002,199 @@ order: 67 ```schema: scope="body" { - "type": "page", - "body": { - "type": "service", - "data": { - "rows": [ - { - "engine": "Trident1", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1, - "children": [ - { - "engine": "Trident1-1", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1001, - "children": [ - { - "engine": "Trident1-1-1", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 10001 - }, - { - "engine": "Trident1-1-2", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 10002 - } - ] - }, - { - "engine": "Trident1-2", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 1002 - } - ] - }, - { - "engine": "Trident2", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2, - "children": [ - { - "engine": "Trident2-1", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 2001 - }, - { - "engine": "Trident2-2", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.5", - "platform": "Win 95+", - "version": "5.5", - "grade": "A", - "id": 3, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 3001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 3002 - } - ] - }, + "type": "page", + "body": { + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident1", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident1-1", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001, + "children": [ { - "engine": "Trident", - "browser": "Internet Explorer 6", - "platform": "Win 98+", - "version": "6", - "grade": "A", - "id": 4, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 4001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 4002 - } - ] + "engine": "Trident1-1-1", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 10001 }, { - "engine": "Trident", - "browser": "Internet Explorer 7", - "platform": "Win XP SP2+", - "version": "7", - "grade": "A", - "id": 5, - "children":[ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 5001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 5002 - } - ] + "engine": "Trident1-1-2", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 10002 } - ] + ] + }, + { + "engine": "Trident1-2", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] }, - "body": [ + { + "engine": "Trident2", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ + { + "engine": "Trident2-1", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, { - "type": "table2", - "source": "$rows", - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "engine", - "title": "Engine" - }, - { - "name": "grade", - "title": "Grade" - }, - { - "name": "version", - "title": "Version" - }, - { - "name": "browser", - "title": "Browser" - }, - { - "name": "id", - "title": "ID" - }, - { - "name": "platform", - "title": "Platform" - } - ], - "keyField": "id" + "engine": "Trident2-2", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 } - ] - } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5, + "children":[ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 5002 + } + ] + } + ] + }, + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "engine", + "title": "Engine" + }, + { + "name": "grade", + "title": "Grade" + }, + { + "name": "version", + "title": "Version" + }, + { + "name": "browser", + "title": "Browser" + }, + { + "name": "id", + "title": "ID" + }, + { + "name": "platform", + "title": "Platform" + } + ], + "keyField": "id" + } + ] + } } ``` @@ -2204,203 +2204,203 @@ order: 67 ```schema: scope="body" { - "type": "page", - "body": { - "type": "service", - "data": { - "rows": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1001, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 10001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 10002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 1002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 2001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.5", - "platform": "Win 95+", - "version": "5.5", - "grade": "A", - "id": 3, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 3001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 3002 - } - ] - }, + "type": "page", + "body": { + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001, + "children": [ { - "engine": "Trident", - "browser": "Internet Explorer 6", - "platform": "Win 98+", - "version": "6", - "grade": "A", - "id": 4, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 4001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 4002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 10001 }, { - "engine": "Trident", - "browser": "Internet Explorer 7", - "platform": "Win XP SP2+", - "version": "7", - "grade": "A", - "id": 5, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 5001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 5002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 10002 } - ] + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] }, - "body": [ + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "engine", - "title": "Engine" - }, - { - "name": "grade", - "title": "Grade" - }, - { - "name": "version", - "title": "Version" - }, - { - "name": "browser", - "title": "Browser" - }, - { - "name": "id", - "title": "ID" - }, - { - "name": "platform", - "title": "Platform" - } - ], - "keyField": "id", - "rowSelection": { - "type": "checkbox", - "keyField": "id" - } + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 } - ] - } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 5002 + } + ] + } + ] + }, + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "engine", + "title": "Engine" + }, + { + "name": "grade", + "title": "Grade" + }, + { + "name": "version", + "title": "Version" + }, + { + "name": "browser", + "title": "Browser" + }, + { + "name": "id", + "title": "ID" + }, + { + "name": "platform", + "title": "Platform" + } + ], + "keyField": "id", + "rowSelection": { + "type": "checkbox", + "keyField": "id" + } + } + ] + } } ``` @@ -2410,199 +2410,199 @@ order: 67 ```schema: scope="body" { - "type": "page", - "body": { - "type": "service", - "data": { - "rows": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1001, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 10001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 10002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 1002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 2001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.5", - "platform": "Win 95+", - "version": "5.5", - "grade": "A", - "id": 3, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 3001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 3002 - } - ] - }, + "type": "page", + "body": { + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001, + "children": [ { - "engine": "Trident", - "browser": "Internet Explorer 6", - "platform": "Win 98+", - "version": "6", - "grade": "A", - "id": 4, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 4001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 4002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 10001 }, { - "engine": "Trident", - "browser": "Internet Explorer 7", - "platform": "Win XP SP2+", - "version": "7", - "grade": "A", - "id": 5, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 5001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 5002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 10002 } - ] + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] }, - "body": [ + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "name": "engine", - "title": "Engine" - }, - { - "name": "grade", - "title": "Grade" - }, - { - "name": "version", - "title": "Version" - }, - { - "name": "browser", - "title": "Browser" - }, - { - "name": "id", - "title": "ID" - }, - { - "name": "platform", - "title": "Platform" - } - ], - "keyField": "id", - "rowSelection": { - "type": "radio", - "keyField": "id" - } + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 } - ] - } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 5002 + } + ] + } + ] + }, + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ + { + "name": "engine", + "title": "Engine" + }, + { + "name": "grade", + "title": "Grade" + }, + { + "name": "version", + "title": "Version" + }, + { + "name": "browser", + "title": "Browser" + }, + { + "name": "id", + "title": "ID" + }, + { + "name": "platform", + "title": "Platform" + } + ], + "keyField": "id", + "rowSelection": { + "type": "radio", + "keyField": "id" + } + } + ] + } } ``` @@ -2612,200 +2612,200 @@ order: 67 ```schema: scope="body" { - "type": "page", - "body": { - "type": "service", - "data":{ - "rows": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 1001, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 10001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 10002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 1002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 2001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 2002 - } - ] - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.5", - "platform": "Win 95+", - "version": "5.5", - "grade": "A", - "id": 3, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 3001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 3002 - } - ] - }, + "type": "page", + "body": { + "type": "service", + "data":{ + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001, + "children": [ { - "engine": "Trident", - "browser": "Internet Explorer 6", - "platform": "Win 98+", - "version": "6", - "grade": "A", - "id": 4, - "children": [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id": 4001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id": 4002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 10001 }, { - "engine": "Trident", - "browser": "Internet Explorer 7", - "platform": "Win XP SP2+", - "version": "7", - "grade": "A", - "id":5, - "children":[ - { - "engine": "Trident", - "browser": "Internet Explorer 4.0", - "platform": "Win 95+", - "version": "4", - "grade": "X", - "id":5001 - }, - { - "engine": "Trident", - "browser": "Internet Explorer 5.0", - "platform": "Win 95+", - "version": "5", - "grade": "C", - "id":5002 - } - ] + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 10002 } - ] + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] }, - "body":[ + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ { - "type": "table2", - "source": "$rows", - "columns":[ - { - "name": "engine", - "title": "Engine" - }, - { - "name": "grade", - "title": "Grade" - }, - { - "name": "version", - "title": "Version" - }, - { - "name": "browser", - "title": "Browser" - }, - { - "name": "id", - "title": "ID" - }, - { - "name": "platform", - "title": "Platform" - } - ], - "keyField": "id", - "rowSelection":{ - "type": "checkbox", - "keyField": "id" - }, - "indentSize": 20 + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 } - ] - } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id":5, + "children":[ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id":5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id":5002 + } + ] + } + ] + }, + "body":[ + { + "type": "table2", + "source": "$rows", + "columns":[ + { + "name": "engine", + "title": "Engine" + }, + { + "name": "grade", + "title": "Grade" + }, + { + "name": "version", + "title": "Version" + }, + { + "name": "browser", + "title": "Browser" + }, + { + "name": "id", + "title": "ID" + }, + { + "name": "platform", + "title": "Platform" + } + ], + "keyField": "id", + "rowSelection":{ + "type": "checkbox", + "keyField": "id" + }, + "indentSize": 20 + } + ] + } } ``` @@ -2815,47 +2815,47 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, - { - "title": "Version", - "name": "version", - "width": 200, - "searchable": true - }, - { - "title": "Browser", - "name": "browser", - "width": 200, - "children": [ - { - "title": "Grade", - "name": "grade", - "width": 200 - } - ] - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine", + "width": 200 + }, + { + "title": "Version", + "name": "version", + "width": 200, + "searchable": true + }, + { + "title": "Browser", + "name": "browser", + "width": 200, + "children": [ + { + "title": "Grade", + "name": "grade", + "width": 200 + } + ] + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -2865,48 +2865,48 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "title": "表格的标题", + "columns": [ { - "type": "table2", - "source": "$rows", - "title": "表格的标题", - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, - { - "title": "Version", - "name": "version", - "width": 200 - }, - { - "title": "Browser", - "name": "browser", - "width": 200, - "children": [ - { - "title": "Grade", - "name": "grade", - "width": 200 - } - ] - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "sticky": true + "title": "Engine", + "name": "engine", + "width": 200 + }, + { + "title": "Version", + "name": "version", + "width": 200 + }, + { + "title": "Browser", + "name": "browser", + "width": 200, + "children": [ + { + "title": "Grade", + "name": "grade", + "width": 200 + } + ] + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "sticky": true + } + ] } ``` @@ -2920,70 +2920,70 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "size": "large", + "rowSelection": { + "type": "checkbox", + "keyField": "id" + }, + "columns": [ + { + "title": "Engine", + "name": "engine", + "sorter": true, + "tpl": "${engine|truncate:5}" + }, + { + "title": "Version", + "name": "version", + "sorter": true, + "filterMultiple": true, + "filters": [ + { + "text": "Joe", + "value": "Joe" + }, + { + "text": "Jim", + "value": "Jim" + } + ] + }, + { + "type": "tpl", + "title": "Browser", + "name": "browser", + "tpl": "${browser|truncate:5}", + "searchable": true + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" + } + ], + "footSummary": [ { - "type": "table2", - "source": "$rows", - "size": "large", - "rowSelection": { - "type": "checkbox", - "keyField": "id" - }, - "columns": [ - { - "title": "Engine", - "name": "engine", - "sorter": true, - "tpl": "${engine|truncate:5}" - }, - { - "title": "Version", - "name": "version", - "sorter": true, - "filterMultiple": true, - "filters": [ - { - "text": "Joe", - "value": "Joe" - }, - { - "text": "Jim", - "value": "Jim" - } - ] - }, - { - "type": "tpl", - "title": "Browser", - "name": "browser", - "tpl": "${browser|truncate:5}", - "searchable": true - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "footSummary": [ - { - "type": "text", - "text": "总计", - "fixed": "left" - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - } - ] + "type": "text", + "text": "总计", + "fixed": "left" + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 } - ] + ] + } + ] } ``` @@ -2993,69 +2993,69 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "rowSelection": { + "type": "checkbox", + "keyField": "id" + }, + "columns": [ + { + "title": "Engine", + "name": "engine", + "sorter": true, + "tpl": "${engine|truncate:5}" + }, { - "type": "table2", - "source": "$rows", - "rowSelection": { - "type": "checkbox", - "keyField": "id" + "title": "Version", + "name": "version", + "sorter": true, + "filterMultiple": true, + "filters": [ + { + "text": "Joe", + "value": "Joe" }, - "columns": [ - { - "title": "Engine", - "name": "engine", - "sorter": true, - "tpl": "${engine|truncate:5}" - }, - { - "title": "Version", - "name": "version", - "sorter": true, - "filterMultiple": true, - "filters": [ - { - "text": "Joe", - "value": "Joe" - }, - { - "text": "Jim", - "value": "Jim" - } - ] - }, - { - "type": "tpl", - "title": "Browser", - "name": "browser", - "tpl": "${engine|truncate:5}", - "searchable": true - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "footSummary": [ - { - "type": "text", - "text": "总计", - "fixed": "left" - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - } - ] + { + "text": "Jim", + "value": "Jim" + } + ] + }, + { + "type": "tpl", + "title": "Browser", + "name": "browser", + "tpl": "${engine|truncate:5}", + "searchable": true + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "footSummary": [ + { + "type": "text", + "text": "总计", + "fixed": "left" + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 + } + ] + } + ] } ``` @@ -3065,70 +3065,70 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "size": "small", + "rowSelection": { + "type": "checkbox", + "keyField": "id" + }, + "columns": [ + { + "title": "Engine", + "name": "engine", + "sorter": true, + "tpl": "${engine|truncate:5}" + }, { - "type": "table2", - "source": "$rows", - "size": "small", - "rowSelection": { - "type": "checkbox", - "keyField": "id" + "title": "Version", + "name": "version", + "sorter": true, + "filterMultiple": true, + "filters": [ + { + "text": "Joe", + "value": "Joe" }, - "columns": [ - { - "title": "Engine", - "name": "engine", - "sorter": true, - "tpl": "${engine|truncate:5}" - }, - { - "title": "Version", - "name": "version", - "sorter": true, - "filterMultiple": true, - "filters": [ - { - "text": "Joe", - "value": "Joe" - }, - { - "text": "Jim", - "value": "Jim" - } - ] - }, - { - "type": "tpl", - "title": "Browser", - "name": "browser", - "tpl": "${engine|truncate:5}", - "searchable": true - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ], - "footSummary": [ - { - "type": "text", - "text": "总计", - "fixed": "left" - }, - { - "type": "tpl", - "tpl": "测试测试", - "colSpan": 5 - } - ] + { + "text": "Jim", + "value": "Jim" + } + ] + }, + { + "type": "tpl", + "title": "Browser", + "name": "browser", + "tpl": "${engine|truncate:5}", + "searchable": true + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ], + "footSummary": [ + { + "type": "text", + "text": "总计", + "fixed": "left" + }, + { + "type": "tpl", + "tpl": "测试测试", + "colSpan": 5 + } + ] + } + ] } ``` @@ -3138,40 +3138,40 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "title": "表格的标题", + "columns": [ { - "type": "table2", - "source": "$rows", - "title": "表格的标题", - "columns": [ - { - "title": "Engine", - "name": "engine", - "width": 200 - }, - { - "title": "Version", - "name": "version", - "copyable": true - }, - { - "title": "Browser", - "name": "browser", - "width": 200 - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine", + "width": 200 + }, + { + "title": "Version", + "name": "version", + "copyable": true + }, + { + "title": "Browser", + "name": "browser", + "width": 200 + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -3181,43 +3181,43 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser", - "copyable": true, - "popOver": { - "body": { - "type": "tpl", - "tpl": "详细信息：${browser}" - } - } - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser", + "copyable": true, + "popOver": { + "body": { + "type": "tpl", + "tpl": "详细信息：${browser}" + } + } + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -3225,47 +3225,47 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "type": "tpl", - "title": "Browser", - "name": "browser", - "tpl": "${engine|truncate:5}", - "popOver": { - "trigger": "hover", - "position": "left-top", - "showIcon": false, - "body": { - "type": "tpl", - "tpl": "${browser}" - } - } - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "type": "tpl", + "title": "Browser", + "name": "browser", + "tpl": "${engine|truncate:5}", + "popOver": { + "trigger": "hover", + "position": "left-top", + "showIcon": false, + "body": { + "type": "tpl", + "tpl": "${browser}" + } + } + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -3273,53 +3273,53 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=6", - "body": [ + "type": "service", + "api": "/api/sample?perPage=6", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "ID", - "name": "id", - "popOver": { - "body": { - "type": "tpl", - "tpl": "${id}" - } - }, - "popOverEnableOn": "this.id == 1" - }, - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - }, - { - "title": "Browser", - "name": "browser", - "popOver": { - "body": { - "type": "tpl", - "tpl": "${browser}" - } - } - }, - { - "title": "Badge", - "name": "badgeText" - }, - { - "title": "Platform", - "name": "platform" - } - ] + "title": "ID", + "name": "id", + "popOver": { + "body": { + "type": "tpl", + "tpl": "${id}" + } + }, + "popOverEnableOn": "this.id == 1" + }, + { + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + }, + { + "title": "Browser", + "name": "browser", + "popOver": { + "body": { + "type": "tpl", + "tpl": "${browser}" + } + } + }, + { + "title": "Badge", + "name": "badgeText" + }, + { + "title": "Platform", + "name": "platform" } - ] + ] + } + ] } ``` @@ -3343,66 +3343,66 @@ order: 67 "visibleOn": "this.badgeText" }, "columns": [ - { - "name": "id", - "title": "ID", - "searchable": { - "type": "input-text", - "name": "id", - "label": "主键", - "placeholder": "输入id", - "size": "sm", - } - }, - { - "name": "engine", - "title": "Rendering engine" - }, - { - "name": "browser", - "title": "Browser", - "searchable": { - "type": "select", - "name": "browser", - "label": "浏览器", - "placeholder": "选择浏览器", - "size": "sm", - "options": [ - { - "label": "Internet Explorer ", - "value": "ie" - }, - { - "label": "AOL browser", - "value": "aol" - }, - { - "label": "Firefox", - "value": "firefox" - } - ] - } - }, - { - "name": "platform", - "title": "Platform(s)" - }, - { - "name": "version", - "title": "Engine version", - "searchable": { - "type": "input-number", - "name": "version", - "label": "版本号", - "placeholder": "输入版本号", - "size": "sm", - "mode": "horizontal" - } - }, - { - "name": "grade", - "title": "CSS grade" + { + "name": "id", + "title": "ID", + "searchable": { + "type": "input-text", + "name": "id", + "label": "主键", + "placeholder": "输入id", + "size": "sm", + } + }, + { + "name": "engine", + "title": "Rendering engine" + }, + { + "name": "browser", + "title": "Browser", + "searchable": { + "type": "select", + "name": "browser", + "label": "浏览器", + "placeholder": "选择浏览器", + "size": "sm", + "options": [ + { + "label": "Internet Explorer ", + "value": "ie" + }, + { + "label": "AOL browser", + "value": "aol" + }, + { + "label": "Firefox", + "value": "firefox" + } + ] + } + }, + { + "name": "platform", + "title": "Platform(s)" + }, + { + "name": "version", + "title": "Engine version", + "searchable": { + "type": "input-number", + "name": "version", + "label": "版本号", + "placeholder": "输入版本号", + "size": "sm", + "mode": "horizontal" } + }, + { + "name": "grade", + "title": "CSS grade" + } ] }, data: { @@ -3518,8 +3518,8 @@ order: 67 "type": "table2", "source": "$rows", "quickSaveApi": { - "url": "/api/mock2/sample/bulkUpdate", - "method": "put" + "url": "/api/mock2/sample/bulkUpdate", + "method": "put" }, "columns": [ { @@ -3554,39 +3554,39 @@ order: 67 { "type": "page", "body": { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ - { - "type": "table2", - "source": "$rows", - "quickSaveApi": { - "url": "/api/mock2/sample/bulkUpdate", - "method": "put" - }, - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "grade", - "title": "CSS grade", - "quickEdit": { - "type": "select", - "options": [ - "A", - "B", - "C", - "D", - "X" - ] - } - } - ] + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "quickSaveApi": { + "url": "/api/mock2/sample/bulkUpdate", + "method": "put" + }, + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "grade", + "title": "CSS grade", + "quickEdit": { + "type": "select", + "options": [ + "A", + "B", + "C", + "D", + "X" + ] } + } ] - } + } + ] + } } ``` @@ -3596,50 +3596,49 @@ order: 67 { "type": "page", "body": { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ - { - "type": "table2", - "source": "$rows", - "quickSaveApi": { - "url": "/api/mock2/sample/bulkUpdate", - "method": "put" - }, - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "grade", - "title": "CSS grade", - "quickEdit": { - "body": [ - { - "type": "select", - "name": "grade", - "options": [ - "A", - "B", - "C", - "D", - "X" - ] - }, - - { - "label": "id", - "type": "input-text", - "name": "id" - } - ] - } - } - ] + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "quickSaveApi": { + "url": "/api/mock2/sample/bulkUpdate", + "method": "put" + }, + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "grade", + "title": "CSS grade", + "quickEdit": { + "body": [ + { + "type": "select", + "name": "grade", + "options": [ + "A", + "B", + "C", + "D", + "X" + ] + }, + { + "label": "id", + "type": "input-text", + "name": "id" + } + ] } + } ] - } + } + ] + } } ``` @@ -3651,51 +3650,51 @@ order: 67 { "type": "page", "body": { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ - { - "type": "table2", - "source": "$rows", - "quickSaveApi": { - "url": "/api/mock2/sample/bulkUpdate", - "method": "put" - }, - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "grade", - "title": "CSS grade", - "quickEdit": { - "mode": "inline", - "type": "select", - "size": "xs", - "options": [ - "A", - "B", - "C", - "D", - "X" - ] - } - }, - { - "name": "switch", - "title": "switch", - "quickEdit": { - "mode": "inline", - "type": "switch", - "onText": "开启", - "offText": "关闭" - } - } - ] + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "quickSaveApi": { + "url": "/api/mock2/sample/bulkUpdate", + "method": "put" + }, + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "grade", + "title": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ] + } + }, + { + "name": "switch", + "title": "switch", + "quickEdit": { + "mode": "inline", + "type": "switch", + "onText": "开启", + "offText": "关闭" } + } ] - } + } + ] + } } ``` @@ -3707,53 +3706,53 @@ order: 67 { "type": "page", "body": { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ - { - "type": "table2", - "source": "$rows", - "quickSaveItemApi": { - "url": "/api/mock2/sample/$id", - "method": "put" - }, - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "grade", - "title": "CSS grade", - "quickEdit": { - "mode": "inline", - "type": "select", - "size": "xs", - "options": [ - "A", - "B", - "C", - "D", - "X" - ], - "saveImmediately": true - } - }, - { - "name": "switch", - "title": "switch", - "quickEdit": { - "mode": "inline", - "type": "switch", - "onText": "开启", - "offText": "关闭", - "saveImmediately": true - } - } - ] + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "quickSaveItemApi": { + "url": "/api/mock2/sample/$id", + "method": "put" + }, + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "grade", + "title": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ], + "saveImmediately": true } + }, + { + "name": "switch", + "title": "switch", + "quickEdit": { + "mode": "inline", + "type": "switch", + "onText": "开启", + "offText": "关闭", + "saveImmediately": true + } + } ] - } + } + ] + } } ``` @@ -3763,53 +3762,53 @@ order: 67 { "type": "page", "body": { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ - { - "type": "table2", - "source": "$rows", - "columns": [ - { - "name": "id", - "title": "ID" - }, - { - "name": "grade", - "title": "CSS grade", - "quickEdit": { - "mode": "inline", - "type": "select", - "size": "xs", - "options": [ - "A", - "B", - "C", - "D", - "X" - ], - "saveImmediately": { - "api": "/api/mock2/sample/$id" - } - } - }, - { - "name": "switch", - "title": "switch", - "quickEdit": { - "mode": "inline", - "type": "switch", - "onText": "开启", - "offText": "关闭", - "saveImmediately": { - "api": "/api/mock2/sample/$id" - } - } - } - ] + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ + { + "name": "id", + "title": "ID" + }, + { + "name": "grade", + "title": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ], + "saveImmediately": { + "api": "/api/mock2/sample/$id" + } } + }, + { + "name": "switch", + "title": "switch", + "quickEdit": { + "mode": "inline", + "type": "switch", + "onText": "开启", + "offText": "关闭", + "saveImmediately": { + "api": "/api/mock2/sample/$id" + } + } + } ] - } + } + ] + } } ``` @@ -3819,36 +3818,36 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version", - "className": "text-primary" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version", + "className": "text-primary" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -3856,37 +3855,37 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version", - "className": "text-primary", - "titleClassName": "font-bold" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version", + "className": "text-primary", + "titleClassName": "font-bold" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -3896,36 +3895,36 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "columns": [ { - "type": "table2", - "source": "$rows", - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version", - "classNameExpr": "<%= data.version > 5 ? 'text-danger' : '' %>" - }, - { - "title": "Browser", - "name": "browser" - }, - { - "title": "Operation", - "name": "operation", - "type": "button", - "label": "删除", - "size": "sm" - } - ] + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version", + "classNameExpr": "<%= data.version > 5 ? 'text-danger' : '' %>" + }, + { + "title": "Browser", + "name": "browser" + }, + { + "title": "Operation", + "name": "operation", + "type": "button", + "label": "删除", + "size": "sm" } - ] + ] + } + ] } ``` @@ -3935,42 +3934,42 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=5", - "body": [ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table2", + "source": "$rows", + "itemActions": [ { - "type": "table2", - "source": "$rows", - "itemActions": [ - { - "label": "编辑", - "type": "button", - "actionType": "dialog", - "dialog": { - "title": "编辑", - "body": "这是个简单的编辑弹框" - } - }, - { - "label": "删除", - "type": "button", - "actionType": "ajax", - "confirmText": "确认要删除？", - "api": "/api/mock2/form/saveForm" - } - ], - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - } - ] + "label": "编辑", + "type": "button", + "actionType": "dialog", + "dialog": { + "title": "编辑", + "body": "这是个简单的编辑弹框" + } + }, + { + "label": "删除", + "type": "button", + "actionType": "ajax", + "confirmText": "确认要删除？", + "api": "/api/mock2/form/saveForm" } - ] + ], + "columns": [ + { + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + } + ] + } + ] } ``` @@ -3978,45 +3977,45 @@ order: 67 ```schema: scope="body" { - "type": "service", - "api": "/api/sample?perPage=20", - "body": [ + "type": "service", + "api": "/api/sample?perPage=20", + "body": [ + { + "type": "table2", + "source": "$rows", + "itemActions": [ { - "type": "table2", - "source": "$rows", - "itemActions": [ - { - "label": "编辑", - "type": "button", - "actionType": "dialog", - "dialog": { - "title": "编辑", - "body": "这是个简单的编辑弹框" - } - }, - { - "label": "删除", - "type": "button", - "actionType": "ajax", - "confirmText": "确认要删除？", - "api": "/api/mock2/form/saveForm" - } - ], - "scroll": { - "y": 100 - }, - "columns": [ - { - "title": "Engine", - "name": "engine" - }, - { - "title": "Version", - "name": "version" - } - ] + "label": "编辑", + "type": "button", + "actionType": "dialog", + "dialog": { + "title": "编辑", + "body": "这是个简单的编辑弹框" + } + }, + { + "label": "删除", + "type": "button", + "actionType": "ajax", + "confirmText": "确认要删除？", + "api": "/api/mock2/form/saveForm" } - ] + ], + "scroll": { + "y": 100 + }, + "columns": [ + { + "title": "Engine", + "name": "engine" + }, + { + "title": "Version", + "name": "version" + } + ] + } + ] } ``` diff --git a/packages/amis-core/src/store/crud.ts b/packages/amis-core/src/store/crud.ts index d213b5f28f3..cc6ec863131 100644 --- a/packages/amis-core/src/store/crud.ts +++ b/packages/amis-core/src/store/crud.ts @@ -704,10 +704,13 @@ export const CRUDStore = ServiceStore.named('CRUDStore') const data = { ...self.pristine, - items: items.slice( - (self.page - 1) * self.perPage, - self.page * self.perPage - ), + items: + items.length > self.perPage + ? items.slice( + (self.page - 1) * self.perPage, + self.page * self.perPage + ) + : items, count: items.length, total: items.length }; diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx index 4c8c4363d1e..fbe88aa9232 100644 --- a/packages/amis/src/renderers/CRUD.tsx +++ b/packages/amis/src/renderers/CRUD.tsx @@ -686,7 +686,7 @@ export default class CRUD extends React.Component { } else if (!props.api && isPureVariable(props.source)) { const next = resolveVariableAndFilter(props.source, props.data, '| raw'); - if (!this.lastData || !isEqual(this.lastData, next)) { + if (!this.lastData || this.lastData !== next) { store.initFromScope(props.data, props.source, { columns: store.columns ?? props.columns }); diff --git a/packages/amis/src/renderers/CRUD2.tsx b/packages/amis/src/renderers/CRUD2.tsx index 5620a6ad339..8afb037bd79 100644 --- a/packages/amis/src/renderers/CRUD2.tsx +++ b/packages/amis/src/renderers/CRUD2.tsx @@ -21,7 +21,6 @@ import {findDOMNode} from 'react-dom'; import {evalExpression, filter} from 'amis-core'; import {isEffectiveApi, isApiOutdated} from 'amis-core'; import findIndex from 'lodash/findIndex'; -import isEqual from 'lodash/isEqual'; import {Html, SpinnerExtraProps} from 'amis-ui'; import { BaseSchema, @@ -395,7 +394,7 @@ export default class CRUD2 extends React.Component { } else if (!props.api && isPureVariable(props.source)) { const next = resolveVariableAndFilter(props.source, props.data, '| raw'); - if (!this.lastData || !isEqual(this.lastData, next)) { + if (!this.lastData || this.lastData !== next) { store.initFromScope(props.data, props.source, { columns: store.columns ?? props.columns }); From 8556b13a2e97bee19da3141ba4cd04316e3ad8f8 Mon Sep 17 00:00:00 2001 From: "renjie.yin" <16231189@qq.com> Date: Tue, 21 Nov 2023 11:25:39 +0800 Subject: [PATCH 10/57] =?UTF-8?q?feat:=20Table2=E6=94=AF=E6=8C=81=E5=8F=8C?= =?UTF-8?q?=E5=87=BB=E4=BA=8B=E4=BB=B6=20(#8761)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Table2支持双击事件 * fix: prevented保持一致 * fix: 统一返回值 --- packages/amis-editor/src/plugin/Table2.tsx | 26 +++++++++++++++++++ packages/amis-ui/src/components/table/Row.tsx | 11 ++++++++ .../amis-ui/src/components/table/index.tsx | 18 +++++++++++++ packages/amis/src/renderers/Table2/index.tsx | 24 +++++++++++++++++ 4 files changed, 79 insertions(+) diff --git a/packages/amis-editor/src/plugin/Table2.tsx b/packages/amis-editor/src/plugin/Table2.tsx index 419e0e2f8e2..3ccedce849b 100644 --- a/packages/amis-editor/src/plugin/Table2.tsx +++ b/packages/amis-editor/src/plugin/Table2.tsx @@ -207,6 +207,32 @@ export const Table2RenderereEvent: RendererPluginEvent[] = [ } } ] + }, + { + eventName: 'rowDbClick', + eventLabel: '行双击', + description: '双击整行事件', + dataSchema: [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + title: '当前行记录' + }, + index: { + type: 'number', + title: '当前行索引' + } + } + } + } + } + ] }, { eventName: 'rowMouseEnter', diff --git a/packages/amis-ui/src/components/table/Row.tsx b/packages/amis-ui/src/components/table/Row.tsx index d62434f0233..5535d04df79 100644 --- a/packages/amis-ui/src/components/table/Row.tsx +++ b/packages/amis-ui/src/components/table/Row.tsx @@ -41,6 +41,7 @@ export interface Props extends ThemeProps { onMouseEnter: Function; onMouseLeave: Function; onClick: Function; + onDoubleClick: Function; onChange: Function; childrenColumnName: string; selectable: boolean; @@ -86,6 +87,15 @@ export default class BodyRow extends React.PureComponent { onClick && onClick(event, record, rowIndex); } + onDoubleClick( + event: React.ChangeEvent, + record?: any, + rowIndex?: number + ) { + const {onDoubleClick} = this.props; + onDoubleClick && onDoubleClick(event, record, rowIndex); + } + getExpandedIcons() { const {classnames: cx, isExpanded} = this.props; @@ -321,6 +331,7 @@ export default class BodyRow extends React.PureComponent { onMouseEnter={e => this.onMouseEnter(e, data, rowIndex)} onMouseLeave={e => this.onMouseLeave(e, data, rowIndex)} onClick={e => this.onClick(e, data, rowIndex)} + onDoubleClick={e => this.onDoubleClick(e, data, rowIndex)} > {draggable ? ( { } } + @autobind + async onRowDbClick( + event: React.ChangeEvent, + record?: any, + rowIndex?: number + ) { + const {onRow} = this.props; + + if (onRow && onRow.onRowDbClick) { + const prevented = await onRow.onRowDbClick(event, record, rowIndex); + if (prevented === false) { + return; + } + } + } + @autobind async onRowMouseEnter( event: React.ChangeEvent, @@ -1064,6 +1081,7 @@ export class Table extends React.PureComponent { onMouseEnter={this.onRowMouseEnter} onMouseLeave={this.onRowMouseLeave} onClick={this.onRowClick} + onDoubleClick={this.onRowDbClick} onChange={this.onRowChange} childrenColumnName={this.getChildrenColumnName()} keyField={keyField} diff --git a/packages/amis/src/renderers/Table2/index.tsx b/packages/amis/src/renderers/Table2/index.tsx index df610f95a5d..e23c272845d 100644 --- a/packages/amis/src/renderers/Table2/index.tsx +++ b/packages/amis/src/renderers/Table2/index.tsx @@ -1590,6 +1590,29 @@ export default class Table2 extends React.Component { } } + @autobind + async handleRowDbClick( + event: React.ChangeEvent, + rowItem: any, + rowIndex?: number + ) { + const {dispatchEvent, data, onRow} = this.props; + + const rendererEvent = await dispatchEvent( + 'rowDbClick', + createObject(data, {item: rowItem, index: rowIndex}) + ); + + if (rendererEvent?.prevented) { + return false; + } + + if (rowItem && onRow) { + onRow.onRowDbClick && onRow.onRowDbClick(event, rowItem, rowIndex); + } + return true; + } + @autobind async handleRowMouseEnter( event: React.MouseEvent, @@ -1838,6 +1861,7 @@ export default class Table2 extends React.Component { onRow={{ ...onRow, onRowClick: this.handleRowClick, + onRowDbClick: this.handleRowDbClick, onRowMouseEnter: this.handleRowMouseEnter, onRowMouseLeave: this.handleRowMouseLeave }} From 8d812154967c33f9d8e927b888fbae0e52cbd193 Mon Sep 17 00:00:00 2001 From: lvxiaojiao Date: Tue, 21 Nov 2023 11:43:56 +0800 Subject: [PATCH 11/57] =?UTF-8?q?feat:=E4=BA=8C=E7=BB=B4=E7=A0=81=E4=B8=8B?= =?UTF-8?q?=E8=BD=BD=E5=8A=A8=E4=BD=9C=E5=8F=AF=E8=A7=86=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor/src/plugin/QRCode.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/amis-editor/src/plugin/QRCode.tsx b/packages/amis-editor/src/plugin/QRCode.tsx index 045d332d7e2..c5e166abdf2 100644 --- a/packages/amis-editor/src/plugin/QRCode.tsx +++ b/packages/amis-editor/src/plugin/QRCode.tsx @@ -1,4 +1,4 @@ -import {registerEditorPlugin} from 'amis-editor-core'; +import {RendererPluginAction, registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; @@ -25,6 +25,14 @@ export class QRCodePlugin extends BasePlugin { ...this.scaffold }; + actions: RendererPluginAction[] = [ + { + actionType: 'saveAs', + actionLabel: '下载', + description: '触发二维码下载' + } + ]; + panelTitle = '二维码'; panelBody = [ getSchemaTpl('tabs', [ From 3e651e991001381703f840295bac539d41706b1a Mon Sep 17 00:00:00 2001 From: qkiroc <30946345+qkiroc@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:33:04 +0800 Subject: [PATCH 12/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dstyle=E4=B8=8D?= =?UTF-8?q?=E6=94=AF=E6=8C=81css=20variable=E9=97=AE=E9=A2=98=20(#8827)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复style不支持css variable问题 * 添加注释 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> --- packages/amis-core/src/utils/style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/amis-core/src/utils/style.ts b/packages/amis-core/src/utils/style.ts index 79b3ba9213a..987eb311d81 100644 --- a/packages/amis-core/src/utils/style.ts +++ b/packages/amis-core/src/utils/style.ts @@ -46,7 +46,8 @@ export function buildStyle(style: any, data: any) { styleVar.radius['bottom-left-border-radius']; delete styleVar['radius']; } - if (key.indexOf('-') !== -1) { + // 将属性短横线命名转换为驼峰命名，如background-color => backgroundColor。但不处理css variable，如--colors-brand-5 + if (key.indexOf('-') > 0) { styleVar[camelCase(valueMap[key] || key)] = styleVar[key]; delete styleVar[key]; } From 7485084e9e52d59c5332c7597105820c3c6faff5 Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:17:17 +0800 Subject: [PATCH 13/57] =?UTF-8?q?feat:=20=E4=BA=8B=E4=BB=B6=E5=8A=A8?= =?UTF-8?q?=E4=BD=9C=E6=94=AF=E6=8C=81=E4=B8=8A=E6=8A=A5=E5=9F=8B=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/types.ts | 3 +- .../amis-core/src/utils/renderer-event.ts | 21 ++++++++ .../src/renderer/event-control/index.tsx | 54 ++++++++++++++++++- .../src/renderer/event-control/types.ts | 4 ++ 4 files changed, 79 insertions(+), 3 deletions(-) diff --git a/packages/amis-core/src/types.ts b/packages/amis-core/src/types.ts index b0fe9e4db8b..a2476c858c8 100644 --- a/packages/amis-core/src/types.ts +++ b/packages/amis-core/src/types.ts @@ -458,7 +458,8 @@ export interface EventTrack { | 'tabChange' | 'pageLoaded' | 'pageHidden' - | 'pageVisible'; + | 'pageVisible' + | string; /** * 事件数据 diff --git a/packages/amis-core/src/utils/renderer-event.ts b/packages/amis-core/src/utils/renderer-event.ts index 1519a8fb8d9..c8ce9e96a15 100644 --- a/packages/amis-core/src/utils/renderer-event.ts +++ b/packages/amis-core/src/utils/renderer-event.ts @@ -10,10 +10,16 @@ export interface debounceConfig { leading?: boolean; trailing?: boolean; } + +export interface trackConfig { + id: string; + name: string; +} // 事件监听器 export interface EventListeners { [propName: string]: { debounce?: debounceConfig; + track?: trackConfig; weight?: number; // 权重 actions: ListenerAction[]; // 执行的动作集 }; @@ -26,6 +32,7 @@ export interface OnEventProps { weight?: number; // 权重 actions: ListenerAction[]; // 执行的动作集, debounce?: debounceConfig; + track?: trackConfig; }; }; } @@ -36,6 +43,7 @@ export interface RendererEventListener { type: string; weight: number; debounce: debounceConfig | null; + track: trackConfig | null; actions: ListenerAction[]; executing?: boolean; debounceInstance?: any; @@ -118,6 +126,7 @@ export const bindEvent = (renderer: any) => { renderer, type: key, debounce: listener.debounce || null, + track: listeners[key].track || null, weight: listener.weight || 0, actions: listener.actions }); @@ -127,6 +136,7 @@ export const bindEvent = (renderer: any) => { renderer, type: key, debounce: listeners[key].debounce || null, + track: listeners[key].track || null, weight: listeners[key].weight || 0, actions: listeners[key].actions }); @@ -245,6 +255,17 @@ export async function dispatchEvent( checkExecuted(); } + if (listener?.track) { + const {id: trackId, name: trackName} = listener.track; + renderer?.props?.env?.tracker({ + eventType: listener.type, + eventData: { + trackId, + trackName + } + }); + } + // 停止后续监听器执行 if (rendererEvent.stoped) { break; diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index 2e078554967..fa6edab4f42 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -78,6 +78,11 @@ interface EventDialogData { open: boolean; wait?: number; }; + trackConfig?: { + open: boolean; + id: string; + name: string; + }; [propName: string]: any; } @@ -235,6 +240,18 @@ export class EventControl extends React.Component< ...eventInfo.debounce }; } + if (!eventInfo.track) { + // 防抖配置的默认值 + eventInfo.track = { + open: false, + wait: 100 + }; + } else { + eventInfo.track = { + open: true, + ...eventInfo.track + }; + } this.setState({ eventDialogData: eventInfo, showEventDialog: true @@ -243,11 +260,11 @@ export class EventControl extends React.Component< eventDialogSubmit(formData: any) { const {onChange} = this.props; - const {eventName, debounce = {}} = formData; + const {eventName, debounce = {}, track = {}} = formData; let onEvent = { ...this.state.onEvent }; - let eventConfig = onEvent[`${eventName}`]; + let eventConfig = {...onEvent[`${eventName}`]}; if (!debounce.open) { delete eventConfig.debounce; } else { @@ -258,6 +275,18 @@ export class EventControl extends React.Component< } }; } + if (!track.open) { + delete eventConfig.track; + } else { + eventConfig = { + ...eventConfig, + track: { + id: track.id, + name: track.name + } + }; + } + onEvent[`${eventName}`] = { ...eventConfig }; @@ -1256,6 +1285,27 @@ export class EventControl extends React.Component< max: 10000, min: 0, type: 'input-number' + }, + { + label: '事件埋点', + type: 'switch', + name: 'track.open', + description: + '开启事件埋点后，每次事件触发都会发送埋点数据到后台' + }, + { + label: 'track-id', + required: true, + hiddenOn: '!track.open', + name: 'track.id', + type: 'input-text' + }, + { + label: 'track-name', + required: true, + hiddenOn: '!track.open', + name: 'track.name', + type: 'input-text' } ], onSubmit: this.eventDialogSubmit.bind(this) diff --git a/packages/amis-editor/src/renderer/event-control/types.ts b/packages/amis-editor/src/renderer/event-control/types.ts index 9c605b329a6..61437e0d2e2 100644 --- a/packages/amis-editor/src/renderer/event-control/types.ts +++ b/packages/amis-editor/src/renderer/event-control/types.ts @@ -13,6 +13,10 @@ export interface ActionEventConfig { debounce?: { wait: number; }; + track?: { + id: string; + name: string; + }; }; } From 29cb3b4ea1f80a14bfb1b06baca12bd1eb394dc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=88=E7=91=9E=E6=9D=B0?= <34231082+pianruijie@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:47:48 +0800 Subject: [PATCH 14/57] =?UTF-8?q?feat(amis-editor):=20tree-select=E6=94=AF?= =?UTF-8?q?=E6=8C=81reload=E5=8A=A8=E4=BD=9C=20(#8813)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor/src/plugin/Form/TreeSelect.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx index 4ffb4ce2ba0..5e0b8d0605a 100644 --- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx @@ -249,6 +249,11 @@ export class TreeSelectControlPlugin extends BasePlugin { actionType: 'setValue', actionLabel: '赋值', description: '触发组件数据更新' + }, + { + actionType: 'reload', + actionLabel: '重新加载', + description: '触发组件数据刷新并重新渲染' } ]; From 3d29458bef72f3d6229f241f6991ff353e8be710 Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:54:31 +0800 Subject: [PATCH 15/57] bugfix --- packages/amis-core/src/types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/amis-core/src/types.ts b/packages/amis-core/src/types.ts index a2476c858c8..fcbe26e21aa 100644 --- a/packages/amis-core/src/types.ts +++ b/packages/amis-core/src/types.ts @@ -1,7 +1,7 @@ // https://json-schema.org/draft-07/json-schema-release-notes.html import type {JSONSchema7} from 'json-schema'; import {ListenerAction} from './actions/Action'; -import {debounceConfig} from './utils/renderer-event'; +import {debounceConfig, trackConfig} from './utils/renderer-event'; export interface Option { /** @@ -619,6 +619,7 @@ export interface BaseSchemaWithoutType { weight?: number; // 权重 actions: ListenerAction[]; // 执行的动作集 debounce?: debounceConfig; + track?: trackConfig; }; }; /** From ef48b59d1357281fa7e455aab5bf5e14e2bd71b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E4=B8=B9?= <365533093@qq.com> Date: Tue, 21 Nov 2023 17:35:06 +0800 Subject: [PATCH 16/57] =?UTF-8?q?feat(amis&amis-editor):=20=E5=9C=B0?= =?UTF-8?q?=E7=90=86=E4=BD=8D=E7=BD=AE=E9=80=89=E6=8B=A9=E5=99=A8=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=AE=8C=E5=96=84=E5=92=8C=E5=BC=BA=E5=8C=96=20close?= =?UTF-8?q?=20#8802=20(#8834)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(amis): 地理位置选择组件/只读模式，不展示地图控件，不支持位置选择操作 * feat(amis): Location地理选择组件增加autoSelectCurrentLoc和onlySelectCurrentLoc配置项 * docs(amis): 补充地理选择组件的新增配置说明 * feat(amis-editor): Location地理选择组件增加autoSelectCurrentLoc和onlySelectCurrentLoc可视化配置 * fix(amis-editor): 完善Location地理选择组件的placeholder配置 * docs(amis): 增加Location地理选择组件Schema属性说明 --- docs/zh-CN/components/form/location-picker.md | 6 +- .../src/plugin/Form/LocationPicker.tsx | 25 +++++- .../amis-ui/src/components/BaiduMapPicker.tsx | 67 ++++++++++----- .../amis-ui/src/components/LocationPicker.tsx | 17 +++- packages/amis-ui/src/locale/de-DE.ts | 2 + packages/amis-ui/src/locale/en-US.ts | 1 + packages/amis-ui/src/locale/zh-CN.ts | 1 + .../src/renderers/Form/LocationPicker.tsx | 82 ++++--------------- 8 files changed, 108 insertions(+), 93 deletions(-) diff --git a/docs/zh-CN/components/form/location-picker.md b/docs/zh-CN/components/form/location-picker.md index 51239471c56..53bea4c58df 100644 --- a/docs/zh-CN/components/form/location-picker.md +++ b/docs/zh-CN/components/form/location-picker.md @@ -60,5 +60,7 @@ order: 30 | vendor | 'baidu' | 'baidu' \| 'gaode' | 地图厂商，目前只实现了百度地图和高德地图 | | ak | `string` | 无 | 百度/高德地图的 ak | | clearable | `boolean` | false | 输入框是否可清空 | -| placeholder | `string` | '请选择位置' | 默认提示 | -| coordinatesType | `string` | 'bd09' | 默为百度/高德坐标，可设置为'gcj02', 高德地图不支持坐标转换 | +| placeholder | `string` | '请选择位置' | 默认提示 | +| autoSelectCurrentLoc | `boolean` | false | 是否自动选中当前地理位置 | +| onlySelectCurrentLoc | `boolean` | false | 是否限制只能选中当前地理位置，设置为true后，可用于充当定位组件 | +| coordinatesType | `string` | 'bd09' | 默为百度/高德坐标，可设置为'gcj02', 高德地图不支持坐标转换 | diff --git a/packages/amis-editor/src/plugin/Form/LocationPicker.tsx b/packages/amis-editor/src/plugin/Form/LocationPicker.tsx index b8e148fb8a5..46d8be27331 100644 --- a/packages/amis-editor/src/plugin/Form/LocationPicker.tsx +++ b/packages/amis-editor/src/plugin/Form/LocationPicker.tsx @@ -1,4 +1,4 @@ -import {EditorNodeType, getSchemaTpl} from 'amis-editor-core'; +import {EditorNodeType, getSchemaTpl, tipedLabel} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, BaseEventContext} from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; @@ -82,11 +82,30 @@ export class LocationControlPlugin extends BasePlugin { {label: '国测局坐标', value: 'gcj02'} ] }, - + getSchemaTpl('switch', { + name: 'autoSelectCurrentLoc', + label: tipedLabel( + '自动选择', + '开启后，自动选中用户当前的地理位置' + ) + }), + getSchemaTpl('switch', { + name: 'onlySelectCurrentLoc', + label: tipedLabel( + '只读模式', + '开启后，只能使用当前地理位置，不可选择其他地理位置' + ) + }), getSchemaTpl('clearable'), getSchemaTpl('labelRemark'), getSchemaTpl('remark'), - getSchemaTpl('placeholder'), + getSchemaTpl('placeholder', { + visibleOn: '!onlySelectCurrentLoc' + }), + getSchemaTpl('placeholder', { + name: 'getLocationPlaceholder', + visibleOn: 'onlySelectCurrentLoc' + }), getSchemaTpl('description') ] }, diff --git a/packages/amis-ui/src/components/BaiduMapPicker.tsx b/packages/amis-ui/src/components/BaiduMapPicker.tsx index 4dd38bea1fd..3765ee48ef0 100644 --- a/packages/amis-ui/src/components/BaiduMapPicker.tsx +++ b/packages/amis-ui/src/components/BaiduMapPicker.tsx @@ -38,6 +38,8 @@ interface MapPickerProps { city?: string; }; onChange?: (value: any) => void; + autoSelectCurrentLoc?: boolean; + onlySelectCurrentLoc?: boolean; } interface LocationItem { @@ -109,6 +111,7 @@ export class BaiduMapPicker extends React.Component< @autobind async initMap() { + const autoSelectCurrentLoc = this.props.autoSelectCurrentLoc ?? false; const map = new BMap.Map(this.mapRef.current, { enableMapClick: false }); @@ -137,11 +140,14 @@ export class BaiduMapPicker extends React.Component< const geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener('locationSuccess', (e: any) => { - this.getLocations(e.point); + this.getLocations(e.point, autoSelectCurrentLoc); }); map.addControl(geolocationControl); map.addEventListener('click', (e: any) => { + if (this.props.onlySelectCurrentLoc) { + return; + } this.getLocations(e.point, true); }); @@ -187,7 +193,8 @@ export class BaiduMapPicker extends React.Component< value ? this.getLocations(point) : geolocationControl.location(); } - getLocations(point: any, select?: boolean) { + @autobind + getLocations(point: any, selectCurrentLoc?: boolean) { const map = this.map; map.clearOverlays(); @@ -231,7 +238,7 @@ export class BaiduMapPicker extends React.Component< locs }, () => { - if (!select) { + if (!selectCurrentLoc) { return; } @@ -318,7 +325,7 @@ export class BaiduMapPicker extends React.Component< }); var local = new BMap.LocalSearch(this.map, { - //智能搜索 + // 智能搜索 onSearchComplete: () => { const results = local.getResults(); const poi = results.getPoi(0); @@ -334,20 +341,23 @@ export class BaiduMapPicker extends React.Component< render() { const {classnames: cx} = this.props; + const onlySelectCurrentLoc = this.props.onlySelectCurrentLoc ?? false; const {locIndex, locs, inputValue, sugs} = this.state; const hasSug = Array.isArray(sugs) && sugs.length; return (
-
-
- + {!onlySelectCurrentLoc && ( +
+
+ +
-
+ )}
- {locs.map((item, index) => ( + {!onlySelectCurrentLoc && + locs.map((item, index) => ( +
+
{item.title}
+
{item.address}
+ {locIndex === index ? ( + + ) : null} +
+ ))} + {onlySelectCurrentLoc && locs.length > 0 && (
-
{item.title}
-
{item.address}
- {locIndex === index ? ( - - ) : null} +
{locs[0].title}
+
{locs[0].address}
+ {locIndex === 0 ? : null}
- ))} + )}
- {hasSug ? ( + {hasSug && !onlySelectCurrentLoc ? (
{sugs.map(item => (
void; popOverContainer?: any; + autoSelectCurrentLoc?: boolean; + onlySelectCurrentLoc?: boolean; } export interface LocationState { @@ -40,6 +43,7 @@ export class LocationPicker extends React.Component< > { static defaultProps = { placeholder: 'LocationPicker.placeholder', + getLocationPlaceholder: 'LocationPicker.getLocation', clearable: false }; domRef: React.RefObject = React.createRef(); @@ -155,12 +159,15 @@ export class LocationPicker extends React.Component< popoverClassName, disabled, placeholder, + getLocationPlaceholder, clearable, popOverContainer, vendor, coordinatesType, ak, - mobileUI + mobileUI, + autoSelectCurrentLoc, + onlySelectCurrentLoc } = this.props; const __ = this.props.translate; const {isFocused, isOpened} = this.state; @@ -173,6 +180,8 @@ export class LocationPicker extends React.Component< ak={ak} value={value} coordinatesType={coordinatesType} + autoSelectCurrentLoc={autoSelectCurrentLoc} + onlySelectCurrentLoc={onlySelectCurrentLoc} onChange={this.handleChange} /> ); @@ -213,7 +222,7 @@ export class LocationPicker extends React.Component< {value.address} ) : ( - {__(placeholder)} + {__(onlySelectCurrentLoc ? getLocationPlaceholder : placeholder)} )} @@ -242,6 +251,8 @@ export class LocationPicker extends React.Component< ak={ak} value={value} coordinatesType={coordinatesType} + autoSelectCurrentLoc={autoSelectCurrentLoc} + onlySelectCurrentLoc={onlySelectCurrentLoc} onChange={this.handleTempChange} /> ) : ( @@ -268,6 +279,8 @@ export class LocationPicker extends React.Component< ak={ak} value={value} coordinatesType={coordinatesType} + autoSelectCurrentLoc={autoSelectCurrentLoc} + onlySelectCurrentLoc={onlySelectCurrentLoc} onChange={this.handleChange} /> ) : ( diff --git a/packages/amis-ui/src/locale/de-DE.ts b/packages/amis-ui/src/locale/de-DE.ts index a9033939ee3..b872e64c6b0 100644 --- a/packages/amis-ui/src/locale/de-DE.ts +++ b/packages/amis-ui/src/locale/de-DE.ts @@ -188,6 +188,8 @@ register('de-DE', { 'loading': 'Wird geladen...', 'loadingFailed': 'Das Laden ist fehlgeschlagen', 'LocationPicker.placeholder': 'Wählen Sie einen Ort', + 'LocationPicker.getLocation': + 'Klicken Sie hier, um Standortinformationen zu erhalten', 'Month.placeholder': 'Wählen Sie einen Monat', 'Nav.sourceError': 'Fehler beim Abrufen des Links', 'networkError': diff --git a/packages/amis-ui/src/locale/en-US.ts b/packages/amis-ui/src/locale/en-US.ts index ec6b4fae55f..734fc49d9fe 100644 --- a/packages/amis-ui/src/locale/en-US.ts +++ b/packages/amis-ui/src/locale/en-US.ts @@ -180,6 +180,7 @@ register('en-US', { 'loading': 'Loading', 'loadingFailed': 'Loading failed', 'LocationPicker.placeholder': 'Pick location', + 'LocationPicker.getLocation': 'Click to obtain location information', 'Month.placeholder': 'Select a month', 'Nav.sourceError': 'Fetch link error', 'networkError': 'Network error or missing CORS configuration', diff --git a/packages/amis-ui/src/locale/zh-CN.ts b/packages/amis-ui/src/locale/zh-CN.ts index 62b78604ff8..6ad4fc5e1ea 100644 --- a/packages/amis-ui/src/locale/zh-CN.ts +++ b/packages/amis-ui/src/locale/zh-CN.ts @@ -185,6 +185,7 @@ register('zh-CN', { 'loading': '加载中', 'loadingFailed': '加载失败', 'LocationPicker.placeholder': '请选择位置', + 'LocationPicker.getLocation': '点击获取位置信息', 'Month.placeholder': '请选择月份', 'Nav.sourceError': '获取链接错误', 'networkError': '网络错误，可能是未配置跨域 CORS', diff --git a/packages/amis/src/renderers/Form/LocationPicker.tsx b/packages/amis/src/renderers/Form/LocationPicker.tsx index 903206ed7a5..1a992c36125 100644 --- a/packages/amis/src/renderers/Form/LocationPicker.tsx +++ b/packages/amis/src/renderers/Form/LocationPicker.tsx @@ -29,6 +29,23 @@ export interface LocationControlSchema extends FormBaseControlSchema { * 有的地图需要设置 ak 信息 */ ak?: string; + + /** + * 是否自动选中当前地理位置 + */ + autoSelectCurrentLoc?: boolean; + + /** + * 是否限制只能选中当前地理位置 + * 备注：可用于充当定位组件，只允许选择当前位置 + */ + onlySelectCurrentLoc?: boolean; + + /** + * 开启只读模式后的占位提示，默认为“点击获取位置信息” + * 备注：区分下现有的placeholder（“请选择位置”） + */ + getLocationPlaceholder?: string; } export interface LocationControlProps @@ -51,33 +68,6 @@ export class LocationControl extends React.Component { coordinatesType: 'bd09' }; domRef: React.RefObject = React.createRef(); - state = { - isOpened: false - }; - - @autobind - close() { - this.setState({ - isOpened: false - }); - } - - @autobind - open() { - this.setState({ - isOpened: true - }); - } - - @autobind - handleClick() { - this.state.isOpened ? this.close() : this.open(); - } - - @autobind - getParent() { - return this.domRef.current?.parentElement; - } @autobind getTarget() { @@ -85,14 +75,7 @@ export class LocationControl extends React.Component { } renderStatic(displayValue = '-') { - const { - classnames: cx, - value, - vendor, - ak, - coordinatesType, - popOverContainer - } = this.props; + const {classnames: cx, value} = this.props; const __ = this.props.translate; if (!value) { @@ -107,35 +90,6 @@ export class LocationControl extends React.Component { ref={this.domRef} > {value.address} - - - - - - {vendor === 'baidu' ? ( - - ) : ( - {__('{{vendor}} 地图控件不支持', {vendor})} - )} - -
); } From 16f0dbef172927fb26cff76f5354e88d13a69f55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Tue, 21 Nov 2023 19:02:54 +0800 Subject: [PATCH 17/57] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E4=B8=AD=E7=9A=84=20word=20=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=E6=8A=A5=E9=94=99=20(#8835)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ord 文件链接报错 --- fis-conf.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/fis-conf.js b/fis-conf.js index 012db3fb7b2..361abb1be63 100644 --- a/fis-conf.js +++ b/fis-conf.js @@ -688,7 +688,10 @@ if (fis.project.currentMedia() === 'publish-sdk') { postprocessor: convertSCSSIE11 }); const ghPages = fis.media('gh-pages'); - ghPages.set('project.files', ['examples/index.html']); + ghPages.set('project.files', [ + 'examples/index.html', + '/examples/static/*.docx' + ]); ghPages.match('*.scss', { parser: fis.plugin('sass', { @@ -1008,6 +1011,10 @@ if (fis.project.currentMedia() === 'publish-sdk') { useHash: true }); + ghPages.match('*.docx', { + useHash: false + }); + ghPages.match('*.{js,ts,tsx,jsx}', { optimizer: fis.plugin('terser'), useHash: true From c884413d3b7ffc32b960a3496978d80f1e3ffce6 Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Tue, 21 Nov 2023 19:36:38 +0800 Subject: [PATCH 18/57] bugfix --- packages/amis-editor/src/renderer/event-control/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index fa6edab4f42..dba3c9bcb62 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -241,10 +241,8 @@ export class EventControl extends React.Component< }; } if (!eventInfo.track) { - // 防抖配置的默认值 eventInfo.track = { - open: false, - wait: 100 + open: false }; } else { eventInfo.track = { From 03ed733c74f788d0d490730e349bf8216c11df83 Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Tue, 21 Nov 2023 20:12:13 +0800 Subject: [PATCH 19/57] =?UTF-8?q?fix:=20RootRenderer=E7=9A=84runtime=20err?= =?UTF-8?q?or=E8=A2=AB=E9=9A=90=E8=97=8F=E9=97=AE=E9=A2=98=20(#8839)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/RootRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amis-core/src/RootRenderer.tsx b/packages/amis-core/src/RootRenderer.tsx index 86e3295d172..d6e6f74381b 100644 --- a/packages/amis-core/src/RootRenderer.tsx +++ b/packages/amis-core/src/RootRenderer.tsx @@ -474,7 +474,7 @@ export class RootRenderer extends React.Component { const store = this.store; if (store.runtimeError) { - this.renderRuntimeError(); + return this.renderRuntimeError(); } return ( From 2355d774c8dc77806f7fcd01fbde7fe7dcd0bd81 Mon Sep 17 00:00:00 2001 From: lurunze1226 Date: Tue, 21 Nov 2023 20:57:02 +0800 Subject: [PATCH 20/57] =?UTF-8?q?fix:=20Select=E4=B8=ADpopoverClassName?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E4=B8=A2=E5=A4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/src/components/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx index 63c705d94d2..6e0c538d83b 100644 --- a/packages/amis-ui/src/components/Select.tsx +++ b/packages/amis-ui/src/components/Select.tsx @@ -1271,7 +1271,7 @@ export class Select extends React.Component { > Date: Tue, 21 Nov 2023 20:57:59 +0800 Subject: [PATCH 21/57] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20lazyRenderAf?= =?UTF-8?q?ter=20=E7=9A=84=20faq=20=E6=8F=8F=E8=BF=B0=20(#8840)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/start/faq.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/zh-CN/start/faq.md b/docs/zh-CN/start/faq.md index ff25f60cc50..f1cb6e4471d 100644 --- a/docs/zh-CN/start/faq.md +++ b/docs/zh-CN/start/faq.md @@ -103,3 +103,7 @@ amisScoped.updateProps({ ## CRUD api 分页功能失效 如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}` + +## CRUD 性能较慢怎么办？ + +3.4.1 之后版本有个 `lazyRenderAfter` 配置项，默认是 100，可以改小点，延迟渲染不在屏幕中的行 From dd98def2e96496cdc9bde7aefdbd96f4976f9173 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Tue, 21 Nov 2023 21:11:22 +0800 Subject: [PATCH 22/57] =?UTF-8?q?fix:=20=E6=9C=AC=E5=9C=B0=E6=97=A7?= =?UTF-8?q?=E7=89=88=20node=5Fmodules=20=E5=8F=AF=E8=83=BD=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=20fontawesome-free=20=E6=89=93=E5=8C=85=20sdk=20?= =?UTF-8?q?=E6=97=B6=E8=A2=AB=E4=BD=BF=E7=94=A8=20Closes=20#8837=20(#8838)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 ++- packages/amis-editor-core/package.json | 4 ++-- packages/amis-editor/package.json | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9db14f39398..b515077dad6 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "qs": "6.9.7" }, "devDependencies": { + "@fortawesome/fontawesome-free": "^6.1.1", "@babel/generator": "^7.22.9", "@babel/parser": "^7.22.7", "@babel/traverse": "^7.22.8", @@ -141,4 +142,4 @@ "printBasicPrototype": false } } -} +} \ No newline at end of file diff --git a/packages/amis-editor-core/package.json b/packages/amis-editor-core/package.json index 9796e682cc7..07e3ad8efd5 100644 --- a/packages/amis-editor-core/package.json +++ b/packages/amis-editor-core/package.json @@ -59,7 +59,7 @@ "sortablejs": "^1.14.0" }, "devDependencies": { - "@fortawesome/fontawesome-free": "^5.15.3", + "@fortawesome/fontawesome-free": "^6.1.1", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.3.0", @@ -120,4 +120,4 @@ "react": ">=16.8.6", "react-dom": ">=16.8.6" } -} +} \ No newline at end of file diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 7c76f88df63..63f9a759fff 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -49,7 +49,7 @@ "mobx-state-tree": "^3.17.3" }, "devDependencies": { - "@fortawesome/fontawesome-free": "^5.15.3", + "@fortawesome/fontawesome-free": "^6.1.1", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.3.0", @@ -108,4 +108,4 @@ "react": ">=16.8.6", "react-dom": ">=16.8.6" } -} +} \ No newline at end of file From ae6e03e306fa69c2c8443380ebf740aa494992e9 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Tue, 21 Nov 2023 20:59:09 +0800 Subject: [PATCH 23/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DinputDate=20?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20valueFormat=20+=20=E8=A1=A8=E8=BE=BE?= =?UTF-8?q?=E5=BC=8F=E5=88=9D=E5=A7=8B=E5=80=BC=E6=97=B6=E5=80=BC=E4=B8=8D?= =?UTF-8?q?=E5=8C=B9=E9=85=8D=20valueFormat=20Close:=20#8652?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../renderers/Form/inputDate.test.tsx | 20 +++++++++++++++++++ .../amis/src/renderers/Form/InputDate.tsx | 11 ++++++++-- .../src/renderers/Form/InputDateRange.tsx | 1 + 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/amis/__tests__/renderers/Form/inputDate.test.tsx b/packages/amis/__tests__/renderers/Form/inputDate.test.tsx index cb0fab3a3a9..8627bb9600d 100644 --- a/packages/amis/__tests__/renderers/Form/inputDate.test.tsx +++ b/packages/amis/__tests__/renderers/Form/inputDate.test.tsx @@ -521,3 +521,23 @@ test('Renderer:inputDate disabledDate', async () => { expect(mondayCell).toHaveClass('rdtDisabled'); expect(tuesdayCell).not.toHaveClass('rdtDisabled'); }); + +test('Renderer:inputDate defaultValue with formula', async () => { + const {container} = await setup([ + { + type: 'input-date', + name: 'date', + label: '日期', + valueFormat: 'YYYY-MM-DD', + value: '${ DATE("2021-12-06 08:20:00") }' + } + ]); + + await wait(300); + const input = container.querySelector( + '.cxd-DatePicker-input' + )! as HTMLInputElement; + + expect(input).toBeInTheDocument(); + expect(input.value).toBe('2021-12-06'); +}); diff --git a/packages/amis/src/renderers/Form/InputDate.tsx b/packages/amis/src/renderers/Form/InputDate.tsx index 8d726db2213..a33521316a1 100644 --- a/packages/amis/src/renderers/Form/InputDate.tsx +++ b/packages/amis/src/renderers/Form/InputDate.tsx @@ -4,7 +4,8 @@ import { FormControlProps, FormBaseControl, resolveEventData, - str2function + str2function, + normalizeDate } from 'amis-core'; import cx from 'classnames'; import {filterDate, isPureVariable, resolveVariableAndFilter} from 'amis-core'; @@ -404,7 +405,8 @@ export default class DateControl extends React.PureComponent< data, format, valueFormat, - utc + utc, + changeMotivation } = props; if (defaultValue && value === defaultValue) { @@ -412,6 +414,11 @@ export default class DateControl extends React.PureComponent< setPrinstineValue( (utc ? moment.utc(date) : date).format(valueFormat || format) ); + } else if (changeMotivation === 'formulaChanged' && defaultValue && value) { + const date = normalizeDate(value, valueFormat || format); + if (date && date.format(valueFormat || format) !== value) { + setPrinstineValue(date.format(valueFormat || format)); + } } let schedulesData = props.schedules; diff --git a/packages/amis/src/renderers/Form/InputDateRange.tsx b/packages/amis/src/renderers/Form/InputDateRange.tsx index fb77d91735f..baabf77183a 100644 --- a/packages/amis/src/renderers/Form/InputDateRange.tsx +++ b/packages/amis/src/renderers/Form/InputDateRange.tsx @@ -179,6 +179,7 @@ export default class DateRangeControl extends React.Component { ) ); } + // todo 支持值格式的自动纠正 } componentDidUpdate(prevProps: DateRangeProps) { From b48f8f9a99c85f26512626a57d09559703b4e121 Mon Sep 17 00:00:00 2001 From: lurunze1226 Date: Tue, 21 Nov 2023 21:30:09 +0800 Subject: [PATCH 24/57] bump: amis v3.5.3 --- lerna.json | 2 +- packages/amis-core/package.json | 4 ++-- packages/amis-formula/package.json | 2 +- packages/amis-ui/package.json | 6 +++--- packages/amis/package.json | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 1f69bca166d..f134fc1c2de 100644 --- a/lerna.json +++ b/lerna.json @@ -6,5 +6,5 @@ "packages/amis" ], "useWorkspaces": false, - "version": "3.5.1" + "version": "3.5.3" } diff --git a/packages/amis-core/package.json b/packages/amis-core/package.json index cd201345f89..382b7e77119 100644 --- a/packages/amis-core/package.json +++ b/packages/amis-core/package.json @@ -1,6 +1,6 @@ { "name": "amis-core", - "version": "3.5.1", + "version": "3.5.3", "description": "amis-core", "main": "lib/index.js", "module": "esm/index.js", @@ -46,7 +46,7 @@ "esm" ], "dependencies": { - "amis-formula": "^3.5.1", + "amis-formula": "^3.5.3", "classnames": "2.3.2", "file-saver": "^2.0.2", "hoist-non-react-statics": "^3.3.2", diff --git a/packages/amis-formula/package.json b/packages/amis-formula/package.json index 3f0ade60dce..8c2cadc89f2 100644 --- a/packages/amis-formula/package.json +++ b/packages/amis-formula/package.json @@ -1,6 +1,6 @@ { "name": "amis-formula", - "version": "3.5.1", + "version": "3.5.3", "description": "负责 amis 里面的表达式实现，内置公式，编辑器等", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-ui/package.json b/packages/amis-ui/package.json index 025eb76c863..a340b0f8279 100644 --- a/packages/amis-ui/package.json +++ b/packages/amis-ui/package.json @@ -3,7 +3,7 @@ "main": "lib/index.js", "module": "esm/index.js", "types": "lib/index.d.ts", - "version": "3.5.1", + "version": "3.5.3", "description": "", "scripts": { "build": "npm run clean-dist && NODE_ENV=production rollup -c ", @@ -36,8 +36,8 @@ }, "dependencies": { "@rc-component/mini-decimal": "^1.0.1", - "amis-core": "^3.5.1", - "amis-formula": "^3.5.1", + "amis-core": "^3.5.3", + "amis-formula": "^3.5.3", "classnames": "2.3.2", "codemirror": "^5.63.0", "downshift": "6.1.12", diff --git a/packages/amis/package.json b/packages/amis/package.json index 2059f4d61fe..7ccdeb19693 100644 --- a/packages/amis/package.json +++ b/packages/amis/package.json @@ -1,6 +1,6 @@ { "name": "amis", - "version": "3.5.1", + "version": "3.5.3", "description": "一种MIS页面生成工具", "main": "lib/index.js", "module": "esm/index.js", @@ -37,8 +37,8 @@ } ], "dependencies": { - "amis-core": "^3.5.1", - "amis-ui": "^3.5.1", + "amis-core": "^3.5.3", + "amis-ui": "^3.5.3", "attr-accept": "2.2.2", "blueimp-canvastoblob": "2.1.0", "classnames": "2.3.2", From 24a02f8b5c9598c9569a18e14cee372b985c7ff6 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 22 Nov 2023 10:05:43 +0800 Subject: [PATCH 25/57] =?UTF-8?q?fix(amis):=20StaticHoc=E6=94=B9=E7=94=A8c?= =?UTF-8?q?omponentDidCatch=E6=8B=A6=E6=88=AA=E6=B8=B2=E6=9F=93=E5=BC=82?= =?UTF-8?q?=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ErrorBoundary.tsx | 54 +++++++++++++++++++ packages/amis-core/src/index.tsx | 2 + packages/amis/package.json | 1 - .../amis/src/renderers/Form/StaticHoc.tsx | 11 ++-- 4 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 packages/amis-core/src/components/ErrorBoundary.tsx diff --git a/packages/amis-core/src/components/ErrorBoundary.tsx b/packages/amis-core/src/components/ErrorBoundary.tsx new file mode 100644 index 00000000000..39d9c243265 --- /dev/null +++ b/packages/amis-core/src/components/ErrorBoundary.tsx @@ -0,0 +1,54 @@ +/** + * @file ErrorBoundary + * @description 捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误 + * @author wibetter + */ +import React from 'react'; + +interface ErrorBoundaryProps { + curSchema?: any; + children: any; +} + +interface ErrorBoundaryStates { + hasError: boolean; +} + +export default class ErrorBoundary extends React.Component< + ErrorBoundaryProps, + ErrorBoundaryStates +> { + constructor(props: any) { + super(props); + this.state = {hasError: false}; + } + + componentDidCatch(error: any, errorInfo: any) { + const {curSchema} = this.props; + if (curSchema) { + console.warn( + `拦截到${curSchema.type}渲染错误，当前组件schema:`, + curSchema + ); + } + + console.warn('错误对象：', error); + console.warn('错误信息：', errorInfo); + this.setState({ + hasError: true + }); + } + + render() { + const {curSchema} = this.props; + if (this.state.hasError) { + return ( +
+ {curSchema.type} 渲染发生错误，详细错误信息请查看控制台输出。 +
+ ); + } + + return this.props.children; + } +} diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx index ec7e7137f05..787459e58eb 100644 --- a/packages/amis-core/src/index.tsx +++ b/packages/amis-core/src/index.tsx @@ -96,6 +96,7 @@ import type {FilterContext} from 'amis-formula'; import LazyComponent from './components/LazyComponent'; import Overlay from './components/Overlay'; import PopOver from './components/PopOver'; +import ErrorBoundary from './components/ErrorBoundary'; import {FormRenderer} from './renderers/Form'; import type {FormHorizontal, FormSchemaBase} from './renderers/Form'; import { @@ -182,6 +183,7 @@ export { LazyComponent, Overlay, PopOver, + ErrorBoundary, addSchemaFilter, OptionsControlProps, FormOptionsControl, diff --git a/packages/amis/package.json b/packages/amis/package.json index 7ccdeb19693..1447c9a1a86 100644 --- a/packages/amis/package.json +++ b/packages/amis/package.json @@ -67,7 +67,6 @@ "qrcode.react": "^3.1.0", "react-cropper": "^2.1.8", "react-dropzone": "^11.4.2", - "react-error-boundary": "^4.0.11", "react-intersection-observer": "9.5.2", "react-json-view": "1.21.3", "react-transition-group": "4.4.2", diff --git a/packages/amis/src/renderers/Form/StaticHoc.tsx b/packages/amis/src/renderers/Form/StaticHoc.tsx index 601d112623f..c61995bff68 100644 --- a/packages/amis/src/renderers/Form/StaticHoc.tsx +++ b/packages/amis/src/renderers/Form/StaticHoc.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import toString from 'lodash/toString'; import {getPropValue, FormControlProps} from 'amis-core'; -import {ErrorBoundary} from 'react-error-boundary'; +import {ErrorBoundary} from 'amis-core'; function renderCommonStatic(props: any, defaultValue: string) { const {type, render, staticSchema} = props; @@ -135,11 +134,9 @@ export function supportStatic() { } return ( -
- {toString(body)}}> - {body} - -
+ +
{body}
+ ); } From 8f1638cce8dd1e17783811b5e5502a33f2cf347c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Wed, 22 Nov 2023 11:14:19 +0800 Subject: [PATCH 26/57] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E5=AD=97=E4=BD=93=E5=88=97=E8=A1=A8=20Closes=20#6768?= =?UTF-8?q?=20(#8830)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/scss/themes/_ang-variables.scss | 8 +++++--- packages/amis-ui/scss/themes/_antd-variables.scss | 8 +++++--- packages/amis-ui/scss/themes/_cxd-variables.scss | 9 ++++++--- packages/amis-ui/scss/themes/_dark-variables.scss | 8 +++++--- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/amis-ui/scss/themes/_ang-variables.scss b/packages/amis-ui/scss/themes/_ang-variables.scss index 3fa52940b5c..abf87e476b7 100644 --- a/packages/amis-ui/scss/themes/_ang-variables.scss +++ b/packages/amis-ui/scss/themes/_ang-variables.scss @@ -109,9 +109,11 @@ $ns: 'a-'; --colors-neutral-line-9: #f3f2f5; --colors-neutral-line-10: #f8f7fa; --colors-neutral-line-11: #ffffff; - --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, - Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, - Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif; + --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, + 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', + 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', + 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', + SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif; --fonts-size-1: 48px; --fonts-size-2: 40px; --fonts-size-3: 32px; diff --git a/packages/amis-ui/scss/themes/_antd-variables.scss b/packages/amis-ui/scss/themes/_antd-variables.scss index bc1556b54d3..c12738da681 100644 --- a/packages/amis-ui/scss/themes/_antd-variables.scss +++ b/packages/amis-ui/scss/themes/_antd-variables.scss @@ -109,9 +109,11 @@ $ns: 'antd-'; --colors-neutral-line-9: #f2f4f5; --colors-neutral-line-10: #f7f9fa; --colors-neutral-line-11: #ffffff; - --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, - Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, - Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif; + --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, + 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', + 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', + 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', + SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif; --fonts-size-1: 48px; --fonts-size-2: 40px; --fonts-size-3: 32px; diff --git a/packages/amis-ui/scss/themes/_cxd-variables.scss b/packages/amis-ui/scss/themes/_cxd-variables.scss index 2c3a3a84bfa..48ae20a38d1 100644 --- a/packages/amis-ui/scss/themes/_cxd-variables.scss +++ b/packages/amis-ui/scss/themes/_cxd-variables.scss @@ -106,9 +106,12 @@ $ns: 'cxd-'; --colors-neutral-line-9: #f2f3f5; --colors-neutral-line-10: #f7f8fa; --colors-neutral-line-11: #ffffff; - --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, - Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, - Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif; + // 参考 https://zenozeng.github.io/fonts.css/ + --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, + 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', + 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', + 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', + SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif; --fonts-size-1: 48px; --fonts-size-2: 40px; --fonts-size-3: 32px; diff --git a/packages/amis-ui/scss/themes/_dark-variables.scss b/packages/amis-ui/scss/themes/_dark-variables.scss index 9c1ac2f5fc8..461fcdd626f 100644 --- a/packages/amis-ui/scss/themes/_dark-variables.scss +++ b/packages/amis-ui/scss/themes/_dark-variables.scss @@ -117,9 +117,11 @@ $ns: 'dark-'; --colors-neutral-line-9: #f2f4f5; --colors-neutral-line-10: #f7f9fa; --colors-neutral-line-11: #ffffff; - --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, - Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, - Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif; + --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, + 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', + 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', + 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', + SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif; --fonts-size-1: 48px; --fonts-size-2: 40px; --fonts-size-3: 32px; From 7b7d58c41cf3bc10644cfd0257f0c7904515cc1e Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 22 Nov 2023 11:17:55 +0800 Subject: [PATCH 27/57] =?UTF-8?q?fix(amis):=20ErrorBoundary=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0fallback=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ErrorBoundary.tsx | 20 ++++++++++++------- .../amis/src/renderers/Form/StaticHoc.tsx | 12 ++++++++++- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/amis-core/src/components/ErrorBoundary.tsx b/packages/amis-core/src/components/ErrorBoundary.tsx index 39d9c243265..022fb37e6d8 100644 --- a/packages/amis-core/src/components/ErrorBoundary.tsx +++ b/packages/amis-core/src/components/ErrorBoundary.tsx @@ -6,7 +6,8 @@ import React from 'react'; interface ErrorBoundaryProps { - curSchema?: any; + curErrorSchema?: any; + fallback?: () => void; children: any; } @@ -24,11 +25,11 @@ export default class ErrorBoundary extends React.Component< } componentDidCatch(error: any, errorInfo: any) { - const {curSchema} = this.props; - if (curSchema) { + const {curErrorSchema} = this.props; + if (curErrorSchema) { console.warn( - `拦截到${curSchema.type}渲染错误，当前组件schema:`, - curSchema + `拦截到${curErrorSchema.type}渲染错误，当前组件schema:`, + curErrorSchema ); } @@ -40,11 +41,16 @@ export default class ErrorBoundary extends React.Component< } render() { - const {curSchema} = this.props; + const {curErrorSchema, fallback} = this.props; if (this.state.hasError) { + if (fallback) { + return fallback(); + } + + // 默认渲染错误信息 return (
- {curSchema.type} 渲染发生错误，详细错误信息请查看控制台输出。 + {curErrorSchema.type} 渲染发生错误，详细错误信息请查看控制台输出。
); } diff --git a/packages/amis/src/renderers/Form/StaticHoc.tsx b/packages/amis/src/renderers/Form/StaticHoc.tsx index c61995bff68..0926bc5687f 100644 --- a/packages/amis/src/renderers/Form/StaticHoc.tsx +++ b/packages/amis/src/renderers/Form/StaticHoc.tsx @@ -134,7 +134,17 @@ export function supportStatic() { } return ( - + { + return ( +
+ {props.$schema?.type} + 渲染发生错误，详细错误信息请查看控制台输出。 +
+ ); + }} + >
{body}
 ); From 0c233986f53cc474cd975fc0959c0de7de080bc3 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 22 Nov 2023 11:40:45 +0800 Subject: [PATCH 28/57] =?UTF-8?q?fix(amis):=20ErrorBoundary=E7=BB=86?= =?UTF-8?q?=E8=8A=82=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../amis-core/src/components/ErrorBoundary.tsx | 16 +++++++--------- packages/amis/src/renderers/Form/StaticHoc.tsx | 2 +- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/amis-core/src/components/ErrorBoundary.tsx b/packages/amis-core/src/components/ErrorBoundary.tsx index 022fb37e6d8..0d1332e03bd 100644 --- a/packages/amis-core/src/components/ErrorBoundary.tsx +++ b/packages/amis-core/src/components/ErrorBoundary.tsx @@ -6,7 +6,8 @@ import React from 'react'; interface ErrorBoundaryProps { - curErrorSchema?: any; + // 自定义错误信息，控制台输出 + customErrorMsg?: string; fallback?: () => void; children: any; } @@ -25,12 +26,9 @@ export default class ErrorBoundary extends React.Component< } componentDidCatch(error: any, errorInfo: any) { - const {curErrorSchema} = this.props; - if (curErrorSchema) { - console.warn( - `拦截到${curErrorSchema.type}渲染错误，当前组件schema:`, - curErrorSchema - ); + const {customErrorMsg} = this.props; + if (customErrorMsg) { + console.warn(customErrorMsg); } console.warn('错误对象：', error); @@ -41,7 +39,7 @@ export default class ErrorBoundary extends React.Component< } render() { - const {curErrorSchema, fallback} = this.props; + const {fallback} = this.props; if (this.state.hasError) { if (fallback) { return fallback(); @@ -50,7 +48,7 @@ export default class ErrorBoundary extends React.Component< // 默认渲染错误信息 return (
- {curErrorSchema.type} 渲染发生错误，详细错误信息请查看控制台输出。 + 渲染发生错误，详细错误信息请查看控制台输出。
); } diff --git a/packages/amis/src/renderers/Form/StaticHoc.tsx b/packages/amis/src/renderers/Form/StaticHoc.tsx index 0926bc5687f..1c8bae26782 100644 --- a/packages/amis/src/renderers/Form/StaticHoc.tsx +++ b/packages/amis/src/renderers/Form/StaticHoc.tsx @@ -135,7 +135,7 @@ export function supportStatic() { return ( { return (
From 10b20bf3318b543b382aa6c561f10d6d401ad173 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 22 Nov 2023 12:20:40 +0800 Subject: [PATCH 29/57] =?UTF-8?q?fix(amis-editor):=20amis-editor=E4=B9=9F?= =?UTF-8?q?=E6=94=B9=E7=94=A8ErrorBoundary=E6=8B=A6=E6=88=AA=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E5=BC=82=E5=B8=B8=EF=BC=8C=E5=87=8F=E5=B0=91=E5=86=97?= =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/factory.tsx | 60 ++++++++----------- 1 file changed, 24 insertions(+), 36 deletions(-) diff --git a/packages/amis-editor-core/src/component/factory.tsx b/packages/amis-editor-core/src/component/factory.tsx index 5ec262d16bd..6c004910322 100644 --- a/packages/amis-editor-core/src/component/factory.tsx +++ b/packages/amis-editor-core/src/component/factory.tsx @@ -23,7 +23,8 @@ import { JSONUpdate, getFixDialogType } from '../util'; -import {createObject, createObjectFromChain} from 'amis-core'; +import {createObjectFromChain} from 'amis-core'; +import {ErrorBoundary} from 'amis-core'; import {CommonConfigWrapper} from './CommonConfigWrapper'; import type {Schema} from 'amis'; import type {DataScope} from 'amis-core'; @@ -40,14 +41,11 @@ export function makeWrapper( type Props = RendererProps & { $$id: string; }; - type States = { - hasError: boolean; - }; const store = manager.store; const renderer = rendererConfig.component; @observer - class Wrapper extends React.Component { + class Wrapper extends React.Component { static displayName = renderer.displayName; static propsList = ((renderer && renderer.propsList) || []).concat([ '$$id' @@ -57,11 +55,6 @@ export function makeWrapper( editorNode?: EditorNodeType; scopeId?: string; - constructor(props: Props) { - super(props); - this.state = {hasError: false}; - } - UNSAFE_componentWillMount() { const parent: EditorNodeType = (this.context as any) || store.root; if (!info.id) { @@ -133,16 +126,6 @@ export function makeWrapper( } } - componentDidCatch(error: any, errorInfo: any) { - console.warn(`${info.name}(${info.id})渲染发生错误：`); - console.warn('当前渲染器信息：', info); - console.warn('错误对象：', error); - console.warn('错误信息：', errorInfo); - this.setState({ - hasError: true - }); - } - componentWillUnmount() { if (this.editorNode && isAlive(this.editorNode)) { const parent: EditorNodeType = (this.context as any) || store.root; @@ -186,14 +169,6 @@ export function makeWrapper( render() { const {$$id, ...rest} = this.props; - if (this.state.hasError) { - return ( -
- {info.name}({info.id})渲染发生错误，详细错误信息请查看控制台输出。 -
- ); - } - /* * 根据渲染器信息决定时 NodeWrapper 包裹还是 ContainerWrapper 包裹。 * NodeWrapper 主要完成 dom 节点的标记（即：添加 data-editor-id 属性）。 @@ -207,18 +182,31 @@ export function makeWrapper( : info.regions ? ContainerWrapper : NodeWrapper; /*)*/ - return ( - + { + return ( +
+ {info?.type} + 渲染发生错误，详细错误信息请查看控制台输出。 +
+ ); + }} + > + + ); } From 4b79f02589d0a471fa872763d22483d6e4c9694b Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 22 Nov 2023 12:28:28 +0800 Subject: [PATCH 30/57] =?UTF-8?q?style(amis):=20ErrorBoundary=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=8F=90=E7=A4=BA=E6=A0=B7=E5=BC=8F=E6=94=B9=E6=94=BE?= =?UTF-8?q?amis=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/components/ErrorBoundary.tsx | 2 +- packages/amis-editor-core/scss/editor.scss | 8 -------- packages/amis-editor-core/src/component/factory.tsx | 2 +- packages/amis-ui/scss/base/_common.scss | 8 ++++++++ packages/amis/src/renderers/Form/StaticHoc.tsx | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/amis-core/src/components/ErrorBoundary.tsx b/packages/amis-core/src/components/ErrorBoundary.tsx index 0d1332e03bd..66484d176af 100644 --- a/packages/amis-core/src/components/ErrorBoundary.tsx +++ b/packages/amis-core/src/components/ErrorBoundary.tsx @@ -47,7 +47,7 @@ export default class ErrorBoundary extends React.Component< // 默认渲染错误信息 return ( -
+
渲染发生错误，详细错误信息请查看控制台输出。
); diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss index 677cb712b2b..0b7a8656517 100644 --- a/packages/amis-editor-core/scss/editor.scss +++ b/packages/amis-editor-core/scss/editor.scss @@ -801,14 +801,6 @@ } } -.ae-Editor-renderer-error { - padding: 5px; - font-family: PingFangSC-Medium; - font-size: 14px; - color: #cf1322; - border: 1px dashed #cf1322; -} - .ae-Editor-tip { user-select: none; max-width: 100px; diff --git a/packages/amis-editor-core/src/component/factory.tsx b/packages/amis-editor-core/src/component/factory.tsx index 6c004910322..becb7a66765 100644 --- a/packages/amis-editor-core/src/component/factory.tsx +++ b/packages/amis-editor-core/src/component/factory.tsx @@ -192,7 +192,7 @@ export function makeWrapper( }渲染错误，当前组件信息: ${JSON.stringify(this.props.$schema)}`} fallback={() => { return ( -
+
{info?.type} 渲染发生错误，详细错误信息请查看控制台输出。
diff --git a/packages/amis-ui/scss/base/_common.scss b/packages/amis-ui/scss/base/_common.scss index e87518f58c9..52e0ae192f1 100644 --- a/packages/amis-ui/scss/base/_common.scss +++ b/packages/amis-ui/scss/base/_common.scss @@ -9,3 +9,11 @@ .visibility-sensor { min-height: 5px; } + +.renderer-error-boundary { + padding: 5px; + font-family: PingFangSC-Medium; + font-size: 14px; + color: #cf1322; + border: 1px dashed #cf1322; +} diff --git a/packages/amis/src/renderers/Form/StaticHoc.tsx b/packages/amis/src/renderers/Form/StaticHoc.tsx index 1c8bae26782..5a0f6dccb3c 100644 --- a/packages/amis/src/renderers/Form/StaticHoc.tsx +++ b/packages/amis/src/renderers/Form/StaticHoc.tsx @@ -138,7 +138,7 @@ export function supportStatic() { customErrorMsg={`拦截到${props.$schema.type}渲染错误，当前组件schema: ${props.$schema}`} fallback={() => { return ( -
+
{props.$schema?.type} 渲染发生错误，详细错误信息请查看控制台输出。
From a9e5492184c8b3ff2700946cf04179ac90887114 Mon Sep 17 00:00:00 2001 From: lvxiaojiao Date: Wed, 22 Nov 2023 13:45:56 +0800 Subject: [PATCH 31/57] =?UTF-8?q?chore:inputTable=E7=9A=84addItem=E5=8A=A8?= =?UTF-8?q?=E4=BD=9C=E4=B8=8D=E5=8F=97=E6=98=AF=E5=90=A6=E5=8F=AF=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis/src/renderers/Form/InputTable.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/amis/src/renderers/Form/InputTable.tsx b/packages/amis/src/renderers/Form/InputTable.tsx index d7264c8852e..6fc59d8680d 100644 --- a/packages/amis/src/renderers/Form/InputTable.tsx +++ b/packages/amis/src/renderers/Form/InputTable.tsx @@ -1775,10 +1775,6 @@ export class TableControlRenderer extends FormTable { const ctx = this.props.store?.data || {}; // 获取当前上下文数据 if (actionType === 'addItem') { - if (addable === false) { - return; - } - const items = this.state.items.concat(); if (addApi || args) { From 73ef317e2c395228be2355ed3f3e439649ca17a1 Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Wed, 22 Nov 2023 16:46:22 +0800 Subject: [PATCH 32/57] =?UTF-8?q?feat:=20Switch=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=8A=A0=E8=BD=BD=E4=B8=AD=E7=8A=B6=E6=80=81=20(#8814?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/switch.md | 129 +++++++++++++++++- packages/amis-ui/scss/_components.scss | 5 +- .../amis-ui/scss/components/_spinner.scss | 9 ++ .../amis-ui/scss/components/form/_switch.scss | 38 ++++++ packages/amis-ui/src/components/Spinner.tsx | 15 +- packages/amis-ui/src/components/Switch.tsx | 40 ++++-- .../amis-ui/src/components/formula/Input.tsx | 2 +- .../__tests__/renderers/Form/switch.test.tsx | 39 ++++++ packages/amis/src/renderers/Form/Switch.tsx | 16 ++- 9 files changed, 271 insertions(+), 22 deletions(-) diff --git a/docs/zh-CN/components/form/switch.md b/docs/zh-CN/components/form/switch.md index 0ba02b059b9..629b8f26fa5 100755 --- a/docs/zh-CN/components/form/switch.md +++ b/docs/zh-CN/components/form/switch.md @@ -25,6 +25,24 @@ order: 51 } ``` +## 禁用状态 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "body": [ + { + "name": "switch", + "type": "switch", + "disabled": true, + "label": "开关", + "option": "开关说明" + } + ] +} +``` + ## 配置真假值 默认情况： @@ -105,7 +123,7 @@ order: 51 ## 不同尺寸 -> 2.0.0 及以上版本 +> `2.0.0` 及以上版本 ```schema: scope="body" { @@ -127,18 +145,123 @@ order: 51 } ``` +## 加载状态 + +> `3.6.0` 及以上版本 + +设置`"loading": true`, 标识开关操作的异步任务仍在执行中。另外`loadingOn`支持表达式 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "data": { + "shouldLoading": true + }, + "body": [ + { + "type": "switch", + "name": "switch1", + "label": "", + "loading": true, + "value": true + }, + { + + "type": "switch", + "name": "switch2", + "label": "", + "size": "sm", + "disabled": true, + "loading": true + } + ] +} +``` + +配合`ajax`动作，实现开关操作后台异步任务： + +```schema: scope="body" +{ + "type": "page", + "body": [ + { + "type": "form", + "id": "demo-form", + "body": [ + { + "type": "hidden", + "name": "isFetching", + "value": false + }, + { + "type": "switch", + "name": "switch", + "label": "操作状态开关", + "mode": "horizontal", + "loadingOn": "${isFetching}", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "warning", + "msg": "任务${switch === true ? '派发' : '取消'}成功，等待后台操作..." + } + }, + { + "actionType": "setValue", + "componentId": "demo-form", + "args": { + "value": { + "isFetching": true + } + } + }, + { + "actionType": "ajax", + "api": { + "url": "/api/mock2/form/saveForm?waitSeconds=3", + "method": "get", + "messages": { + "success": "操作成功", + "failed": "操作失败" + } + } + }, + { + "actionType": "setValue", + "componentId": "demo-form", + "args": { + "value": { + "isFetching": false + } + } + } + ] + } + } + } + ] + } + ] +} +``` + ## 属性表 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| ---------- | --------------------------- | ------- | -------------------- | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ---------- | --------------------------- | ------- | -------------------- | --- | | option | `string` | | 选项说明 | | onText | `string / IconSchema` | | 开启时开关显示的内容 | | offText | `string / IconSchema` | | 关闭时开关显示的内容 | | trueValue | `boolean / string / number` | `true` | 标识真值 | | falseValue | `boolean / string / number` | `false` | 标识假值 | | size | `"sm" \| "md"` | `"md"` | 开关大小 | +| loading | `boolean` | `false` | 是否处于加载状态 | `3.6.0` | IconSchema 配置 | 属性名 | 类型 | 默认值 | 说明 | diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index c728149d5b6..7e3c3a61fcb 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1972,6 +1972,9 @@ --Switch-checked-bgColor: var(--switch-default-on-bg-color); --Switch-checked-onHover-bgColor: var(--switch-default-on-hover-bg-color); --Switch-checked-onActive-bgColor: var(--colors-brand-4); + --Switch-spinner-icon-width: var(--sizes-base-7); + --Switch-spinner-icon-width--sm: var(--sizes-base-5); + --switch-spinner-left--sm: var(--sizes-size-0); --collapse-default-top-border-color: var(--colors-neutral-line-8); --collapse-default-top-border-width: var(--borders-width-2); @@ -3292,7 +3295,6 @@ --spinner-size-size: var(--sizes-base-16); --spinner-lg-size: var(--sizes-base-24); --spinner-overlay-bg: var(--colors-neutral-fill-11); - --spinner-color: var(--colors-brand-5); --Spinner--lg-height: var(--spinner-lg-size); --Spinner--lg-width: var(--spinner-lg-size); @@ -3304,6 +3306,7 @@ --Spinner-overlay-bg: rgba(255, 255, 255, 0.4); --Spinner-width: var(--spinner-size-size); --Spinner-color: var(--spinner-base-color); + --Spinner-color--disabled: rgba(0, 0, 0, 0.65); // Image --image-image-normal-paddingTop: var(--sizes-size-3); diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss index 662cd894f0a..66c28f43c34 100644 --- a/packages/amis-ui/scss/components/_spinner.scss +++ b/packages/amis-ui/scss/components/_spinner.scss @@ -77,6 +77,15 @@ height: auto; } + &.#{$ns}Spinner-icon--disabled > svg.icon { + color: var(--Spinner-color--disabled); + fill: var(--Spinner-color--disabled); + + & path { + fill: var(--Spinner-color--disabled); + } + } + &--lg { width: var(--Spinner--lg-width); height: var(--Spinner--lg-height); diff --git a/packages/amis-ui/scss/components/form/_switch.scss b/packages/amis-ui/scss/components/form/_switch.scss index 116019b0ba5..d42d38273d4 100644 --- a/packages/amis-ui/scss/components/form/_switch.scss +++ b/packages/amis-ui/scss/components/form/_switch.scss @@ -153,6 +153,44 @@ border-radius: 10px; } } + + &-spinner { + position: absolute; + top: var(--Switch-slider-margin); + bottom: var(--Switch-slider-margin); + left: var(--Switch-slider-margin); + + & > &-icon > svg.icon { + width: var(--Switch-spinner-icon-width); + height: var(--Switch-spinner-icon-width); + } + + &--sm { + position: absolute; + top: var(--switch-size-sm-slider-margin); + bottom: var(--switch-size-sm-slider-margin); + left: var(--switch-spinner-left--sm); + + & > .#{$ns}Switch-spinner-icon > svg.icon { + width: var(--Switch-spinner-icon-width--sm); + height: var(--Switch-spinner-icon-width--sm); + } + } + + &.#{$ns}Switch-spinner--checked { + left: calc( + 100% - var(--Switch-slider-width) - var(--Switch-slider-margin) + ); + right: var(--Switch-slider-margin); + + &.#{$ns}Switch-spinner--sm { + left: calc( + 100% - var(--Switch-slider-width--sm) - var(--Switch-slider-margin) + ); + right: var(--Switch-slider-margin); + } + } + } } .#{$ns}Switch-option { diff --git a/packages/amis-ui/src/components/Spinner.tsx b/packages/amis-ui/src/components/Spinner.tsx index cfb325511f2..6d48183eb09 100644 --- a/packages/amis-ui/src/components/Spinner.tsx +++ b/packages/amis-ui/src/components/Spinner.tsx @@ -35,6 +35,8 @@ export interface SpinnerProps extends ThemeProps, SpinnerExtraProps { tipPlacement?: 'top' | 'right' | 'bottom' | 'left'; // spinner文案位置 delay?: number; // 延迟显示 overlay?: boolean; // 是否显示遮罩层，有children属性才生效 + /** 是否处于禁用状态 */ + disabled?: boolean; } export interface SpinnerExtraProps { @@ -114,7 +116,8 @@ export class Spinner extends React.Component< tipPlacement: 'bottom' as 'bottom', delay: 0, overlay: false, - loadingConfig: {} + loadingConfig: {}, + disabled: false }; state = { @@ -190,7 +193,8 @@ export class Spinner extends React.Component< icon: iconConfig, tip, tipPlacement = '', - loadingConfig + loadingConfig, + disabled } = this.props; // 定义了挂载位置时只能使用默认icon const icon = loadingConfig?.root ? undefined : iconConfig; @@ -241,9 +245,10 @@ export class Spinner extends React.Component< `Spinner-icon`, { [`Spinner-icon--${size}`]: ['lg', 'sm'].includes(size), - [`Spinner-icon--default`]: !icon, - [`Spinner-icon--simple`]: !isCustomIcon && icon, - [`Spinner-icon--custom`]: isCustomIcon + 'Spinner-icon--default': !icon, + 'Spinner-icon--simple': !isCustomIcon && icon, + 'Spinner-icon--custom': isCustomIcon, + 'Spinner-icon--disabled': disabled }, spinnerClassName )} diff --git a/packages/amis-ui/src/components/Switch.tsx b/packages/amis-ui/src/components/Switch.tsx index 0719ccc9bc2..bd452f7bc94 100644 --- a/packages/amis-ui/src/components/Switch.tsx +++ b/packages/amis-ui/src/components/Switch.tsx @@ -6,7 +6,7 @@ import React from 'react'; import {ClassNamesFn, themeable} from 'amis-core'; -import {classPrefix, classnames} from '../themes/default'; +import {Spinner} from './Spinner'; const sizeMap = { sm: 'Switch--sm', @@ -39,6 +39,11 @@ interface SwitchProps { onText?: React.ReactNode; offText?: React.ReactNode; checked?: boolean; + loading?: boolean; + loadingConfig?: { + root?: string; + show?: boolean; + }; } export class Switch extends React.PureComponent { @@ -80,6 +85,8 @@ export class Switch extends React.PureComponent { readOnly, checked, classnames: cx, + loading, + loadingConfig, ...rest } = this.props; @@ -94,27 +101,42 @@ export class Switch extends React.PureComponent { : typeof value === 'undefined' ? false : value == trueValue; + const isDisabled = disabled || loading; return ( ); } diff --git a/packages/amis-ui/src/components/formula/Input.tsx b/packages/amis-ui/src/components/formula/Input.tsx index f76c3a15918..07e36487da0 100644 --- a/packages/amis-ui/src/components/formula/Input.tsx +++ b/packages/amis-ui/src/components/formula/Input.tsx @@ -77,7 +77,7 @@ const FormulaInput: React.FC = props => { } = props; const schemaType = inputSettings.type; /** 自上层共享的属性 */ - const sharedProps = pick(props, ['disabeld', 'clearable']); + const sharedProps = pick(props, ['disabled', 'clearable']); const pipInValue = useCallback( (value?: any) => { return value; diff --git a/packages/amis/__tests__/renderers/Form/switch.test.tsx b/packages/amis/__tests__/renderers/Form/switch.test.tsx index 63acb66fc42..dc841a91017 100644 --- a/packages/amis/__tests__/renderers/Form/switch.test.tsx +++ b/packages/amis/__tests__/renderers/Form/switch.test.tsx @@ -71,3 +71,42 @@ describe('Renderer:Switch', () => { expect(container).toMatchSnapshot(); }); }); + +/** + * 默认状态为开启时 + * 默认状态为关闭时 + * 默认状态为禁用时 + */ +test('Renderer:Switch with loading status', async () => { + const {container} = render( + amisRender( + { + type: 'form', + body: [ + { + "type": "switch", + "name": "switch1", + "label": "", + "loading": true, + "value": true + }, + { + "type": "switch", + "name": "switch2", + "label": "", + "disabled": true, + "loading": true, + "value": false + } + ], + actions: [] + }, + {}, + makeEnv() + ) + ); + + const loadingDom = container.querySelectorAll('.cxd-Switch-spinner'); + + expect(loadingDom?.length).toEqual(2); +}); diff --git a/packages/amis/src/renderers/Form/Switch.tsx b/packages/amis/src/renderers/Form/Switch.tsx index 804fc53a62c..d1692774dc8 100644 --- a/packages/amis/src/renderers/Form/Switch.tsx +++ b/packages/amis/src/renderers/Form/Switch.tsx @@ -6,11 +6,13 @@ import { resolveEventData } from 'amis-core'; import {Icon, Switch} from 'amis-ui'; -import {createObject, autobind, isObject} from 'amis-core'; +import {autobind, isObject} from 'amis-core'; import {IconSchema} from '../Icon'; import {FormBaseControlSchema} from '../../Schema'; import {supportStatic} from './StaticHoc'; +import type {SpinnerExtraProps} from 'amis-ui'; + /** * Switch * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/switch @@ -49,13 +51,17 @@ export interface SwitchControlSchema extends FormBaseControlSchema { /** 开关尺寸 */ size?: 'sm' | 'md'; + + /** 是否处于加载状态 */ + loading?: boolean; } -export interface SwitchProps extends FormControlProps { +export interface SwitchProps extends FormControlProps, SpinnerExtraProps { option?: string; trueValue?: any; falseValue?: any; size?: 'sm'; + loading?: boolean; } export type SwitchRendererEvent = 'change'; @@ -129,7 +135,9 @@ export default class SwitchControl extends React.Component { trueValue, falseValue, onChange, - disabled + disabled, + loading, + loadingConfig } = this.props; const {on, off} = this.getResult(); @@ -147,6 +155,8 @@ export default class SwitchControl extends React.Component { disabled={disabled} onChange={this.handleChange} size={size as any} + loading={loading} + loadingConfig={loadingConfig} /> )}
From e3527b376ef095e6b7f9cdec6be10f265d4417a5 Mon Sep 17 00:00:00 2001 From: wanglinfang2014 Date: Wed, 22 Nov 2023 19:16:08 +0800 Subject: [PATCH 33/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=B1#8822?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E7=9A=84crud=E5=A4=9A=E9=80=89=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#8852)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: wanglinfang --- packages/amis-core/src/store/table.ts | 8 +------- packages/amis/__tests__/renderers/Table.test.tsx | 14 +++++++------- packages/amis/src/renderers/Table/index.tsx | 9 ++------- 3 files changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts index 3f166da67e4..89123a711b0 100644 --- a/packages/amis-core/src/store/table.ts +++ b/packages/amis-core/src/store/table.ts @@ -1050,13 +1050,7 @@ export const TableStore = iRendererStore ); } - if (config.multiple !== undefined) { - self.multiple = config.multiple; - } else { - // 如果通过crud或picker，multiple始终设置了true或false - // 如果仅使用table，默认multiple为true，但props未设置multiple的情况下其实是展示单选 - self.multiple = false; - } + config.multiple !== undefined && (self.multiple = config.multiple); config.footable !== undefined && (self.footable = config.footable); config.expandConfig !== undefined && (self.expandConfig = config.expandConfig); diff --git a/packages/amis/__tests__/renderers/Table.test.tsx b/packages/amis/__tests__/renderers/Table.test.tsx index 86d86def592..93054c7accc 100644 --- a/packages/amis/__tests__/renderers/Table.test.tsx +++ b/packages/amis/__tests__/renderers/Table.test.tsx @@ -958,26 +958,26 @@ describe('Renderer:table selectable & itemCheckableOn', () => { ] }; - test('radio style', async () => { + test('checkbox style', async () => { const {container} = render(amisRender(schema, {}, makeEnv({}))); await waitFor(() => { - expect(container.querySelector('[type=radio]')).toBeInTheDocument(); + expect(container.querySelector('[type=checkbox]')).toBeInTheDocument(); }); expect( - container.querySelector('[data-id="1"] [type=radio][disabled=""]')! + container.querySelector('[data-id="1"] [type=checkbox][disabled=""]')! ).toBeInTheDocument(); }); - test('checkbox style', async () => { - schema.multiple = true; + test('radio style', async () => { + schema.multiple = false; const {container} = render(amisRender(schema, {}, makeEnv({}))); await waitFor(() => { - expect(container.querySelector('[type=checkbox]')).toBeInTheDocument(); + expect(container.querySelector('[type=radio]')).toBeInTheDocument(); }); expect( - container.querySelector('[data-id="1"] [type=checkbox][disabled=""]')! + container.querySelector('[data-id="1"] [type=radio][disabled=""]')! ).toBeInTheDocument(); }); }); diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx index ab903cf76a4..614a75b2fcd 100644 --- a/packages/amis/src/renderers/Table/index.tsx +++ b/packages/amis/src/renderers/Table/index.tsx @@ -1760,8 +1760,6 @@ export default class Table extends React.Component { store, query, onQuery, - multiple, - env, render, classPrefix: ns, resizable, @@ -1805,7 +1803,7 @@ export default class Table extends React.Component { style={style} className={cx(column.pristine.className, stickyClassName)} > - {store.rows.length && multiple ? ( + {store.rows.length && store.multiple ? ( { const { render, store, - multiple, classPrefix: ns, classnames: cx, - checkOnItemClick, - popOverContainer, canAccessSuperData, itemBadge, translate @@ -2058,7 +2053,7 @@ export default class Table extends React.Component { ignoreDrag={ignoreDrag} render={render} store={store} - multiple={multiple} + multiple={store.multiple} canAccessSuperData={canAccessSuperData} classnames={cx} classPrefix={ns} From c74f6a4d857f6e232abf55364ff29a75a07bbd2c Mon Sep 17 00:00:00 2001 From: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Date: Wed, 22 Nov 2023 20:37:02 +0800 Subject: [PATCH 34/57] =?UTF-8?q?chore:inputTable=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=A1=8C=E5=86=85=E8=81=94=E5=8A=A8=E4=BE=8B=E5=AD=90=20(#8858?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/crud.md | 32 +++++----- docs/zh-CN/components/form/input-table.md | 72 +++++++++++++++++++++++ 2 files changed, 87 insertions(+), 17 deletions(-) diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md index 058cb3d8067..33958f4fef7 100755 --- a/docs/zh-CN/components/crud.md +++ b/docs/zh-CN/components/crud.md @@ -1074,7 +1074,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口， #### 下拉数据源 -过滤器的数据域支持API接口和上下文数据(`3.6.0`及以上版本) +过滤器的数据域支持 API 接口和上下文数据(`3.6.0`及以上版本) ```schema { @@ -3378,22 +3378,22 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据， 除了 Table 组件默认支持的列配置，CRUD 的列配置还额外支持以下属性： | 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ------------------ | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- | --- | +| ------------------ | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- | ---- | | sortable | `boolean` | `false` | 是否可排序 | | searchable | `boolean` \| `Schema` | `false` | 是否可快速搜索，开启`autoGenerateFilter`后，`searchable`支持配置`Schema` | | filterable | `boolean` \| [`QuickFilterConfig`](./crud.md#quickfilterconfig) | `false` | 是否可快速搜索，`options`属性为静态选项，支持设置`source`属性从接口获取选项 | | quickEdit | `boolean` \| [`QuickEditConfig`](./crud.md#quickeditconfig) | - | 快速编辑，一般需要配合`quickSaveApi`接口使用 | -| quickEditEnabledOn | `SchemaExpression` | - | 开启快速编辑条件[表达式](../../docs/concepts/expression) | | +| quickEditEnabledOn | `SchemaExpression` | - | 开启快速编辑条件[表达式](../../docs/concepts/expression) | | #### QuickFilterConfig -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ------------- | ----------------------------- | ------- | -------------------------------------------------------- | ------- | -| options | `Array` | - | 静态选项 | | -| multiple | `boolean` | `false` | 是否支持多选 | | -| source | [`Api`](../../docs/types/api) \| `string` | - | 选项 API 接口 | `3.6.0`版本后支持上下文变量 | -| refreshOnOpen | `boolean` | `false` | 配置 source 前提下，每次展开筛选浮层是否重新加载选项数据 | `2.9.0` | -| strictMode | `boolean` | `false` | 严格模式，开启严格模式后，会采用 JavaScript 严格相等比较 | `2.3.0` | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ------------- | ----------------------------------------- | ------- | -------------------------------------------------------- | --------------------------- | +| options | `Array` | - | 静态选项 | | +| multiple | `boolean` | `false` | 是否支持多选 | | +| source | [`Api`](../../docs/types/api) \| `string` | - | 选项 API 接口 | `3.6.0`版本后支持上下文变量 | +| refreshOnOpen | `boolean` | `false` | 配置 source 前提下，每次展开筛选浮层是否重新加载选项数据 | `2.9.0` | +| strictMode | `boolean` | `false` | 严格模式，开启严格模式后，会采用 JavaScript 严格相等比较 | `2.3.0` | #### QuickEditConfig @@ -4948,7 +4948,7 @@ value 结构说明： #### 行记录中字段赋值 -需要通过表达式配置动态`name`或`id`和`componentName`或`componentId`。例如修改`engine`选中状态的同时选中`version`，勾选`id`的同时去掉对`engine`的选中。 +需要通过表达式配置动态`id`和`componentId`。例如修改`engine`选中状态的同时选中`version`，勾选`id`的同时去掉对`engine`的选中。 ```schema: scope="body" { @@ -4960,13 +4960,12 @@ value 结构说明： { "name": "id", "label": "ID", - "id": "u:3db3f2b1b99e", "onEvent": { "click": { "actions": [ { "actionType": "setValue", - "componentId": "u:4868d7db0139_${index}", + "componentId": "version_${index}", "args": { "value": false } @@ -4981,13 +4980,12 @@ value 结构说明： "label": "engine", "quickEdit": true, "quickEditEnabledOn": "this.id < 5", - "id": "u:0b9be99f3403", "onEvent": { "change": { "actions": [ { "actionType": "setValue", - "componentName": "version_${index}", + "componentId": "version_${index}", "args": { "value": true } @@ -4997,12 +4995,12 @@ value 结构说明： } }, { - "name": "version_${index}", + "name": "version", "type": "checkbox", "label": "version", "quickEdit": true, "quickEditEnabledOn": "this.id < 5", - "id": "u:4868d7db0139_${index}" + "id": "version_${index}" } ], "id": "u:f5bad706d7c5" diff --git a/docs/zh-CN/components/form/input-table.md b/docs/zh-CN/components/form/input-table.md index 581fd92b807..d7e14e2a05f 100755 --- a/docs/zh-CN/components/form/input-table.md +++ b/docs/zh-CN/components/form/input-table.md @@ -1901,6 +1901,7 @@ order: 54 { "type": "button", "label": "新增一行（未指定添加位置）", + "className": "mr-2", "onEvent": { "click": { "actions": [ @@ -1985,6 +1986,7 @@ order: 54 { "type": "button", "label": "删除行（指定行号）", + "className": "mr-2", "onEvent": { "click": { "actions": [ @@ -2184,6 +2186,7 @@ order: 54 { "type": "button", "label": "更新index为1和3的行记录", + "className": "mr-2", "onEvent": { "click": { "actions": [ @@ -2205,6 +2208,7 @@ order: 54 { "type": "button", "label": "更新a=a3的行记录", + "className": "mr-2", "onEvent": { "click": { "actions": [ @@ -2315,6 +2319,74 @@ order: 54 } ``` +#### 行记录内表单项联动 + +需要通过表达式配置动态 `id` 和 `componentId`。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "body": [ + { + "type": "input-table", + "label": "表格表单", + "id": "setValue-input-table", + "name": "table", + "columns": [ + { + "type": "input-number", + "name": "num1", + "label": "数量", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "setValue", + "componentId": "num2_${index}", + "args": { + "value": "${num1 * 10}" + } + } + ] + } + } + }, + { + "name": "num2", + "id": "num2_${index}", + "label": "金额" + } + ], + "addable": true, + "footerAddBtn": { + "label": "新增", + "icon": "fa fa-plus", + "hidden": true + }, + "strictMode": true, + "minLength": 0, + "needConfirm": false, + "showTableAddBtn": false + } + ], + "data": { + "table": [ + { + "id": 1, + "num1": 1, + "num2": "10" + }, + { + "id": 2, + "num1": "2", + "num2": 20 + } + ] + } +} +``` + ### clear ```schema: scope="body" From ea4967c66b3220b2f263f5d00422d3f8377a1fa6 Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Wed, 22 Nov 2023 21:08:27 +0800 Subject: [PATCH 35/57] =?UTF-8?q?docs:=20=E4=BF=AE=E6=AD=A3CRUD2=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E5=BD=A2=E6=80=81=E7=9A=84=E6=96=87=E6=A1=A3=E9=93=BE?= =?UTF-8?q?=E6=8E=A5=20(#8854)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor/src/plugin/CRUD2/CRUDCards.tsx | 2 +- packages/amis-editor/src/plugin/CRUD2/CRUDList.tsx | 2 +- packages/amis-editor/src/plugin/CRUD2/CRUDTable.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/amis-editor/src/plugin/CRUD2/CRUDCards.tsx b/packages/amis-editor/src/plugin/CRUD2/CRUDCards.tsx index 49902ab10ec..ddf56fcfdaf 100644 --- a/packages/amis-editor/src/plugin/CRUD2/CRUDCards.tsx +++ b/packages/amis-editor/src/plugin/CRUD2/CRUDCards.tsx @@ -45,7 +45,7 @@ export class CRUDCardsPlugin extends BaseCRUDPlugin { $schema = '/schemas/CRUD2CardsSchema.json'; - docLink = '/amis/zh-CN/components/crud2'; + docLink = '/amis/zh-CN/components/cards'; previewSchema: Record = this.generatePreviewSchema('cards'); diff --git a/packages/amis-editor/src/plugin/CRUD2/CRUDList.tsx b/packages/amis-editor/src/plugin/CRUD2/CRUDList.tsx index 0b2c19679cf..d6da3111704 100644 --- a/packages/amis-editor/src/plugin/CRUD2/CRUDList.tsx +++ b/packages/amis-editor/src/plugin/CRUD2/CRUDList.tsx @@ -45,7 +45,7 @@ export class CRUDListPlugin extends BaseCRUDPlugin { $schema = '/schemas/CRUD2ListSchema.json'; - docLink = '/amis/zh-CN/components/crud2'; + docLink = '/amis/zh-CN/components/list'; previewSchema: Record = this.generatePreviewSchema('list'); diff --git a/packages/amis-editor/src/plugin/CRUD2/CRUDTable.tsx b/packages/amis-editor/src/plugin/CRUD2/CRUDTable.tsx index 7167458bc92..54ed6a179a9 100644 --- a/packages/amis-editor/src/plugin/CRUD2/CRUDTable.tsx +++ b/packages/amis-editor/src/plugin/CRUD2/CRUDTable.tsx @@ -38,7 +38,7 @@ export class CRUDTablePlugin extends BaseCRUDPlugin { $schema = '/schemas/CRUD2TableSchema.json'; - docLink = '/amis/zh-CN/components/crud2'; + docLink = '/amis/zh-CN/components/table2'; previewSchema: Record = this.generatePreviewSchema('table2'); From 85512d807b34b1b82fcc4f31b68e1137a6d45129 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 10:06:28 +0800 Subject: [PATCH 36/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E4=B8=AD=20className=20=E4=BD=BF=E7=94=A8=E8=A1=A8?= =?UTF-8?q?=E8=BE=BE=E5=BC=8F=E6=97=A0=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/WithStore.tsx | 40 +++++++++++++------ packages/amis-core/src/utils/filter-schema.ts | 18 ++++++++- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/amis-core/src/WithStore.tsx b/packages/amis-core/src/WithStore.tsx index 6c9a0d4b96d..d711ad2fca7 100644 --- a/packages/amis-core/src/WithStore.tsx +++ b/packages/amis-core/src/WithStore.tsx @@ -6,7 +6,9 @@ import React from 'react'; import {RendererProps} from './factory'; import {IIRendererStore, IRendererStore} from './store'; import {RendererData, SchemaNode} from './types'; -import getExprProperties from './utils/filter-schema'; +import getExprProperties, { + hasExprPropertiesChanged +} from './utils/filter-schema'; import { createObject, extendObject, @@ -127,26 +129,19 @@ export function HocStoreFactory(renderer: { this.state = {}; const {detectField, ...rest} = props; let exprProps: any = {}; + if (!detectField || detectField === 'data') { - exprProps = getExprProperties(rest, store.data, undefined, rest); + exprProps = getExprProperties(rest, store.data); this.state = { ...exprProps }; this.unReaction = reaction( - () => - JSON.stringify( - getExprProperties(this.props, store.data, undefined, this.props) - ), + () => JSON.stringify(getExprProperties(this.props, store.data)), () => this.setState({ - ...getExprProperties( - this.props, - store.data, - undefined, - this.props - ) + ...getExprProperties(this.props, store.data) }) ); } @@ -173,6 +168,27 @@ export function HocStoreFactory(renderer: { componentDidUpdate(prevProps: Props) { const props = this.props; const store = this.store; + + // dialog 场景下 schema 是显示的时候更新的， + // 所以 schema 里面有表达式属性其实是监听不到变化的 + // 所以这里需要根据新属性重新 reaction 一下 + if ( + (!props.detectField || props.detectField === 'data') && + hasExprPropertiesChanged(this.props, prevProps) + ) { + const state = getExprProperties(this.props, store.data); + isObjectShallowModified(state, this.state) && this.setState(state); + // 需要重新监听 + this.unReaction?.(); + this.unReaction = reaction( + () => JSON.stringify(getExprProperties(props, store.data)), + () => + this.setState({ + ...getExprProperties(this.props, store.data) + }) + ); + } + const shouldSync = renderer.shouldSyncSuperStore?.( store, props, diff --git a/packages/amis-core/src/utils/filter-schema.ts b/packages/amis-core/src/utils/filter-schema.ts index 32c078996d1..df7c9c8c032 100644 --- a/packages/amis-core/src/utils/filter-schema.ts +++ b/packages/amis-core/src/utils/filter-schema.ts @@ -45,14 +45,14 @@ export function filterClassNameObject( export function getExprProperties( schema: PlainObject, data: object = {}, - blackList: Array = ['addOn', 'ref'], + ignoreList: Array = ['addOn', 'ref'], props?: any ): PlainObject { const exprProps: PlainObject = {}; let ctx: any = null; Object.getOwnPropertyNames(schema).forEach(key => { - if (blackList && ~blackList.indexOf(key)) { + if (ignoreList && ~ignoreList.indexOf(key)) { return; } @@ -102,4 +102,18 @@ export function getExprProperties( return exprProps; } +export function hasExprPropertiesChanged( + schema: PlainObject, + prevSchema: PlainObject +) { + return Object.getOwnPropertyNames(schema).some(key => { + let parts = /^(.*)(On|Expr|(?:c|C)lassName)(Raw)?$/.exec(key); + if (parts) { + return schema[key] !== prevSchema[key]; + } + + return false; + }); +} + export default getExprProperties; From d2c883f504613d861bd9eb548147458f66d6c5f5 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Wed, 22 Nov 2023 21:04:03 +0800 Subject: [PATCH 37/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20quickEditor?= =?UTF-8?q?=20=E9=80=9A=E4=BF=A1=E6=89=BE=E4=B8=8D=E5=88=B0=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98(=E7=94=B1=20#8206=20=E5=BC=95=E5=8F=91?= =?UTF-8?q?=E4=BC=98=E5=85=88=E7=BA=A7=E4=B9=B1=E4=BA=86)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis/__tests__/renderers/Table.test.tsx | 3 +-- packages/amis/src/renderers/QuickEdit.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/amis/__tests__/renderers/Table.test.tsx b/packages/amis/__tests__/renderers/Table.test.tsx index 86d86def592..d6856e78b07 100644 --- a/packages/amis/__tests__/renderers/Table.test.tsx +++ b/packages/amis/__tests__/renderers/Table.test.tsx @@ -1197,8 +1197,7 @@ test('Renderer:table-column-quickEdit-inline', async () => { type: 'switch', quickEdit: { type: 'switch', - mode: 'inline', - id: 'u:4201a414cde3' + mode: 'inline' } }, { diff --git a/packages/amis/src/renderers/QuickEdit.tsx b/packages/amis/src/renderers/QuickEdit.tsx index b388006c574..29ac8d6ec2e 100644 --- a/packages/amis/src/renderers/QuickEdit.tsx +++ b/packages/amis/src/renderers/QuickEdit.tsx @@ -448,8 +448,8 @@ export const HocQuickEdit = { type: quickEdit.type || 'input-text', name: quickEdit.name || name, - ...quickEdit, ...(isline ? {id: id} : {}), + ...quickEdit, mode: undefined } ] From bac12a2e5f8553826c9bc9733f1bc667b24bed9c Mon Sep 17 00:00:00 2001 From: lurunze1226 Date: Thu, 23 Nov 2023 11:09:15 +0800 Subject: [PATCH 38/57] =?UTF-8?q?feat:=20CRUD=E7=BB=84=E4=BB=B6matchFunc?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BD=BF=E7=94=A8matchSorter=E5=87=BD?= =?UTF-8?q?=E6=95=B0;=20docs:=20=E5=89=8D=E7=AB=AF=E5=88=86=E9=A1=B5?= =?UTF-8?q?=E7=9A=84=E4=BD=BF=E7=94=A8=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/crud.md | 505 +++++++++--------- examples/components/CRUD/MatchFunc.jsx | 2 + packages/amis-core/src/store/crud.ts | 25 +- packages/amis-editor/src/plugin/CRUD.tsx | 35 +- .../src/renderer/APIAdaptorControl.tsx | 2 +- 5 files changed, 314 insertions(+), 255 deletions(-) diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md index 33958f4fef7..72e877884c7 100755 --- a/docs/zh-CN/components/crud.md +++ b/docs/zh-CN/components/crud.md @@ -1600,7 +1600,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在 分页有两种模式： -##### 1. 知道数据总数 +**1. 知道数据总数** 如果后端可以知道数据总数时，接口返回格式如下： @@ -1624,7 +1624,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在 该模式下，会自动计算总页码数，渲染出有页码的分页组件 -##### 2. 不知道数据总数 +**2. 不知道数据总数** 如果后端无法知道数据总数，那么可以返回`hasNext`字段，来标识是否有下一页。 @@ -1650,6 +1650,261 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在 > 如果总数据只够展示一页，则默认不显示该分页组件 +#### 前端分页 + +如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作。 + + + +```schema: scope="body" +{ + "type": "crud", + "syncLocation": false, + "api": "/api/mock2/sample", + "loadDataOnce": true, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade", + "sortable": true + } + ] +} +``` + +配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索(目前是模糊搜索)，可以在 table 的 `columns` 对应项配置 `searchable` 来实现。 + +```schema: scope="body" +{ + "type": "crud", + "syncLocation": false, + "api": "/api/mock2/sample", + "loadDataOnce": true, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version", + "searchable": { + "type": "select", + "name": "version", + "label": "Engine version", + "clearable": true, + "multiple": true, + "searchable": true, + "checkAll": true, + "options": ["1.7", "3.3", "5.6"], + "maxTagCount": 10, + "extractValue": true, + "joinValues": false, + "delimiter": ',', + "defaultCheckAll": false, + "checkAllLabel": "全选" + } + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能 + +另外前端一次性加载当有查寻条件的时候，默认还是会重新请求一次，如果配置 `loadDataOnceFetchOnFilter` 为 `false` 则为前端过滤。 + +```schema: scope="body" +{ + "type": "crud", + "syncLocation": false, + "api": "/api/mock2/sample", + "loadDataOnce": true, + "loadDataOnceFetchOnFilter": false, + "autoGenerateFilter": true, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version", + "searchable": { + "type": "select", + "name": "version", + "label": "Engine version", + "clearable": true, + "multiple": true, + "searchable": true, + "checkAll": true, + "options": [ + "1.7", + "3.3", + "5.6" + ], + "maxTagCount": 10, + "extractValue": true, + "joinValues": false, + "delimiter": ",", + "defaultCheckAll": false, + "checkAllLabel": "全选" + } + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +`loadDataOnceFetchOnFilter` 配置成 `true` 则会强制重新请求接口比如以下用法 + +> 此时如果不配置或者配置为 `false` 是前端直接过滤，不过记得配置 name 为行数据中的属性，如果行数据中没有对应属性则不会起作用 + +```schema: scope="body" +{ + "type": "crud", + "syncLocation": false, + "api": "/api/mock2/sample", + "loadDataOnce": true, + "loadDataOnceFetchOnFilter": true, + "headerToolbar": [ + { + "type": "search-box", + "name": "keywords" + } + ], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version", + "searchable": { + "type": "select", + "name": "version", + "label": "Engine version", + "clearable": true, + "multiple": true, + "searchable": true, + "checkAll": true, + "options": [ + "1.7", + "3.3", + "5.6" + ], + "maxTagCount": 10, + "extractValue": true, + "joinValues": false, + "delimiter": ",", + "defaultCheckAll": false, + "checkAllLabel": "全选" + } + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +##### 匹配函数 + +> `3.5.0` 及以上版本 + +支持自定义匹配函数`matchFunc`，当开启`loadDataOnce`时，会基于该函数计算的匹配结果进行过滤，主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景，函数签名如下： + +```typescript +interface CRUDMatchFunc { + ( + /* 当前列表的全量数据 */ + items: any, + /* 最近一次接口返回的全量数据 */ + itemsRaw: any, + /** 相关配置 */ + options?: { + /* 查询参数 */ + query: Record; + /* 列配置 */ + columns: any; + /** match-sorter 匹配函数 */ + matchSorter: (items: any[], value: string, options?: MatchSorterOptions) => any[] + } + ): boolean; +} +``` + +具体效果请参考[示例](../../../examples/crud/match-func)，从`3.6.0`版本开始，`options`中支持使用`matchSorter`函数处理复杂的过滤场景，比如前缀匹配、模糊匹配等，更多详细内容推荐查看[match-sorter](https://github.com/kentcdodds/match-sorter)。 + ### 批量操作 在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。 @@ -2928,252 +3183,6 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一 `syncLocation`开启后，数据域经过地址栏同步后，原始值被转化为字符串同步回数据域，但布尔值（boolean）同步后不符合预期数据结构，导致组件渲染出错。比如查询条件表单中包含[Checkbox](./form/checkbox)组件，此时可以设置`{"trueValue": "1", "falseValue": "0"}`，将真值和假值设置为字符串格式规避。从`3.5.0`版本开始，已经支持[`parsePrimitiveQuery`](#解析query原始类型)，该配置默认开启。 -## 前端一次性加载 - -如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作。 - -```schema: scope="body" -{ - "type": "crud", - "syncLocation": false, - "api": "/api/mock2/sample", - "loadDataOnce": true, - "columns": [ - { - "name": "id", - "label": "ID" - }, - { - "name": "engine", - "label": "Rendering engine" - }, - { - "name": "browser", - "label": "Browser" - }, - { - "name": "platform", - "label": "Platform(s)" - }, - { - "name": "version", - "label": "Engine version" - }, - { - "name": "grade", - "label": "CSS grade", - "sortable": true - } - ] -} -``` - -配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索(目前是模糊搜索)，可以在 table 的 `columns` 对应项配置 `searchable` 来实现。 - -```schema: scope="body" -{ - "type": "crud", - "syncLocation": false, - "api": "/api/mock2/sample", - "loadDataOnce": true, - "columns": [ - { - "name": "id", - "label": "ID" - }, - { - "name": "engine", - "label": "Rendering engine" - }, - { - "name": "browser", - "label": "Browser" - }, - { - "name": "platform", - "label": "Platform(s)" - }, - { - "name": "version", - "label": "Engine version", - "searchable": { - "type": "select", - "name": "version", - "label": "Engine version", - "clearable": true, - "multiple": true, - "searchable": true, - "checkAll": true, - "options": ["1.7", "3.3", "5.6"], - "maxTagCount": 10, - "extractValue": true, - "joinValues": false, - "delimiter": ',', - "defaultCheckAll": false, - "checkAllLabel": "全选" - } - }, - { - "name": "grade", - "label": "CSS grade" - } - ] -} -``` - -> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能 - -另外前端一次性加载当有查寻条件的时候，默认还是会重新请求一次，如果配置 `loadDataOnceFetchOnFilter` 为 `false` 则为前端过滤。 - -```schema: scope="body" -{ - "type": "crud", - "syncLocation": false, - "api": "/api/mock2/sample", - "loadDataOnce": true, - "loadDataOnceFetchOnFilter": false, - "autoGenerateFilter": true, - "columns": [ - { - "name": "id", - "label": "ID" - }, - { - "name": "engine", - "label": "Rendering engine" - }, - { - "name": "browser", - "label": "Browser" - }, - { - "name": "platform", - "label": "Platform(s)" - }, - { - "name": "version", - "label": "Engine version", - "searchable": { - "type": "select", - "name": "version", - "label": "Engine version", - "clearable": true, - "multiple": true, - "searchable": true, - "checkAll": true, - "options": [ - "1.7", - "3.3", - "5.6" - ], - "maxTagCount": 10, - "extractValue": true, - "joinValues": false, - "delimiter": ",", - "defaultCheckAll": false, - "checkAllLabel": "全选" - } - }, - { - "name": "grade", - "label": "CSS grade" - } - ] -} -``` - -`loadDataOnceFetchOnFilter` 配置成 `true` 则会强制重新请求接口比如以下用法 - -> 此时如果不配置或者配置为 `false` 是前端直接过滤，不过记得配置 name 为行数据中的属性，如果行数据中没有对应属性则不会起作用 - -```schema: scope="body" -{ - "type": "crud", - "syncLocation": false, - "api": "/api/mock2/sample", - "loadDataOnce": true, - "loadDataOnceFetchOnFilter": true, - "headerToolbar": [ - { - "type": "search-box", - "name": "keywords" - } - ], - "columns": [ - { - "name": "id", - "label": "ID" - }, - { - "name": "engine", - "label": "Rendering engine" - }, - { - "name": "browser", - "label": "Browser" - }, - { - "name": "platform", - "label": "Platform(s)" - }, - { - "name": "version", - "label": "Engine version", - "searchable": { - "type": "select", - "name": "version", - "label": "Engine version", - "clearable": true, - "multiple": true, - "searchable": true, - "checkAll": true, - "options": [ - "1.7", - "3.3", - "5.6" - ], - "maxTagCount": 10, - "extractValue": true, - "joinValues": false, - "delimiter": ",", - "defaultCheckAll": false, - "checkAllLabel": "全选" - } - }, - { - "name": "grade", - "label": "CSS grade" - } - ] -} -``` - -### 匹配函数 - -> `3.5.0` 及以上版本 - -支持自定义匹配函数`matchFunc`，当开启`loadDataOnce`时，会基于该函数计算的匹配结果进行过滤，主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景，函数签名如下： - -```typescript -interface CRUDMatchFunc { - ( - /* 当前列表的全量数据 */ - items: any, - /* 最近一次接口返回的全量数据 */ - itemsRaw: any, - /** 相关配置 */ - options?: { - /* 查询参数 */ - query: Record; - /* 列配置 */ - columns: any; - } - ): boolean; -} -``` - -具体效果请参考[示例](../../../examples/crud/match-func)。 - ## 动态列 > since 1.1.6 diff --git a/examples/components/CRUD/MatchFunc.jsx b/examples/components/CRUD/MatchFunc.jsx index 279cfcc4aa2..46c8867cca5 100644 --- a/examples/components/CRUD/MatchFunc.jsx +++ b/examples/components/CRUD/MatchFunc.jsx @@ -32,6 +32,8 @@ export default { query: Record, /* 列配置 */ columns: any; + /** match-sorter 匹配函数 */ + matchSorter: (items: any[], value: string, options?: MatchSorterOptions) => any[] } ): boolean; }` diff --git a/packages/amis-core/src/store/crud.ts b/packages/amis-core/src/store/crud.ts index cc6ec863131..5bc78ca343e 100644 --- a/packages/amis-core/src/store/crud.ts +++ b/packages/amis-core/src/store/crud.ts @@ -18,6 +18,8 @@ import {normalizeApiResponseData} from '../utils/api'; import {matchSorter} from 'match-sorter'; import {filter} from '../utils/tpl'; +import type {MatchSorterOptions} from 'match-sorter'; + interface MatchFunc { ( /* 当前列表的全量数据 */ @@ -30,6 +32,15 @@ interface MatchFunc { query: Record; /* 列配置 */ columns: any; + /** + * match-sorter 匹配函数 + * @doc https://github.com/kentcdodds/match-sorter + */ + matchSorter: ( + items: any[], + value: string, + options?: MatchSorterOptions + ) => any[]; } ): any; } @@ -223,7 +234,8 @@ export const CRUDStore = ServiceStore.named('CRUDStore') if (matchFunc && typeof matchFunc === 'function') { items = matchFunc(items, self.data.itemsRaw, { query: self.query, - columns: options.columns + columns: options.columns, + matchSorter: matchSorter }); } else { if (Array.isArray(options.columns)) { @@ -395,8 +407,11 @@ export const CRUDStore = ServiceStore.named('CRUDStore') }; if (options.loadDataOnce) { - // 记录原始集合，后续可能基于原始数据做排序查找。 - data.itemsRaw = oItems || oRows; + /** + * 1. 记录原始集合，后续可能基于原始数据做排序查找。 + * 2. 接口返回中没有 items 和 rows 字段，则直接用查到的数据。 + */ + data.itemsRaw = oItems || oRows || rowsData.concat(); let filteredItems = rowsData.concat(); if (Array.isArray(options.columns)) { @@ -656,7 +671,8 @@ export const CRUDStore = ServiceStore.named('CRUDStore') if (matchFunc && typeof matchFunc === 'function') { items = matchFunc(items, items.concat(), { query: self.query, - columns: options.columns + columns: options.columns, + matchSorter: matchSorter }); } else { if (Array.isArray(options.columns)) { @@ -673,6 +689,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore') if (value.length > 0) { const arr = [...items]; let arrItems: Array = []; + /** 搜索 query 值为数组的情况 */ value.forEach(item => { arrItems = [ ...arrItems, diff --git a/packages/amis-editor/src/plugin/CRUD.tsx b/packages/amis-editor/src/plugin/CRUD.tsx index dc0bbc7c513..a6f50b36325 100644 --- a/packages/amis-editor/src/plugin/CRUD.tsx +++ b/packages/amis-editor/src/plugin/CRUD.tsx @@ -1,9 +1,8 @@ import {toast, normalizeApiResponseData} from 'amis'; -import get from 'lodash/get'; import cloneDeep from 'lodash/cloneDeep'; import React from 'react'; import {getEventControlConfig} from '../renderer/event-control/helper'; - +import {genCodeSchema} from '../renderer/APIAdaptorControl'; import { getI18nEnabled, jsonToJsonSchema, @@ -1210,6 +1209,38 @@ export class CRUDPlugin extends BasePlugin { } }), + { + name: 'matchFunc', + type: 'ae-functionEditorControl', + allowFullscreen: true, + mode: 'normal', + label: tipedLabel( + '搜索匹配函数', + '自定义搜索匹配函数，当开启loadDataOnce时，会基于该函数计算的匹配结果进行过滤，主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景。matchSorter函数用于处理复杂的过滤场景，比如模糊匹配等，更多详细内容推荐查看match-sorter。' + ), + renderLabel: true, + params: [ + { + label: 'items', + tip: genCodeSchema('/* 当前列表的全量数据 */\nitems: any[]') + }, + { + label: 'itemsRaw', + tip: genCodeSchema( + '/* 最近一次接口返回的全量数据 */\nitemsRaw: any[]' + ) + }, + { + label: 'options', + tip: genCodeSchema( + '/* 额外的配置 */\noptions?: {\n /* 查询参数 */\n query: Record < string, any>;\n /* 列配置 */\n columns: any;\n /** match-sorter 匹配函数 */\n matchSorter: (items: any[], value: string, options?: MatchSorterOptions) => any[]\n}' + ) + } + ], + placeholder: `return items;`, + visibleOn: '${loadDataOnce === true}' + }, + getSchemaTpl('switch', { label: '开启定时刷新', name: 'interval', diff --git a/packages/amis-editor/src/renderer/APIAdaptorControl.tsx b/packages/amis-editor/src/renderer/APIAdaptorControl.tsx index d7d23478df6..993268a34be 100644 --- a/packages/amis-editor/src/renderer/APIAdaptorControl.tsx +++ b/packages/amis-editor/src/renderer/APIAdaptorControl.tsx @@ -197,7 +197,7 @@ export class APIAdaptorControlRenderer extends APIAdaptorControl {} * @param size 渲染区域的width, height, 代码区域是异步渲染，tooltip时计算会偏移 * @returns */ -const genCodeSchema = (code: string, size?: string[]) => ({ +export const genCodeSchema = (code: string, size?: string[]) => ({ type: 'container', ...(!size ? {} From 1e43e25b9a0fd02f00a57633025b773c625fcbbe Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 12:38:03 +0800 Subject: [PATCH 39/57] =?UTF-8?q?chore:=20=E5=BC=B9=E7=AA=97=E4=B8=AD?= =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E8=A1=A8=E5=8D=95=E9=94=99=E8=AF=AF=203s=20?= =?UTF-8?q?=E5=90=8E=E8=87=AA=E5=8A=A8=E6=B6=88=E5=A4=B1=E4=BB=A5=E5=85=8D?= =?UTF-8?q?=E8=AF=AF=E4=BC=9A=20Close:=20#1636=20(#8849)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis/src/renderers/Dialog.tsx | 15 ++++++++++++++- packages/amis/src/renderers/Drawer.tsx | 12 +++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/amis/src/renderers/Dialog.tsx b/packages/amis/src/renderers/Dialog.tsx index 384ee45e153..26c0b9e0a45 100644 --- a/packages/amis/src/renderers/Dialog.tsx +++ b/packages/amis/src/renderers/Dialog.tsx @@ -6,7 +6,8 @@ import { isPureVariable, resolveVariableAndFilter, setVariable, - setThemeClassName + setThemeClassName, + ValidateError } from 'amis-core'; import {Renderer, RendererProps} from 'amis-core'; import {SchemaNode, Schema, ActionObject} from 'amis-core'; @@ -805,6 +806,7 @@ export default class Dialog extends React.Component { }) export class DialogRenderer extends Dialog { static contextType = ScopedContext; + clearErrorTimer: ReturnType; constructor(props: DialogProps, context: IScopedContext) { super(props); @@ -817,6 +819,7 @@ export class DialogRenderer extends Dialog { const scoped = this.context as IScopedContext; scoped.unRegisterComponent(this); super.componentWillUnmount(); + clearTimeout(this.clearErrorTimer); } tryChildrenToHandle( @@ -897,6 +900,16 @@ export class DialogRenderer extends Dialog { } store.updateMessage(reason.message, true); store.markBusying(false); + + if (reason.constructor?.name === ValidateError.name) { + clearTimeout(this.clearErrorTimer); + this.clearErrorTimer = setTimeout(() => { + if (this.isDead) { + return; + } + store.updateMessage(''); + }, 3000); + } }); return true; diff --git a/packages/amis/src/renderers/Drawer.tsx b/packages/amis/src/renderers/Drawer.tsx index 01b39e495a8..4075d12ec12 100644 --- a/packages/amis/src/renderers/Drawer.tsx +++ b/packages/amis/src/renderers/Drawer.tsx @@ -5,7 +5,8 @@ import { filterTarget, isPureVariable, resolveVariableAndFilter, - setThemeClassName + setThemeClassName, + ValidateError } from 'amis-core'; import {Renderer, RendererProps} from 'amis-core'; import {SchemaNode, Schema, ActionObject} from 'amis-core'; @@ -214,6 +215,7 @@ export default class Drawer extends React.Component { reaction: any; $$id: string = guid(); drawer: any; + clearErrorTimer: ReturnType | undefined; constructor(props: DrawerProps) { super(props); @@ -251,6 +253,7 @@ export default class Drawer extends React.Component { componentWillUnmount() { this.reaction && this.reaction(); + clearTimeout(this.clearErrorTimer); } buildActions(): Array { @@ -850,6 +853,13 @@ export class DrawerRenderer extends Drawer { .catch(reason => { store.updateMessage(reason.message, true); store.markBusying(false); + + if (reason.constructor?.name === ValidateError.name) { + clearTimeout(this.clearErrorTimer); + this.clearErrorTimer = setTimeout(() => { + store.updateMessage(''); + }, 3000); + } }); return true; From 1e180df2f650560a8e611e4a84af1c017443d00b Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 15:10:06 +0800 Subject: [PATCH 40/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20jssdk=20?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E9=80=9A=E8=BF=87=20embed=20=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E7=9A=84=20scoped=20=E8=8E=B7=E5=8F=96=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=A4=B1=E8=B4=A5=E7=9A=84=E9=97=AE=E9=A2=98=20Close:?= =?UTF-8?q?=20#8864?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/embed.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/embed.tsx b/examples/embed.tsx index a42cc915733..3ff323418a6 100644 --- a/examples/embed.tsx +++ b/examples/embed.tsx @@ -259,7 +259,13 @@ export function embed( ...props, scopeRef: (ref: any) => { if (ref) { - Object.assign(scoped, ref); + Object.keys(ref).forEach(key => { + let value = ref[key]; + if (typeof value === 'function') { + value = value.bind(ref); + } + (scoped as any)[key] = value; + }); callback?.(); } } From 15788a936dfd95d6eccaa32fa2c6d0d69b9d3867 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 19:11:19 +0800 Subject: [PATCH 41/57] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=20crud=20colum?= =?UTF-8?q?n=20=E7=9A=84=20seachable=20=E8=AF=B4=E6=98=8E=E7=BB=93?= =?UTF-8?q?=E5=90=88=20defaultParams=20=E5=8F=AF=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=8E=92=E5=BA=8F=20(#8870)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/crud.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md index 33958f4fef7..1887dff0dd1 100755 --- a/docs/zh-CN/components/crud.md +++ b/docs/zh-CN/components/crud.md @@ -958,11 +958,17 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。 可以在列上配置`"sortable": true`，该列表头右侧会渲染一个可点击的排序图标，可以切换`正序`和`倒序`。 +> 如果想默认就基于某个字段排序，可以结合 `defaultParams` 一起配置。 + ```schema: scope="body" { "type": "crud", "syncLocation": false, "api": "/api/mock2/sample", + "defaultParams": { + "orderBy": "engine", + "orderDir": "desc" + }, "columns": [ { "name": "id", From 819d4ae6ed8eabb1a2b494ad8518fa793232f262 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Thu, 23 Nov 2023 19:13:29 +0800 Subject: [PATCH 42/57] =?UTF-8?q?chore:=20attachement=20=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=90=8D=E7=A9=BA=E6=A0=BC=E8=BD=AC=E4=B9=89?= =?UTF-8?q?=E6=88=90=20+=20=E5=8F=B7=E7=9A=84=E6=83=85=E5=86=B5=20Closes?= =?UTF-8?q?=20#8488=20(#8846)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/utils/attachmentAdpator.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/amis-core/src/utils/attachmentAdpator.ts b/packages/amis-core/src/utils/attachmentAdpator.ts index 3f1b6ed14ee..7146de15cdb 100644 --- a/packages/amis-core/src/utils/attachmentAdpator.ts +++ b/packages/amis-core/src/utils/attachmentAdpator.ts @@ -33,6 +33,8 @@ export function attachmentAdpator( // 很可能是中文被 url-encode 了 if (filename && filename.replace(/[^%]/g, '').length > 2) { filename = decodeURIComponent(filename); + // 有些后端用错了，导致空格转义成了 +，这里转回来 + filename = filename.replace(/\+/g, ' '); } } From 03f5fa9775eeca7a13ad6c1a4cc17951781ee519 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 19:14:11 +0800 Subject: [PATCH 43/57] =?UTF-8?q?feat:=20input-date=20&=20input-date-range?= =?UTF-8?q?=20=E4=BA=8B=E4=BB=B6=E5=8A=A8=E4=BD=9C=20setValue=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E7=9B=B8=E5=AF=B9=E6=97=B6=E9=97=B4=20Close:=20#8845?= =?UTF-8?q?=20(#8848)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../renderers/Form/inputDate.test.tsx | 39 ++++++++ .../renderers/Form/inputDateRange.test.tsx | 92 +++++++++++++++++++ .../amis/src/renderers/Form/InputDate.tsx | 15 +++ .../src/renderers/Form/InputDateRange.tsx | 21 +++++ 4 files changed, 167 insertions(+) create mode 100644 packages/amis/__tests__/renderers/Form/inputDateRange.test.tsx diff --git a/packages/amis/__tests__/renderers/Form/inputDate.test.tsx b/packages/amis/__tests__/renderers/Form/inputDate.test.tsx index cb0fab3a3a9..5e776356c20 100644 --- a/packages/amis/__tests__/renderers/Form/inputDate.test.tsx +++ b/packages/amis/__tests__/renderers/Form/inputDate.test.tsx @@ -521,3 +521,42 @@ test('Renderer:inputDate disabledDate', async () => { expect(mondayCell).toHaveClass('rdtDisabled'); expect(tuesdayCell).not.toHaveClass('rdtDisabled'); }); + +test('Renderer:inputDate setValue actions with special words', async () => { + const {container, submitBtn, onSubmit, getByText} = await setup([ + { + type: 'input-date', + name: 'date', + id: 'date', + label: '日期', + format: 'YYYY-MM-DD' + }, + + { + type: 'button', + label: '设置值', + onEvent: { + click: { + actions: [ + { + actionType: 'setValue', + componentId: 'date', + args: { + value: 'today' + } + } + ] + } + } + } + ]); + + // 打开弹框 + fireEvent.click(getByText('设置值')); + await wait(200); + const today = moment(); + const inputDate = container.querySelector('.cxd-DatePicker-input'); + + expect(inputDate).toBeInTheDocument(); + expect((inputDate as any)?.value).toEqual(today.format('YYYY-MM-DD')); +}); diff --git a/packages/amis/__tests__/renderers/Form/inputDateRange.test.tsx b/packages/amis/__tests__/renderers/Form/inputDateRange.test.tsx new file mode 100644 index 00000000000..4bea55277e9 --- /dev/null +++ b/packages/amis/__tests__/renderers/Form/inputDateRange.test.tsx @@ -0,0 +1,92 @@ +/** + * 组件名称：InputDateRange 日期 + * + */ + +import React from 'react'; +import PageRenderer from '../../../../amis-core/src/renderers/Form'; +import * as renderer from 'react-test-renderer'; +import { + render, + fireEvent, + cleanup, + getByText, + waitFor, + screen +} from '@testing-library/react'; +import '../../../src'; +import {render as amisRender} from '../../../src'; +import {makeEnv, wait} from '../../helper'; +import moment from 'moment'; + +const setup = async (items: any[] = []) => { + const onSubmit = jest.fn(); + const utils = render( + amisRender( + { + type: 'page', + body: { + type: 'form', + submitText: 'Submit', + api: '/api/mock/saveForm?waitSeconds=1', + mode: 'horizontal', + body: items + } + }, + {onSubmit}, + makeEnv() + ) + ); + + const submitBtn = utils.container.querySelector( + 'button[type="submit"]' + ) as HTMLElement; + + return { + onSubmit, + submitBtn, + ...utils + }; +}; + +test('1.Renderer:inputDateRange setValue actions with special words', async () => { + const {container, submitBtn, onSubmit, getByText} = await setup([ + { + type: 'input-date-range', + name: 'date', + id: 'date', + label: '日期', + format: 'YYYY-MM-DD' + }, + + { + type: 'button', + label: '设置值', + onEvent: { + click: { + actions: [ + { + actionType: 'setValue', + componentId: 'date', + args: { + value: 'today,+2days' + } + } + ] + } + } + } + ]); + + // 打开弹框 + fireEvent.click(getByText('设置值')); + await wait(200); + const today = moment(); + const inputDates = container.querySelectorAll('.cxd-DateRangePicker-input'); + expect(inputDates.length).toBe(2); + + expect((inputDates[0] as any)?.value).toEqual(today.format('YYYY-MM-DD')); + expect((inputDates[1] as any)?.value).toEqual( + moment(today).add(2, 'days').format('YYYY-MM-DD') + ); +}); diff --git a/packages/amis/src/renderers/Form/InputDate.tsx b/packages/amis/src/renderers/Form/InputDate.tsx index 8d726db2213..34e21b4fe2a 100644 --- a/packages/amis/src/renderers/Form/InputDate.tsx +++ b/packages/amis/src/renderers/Form/InputDate.tsx @@ -558,6 +558,21 @@ export default class DateControl extends React.PureComponent< } } + setData(value: any) { + const {data, valueFormat, format, utc, onChange} = this.props; + + if ( + typeof value === 'string' || + typeof value === 'number' || + value instanceof Date + ) { + const date = filterDate(value as any, data, valueFormat || format); + value = (utc ? moment.utc(date) : date).format(valueFormat || format); + } + + onChange(value); + } + // 值的变化 @autobind async handleChange(nextValue: any) { diff --git a/packages/amis/src/renderers/Form/InputDateRange.tsx b/packages/amis/src/renderers/Form/InputDateRange.tsx index fb77d91735f..f7003bec3e2 100644 --- a/packages/amis/src/renderers/Form/InputDateRange.tsx +++ b/packages/amis/src/renderers/Form/InputDateRange.tsx @@ -245,6 +245,27 @@ export default class DateRangeControl extends React.Component { } } + setData(value: any) { + const {data, delimiter, valueFormat, format, joinValues, utc, onChange} = + this.props; + + if (typeof value === 'string') { + let arr = typeof value === 'string' ? value.split(delimiter) : value; + value = DateRangePicker.formatValue( + { + startDate: filterDate(arr[0], data, valueFormat || format), + endDate: filterDate(arr[1], data, valueFormat || format) + }, + valueFormat || format, + joinValues, + delimiter, + utc + ); + } + + onChange(value); + } + // 值的变化 @autobind async handleChange(nextValue: any) { From be312da1c5223769035a169433079a2f1d7a1756 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 19:18:15 +0800 Subject: [PATCH 44/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20combo=20?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E7=88=B6=E7=BA=A7=E6=95=B0=E6=8D=AE=E5=8F=AF?= =?UTF-8?q?=E8=83=BD=E5=AD=98=E5=9C=A8=E5=B1=95=E7=A4=BA=E5=80=BC=E5=92=8C?= =?UTF-8?q?=E5=AE=9E=E9=99=85=E5=80=BC=E4=B8=8D=E4=B8=80=E8=87=B4=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20Close:=20#8773=20(#8831)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/renderers/Form.tsx | 12 ++++++++++++ .../amis/__tests__/renderers/Form/combo.test.tsx | 11 +++++++++++ .../__tests__/renderers/Form/inputArray.test.tsx | 1 + packages/amis/src/renderers/Form/Combo.tsx | 6 ++++-- 4 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx index 45fae15fecf..5773221b4e3 100644 --- a/packages/amis-core/src/renderers/Form.tsx +++ b/packages/amis-core/src/renderers/Form.tsx @@ -522,6 +522,18 @@ export default class Form extends React.Component { ) ); } + + // withStore 里面与上层数据会做同步 + // 这个时候变更的数据没有同步 onChange 出去，出现数据不一致的问题。 + // https://github.com/baidu/amis/issues/8773 + this.toDispose.push( + reaction( + () => store.initedAt, + () => { + store.inited && this.emitChange(!!this.props.submitOnChange); + } + ) + ); } componentDidMount() { diff --git a/packages/amis/__tests__/renderers/Form/combo.test.tsx b/packages/amis/__tests__/renderers/Form/combo.test.tsx index eb602857ead..c3b52699201 100644 --- a/packages/amis/__tests__/renderers/Form/combo.test.tsx +++ b/packages/amis/__tests__/renderers/Form/combo.test.tsx @@ -659,6 +659,17 @@ test('Renderer:combo with canAccessSuperData & strictMode & syncFields', async ( expect(comboInputs[0]!.value).toBe(''); expect(comboInputs[1]!.value).toBe('123'); expect(comboInputs[2]!.value).toBe('123456'); + + fireEvent.click(submitBtn); + await wait(300); + expect(onSubmit).toHaveBeenCalled(); + + expect(onSubmit.mock.calls[0][0]).toMatchObject({ + super_text: '123456', + combo1: [{}], + combo2: [{super_text: '123'}], + combo3: [{super_text: '123456'}] + }); }); // 9. tabsMode diff --git a/packages/amis/__tests__/renderers/Form/inputArray.test.tsx b/packages/amis/__tests__/renderers/Form/inputArray.test.tsx index 11a9fd293c1..df487804e22 100644 --- a/packages/amis/__tests__/renderers/Form/inputArray.test.tsx +++ b/packages/amis/__tests__/renderers/Form/inputArray.test.tsx @@ -194,6 +194,7 @@ test('Renderer:inputArray with minLength & maxLength', async () => { expect(container.querySelector('.cxd-Combo-addBtn')).toBeInTheDocument(); // 最大值 fireEvent.click(container.querySelector('.cxd-Combo-addBtn')!); + await wait(300); await waitFor(() => { expect(container.querySelector('a.cxd-Combo-delBtn')).toBeInTheDocument(); expect( diff --git a/packages/amis/src/renderers/Form/Combo.tsx b/packages/amis/src/renderers/Form/Combo.tsx index 0dea000a63b..8e73428568a 100644 --- a/packages/amis/src/renderers/Form/Combo.tsx +++ b/packages/amis/src/renderers/Form/Combo.tsx @@ -541,8 +541,10 @@ export default class ComboControl extends React.Component { } getValueAsArray(props = this.props) { - const {flat, joinValues, delimiter, type} = props; - let value = props.value; + const {flat, joinValues, delimiter, type, formItem} = props; + // 因为 combo 多个子表单可能同时发生变化。 + // onChagne 触发多次，上次变更还没应用到 props.value 上来，这次触发变更就会包含历史数据，把上次触发的数据给重置成旧的了。 + let value = formItem?.tmpValue || props.value; if (joinValues && flat && typeof value === 'string') { value = value.split(delimiter || ','); From f3d53fbf7e8fb8b83dc64360db6b1bc9c9ed86f8 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 23 Nov 2023 19:19:06 +0800 Subject: [PATCH 45/57] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=20table=20?= =?UTF-8?q?=E5=9B=BA=E9=A1=B6=E6=A8=A1=E5=BC=8F=E7=9A=84=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=20safari=20Close:=20#8708=20(#8863)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/store/table.ts | 11 ++++---- packages/amis-ui/scss/components/_table.scss | 8 ++++-- .../__snapshots__/crud.test.tsx.snap | 6 ++--- .../__snapshots__/inputTable.test.tsx.snap | 10 +++---- .../__snapshots__/CRUD.test.tsx.snap | 6 ++--- .../__snapshots__/Pagination.test.tsx.snap | 2 +- .../__snapshots__/Table.test.tsx.snap | 26 +++++++++---------- .../renderers/Table/ItemActionsWrapper.tsx | 5 +++- packages/amis/src/renderers/Table/index.tsx | 4 +++ 9 files changed, 45 insertions(+), 33 deletions(-) diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts index 89123a711b0..1305208c116 100644 --- a/packages/amis-core/src/store/table.ts +++ b/packages/amis-core/src/store/table.ts @@ -528,7 +528,8 @@ export const TableStore = iRendererStore exportExcelLoading: false, searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter lazyRenderAfter: 100, - tableLayout: 'auto' + tableLayout: 'auto', + theadHeight: 0 }) .views(self => { function getColumnsExceptBuiltinTypes() { @@ -1001,7 +1002,7 @@ export const TableStore = iRendererStore }, buildStyles(style: any) { - style = {...style}; + style = {...style, '--Table-thead-height': self.theadHeight + 'px'}; getFilteredColumns().forEach(column => { style[`--Table-column-${column.index}-width`] = @@ -1295,9 +1296,9 @@ export const TableStore = iRendererStore if (!table) { return; } - const cols = [].slice.call( - table.querySelectorAll(':scope>thead>tr>th[data-index]') - ); + const thead = table.querySelector(':scope>thead') as HTMLElement; + const cols = [].slice.call(thead.querySelectorAll('tr>th[data-index]')); + self.theadHeight = thead.offsetHeight; cols.forEach((col: HTMLElement) => { const index = parseInt(col.getAttribute('data-index')!, 10); const column = self.columns[index]; diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss index 8ec35a3195b..95c28097859 100644 --- a/packages/amis-ui/scss/components/_table.scss +++ b/packages/amis-ui/scss/components/_table.scss @@ -273,8 +273,12 @@ padding-top: 0; } - &--affixHeader > thead { - visibility: collapse; + &--affixHeader { + margin-top: calc(var(--Table-thead-height) * -1); + + > thead { + visibility: hidden; + } } &--withCombine { diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap index 92e7c7509bc..c6ebf2d0f80 100644 --- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap +++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap @@ -28,7 +28,7 @@ exports[`doAction:crud reload 1`] = ` >
{ document.addEventListener('mousemove', this.handleColResizeMouseMove); document.addEventListener('mouseup', this.handleColResizeMouseUp); + + // 防止选中文本 + e.preventDefault(); + e.stopPropagation(); } // 垂直线拖拽移动 From 7d4776e78a7b7b063c859a506e140fb4dc5a9fbf Mon Sep 17 00:00:00 2001 From: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Date: Thu, 23 Nov 2023 19:37:07 +0800 Subject: [PATCH 46/57] =?UTF-8?q?feat:scoped=E6=94=AF=E6=8C=81=E8=B0=83?= =?UTF-8?q?=E7=94=A8amis=E5=8A=A8=E4=BD=9C=20(#8875)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/start/getting-started.md | 53 +++++++++++++++++++ packages/amis-core/src/Scoped.tsx | 20 ++++++- packages/amis-core/src/actions/AjaxAction.ts | 2 +- packages/amis-core/src/actions/CmptAction.ts | 2 +- packages/amis-core/src/actions/CopyAction.ts | 4 +- packages/amis-core/src/actions/LinkAction.ts | 4 +- packages/amis-core/src/actions/ToastAction.ts | 4 +- 7 files changed, 80 insertions(+), 9 deletions(-) diff --git a/docs/zh-CN/start/getting-started.md b/docs/zh-CN/start/getting-started.md index 9fac584e314..13db75b7499 100644 --- a/docs/zh-CN/start/getting-started.md +++ b/docs/zh-CN/start/getting-started.md @@ -230,6 +230,59 @@ let amisScoped = amis.embed( 还可以通过 `amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})` 来修改表单中的值。 +### 调用 amis 动作 + +可以通过`amisScoped.doAction(actions, ctx)`来调用 amis 中的通用动作和目标组件的动作。了解事件动作机制可以查看[事件动作](../../docs/concepts/event-action)。参数说明如下： + +- `actions`：动作列表，支持执行单个或多个动作 +- `ctx`：上下文，它可以为动作配置补充上下文数据，例如下面`toast`动作中`msg`配置中的`${myName}`就来自于补充上下文`ctx` + +下面的例子中依次执行了`toast提示`、`ajax请求`、`dialog弹窗`、`给目标组件赋值`动作。 + +```js +amisScoped.doAction( + [ + { + actionType: 'toast', + args: { + msg: '${amisUser.name}, ${myName}' + } + }, + { + actionType: 'ajax', + api: { + url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm', + method: 'post' + } + }, + { + actionType: 'dialog', + dialog: { + type: 'dialog', + title: '弹窗', + body: [ + { + type: 'tpl', + tpl: '

对，你打开了弹窗

', + inline: false + } + ] + } + }, + { + actionType: 'setValue', + componentId: 'name', + args: { + value: '${myName}' + } + } + ], + { + myName: 'amis' + } +); +``` + ### 更新属性 可以通过 amisScoped 对象的 updateProps 方法来更新下发到 amis 的属性。 diff --git a/packages/amis-core/src/Scoped.tsx b/packages/amis-core/src/Scoped.tsx index 991990fcb6a..09d92792b8d 100644 --- a/packages/amis-core/src/Scoped.tsx +++ b/packages/amis-core/src/Scoped.tsx @@ -21,7 +21,8 @@ import { } from './utils/helper'; import {RendererData, ActionObject} from './types'; import {isPureVariable} from './utils/isPureVariable'; -import {filter} from './utils'; +import {createObject, createRendererEvent, filter} from './utils'; +import {ListenerAction, runActions} from './actions'; /** * target 里面可能包含 ?xxx=xxx，这种情况下，需要把 ?xxx=xxx 保留下来，然后对前面的部分进行 filter @@ -75,6 +76,7 @@ export interface IScopedContext { session: string, path: string ) => ScopedComponentType[]; + doAction: (actions: ListenerAction | ListenerAction[], ctx: any) => void; } type AliasIScopedContext = IScopedContext; @@ -355,6 +357,22 @@ function createScopedTools( if (component && component.props.show) { closeDialog(component); } + }, + + async doAction(actions: ListenerAction | ListenerAction[], ctx: any) { + const renderer = this.getComponents()[0]; // 直接拿最顶层 + const rendererEvent = createRendererEvent('embed', { + env, + nativeEvent: undefined, + data: createObject(renderer.props.data, ctx), + scoped: this + }); + + await runActions(actions, renderer, rendererEvent); + + if (rendererEvent.prevented) { + return; + } } }; diff --git a/packages/amis-core/src/actions/AjaxAction.ts b/packages/amis-core/src/actions/AjaxAction.ts index 045f539e0f5..e5d77da1f19 100644 --- a/packages/amis-core/src/actions/AjaxAction.ts +++ b/packages/amis-core/src/actions/AjaxAction.ts @@ -39,7 +39,7 @@ export class AjaxAction implements RendererAction { renderer: ListenerContext, event: RendererEvent ) { - if (!renderer.props.env?.fetcher) { + if (!event.context.env?.fetcher) { throw new Error('env.fetcher is required!'); } diff --git a/packages/amis-core/src/actions/CmptAction.ts b/packages/amis-core/src/actions/CmptAction.ts index ee1ea1deebc..72e952da7d2 100644 --- a/packages/amis-core/src/actions/CmptAction.ts +++ b/packages/amis-core/src/actions/CmptAction.ts @@ -40,7 +40,7 @@ export class CmptAction implements RendererAction { /** 如果args中携带path参数, 则认为是全局变量赋值, 否则认为是组件变量赋值 */ if (action.actionType === 'setValue' && path && typeof path === 'string') { - const beforeSetData = renderer?.props?.env?.beforeSetData; + const beforeSetData = event?.context?.env?.beforeSetData; if (beforeSetData && typeof beforeSetData === 'function') { const res = await beforeSetData(renderer, action, event); diff --git a/packages/amis-core/src/actions/CopyAction.ts b/packages/amis-core/src/actions/CopyAction.ts index 526a53ace58..b4df7af578c 100644 --- a/packages/amis-core/src/actions/CopyAction.ts +++ b/packages/amis-core/src/actions/CopyAction.ts @@ -28,12 +28,12 @@ export class CopyAction implements RendererAction { renderer: ListenerContext, event: RendererEvent ) { - if (!renderer.props.env?.copy) { + if (!event.context.env?.copy) { throw new Error('env.copy is required!'); } if (action.args?.content) { - renderer.props.env.copy?.(action.args.content, { + event.context.env?.copy?.(action.args.content, { format: action.args?.copyFormat ?? 'text/html' }); } diff --git a/packages/amis-core/src/actions/LinkAction.ts b/packages/amis-core/src/actions/LinkAction.ts index d5efa365569..930f59fba12 100644 --- a/packages/amis-core/src/actions/LinkAction.ts +++ b/packages/amis-core/src/actions/LinkAction.ts @@ -34,7 +34,7 @@ export class LinkAction implements RendererAction { renderer: ListenerContext, event: RendererEvent ) { - if (!renderer.props.env?.jumpTo) { + if (!event.context.env?.jumpTo) { throw new Error('env.jumpTo is required!'); } @@ -53,7 +53,7 @@ export class LinkAction implements RendererAction { } ); - renderer.props.env.jumpTo( + event.context.env?.jumpTo( urlObj.url, { actionType: action.actionType, diff --git a/packages/amis-core/src/actions/ToastAction.ts b/packages/amis-core/src/actions/ToastAction.ts index 37a94613078..7d65b997e4f 100644 --- a/packages/amis-core/src/actions/ToastAction.ts +++ b/packages/amis-core/src/actions/ToastAction.ts @@ -34,11 +34,11 @@ export class ToastAction implements RendererAction { renderer: ListenerContext, event: RendererEvent ) { - if (!renderer.props.env?.notify) { + if (!event.context.env?.notify) { throw new Error('env.notify is required!'); } - event.context.env.notify?.( + event.context.env?.notify?.( action.args?.msgType || 'info', String(action.args?.msg), action.args From 966841596665607c025db4ad55bbc1cf37168249 Mon Sep 17 00:00:00 2001 From: xiangwaner <1186355501@qq.com> Date: Thu, 23 Nov 2023 19:38:43 +0800 Subject: [PATCH 47/57] =?UTF-8?q?styles:=20=E8=B0=83=E6=95=B4InputRating?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9B=BE=E6=A0=87=E5=B0=BA=E5=AF=B8=20(#8869?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: zhaowenli --- packages/amis-ui/scss/_components.scss | 1 + .../amis-ui/scss/components/form/_rating.scss | 20 ++++++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 7e3c3a61fcb..8b8f61247ad 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1862,6 +1862,7 @@ // 评分 --Rating-star-margin: var(--sizes-size-5); --Rating-star-size: var(--sizes-base-12); + --Rating-star-icon-size: var(--sizes-base-9); --Rating-star-icon: ''; --Rating-colors: '[{"value":"#abadb1","id":2},{"value":"#787b81","id":3},{"value":"#ffa900","id":5}]'; --Rating-text-color: var(--colors-neutral-text-2); diff --git a/packages/amis-ui/scss/components/form/_rating.scss b/packages/amis-ui/scss/components/form/_rating.scss index ac7d526222e..1681c73e6d0 100644 --- a/packages/amis-ui/scss/components/form/_rating.scss +++ b/packages/amis-ui/scss/components/form/_rating.scss @@ -16,11 +16,14 @@ } &-star { + display: flex; + align-items: center; + justify-content: center; + width: var(--Rating-star-size); + height: var(--Rating-star-size); position: relative; - margin-right: var(--Rating-star-margin); overflow: hidden; - display: block; - font-size: var(--Rating-star-size); + font-size: var(--Rating-star-icon-size); line-height: 1; cursor: pointer; user-select: none; @@ -71,7 +74,18 @@ } .Rating-star-icon { + display: flex; + align-items: center; + justify-content: center; + width: var(--Rating-star-size); + height: var(--Rating-star-size); content: var(--Rating-star-icon); + + & > svg.icon { + width: var(--Rating-star-icon-size); + height: var(--Rating-star-icon-size); + top: 0; + } } .#{$ns}RatingControl { From 76c2d1354c708295190e64afa54a02551f6f4ad8 Mon Sep 17 00:00:00 2001 From: qkiroc <30946345+qkiroc@users.noreply.github.com> Date: Thu, 23 Nov 2023 19:57:10 +0800 Subject: [PATCH 48/57] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=B8=B2=E6=9F=93=E5=99=A8=E5=BC=80=E6=BA=90?= =?UTF-8?q?=20(#8820)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 主题编辑器渲染器开源 * 笔误 * 优化发布脚本 * 优化发布脚本 * 删除无用代码 * bugfix * bugfix * bugfix * bugfix --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> --- .gitignore | 3 + package.json | 5 +- packages/amis-editor-core/package.json | 1 + packages/amis-editor-core/tsconfig.json | 2 +- packages/amis-editor/examples/Editor.tsx | 4 +- packages/amis-editor/package.json | 4 +- packages/amis-editor/src/index.tsx | 11 +- packages/amis-editor/tsconfig.json | 6 +- .../amis-theme-editor-helper/i18nConfig.js | 35 + .../amis-theme-editor-helper/package.json | 69 + .../amis-theme-editor-helper/rollup.config.js | 149 + .../src/helper/ColorGenerator.ts | 458 ++ .../src/helper/ParseThemeData.ts | 299 + .../src/helper/declares.ts | 163 + .../src/helper/getGlobalData.ts | 202 + .../src/helper/styleHelper.ts | 72 + .../src/helper/styleOperation.ts | 21 + .../src/icons/add-button.svg | 1 + .../src/icons/checkbox-check.svg | 11 + .../src/icons/checkbox.svg | 10 + .../src/icons/code.svg | 18 + .../src/icons/color-picker-img-active.svg | 8 + .../src/icons/color-picker-img.svg | 8 + .../src/icons/component.svg | 20 + .../src/icons/custom.svg | 18 + .../src/icons/delete-button.svg | 1 + .../src/icons/global.svg | 18 + .../src/icons/index.tsx | 54 + .../src/icons/italic.svg | 15 + .../src/icons/line-through.svg | 16 + .../src/icons/lock.svg | 15 + .../src/icons/text-center.svg | 15 + .../src/icons/text-justify.svg | 15 + .../src/icons/text-left.svg | 13 + .../src/icons/text-right.svg | 15 + .../src/icons/underline.svg | 12 + .../src/icons/unlock.svg | 15 + .../src/icons/vertical-bottom.svg | 12 + .../src/icons/vertical-middle.svg | 13 + .../src/icons/vertical-top.svg | 12 + .../amis-theme-editor-helper/src/index.ts | 10 + .../src/locale/en-US.ts | 233 + .../src/locale/index.ts | 2 + .../src/locale/zh-CN.ts | 232 + .../src/renderers/Border.tsx | 343 + .../src/renderers/ColorPicker.tsx | 1517 ++++ .../src/renderers/Font.tsx | 1150 +++ .../src/renderers/PaddingAndMargin.tsx | 329 + .../src/renderers/Radius.tsx | 248 + .../src/renderers/Shadow.tsx | 447 ++ .../src/renderers/Size.tsx | 260 + .../src/renderers/ThemeSelect.tsx | 345 + .../src/renderers/ThemeWrapper.tsx | 115 + .../src/renderers/index.tsx | 8 + .../src/style/_border.scss | 181 + .../src/style/_color-picker.scss | 600 ++ .../src/style/_font.scss | 97 + .../src/style/_padding-and-margin.scss | 224 + .../src/style/_radius.scss | 128 + .../src/style/_shadow.scss | 236 + .../src/style/_size.scss | 118 + .../src/style/_theme-select.scss | 88 + .../src/style/_theme-wrapper.scss | 69 + .../src/style/index.scss | 15 + .../src/systemTheme/antd.ts | 1187 ++++ .../src/systemTheme/component.ts | 6157 +++++++++++++++++ .../src/systemTheme/cxd.ts | 1513 ++++ .../src/systemTheme/index.ts | 3 + packages/amis-theme-editor-helper/src/util.ts | 156 + .../amis-theme-editor-helper/tsconfig.json | 18 + packages/amis-theme-editor-helper/typings.ts | 5 + .../amis-ui/src/components/TooltipWrapper.tsx | 1 + publish-theme.sh | 93 + scripts/utils.sh | 83 + tsconfig.json | 5 +- vite.config.ts | 28 +- 76 files changed, 18044 insertions(+), 39 deletions(-) create mode 100644 packages/amis-theme-editor-helper/i18nConfig.js create mode 100644 packages/amis-theme-editor-helper/package.json create mode 100644 packages/amis-theme-editor-helper/rollup.config.js create mode 100644 packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts create mode 100644 packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts create mode 100644 packages/amis-theme-editor-helper/src/helper/declares.ts create mode 100644 packages/amis-theme-editor-helper/src/helper/getGlobalData.ts create mode 100644 packages/amis-theme-editor-helper/src/helper/styleHelper.ts create mode 100644 packages/amis-theme-editor-helper/src/helper/styleOperation.ts create mode 100644 packages/amis-theme-editor-helper/src/icons/add-button.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/checkbox-check.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/checkbox.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/code.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/color-picker-img.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/component.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/custom.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/delete-button.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/global.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/index.tsx create mode 100644 packages/amis-theme-editor-helper/src/icons/italic.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/line-through.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/lock.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/text-center.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/text-justify.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/text-left.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/text-right.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/underline.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/unlock.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/vertical-middle.svg create mode 100644 packages/amis-theme-editor-helper/src/icons/vertical-top.svg create mode 100644 packages/amis-theme-editor-helper/src/index.ts create mode 100644 packages/amis-theme-editor-helper/src/locale/en-US.ts create mode 100644 packages/amis-theme-editor-helper/src/locale/index.ts create mode 100644 packages/amis-theme-editor-helper/src/locale/zh-CN.ts create mode 100644 packages/amis-theme-editor-helper/src/renderers/Border.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/ColorPicker.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/Font.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/Radius.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/Shadow.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/Size.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/ThemeSelect.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx create mode 100644 packages/amis-theme-editor-helper/src/renderers/index.tsx create mode 100644 packages/amis-theme-editor-helper/src/style/_border.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_color-picker.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_font.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_radius.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_shadow.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_size.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_theme-select.scss create mode 100644 packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss create mode 100644 packages/amis-theme-editor-helper/src/style/index.scss create mode 100644 packages/amis-theme-editor-helper/src/systemTheme/antd.ts create mode 100644 packages/amis-theme-editor-helper/src/systemTheme/component.ts create mode 100644 packages/amis-theme-editor-helper/src/systemTheme/cxd.ts create mode 100644 packages/amis-theme-editor-helper/src/systemTheme/index.ts create mode 100644 packages/amis-theme-editor-helper/src/util.ts create mode 100644 packages/amis-theme-editor-helper/tsconfig.json create mode 100644 packages/amis-theme-editor-helper/typings.ts create mode 100644 publish-theme.sh create mode 100644 scripts/utils.sh diff --git a/.gitignore b/.gitignore index fbd59c07378..2e4fce9bd02 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,8 @@ _site node_modules /dist /lib +**/esm +**/lib /sdk /public /gh-pages @@ -26,6 +28,7 @@ node_modules /npm /mock/cfc/cfc.zip .rollup.cache +/theme-npm dist tsconfig.tsbuildinfo diff --git a/package.json b/package.json index b515077dad6..e6b48ef106a 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "packages/amis-ui", "packages/amis", "packages/amis-editor-core", - "packages/amis-editor" + "packages/amis-editor", + "packages/amis-theme-editor-helper" ], "scripts": { "fis3-serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse", @@ -86,7 +87,7 @@ "magic-string": "^0.26.7", "marked": "^4.2.1", "monaco-editor": "0.30.1", - "plugin-react-i18n": "1.0.1", + "plugin-react-i18n": "1.0.4", "postcss-scss": "^4.0.6", "prismjs": "^1.29.0", "react": "^18.2.0", diff --git a/packages/amis-editor-core/package.json b/packages/amis-editor-core/package.json index 07e3ad8efd5..6c2195b85ee 100644 --- a/packages/amis-editor-core/package.json +++ b/packages/amis-editor-core/package.json @@ -47,6 +47,7 @@ "static" ], "dependencies": { + "amis-theme-editor-helper": "*", "axios": "0.21.1", "deep-diff": "1.0.2", "json-ast-comments": "^1.1.0", diff --git a/packages/amis-editor-core/tsconfig.json b/packages/amis-editor-core/tsconfig.json index 29513f699f9..216821ea17a 100644 --- a/packages/amis-editor-core/tsconfig.json +++ b/packages/amis-editor-core/tsconfig.json @@ -10,5 +10,5 @@ ] }, "include": ["src/**/*"], - "references": [{"path": "../amis"}] + "references": [{"path": "../amis"}, {"path": "../amis-theme-editor-helper"}] } diff --git a/packages/amis-editor/examples/Editor.tsx b/packages/amis-editor/examples/Editor.tsx index 3ce289b8fe4..81534814fd8 100644 --- a/packages/amis-editor/examples/Editor.tsx +++ b/packages/amis-editor/examples/Editor.tsx @@ -6,7 +6,7 @@ import {currentLocale} from 'i18n-runtime'; import {Portal} from 'react-overlays'; import {Icon} from './icons/index'; import LayoutList from './layout/index'; -import themeConfig from 'amis-theme-editor-helper/lib/systemTheme/cxd'; +import {cxdData} from 'amis-theme-editor-helper'; // 测试组织属性配置面板的国际化，可以放开如下注释 // import './renderer/InputTextI18n'; @@ -14,7 +14,7 @@ import themeConfig from 'amis-theme-editor-helper/lib/systemTheme/cxd'; // import './utils/overwriteSchemaTpl'; // const i18nEnabled = true; const i18nEnabled = false; -setThemeConfig(themeConfig); +setThemeConfig(cxdData); const schema = { type: 'page', diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 63f9a759fff..da516c8a01d 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -42,8 +42,8 @@ "dependencies": { "@webcomponents/webcomponentsjs": "^2.6.0", "amis-editor-core": "*", + "amis-theme-editor-helper": "*", "amis-postcss": "1.0.0", - "amis-theme-editor": "*", "i18n-runtime": "*", "lodash": "^4.17.15", "mobx-state-tree": "^3.17.3" @@ -102,8 +102,8 @@ "amis": "*", "amis-core": "*", "amis-formula": "*", - "amis-theme-editor": "*", "amis-ui": "*", + "amis-theme-editor-helper": "*", "i18n-runtime": "*", "react": ">=16.8.6", "react-dom": ">=16.8.6" diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index c7079d37d88..095d71ce080 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -51,16 +51,7 @@ import './renderer/InputRangeValueControl'; import './renderer/FunctionEditorControl'; import './renderer/ListItemControl'; -import 'amis-theme-editor/lib/locale/zh-CN'; -import 'amis-theme-editor/lib/locale/en-US'; -import 'amis-theme-editor/lib/renderers/Border'; -import 'amis-theme-editor/lib/renderers/ColorPicker'; -import 'amis-theme-editor/lib/renderers/Font'; -import 'amis-theme-editor/lib/renderers/PaddingAndMargin'; -import 'amis-theme-editor/lib/renderers/Radius'; -import 'amis-theme-editor/lib/renderers/Shadow'; -import 'amis-theme-editor/lib/renderers/Size'; -import 'amis-theme-editor/lib/renderers.css'; +import 'amis-theme-editor-helper'; export * from './component/BaseControl'; export * from './icons/index'; diff --git a/packages/amis-editor/tsconfig.json b/packages/amis-editor/tsconfig.json index 61d348c4396..ec5708072c7 100644 --- a/packages/amis-editor/tsconfig.json +++ b/packages/amis-editor/tsconfig.json @@ -10,5 +10,9 @@ ] }, "include": ["src/**/*"], - "references": [{"path": "../amis"}, {"path": "../amis-editor-core"}] + "references": [ + {"path": "../amis"}, + {"path": "../amis-editor-core"}, + {"path": "../amis-theme-editor-helper"} + ] } diff --git a/packages/amis-theme-editor-helper/i18nConfig.js b/packages/amis-theme-editor-helper/i18nConfig.js new file mode 100644 index 00000000000..ae811dddfb1 --- /dev/null +++ b/packages/amis-theme-editor-helper/i18nConfig.js @@ -0,0 +1,35 @@ +module.exports = { + entry: { + dir: './src' + }, + file: { + test: /.*(ts|tsx|js|jsx)$/ + }, + includes: ['src/renderers'], + importInfo: { + source: 'i18n-runtime', + imported: 'i18n', + local: '_i18n' + }, + i18nModule: 'i18n-runtime', + languages: [ + { + name: 'en-US', + path: './src/locale' + }, + { + name: 'zh-CN', + path: './src/locale' + } + ], + output: { + fileName: 'theme-editor-i18n', + fileExtension: 'xlsx', + path: './' + }, + translate: { + appId: '', + key: '', + host: 'http://api.fanyi.baidu.com' + } +}; diff --git a/packages/amis-theme-editor-helper/package.json b/packages/amis-theme-editor-helper/package.json new file mode 100644 index 00000000000..32046fcbf5a --- /dev/null +++ b/packages/amis-theme-editor-helper/package.json @@ -0,0 +1,69 @@ +{ + "name": "amis-theme-editor-helper", + "version": "2.0.22-beta.9", + "description": "amis主题编辑器通用方法", + "main": "lib/index.js", + "module": "esm/index.js", + "types": "lib/index.d.ts", + "scripts": { + "test": "echo \"Error: no test specified\"", + "build": "npm run clean-dist && NODE_ENV=production rollup -c ", + "clean-dist": "rimraf lib/** esm/**", + "i18n:update": "npx i18n update --config=./i18nConfig.js", + "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US", + "i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US" + }, + "keywords": [ + "amis", + "theme-editor-helper" + ], + "author": "@fex", + "license": "ISC", + "files": [ + "lib", + "esm" + ], + "lint-staged": { + "{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [ + "prettier --write" + ] + }, + "dependencies": { + "react": "^18.2.0", + "react-color": "^2.19.3", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@rollup/plugin-url": "^7.0.0", + "@svgr/rollup": "^6.4.0", + "@types/async": "^2.0.45", + "@types/classnames": "^2.2.3", + "@types/codemirror": "^5.60.5", + "@types/deep-diff": "^1.0.0", + "@types/history": "^4.6.0", + "@types/hoist-non-react-statics": "^3.0.1", + "@types/lodash": "^4.14.76", + "@types/node": "^14.0.24", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@rollup/plugin-commonjs": "^22.0.0", + "@rollup/plugin-json": "^4.1.0", + "@rollup/plugin-node-resolve": "^13.3.0", + "@rollup/plugin-typescript": "^8.3.2", + "rollup": "^2.73.0", + "rollup-plugin-auto-external": "^2.0.0", + "rollup-plugin-license": "^2.7.0", + "@types/react-color": "^3.0.6", + "tslib": "^2.3.1", + "typescript": "^4.6.4", + "sass": "^1.49.7", + "sass-loader": "^12.5.0", + "style-loader": "^3.2.1" + }, + "peerDependencies": { + "amis": "*", + "amis-core": "*", + "amis-ui": "*", + "i18n-runtime": "*" + } +} \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/rollup.config.js b/packages/amis-theme-editor-helper/rollup.config.js new file mode 100644 index 00000000000..ec931e3f527 --- /dev/null +++ b/packages/amis-theme-editor-helper/rollup.config.js @@ -0,0 +1,149 @@ +// rollup.config.js +import commonjs from '@rollup/plugin-commonjs'; +import json from '@rollup/plugin-json'; +import resolve from '@rollup/plugin-node-resolve'; +import typescript from '@rollup/plugin-typescript'; +import license from 'rollup-plugin-license'; +import autoExternal from 'rollup-plugin-auto-external'; +import postcss from 'rollup-plugin-postcss'; +import { + name, + version, + author, + main, + module, + dependencies +} from './package.json'; +import path from 'path'; +import svgr from '@svgr/rollup'; +import fs from 'fs'; +import i18nPlugin from 'plugin-react-i18n'; + +const i18nConfig = require('./i18nConfig'); + +const settings = { + globals: {} +}; + +const external = id => + new RegExp( + `^(?:${Object.keys(dependencies ?? {}) + .concat(fs.readdirSync(path.join(__dirname, '../../node_modules'))) + .map(value => + value.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d') + ) + .join('|')})` + ).test(id); +const input = ['./src/index.ts']; + +export default [ + { + input, + + output: [ + { + ...settings, + dir: path.dirname(main), + format: 'cjs', + exports: 'named', + preserveModulesRoot: './src', + preserveModules: true // Keep directory structure and files + } + ], + external, + plugins: getPlugins('cjs') + }, + { + input, + + output: [ + { + ...settings, + dir: path.dirname(module), + format: 'esm', + exports: 'named', + preserveModulesRoot: './src', + preserveModules: true // Keep directory structure and files + } + ], + external, + plugins: getPlugins('esm') + } +]; + +function transpileDynamicImportForCJS(options) { + return { + name: 'transpile-dynamic-import-for-cjs', + renderDynamicImport({format, targetModuleId}) { + if (format !== 'cjs') { + return null; + } + + return { + left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([', + right: + '], function(mod) {fullfill(require("tslib").__importStar(mod))})})})' + }; + + // return { + // left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require.ensure([', + // right: + // '], function(r) {fullfill(_interopDefaultLegacy(r("' + + // targetModuleId + + // '")))})})})' + // }; + } + }; +} + +function getPlugins(format = 'esm') { + const typeScriptOptions = { + typescript: require('typescript'), + sourceMap: false, + outputToFilesystem: true, + ...(format === 'esm' + ? { + compilerOptions: { + rootDir: './src', + outDir: path.dirname(module) + } + } + : { + compilerOptions: { + rootDir: './src', + outDir: path.dirname(main) + } + }) + }; + + return [ + i18nPlugin(i18nConfig), + typescript(typeScriptOptions), + svgr({ + svgProps: { + className: 'icon' + }, + prettier: false, + dimensions: false + }), + transpileDynamicImportForCJS(), + autoExternal(), + json(), + postcss({ + minimize: true + }), + resolve({ + jsnext: true, + main: true + }), + commonjs({ + sourceMap: false + }), + license({ + banner: ` + ${name} v${version} + Copyright 2018<%= moment().format('YYYY') > 2018 ? '-' + moment().format('YYYY') : null %> ${author} + ` + }) + ]; +} diff --git a/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts b/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts new file mode 100644 index 00000000000..a6d2f22ddfd --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts @@ -0,0 +1,458 @@ +type ResColor = {hex: string; hsv: number[]}[]; + +export class ColorGenerator { + color = ''; + //十六进制颜色值的正则表达式 + reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + constructor(color: string) { + this.setPrimaryColor(color); + } + /** + * 生成衍生色 + */ + getDerivedColor() { + const rgb = ColorGenerator.hexToRgb(this.color); + const [h, s, v] = ColorGenerator.rgbToHsv(rgb); + const scolors: ResColor = []; + const wcolors: ResColor = []; + const hsvCorrection = (hsv: number[]) => { + let h = hsv[0], + s = hsv[1], + v = hsv[2]; + if (s < 10) { + s = 10; + } + return ColorGenerator.hsvCorrection([h, s, v]); + }; + for (let i = 0; i < 4; i++) { + const index = i + 1; + let sh, ss, sv; + if (h > 60 && h < 300) { + // 冷色 + sh = h + index * 2; + ss = s + index * 5; + sv = v - index * 15; + } else { + // 暖色 + sh = h - index * 2; + ss = s + index * 5; + sv = v - index * 15; + } + const shsv = hsvCorrection([sh, ss, sv]); + const srgb = ColorGenerator.hsvToRgb(shsv); + const shex = ColorGenerator.rgbToHex(srgb); + + scolors.push({hex: shex, hsv: shsv}); + } + for (let i = 0; i < 5; i++) { + const index = i + 1; + let wh, ws, wv; + if (h > 60 && h < 300) { + // 冷色 + wh = h - index * 1; + ws = s - index * (s / 5); + wv = v + index * 5; + } else { + // 暖色 + wh = h + index * 1; + ws = s - index * (s / 5); + wv = v + index * (100 - v) * 5; + } + const whsv = hsvCorrection([wh, ws, wv]); + const wrgb = ColorGenerator.hsvToRgb(whsv); + const whex = ColorGenerator.rgbToHex(wrgb); + + wcolors.push({hex: whex, hsv: whsv}); + } + return [ + ...scolors.reverse(), + {hex: this.color, hsv: [h, s, v]}, + ...wcolors + ]; + } + /** + * 生成中性色 + */ + getNeutralColor() { + const rgb = ColorGenerator.hexToRgb(this.color); + const [h, ,] = ColorGenerator.rgbToHsv(rgb); + const S = [65, 45, 25, 10, 6, 4, 2, 1, 1, 1, 0]; + const V = [8, 15, 25, 40, 55, 75, 85, 92, 96, 98, 100]; + const colors: ResColor = []; + for (let i = 0; i < 11; i++) { + const newHsv = ColorGenerator.hsvCorrection([h, S[i], V[i]]); + const newRgb = ColorGenerator.hsvToRgb(newHsv); + const newHex = ColorGenerator.rgbToHex(newRgb); + colors.push({hex: newHex, hsv: newHsv}); + } + return colors; + } + /** + * 生成功能色 + */ + getFunctionalColor() { + const rgb = ColorGenerator.hexToRgb(this.color); + const [h, s, v] = ColorGenerator.rgbToHsv(rgb); + const errorH = {a: 375.06, b: 0.6, c: 134.93, d: 353.95}; + const warnH = {a: 217.7, b: -0.02, c: 514460.59, d: -118.56}; + const successH = {a: 130.48, b: -0.24, c: 0.00066}; + + const errorS = {a: 95.12, b: 2.34, c: 72.07, d: 69.59}; + const warnS = {a: 95.1, b: 0.53, c: 74.9, d: 66.82}; + const successS = {a: 100.5, b: -6.41, c: 80.99, d: 65.5}; + + const errorV = {a: 100.21, b: -16.63, c: 89.6, d: 83}; + const warnV = {a: 270.03, b: -0.1, c: 1.18, d: -103.6}; + const successV = {a: 81.5, b: -6.31, c: 91.2, d: 64.5}; + + const hs = [ + [ + h === 0 ? 0 : ColorGenerator.functionY(h, errorH) - 3, + ColorGenerator.functionY(s, errorS) - 5, + ColorGenerator.functionY(s, errorV) + 7 + ], + [ + ColorGenerator.functionY(h + 1, warnH) - 7, + ColorGenerator.functionY(s + 1, warnS) + 5, + ColorGenerator.functionY(s + 1, warnV) - 23 + ], + [ + Math.round(successH.a + successH.b * h + successH.c * h * h), + ColorGenerator.functionY(s, successS) + 4, + ColorGenerator.functionY(s, successV) + 4 + ] + ]; + const colors = hs.map(hsv => { + hsv = ColorGenerator.hsvCorrection(hsv); + const newRgb = ColorGenerator.hsvToRgb(hsv); + const hex = ColorGenerator.rgbToHex(newRgb); + return {hex, hsv}; + }); + return colors; + } + + /** + * 生成数据色 + */ + getDataColor() { + const colors = ColorGenerator.getColorPalette(this.color); + const color1 = [ + colors[0], + colors[4], + colors[8], + colors[12], + colors[16], + colors[20], + colors[23] + ]; + const color2 = [ + colors[0], + colors[5], + colors[10], + colors[15], + colors[19], + colors[23], + colors[3] + ]; + const color3 = [ + colors[0], + colors[1], + colors[2], + colors[3], + colors[4], + colors[5], + colors[6] + ]; + + return [color1, color2, color3]; + } + + setPrimaryColor(color: string) { + if (this.reg.test(color)) { + this.color = color; + } else { + throw new Error('请传入十六进制色值'); + } + } + static hexToRgb(hexColor: string) { + if (hexColor.length === 4) { + let hexColorNew = '#'; + for (let i = 1; i < 4; i += 1) { + hexColorNew += hexColor + .slice(i, i + 1) + .concat(hexColor.slice(i, i + 1)); + } + hexColor = hexColorNew; + } + //处理六位的颜色值 + const hexColorChange: number[] = []; + for (let i = 1; i < 7; i += 2) { + hexColorChange.push(parseInt('0x' + hexColor.slice(i, i + 2))); + } + return hexColorChange; + } + static rgbToHex(rgb: number[]) { + const r = rgb[0], + g = rgb[1], + b = rgb[2]; + const hexr = r.toString(16).padStart(2, '0'); + const hexg = g.toString(16).padStart(2, '0'); + const hexb = b.toString(16).padStart(2, '0'); + return '#' + hexr + hexg + hexb; + } + static rgbToHsv(rgb: number[]) { + let r = rgb[0], + g = rgb[1], + b = rgb[2]; + r = r / 255; + g = g / 255; + b = b / 255; + let h = 0, + s, + v; + const min = Math.min(r, g, b); + const max = (v = Math.max(r, g, b)); + const difference = max - min; + + if (max == min) { + h = 0; + } else { + switch (max) { + case r: + h = (g - b) / difference + (g < b ? 6 : 0); + break; + case g: + h = 2 + (b - r) / difference; + break; + case b: + h = 4 + (r - g) / difference; + break; + } + h = Math.round(h * 60); + } + if (max == 0) { + s = 0; + } else { + s = 1 - min / max; + } + s = Math.round(s * 100); + v = Math.round(v * 100); + return [h, s, v]; + } + static hsvToRgb(hsv: number[]) { + let h = hsv[0], + s = hsv[1], + v = hsv[2]; + s = s / 100; + v = v / 100; + let r = 0, + g = 0, + b = 0; + const i = Math.floor((h / 60) % 6); + const f = h / 60 - i; + const p = v * (1 - s); + const q = v * (1 - f * s); + const t = v * (1 - (1 - f) * s); + switch (i) { + case 0: + r = v; + g = t; + b = p; + break; + case 1: + r = q; + g = v; + b = p; + break; + case 2: + r = p; + g = v; + b = t; + break; + case 3: + r = p; + g = q; + b = v; + break; + case 4: + r = t; + g = p; + b = v; + break; + case 5: + r = v; + g = p; + b = q; + break; + default: + break; + } + r = this.rgbCorrection(Math.round(r * 255.0)); + g = this.rgbCorrection(Math.round(g * 255.0)); + b = this.rgbCorrection(Math.round(b * 255.0)); + return [r, g, b]; + } + static hsvCorrection(hsv: number[]) { + let h = hsv[0], + s = hsv[1], + v = hsv[2]; + if (h < 0) { + h = 360 + h; + } + if (h >= 360) { + h = h - 360; + } + if (s < 0) { + s = 0; + } + if (s > 100) { + s = 100; + } + if (v < 0) { + v = 0; + } + if (v > 100) { + v = 100; + } + return [h, s, v]; + } + static rgbCorrection(value: number) { + if (value < 0) { + return 0; + } + if (value > 255) { + return 255; + } + return value; + } + static functionY( + x: number, + coefficient: {a: number; b: number; c: number; d: number} + ) { + const {a, b, c, d} = coefficient; + const res = (a - d) / (1 + Math.pow(x / c, b)) + d; + return Math.round(res); + } + static isLightColor(color: string) { + const rgb = ColorGenerator.hexToRgb(color); + const hsv = ColorGenerator.rgbToHsv(rgb); + return hsv[1] < 20 && hsv[2] > 90; + } + static getFontColor(color: string | undefined) { + if (!color) { + return '#fff'; + } + return ColorGenerator.isLightColor(color) ? '#5C5F66' : '#fff'; + } + + static computedLight(R: number, G: number, B: number) { + const gray = 0.299 * R + 0.587 * G + 0.114 * B; + return {gray, light: (gray / 255) * 100}; + } + + static getColorPalette(color: string, vv: number = 0) { + let rgb = ColorGenerator.hexToRgb(color); + let [h, s, v] = ColorGenerator.rgbToHsv(rgb); + const newColors = []; + + // 原色的灰色模型 + let {gray, light: mainLight} = ColorGenerator.computedLight( + rgb[0], + rgb[1], + rgb[2] + ); + + newColors.push({ + rgb: rgb, + hsv: [h, s, v], + gray, + light: mainLight, + checkedRgb: rgb, + checkedColor: ColorGenerator.rgbToHex(rgb), + checkedGray: gray, + checkedLight: mainLight + }); + + /** 基础校正 */ + + // // 降低亮度 + // if (mainLight > 55) { + // mainLight = mainLight / 2; + // } + + // // 提高饱和度 + // if (s < 70) { + // s = 70 + 70 - s; + // } + + // // 提高饱和度 + // if (v < 70) { + // v = 70 + 70 - v; + // } + + /** ***** */ + + for (let i = 1; i < 24; i++) { + const newH = (h + 15 * i) % 360; + const newRgb = ColorGenerator.hsvToRgb([newH, s, v]); + // 灰度关系 + let {gray, light} = ColorGenerator.computedLight( + newRgb[0], + newRgb[1], + newRgb[2] + ); + + const newColor = { + rgb: rgb, + hsv: [h, s, v], + gray, + light, + checkedRgb: rgb, + checkedColor: ColorGenerator.rgbToHex(rgb), + checkedGray: gray, + checkedLight: light + }; + + let checkedS = s; + let checkedV = v; + // 灰色校正 + let checkedRgb = newRgb; + + // 降低饱和度 + while (mainLight > light && checkedS > 0) { + checkedS--; + checkedRgb = ColorGenerator.hsvToRgb([newH, checkedS, checkedV]); + const {gray: checkedGray, light: checkedLight} = + ColorGenerator.computedLight( + checkedRgb[0], + checkedRgb[1], + checkedRgb[2] + ); + + light = checkedLight; + gray = checkedGray; + } + // 降低明度 + while (mainLight < light && checkedV > 0) { + checkedV--; + checkedRgb = ColorGenerator.hsvToRgb([newH, checkedS, checkedV]); + const {gray: checkedGray, light: checkedLight} = + ColorGenerator.computedLight( + checkedRgb[0], + checkedRgb[1], + checkedRgb[2] + ); + + light = checkedLight; + gray = checkedGray; + } + newColor.checkedLight = light; + newColor.checkedGray = gray; + newColor.checkedRgb = checkedRgb; + newColor.checkedColor = ColorGenerator.rgbToHex(checkedRgb); + newColors.push(newColor); + } + + return newColors; + } +} diff --git a/packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts b/packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts new file mode 100644 index 00000000000..a02854a2627 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts @@ -0,0 +1,299 @@ +import type {PlainObject, ThemeDefinition} from './declares'; + +export class ParseThemeData { + style: string[] = []; + class: string[] = []; + data: ThemeDefinition; + scope: string[]; + theme: string; + constructor(data: ThemeDefinition, scope: string[]) { + this.data = data; + this.scope = scope; + this.theme = data.config.key; + } + + generator() { + const {global, component} = this.data; + const {colors, fonts, borders, sizes, shadows} = global; + this.parseColor(colors); + this.parseFont(fonts); + this.parseGlobalCommon(borders); + this.parseGlobalCommon(sizes); + this.parseSizesBase(sizes); + this.parseShadows(shadows); + for (let key in component) { + if (key === 'button1') { + this.parseButton(component['button1']); + } else if (key === 'inputRating') { + this.parseInputRating(component['inputRating']); + } else { + this.parseComponentCommon(component[key]); + } + } + } + + getStyle() { + return this.getCssVariable() + this.getCustomClass(); + } + + getCssVariable() { + return `${this.scope.join(', ')}{${this.style.join(';')};}\n`; + } + + getCustomClass() { + return `${this.class.join('\n')}`; + } + + /** + * 获取自定义样式，需要使用less或scss编译后使用 + */ + getCustomStyle() { + const customStyle = this.data?.customStyle?.style || ''; + return customStyle; + } + + /** + * 装载css变量 + */ + cssFormat(key: string, value: string) { + if (!value) { + return; + } + this.style.push(`${key}: ${value}`); + } + + /** + * 装载class + */ + classFormat(classname: string, value: string) { + // 自定义的不需要在命名空间下了 + this.class.push(`${classname}{${value}}`); + } + + /** + * 解析全局颜色 + */ + parseColor(colors: any) { + this.cssFormat('--colors-neutral-fill-none', 'translate'); + for (let key in colors) { + const color = colors[key]; + if (key !== 'brand') { + color.body.forEach((item: any) => { + const prefix = item.token; + for (let colorKey in item.body) { + if (colorKey === 'colors') { + item.body.colors.forEach((color: any) => { + this.cssFormat(color.token, color.color); + }); + } else if (!Array.isArray(item.body[colorKey])) { + this.cssFormat(prefix + colorKey, item.body[colorKey]); + } + } + }); + } else { + const prefix = color.token; + for (let colorKey in color.body) { + if (colorKey === 'colors') { + color.body.colors.forEach((color: any) => { + this.cssFormat(color.token, color.color); + }); + } else if (!Array.isArray(color.body[colorKey])) { + this.cssFormat(prefix + colorKey, color.body[colorKey]); + } + } + } + } + } + /** + * 解析全局字体 + */ + parseFont(fonts: any) { + for (let key in fonts) { + const font = fonts[key]; + if (key === 'base') { + let family = ''; + font.body.forEach((item: any, index: number) => { + family += item.value || ''; + if (index !== font.body.length - 1) { + family += ', '; + } + }); + this.cssFormat(font.token, family); + } else { + font.body.forEach((item: any) => { + this.cssFormat(item.token, item.value); + }); + } + } + } + // 解析基础尺寸 + parseSizesBase(item: any) { + const reg = /\d+(\.\d+)?/; + const unitReg = /[^\d\.]+/; + const start = parseFloat(item.size.start.match(reg)[0]); + const base = item.size.base; + const unit = item.size.start.match(unitReg)[0]; + for (let i = 0; i < 50; i++) { + this.cssFormat(`--sizes-base-${i + 1}`, start + i * base + unit); + } + } + /** + * 解析全局样式通用 + */ + parseGlobalCommon(items: any) { + for (let key in items) { + const item = items[key]; + item.body.forEach((i: any) => { + this.cssFormat(i.token, i.value); + }); + } + } + /** + * 解析阴影样式 + */ + parseShadows(items: any) { + const item = items.shadow; + item.body.forEach((i: any) => { + const shadowStyle = i.value.map( + (shadow: any) => + `${shadow.inset ? 'inset' : ''} ${shadow.x} ${shadow.y} ${ + shadow.blur + } ${shadow.spread} ${shadow.color}` + ); + this.cssFormat(i.token, shadowStyle.join(', ')); + }); + } + + /** + * 设置组件样式 + */ + setComponentStyle(key: string, token: string, value: string | PlainObject) { + if (typeof value === 'string') { + this.cssFormat(token + key, value); + } else { + if (key.indexOf('padding-and-margin') > -1) { + for (let k in value) { + this.cssFormat( + token + key.replace('padding-and-margin', '') + k, + value[k] + ); + } + } else if (key.indexOf('size') > -1) { + for (let k in value) { + this.cssFormat(token + key.replace('size', '') + k, value[k]); + } + } else if (key.indexOf('font') > -1) { + for (let k in value) { + this.cssFormat(token + key.replace('font', '') + k, value[k]); + } + } else if (key.indexOf('border') > -1) { + for (let k in value) { + this.cssFormat(token + key.replace('border', '') + k, value[k]); + } + } else { + for (let k in value) { + this.cssFormat(`${token}${k}`, value[k]); + } + } + } + } + /** + * 解析Button + */ + parseButton(button: any) { + const {type, size} = button; + const setButtonCssValue = (token: string, body: any) => { + for (let key in body) { + const data = body[key]; + this.setComponentStyle(key, token, data); + } + }; + for (let item of type) { + ['default', 'hover', 'active', 'disabled'].forEach(state => { + setButtonCssValue(item[state].token, item[state].body); + }); + if (item.custom) { + const fontType = item.type; + const style = (state: string) => + [ + `color: var(--button-${fontType}-${state}-font-color)`, + `background: var(--button-${fontType}-${state}-bg-color)`, + `box-shadow: var(--button-${fontType}-${state}-shadow)`, + `border-width: var(--button-${fontType}-${state}-top-border-width) var(--button-${fontType}-${state}-right-border-width) var(--button-${fontType}-${state}-bottom-border-width) var(--button-${fontType}-${state}-left-border-width)`, + `border-color: var(--button-${fontType}-${state}-top-border-color) var(--button-${fontType}-${state}-right-border-color) var(--button-${fontType}-${state}-bottom-border-color) var(--button-${fontType}-${state}-left-border-color)`, + `border-style: var(--button-${fontType}-${state}-top-border-style) var(--button-${fontType}-${state}-right-border-style) var(--button-${fontType}-${state}-bottom-border-style) var(--button-${fontType}-${state}-left-border-style)` + ].join(';'); + + this.classFormat(`.cxd-Button--${fontType}`, `${style('default')}`); + this.classFormat( + `.cxd-Button--${fontType}:not(:disabled):not(.is-disabled):hover`, + `${style('hover')}` + ); + this.classFormat( + `.cxd-Button--${fontType}:not(:disabled):not(.is-disabled):hover:active`, + `${style('active')}` + ); + } + } + for (let item of size) { + setButtonCssValue(item.token, item.body); + if (item.custom) { + const fontType = item.type; + this.classFormat( + `.cxd-Button--size-${fontType}`, + [ + `font-size: var(--button-size-${fontType}-fonSize)`, + `font-weight: var(--button-size-${fontType}-fontWeight)`, + `line-height: var(--button-size-${fontType}-lineHeight)`, + `min-width: var(--button-size-${fontType}-minWidth)`, + `height: var(--button-size-${fontType}-height)`, + `border-radius: var(--button-size-${fontType}-top-right-border-radius) var(--button-size-${fontType}-top-left-border-radius) var(--button-size-${fontType}-bottom-right-border-radius) var(--button-size-${fontType}-bottom-left-border-radius)`, + `padding: var(--button-size-${fontType}-paddingTop) var(--button-size-${fontType}-paddingRight) var(--button-size-${fontType}-paddingBottom) var(--button-size-${fontType}-paddingLeft)`, + `margin: var(--button-size-${fontType}-marginTop) var(--button-size-${fontType}-marginRight) var(--button-size-${fontType}-marginBottom) var(--button-size-${fontType}-marginLeft)` + ].join(';') + ); + } + } + } + + /** + * 解析Tranfer + */ + parseTransfer(transfer: any) { + for (let typeKey in transfer) { + const token = transfer[typeKey].token; + const body = transfer[typeKey].body; + for (let key in body) { + this.setComponentStyle(key, token, body[key]); + } + } + } + + /** + * 解析inputRating + */ + parseInputRating(inputRating: any) { + const data = JSON.parse(JSON.stringify(inputRating)); + const colors = data.activeColors; + this.cssFormat('--Rating-colors', `'${JSON.stringify(colors)}'`); + delete data.activeColors; + this.parseComponentCommon(data); + } + + // 解析组件通用方法 + parseComponentCommon(component: any) { + if (component.token) { + // 有token时结束递归 + const token = component.token; + for (let key in component.body) { + this.setComponentStyle(key, token, component.body[key]); + } + } else { + for (let key in component) { + if (typeof component[key] === 'object') { + this.parseComponentCommon(component[key]); + } + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/helper/declares.ts b/packages/amis-theme-editor-helper/src/helper/declares.ts new file mode 100644 index 00000000000..dbf4a8d3374 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/declares.ts @@ -0,0 +1,163 @@ +export interface Colors { + main?: string; + none?: string; + colors: { + label: string; + token: string; + color: string; + index: number; + }[]; + common: { + label: string; + id: string; + color: number; + }[]; +} + +export interface Font { + label: string; + token: string; + value?: string | number; + body?: {value: string | number}[]; +} + +export interface Border { + label: string; + token: string; + disabled?: boolean; + value: string; +} + +export interface Size { + label: string; + disabled?: boolean; + token: string; + value: string; +} + +export interface ShadowData { + inset: boolean; + x: string; + y: string; + blur: string; + spread: string; + color: string; +} + +export interface Shadow { + label: string; + token: string; + disabled?: boolean; + value: ShadowData[]; +} + +export interface ThemeDefinition { + version?: string; + config: { + name: string; + key: string; + description: string; + }; + global: { + colors: { + brand: { + token: string; + label: string; + body: Colors; + }; + neutral: { + token: string; + label: string; + body: { + token: string; + label: string; + body: Colors; + }[]; + }; + func: { + token: string; + label: string; + body: { + token: string; + label: string; + body: Colors; + }[]; + }; + data?: { + label: string; + body: { + label: string; + token: string; + colors: {value: string}[]; + custom?: boolean; + }[]; + }; + }; + fonts: { + base: { + label: string; + token: string; + body: {value: string}[]; + }; + size: { + label: string; + token: string; + body: Font[]; + }; + lineHeight: { + label: string; + token: string; + body: Font[]; + }; + weight: { + label: string; + token: string; + body: Font[]; + }; + }; + borders: { + width: { + label: string; + token: string; + body: Border[]; + }; + style: { + label: string; + token: string; + body: Border[]; + }; + radius: { + label: string; + token: string; + body: Border[]; + }; + }; + sizes: { + size: { + label: string; + token: string; + base: number; + body: Size[]; + start: string; + }; + }; + shadows: { + shadow: { + label: string; + token: string; + body: Shadow[]; + }; + }; + }; + component: { + [x: string]: any; + }; + customStyle?: { + [css: string]: string; + }; + icons?: any; +} + +export interface PlainObject { + [propsName: string]: any; +} diff --git a/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts b/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts new file mode 100644 index 00000000000..f357bfa8a0f --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts @@ -0,0 +1,202 @@ +import type {Colors, PlainObject, ThemeDefinition} from './declares'; +const COLORLABELMAP: PlainObject = { + main: '主色', + default: '常规', + active: '点击', + hover: '悬浮', + bg: '背景', + strong: '强调/正文标题', + lessStrong: '次强调/正文标题', + info: '次要信息', + disabledInfo: '置灰信息', + border: '描边/分割线', + cardBg: '卡片背景色', + none: '透明' +}; + +interface Options { + show?: boolean; + label: string; + value: string; + realValue?: any; + children?: Options[]; +} + +export interface GlobalData { + colorOptions?: Options[]; + fontFamilyOptions?: Options[]; + fontSizeOptions?: Options[]; + lineHeightOptions?: Options[]; + fontWeightOptions?: Options[]; + borderRadiusOptions?: Options[]; + borderWidthOptions?: Options[]; + borderStyleOptions?: Options[]; + sizesOptions?: Options[]; + shadowOptions?: Options[]; +} + +export function getGlobalData(data: ThemeDefinition | undefined): GlobalData { + if (!data || !data.global) { + return {}; + } + const {colors, fonts, borders, sizes, shadows} = data.global; + + const colorOptions: Options[] = []; + const fontFamilyOptions: Options[] = []; + const fontSizeOptions: Options[] = []; + const fontWeightOptions: Options[] = []; + const lineHeightOptions: Options[] = []; + const borderRadiusOptions: Options[] = []; + const borderWidthOptions: Options[] = []; + const borderStyleOptions: Options[] = []; + const sizesOptions: Options[] = []; + const shadowOptions: Options[] = []; + + // 解析颜色 + function getGlobalColors(item: {label: string; token: string; body: Colors}) { + const children: Options[] = []; + item.body.common.forEach((common, i: number) => { + children.push({ + label: common.label, + value: `var(${item.token}${common.color + 1})`, + realValue: item.body.colors[common.color].color + }); + }); + // if (item.token === '--colors-neutral-fill-') { + // children.push({ + // label: COLORLABELMAP['none'], + // value: `var(${item.token}none)` + // }); + // } + return { + label: item.label, + value: item.token, + children: children + }; + } + + colorOptions.push({ + label: '品牌色', + value: 'brand', + children: [getGlobalColors(colors.brand)] + }); + + const neutralColors: any = { + label: '中性色', + value: 'neutral', + children: [] + }; + colors.neutral.body.forEach((color, i: number) => { + neutralColors.children.push(getGlobalColors(color)); + }); + colorOptions.push(neutralColors); + const funcColors: any = { + label: '辅助色', + value: 'neutral', + children: [] + }; + colors.func.body.forEach((color, i: number) => { + funcColors.children.push(getGlobalColors(color)); + }); + colorOptions.push(funcColors); + + // 解析文字 + for (let k in fonts) { + let key = k as 'base' | 'size' | 'lineHeight' | 'weight'; + const options = { + size: fontSizeOptions, + lineHeight: lineHeightOptions, + weight: fontWeightOptions + }; + const children: {label: string; value: string; realValue: string}[] = []; + if (key !== 'base') { + fonts[key].body.forEach((font, i: number) => { + children.push({ + label: `${font.label}(${font.value})`, + value: `var(${font.token})`, + realValue: `${font.value}` + }); + }); + options[key].push(...children); + } else { + fonts['base'].body.forEach((font, i: number) => { + children.push({ + label: font.value, + value: font.value, + realValue: font.value + }); + }); + fontFamilyOptions.push(...children); + } + } + + // 解析边框 + for (let k in borders) { + let key = k as 'width' | 'style' | 'radius'; + const options = { + width: borderWidthOptions, + style: borderStyleOptions, + radius: borderRadiusOptions + }; + const children: Options[] = []; + borders[key].body.forEach((border, i: number) => { + children.push({ + label: + key === 'style' ? border.label : `${border.label}(${border.value})`, + realValue: border.value, + value: `var(${border.token})` + }); + }); + options[key].push(...children); + } + + // 解析常用尺寸 + sizes.size.body.forEach(size => { + sizesOptions.push({ + label: `${size.label}(${size.value})`, + value: `var(${size.token})`, + realValue: size.value + }); + }); + + // 解析扩展尺寸 + const baseSizeStart = sizes.size.start; + const baseSizeStartNumber = parseFloat(baseSizeStart); + const baseSizeStartUnit = baseSizeStart.replace( + baseSizeStartNumber.toString(), + '' + ); + const baseSizeBase = sizes.size.base; + + for (let i = 1; i <= 50; i++) { + const realValue = + (i - 1) * baseSizeBase + baseSizeStartNumber + baseSizeStartUnit; + sizesOptions.push({ + label: `尺寸${i}(${realValue})`, + value: `var(--sizes-base-${i})`, + realValue + }); + } + + // 解析阴影 + shadows.shadow.body.forEach(shadow => { + shadowOptions.push({ + label: shadow.label, + value: `var(${shadow.token})`, + realValue: shadow.value + }); + }); + + return { + colorOptions, + fontFamilyOptions, + fontSizeOptions, + lineHeightOptions, + fontWeightOptions, + borderRadiusOptions, + borderWidthOptions, + borderStyleOptions, + sizesOptions, + shadowOptions + }; +} diff --git a/packages/amis-theme-editor-helper/src/helper/styleHelper.ts b/packages/amis-theme-editor-helper/src/helper/styleHelper.ts new file mode 100644 index 00000000000..a4228358c01 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/styleHelper.ts @@ -0,0 +1,72 @@ +import type {PlainObject} from './declares'; + +const styleMap: PlainObject = { + border: ['border-top', 'border-right', 'border-left', 'border-bottom'] +}; + +export function styleBorder(style: CSSStyleDeclaration) { + const styleList = styleMap.border; + const data: PlainObject = {}; + for (const item of styleList) { + const values = style.getPropertyValue(item); + const [border, position] = item.split('-'); + const [borderWidth, borderStyle, ...borderColor] = values.split(' '); + data[`${position}-${border}-width`] = borderWidth; + data[`${position}-${border}-style`] = borderStyle; + data[`${position}-${border}-color`] = borderColor.join(''); + } + return data; +} + +export function styleBackground(style: CSSStyleDeclaration) { + const image = style.getPropertyPriority('background-image'); + let data = image; + if (image === 'none') { + data = style.getPropertyValue('background-color'); + } + return data; +} + +export function getStyleById(id: string, name?: string) { + if (!name) { + return null; + } + let dom: any = document.getElementsByName(id); + if (dom.length === 0) { + return null; + } + dom = dom[0]; + + const list = name.split('.'); + name = list[list.length - 1]; + const [styleName] = name.split(':'); + const style = getComputedStyle(dom); + let data: any = {}; + switch (styleName) { + case 'border': + data = styleBorder(style); + break; + case 'color': + data = style.getPropertyValue('color'); + break; + case 'background': + data = styleBackground(style); + break; + } + return data; +} + +export function getCssVarByName( + name: string, + className: string = '.ThemeEditor-body-content-item-content' +): string { + name = name?.replace('var', '').replace('(', '').replace(')', ''); + try { + const res = getComputedStyle( + document.querySelector(className)! + ).getPropertyValue(name); + return res; + } catch (error) { + return ''; + } +} diff --git a/packages/amis-theme-editor-helper/src/helper/styleOperation.ts b/packages/amis-theme-editor-helper/src/helper/styleOperation.ts new file mode 100644 index 00000000000..411179dfc09 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/styleOperation.ts @@ -0,0 +1,21 @@ +export function findOrCreactStyle(id: string) { + let varStyleTag = document.getElementById(id); + if (!varStyleTag) { + varStyleTag = document.createElement('style'); + varStyleTag.id = id; + document.body.appendChild(varStyleTag); + } + return varStyleTag; +} + +export function insertStyle(style: string, id: string) { + const varStyleTag = findOrCreactStyle(id); + // bca-disable-line + varStyleTag.innerHTML = style; +} + +export function addStyle(style: string, id: string) { + const varStyleTag = findOrCreactStyle(id); + // bca-disable-line + varStyleTag.innerHTML += style; +} diff --git a/packages/amis-theme-editor-helper/src/icons/add-button.svg b/packages/amis-theme-editor-helper/src/icons/add-button.svg new file mode 100644 index 00000000000..823e62af818 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/add-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/checkbox-check.svg b/packages/amis-theme-editor-helper/src/icons/checkbox-check.svg new file mode 100644 index 00000000000..1e2e5308608 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/checkbox-check.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/checkbox.svg b/packages/amis-theme-editor-helper/src/icons/checkbox.svg new file mode 100644 index 00000000000..33a789af6b3 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/checkbox.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/code.svg b/packages/amis-theme-editor-helper/src/icons/code.svg new file mode 100644 index 00000000000..ab70ed86459 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/code.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg b/packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg new file mode 100644 index 00000000000..994ffbc414b --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/packages/amis-theme-editor-helper/src/icons/color-picker-img.svg b/packages/amis-theme-editor-helper/src/icons/color-picker-img.svg new file mode 100644 index 00000000000..85c7eda9b2b --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/color-picker-img.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/packages/amis-theme-editor-helper/src/icons/component.svg b/packages/amis-theme-editor-helper/src/icons/component.svg new file mode 100644 index 00000000000..8fd023305b7 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/component.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/custom.svg b/packages/amis-theme-editor-helper/src/icons/custom.svg new file mode 100644 index 00000000000..2dc1ca5be01 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/custom.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/delete-button.svg b/packages/amis-theme-editor-helper/src/icons/delete-button.svg new file mode 100644 index 00000000000..e466083d2df --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/delete-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/global.svg b/packages/amis-theme-editor-helper/src/icons/global.svg new file mode 100644 index 00000000000..bc67e48b174 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/global.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/index.tsx b/packages/amis-theme-editor-helper/src/icons/index.tsx new file mode 100644 index 00000000000..31342671a1c --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/index.tsx @@ -0,0 +1,54 @@ +import {registerIcon, Icon} from 'amis'; + +import CheckboxCheck from './checkbox-check.svg'; +import Checkbox from './checkbox.svg'; +import Code from './code.svg'; +import Component from './component.svg'; +import Global from './global.svg'; +import Custom from './custom.svg'; +import Lock from './lock.svg'; +import Unlock from './unlock.svg'; +import Italic from './italic.svg'; +import Underline from './underline.svg'; +import LineThrough from './line-through.svg'; +import textLeft from './text-left.svg'; +import textCenter from './text-center.svg'; +import textRight from './text-right.svg'; +import textJustify from './text-justify.svg'; +import verticalTop from './vertical-top.svg'; +import verticalMiddle from './vertical-middle.svg'; +import verticalBottom from './vertical-bottom.svg'; + +registerIcon('checkbox-check', CheckboxCheck); +registerIcon('checkbox', Checkbox); +registerIcon('code', Code); +registerIcon('component', Component); +registerIcon('global', Global); +registerIcon('custom', Custom); +registerIcon('lock', Lock); +registerIcon('unlock', Unlock); +registerIcon('italic', Italic); +registerIcon('underline', Underline); +registerIcon('line-through', LineThrough); +registerIcon('text-align-left', textLeft); +registerIcon('text-align-center', textCenter); +registerIcon('text-align-right', textRight); +registerIcon('text-align-justify', textJustify); +registerIcon('vertical-align-top', verticalTop); +registerIcon('vertical-align-middle', verticalMiddle); +registerIcon('vertical-align-bottom', verticalBottom); + +import AddButton from './add-button.svg'; +registerIcon('add-button', AddButton); + +import DeleteButton from './delete-button.svg'; +registerIcon('delete-button', DeleteButton); + +// 颜色选择器 +import ColorPickerImg from './color-picker-img.svg'; +import ColorPickerImgActive from './color-picker-img-active.svg'; + +registerIcon('color-picker-img', ColorPickerImg); +registerIcon('color-picker-img-active', ColorPickerImgActive); + +export {Icon}; diff --git a/packages/amis-theme-editor-helper/src/icons/italic.svg b/packages/amis-theme-editor-helper/src/icons/italic.svg new file mode 100644 index 00000000000..56c7e62ed08 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/italic.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/line-through.svg b/packages/amis-theme-editor-helper/src/icons/line-through.svg new file mode 100644 index 00000000000..af74c3305ed --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/line-through.svg @@ -0,0 +1,16 @@ + + + + + + + + S + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/lock.svg b/packages/amis-theme-editor-helper/src/icons/lock.svg new file mode 100644 index 00000000000..e4bdfe25d93 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/lock.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-center.svg b/packages/amis-theme-editor-helper/src/icons/text-center.svg new file mode 100644 index 00000000000..33c1c6c73a2 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-center.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-justify.svg b/packages/amis-theme-editor-helper/src/icons/text-justify.svg new file mode 100644 index 00000000000..bd9ae851252 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-justify.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-left.svg b/packages/amis-theme-editor-helper/src/icons/text-left.svg new file mode 100644 index 00000000000..f6a39dbbfc0 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-left.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-right.svg b/packages/amis-theme-editor-helper/src/icons/text-right.svg new file mode 100644 index 00000000000..c9f38c75ead --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-right.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/underline.svg b/packages/amis-theme-editor-helper/src/icons/underline.svg new file mode 100644 index 00000000000..fdd0bcb357d --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/underline.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/unlock.svg b/packages/amis-theme-editor-helper/src/icons/unlock.svg new file mode 100644 index 00000000000..7e806b28c60 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/unlock.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg b/packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg new file mode 100644 index 00000000000..d983518398e --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/vertical-middle.svg b/packages/amis-theme-editor-helper/src/icons/vertical-middle.svg new file mode 100644 index 00000000000..e40935277ed --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/vertical-middle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/vertical-top.svg b/packages/amis-theme-editor-helper/src/icons/vertical-top.svg new file mode 100644 index 00000000000..8cc8166a218 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/vertical-top.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/index.ts b/packages/amis-theme-editor-helper/src/index.ts new file mode 100644 index 00000000000..4f0c461d663 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/index.ts @@ -0,0 +1,10 @@ +export * from './helper/ColorGenerator'; +export * from './helper/ParseThemeData'; +export * from './helper/declares'; +export * from './helper/getGlobalData'; +export * from './helper/styleOperation'; +export * from './systemTheme/index'; +export * from './helper/styleHelper'; +export * from './renderers/index'; +import './locale/index'; +import './style/index.scss'; diff --git a/packages/amis-theme-editor-helper/src/locale/en-US.ts b/packages/amis-theme-editor-helper/src/locale/en-US.ts new file mode 100644 index 00000000000..39a146e88c9 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/locale/en-US.ts @@ -0,0 +1,233 @@ +import {extendLocale} from 'i18n-runtime'; + +extendLocale('en-US', { + '8f6ea8f1a35f96ba401e4fce9ddeb4b0': + 'Please pass in the hexadecimal color value', + 'fbae87bcc352f6933541fb77a07418ed': 'Primary color', + '22b777e6fcb613b8ba83ced9594cd07e': 'Ordinary', + '4363c17ebb346b646af55bd8c8075915': 'Click', + '062d0b688adb10f3af5ebc2fd2667f1c': 'Floating', + '8e1b944f4389bdaab6f11d5bc83190c8': 'Background', + 'd5fa0ac3fb033291acadd025db40cf8c': 'Highlight/text title', + '7835fd1dece3cf3750cb0db039b2ae73': 'Sub-highlight/text title', + 'b97ef9fe546e82e4b5f84661006a8ca7': 'Secondary information', + '54c155a9c985b0244666f36abe342b7a': 'Gray information', + '8318e9299a55c306333b4a2a43dbb6e2': 'Stroke/Divide Line', + '9f83cbd8f26e028346ecb459c4be9c01': 'Card background color', + '1110ba0bda5a251c55247f122e923848': 'transparent', + '2b250fe214bc8b93fb78d795a47d7a6c': 'Brand color', + 'af09bd51b66a26d8db3119e95b5d28fe': 'Neutral color', + 'b6c3e2dcf4053e5f24d15b63a29f5afd': 'Auxiliary color', + 'a2de03c5b7ec653d8eadaeeb9043d41a': 'Size {{@1}} ({{@2}})', + 'cc4c575642609fbf059a5df81eb86bfc': 'Solid line', + '61f6f4fc0b806ac9d41ad0792e6155f6': 'Dashed line', + 'b1e0ebac23ed95807ecc566da3ffab48': 'Dotted line', + 'd81bb206a889656035b929cd8bb1ef10': 'nothing', + 'e0dfa25ebceabddb2180720d36d4c3b6': 'border-top ', + 'a8b0c20416853bda54120bf19477ad11': 'whole', + 'a80a25b59908402cf7ee31a07d0e7739': 'border-left ', + '57463587977a534f7859eb9d7c536629': 'border-right ', + '154d5216e42c916884431f0eea951999': 'bottom', + 'a4f758412c3797290c957544c56db443': 'Inherit General', + 'd8a4e8cdc29e9aa576e669ed165892c9': 'Configure separately', + 'aa05fd09a619ddbf07d8d903e6d32c5e': 'currency', + 'ee5841a88da34c5a0e0515c4d863752a': 'Transparent', + '517c1de3f9f069c1c33003ec8d75c3da': 'Enter color values or name search', + 'd6a80fc3f53d0b11e5f96a538b096c06': 'Color not matched', + 'c7706039e8ad85969df13ce3458d199a': 'Gradient angle', + '21f3929a4484e6e992af64ec1dd3a576': 'Original size', + '0f1fd39145bad43e18f81337e0144c8c': 'Full of', + 'e0d76824dfe5e09c7068b44f605266d2': 'appropriate', + 'e39d3b7a3600d9327221a637f910fc0b': 'stretching', + 'e1ff2c83c09f2dc6cc74ae02ab6b8222': 'Tile', + '7ddd9dbf373f760acfd63778469b5c4b': 'Horizontal tiling', + '4ab931e0f709f9b493e660156925a113': 'Tile Vertically', + '61a87a021904dc65995e99d4c476cb21': 'Image position', + '7778401c65bfef9c0ad4d543e3b5b310': 'Common Colors', + '769d88e425e03120b83ee4ed6b9d588e': 'complete', + '95b351c86267f3aedf89520959bce689': 'edit', + 'ec8baa57611b5a89a37b31c7432a01d7': 'Click on the color above to add', + 'a1c76c6e1bd796959e536718e04d10ca': 'Theme Colors', + '255f442c4a1b92624a6e96541202a0be': 'Custom Colors', + '879f4e7bd863a00f77d30f05076ac6cb': '1.3x', + '4905c69b940b0d94cf8aec83bc8dcc83': '1.5x', + '268c43e529c54fb458397b9c13351a67': '1.7x', + 'efb399e557c1f444ba215c8e2dbfb891': 'Bold Simplified', + '4e9edbb054a1fc52fe2012ff8cb3b20e': 'Blackbody Complex', + 'bd8e7ebd31bd804a20986f7dd3739900': 'Holly Black Simplified Chinese', + 'd55a1b98030839c3ce3606d7d2c80235': 'Pingfang Hong Kong', + 'c9045965fa0fbf29323518d79c9da0f1': 'Ping Fang Jian', + 'c1ef096e25d96c451fd39c172b3f569a': 'Pingfang Fanfan', + '09e4d5659a11cf8a55f59e867b30ab75': 'Song typeface - Simplified Chinese', + '56d3dcaab79fe10dfbc4b80f0d9d72a4': 'Song typeface complex', + '2c1605abdc63ac897a76aeba5dcf36a4': 'Chinese Bold', + 'db37a0bd2e60503e939e8eee02511550': 'Chinese Song typeface', + '81d6da77d656c6a9c3cbd795ae4444ea': 'italic', + 'f6f8ea0815881fe9a4aa9352a7fe2299': 'Underline', + 'a120a873412470089bec1dfd1b581fc9': 'Strikethrough', + '413f48cc71f71083ce532a86e3efdc21': 'Align Left', + '56c17ba6a56c01706ae00a31611deb03': 'Align Center', + 'fd8e9572cc6bf87653c4d8f8b8dd0db9': 'Align Right', + 'da1b972efb29f850b50e219ad4d98ba5': 'Align Both Ends', + '2af8c8235ae57c6a7486883f86701ab3': 'Top alignment', + '8bc0ba58bf73b03668ca9b6a74c99f89': 'align vertical center', + 'a6d154c4db5068074e32863821c450e1': 'Bottom ', + '9c07532d0c9acfecfc4ec2eb265c3e03': 'character', + 'c988dd65ce45c335db5c4354eec7c110': 'Word weight', + '17169fd8c2ffa82c4e1d08e7267725f4': 'Row height', + '8456bc40d48da5af833f1c63385e9879': 'font', + 'df68a5dc8f8847179b7afdf943f80796': 'Upper left corner', + 'e717b4ae480e7c073fd5a44647a7f0da': 'Upper right corner', + '2a97dfb2d236c87c41fd588f006111dc': 'Lower left corner', + '1c9bc9dab33944e953412f8b22cb024a': 'Lower right corner', + '9cf15d01ed2846c4104d1607836bbe79': 'Shadow preview', + 'f1d4ff50f3828f9b73412e7d94e6dd6e': 'custom', + '803205e38834280d9e6a75993ac00764': 'shadow', + '6f9c7d7109f2b4b5a759359a455201e9': 'No Shadow', + '26db990dad6d76c6725375b24c0941e1': 'Shadow layer', + 'b24a723b73f96ab3340fe9502370ee13': 'Inner Shadow', + '92d393c2ae53f424856479d090de718f': 'External genitalia shadow', + '203bab8001257b60e1aed951a0939393': 'vague', + '2dc90225b8033d17c41b08f39fa42de2': 'extend', + '48110cb1579623335cf6a1e2327e5af1': 'Lock Scale', + '17399f02e23b5f5b9b3dedee03a2d538': 'Unlock', + 'a2b62974f4d7564bb68b570116f25a10': 'Minimum width', + 'e4e625f8f933ccfd0fe44a41fb02655f': 'Extended Configuration', + '3e42b9d1f06cd5ad39c37d93fd98329d': 'Imitate Antd', + '00a42062d24846499934cf5c753aedfe': 'Platform preset themes', + '1c61673194f8543ead4128ce52a79f5f': 'Basic font', + '94d322455c11e7666f5448ce1c4c14cd': 'Operations Title - Large', + 'e291cdc6b012b1ed5b8243fdaa44c204': 'Operations Title - Medium', + 'd20e34eb25d164b3a868e12b710b9a27': 'Operations Title - Small', + '701a94041742976d6f5ebf2450b60ed2': 'Title - Large', + 'cae9d44e7f6bb7fc305ed3ed97d420a9': 'Title - Middle', + '39a7ffed69e7f163bb0b163af441a4a3': 'Title - Small', + '15d1505fc16b73315b2a0e2a923743b6': 'Body General Large', + '64de1d8e51342a0de719f676a8ae5d15': 'Body General Small', + 'deefca7e66ebaac1ed4f27655961286c': 'Watermark Text', + 'fc55aff8c7e01416e93ac218d98b3b74': 'Font size', + 'f72ce9ad683cc82e0eab557ffc9c67a0': 'Extra small', + '23ecf42cada8bf2715792d718544d107': 'minimum', + '391b8fa9c747a1799353ab856e666ad5': 'small', + 'fd6e80f1e0199d6ecc3ee81ae04aa9ef': 'normal', + 'aed1dfbc31703955e64806b799b67645': 'in', + 'ab18e30c0dc4093ceeda8961fac3d1f4': 'large', + '973d9d0bcdbcdbec6de879c1572c2300': 'maximum', + '3386da5f56fac758ed0f18e024ecb943': 'Extra large', + 'c8339fd2a85af4ba66084d28df808de4': 'size', + '82832013777f9ec3a3406c0f771ddbc1': 'Failure Color', + '07d5f1fb5d239633dc4b2ddce27b52de': 'Warning color', + 'd2775b9d4d00a2ca7414635618c6e802': 'Success Color', + 'd3770b4e046c533df1946eb5a2763a54': 'Link Color', + '6b5040281083fce17fd3e8006d9a7cc3': 'Prompt color', + 'cf4d9e177b415e58c29371b9b22f3390': 'Other colors', + '4b4dc05ed0aa65da0abdb8cb92ae1fb3': 'Auxiliary instructions', + '710ad08b11419332713360d2750cd707': 'Disabled', + '35796bb8ca4342a4390dfb3c464bebb4': 'Pure white text', + 'ca746b1ff10193a3ce20878dec04a733': 'characters', + '2a03e7cc0afd5fc3519cd06bf59b538f': 'Pure white filling', + 'da3cfffa69723748fecfc8e964b7996e': 'Light/Disable Background', + '8c47ecd40d7f739e308567de89accd56': 'Division line', + '40fab37fcc50ecd7d9a570a24757a503': 'Deep/gray bottom suspension', + '756e44b36d4d962cef2732db02aefdd1': 'filling', + 'b37c14c49311fc0cd3288af9925808c8': 'shallow', + '21ac5a493ae8ab9bba043ca126433ca9': 'deep', + 'fa7132688004917a89ed807b5be00d27': 'heavy', + '84fe608676a8fe47637b824434cb225d': 'line', + '328215447d0e128a845729dab5ce9837': 'Data color', + '18c63459a2c069022c7790430f761214': 'default', + 'e7c37575b8b33fca7c8e94f712aa2385': 'classical', + 'fb2936372e13759bd6a6e113fcbafb68': 'transition', + '39003734d1d700d5bd97bf1e7a2fcf73': 'style', + '48d67284c554350eea37fc8762e447a1': 'Medium thick', + '804c19b95172c55f1796babbbb770899': 'Extra thick', + 'fb0af8105da1f0f57ce265340239a376': 'thickness', + 'c121ed6712e8231da4e3803e6eaf703c': 'Fillet 1', + 'ae15c0d31ae01fcea65b7e483f1b942d': 'Fillet 2', + '829fbc73be5187c3f3d4e403e8cbecbc': 'Fillet 3', + 'a797a13eef06c6b3ea2d52f60d216259': 'Fillet 4', + 'c02a7a69675e7cf1abeae6d279670471': 'Fillet 5', + 'f4276b865c626bb67ac41013c6da0317': 'Fillet 6', + '0103eb2d3dca70270d1a74e9ec987ac9': 'fillet', + 'efababbf5f440be0e19e40f4369b5ac1': 'Shadow sm', + '658cd4f2239e0d04e596ec1f65d5f9df': 'Shadow MD', + '940e477cb0b6a7a847862db402b79c07': 'Shadow lg', + '9ed233fc6677d73b458d45b250ecc3a1': 'Shadow xl', + 'c08787dc714fd5d7b2a1217b3d4afe8d': 'Shadow 2xl', + 'b3bb412da3c93f51b935c5df4759b7a6': 'Default General', + '77602d53a9b948cb43c9affb46ea4a6f': 'Default levitation', + '62c5ed2938e91f0589e6333d9c5c124f': 'Default click', + 'b3dad626b64ac5063c6a1e88f8a88322': 'Disabled by default', + '00dc03d70dd2321afa1c18b2186e7e2b': 'main', + 'bde770827b9137ddb3eb676878af9709': 'secondary', + '9a5e272968e173fb42c66a56eb93e4a7': 'enhance', + 'd8c7e04c8e2be23dd3b81a31db6e04f1': 'information', + '330363dfc524cff2488f2ebde0500896': 'success', + '900c70fa5f7dbc014e6f762d5e0e885c': 'warning', + '540f84ddc0883866b229f71c2844199a': 'danger', + '48d0a09bdd5fe7e89f0a445b0ffdf14f': 'Light color', + '41e8e8b9935c9ee4e88b06643a2d5b81': 'Dark color', + 'bfe68d5844f8e54602760e18f45954f7': 'link', + 'eadd05ba6a99ca43492efe5dad7325ad': 'secondary', + 'b6453aea1848b65a9a76cccca94715ec': 'Basic configuration', + 'c3e817974de836e80c95cc6ce5718eff': 'Search box', + '829abe5a8dcd0579a340d20636b59276': 'grouping', + 'd58ba4b5e94680fcb08300e176502fb8': 'Tabular form', + '7600db82433e763d16e3f1e91aa4ab80': 'Tree form', + 'd2fedacfc0f313fcc5d0a24d4d6d81db': 'Cascade selection', + '09bbfb387dce6201df1ccef2aab161a6': 'Clearable', + '94621f44f98c996e49d5b214aebefffc': 'word count ', + '56f40e132c8369340439255fa1073070': 'Single line input box', + '8685115115e4f8c8daf97a31528721ff': 'Multiline input box', + '57d14839d1098d99811f44d68dd0957e': 'Prefix/Suffix', + '055293fb3cf2b1fcbc60317a2ae6916a': 'Password input box', + '67b958a2d172f2b3474629f9f6724109': 'Additional components', + '97d07614380da93d257f9fbf81aa56fb': 'text', + 'e1371d733ff347664655629011b4130f': 'Basic Style', + '6d609769ad11b37dd509ec06362f0b73': 'Enhanced version', + '3e08fbf3806981c18666fff59718c85c': 'With unit selection', + 'ec1323a8ba34dd36b33e4e6baf22f076': 'Unit selector', + 'f99484b21ba7a64a748c60b52ea0401e': 'Column display', + 'd58a55bceec7591f43232e958928ed10': 'shut', + '8493205602379573013b8d3335981175': 'open', + '911bafa046cd76ecbc80ae199bd4a6e8': 'Switch Description', + 'fb090c01ee012eac2bb26751aeb5a3c4': 'Switch status text', + 'c4b07f2e6b60c5752a70551ff77ccedf': 'Default state', + 'db98f889ce6bc235e66bd4b2a788d137': 'check box', + '5ef69f62dc668c1a3e68b51c50a2530a': 'icon', + '6bfb9bb2218ff32b6139e98bc93707c0': 'Image upload', + '443f46c76ebe6ec4eb502f95c451e4b0': 'Multiple Choice', + '73e0299c2fb3a564af0a7cff42540542': 'Group mode', + '0e2eeb150583b23ed4234d58b81c18e4': 'Table Mode', + 'c2981042c21c8b5fa4451337d484d7db': 'Tree mode', + 'df011658c33f610e9b9d3302909a7f2b': 'range', + '4092ed98e9035652d4c9ca9441701ed7': 'basic', + '3fea7ca76cdece641436d7ab0d02ab1b': 'state', + '528c13332418466dba644a1bde0d1fdd': 'Punctate', + 'eedfc4d3b93ca4831e94efa2ac3be6f8': 'Simple mode', + '0796ba76b4b553687e5ffaeb78512ccb': 'basis', + '035692d6fc368765e391602aad0bf39a': 'Add Icon', + 'ea15ae2b7fba76c83eec6d0986d15197': 'option', + 'b05a75d95e71561fccc84306c95388e0': 'Popup Options', + '02d9819ddaaaeb1b7b22b12608c7e5ca': 'prompt', + '19de37513f3cb55919d32c0d559a0559': 'Small size', + '8aa7e04f48d51d5cd37ca94866187904': 'Normal size', + '21814e10b7abc9e05e6fc3b505b34844': 'Large size', + '2009e3d873e6f5e0978b1e123692c024': 'Facial labels', + '8cc6e3e65831f4e034d2a9ce6c68863a': 'Linear label', + '507d869237db8b0c47b07bdf824d4ae2': 'Status label', + '01f2895cef02a670e0268e1f97ee9445': 'Color status', + 'a465db53b8c98f42caa15ca5662f9c90': 'direction', + '533fbb06156c17f0040128567708d23e': 'Configure different states', + '240210b3088bcbea7588047000e89d9e': 'Default Style', + '16a20243f9b741c08216dc9548de2968': 'whole', + '3bdd08adab6ea90b9164b20a0e4151ac': 'describe', + '3fca5e5be30a99b8ca5e14173773f47c': 'Picture Item', + '32c65d8d7431e76029678ec7bb73a5ab': 'title', + 'e84ef1c5e5128107492f6813fa9a396b': 'Custom Columns', + '1f23b9dd74b629ba5bfd5eaf8e2f498d': 'Large size', + 'c0215e2abf0fe27597acba2be64f6993': 'Small size', + '93dee976f68681ec6950380d757d8c18': 'Multiple selection mode', + '9be232c5cffa019aab21bd631ff23462': 'Yunshe', + '1dfba2e7e2df2efc4a25f4f2adcba25e': 'System preset theme' +}); diff --git a/packages/amis-theme-editor-helper/src/locale/index.ts b/packages/amis-theme-editor-helper/src/locale/index.ts new file mode 100644 index 00000000000..8cde39a27a6 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/locale/index.ts @@ -0,0 +1,2 @@ +import './en-US'; +import './zh-CN'; diff --git a/packages/amis-theme-editor-helper/src/locale/zh-CN.ts b/packages/amis-theme-editor-helper/src/locale/zh-CN.ts new file mode 100644 index 00000000000..c522428a840 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/locale/zh-CN.ts @@ -0,0 +1,232 @@ +import {extendLocale} from 'i18n-runtime'; + +extendLocale('zh-CN', { + '8f6ea8f1a35f96ba401e4fce9ddeb4b0': '请传入十六进制色值', + 'fbae87bcc352f6933541fb77a07418ed': '主色', + '22b777e6fcb613b8ba83ced9594cd07e': '常规', + '4363c17ebb346b646af55bd8c8075915': '点击', + '062d0b688adb10f3af5ebc2fd2667f1c': '悬浮', + '8e1b944f4389bdaab6f11d5bc83190c8': '背景', + 'd5fa0ac3fb033291acadd025db40cf8c': '强调/正文标题', + '7835fd1dece3cf3750cb0db039b2ae73': '次强调/正文标题', + 'b97ef9fe546e82e4b5f84661006a8ca7': '次要信息', + '54c155a9c985b0244666f36abe342b7a': '置灰信息', + '8318e9299a55c306333b4a2a43dbb6e2': '描边/分割线', + '9f83cbd8f26e028346ecb459c4be9c01': '卡片背景色', + '1110ba0bda5a251c55247f122e923848': '透明', + '2b250fe214bc8b93fb78d795a47d7a6c': '品牌色', + 'af09bd51b66a26d8db3119e95b5d28fe': '中性色', + 'b6c3e2dcf4053e5f24d15b63a29f5afd': '辅助色', + 'a2de03c5b7ec653d8eadaeeb9043d41a': '尺寸{{@1}}({{@2}})', + 'cc4c575642609fbf059a5df81eb86bfc': '实线', + '61f6f4fc0b806ac9d41ad0792e6155f6': '虚线', + 'b1e0ebac23ed95807ecc566da3ffab48': '点线', + 'd81bb206a889656035b929cd8bb1ef10': '无', + 'e0dfa25ebceabddb2180720d36d4c3b6': '上边框', + 'a8b0c20416853bda54120bf19477ad11': '全部', + 'a80a25b59908402cf7ee31a07d0e7739': '左边框', + '57463587977a534f7859eb9d7c536629': '右边框', + '154d5216e42c916884431f0eea951999': '下边框', + 'a4f758412c3797290c957544c56db443': '继承常规', + 'd8a4e8cdc29e9aa576e669ed165892c9': '分别配置', + 'aa05fd09a619ddbf07d8d903e6d32c5e': '通用', + 'ee5841a88da34c5a0e0515c4d863752a': '透明-transparent', + '517c1de3f9f069c1c33003ec8d75c3da': '输入色值或名称搜索', + 'd6a80fc3f53d0b11e5f96a538b096c06': '未匹配到颜色', + 'c7706039e8ad85969df13ce3458d199a': '渐变角度', + '21f3929a4484e6e992af64ec1dd3a576': '原始尺寸', + '0f1fd39145bad43e18f81337e0144c8c': '充满', + 'e0d76824dfe5e09c7068b44f605266d2': '合适', + 'e39d3b7a3600d9327221a637f910fc0b': '拉伸', + 'e1ff2c83c09f2dc6cc74ae02ab6b8222': '平铺', + '7ddd9dbf373f760acfd63778469b5c4b': '横向平铺', + '4ab931e0f709f9b493e660156925a113': '纵向平铺', + '61a87a021904dc65995e99d4c476cb21': '图片位置', + '7778401c65bfef9c0ad4d543e3b5b310': '常用颜色', + '769d88e425e03120b83ee4ed6b9d588e': '完成', + '95b351c86267f3aedf89520959bce689': '编辑', + 'ec8baa57611b5a89a37b31c7432a01d7': '点击上方颜色添加', + 'a1c76c6e1bd796959e536718e04d10ca': '主题颜色', + '255f442c4a1b92624a6e96541202a0be': '自定义颜色', + '879f4e7bd863a00f77d30f05076ac6cb': '1.3倍', + '4905c69b940b0d94cf8aec83bc8dcc83': '1.5倍', + '268c43e529c54fb458397b9c13351a67': '1.7倍', + 'efb399e557c1f444ba215c8e2dbfb891': '黑体-简', + '4e9edbb054a1fc52fe2012ff8cb3b20e': '黑体-繁', + 'bd8e7ebd31bd804a20986f7dd3739900': '冬青黑体简体中文', + 'd55a1b98030839c3ce3606d7d2c80235': '苹方-港', + 'c9045965fa0fbf29323518d79c9da0f1': '苹方-简', + 'c1ef096e25d96c451fd39c172b3f569a': '苹方-繁', + '09e4d5659a11cf8a55f59e867b30ab75': '宋体-简', + '56d3dcaab79fe10dfbc4b80f0d9d72a4': '宋体-繁', + '2c1605abdc63ac897a76aeba5dcf36a4': '华文黑体', + 'db37a0bd2e60503e939e8eee02511550': '华文宋体', + '81d6da77d656c6a9c3cbd795ae4444ea': '斜体', + 'f6f8ea0815881fe9a4aa9352a7fe2299': '下划线', + 'a120a873412470089bec1dfd1b581fc9': '删除线', + '413f48cc71f71083ce532a86e3efdc21': '左对齐', + '56c17ba6a56c01706ae00a31611deb03': '居中对齐', + 'fd8e9572cc6bf87653c4d8f8b8dd0db9': '右对齐', + 'da1b972efb29f850b50e219ad4d98ba5': '两端对齐', + '2af8c8235ae57c6a7486883f86701ab3': '顶对齐', + '8bc0ba58bf73b03668ca9b6a74c99f89': '垂直居中对齐', + 'a6d154c4db5068074e32863821c450e1': '底对齐', + '9c07532d0c9acfecfc4ec2eb265c3e03': '字符', + 'c988dd65ce45c335db5c4354eec7c110': '字重', + '17169fd8c2ffa82c4e1d08e7267725f4': '行高', + '8456bc40d48da5af833f1c63385e9879': '字体', + 'df68a5dc8f8847179b7afdf943f80796': '左上角', + 'e717b4ae480e7c073fd5a44647a7f0da': '右上角', + '2a97dfb2d236c87c41fd588f006111dc': '左下角', + '1c9bc9dab33944e953412f8b22cb024a': '右下角', + '9cf15d01ed2846c4104d1607836bbe79': '阴影预览', + 'f1d4ff50f3828f9b73412e7d94e6dd6e': '自定义', + '803205e38834280d9e6a75993ac00764': '阴影', + '6f9c7d7109f2b4b5a759359a455201e9': '无阴影', + '26db990dad6d76c6725375b24c0941e1': '阴影层', + 'b24a723b73f96ab3340fe9502370ee13': '内阴影', + '92d393c2ae53f424856479d090de718f': '外阴影', + '203bab8001257b60e1aed951a0939393': '模糊', + '2dc90225b8033d17c41b08f39fa42de2': '扩展', + '48110cb1579623335cf6a1e2327e5af1': '锁定比例', + '17399f02e23b5f5b9b3dedee03a2d538': '解除锁定', + 'a2b62974f4d7564bb68b570116f25a10': '最小宽度', + 'e4e625f8f933ccfd0fe44a41fb02655f': '扩展配置', + '3e42b9d1f06cd5ad39c37d93fd98329d': '仿Antd', + '00a42062d24846499934cf5c753aedfe': '平台预设主题', + '1c61673194f8543ead4128ce52a79f5f': '基础字体', + '94d322455c11e7666f5448ce1c4c14cd': '运营标题-大', + 'e291cdc6b012b1ed5b8243fdaa44c204': '运营标题-中', + 'd20e34eb25d164b3a868e12b710b9a27': '运营标题-小', + '701a94041742976d6f5ebf2450b60ed2': '标题-大', + 'cae9d44e7f6bb7fc305ed3ed97d420a9': '标题-中', + '39a7ffed69e7f163bb0b163af441a4a3': '标题-小', + '15d1505fc16b73315b2a0e2a923743b6': '正文-常规-大', + '64de1d8e51342a0de719f676a8ae5d15': '正文-常规-小', + 'deefca7e66ebaac1ed4f27655961286c': '水印文字', + 'fc55aff8c7e01416e93ac218d98b3b74': '字号', + 'f72ce9ad683cc82e0eab557ffc9c67a0': '特小', + '23ecf42cada8bf2715792d718544d107': '极小', + '391b8fa9c747a1799353ab856e666ad5': '小', + 'fd6e80f1e0199d6ecc3ee81ae04aa9ef': '正常', + 'aed1dfbc31703955e64806b799b67645': '中', + 'ab18e30c0dc4093ceeda8961fac3d1f4': '大', + '973d9d0bcdbcdbec6de879c1572c2300': '极大', + '3386da5f56fac758ed0f18e024ecb943': '特大', + 'c8339fd2a85af4ba66084d28df808de4': '尺寸', + '82832013777f9ec3a3406c0f771ddbc1': '失败色', + '07d5f1fb5d239633dc4b2ddce27b52de': '警告色', + 'd2775b9d4d00a2ca7414635618c6e802': '成功色', + 'd3770b4e046c533df1946eb5a2763a54': '链接色', + '6b5040281083fce17fd3e8006d9a7cc3': '提示色', + 'cf4d9e177b415e58c29371b9b22f3390': '其他色', + '4b4dc05ed0aa65da0abdb8cb92ae1fb3': '辅助说明', + '710ad08b11419332713360d2750cd707': '禁用', + '35796bb8ca4342a4390dfb3c464bebb4': '纯白文字', + 'ca746b1ff10193a3ce20878dec04a733': '文字', + '2a03e7cc0afd5fc3519cd06bf59b538f': '纯白填充', + 'da3cfffa69723748fecfc8e964b7996e': '浅/禁用背景', + '8c47ecd40d7f739e308567de89accd56': '分割线', + '40fab37fcc50ecd7d9a570a24757a503': '深/灰底悬浮', + '756e44b36d4d962cef2732db02aefdd1': '填充', + 'b37c14c49311fc0cd3288af9925808c8': '浅', + '21ac5a493ae8ab9bba043ca126433ca9': '深', + 'fa7132688004917a89ed807b5be00d27': '重', + '84fe608676a8fe47637b824434cb225d': '线条', + '328215447d0e128a845729dab5ce9837': '数据色', + '18c63459a2c069022c7790430f761214': '默认', + 'e7c37575b8b33fca7c8e94f712aa2385': '经典', + 'fb2936372e13759bd6a6e113fcbafb68': '过渡', + '39003734d1d700d5bd97bf1e7a2fcf73': '样式', + '48d67284c554350eea37fc8762e447a1': '中粗', + '804c19b95172c55f1796babbbb770899': '特粗', + 'fb0af8105da1f0f57ce265340239a376': '粗细', + 'c121ed6712e8231da4e3803e6eaf703c': '圆角1', + 'ae15c0d31ae01fcea65b7e483f1b942d': '圆角2', + '829fbc73be5187c3f3d4e403e8cbecbc': '圆角3', + 'a797a13eef06c6b3ea2d52f60d216259': '圆角4', + 'c02a7a69675e7cf1abeae6d279670471': '圆角5', + 'f4276b865c626bb67ac41013c6da0317': '圆角6', + '0103eb2d3dca70270d1a74e9ec987ac9': '圆角', + 'efababbf5f440be0e19e40f4369b5ac1': '阴影sm', + '658cd4f2239e0d04e596ec1f65d5f9df': '阴影md', + '940e477cb0b6a7a847862db402b79c07': '阴影lg', + '9ed233fc6677d73b458d45b250ecc3a1': '阴影xl', + 'c08787dc714fd5d7b2a1217b3d4afe8d': '阴影2xl', + 'b3bb412da3c93f51b935c5df4759b7a6': '默认常规', + '77602d53a9b948cb43c9affb46ea4a6f': '默认悬浮', + '62c5ed2938e91f0589e6333d9c5c124f': '默认点击', + 'b3dad626b64ac5063c6a1e88f8a88322': '默认禁用', + '00dc03d70dd2321afa1c18b2186e7e2b': '主要', + 'bde770827b9137ddb3eb676878af9709': '次要', + '9a5e272968e173fb42c66a56eb93e4a7': '增强', + 'd8c7e04c8e2be23dd3b81a31db6e04f1': '信息', + '330363dfc524cff2488f2ebde0500896': '成功', + '900c70fa5f7dbc014e6f762d5e0e885c': '警告', + '540f84ddc0883866b229f71c2844199a': '危险', + '48d0a09bdd5fe7e89f0a445b0ffdf14f': '浅色', + '41e8e8b9935c9ee4e88b06643a2d5b81': '深色', + 'bfe68d5844f8e54602760e18f45954f7': '链接', + 'eadd05ba6a99ca43492efe5dad7325ad': '中等', + 'b6453aea1848b65a9a76cccca94715ec': '基础配置', + 'c3e817974de836e80c95cc6ce5718eff': '搜索框', + '829abe5a8dcd0579a340d20636b59276': '分组', + 'd58ba4b5e94680fcb08300e176502fb8': '表格形式', + '7600db82433e763d16e3f1e91aa4ab80': '树形式', + 'd2fedacfc0f313fcc5d0a24d4d6d81db': '级联选择', + '09bbfb387dce6201df1ccef2aab161a6': '可清除', + '94621f44f98c996e49d5b214aebefffc': '字数统计', + '56f40e132c8369340439255fa1073070': '单行输入框', + '8685115115e4f8c8daf97a31528721ff': '多行输入框', + '57d14839d1098d99811f44d68dd0957e': '前缀/后缀', + '055293fb3cf2b1fcbc60317a2ae6916a': '密码输入框', + '67b958a2d172f2b3474629f9f6724109': '附加组件', + '97d07614380da93d257f9fbf81aa56fb': '文本', + 'e1371d733ff347664655629011b4130f': '基础样式', + '6d609769ad11b37dd509ec06362f0b73': '加强版', + '3e08fbf3806981c18666fff59718c85c': '带单位选择', + 'ec1323a8ba34dd36b33e4e6baf22f076': '单位选择器', + 'f99484b21ba7a64a748c60b52ea0401e': '列显示', + 'd58a55bceec7591f43232e958928ed10': '关', + '8493205602379573013b8d3335981175': '开', + '911bafa046cd76ecbc80ae199bd4a6e8': '开关说明', + 'fb090c01ee012eac2bb26751aeb5a3c4': '开关状态文本', + 'c4b07f2e6b60c5752a70551ff77ccedf': '默认态', + 'db98f889ce6bc235e66bd4b2a788d137': '复选框', + '5ef69f62dc668c1a3e68b51c50a2530a': '图标', + '6bfb9bb2218ff32b6139e98bc93707c0': '图片上传', + '443f46c76ebe6ec4eb502f95c451e4b0': '多选', + '73e0299c2fb3a564af0a7cff42540542': '分组模式', + '0e2eeb150583b23ed4234d58b81c18e4': '表格模式', + 'c2981042c21c8b5fa4451337d484d7db': '树模式', + 'df011658c33f610e9b9d3302909a7f2b': '范围', + '4092ed98e9035652d4c9ca9441701ed7': '基本', + '3fea7ca76cdece641436d7ab0d02ab1b': '状态', + '528c13332418466dba644a1bde0d1fdd': '点状', + 'eedfc4d3b93ca4831e94efa2ac3be6f8': '简单模式', + '0796ba76b4b553687e5ffaeb78512ccb': '基础', + '035692d6fc368765e391602aad0bf39a': '添加图标', + 'ea15ae2b7fba76c83eec6d0986d15197': '选项', + 'b05a75d95e71561fccc84306c95388e0': '弹窗选项', + '02d9819ddaaaeb1b7b22b12608c7e5ca': '提示', + '19de37513f3cb55919d32c0d559a0559': 'small尺寸', + '8aa7e04f48d51d5cd37ca94866187904': 'normal尺寸', + '21814e10b7abc9e05e6fc3b505b34844': 'large尺寸', + '2009e3d873e6f5e0978b1e123692c024': '面性标签', + '8cc6e3e65831f4e034d2a9ce6c68863a': '线性标签', + '507d869237db8b0c47b07bdf824d4ae2': '状态标签', + '01f2895cef02a670e0268e1f97ee9445': '颜色状态', + 'a465db53b8c98f42caa15ca5662f9c90': '方向', + '533fbb06156c17f0040128567708d23e': '配置 不同状态', + '240210b3088bcbea7588047000e89d9e': '默认样式', + '16a20243f9b741c08216dc9548de2968': '整体', + '3bdd08adab6ea90b9164b20a0e4151ac': '描述', + '3fca5e5be30a99b8ca5e14173773f47c': '图片项', + '32c65d8d7431e76029678ec7bb73a5ab': '标题', + 'e84ef1c5e5128107492f6813fa9a396b': '自定义列', + '1f23b9dd74b629ba5bfd5eaf8e2f498d': '尺寸大', + 'c0215e2abf0fe27597acba2be64f6993': '尺寸小', + '93dee976f68681ec6950380d757d8c18': '多选模式', + '9be232c5cffa019aab21bd631ff23462': '云舍', + '1dfba2e7e2df2efc4a25f4f2adcba25e': '系统预设主题' +}); diff --git a/packages/amis-theme-editor-helper/src/renderers/Border.tsx b/packages/amis-theme-editor-helper/src/renderers/Border.tsx new file mode 100644 index 00000000000..02e73365fa1 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Border.tsx @@ -0,0 +1,343 @@ +/** + * @file 边框 + * @description 边框设置 + */ + +import cx from 'classnames'; +import React, {useEffect, useState} from 'react'; +import {FormItem} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import cloneDeep from 'lodash/cloneDeep'; +import {Select} from 'amis-ui'; +import ColorPicker from './ColorPicker'; +import ThemeSelect from './ThemeSelect'; +import {i18n as _i18n} from 'i18n-runtime'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface BorderProps { + custom?: boolean; + needColorCustom?: boolean; +} + +interface Options { + label: string; + value: string; + realValue?: any; + parent?: boolean; +} + +const defaultStyleOptions = [ + { + label: '实线', + value: 'solid', + realValue: 'solid' + }, + { + label: '虚线', + value: 'dashed', + realValue: 'dashed' + }, + { + label: '点线', + value: 'dotted', + realValue: 'dotted' + } +]; + +const defaultBorderWidthOptions = [ + { + value: 'none', + label: '无', + realValue: 'none' + }, + { + value: '1px', + label: '1px', + realValue: '1px' + }, + { + value: '2px', + label: '2px', + realValue: '2px' + }, + { + value: '4px', + label: '4px', + realValue: '4px' + } +]; + +const borderItems = [ + { + item: 'top', + tip: '上边框' + }, + { + item: 'all', + tip: '全部' + }, + { + item: 'left', + tip: '左边框' + }, + { + item: 'right', + tip: '右边框' + }, + { + item: 'bottom', + tip: '下边框' + } +]; + +function BoxBorder(props: BorderProps & FormControlProps) { + const { + onChange, + value = {}, + data, + custom, + label, + needColorCustom, + state, + editorThemePath + } = props; + const [borderWidthOptions, setBorderWidthOptions] = useState( + cloneDeep( + props.borderWidthOptions || + data.borderWidthOptions || + defaultBorderWidthOptions + ) + ); + const [borderStyleOptions, setBorderStyleOptions] = useState( + cloneDeep( + props.borderStyleOptions || data.borderStyleOptions || defaultStyleOptions + ) + ); + const [colorOptions, setColorOptions] = useState( + cloneDeep(props.colorOptions || data.colorOptions) + ); + const [borderType, setBorderType] = useState('all'); + const editorDefaultValue = formatData(getValueByPath(editorThemePath, data)); + const editorInheritValue = getInheritValue(editorThemePath, data); + const borderData = formatData(value || {}); + + useEffect(() => { + if (state && state !== 'default') { + const type = borderType === 'all' ? 'top' : borderType; + const styleOptions = cloneDeep(borderStyleOptions); + if (styleOptions[0].parent) { + styleOptions[0].value = editorThemePath + ? 'inherit' + : `var(${data.default.token}${type}-border-style)`; + styleOptions[0].realValue = '继承常规'; + } else { + styleOptions.unshift({ + label: '继承常规', + value: editorThemePath + ? 'inherit' + : `var(${data?.default?.token}${type}-border-style)`, + parent: true, + realValue: '继承常规' + }); + } + setBorderStyleOptions(styleOptions); + } + }, [borderType]); + + function formatData(sourceData: any) { + if (!sourceData) { + return null; + } + + const data = formatInheritData(cloneDeep(sourceData)); + + const fn = (type: string) => { + if ( + data[`top-border-${type}`] === data[`right-border-${type}`] && + data[`right-border-${type}`] === data[`bottom-border-${type}`] && + data[`bottom-border-${type}`] === data[`left-border-${type}`] + ) { + data[`all-border-${type}`] = data[`top-border-${type}`]; + } else { + data[`all-border-${type}`] = 'custom'; + } + }; + fn('width'); + fn('style'); + fn('color'); + return data; + } + + function getLabel(value?: string, option?: any) { + if (value === 'inherit') { + return '继承常规'; + } + const res = option?.find((item: any) => item.value === value); + if (res) { + return res.label; + } + return value; + } + + function getKey(field: string) { + return `${borderType}-border-${field}`; + } + + function changeType(value: string) { + setBorderType(value); + } + + function changeItem(key: string) { + return (val: string | undefined) => { + let field = getKey(key); + + if (val === 'custom') { + return; + } + + let changeValue = {}; + + if (borderType === 'all') { + let newValue: Record = {}; + + // 过滤掉all + let items = borderItems.filter(position => position?.item !== 'all'); + items.forEach(item => { + let itemKey = `${item.item}-border-${key}`; + newValue[itemKey] = val; + }); + changeValue = { + ...value, + ...newValue + }; + } else { + changeValue = { + ...value, + [field]: val + }; + } + + onChange(setInheritData(changeValue, editorInheritValue)); + }; + } + + return ( +
+ {label ?
{label}
: null} +
+ {custom ? ( +
+ {borderItems.map(item => { + let valueKey = `border-${item.item}`; + return ( +
changeType(item.item)} + > + +
+ ); + })} +
+ ) : ( +
+ )} + +
+ changeItem('width')(value)} + itemName={`${ + borderType === 'all' ? 'top' : borderType + }-border-width`} + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.[getKey('width')]} + /> +
+ { + if (image && res?.value) { + onChange( + `url(${image}) ${POSITION_MAP[position]} / ${res.value} ${color}` + ); + } + }} + /> + { + onChange(`url(${image}) ${POSITION_MAP[value]} / ${mode} ${color}`); + }} + /> + { + onChange( + `url(${image}) ${POSITION_MAP[position]} / ${mode} ${value}` + ); + }} + /> +
+
+ ); +} + +function ImagePosition({value, onChange}: {value: number; onChange: Function}) { + const positionMap = Array.from(Array(9).keys()); + const [show, setShow] = useState(false); + const target = useRef(null); + function close() { + setShow(false); + } + function positionChange(value: number) { + onChange(value); + } + return ( + <> +
{ + setShow(true); + }} + > + {positionMap.map(position => ( +
+ ))} +
+ + +
+
图片位置
+
+ {positionMap.map(position => ( +
{ + positionChange(position); + }} + >
+ ))} +
+
+ + + + ); +} + +function ImageColor(props: any) { + const {value, onChange, themeList, subTabList} = props; + const [show, setShow] = useState(false); + const [tab, setTab] = useState(0); + const target = useRef(null); + function close() { + setShow(false); + } + function handleTab(value: number) { + setTab(value); + } + + useEffect(() => { + if (~value.indexOf('var')) { + setTab(0); + } else { + setTab(1); + } + }, [value]); + return ( + <> +
{ + setShow(true); + }} + >
+ + +
+
+
+ {subTabList.map((item: any) => ( +
{ + handleTab(item.id); + }} + key={item.id} + > + {item.name} +
+ ))} +
+ {tab === 0 ? ( + { + onChange(value); + close(); + }} + value={value} + /> + ) : null} + {tab === 1 ? ( + + ) : null} +
+
+ + + + ); +} + +/** + * 最近颜色列表 + */ +function PresetColors(props: { + themeList: GlobalData['colorOptions']; + onChange: (color: string) => void; + onRef: any; + needGradient?: boolean; + needImage?: boolean; + needTheme?: boolean; // 主题色 + needCustom?: boolean; // 自定义颜色 +}) { + interface Color { + title?: string; + color: string; + } + interface PresetColors { + colors: Color[]; + linearGradient: Color[]; + img: Color[]; + } + const { + themeList, + onChange, + onRef, + needGradient, + needImage, + needTheme, + needCustom + } = props; + const [colors, setColors] = useState({ + colors: [], + linearGradient: [], + img: [] + }); + const [edit, setEdit] = useState(false); + + function setPresetColor(value: string) { + if (!value) { + return; + } + const presetColors = cloneDeep(colors); + if (!!~value.indexOf('linear-gradient')) { + if ( + presetColors.linearGradient.length < 8 && + !colors.linearGradient.find(n => n.color === value) + ) { + presetColors.linearGradient.unshift({ + color: value, + title: value + }); + } + } else if (!!~value.indexOf('url')) { + // 图片不加入最近颜色列表 + return; + // if ( + // presetColors.img.length < 8 && + // !colors.img.find(n => n.color === value) + // ) { + // presetColors.img.unshift({ + // color: value, + // title: value + // }); + // } + } else if ( + presetColors.colors.length < 8 && + !colors.colors.find(n => n.color === value) + ) { + let title; + if (value.indexOf('var(') === 0) { + title = findColor(value, themeList).label; + } + presetColors.colors.unshift({ + color: value, + title + }); + } + localStorage.setItem('presetColors', JSON.stringify(presetColors)); + setColors(presetColors); + } + + useImperativeHandle(onRef, () => ({ + setPresetColor: debounce(setPresetColor, 500) + })); + + useEffect(() => { + let presetColors; + try { + presetColors = JSON.parse(localStorage.getItem('presetColors') || ''); + } catch (e) { + presetColors = { + colors: [], + linearGradient: [], + img: [] + }; + } + + setColors(presetColors); + }, []); + + function getColorsLen(colors: PresetColors) { + return ( + colors.colors.length + colors.linearGradient.length + colors.img.length + ); + } + + function colorClick(color: string, index: number, type: keyof typeof colors) { + if (edit) { + const newColors = cloneDeep(colors); + newColors[type].splice(index, 1); + setColors(newColors); + localStorage.setItem('presetColors', JSON.stringify(newColors)); + if (getColorsLen(newColors) === 0) { + setEdit(false); + } + } else { + onChange(color); + } + } + + return ( +
+
+ 常用颜色 + {getColorsLen(colors) > 0 ? ( + { + setEdit(!edit); + }} + > + {edit ? '完成' : '编辑'} + + ) : null} +
+
+ {getColorsLen(colors) > 0 ? ( + Object.keys(colors).map((key: keyof typeof colors) => { + if (!needGradient && key === 'linearGradient') { + return null; + } + if (!needImage && key === 'img') { + return null; + } + if (!needTheme && !needCustom && key === 'colors') { + return null; + } + return colors[key].length > 0 ? ( +
+ {colors[key].map((color, index) => { + return ( +
{color.title || color.color}
+ }} + key={color.color} + container={document.body} + > +
{ + colorClick(color.color, index, key); + }} + > +
+
+ + ); + })} +
+ ) : null; + }) + ) : ( + + 点击上方颜色添加 + + )} +
+
+ ); +} + +function ColorSelect(props: ColorSelectProps) { + const { + show, + target, + themeList, + onChange, + close, + value, + needGradient, + needImage, + needTheme, + needCustom + } = props; + const [tab, setTab] = useState('color'); + const [subTab, setSubTab] = useState(0); + const presetColorRef = useRef(); + + const tabMap: any = { + color: {name: 'color'} + }; + if (needGradient) { + tabMap['gradient'] = {name: 'gradient'}; + } + if (needImage) { + tabMap['img'] = { + name: 'img', + icon: , + activeIcon: + }; + } + const subTabList: any[] = [ + needTheme && + themeList && + themeList.length > 0 && {name: '主题颜色', parent: 'color', id: 0}, + needCustom && {name: '自定义颜色', parent: 'color', id: 1} + ].filter(n => n); + + function setSubTabCheck() { + if ( + needTheme && + value.indexOf('#') !== 0 && + value.indexOf('rgba') !== 0 && + subTabList.find(item => item.id === 0) + ) { + setSubTab(0); + } else if (needCustom && subTabList.find(item => item.id === 1)) { + setSubTab(1); + } + } + + useEffect(() => { + if ( + needTheme && + (value?.indexOf('var') === 0 || value === 'transparent' || !value) && + subTabList.find(item => item.id === 0) + ) { + setTab('color'); + setSubTab(0); + } else if (needGradient && value?.indexOf('linear-gradient') === 0) { + setTab('gradient'); + } else if (needImage && value?.indexOf('url') === 0) { + setTab('img'); + } else if (needCustom && subTabList.find(item => item.id === 1)) { + setTab('color'); + setSubTab(1); + } + }, [show]); + + useEffect(() => { + if (needTheme) { + setSubTab(0); + } else if (needCustom) { + setSubTab(1); + } + }, [needCustom, needTheme]); + + function colorOnChange(value: string) { + onChange(value); + presetColorRef.current?.setPresetColor(value); + } + + function renderSubTab() { + const list = subTabList.filter(item => item.parent === tab); + if (list.length > 0) { + return ( +
+ {list.map((item: any) => ( +
setSubTab(item.id)} + > + {item.name} +
+ ))} +
+ ); + } else { + return null; + } + } + + return ( + + +
+ {Object.keys(tabMap).length > 1 ? ( +
+ {Object.keys(tabMap).map(key => ( +
{ + setTab(key); + setSubTabCheck(); + }} + > + {tab === key ? tabMap[key].activeIcon : tabMap[key].icon} +
+ ))} +
+ ) : null} + + {renderSubTab()} +
+ {tab === 'color' ? ( +
+ {subTab === 0 ? ( + + ) : null} + {subTab === 1 ? ( + + ) : null} +
+ ) : null} + {tab === 'gradient' ? ( + + ) : null} + {tab === 'img' ? ( + + ) : null} + +
+
+ + + ); +} + +function ColorPicker(props: ColorPickerProps) { + const { + value, + options, + data, + onChange, + labelMode, + needGradient, + needImage, + needTheme, + needCustom, + placeholder, + disabled, + readOnly + } = props; + let themeList = options; + if (typeof options === 'string') { + themeList = resolveVariableAndFilter(options, data, '| raw'); + } + + const container = useRef(null); + const target = useRef(null); + + const [color, setColor] = useState(value); + const [show, setShow] = useState(false); + + function colorSelectHandler() { + !disabled && setShow(!show); + } + + function handleClean(event: any) { + setColor(undefined); + onChange(undefined); + event.preventDefault(); + event.stopPropagation(); + } + + useEffect(() => { + setColor(value); + }, [value]); + + return ( +
+
+
+ {findColor(color || placeholder, themeList).value ? ( + ( +
{findColor(color || placeholder, themeList).label}
+ ) + }} + > +
+ + ) : ( +
+ )} +
+ {labelMode === 'input' ? ( + <> +
+ {color ? ( +
{findColor(color, themeList).label}
+ ) : ( +
+ {findColor(placeholder, themeList)?.label || placeholder} +
+ )} +
+ {value && !disabled && !readOnly ? ( + + + + ) : null} + + + + + + ) : null} +
+ { + setShow(false); + }} + container={container} + target={target} + themeList={themeList} + onChange={onChange} + /> +
+ ); +} + +function ColorPickerControl(props: ColorPickerControlProps) { + const editorDefaultValue = getValueByPath( + props.editorThemePath || '', + props.data + ); + const value = formatInheritData(props.value) || editorDefaultValue; + + return ( + <> + + + ); +} + +export default ColorPicker; + +@FormItem({ + type: 'amis-theme-color-picker', + strictMode: false, + renderLabel: true +}) +export class ColorPickerRenderer extends React.Component { + render() { + return ( + + ); + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/Font.tsx b/packages/amis-theme-editor-helper/src/renderers/Font.tsx new file mode 100644 index 00000000000..5309c7082b3 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Font.tsx @@ -0,0 +1,1150 @@ +/** + * @file Font.tsx + * @description 设置文字 + */ + +import React, {useEffect} from 'react'; +import {FormItem} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import {Icon as ThemeIcon} from '../icons/index'; +import cx from 'classnames'; +import {TooltipWrapper} from 'amis-ui'; +import ColorPicker from './ColorPicker'; +import cloneDeep from 'lodash/cloneDeep'; +import assign from 'lodash/assign'; +import {ThemeWrapperHeader} from './ThemeWrapper'; +import ThemeSelect from './ThemeSelect'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface FontEditorProps extends FormControlProps {} + +interface SizeDataProps { + 'font-family'?: string; + 'fontSize'?: string; + 'fontWeight'?: string; + 'lineHeight'?: string; + 'color'?: string; + 'font-style'?: string; + 'text-decoration'?: string; + 'text-align'?: string; + 'vertical-align'?: string; +} + +interface OptionProps { + label: string; + type: keyof SizeDataProps; + value: string; +} + +const defaultFontSize = [ + '12px', + '14px', + '16px', + '18px', + '20px', + '22px', + '24px', + '26px', + '28px', + '30px', + '32px', + '34px', + '36px', + '38px', + '40px' +].map(n => ({value: n, label: n, realValue: n})); + +const defaultFontWeight = [ + '100', + '200', + '300', + '400', + '500', + '600', + '700', + '800', + '900' +].map(n => ({value: n, label: n, realValue: n})); + +const defaultlineHeight = [ + { + label: '1.3倍', + value: '1.3', + realValue: '1.3' + }, + { + label: '1.5倍', + value: '1.5', + realValue: '1.5' + }, + { + label: '1.7倍', + value: '1.7', + realValue: '1.7' + } +]; + +const SYSTEM_FONT_FAMILY = [ + { + label: 'Academy Engraved LET', + value: 'Academy Engraved LET' + }, + { + label: 'Al Bayan', + value: 'Al Bayan' + }, + { + label: 'Al Nile', + value: 'Al Nile' + }, + { + label: 'Al Tarikh', + value: 'Al Tarikh' + }, + { + label: 'American Typewriter', + value: 'American Typewriter' + }, + { + label: 'Andale Mono', + value: 'Andale Mono' + }, + { + label: 'Apple Braille', + value: 'Apple Braille' + }, + { + label: 'Apple Chancery', + value: 'Apple Chancery' + }, + { + label: 'Apple Color Emoji', + value: 'Apple Color Emoji' + }, + { + label: 'Apple SD Gothic Neo', + value: 'Apple SD Gothic Neo' + }, + { + label: 'Apple Symbols', + value: 'Apple Symbols' + }, + { + label: 'AppleGothic', + value: 'AppleGothic' + }, + { + label: 'AppleMyungjo', + value: 'AppleMyungjo' + }, + { + label: 'Arial', + value: 'Arial' + }, + { + label: 'Arial Black', + value: 'Arial Black' + }, + { + label: 'Arial Hebrew', + value: 'Arial Hebrew' + }, + { + label: 'Arial Hebrew Scholar', + value: 'Arial Hebrew Scholar' + }, + { + label: 'Arial Narrow', + value: 'Arial Narrow' + }, + { + label: 'Arial Rounded MT Bold', + value: 'Arial Rounded MT Bold' + }, + { + label: 'Arial Unicode MS', + value: 'Arial Unicode MS' + }, + { + label: 'Avenir', + value: 'Avenir' + }, + { + label: 'Avenir Next', + value: 'Avenir Next' + }, + { + label: 'Avenir Next Condensed', + value: 'Avenir Next Condensed' + }, + { + label: 'Ayuthaya', + value: 'Ayuthaya' + }, + { + label: 'Baghdad', + value: 'Baghdad' + }, + { + label: 'Bangla MN', + value: 'Bangla MN' + }, + { + label: 'Bangla Sangam MN', + value: 'Bangla Sangam MN' + }, + { + label: 'Baskerville', + value: 'Baskerville' + }, + { + label: 'Beirut', + value: 'Beirut' + }, + { + label: 'Big Caslon', + value: 'Big Caslon' + }, + { + label: 'Bodoni 72', + value: 'Bodoni 72' + }, + { + label: 'Bodoni 72 Oldstyle', + value: 'Bodoni 72 Oldstyle' + }, + { + label: 'Bodoni 72 Smallcaps', + value: 'Bodoni 72 Smallcaps' + }, + { + label: 'Bodoni Ornaments', + value: 'Bodoni Ornaments' + }, + { + label: 'Bradley Hand', + value: 'Bradley Hand' + }, + { + label: 'Brush Script MT', + value: 'Brush Script MT' + }, + { + label: 'Chalkboard', + value: 'Chalkboard' + }, + { + label: 'Chalkboard SE', + value: 'Chalkboard SE' + }, + { + label: 'Chalkduster', + value: 'Chalkduster' + }, + { + label: 'Charter', + value: 'Charter' + }, + { + label: 'Cochin', + value: 'Cochin' + }, + { + label: 'Comic Sans MS', + value: 'Comic Sans MS' + }, + { + label: 'Copperplate', + value: 'Copperplate' + }, + { + label: 'Corsiva Hebrew', + value: 'Corsiva Hebrew' + }, + { + label: 'Courier New', + value: 'Courier New' + }, + { + label: 'Damascus', + value: 'Damascus' + }, + { + label: 'DecoType Naskh', + value: 'DecoType Naskh' + }, + { + label: 'Devanagari MT', + value: 'Devanagari MT' + }, + { + label: 'Devanagari Sangam MN', + value: 'Devanagari Sangam MN' + }, + { + label: 'Didot', + value: 'Didot' + }, + { + label: 'DIN Alternate', + value: 'DIN Alternate' + }, + { + label: 'DIN Condensed', + value: 'DIN Condensed' + }, + { + label: 'Diwan Kufi', + value: 'Diwan Kufi' + }, + { + label: 'Diwan Thuluth', + value: 'Diwan Thuluth' + }, + { + label: 'Euphemia UCAS', + value: 'Euphemia UCAS' + }, + { + label: 'Farah', + value: 'Farah' + }, + { + label: 'Farisi', + value: 'Farisi' + }, + { + label: 'Futura', + value: 'Futura' + }, + { + label: 'Galvji', + value: 'Galvji' + }, + { + label: 'GB18030 Bitmap', + value: 'GB18030 Bitmap' + }, + { + label: 'Geeza Pro', + value: 'Geeza Pro' + }, + { + label: 'Geneva', + value: 'Geneva' + }, + { + label: 'Georgia', + value: 'Georgia' + }, + { + label: 'Gill Sans', + value: 'Gill Sans' + }, + { + label: 'Grantha Sangam MN', + value: 'Grantha Sangam MN' + }, + { + label: 'Gujarati MT', + value: 'Gujarati MT' + }, + { + label: 'Gujarati Sangam MN', + value: 'Gujarati Sangam MN' + }, + { + label: 'Gurmukhi MN', + value: 'Gurmukhi MN' + }, + { + label: 'Gurmukhi MT', + value: 'Gurmukhi MT' + }, + { + label: 'Gurmukhi Sangam MN', + value: 'Gurmukhi Sangam MN' + }, + { + label: '黑体-简', + value: '黑体-简' + }, + { + label: '黑体-繁', + value: '黑体-繁' + }, + { + label: 'Helvetica', + value: 'Helvetica' + }, + { + label: 'Helvetica Neue', + value: 'Helvetica Neue' + }, + { + label: 'Herculanum', + value: 'Herculanum' + }, + { + label: 'Hiragino Maru Gothic ProN', + value: 'Hiragino Maru Gothic ProN' + }, + { + label: 'Hiragino Mincho ProN', + value: 'Hiragino Mincho ProN' + }, + { + label: 'Hiragino Sans', + value: 'Hiragino Sans' + }, + { + label: '冬青黑体简体中文', + value: '冬青黑体简体中文' + }, + { + label: 'Hoefler Text', + value: 'Hoefler Text' + }, + { + label: 'Impact', + value: 'Impact' + }, + { + label: 'InaiMathi', + value: 'InaiMathi' + }, + { + label: 'ITF Devanagari', + value: 'ITF Devanagari' + }, + { + label: 'ITF Devanagari Marathi', + value: 'ITF Devanagari Marathi' + }, + { + label: 'Kailasa', + value: 'Kailasa' + }, + { + label: 'Kannada MN', + value: 'Kannada MN' + }, + { + label: 'Kannada Sangam MN', + value: 'Kannada Sangam MN' + }, + { + label: 'Kefa', + value: 'Kefa' + }, + { + label: 'Khmer MN', + value: 'Khmer MN' + }, + { + label: 'Khmer Sangam MN', + value: 'Khmer Sangam MN' + }, + { + label: 'Kohinoor Bangla', + value: 'Kohinoor Bangla' + }, + { + label: 'Kohinoor Devanagari', + value: 'Kohinoor Devanagari' + }, + { + label: 'Kohinoor Gujarati', + value: 'Kohinoor Gujarati' + }, + { + label: 'Kohinoor Telugu', + value: 'Kohinoor Telugu' + }, + { + label: 'Kokonor', + value: 'Kokonor' + }, + { + label: 'Krungthep', + value: 'Krungthep' + }, + { + label: 'KufiStandardGK', + value: 'KufiStandardGK' + }, + { + label: 'Lao MN', + value: 'Lao MN' + }, + { + label: 'Lao Sangam MN', + value: 'Lao Sangam MN' + }, + { + label: 'Lucida Grande', + value: 'Lucida Grande' + }, + { + label: 'Luminari', + value: 'Luminari' + }, + { + label: 'Malayalam MN', + value: 'Malayalam MN' + }, + { + label: 'Malayalam Sangam MN', + value: 'Malayalam Sangam MN' + }, + { + label: 'Marker Felt', + value: 'Marker Felt' + }, + { + label: 'Menlo', + value: 'Menlo' + }, + { + label: 'Microsoft Sans Serif', + value: 'Microsoft Sans Serif' + }, + { + label: 'Mishafi', + value: 'Mishafi' + }, + { + label: 'Mishafi Gold', + value: 'Mishafi Gold' + }, + { + label: 'Monaco', + value: 'Monaco' + }, + { + label: 'Mshtakan', + value: 'Mshtakan' + }, + { + label: 'Mukta Mahee', + value: 'Mukta Mahee' + }, + { + label: 'Muna', + value: 'Muna' + }, + { + label: 'Myanmar MN', + value: 'Myanmar MN' + }, + { + label: 'Myanmar Sangam MN', + value: 'Myanmar Sangam MN' + }, + { + label: 'Nadeem', + value: 'Nadeem' + }, + { + label: 'New Peninim MT', + value: 'New Peninim MT' + }, + { + label: 'Noteworthy', + value: 'Noteworthy' + }, + { + label: 'Noto Nastaliq Urdu', + value: 'Noto Nastaliq Urdu' + }, + { + label: 'Noto Sans Kannada', + value: 'Noto Sans Kannada' + }, + { + label: 'Noto Sans Myanmar', + value: 'Noto Sans Myanmar' + }, + { + label: 'Noto Sans Oriya', + value: 'Noto Sans Oriya' + }, + { + label: 'Noto Serif Myanman', + value: 'Noto Serif Myanman' + }, + { + label: 'Optima', + value: 'Optima' + }, + { + label: 'Oriya MN', + value: 'Oriya MN' + }, + { + label: 'Oriya Sangam MN', + value: 'Oriya Sangam MN' + }, + { + label: 'Palatino', + value: 'Palatino' + }, + { + label: 'Papyrus', + value: 'Papyrus' + }, + { + label: 'Party LET', + value: 'Party LET' + }, + { + label: 'Phosphate', + value: 'Phosphate' + }, + { + label: '苹方-港', + value: '苹方-港' + }, + { + label: '苹方-简', + value: '苹方-简' + }, + { + label: '苹方-繁', + value: '苹方-繁' + }, + { + label: 'Plantagenet Cherokee', + value: 'Plantagenet Cherokee' + }, + { + label: 'PT Mono', + value: 'PT Mono' + }, + { + label: 'PT Sans', + value: 'PT Sans' + }, + { + label: 'PT Sans Caption', + value: 'PT Sans Caption' + }, + { + label: 'PT Sans Narrow', + value: 'PT Sans Narrow' + }, + { + label: 'PT Serif', + value: 'PT Serif' + }, + { + label: 'PT Serif Caption', + value: 'PT Serif Caption' + }, + { + label: 'Raanana', + value: 'Raanana' + }, + { + label: 'Rockwell', + value: 'Rockwell' + }, + { + label: 'Sana', + value: 'Sana' + }, + { + label: 'Sathu', + value: 'Sathu' + }, + { + label: 'Savoye LET', + value: 'Savoye LET' + }, + { + label: 'Shree Devanagari 714', + value: 'Shree Devanagari 714' + }, + { + label: 'SignPainter', + value: 'SignPainter' + }, + { + label: 'Silom', + value: 'Silom' + }, + { + label: 'Sinhala MN', + value: 'Sinhala MN' + }, + { + label: 'Sinhala Sangam MN', + value: 'Sinhala Sangam MN' + }, + { + label: 'Skia', + value: 'Skia' + }, + { + label: 'Snell Roundhand', + value: 'Snell Roundhand' + }, + { + label: '宋体-简', + value: '宋体-简' + }, + { + label: '宋体-繁', + value: '宋体-繁' + }, + { + label: '华文黑体', + value: '华文黑体' + }, + { + label: 'STIXGeneral', + value: 'STIXGeneral' + }, + { + label: 'STIXIntegralsD', + value: 'STIXIntegralsD' + }, + { + label: 'STIXIntegralsSm', + value: 'STIXIntegralsSm' + }, + { + label: 'STIXIntegralsUp', + value: 'STIXIntegralsUp' + }, + { + label: 'STIXIntegralsUpD', + value: 'STIXIntegralsUpD' + }, + { + label: 'STIXIntegralsUpSm', + value: 'STIXIntegralsUpSm' + }, + { + label: 'STIXNonUnicode', + value: 'STIXNonUnicode' + }, + { + label: 'STIXSizeFiveSym', + value: 'STIXSizeFiveSym' + }, + { + label: 'STIXSizeFourSym', + value: 'STIXSizeFourSym' + }, + { + label: 'STIXSizeOneSym', + value: 'STIXSizeOneSym' + }, + { + label: 'STIXSizeThreeSym', + value: 'STIXSizeThreeSym' + }, + { + label: 'STIXSizeTwoSym', + value: 'STIXSizeTwoSym' + }, + { + label: 'STIXVariants', + value: 'STIXVariants' + }, + { + label: '华文宋体', + value: '华文宋体' + }, + { + label: 'Sukhumvit Set', + value: 'Sukhumvit Set' + }, + { + label: 'Symbol', + value: 'Symbol' + }, + { + label: 'Tahoma', + value: 'Tahoma' + }, + { + label: 'Tamil MN', + value: 'Tamil MN' + }, + { + label: 'Tamil Sangam MN', + value: 'Tamil Sangam MN' + }, + { + label: 'Telugu MN', + value: 'Telugu MN' + }, + { + label: 'Teluau nasmln', + value: 'Teluau nasmln' + }, + { + label: 'Thonburi', + value: 'Thonburi' + }, + { + label: 'Times New Roman', + value: 'Times New Roman' + }, + { + label: 'Trattatello', + value: 'Trattatello' + }, + { + label: 'Trebuchet MS', + value: 'Trebuchet MS' + }, + { + label: 'Verdana', + value: 'Verdana' + }, + { + label: 'Waseem', + value: 'Waseem' + }, + { + label: 'Webdings', + value: 'Webdings' + }, + { + label: 'Wingdings', + value: 'Wingdings' + }, + { + label: 'Wingdings 2', + value: 'Wingdings 2' + }, + { + label: 'Wingdings 3', + value: 'Wingdings 3' + }, + { + label: 'Zapf Dingbats', + value: 'Zapf Dingbats' + }, + { + label: 'Zapfino', + value: 'Zapfino' + } +]; + +const fontStyleOptions: OptionProps[] = [ + { + label: '斜体', + type: 'font-style', + value: 'italic' + }, + { + label: '下划线', + type: 'text-decoration', + value: 'underline' + }, + { + label: '删除线', + type: 'text-decoration', + value: 'line-through' + } +]; +const textAlignOptions: OptionProps[] = [ + { + label: '左对齐', + type: 'text-align', + value: 'left' + }, + { + label: '居中对齐', + type: 'text-align', + value: 'center' + }, + { + label: '右对齐', + type: 'text-align', + value: 'right' + }, + { + label: '两端对齐', + type: 'text-align', + value: 'justify' + } +]; + +const verticalAlignOptions: OptionProps[] = [ + { + label: '顶对齐', + type: 'vertical-align', + value: 'top' + }, + { + label: '垂直居中对齐', + type: 'vertical-align', + value: 'middle' + }, + { + label: '底对齐', + type: 'vertical-align', + value: 'bottom' + } +]; + +function FontEditor(props: FontEditorProps) { + const { + state, + data, + title, + label, + value, + onChange, + hideColor, + hideFontSize, + hideFontWeight, + hideLineHeight, + hideFontFamily, + hasSenior = true, + hasVertical = true, + fontStyle = true, + textAlign = true, + needColorCustom = false, + colorOptions = data.colorOptions, + fontSizeOptions = data.fontSizeOptions || defaultFontSize, + fontWeightOptions = data.fontWeightOptions || defaultFontWeight, + lineHeightOptions = data.lineHeightOptions || defaultlineHeight, + fontFamilyOptions = data.fontFamilyOptions || SYSTEM_FONT_FAMILY, + editorThemePath + } = props; + + const alignOptions = hasVertical + ? [...textAlignOptions, ...verticalAlignOptions] + : textAlignOptions; + + const [open, toggleOpen] = React.useState(true); + const [senior, toggleSenior] = React.useState(false); + const editorDefaultValue = getValueByPath(editorThemePath, data); + const editorInheritValue = getInheritValue(editorThemePath, data); + + const [sizeData, setSizeData] = React.useState( + assign({}, formatInheritData(value)) + ); + + useEffect(() => { + const timer = setTimeout(() => { + if (value) { + setSizeData(assign({}, formatInheritData(value))); + } + }, 100); + return () => clearTimeout(timer); + }, [value]); + + function handleEdit(value: string | undefined, type: keyof SizeDataProps) { + const data = cloneDeep(sizeData); + if ( + [ + 'font-style', + 'text-decoration', + 'text-align', + 'vertical-align' + ].includes(type) && + data[type] === value // 这些属性是点击事件，所以如果第二次点击说明是要取消当前的选中状态 + ) { + data[type] = undefined; + } else { + data[type] = value; + } + setSizeData(data); + onChange(setInheritData(data, editorInheritValue)); + } + + function getLabel(value?: string, option?: any) { + if (value === 'inherit') { + return '继承常规'; + } + const res = option?.find((item: any) => item.value === value); + if (res) { + return res.label; + } + return value; + } + + return ( +
+ + {open && ( +
+
+ {!hideColor && ( +
+ { + handleEdit(value, 'color'); + }} + itemName="color" + state={state} + placeholder={editorDefaultValue?.color} + editorInheritValue={editorInheritValue?.color} + /> +
+ )} + {!hideFontSize && ( +
+ { + handleEdit(value, 'fontSize'); + }} + itemName="fontSize" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.fontSize} + /> +
+ )} +
+
+ {!hideFontWeight && ( +
+ { + handleEdit(value, 'fontWeight'); + }} + itemName="fontWeight" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.fontWeight} + /> + {(!hideLineHeight || !hideFontFamily) && ( +
字重
+ )} +
+ )} + {!hideLineHeight && ( +
+ { + handleEdit(value, 'lineHeight'); + }} + itemName="lineHeight" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.lineHeight} + /> +
行高
+
+ )} + {!hideFontFamily && ( +
+ { + handleEdit(value, 'font-family'); + }} + itemName="fontFamily" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + /> +
字体
+
+ )} +
+ {senior && fontStyle && ( +
+ {fontStyleOptions.map((item, index) => ( + +
+ handleEdit(item.value, item.type)} + /> +
+ + ))} +
+ )} + {senior && textAlign && ( +
+ {alignOptions.map((item, index) => ( + +
+ handleEdit(item.value, item.type)} + /> +
+ + ))} +
+ )} +
+ )} +
+ ); +} + +@FormItem({ + type: 'amis-theme-font-editor', + strictMode: false, + renderLabel: false +}) +export class FontEditorRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx b/packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx new file mode 100644 index 00000000000..c7e4e131d39 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx @@ -0,0 +1,329 @@ +/** + * 主题内外边距 + */ + +import {FormItem} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import {Overlay, PopOver} from 'amis-ui'; +import React, {useEffect, useState} from 'react'; +import cx from 'classnames'; +import cloneDeep from 'lodash/cloneDeep'; +import ThemeSelect from './ThemeSelect'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface PaddingAndMarginProps extends FormControlProps { + custom: boolean; +} + +function PaddingAndMarginDialog(props: PaddingAndMarginProps) { + const { + onChange, + value, + data, + custom, + label, + options, + hideMargin, + hidePadding, + state, + editorThemePath + } = props; + const [type, setType] = useState('all'); + const [customRef, setCustomRef] = useState(null); + const [customShow, setCustomShow] = useState(false); + const [customIndex, setCustomIndex] = useState(0); + const [customKey, setCustomKey] = useState('marginTop'); + const [isPaddingInherit, setIsPaddingInherit] = useState(false); + const [isMarginInherit, setIsMarginInherit] = useState(false); + + const LABELS = [ + {value: 'marginTop'}, + {value: 'marginRight'}, + {value: 'marginBottom'}, + {value: 'marginLeft'}, + {value: 'paddingTop'}, + {value: 'paddingRight'}, + {value: 'paddingBottom'}, + {value: 'paddingLeft'} + ].filter(n => { + if (hideMargin) { + return !!~n.value.indexOf('padding'); + } else if (hidePadding) { + return !!~n.value.indexOf('margin'); + } else { + return n; + } + }); + + const editorDefaultValue = formatData(getValueByPath(editorThemePath, data)); + const editorInheritValue = getInheritValue(editorThemePath, data); + const spaceData = formatData(value || {}); + const optionsData = options || data.sizesOptions || []; + + function formatData(sourceData: any) { + if (!sourceData) { + return null; + } + + const data = formatInheritData(cloneDeep(sourceData)); + if ( + data?.marginTop === data?.marginRight && + data?.marginRight === data?.marginBottom && + data?.marginBottom === data?.marginLeft + ) { + data.margin = data?.marginTop; + } else { + data.margin = 'custom'; + } + if ( + data?.paddingTop === data?.paddingRight && + data?.paddingRight === data?.paddingBottom && + data?.paddingBottom === data?.paddingLeft + ) { + data.padding = data?.paddingTop; + } else { + data.padding = 'custom'; + } + return data; + } + + function onSpaceChange(position: number | string) { + return (value: string | undefined) => { + const res = cloneDeep(spaceData); + delete res.margin; + delete res.padding; + if (value === 'custom') { + return; + } + + if (position === 'margin-all') { + if (value?.includes('all')) { + const defaultToken = (key: string) => + `var(${data.default.token}${key})`; + res.marginTop = defaultToken('marginTop'); + res.marginRight = defaultToken('marginRight'); + res.marginBottom = defaultToken('marginBottom'); + res.marginLeft = defaultToken('marginLeft'); + } else { + res.marginTop = value; + res.marginRight = value; + res.marginBottom = value; + res.marginLeft = value; + } + } else if (position === 'padding-all') { + if (value?.includes('all')) { + const defaultToken = (key: string) => + `var(${data.default.token}${key})`; + res.paddingTop = defaultToken('paddingTop'); + res.paddingRight = defaultToken('paddingRight'); + res.paddingBottom = defaultToken('paddingBottom'); + res.paddingLeft = defaultToken('paddingLeft'); + } else { + res.paddingTop = value; + res.paddingRight = value; + res.paddingBottom = value; + res.paddingLeft = value; + } + } else if (typeof position === 'number') { + const label = LABELS[position].value; + res[label] = value; + if (label.includes('padding')) { + setIsPaddingInherit(false); + } else { + setIsMarginInherit(false); + } + } + onChange(setInheritData(res, editorInheritValue)); + }; + } + + function findRealValue(value: string) { + return ( + optionsData.find((item: any) => item.value === value)?.realValue || value + ); + } + + function handleCustomClick(e: React.MouseEvent, index: number, key: string) { + setCustomShow(true); + setCustomRef(e.currentTarget); + setCustomIndex(index); + setCustomKey(key); + } + + useEffect(() => { + if (state && state !== 'default' && value) { + if ( + value['paddingTop']?.includes('default-paddingTop') && + value['paddingBottom']?.includes('default-paddingBottom') && + value['paddingRight']?.includes('default-paddingRight') && + value['paddingLeft']?.includes('default-paddingLeft') + ) { + setIsPaddingInherit(true); + } + if ( + value['marginTop']?.includes('default-marginTop') && + value['marginBottom']?.includes('default-marginBottom') && + value['marginRight']?.includes('default-marginRight') && + value['marginLeft']?.includes('default-marginLeft') + ) { + setIsMarginInherit(true); + } + } + }, [value]); + + useEffect(() => { + if (spaceData.margin === 'custom' || spaceData.padding === 'custom') { + setType('custom'); + } + }, []); + + return ( +
+ {label ? ( +
{label}
+ ) : null} +
+
+
setType('all')} + >
+ {custom ? ( +
setType('custom')} + > +
+
+
+ ) : null} +
+ {type === 'all' ? ( + <> + {!hideMargin && ( +
+ +
Margin
+
+ )} + {!hidePadding && ( +
+ +
+ Padding +
+
+ )} + + ) : null} +
+ {type !== 'all' ? ( +
+ {LABELS.map((item, index) => { + return ( +
handleCustomClick(e, index, item.value)} + > +
+ {findRealValue( + spaceData[item.value] || editorDefaultValue?.[item.value] + ) || '-'} +
+
+ ); + })} + + setCustomShow(false)}> +
+ +
+ + +
+ ) : null} +
+ ); +} + +@FormItem({ + type: 'amis-theme-padding-and-margin', + strictMode: false, + renderLabel: false +}) +export default class PaddingAndMarginDialogRender extends React.Component { + render() { + return ( + + ); + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/Radius.tsx b/packages/amis-theme-editor-helper/src/renderers/Radius.tsx new file mode 100644 index 00000000000..6b088296c0a --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Radius.tsx @@ -0,0 +1,248 @@ +/** + * @file 圆角 + * @description 圆角设置 + */ + +import cx from 'classnames'; +import React, {useEffect, useState} from 'react'; +import {FormItem, RendererProps, resolveVariableAndFilter} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import cloneDeep from 'lodash/cloneDeep'; +import ThemeSelect from './ThemeSelect'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface RadiusProps { + custom: boolean; +} + +const radiusItems = [ + { + item: 'top-left', + tip: '左上角' + }, + { + item: 'top-right', + tip: '右上角' + }, + { + item: 'bottom-left', + tip: '左下角' + }, + { + item: 'bottom-right', + tip: '右下角' + } +]; + +function BoxRadius(props: RadiusProps & RendererProps) { + const { + onChange, + value = {}, + data, + custom, + label, + borderRadiusOptions, + state, + editorThemePath + } = props; + + let options = cloneDeep(borderRadiusOptions || data.borderRadiusOptions); + + if (typeof borderRadiusOptions === 'string') { + options = resolveVariableAndFilter(borderRadiusOptions, data, '| raw'); + } + const [radiusType, setRadiusType] = useState('all'); + const [isInherit, setIsInherit] = useState(false); + + const editorDefaultValue = formatData(getValueByPath(editorThemePath, data)); + const editorInheritValue = getInheritValue(editorThemePath, data); + const borderData = formatData(value || {}); + + function formatData(sourceData: any) { + if (!sourceData) { + return null; + } + + const data = formatInheritData(cloneDeep(sourceData)); + if ( + data[`top-right-border-radius`] === data[`top-left-border-radius`] && + data[`top-left-border-radius`] === data[`bottom-right-border-radius`] && + data[`bottom-right-border-radius`] === data[`bottom-left-border-radius`] + ) { + data[`all-border-radius`] = data[`top-right-border-radius`]; + } else { + data[`all-border-radius`] = 'custom'; + } + return data; + } + + function getKey(type: string) { + return `${type}-border-radius`; + } + + function changeItem(type: string) { + return (val: string) => { + let field = getKey(type); + + if (val === 'custom') { + return; + } + + let changeValue = {}; + if (type === 'all') { + let newValue: Record = {}; + const items = radiusItems; + items.forEach(item => { + let itemKey = `${item.item}-border-radius`; + if ( + state && + state !== 'default' && + val?.includes('all-border-radius') + ) { + const defaultToken = (key: string) => + `var(${data.default.token}${key})`; + newValue[itemKey] = defaultToken(itemKey); + } else { + newValue[itemKey] = val; + } + }); + changeValue = { + ...value, + ...newValue + }; + } else { + changeValue = { + ...value, + [field]: val + }; + } + onChange(setInheritData(changeValue, editorInheritValue)); + setIsInherit(false); + }; + } + + useEffect(() => { + if (state && state !== 'default') { + if ( + value['top-left-border-radius']?.includes( + 'default-top-left-border-radius' + ) && + value['top-right-border-radius']?.includes( + 'default-top-right-border-radius' + ) && + value['bottom-left-border-radius']?.includes( + 'default-bottom-left-border-radius' + ) && + value['bottom-right-border-radius']?.includes( + 'default-bottom-right-border-radius' + ) + ) { + setIsInherit(true); + } + } + }, [value]); + + useEffect(() => { + if (borderData['all-border-radius'] === 'custom') { + setRadiusType('custom'); + } + }, []); + + return ( +
+ {label ?
{label}
: null} +
+
+
setRadiusType('all')} + >
+ {custom ? ( +
setRadiusType('custom')} + >
+ ) : null} +
+ +
+ +
+
+
+ {radiusType === 'custom' + ? radiusItems.map(item => { + const position = item.item; + return ( +
+ +
+
+ ); + }) + : null} +
+
+ ); +} + +@FormItem({ + type: 'amis-theme-radius', + strictMode: false, + renderLabel: false +}) +export class RadiusRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/Shadow.tsx b/packages/amis-theme-editor-helper/src/renderers/Shadow.tsx new file mode 100644 index 00000000000..52658a66ea8 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Shadow.tsx @@ -0,0 +1,447 @@ +/** + * @file Shadow.tsx + * @description 设置阴影 + */ + +import React from 'react'; +import {observer} from 'mobx-react'; +import cx from 'classnames'; +import {FormItem, PlainObject, render} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import type {ShadowData} from '../helper/declares'; +import {NumberInput, Overlay, PopOver, Select} from 'amis-ui'; +import cloneDeep from 'lodash/cloneDeep'; +import find from 'lodash/find'; +import isEqual from 'lodash/isEqual'; +import {ThemeWrapperHeader} from './ThemeWrapper'; +import ColorPicker from './ColorPicker'; +import {Icon as ThemeIcon} from '../icons/index'; +import {getValueByPath, getInheritValue, setInheritData} from '../util'; + +interface ShadowEditorProps extends FormControlProps {} + +interface ShadowViewProps { + show: boolean; + target: any; + name: string; + value: string[]; + close: () => void; +} + +interface ShadowOption { + label?: string; + value?: string; + realValue: ShadowData[]; +} + +function ShadowView(props: ShadowViewProps) { + const {show, target, name, value, close} = props; + + return ( + + +
+
阴影预览
+
+
+
+
+
{name}
+
+ {value?.map((shadow: string, index: number) => ( +
+ {shadow} +
+ ))} +
+
+
+ + + ); +} + +function ShadowEditor(props: ShadowEditorProps) { + const { + data, + onChange, + value, + hasSenior, + options, + colorOptions, + state, + itemName, + editorThemePath + } = props; + const target = React.useRef(null); + const [open, toggleOpen] = React.useState(true); + const [senior, toggleSenior] = React.useState(false); + const [show, toggleViewShow] = React.useState(false); + + const customShadow = { + label: '自定义', + value: 'custom', + realValue: [ + { + inset: false, + x: '0px', + y: '0px', + blur: '0px', + spread: '0px', + color: 'transparent' + } + ], + visible: false + }; + const shadowOptions = options + ? [...options, customShadow] + : [...cloneDeep(data.shadowOptions || []), customShadow]; + + if (state && state !== 'default') { + shadowOptions.unshift({ + value: editorThemePath ? 'inherit' : `var(${data.default.token}shadow)`, + label: '继承常规', + realValue: editorThemePath + ? ['继承常规'] + : [`var(${data.default.token}${itemName})`] + }); + } + const editorDefaultValue = getValueByPath(editorThemePath, data); + const editorInheritValue = getInheritValue(editorThemePath, data); + const defaultValue = value + ? (value.indexOf('inherit:') > -1 && 'inherit') || + find(cloneDeep(shadowOptions), item => item.value === value) || + formateCustomValue(value) + : null; + + const [shadowData, setShadowData] = React.useState( + defaultValue + ); + + React.useEffect(() => { + if ( + defaultValue && + (!shadowData || defaultValue.value !== shadowData.value) + ) { + setShadowData(defaultValue); + } + }, [defaultValue]); + + function formateCustomValue(value: string) { + const color: PlainObject = {}; + let colorIndex = 0; + value = value.trim().replace(/((rgba|rgb|var)\(.*?\))|(#.{6})/g, $1 => { + const key = '$' + colorIndex; + colorIndex++; + color[key] = $1; + return key; + }); + const realValue = value.split(',').map((item: string) => { + let inset = false; + if (item.includes('inset')) { + inset = true; + item = item.replace('inset', ''); + } + item = item.trim(); + const css = item.split(' '); + return { + inset, + x: css[0], + y: css[1], + blur: css[2], + spread: css[3], + color: color[css[4]] + }; + }); + return { + label: '自定义', + value: 'custom', + realValue + }; + } + + function formatRealValue(value?: ShadowData[]) { + if (!value) { + return {value: '', source: []}; + } + const res = value.map((shadow: ShadowData) => { + return `${shadow.inset ? 'inset' : ''} ${shadow.x || ''} ${ + shadow.y || '' + } ${shadow.blur || ''} ${shadow.spread || ''} ${ + shadow.color || 'transparent' + }`; + }); + return {value: res.join(', '), source: res}; + } + + function onShadowSelect(value: string) { + if (value === 'custom') { + return; + } + if (value) { + const findItem = find(shadowOptions, item => item.value === value); + if (findItem?.value) { + setShadowData(findItem); + onChange(setInheritData(findItem.value, editorInheritValue)); + } + } else { + setShadowData(undefined); + onChange(undefined); + } + } + + function changeToCustom(shadowData: ShadowOption) { + if (!shadowData.value) { + return shadowData; + } + const findItem = find( + shadowOptions, + item => item.value === shadowData.value + ); + if (!isEqual(shadowData.realValue, findItem.realValue)) { + return { + ...shadowData, + label: '自定义', + value: 'custom' + }; + } + return shadowData; + } + + function handleAdd(inset: boolean) { + const newData = changeToCustom({ + ...(shadowData || { + label: '自定义', + value: 'custom' + }), + realValue: [ + ...(shadowData?.realValue || []), + { + inset, + x: '0px', + y: '0px', + blur: '0px', + spread: '0px', + color: 'transparent' + } + ] + }); + setShadowData(newData); + onChange(formatRealValue(newData.realValue).value); + } + + function handleDelete(index: number) { + if (shadowData!.realValue.length === 1) { + return; + } + let data = cloneDeep(shadowData); + data!.realValue.splice(index, 1); + const newData = changeToCustom(data!); + setShadowData(newData); + onChange(formatRealValue(newData.realValue).value); + } + + function handleEdit(value: string, type: keyof ShadowData, index: number) { + if (type !== 'color') { + value += 'px'; + } + (shadowData!.realValue[index][type] as string) = value; + const newData = changeToCustom(shadowData!); + setShadowData(newData); + onChange(formatRealValue(newData.realValue).value); + } + + // 数据格式化 + const formatter = (value: string | number) => { + return value + 'px'; + }; + + // 还原数据 + const parser = (value: string) => { + return parseFloat(value); + }; + + return ( +
+ + {open && ( +
+
+
toggleViewShow(true)} + onMouseOut={() => toggleViewShow(false)} + > +
+
+ { + toggleViewShow(false); + }} + name={shadowData?.label || '无阴影'} + value={formatRealValue(shadowData?.realValue).source} + /> +
+ +
+ )} + + setShowOptions(false)}> +
+ {options?.map(item => { + return ( +
onSelectValue(item)} + className={cx( + currentItem?.value === item.value && + 'ThemeSelectContent-input-select-item--active' + )} + > + {item.html || item.label} +
+ ); + })} +
+ + + + ); +} + +function ThemeSelect(props: ThemeSelectProps) { + const { + data, + value: originValue, + options: originOptions, + extraUnit = ['px', 'rem', '%'], + disabled, + state, + itemName, + inheritValue, + isEditorTpl + } = props; + const themeSelect = useRef(null); + const [options, setOptions] = React.useState(getOptions()); + function getOptions() { + const list = cloneDeep( + typeof originOptions === 'string' + ? resolveVariableAndFilter(originOptions, data, '| raw') + : isEditorTpl && !originOptions + ? data?.sizesOptions || [] + : originOptions || [] + ); + + if ( + state && + state !== 'default' && + list[0] && + list[0].value !== `var(${data?.default?.token}${itemName})` + ) { + const name = isEditorTpl + ? 'inherit' + : `var(${data?.default?.token}${itemName})`; + list.unshift({ + label: '继承常规', + value: inheritValue || name, + realValue: '继承常规' + }); + } + return list; + } + useEffect(() => { + setOptions(getOptions()); + }, [originOptions]); + + return ( +
+ +
+ ); +} + +export default ThemeSelect; + +@FormItem({ + type: 'amis-theme-select', + strictMode: false, + renderLabel: true +}) +export class ThemeSelectRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx b/packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx new file mode 100644 index 00000000000..59b9ae68f86 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx @@ -0,0 +1,115 @@ +/** + * @file ThemeWrapper.tsx + * @description 收缩展开容器 + */ + +import React from 'react'; +import {render, Renderer} from 'amis'; +import {Icon as ThemeIcon} from '../icons/index'; +import cx from 'classnames'; +import type {FormControlProps} from 'amis-core'; +import {pick} from 'lodash'; +import {TooltipWrapper} from 'amis-ui'; + +interface ThemeWrapperProps { + hasSenior?: boolean; + hasOpen?: boolean; + senior?: boolean; + toggleSenior?: (value: boolean) => void; + open?: boolean; + toggleOpen?: (value: boolean) => void; + title?: string; +} + +interface ThemeWrapperControlProps extends FormControlProps { + hasSenior?: boolean; + title?: string; + body?: any; + seniorBody?: any; +} + +export function ThemeWrapperHeader(props: ThemeWrapperProps) { + const {hasSenior, hasOpen, senior, toggleSenior, open, toggleOpen, title} = + props; + + return ( +
+
+
{title}
+
+ {hasSenior && ( + + toggleSenior && toggleSenior(!senior)} + /> + + )} + {hasOpen && ( + toggleOpen && toggleOpen(!open)} + /> + )} +
+
+
+ ); +} + +function ThemeWrapperControl(props: ThemeWrapperControlProps) { + const {hasSenior = false, hasOpen = false, body, seniorBody, title} = props; + const [open, toggleOpen] = React.useState(true); + const [senior, toggleSenior] = React.useState(false); + const bodyProps = pick(props, [ + 'data', + 'formMode', + 'formLabelAlign', + 'formLabelWidth', + 'formHorizontal', + 'onChange' + ]); + + return ( +
+ {title || title === '' ? ( + + ) : null} +
+ {body ? render(body, bodyProps) : null} +
+ {seniorBody ? render(seniorBody, bodyProps) : null} +
+
+
+ ); +} + +@Renderer({ + type: 'amis-theme-wrapper' +}) +export default class ThemeWrapperRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/index.tsx b/packages/amis-theme-editor-helper/src/renderers/index.tsx new file mode 100644 index 00000000000..3ee13a64f38 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/index.tsx @@ -0,0 +1,8 @@ +import './PaddingAndMargin'; +import './Border'; +import './Radius'; +import './ColorPicker'; +import './Size'; +import './Font'; +import './Shadow'; +import './ThemeWrapper'; diff --git a/packages/amis-theme-editor-helper/src/style/_border.scss b/packages/amis-theme-editor-helper/src/style/_border.scss new file mode 100644 index 00000000000..33e4f627c25 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_border.scss @@ -0,0 +1,181 @@ +.Theme-Border { + &-label { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; + } + &-content { + display: flex; + justify-content: space-between; + } + &-all { + background: #f7f7f9; + border-radius: 4px; + height: px2rem(32px); + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 px2rem(32px); + + &:after { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #2468f2; + } + } + &-items { + position: relative; + width: px2rem(72px); + height: px2rem(72px); + background: #f7f7f9; + border-radius: px2rem(4px); + .Theme-Border-item { + position: absolute; + cursor: pointer; + height: px2rem(14px); + width: px2rem(14px); + } + .Theme-Border-item--all { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border: 2px solid #5c5f66; + } + .Theme-Border-item--right { + right: px2rem(7px); + top: 50%; + transform: translateY(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + height: px2rem(14px); + width: 2px; + background: #5c5f66; + position: absolute; + right: -2px; + top: -2px; + } + } + .Theme-Border-item--left { + left: px2rem(7px); + top: 50%; + transform: translateY(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + height: px2rem(14px); + width: 2px; + background: #5c5f66; + position: absolute; + left: -2px; + top: -2px; + } + } + .Theme-Border-item--top { + top: px2rem(7px); + left: 50%; + transform: translate(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + width: px2rem(14px); + height: 2px; + background: #5c5f66; + position: absolute; + right: -2px; + top: -2px; + } + } + .Theme-Border-item--bottom { + bottom: px2rem(7px); + left: 50%; + transform: translate(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + width: px2rem(14px); + height: 2px; + background: #5c5f66; + position: absolute; + right: -2px; + bottom: -2px; + } + } + .Theme-Border-item--active.Theme-Border-item--all { + border: 2px solid #2468f2; + } + .Theme-Border-item--active { + &:after { + background: #2468f2; + } + } + } + &-settings { + flex: 1; + margin-left: px2rem(16px); + .cxd-Form-item { + margin-bottom: 0; + } + .theme-select { + margin-bottom: px2rem(8px); + } + &-style-color { + display: flex; + justify-content: space-between; + .cxd-Select { + flex: 1; + margin-right: px2rem(4px); + } + } + } + + &-settings-width { + width: 100%; + margin-bottom: px2rem(8px); + } + + &-settings--all { + margin-left: px2rem(5px); + display: flex; + justify-content: space-between; + .theme-select { + margin-bottom: 0; + margin-right: px2rem(5px); + width: px2rem(80px); + flex: 1 0; + } + .Theme-Border-settings-style-color { + display: flex; + justify-content: space-between; + flex: 1; + .cxd-Select { + width: px2rem(96px); + height: px2rem(32px); + margin-left: px2rem(4px); + } + } + } + + &-style { + display: flex; + width: 100%; + align-items: center; + &-line { + border: 1px solid #000000; + height: 1px; + flex: 1; + margin-right: px2rem(14px); + } + } + .is-active { + .Theme-Border-style-line { + border-color: #2468f2; + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_color-picker.scss b/packages/amis-theme-editor-helper/src/style/_color-picker.scss new file mode 100644 index 00000000000..e5814cd4e43 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_color-picker.scss @@ -0,0 +1,600 @@ +$ns: cxd-; +.Theme-ColorPicker { + &-label-out { + height: px2rem(32px); + width: px2rem(32px); + border-radius: px2rem(4px); + cursor: pointer; + overflow: hidden; + } + &-label { + height: px2rem(32px); + width: px2rem(32px); + } + + &.is-disabled { + color: #b8babf; + border-color: #e8e9eb; + background: #f7f8fa; + } + + &.is-readOnly { + pointer-events: none; + } +} +.Theme-ColorPicker-title { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; +} +.Theme-ColorPicker--input { + display: flex; + height: px2rem(32px); + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + padding: 0px px2rem(10px); + align-items: center; + cursor: pointer; + .Theme-ColorPicker-label-out { + height: px2rem(22px); + width: px2rem(22px); + border-radius: px2rem(4px); + overflow: hidden; + flex-shrink: 0; + } + .Theme-ColorPicker-label { + height: px2rem(22px); + width: px2rem(22px); + } + .Theme-ColorPicker-input { + margin-left: px2rem(6px); + overflow: hidden; + flex-grow: 1; + width: auto; + max-width: 100%; + > div { + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + &--placeholder { + color: var(--Form-select-placeholderColor); + } + } + .Theme-ColorPicker-arrow { + width: px2rem(16px); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + transform: rotate(90deg); + transition: transform 0.2s; + & > svg { + width: 0.625rem; + height: 0.625rem; + top: 0; + color: var(--default-icon-color); + } + } + .Theme-ColorPicker-arrow--active { + transform: rotate(270deg); + } +} + +.Theme-ColorSelect { + width: px2rem(240px); + &-tab { + display: flex; + padding: px2rem(14px) px2rem(12px); + border: 1px solid #e8e9eb; + & > div { + height: px2rem(16px); + width: px2rem(16px); + border-radius: 50%; + margin-right: px2rem(12px); + cursor: pointer; + & > svg { + height: px2rem(16px); + width: px2rem(16px); + } + } + &-color { + background-color: #e8e9eb; + } + &-color--active { + background: #d4e5ff; + border: 1px solid #2468f2; + } + &-gradient { + background-image: linear-gradient(180deg, #f4f4f4 0%, #b8babf 100%); + } + &-gradient--active { + background-image: linear-gradient(180deg, #ffffff 0%, #6296ff 99%); + border: 1px solid #2468f2; + } + &-img--active > svg { + border: 1px solid #2468f2; + border-radius: 50%; + } + } + &-tab { + &-sub { + display: flex; + font-size: 12px; + color: #5c5f66; + padding: px2rem(12px) 0; + margin: 0 px2rem(14px); + border-bottom: 1px solid #e8e9eb; + &-item { + margin-right: px2rem(30px); + cursor: pointer; + } + &--active { + color: #2468f2; + } + } + } + &-content { + padding: px2rem(12px); + } + &-PresetColors { + margin-top: px2rem(10px); + padding-top: px2rem(10px); + border-top: 1px solid #e8e9eb; + &-header { + font-size: 12px; + color: #5c5f66; + } + &-edit { + float: right; + cursor: pointer; + &:hover { + color: #2468f2; + } + } + &-editing { + color: #2468f2; + } + + &-content { + margin: 0 px2rem(-4px); + margin-top: px2rem(4px); + display: flex; + flex-wrap: wrap; + & > div { + cursor: pointer; + height: px2rem(20px); + width: px2rem(20px); + border-radius: px2rem(2px); + margin: 0 px2rem(4px); + display: flex; + align-items: center; + justify-content: center; + position: relative; + > div { + height: px2rem(20px); + width: px2rem(20px); + } + } + &-placeholder { + font-size: 12px; + color: #b8babf; + } + } + &-content-editing { + & > div:hover { + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.4); + } + + &::after { + font-family: 'Font Awesome 5 Free'; + content: '\f2ed'; + color: #fff; + position: absolute; + font-size: 12px; + } + } + } + } +} +.ThemeColorList { + max-height: px2rem(310px); + width: px2rem(216px); + overflow: auto; + &-title { + font-size: 12px; + color: #151b26; + } + + &-content { + display: flex; + margin: px2rem(12px) 0; + &-title { + font-size: 12px; + color: #5c5f66; + font-weight: 400; + margin-right: px2rem(12px); + flex: px2rem(36px) 0 0; + line-height: px2rem(24px); + } + &-label { + height: px2rem(24px); + width: px2rem(24px); + border-radius: px2rem(2px); + margin-right: px2rem(8px); + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + } + &-label-inner { + height: px2rem(20px); + width: px2rem(20px); + border-radius: px2rem(2px); + } + &-label--border { + border: 1px solid #f7f7f9; + } + &-label--active { + border: 1px solid #2468f2; + border-radius: 2px; + } + } + &-content--top { + margin-top: 0; + position: relative; + } + &-content--search { + position: absolute; + right: 0; + input { + font-size: 12px; + } + .cxd-SearchBox.is-active { + width: px2rem(216px); + } + } +} + +.Theme-GradientColor { + &-slider { + display: flex; + align-items: center; + margin-bottom: px2rem(10px); + } + &-slider-inner { + margin: 0 px2rem(7px); + height: px2rem(8px); + position: relative; + display: flex; + align-items: center; + cursor: copy; + flex: 1 1 auto; + margin-right: px2rem(10px); + border: 1px solid #a5a5a5; + border-radius: px2rem(4px); + &-item { + position: absolute; + height: px2rem(14px); + width: px2rem(14px); + border-radius: 50%; + border: 2px solid #ffffff; + cursor: pointer; + box-shadow: 0px 0px 2px 1px #a5a5a5; + } + &-item--active { + box-shadow: 0px 0px 2px 1px #2468f2; + } + } + &-range { + width: px2rem(40px); + position: relative; + .cxd-Number { + height: px2rem(26px); + } + .cxd-Number-handler-wrap { + display: none !important; + } + .cxd-Number-input { + padding: 0 px2rem(4px); + font-size: 12px; + } + &-panel { + width: px2rem(70px); + background: #fff; + padding: px2rem(4px); + &-title { + font-size: 12px; + color: #5c5f66; + transform: scale(0.9); + margin-bottom: px2rem(4px); + } + &-content { + height: 50px; + width: 50px; + margin: 0 auto; + border-radius: 50%; + background: #d0d0d0; + position: relative; + &-handler { + height: 8px; + width: 8px; + border-radius: 50%; + background: #5c5f66; + position: absolute; + cursor: pointer; + left: 12px; + } + } + } + } +} + +.Theme-ImageInput { + .resourceManager-background, + .#{$ns}ImageControl-addBtn, + .#{$ns}ImageControl-item, + .#{$ns}Image-thumb, + .#{$ns}Image--thumb { + width: 100%; + } + .#{$ns}Form-item { + margin-bottom: px2rem(8px); + } + &-func { + display: grid; + grid-column-gap: px2rem(10px); + grid-template-columns: auto px2rem(32px) px2rem(32px); + } +} + +.Theme-ImageInput-position { + height: px2rem(32px); + width: px2rem(32px); + overflow: hidden; + cursor: pointer; + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + display: grid; + grid-template-columns: repeat(3, 33.33%); + grid-template-rows: repeat(3, 33.33%); + &-item { + border: 1px solid #e8e9eb; + &:nth-child(1) { + border-top: none; + border-left: none; + } + &:nth-child(2) { + border-top: none; + border-left: none; + border-right: none; + } + &:nth-child(3) { + border-top: none; + border-right: none; + } + &:nth-child(4) { + border-top: none; + border-left: none; + border-bottom: none; + } + &:nth-child(5) { + border: none; + } + &:nth-child(6) { + border-top: none; + border-right: none; + border-bottom: none; + } + &:nth-child(7) { + border-left: none; + border-bottom: none; + } + &:nth-child(8) { + border-left: none; + border-right: none; + border-bottom: none; + } + &:nth-child(9) { + border-right: none; + border-bottom: none; + } + } + &-item--active { + background: #2468f2; + } +} +.Theme-ImageInput-position-container { + padding: px2rem(16px); + padding-top: px2rem(10px); + .Theme-ImageInput-position-title { + font-size: 12px; + margin-bottom: px2rem(10px); + } +} +.Theme-ImageInput-position-content { + width: 100px; + height: 100px; + cursor: pointer; + overflow: hidden; + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + display: grid; + grid-template-columns: repeat(3, 33.33%); + grid-template-rows: repeat(3, 33.33%); + &-item--active { + background: #2468f2; + } + &-item { + border: 1px solid #e8e9eb; + &:nth-child(1) { + border-top: none; + border-left: none; + } + &:nth-child(2) { + border-top: none; + border-left: none; + border-right: none; + } + &:nth-child(3) { + border-top: none; + border-right: none; + } + &:nth-child(4) { + border-top: none; + border-left: none; + border-bottom: none; + } + &:nth-child(5) { + border: none; + } + &:nth-child(6) { + border-top: none; + border-right: none; + border-bottom: none; + } + &:nth-child(7) { + border-left: none; + border-bottom: none; + } + &:nth-child(8) { + border-left: none; + border-right: none; + border-bottom: none; + } + &:nth-child(9) { + border-right: none; + border-bottom: none; + } + + &:hover { + background: #e6f0ff; + } + } +} +.Theme-ImageInput-color { + width: px2rem(32px); + height: px2rem(32px); + cursor: pointer; + border-radius: px2rem(4px); + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; + border: 1px solid #f7f7f9; +} +.Theme-ImageInput-color-container { + padding: 16px; +} +.Theme-ImageInput-color-content { + &-tab { + display: flex; + font-size: 12px; + color: #5c5f66; + padding-bottom: px2rem(14px); + margin-bottom: px2rem(14px); + border-bottom: 1px solid #e8e9eb; + &-item { + margin-right: px2rem(30px); + cursor: pointer; + &--active { + color: #2468f2; + } + } + } +} + +.Theme-CustomColor, +.Theme-GradientColor { + .sketch-picker { + box-shadow: none !important; + padding: 0 !important; + } +} + +.ThemeColor--transparent { + background-color: #fff !important; + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ) !important; + background-size: 10px 10px !important; + background-position: 0 0, 5px 5px !important; + border: 1px solid #f7f7f9; +} + +.ThemeColor--delete { + border: 1px solid #f7f7f9; + width: 100%; + height: 100%; + background: #fff; + &::before { + content: ''; + height: 2px; + width: 100%; + display: block; + transform: rotate(-45deg) translateY(-50%); + background-color: #f23d3d; + margin-top: 50%; + } +} + +[color-tooltip] { + position: relative; + &:hover { + &:before { + display: block; + } + } + &:before { + content: attr(color-tooltip); + width: max-content; + padding: px2rem(6px); + display: none; + position: absolute; + font-size: 12px; + bottom: px2rem(-35px); + left: 50%; + transform: scale(0.9) translateX(-50%); + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + border-radius: px2rem(2px); + background: #fff; + z-index: 1500; + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_font.scss b/packages/amis-theme-editor-helper/src/style/_font.scss new file mode 100644 index 00000000000..fa98a590684 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_font.scss @@ -0,0 +1,97 @@ +$ns: cxd-; + +.Theme-FontEditor { + .common-icon { + width: px2rem(16px); + height: px2rem(16px); + cursor: pointer; + color: #5c5f66; + } + + &-line { + display: flex; + justify-content: space-between; + margin-bottom: px2rem(12px); + + .#{$ns}Button { + padding: px2rem(6px) px2rem(8px); + } + } + + &-item { + display: flex; + flex: 1; + margin-right: px2rem(4px); + align-items: top; + flex-direction: column; + min-width: 0; + + &:last-child { + margin-right: 0; + } + + &-label { + font-size: 12px; + color: #5c5f66; + line-height: px2rem(20px); + margin-top: px2rem(4px); + text-align: center; + } + + .#{$ns}Form-item { + flex: 1; + margin: 0; + } + + .#{$ns}Select { + font-size: 12px; + } + + .#{$ns}Select-popover { + min-width: px2rem(150px) !important; + } + + .color-picker { + background: #151b26; + border-radius: 4px; + width: px2rem(32px); + height: px2rem(32px); + } + + &-color-picker { + width: px2rem(32px); + flex: 0 1 2rem; + } + } + + &-font-line { + margin: 0; + } + + &-font-style { + display: flex; + justify-content: stretch; + background: #f7f7f9; + margin-bottom: px2rem(12px); + margin-top: px2rem(8px); + + &-icon { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + height: px2rem(32px); + cursor: pointer; + } + + .right-line { + border-right: 1px solid #d8d8d8; + } + + &-selected { + .common-icon { + color: #2468f2; + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss b/packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss new file mode 100644 index 00000000000..e5514e6c8b3 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss @@ -0,0 +1,224 @@ +$bg: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjEzMnB4IiB2aWV3Qm94PSIwIDAgMjU2IDEzMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgZmlsbD0iI0VFRjNGRSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIxMzIiIHJ4PSI0Ij48L3JlY3Q+CiAgICAgICAgPHBhdGggZD0iTTEuNTgwNzA5MDIsMC44MTQyODgxMyBMMTI4LDY2IEwxLjU4MDcwOTAyLDEzMS4xODU3MTIgQzAuNjIwMTMxOTM0LDEzMC40NTUxMDUgMS41OTIwMDcxMWUtMTYsMTI5LjI5OTk3MiAwLDEyOCBMMCw0IEMtMS41OTIwMDcxMWUtMTYsMi43MDAwMjc1NCAwLjYyMDEzMTkzNCwxLjU0NDg5NDY2IDEuNTgwNzA5MDIsMC44MTQyODgxMyBaIE0yNTYsNCBMMjU2LDEyOCBDMjU2LDEyOS4yOTk1MiAyNTUuMzgwMywxMzAuNDU0MzAxIDI1NC40MjAyOTQsMTMxLjE4NDk0OSBMMTI4LDY2IEwyNTQuNDE5MjkxLDAuODE0Mjg4MTMgQzI1NS4zNzk4NjgsMS41NDQ4OTQ2NiAyNTYsMi43MDAwMjc1NCAyNTYsNCBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRTNFRUZGIj48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTIxMSwyMyBMMjExLDEwOSBMNDQsMTA5IEw0NCwyMyBMMjExLDIzIFogTTE5OSwyOSBMNTYsMjkgTDU2LDEwMyBMMTk5LDEwMyBMMTk5LDI5IFoiIGlkPSLlvaLnirbnu5PlkIgiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4KICAgICAgICA8cmVjdCBpZD0i55+p5b2iIiBmaWxsPSIjRkZGRkZGIiB4PSIxMTEiIHk9IjU3IiB3aWR0aD0iMzQiIGhlaWdodD0iMTgiPjwvcmVjdD4KICAgIDwvZz4KPC9zdmc+'); +.Theme-PaddingAndMargin { + &-title { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; + } + &-inner { + display: flex; + justify-content: space-between; + .theme-select { + width: 100%; + } + } + &-input { + flex-direction: column; + align-items: center; + flex: 1; + margin-left: px2rem(4px); + min-width: 0; + &-label { + font-size: 12px; + color: #5c5f66; + text-align: center; + } + } + &-label { + border-radius: 4px; + overflow: hidden; + height: px2rem(32px); + width: px2rem(32px); + flex-shrink: 0; + flex-grow: 0; + display: flex; + cursor: pointer; + &-all { + background: #f7f7f9; + height: px2rem(32px); + display: inline-flex; + align-items: center; + justify-content: center; + width: px2rem(32px); + &:before { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #5c5f66; + border-radius: 2px; + } + } + &-custom { + background: #f7f7f9; + height: px2rem(32px); + width: px2rem(32px); + position: relative; + border-left: 1px solid #e8e9eb; + > div { + height: px2rem(14px); + width: px2rem(14px); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + &:before, + &:after { + position: absolute; + content: ''; + display: block; + background: #5c5f66; + height: px2rem(2px); + width: px2rem(2px); + border-radius: px2rem(1px); + } + } + > div:first-child { + &:before { + width: px2rem(8px); + top: 0; + left: px2rem(3px); + } + &:after { + height: px2rem(8px); + top: px2rem(3px); + left: 0; + } + } + > div:last-child { + &:before { + width: px2rem(8px); + bottom: 0; + left: px2rem(3px); + } + &:after { + height: px2rem(8px); + bottom: px2rem(3px); + right: 0; + } + } + } + &-all--active { + &:before { + border-color: #2468f2; + } + } + &-custom--active > div { + &:before, + &:after { + background-color: #2468f2; + } + } + } + &-label--custom { + width: px2rem(64px); + } + .cxd-Form-item { + margin-bottom: 0; + } + + &-custom { + height: px2rem(132px); + width: px2rem(256px); + margin: 0 auto; + margin-top: px2rem(8px); + background: $bg; + position: relative; + &::before, + &::after { + font-size: 10px; + color: #b8babf; + font-weight: 400; + position: absolute; + transform: scale(0.8); + } + & > div { + font-size: 12px; + color: #5c5f66; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + padding: px2rem(2px); + cursor: pointer; + word-wrap: break-word; + line-height: 0.8; + min-width: px2rem(40px); + min-height: px2rem(14px); + border: 1px solid transparent; + div { + transform: scale(0.8); + transform-origin: left; + } + &:hover { + color: #2468f2; + border-color: #2468f2; + border-radius: px2rem(2px); + } + } + &-marginTop { + top: px2rem(4px); + left: 50%; + transform: translateX(-50%); + } + &-marginBottom { + bottom: px2rem(4px); + left: 50%; + transform: translateX(-50%); + } + &-marginLeft { + left: px2rem(4px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-marginRight { + right: px2rem(4px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-paddingTop { + top: px2rem(34px); + left: 50%; + transform: translateX(-50%); + } + &-paddingBottom { + bottom: px2rem(34px); + left: 50%; + transform: translateX(-50%); + } + &-paddingLeft { + left: px2rem(60px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-paddingRight { + right: px2rem(60px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-popover { + padding: px2rem(16px) px2rem(12px); + .cxd-Form-item { + margin-bottom: 0; + } + } + } + &-custom--padding { + &::after { + content: 'Padding'; + top: px2rem(28px); + left: px2rem(56px); + } + } + &-custom--margin { + &::before { + content: 'Margin'; + top: 0; + left: px2rem(2px); + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_radius.scss b/packages/amis-theme-editor-helper/src/style/_radius.scss new file mode 100644 index 00000000000..aea77de2639 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_radius.scss @@ -0,0 +1,128 @@ +.Theme-Radius { + &-label { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; + } + .cxd-Form-item { + margin-bottom: 0; + } + &-inner { + display: flex; + } + &-item { + margin-right: px2rem(4px); + border-radius: 4px; + overflow: hidden; + height: px2rem(32px); + width: px2rem(32px); + flex-shrink: 0; + flex-grow: 0; + display: flex; + cursor: pointer; + &-all { + background: #f7f7f9; + height: px2rem(32px); + display: inline-flex; + align-items: center; + justify-content: center; + width: px2rem(32px); + &:before { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #5c5f66; + border-radius: 2px; + } + } + &-custom { + background: #f7f7f9; + height: px2rem(32px); + position: relative; + width: px2rem(32px); + border-left: 1px solid #e8e9eb; + &:before { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #5c5f66; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 2px; + } + &:after { + content: '＋'; + color: #f7f7f9; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: px2rem(30px); + font-weight: 900; + } + } + &-all--active, + &-custom--active { + &:before { + border-color: #2468f2; + } + } + } + &-item--custom { + width: px2rem(64px); + } + &-settings { + flex: 1; + } + + &-settings-custom { + display: flex; + justify-content: space-between; + margin-top: px2rem(8px); + .arrow-icon { + display: none; + } + input { + padding: 0 !important; + } + .theme-select { + padding: 0 px2rem(4px) !important; + } + &-item:last-child { + margin-right: 0; + } + &-item { + flex: 1; + min-width: 0; + margin-right: px2rem(4px); + &-label { + height: px2rem(10px); + width: px2rem(10px); + border: 0 solid #5c5f66; + margin: px2rem(8px) auto; + border-radius: 2px; + } + &-top-left { + border-top-width: 2px; + border-left-width: 2px; + } + &-top-right { + border-top-width: 2px; + border-right-width: 2px; + } + &-bottom-left { + border-bottom-width: 2px; + border-left-width: 2px; + } + &-bottom-right { + border-bottom-width: 2px; + border-right-width: 2px; + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_shadow.scss b/packages/amis-theme-editor-helper/src/style/_shadow.scss new file mode 100644 index 00000000000..8ce68b2bab4 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_shadow.scss @@ -0,0 +1,236 @@ +$ns: cxd-; + +.Theme-ShadowEditor { + .#{$ns}Theme-ShadowEditor-add { + color: #5c5f66; + width: px2rem(12px); + height: px2rem(12px); + padding: 0; + + &:not(:disabled):not(.is-disabled):hover { + color: #5c5f66; + } + } + &-customContent { + background-color: #f7f7f9; + border-radius: 4px; + padding: px2rem(10px); + margin-top: px2rem(10px); + } + + &-sub-header { + margin-bottom: 0; + .Theme-Wrapper-header-left { + color: #5c5f66; + } + } + + &-line { + display: flex; + justify-content: space-between; + margin-top: px2rem(12px); + + .#{$ns}Button { + padding: px2rem(6px) px2rem(8px); + } + } + + &-item { + display: flex; + flex: 1; + margin-right: px2rem(4px); + align-items: top; + flex-direction: column; + + &:last-child { + margin-right: 0; + } + + &-label { + font-size: 12px; + color: #5c5f66; + line-height: px2rem(12px); + margin: px2rem(4px) 0 px2rem(8px); + text-align: center; + } + + .#{$ns}Form-item { + flex: 1; + margin: 0; + } + + .#{$ns}Select { + font-size: 12px; + } + + .#{$ns}Select-popover { + min-width: px2rem(150px) !important; + } + + .Theme-ShadowEditor-color-picker { + background: #fff; + border: 1px solid rgba($color: #979797, $alpha: 0.1); + border-radius: px2rem(4px); + padding: px2rem(6px) px2rem(12px); + height: px2rem(32px); + display: flex; + justify-content: center; + align-items: center; + + .Theme-ColorPicker-arrow { + display: none; + } + + .Theme-ColorPicker-label-out, + .Theme-ColorPicker-label { + height: px2rem(20px); + } + } + + .#{$ns}Number { + .#{$ns}Select { + display: none; + } + .#{$ns}Number-handler-wrap { + display: none !important; + } + input { + padding: 0 px2rem(4px) !important; + } + } + } + + .trash-icon { + font-size: px2rem(16px); + align-items: center; + margin-left: px2rem(4px); + flex-basis: px2rem(16px); + flex-grow: initial; + .common-icon { + margin-top: px2rem(8px); + cursor: pointer; + path { + fill: var(--colors-neutral-text-2); + } + &:hover { + path { + fill: var(--colors-brand-5); + } + } + } + .disabled-icon { + cursor: not-allowed; + path { + fill: var(--colors-neutral-text-5); + } + &:hover { + path { + fill: var(--colors-neutral-text-5); + } + } + } + } + + &-view { + width: px2rem(42px); + height: px2rem(32px); + border: 1px solid rgba($color: #979797, $alpha: 0.1); + border-radius: px2rem(4px); + margin-right: px2rem(4px); + background-color: #fff; + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + + &-inner { + width: px2rem(28px); + height: px2rem(20px); + background: #fff; + } + } +} + +.Theme-ShadowView { + width: px2rem(300px); + font-size: 12px; + padding: px2rem(12px); + + &-header { + color: #050a10; + line-height: px2rem(20px); + font-weight: 500; + margin-bottom: px2rem(8px); + } + + &-body { + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + padding: px2rem(12px); + + &-shadow { + width: 100%; + height: px2rem(100px); + background-color: #fff; + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + } + + &-shadow-square { + width: px2rem(164px); + height: px2rem(70px); + background: #fff; + } + + &-title { + font-size: 12px; + color: #050a10; + line-height: px2rem(20px); + font-weight: 500; + margin: px2rem(8px) 0 0; + } + + &-value { + color: #83868c; + line-height: px2rem(20px); + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_size.scss b/packages/amis-theme-editor-helper/src/style/_size.scss new file mode 100644 index 00000000000..a91825ceb8a --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_size.scss @@ -0,0 +1,118 @@ +$ns: cxd-; + +.Theme-SizeEditor { + &-label { + margin-bottom: 0.625rem; + color: #5c5f66; + font-size: 12px; + } + + &-line { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: px2rem(12px); + + .#{$ns}Button { + padding: px2rem(6px) px2rem(8px); + width: px2rem(32px); + } + + &-no-hide { + .Theme-SizeEditor-item { + width: px2rem(210px); + max-width: px2rem(210px); + .theme-select { + width: px2rem(174px); + max-width: px2rem(174px); + } + } + } + + .Theme-SizeEditor-item-label { + width: px2rem(36px); + } + + .Theme-SizeEditor-item:not(:last-child) { + margin-bottom: px2rem(8px); + } + } + + &-lock { + position: relative; + &::before { + content: ''; + display: block; + position: absolute; + top: px2rem(-10px); + left: px2rem(-10px); + width: px2rem(26px); + height: px2rem(10px); + border: none; + border-top: 1px solid #b8babf; + border-right: 1px solid #b8babf; + } + &::after { + content: ''; + display: block; + position: absolute; + bottom: px2rem(-10px); + left: px2rem(-10px); + width: px2rem(26px); + height: px2rem(10px); + border: none; + border-bottom: 1px solid #b8babf; + border-right: 1px solid #b8babf; + } + } + + &-item { + display: flex; + flex: 1; + align-items: center; + + &-label { + padding: px2rem(6px) px2rem(12px); + font-size: 12px; + color: #b8babf; + line-height: 18px; + border: px2rem(1px) solid #e8e9eb; + border-right: 0; + border-top-left-radius: px2rem(4px); + border-bottom-left-radius: px2rem(4px); + } + + .#{$ns}Form-item { + margin: 0; + } + + .#{$ns}TextControl-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + font-size: 12px; + } + + .#{$ns}TextControl-sugs { + min-width: px2rem(150px) !important; + } + } + + &-item-sigle { + display: block; + + .#{$ns}Form-item { + width: auto; + } + + .Theme-SizeEditor-item { + div { + flex-grow: 1; + } + + .Theme-SizeEditor-item-label { + width: auto; + flex-grow: 0; + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_theme-select.scss b/packages/amis-theme-editor-helper/src/style/_theme-select.scss new file mode 100644 index 00000000000..54eb9576480 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_theme-select.scss @@ -0,0 +1,88 @@ +$ns: cxd-; + +.theme-select { + position: relative; + flex: 1 0 px2rem(32px); + border: 1px solid #e8e9eb; + border-radius: 4px; + height: px2rem(32px); + padding: 0 px2rem(8px); + display: flex; + align-items: center; + .ThemeSelectContent-theme { + background-color: #f7f8fa; + border-radius: 2px; + padding: 0 px2rem(4px); + width: fit-content; + height: px2rem(24px); + display: flex; + align-items: center; + cursor: pointer; + overflow: hidden; + > div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + > .icon-close { + color: #b8babf; + margin-left: px2rem(4px); + top: 0; + flex: 1 0 1em; + &:hover { + color: #2468f2; + } + } + } + .ThemeSelectContent-input { + border: none; + outline: none; + width: 100%; + &::placeholder { + color: #b8babf; + } + } + + &:hover, + &--active { + border-color: #2468f2; + } +} + +.theme-select--disabled { + background-color: #f7f8fa; + cursor: not-allowed; + .ThemeSelectContent-theme { + cursor: not-allowed; + } +} + +.ThemeSelectContent-input-select { + max-height: px2rem(200px); + max-width: px2rem(200px); + overflow: scroll; + & > div { + height: px2rem(32px); + line-height: px2rem(32px); + padding: 0 px2rem(8px); + cursor: pointer; + &:hover { + background-color: #e6f0ff; + } + } + &-item--active { + color: #2468f2; + } +} + +.arrow-icon { + width: px2rem(10px); + height: px2rem(10px); + color: #84868c; + transform: rotate(90deg); + transition: transform 0.2s ease; +} + +.arrow-icon-reverse { + transform: rotate(270deg); +} diff --git a/packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss b/packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss new file mode 100644 index 00000000000..105af7f26e0 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss @@ -0,0 +1,69 @@ +$ns: cxd-; + +.Theme-Wrapper { + .common-icon { + width: px2rem(16px); + height: px2rem(16px); + cursor: pointer; + color: #5c5f66; + } + + &-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: px2rem(8px); + + &-left { + font-size: 12px; + color: #070c14; + line-height: px2rem(20px); + font-weight: 400; + } + + &-right { + display: flex; + align-items: center; + + .arrow-icon { + width: px2rem(10px); + height: px2rem(10px); + color: #84868c; + transform: rotate(90deg); + transition: transform 0.2s ease; + margin-left: px2rem(8px); + cursor: pointer; + } + + .arrow-icon-reverse { + transform: rotate(270deg); + } + } + } + + &-body { + .#{$ns}Form-item { + margin-bottom: px2rem(16px); + } + + .theme-select .#{$ns}Form-item { + margin-bottom: 0; + } + + .theme-select, + .#{$ns}IconSelectControl-input { + border-radius: 0 px2rem(4px) px2rem(4px) 0; + height: px2rem(32px); + } + + .#{$ns}Form-label { + border: 1px solid #e8e9eb; + border-right: none; + border-radius: px2rem(4px) 0 0 px2rem(4px); + padding: 0 px2rem(12px); + width: auto !important; + flex-grow: 0; + height: px2rem(32px); + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/index.scss b/packages/amis-theme-editor-helper/src/style/index.scss new file mode 100644 index 00000000000..b00c88aadfd --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/index.scss @@ -0,0 +1,15 @@ +$remFactor: 16px; +@import '../../../../node_modules/amis-ui/scss/functions'; +@import './padding-and-margin'; +@import './border'; +@import './radius'; +@import './color-picker'; +@import './size'; +@import './theme-select'; +@import './font'; +@import './theme-wrapper'; +@import './shadow'; + +.cxd-PopOver { + z-index: 1400 !important; +} diff --git a/packages/amis-theme-editor-helper/src/systemTheme/antd.ts b/packages/amis-theme-editor-helper/src/systemTheme/antd.ts new file mode 100644 index 00000000000..e863e9d860e --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/antd.ts @@ -0,0 +1,1187 @@ +import type {ThemeDefinition} from '../helper/declares'; +import component from './component'; + +const antdData: ThemeDefinition = { + config: { + key: 'antd', + name: '仿Antd', + description: '平台预设主题' + }, + global: { + fonts: { + base: { + body: [ + {value: '-apple-system'}, + {value: 'BlinkMacSystemFont'}, + {value: 'SF Pro SC'}, + {value: 'SF Pro Text'}, + {value: 'Helvetica Neue'}, + {value: 'Helvetica'}, + {value: 'PingFang SC'}, + {value: 'Segoe UI'}, + {value: 'Roboto'}, + {value: 'Hiragino Sans GB'}, + {value: 'Arial'}, + {value: 'microsoft yahei ui'}, + {value: 'Microsoft YaHei'}, + {value: 'SimSun'}, + {value: 'sans-serif'} + ], + label: '基础字体', + token: '--fonts-base-family' + }, + size: { + body: [ + {label: '运营标题-大', token: '--fonts-size-1', value: '48px'}, + {label: '运营标题-中', token: '--fonts-size-2', value: '40px'}, + {label: '运营标题-小', token: '--fonts-size-3', value: '32px'}, + {label: '标题-大', token: '--fonts-size-4', value: '24px'}, + {label: '标题-中', token: '--fonts-size-5', value: '18px'}, + {label: '标题-小', token: '--fonts-size-6', value: '16px'}, + {label: '正文-常规-大', token: '--fonts-size-7', value: '14px'}, + {label: '正文-常规-小', token: '--fonts-size-8', value: '12px'}, + {label: '水印文字', token: '--fonts-size-9', value: '12px'} + ], + label: '字号', + token: '--fonts-size-' + }, + weight: { + body: [ + {label: 'Ultra bold(heavy)', token: '--fonts-weight-1', value: 900}, + {label: 'Extra bold', token: '--fonts-weight-2', value: 800}, + {label: 'Blod', token: '--fonts-weight-3', value: 700}, + {label: 'Semi bold', token: '--fonts-weight-4', value: 600}, + {label: 'Medium', token: '--fonts-weight-5', value: 500}, + {label: 'Regular', token: '--fonts-weight-6', value: 400}, + {label: 'Light', token: '--fonts-weight-7', value: 300}, + {label: 'Extra light(thin)', token: '--fonts-weight-8', value: 200}, + {label: 'Uitra light', token: '--fonts-weight-9', value: 100} + ], + label: '字重', + token: '--fonts-weight-' + }, + lineHeight: { + body: [ + {label: 'Line-height-1', token: '--fonts-lineHeight-1', value: 1.3}, + {label: 'Line-height-2', token: '--fonts-lineHeight-2', value: 1.5}, + {label: 'Line-height-3', token: '--fonts-lineHeight-3', value: 1.7} + ], + label: '行高', + token: '--fonts-lineHeight-' + } + }, + sizes: { + size: { + base: 0.125, + body: [ + {label: '无', token: '--sizes-size-0', value: '0rem', disabled: true}, + { + label: 'auto', + token: '--sizes-size-1', + value: 'auto', + disabled: true + }, + { + label: '特小', + token: '--sizes-size-2', + value: '0.125rem' + }, + { + label: '极小', + token: '--sizes-size-3', + value: '0.25rem' + }, + { + label: '小', + token: '--sizes-size-4', + value: '0.375rem' + }, + { + label: '正常', + token: '--sizes-size-5', + value: '0.5rem' + }, + { + label: '中', + token: '--sizes-size-6', + value: '0.625rem' + }, + { + label: '大', + token: '--sizes-size-7', + value: '0.75rem' + }, + { + label: '极大', + token: '--sizes-size-8', + value: '0.875rem' + }, + { + label: '特大', + token: '--sizes-size-9', + value: '1rem' + } + ], + label: '尺寸', + start: '0.125rem', + token: '--sizes-size-' + } + }, + colors: { + func: { + body: [ + { + body: { + main: '#ff4d4f', + colors: [ + { + color: '#660a18', + index: 0, + label: '1-#660a18', + token: '--colors-error-1' + }, + { + color: '#8c1523', + index: 1, + label: '2-#8c1523', + token: '--colors-error-2' + }, + { + color: '#b32430', + index: 2, + label: '3-#b32430', + token: '--colors-error-3' + }, + { + color: '#d9363e', + index: 3, + label: '4-#d9363e', + token: '--colors-error-4' + }, + { + color: '#ff4d4f', + index: 4, + label: '5-#ff4d4f', + token: '--colors-error-5' + }, + { + color: '#ff7070', + index: 5, + label: '6-#ff7070', + token: '--colors-error-6' + }, + { + color: '#ff9694', + index: 6, + label: '7-#ff9694', + token: '--colors-error-7' + }, + { + color: '#ffbab8', + index: 7, + label: '8-#ffbab8', + token: '--colors-error-8' + }, + { + color: '#ffdddb', + index: 8, + label: '9-#ffdddb', + token: '--colors-error-9' + }, + { + color: '#ffe7e6', + index: 9, + label: '10-#ffe7e6', + token: '--colors-error-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '失败色', + token: '--colors-error-' + }, + { + body: { + main: '#faad14', + colors: [ + { + color: '#613400', + index: 0, + label: '1-#613400', + token: '--colors-warning-1' + }, + { + color: '#874d00', + index: 1, + label: '2-#874d00', + token: '--colors-warning-2' + }, + { + color: '#ad6800', + index: 2, + label: '3-#ad6800', + token: '--colors-warning-3' + }, + { + color: '#d48806', + index: 3, + label: '4-#d48806', + token: '--colors-warning-4' + }, + { + color: '#faad14', + index: 4, + label: '5-#faad14', + token: '--colors-warning-5' + }, + { + color: '#ffc443', + index: 5, + label: '6-#ffc443', + token: '--colors-warning-6' + }, + { + color: '#ffd572', + index: 6, + label: '7-#ffd572', + token: '--colors-warning-7' + }, + { + color: '#ffe4a1', + index: 7, + label: '8-#ffe4a1', + token: '--colors-warning-8' + }, + { + color: '#fff2d0', + index: 8, + label: '9-#fff2d0', + token: '--colors-warning-9' + }, + { + color: '#fff9e6', + index: 9, + label: '10-#fff9e6', + token: '--colors-warning-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '警告色', + token: '--colors-warning-' + }, + { + body: { + main: '#389e0d', + colors: [ + { + color: '#010500', + index: 0, + label: '1-#010500', + token: '--colors-success-1' + }, + { + color: '#092b00', + index: 1, + label: '2-#092b00', + token: '--colors-success-2' + }, + { + color: '#135200', + index: 2, + label: '3-#135200', + token: '--colors-success-3' + }, + { + color: '#237804', + index: 3, + label: '4-#237804', + token: '--colors-success-4' + }, + { + color: '#389e0d', + index: 4, + label: '5-#389e0d', + token: '--colors-success-5' + }, + { + color: '#55ab2d', + index: 5, + label: '6-#55ab2d', + token: '--colors-success-6' + }, + { + color: '#74b852', + index: 6, + label: '7-#74b852', + token: '--colors-success-7' + }, + { + color: '#95c47c', + index: 7, + label: '8-#95c47c', + token: '--colors-success-8' + }, + { + color: '#b9d1ab', + index: 8, + label: '9-#b9d1ab', + token: '--colors-success-9' + }, + { + color: '#d0dec8', + index: 9, + label: '10-#d0dec8', + token: '--colors-success-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '成功色', + token: '--colors-success-' + }, + { + body: { + colors: [ + { + color: '#002766', + index: 0, + label: '1-#002766', + token: '--colors-link-1' + }, + { + color: '#003a8c', + index: 1, + label: '2-#003a8c', + token: '--colors-link-2' + }, + { + color: '#0050b3', + index: 2, + label: '3-#0050b3', + token: '--colors-link-3' + }, + { + color: '#096dd9', + index: 3, + label: '4-#096dd9', + token: '--colors-link-4' + }, + { + color: '#1890ff', + index: 4, + label: '5-#1890ff', + token: '--colors-link-5' + }, + { + color: '#45a8ff', + index: 5, + label: '6-#45a8ff', + token: '--colors-link-6' + }, + { + color: '#74c0ff', + index: 6, + label: '7-#74c0ff', + token: '--colors-link-7' + }, + { + color: '#a2d7ff', + index: 7, + label: '8-#a2d7ff', + token: '--colors-link-8' + }, + { + color: '#d1ecff', + index: 8, + label: '9-#d1ecff', + token: '--colors-link-9' + }, + { + color: '#e6f5ff', + index: 9, + label: '10-#e6f5ff', + token: '--colors-link-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '链接色', + token: '--colors-link-' + }, + { + body: { + colors: [ + { + color: '#002766', + index: 0, + label: '1-#002766', + token: '--colors-info-1' + }, + { + color: '#003a8c', + index: 1, + label: '2-#003a8c', + token: '--colors-info-2' + }, + { + color: '#0050b3', + index: 2, + label: '3-#0050b3', + token: '--colors-info-3' + }, + { + color: '#096dd9', + index: 3, + label: '4-#096dd9', + token: '--colors-info-4' + }, + { + color: '#1890ff', + index: 4, + label: '5-#1890ff', + token: '--colors-info-5' + }, + { + color: '#45a8ff', + index: 5, + label: '6-#45a8ff', + token: '--colors-info-6' + }, + { + color: '#74c0ff', + index: 6, + label: '7-#74c0ff', + token: '--colors-info-7' + }, + { + color: '#a2d7ff', + index: 7, + label: '8-#a2d7ff', + token: '--colors-info-8' + }, + { + color: '#d1ecff', + index: 8, + label: '9-#d1ecff', + token: '--colors-info-9' + }, + { + color: '#e6f5ff', + index: 9, + label: '10-#e6f5ff', + token: '--colors-info-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '提示色', + token: '--colors-info-' + }, + { + body: { + main: '#2468f2', + colors: [ + { + color: '#001259', + index: 0, + label: '1-#001259', + token: '--colors-other-1' + }, + { + color: '#001e80', + index: 1, + label: '2-#001e80', + token: '--colors-other-2' + }, + { + color: '#0832a6', + index: 2, + label: '3-#0832a6', + token: '--colors-other-3' + }, + { + color: '#144bcc', + index: 3, + label: '4-#144bcc', + token: '--colors-other-4' + }, + { + color: '#2468f2', + index: 4, + label: '5-#2468f2', + token: '--colors-other-5' + }, + { + color: '#528eff', + index: 5, + label: '6-#528eff', + token: '--colors-other-6' + }, + { + color: '#7dadff', + index: 6, + label: '7-#7dadff', + token: '--colors-other-7' + }, + { + color: '#a8caff', + index: 7, + label: '8-#a8caff', + token: '--colors-other-8' + }, + { + color: '#d4e5ff', + index: 8, + label: '9-#d4e5ff', + token: '--colors-other-9' + }, + { + color: '#e6f0ff', + index: 9, + label: '10-#e6f0ff', + token: '--colors-other-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '其他色', + token: '--colors-other-' + } + ], + label: '辅助色', + token: 'func' + }, + brand: { + body: { + colors: [ + { + color: '#002766', + index: 0, + label: '1-#002766', + token: '--colors-brand-1' + }, + { + color: '#003a8c', + index: 1, + label: '2-#003a8c', + token: '--colors-brand-2' + }, + { + color: '#0050b3', + index: 2, + label: '3-#0050b3', + token: '--colors-brand-3' + }, + { + color: '#096dd9', + index: 3, + label: '4-#096dd9', + token: '--colors-brand-4' + }, + { + color: '#1890ff', + index: 4, + label: '5-#1890ff', + token: '--colors-brand-5' + }, + { + color: '#45a8ff', + index: 5, + label: '6-#45a8ff', + token: '--colors-brand-6' + }, + { + color: '#74c0ff', + index: 6, + label: '7-#74c0ff', + token: '--colors-brand-7' + }, + { + color: '#a2d7ff', + index: 7, + label: '8-#a2d7ff', + token: '--colors-brand-8' + }, + { + color: '#d1ecff', + index: 8, + label: '9-#d1ecff', + token: '--colors-brand-9' + }, + { + color: '#e6f5ff', + index: 9, + label: '10-#e6f5ff', + token: '--colors-brand-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '品牌色', + token: '--colors-brand-' + }, + neutral: { + body: [ + { + body: { + common: [ + {id: 'strong', color: 1, label: '强调/正文标题'}, + {id: 'lessStrong', color: 3, label: '次强调/正文标题'}, + {id: 'info', color: 4, label: '辅助说明'}, + {id: 'disabledInfo', color: 5, label: '禁用'}, + {id: 'white', color: 10, label: '纯白文字'} + ], + colors: [ + { + color: '#070e14', + index: 0, + label: '0-#070e14', + token: '--colors-neutral-text-1' + }, + { + color: '#151e26', + index: 1, + label: '1-#151e26', + token: '--colors-neutral-text-2' + }, + { + color: '#303840', + index: 2, + label: '2-#303840', + token: '--colors-neutral-text-3' + }, + { + color: '#5c6166', + index: 3, + label: '3-#5c6166', + token: '--colors-neutral-text-4' + }, + { + color: '#84888c', + index: 4, + label: '4-#84888c', + token: '--colors-neutral-text-5' + }, + { + color: '#b8bcbf', + index: 5, + label: '5-#b8bcbf', + token: '--colors-neutral-text-6' + }, + { + color: '#d4d7d9', + index: 6, + label: '6-#d4d7d9', + token: '--colors-neutral-text-7' + }, + { + color: '#e8e9eb', + index: 7, + label: '7-#e8e9eb', + token: '--colors-neutral-text-8' + }, + { + color: '#f2f4f5', + index: 8, + label: '8-#f2f4f5', + token: '--colors-neutral-text-9' + }, + { + color: '#f7f9fa', + index: 9, + label: '9-#f7f9fa', + token: '--colors-neutral-text-10' + }, + { + color: '#ffffff', + index: 10, + label: '10-#ffffff', + token: '--colors-neutral-text-11' + } + ] + }, + label: '文字', + token: '--colors-neutral-text-' + }, + { + body: { + none: 'transparent', + common: [ + {id: 'fill-white', color: 10, label: '纯白填充'}, + {id: 'fill-1', color: 9, label: '浅/禁用背景'}, + {id: 'fill-2', color: 7, label: '分割线'}, + {id: 'fill-3', color: 6, label: '深/灰底悬浮'} + ], + colors: [ + { + color: '#070e14', + index: 0, + label: '0-#070e14', + token: '--colors-neutral-fill-1' + }, + { + color: '#151e26', + index: 1, + label: '1-#151e26', + token: '--colors-neutral-fill-2' + }, + { + color: '#303840', + index: 2, + label: '2-#303840', + token: '--colors-neutral-fill-3' + }, + { + color: '#5c6166', + index: 3, + label: '3-#5c6166', + token: '--colors-neutral-fill-4' + }, + { + color: '#84888c', + index: 4, + label: '4-#84888c', + token: '--colors-neutral-fill-5' + }, + { + color: '#b8bcbf', + index: 5, + label: '5-#b8bcbf', + token: '--colors-neutral-fill-6' + }, + { + color: '#d4d7d9', + index: 6, + label: '6-#d4d7d9', + token: '--colors-neutral-fill-7' + }, + { + color: '#e8e9eb', + index: 7, + label: '7-#e8e9eb', + token: '--colors-neutral-fill-8' + }, + { + color: '#f2f4f5', + index: 8, + label: '8-#f2f4f5', + token: '--colors-neutral-fill-9' + }, + { + color: '#f7f9fa', + index: 9, + label: '9-#f7f9fa', + token: '--colors-neutral-fill-10' + }, + { + color: '#ffffff', + index: 10, + label: '10-#ffffff', + token: '--colors-neutral-fill-11' + } + ] + }, + label: '填充', + token: '--colors-neutral-fill-' + }, + { + body: { + common: [ + {id: 'line-1', color: 9, label: '浅'}, + {id: 'line-2', color: 7, label: '常规'}, + {id: 'line-3', color: 5, label: '深'}, + {id: 'line-4', color: 3, label: '重'} + ], + colors: [ + { + color: '#070e14', + index: 0, + label: '0-#070e14', + token: '--colors-neutral-line-1' + }, + { + color: '#151e26', + index: 1, + label: '1-#151e26', + token: '--colors-neutral-line-2' + }, + { + color: '#303840', + index: 2, + label: '2-#303840', + token: '--colors-neutral-line-3' + }, + { + color: '#5c6166', + index: 3, + label: '3-#5c6166', + token: '--colors-neutral-line-4' + }, + { + color: '#84888c', + index: 4, + label: '4-#84888c', + token: '--colors-neutral-line-5' + }, + { + color: '#b8bcbf', + index: 5, + label: '5-#b8bcbf', + token: '--colors-neutral-line-6' + }, + { + color: '#d4d7d9', + index: 6, + label: '6-#d4d7d9', + token: '--colors-neutral-line-7' + }, + { + color: '#e8e9eb', + index: 7, + label: '7-#e8e9eb', + token: '--colors-neutral-line-8' + }, + { + color: '#f2f4f5', + index: 8, + label: '8-#f2f4f5', + token: '--colors-neutral-line-9' + }, + { + color: '#f7f9fa', + index: 9, + label: '9-#f7f9fa', + token: '--colors-neutral-line-10' + }, + { + color: '#ffffff', + index: 10, + label: '10-#ffffff', + token: '--colors-neutral-line-11' + } + ] + }, + label: '线条', + token: '--colors-neutral-line-' + } + ], + label: '中性色', + token: '--colors-neutral-' + }, + data: { + label: '数据色', + body: [ + { + label: '默认', + token: 'dataColor1', + colors: [ + { + value: '#1890ff' + }, + { + value: '#a04bfa' + }, + { + value: '#fc2d98' + }, + { + value: '#c26711' + }, + { + value: '#579c0e' + }, + { + value: '#10b35f' + }, + { + value: '#129dc7' + } + ] + }, + { + label: '经典', + token: 'dataColor2', + colors: [ + { + value: '#1890ff' + }, + { + value: '#c735fc' + }, + { + value: '#fc3f42' + }, + { + value: '#72910d' + }, + { + value: '#11ba38' + }, + { + value: '#129dc7' + }, + { + value: '#815bfc' + } + ] + }, + { + label: '过渡', + token: 'dataColor3', + colors: [ + { + value: '#1890ff' + }, + { + value: '#4878fa' + }, + { + value: '#6568fc' + }, + { + value: '#815bfc' + }, + { + value: '#a04bfa' + }, + { + value: '#c735fc' + }, + { + value: '#f61efa' + } + ] + } + ] + } + }, + borders: { + style: { + body: [ + { + label: '无', + token: '--borders-style-1', + value: 'none', + disabled: true + }, + {label: '实线', token: '--borders-style-2', value: 'solid'}, + {label: '虚线', token: '--borders-style-3', value: 'dashed'}, + {label: '点线', token: '--borders-style-4', value: 'dotted'} + ], + label: '样式', + token: '--borders-style-' + }, + width: { + body: [ + { + label: '无', + token: '--borders-width-1', + value: '0px', + disabled: true + }, + {label: '常规', token: '--borders-width-2', value: '1px'}, + {label: '中粗', token: '--borders-width-3', value: '2px'}, + {label: '特粗', token: '--borders-width-4', value: '4px'} + ], + label: '粗细', + token: '--borders-width-' + }, + radius: { + body: [ + { + label: '无', + token: '--borders-radius-1', + value: '0px', + disabled: true + }, + {label: '圆角1', token: '--borders-radius-2', value: '1px'}, + {label: '圆角2', token: '--borders-radius-3', value: '2px'}, + {label: '圆角3', token: '--borders-radius-4', value: '6px'}, + {label: '圆角4', token: '--borders-radius-5', value: '8px'}, + {label: '圆角5', token: '--borders-radius-6', value: '10px'}, + {label: '圆角6', token: '--borders-radius-7', value: '50%'} + ], + label: '圆角', + token: '--borders-radius-' + } + }, + shadows: { + shadow: { + body: [ + { + label: '无阴影', + token: '--shadows-shadow-none', + value: [ + { + x: '0px', + y: '0px', + blur: '0px', + color: 'transparent', + inset: false, + spread: '0px' + } + ], + disabled: true + }, + { + label: '阴影sm', + token: '--shadows-shadow-sm', + value: [ + { + x: '0px', + y: '1px', + blur: '2px', + color: 'rgba(0, 0, 0, 0.05)', + inset: false, + spread: '0px' + } + ] + }, + { + label: '阴影', + token: '--shadows-shadow-normal', + value: [ + { + x: '0px', + y: '1px', + blur: '3px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '0px' + }, + { + x: '0px', + y: '1px', + blur: '2px', + color: 'rgba(0, 0, 0, 0.06)', + inset: false, + spread: '0px' + } + ] + }, + { + label: '阴影md', + token: '--shadows-shadow-md', + value: [ + { + x: '0px', + y: '4px', + blur: '-1px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '0px' + }, + { + x: '0px', + y: '2px', + blur: '4px', + color: 'rgba(0, 0, 0, 0.06)', + inset: false, + spread: '-1px' + } + ] + }, + { + label: '阴影lg', + token: '--shadows-shadow-lg', + value: [ + { + x: '0px', + y: '10px', + blur: '15px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '-3px' + }, + { + x: '0px', + y: '4px', + blur: '6px', + color: 'rgba(0, 0, 0, 0.05)', + inset: false, + spread: '-2px' + } + ] + }, + { + label: '阴影xl', + token: '--shadows-shadow-xl', + value: [ + { + x: '0px', + y: '20px', + blur: '25px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '-5px' + }, + { + x: '0px', + y: '10px', + blur: '10px', + color: 'rgba(0, 0, 0, 0.04)', + inset: false, + spread: '-5px' + } + ] + }, + { + label: '阴影2xl', + token: '--shadows-shadow-2xl', + value: [ + { + x: '0px', + y: '25px', + blur: '50px', + color: 'rgba(0, 0, 0, 0.25)', + inset: false, + spread: '-12px' + } + ] + } + ], + label: '阴影', + token: '--shadows-shadow-' + } + } + }, + component +}; + +export default antdData; diff --git a/packages/amis-theme-editor-helper/src/systemTheme/component.ts b/packages/amis-theme-editor-helper/src/systemTheme/component.ts new file mode 100644 index 00000000000..9351b42c1fb --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/component.ts @@ -0,0 +1,6157 @@ +import type {ThemeDefinition} from '../helper/declares'; + +const component: ThemeDefinition['component'] = { + button1: { + type: [ + { + label: '默认', + custom: false, + type: 'default', + default: { + label: '默认常规', + token: '--button-default-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-default-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-default-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-4)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-default-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '主要', + custom: false, + type: 'primary', + default: { + label: '默认常规', + token: '--button-primary-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-5)', + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-primary-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-6)', + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-primary-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-4)', + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-primary-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '次要', + custom: false, + type: 'secondary', + default: { + label: '默认常规', + token: '--button-secondary-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-6)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-secondary-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-5)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-secondary-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-4)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-secondary-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '增强', + custom: false, + type: 'enhance', + default: { + label: '默认常规', + token: '--button-enhance-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-enhance-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-6)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-enhance-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-4)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-enhance-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '信息', + custom: false, + type: 'info', + default: { + label: '默认常规', + token: '--button-info-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-info-5)', + 'border': { + 'top-border-color': 'var(--colors-info-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-info-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-info-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-info-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-info-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-info-6)', + 'border': { + 'top-border-color': 'var(--colors-info-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-info-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-info-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-info-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-info-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-info-4)', + 'border': { + 'top-border-color': 'var(--colors-info-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-info-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-info-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-info-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-info-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '成功', + custom: false, + type: 'success', + default: { + label: '默认常规', + token: '--button-success-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-success-5)', + 'border': { + 'top-border-color': 'var(--colors-success-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-success-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-success-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-success-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-success-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-success-6)', + 'border': { + 'top-border-color': 'var(--colors-success-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-success-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-success-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-success-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-success-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-success-4)', + 'border': { + 'top-border-color': 'var(--colors-success-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-success-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-success-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-success-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-success-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '警告', + custom: false, + type: 'warning', + default: { + label: '默认常规', + token: '--button-warning-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-warning-5)', + 'border': { + 'top-border-color': 'var(--colors-warning-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-warning-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-warning-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-warning-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-warning-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-warning-6)', + 'border': { + 'top-border-color': 'var(--colors-warning-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-warning-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-warning-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-warning-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-warning-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-warning-4)', + 'border': { + 'top-border-color': 'var(--colors-warning-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-warning-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-warning-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-warning-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-warning-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '危险', + custom: false, + type: 'danger', + default: { + label: '默认常规', + token: '--button-danger-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-error-5)', + 'border': { + 'top-border-color': 'var(--colors-error-5)', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-error-5)', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-error-5)', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-error-5)', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-danger-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-error-6)', + 'border': { + 'top-border-color': 'var(--colors-error-6)', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-error-6)', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-error-6)', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-error-6)', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + active: { + label: '默认点击', + token: '--button-danger-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-error-4)', + 'border': { + 'top-border-color': 'var(--colors-error-4)', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-error-4)', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-error-4)', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-error-4)', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-danger-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '浅色', + custom: false, + type: 'light', + default: { + label: '默认常规', + token: '--button-light-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-10)', + 'border': { + 'top-border-color': 'var(--colors-brand-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-light-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-9)', + 'border': { + 'top-border-color': 'var(--colors-brand-9)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-9)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-9)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-9)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-light-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-7)', + 'border': { + 'top-border-color': 'var(--colors-brand-7)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-7)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-7)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-7)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-light-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '深色', + custom: false, + type: 'dark', + default: { + label: '默认常规', + token: '--button-dark-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-3)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-3)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-3)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-3)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-3)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-dark-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-4)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-dark-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-5)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-dark-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '链接', + custom: false, + type: 'link', + default: { + label: '默认常规', + token: '--button-link-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-link-5)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-link-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-link-6)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + active: { + label: '默认点击', + token: '--button-link-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-link-4)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-link-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + } + } + ], + size: [ + { + label: '默认', + type: 'default', + custom: false, + token: '--button-size-default-', + body: { + 'size': { + height: 'var(--sizes-base-16)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '极小', + type: 'xs', + custom: false, + token: '--button-size-xs-', + body: { + 'size': { + height: 'var(--sizes-base-11)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-2)', + paddingBottom: 'var(--sizes-size-2)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '小', + type: 'sm', + custom: false, + token: '--button-size-sm-', + body: { + 'size': { + height: 'var(--sizes-base-15)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '中等', + type: 'md', + custom: false, + token: '--button-size-md-', + body: { + 'size': { + height: 'var(--sizes-base-16)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '大', + type: 'lg', + custom: false, + token: '--button-size-lg-', + body: { + 'size': { + height: 'var(--sizes-base-19)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + } + ] + }, + transfer1: { + base: { + label: '基础配置', + token: '--transfer-base-', + body: { + 'title-bg': 'var(--colors-neutral-fill-10)', + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'content-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + }, + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-8)', + paddingRight: 'var(--sizes-size-8)' + }, + 'body-padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-8)', + paddingRight: 'var(--sizes-size-8)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'shadow': 'var(--shadows-shadow-none)' + } + }, + search: { + label: '搜索框', + token: '--transfer-search-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'placeholder-font-color': 'var(--colors-neutral-text-6)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'border-hover-color': 'var(--colors-brand-4)', + 'border-active-color': 'var(--colors-brand-4)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'input-padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + 'shadow': 'var(--shadows-shadow-none)' + } + }, + group: { + label: '分组', + token: '--transfer-group-', + body: { + font: { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + table: { + label: '表格形式', + token: '--transfer-table-', + body: { + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + 'last-paddingRight': 'var(--sizes-base-9)' + } + }, + tree: { + label: '树形式', + token: '--transfer-tree-', + body: { + 'bg-hover-color': 'var(--colors-neutral-fill-10)', + 'bg-active-color': 'var(--colors-brand-10)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-2)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-0)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + } + } + }, + chained: { + label: '级联选择', + token: '--transfer-chained-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + } + } + } + }, + input: { + base: { + default: { + label: '默认', + type: 'default', + default: { + label: '常规', + token: '--input-default-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '悬浮', + token: '--input-default-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--input-default-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--input-default-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + }, + clearable: { + label: '可清除', + token: '--input-clearable-', + body: { + 'icon': '', + 'icon-size': 'var(--sizes-size-8)', + 'default-color': 'var(--colors-brand-5)', + 'hover-color': 'var(--colors-neutral-text-4)', + 'active-color': 'var(--colors-neutral-text-4)' + } + }, + count: { + label: '字数统计', + single: { + label: '单行输入框', + token: '--input-count-single-', + body: { + font: { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-6)' + } + } + }, + multi: { + label: '多行输入框', + token: '--input-count-multi-', + body: { + font: { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-5)' + } + } + } + }, + prefix: { + label: '前缀/后缀', + token: '--input-prefix-', + body: { + font: { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-1)' + } + } + }, + password: { + label: '密码输入框', + token: '--input-password-', + body: { + 'invisible-icon': '', + 'invisible-icon-size': 'var(--sizes-size-8)', + 'invisible-icon-color': 'var(--colors-neutral-text-5)', + 'view-icon': '', + 'view-icon-size': 'var(--sizes-size-8)', + 'view-icon-color': 'var(--colors-neutral-text-5)' + } + }, + textarea: { + label: '多行输入框', + token: '--input-textarea-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-base-11)' + } + } + }, + addon: { + label: '附加组件', + text: { + label: '文本', + token: '--input-addon-text-', + body: { + 'bg-color-default': 'var(--colors-neutral-fill-11)', + 'bg-color-hover': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + } + } + }, + link: { + base: { + default: { + token: '--link-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-link-5)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + }, + hover: { + token: '--link-onHover-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-link-6)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + }, + click: { + token: '--link-onClick-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-link-4)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + }, + disabled: { + token: '--link-disabled-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-neutral-text-6)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + } + }, + icon: { + token: '--link-icon-', + body: { + size: 'var(--sizes-size-8)', + margin: 'var(--sizes-size-3)' + } + } + }, + form: { + item: { + default: { + item: { + token: '--Form-item-', + body: { + gap: 'var(--sizes-base-12)' + } + }, + label: { + token: '--Form-item-', + body: { + font: { + color: 'var(--colors-neutral-text-4)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + star: { + token: '--Form-item-star-', + body: { + color: 'var(--colors-error-5)', + size: 'var(--sizes-size-7)' + } + }, + description: { + token: '--Form-description-', + body: { + font: { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + gap: 'var(--sizes-size-3)' + } + } + }, + error: { + item: { + token: '--Form-item-onError-', + body: { + color: 'var(--colors-error-5)', + borderColor: 'var(--colors-error-5)', + bg: 'var(--colors-neutral-fill-11)' + } + }, + feedBack: { + token: '--Form-feedBack-', + body: { + font: { + color: 'var(--colors-error-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + gap: 'var(--sizes-size-3)' + } + } + } + }, + mode: { + default: { + token: '--Form-mode-default-', + body: { + labelGap: 'var(--sizes-size-5)', + width: '100%' + } + }, + horizontal: { + label: { + token: '--Form--horizontal-label-', + body: { + gap: 'var(--sizes-base-8)', + widthBase: 'var(--sizes-base-49)', + widthXs: 'var(--sizes-base-25)', + widthSm: 'var(--sizes-base-35)', + widthMd: '8.75rem', + widthLg: '12.5rem' + } + }, + value: { + token: '--Form--horizontal-value-', + body: { + size: { + maxWidth: '100%', + minWidth: 'var(--sizes-size-0)' + } + } + } + }, + inline: { + item: { + token: '--Form-mode-inline-item-', + body: { + gap: 'var(--sizes-base-8)' + } + }, + label: { + token: '--Form-mode-inline-label-', + body: { + gap: 'var(--sizes-base-8)' + } + } + } + } + }, + inputNumber: { + base: { + base: { + label: '基础样式', + type: 'base', + default: { + label: '默认', + token: '--inputNumber-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'step-bg': 'var(--colors-neutral-fill-11)', + 'icon-size': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-neutral-text-2)' + } + }, + hover: { + label: '悬浮', + token: '--inputNumber-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'step-bg-color': 'var(--colors-neutral-fill-11)', + 'icon-fontSize': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-brand-5)' + } + }, + active: { + label: '点击', + token: '--inputNumber-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'step-bg-color': 'var(--colors-neutral-fill-11)', + 'icon-size': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-brand-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputNumber-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)', + 'step-bg-color': 'var(--colors-neutral-fill-11)', + 'icon-size': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-brand-5)' + } + } + }, + enhance: { + label: '加强版', + type: 'enhance', + default: { + label: '默认', + token: '--inputNumber-enhance-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '悬浮', + token: '--inputNumber-enhance-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--inputNumber-enhance-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'shadow': 'var(--shadows-shadow-none)' + } + }, + disabled: { + label: '禁用', + token: '--inputNumber-enhance-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)' + } + }, + leftIcon: { + default: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-default-', + body: { + 'icon': '', + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-hover-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-active-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-disabled-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + } + }, + rightIcon: { + default: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-default-', + body: { + 'icon': '', + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-hover-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-active-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-disabled-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + } + } + }, + unit: { + label: '带单位选择', + width: { + label: '单位选择器', + token: '--inputNumber-base-default-unit-', + body: { + width: 'var(--sizes-base-28)' + } + } + } + } + }, + inputRange: { + base: { + track: { + token: '--InputRange-track-', + body: { + 'bg': 'var(--colors-neutral-fill-8)', + 'height': 'var(--sizes-size-4)', + 'border-radius': 'var(--sizes-size-3)' + } + }, + trackActive: { + token: '--InputRange-track-onActive-', + body: { + bg: 'var(--colors-brand-5)' + } + }, + handle: { + token: '--InputRange-handle-', + body: { + size: { + height: 'var(--sizes-size-9)', + width: 'var(--sizes-size-9)' + }, + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-7)', + 'top-left-border-radius': 'var(--borders-radius-7)', + 'bottom-right-border-radius': 'var(--borders-radius-7)', + 'bottom-left-border-radius': 'var(--borders-radius-7)' + } + } + }, + handleIcon: { + token: '--InputRange-handle-icon-', + body: { + size: { + height: 'var(--sizes-size-5)', + width: 'var(--sizes-size-5)' + }, + color: 'var(--colors-brand-9)' + } + } + }, + disabled: { + trackActive: { + token: '--InputRange-track-onActive-onDisabled-', + body: { + bg: 'var(--colors-neutral-fill-6)' + } + }, + handle: { + token: '--InputRange-handle-onDisabled-', + body: { + 'border-color': 'var(--colors-neutral-fill-7)', + 'bg': 'var(--colors-neutral-fill-11)' + } + }, + handleIcon: { + token: '--InputRange-handle-icon-onDisabled-', + body: { + color: 'var(--colors-neutral-fill-7)' + } + } + }, + dot: { + token: '--InputRange-track-dot-', + body: { + size: { + height: 'var(--sizes-size-4)', + width: 'var(--sizes-size-4)' + }, + bg: 'var(--colors-neutral-fill-11)' + } + }, + marks: { + token: '--InputRange-marks-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + marginTop: 'var(--sizes-size-0)' + } + }, + label: { + token: '--InputRange-label-', + body: { + font: { + color: 'var(--colors-neutral-fill-11)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-5)', + paddingRight: 'var(--sizes-size-5)' + }, + bg: 'var(--colors-neutral-fill-1)', + border: { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + input: { + token: '--InputRange-input-', + body: { + width: 'var(--sizes-base-40)', + margin: { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-5)', + marginRight: 'var(--sizes-size-5)' + } + } + }, + clearIcon: { + token: '--InputRange-clearIcon-', + body: { + size: { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + color: 'var(--colors-neutral-text-4)', + hoverColor: 'var(--colors-brand-5)' + } + } + }, + progress: { + base: { + line: { + token: '--Progress-line-', + body: { + 'bg': 'var(--colors-neutral-fill-8)', + 'theme-color': 'var(--colors-brand-5)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + } + } + }, + circle: { + token: '--Progress-circle-', + body: { + 'bg': 'var(--colors-neutral-fill-8)', + 'theme-color': 'var(--colors-brand-5)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + } + } + } + } + }, + radio: { + base: { + default: { + label: '默认', + type: 'default', + default: { + label: '常规', + token: '--radio-default-default-', + body: { + 'color': 'var(--colors-neutral-text-8)', + 'text-color': 'var(--colors-neutral-text-1)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'point-size': 'var(--sizes-size-9)', + 'point-inner-size': 'var(--sizes-size-5)', + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-9)' + }, + 'distance': 'var(--sizes-size-5)' + } + }, + hover: { + label: '悬浮', + token: '--radio-default-hover-', + body: { + 'color': 'var(--colors-brand-5)', + 'text-color': 'var(--colors-neutral-text-1)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--radio-default-active-', + body: { + 'color': 'var(--colors-brand-5)', + 'text-color': 'var(--colors-neutral-text-1)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--radio-default-disabled-', + body: { + 'color': 'var(--colors-neutral-text-6)', + 'text-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-8)' + } + } + }, + vertical: { + label: '列显示', + token: '--radio-default-vertical-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-5)' + } + } + } + } + }, + switch: { + base: { + default: { + label: '默认', + type: 'default', + off: { + label: '关', + token: '--switch-default-off-', + body: { + 'bg-color': 'var(--colors-neutral-fill-7)', + 'hover-bg-color': 'var(--colors-neutral-fill-6)', + 'slider-color': 'var(--colors-neutral-fill-11)' + } + }, + on: { + label: '开', + token: '--switch-default-on-', + body: { + 'bg-color': 'var(--colors-brand-5)', + 'hover-bg-color': 'var(--colors-brand-4)', + 'slider-color': 'var(--colors-neutral-fill-11)' + } + } + }, + option: { + label: '开关说明', + token: '--switch-option-', + body: { + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)', + color: 'var(--colors-neutral-text-1)' + }, + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-5)', + marginRight: 'var(--sizes-size-0)' + } + } + }, + text: { + label: '开关状态文本', + off: { + label: '关', + token: '--switch-text-off-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-3)', + color: 'var(--colors-neutral-text-11)' + }, + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-base-12)', + marginRight: 'var(--sizes-size-5)' + } + } + }, + on: { + label: '开', + token: '--switch-text-on-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-3)', + color: 'var(--colors-neutral-text-11)' + }, + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-base-4)', + marginRight: 'var(--sizes-base-12)' + } + } + } + } + }, + size: { + default: { + label: '常规', + token: '--switch-size-default-', + body: { + 'size': { + height: 'var(--sizes-base-10)', + minWidth: 'var(--sizes-base-22)' + }, + 'slider-size': { + width: 'var(--sizes-size-9)' + }, + 'slider-margin': 'var(--sizes-size-2)', + 'border': { + 'top-right-border-radius': 'var(--sizes-base-15)', + 'top-left-border-radius': 'var(--sizes-base-15)', + 'bottom-right-border-radius': 'var(--sizes-base-15)', + 'bottom-left-border-radius': 'var(--sizes-base-15)' + } + } + }, + sm: { + label: '小', + token: '--switch-size-sm-', + body: { + 'size': { + height: 'var(--sizes-size-9)', + minWidth: 'var(--sizes-base-14)' + }, + 'slider-size': { + width: 'var(--sizes-size-7)' + }, + 'slider-margin': 'var(--sizes-size-2)', + 'border': { + 'top-right-border-radius': 'var(--sizes-base-15)', + 'top-left-border-radius': 'var(--sizes-base-15)', + 'bottom-right-border-radius': 'var(--sizes-base-15)', + 'bottom-left-border-radius': 'var(--sizes-base-15)' + } + } + } + } + }, + checkbox: { + checkbox: { + normal: { + default: { + label: '常规', + token: '--checkbox-checkbox-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + label: '悬浮', + token: '--checkbox-checkbox-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + active: { + label: '点击', + token: '--checkbox-checkbox-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + disabled: { + label: '禁用', + token: '--checkbox-checkbox-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + } + }, + checked: { + default: { + label: '常规', + token: '--checkbox-checked-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-5)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + hover: { + label: '悬浮', + token: '--checkbox-checked-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-6)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + active: { + label: '点击', + token: '--checkbox-checked-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-4)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + disabled: { + label: '禁用', + token: '--checkbox-checked-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + } + } + }, + checkboxes: { + label: '常规', + token: '--checkbox-checkboxes-', + body: { + marginRight: 'var(--sizes-base-8)' + } + } + }, + inputTree: { + base: { + base: { + label: '默认态', + type: 'base', + default: { + label: '默认', + token: '--inputTree-base-default-', + body: { + color: 'var(--colors-neutral-text-2)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + hover: { + label: '悬浮', + token: '--inputTree-base-hover-', + body: { + color: 'var(--colors-neutral-text-2)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + active: { + label: '点击', + token: '--inputTree-base-active-', + body: { + color: 'var(--colors-neutral-text-2)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputTree-base-disabled-', + body: { + color: 'var(--colors-neutral-text-6)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + size: { + label: '尺寸', + token: '--inputTree-base-size-', + body: { + expandMarginRight: 'var(--sizes-size-5)', + nodeMarginRight: 'var(--sizes-size-5)' + } + } + }, + checkboxes: { + label: '复选框', + type: 'checkboxes', + size: { + label: '默认', + token: '--inputTree-checkboxes-size-', + body: { + marginRight: 'var(--sizes-size-5)' + } + } + } + } + }, + listSelect: { + base: { + default: { + label: '常规', + token: '--listSelect-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + hover: { + label: '悬浮', + token: '--listSelect-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + active: { + label: '点击', + token: '--listSelect-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + disabled: { + label: '禁用', + token: '--listSelect-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + size: { + label: '常规', + token: '--listSelect-base-image-', + body: { + size: { + width: 'var(--sizes-size-1)' + } + } + } + } + }, + inputRating: { + icon: { + token: '--Rating-star-', + body: { + margin: 'var(--sizes-size-5)', + size: 'var(--sizes-base-13)', + icon: '' + } + }, + inactiveColors: { + token: '--Rating-inactive-', + body: { + color: 'var(--colors-neutral-text-9)' + } + }, + activeColors: [ + {value: '#abadb1', id: 2}, + {value: '#787b81', id: 3}, + {value: '#ffa900', id: 5} + ], + text: { + token: '--Rating-text-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + collapse: { + base: { + default: { + label: '默认', + token: '--collapse-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'header-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'header-bg-color': 'var(--colors-neutral-fill-10)', + 'header-hover-bg-color': 'var(--colors-neutral-fill-9)', + 'header-hover-color': 'var(--colors-neutral-text-2)', + 'disabled-header-bg-color': 'var(--colors-neutral-fill-10)', + 'disabled-color': 'var(--colors-neutral-text-6)', + 'content-padding-and-margin': { + paddingTop: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'content-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + icon: { + label: '图标', + token: '--collapse-icon-', + body: { + icon: '', + size: 'var(--sizes-size-6)', + color: 'var(--colors-neutral-text-5)', + margin: 'var(--sizes-size-5)', + rotate: '90deg' + } + } + } + }, + tabs: { + simple: { + default: { + token: '--Tabs--simple-', + body: { + 'padding': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'split-width': 'var(--borders-width-2)', + 'split-style': 'var(--borders-style-2)', + 'split-color': 'var(--colors-neutral-line-8)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + active: { + token: '--Tabs--simple-active-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--simple-hover-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--simple-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + strong: { + default: { + token: '--Tabs--strong-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-5)' + }, + 'bg': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + active: { + token: '--Tabs--strong-active-', + body: { + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--strong-hover-', + body: { + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--strong-disabled-', + body: { + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + line: { + default: { + token: '--Tabs--line-', + body: { + 'padding': 'var(--sizes-base-16)', + 'border-color': 'var(--colors-neutral-line-8)', + 'border-width': 'var(--borders-width-2)', + 'border-style': 'var(--borders-style-2)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + active: { + token: '--Tabs--line-active-', + body: { + 'font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'border-color': 'var(--colors-brand-5)', + 'border-width': 'var(--borders-width-3)', + 'border-style': 'var(--borders-style-2)' + } + }, + hover: { + token: '--Tabs--line-hover-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--line-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + card: { + default: { + token: '--Tabs--card-', + body: { + 'padding': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'border-color': 'var(--colors-neutral-line-8)', + 'border-width': 'var(--borders-width-2)', + 'border-style': 'var(--borders-style-2)', + 'bg': 'var(--colors-neutral-fill-10)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'linkMargin': 'var(--sizes-size-6)', + 'linkPadding': 'var(--sizes-size-6)', + 'borderRadius': 'var(--borders-radius-3)', + 'linkBg': 'transparent' + } + }, + active: { + token: '--Tabs--card-active-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + linkBg: 'transparent' + } + }, + hover: { + token: '--Tabs--card-hover-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + linkBg: 'transparent' + } + }, + disabled: { + token: '--Tabs--card-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + linkBg: 'transparent' + } + } + }, + tiled: { + default: { + token: '--Tabs--tiled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + } + } + }, + active: { + token: '--Tabs--tiled-active-', + body: { + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--tiled-hover-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--tiled-disabled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + radio: { + default: { + token: '--Tabs--radio-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-11)', + height: 'var(--sizes-base-15)' + } + }, + active: { + token: '--Tabs--radio-active-', + body: { + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-11)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + bg: 'var(--colors-brand-5)' + } + }, + hover: { + token: '--Tabs--radio-hover-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + bg: 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + token: '--Tabs--radio-disabled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + bg: 'var(--colors-neutral-fill-11)' + } + } + }, + vertical: { + default: { + token: '--Tabs--vertical-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-10)', + width: '8.75rem' + } + }, + active: { + token: '--Tabs--vertical-active-', + body: { + 'font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'border-color': 'var(--colors-brand-5)', + 'border-width': 'var(--borders-width-4)', + 'border-style': 'var(--borders-style-2)' + } + }, + hover: { + token: '--Tabs--vertical-hover-', + body: { + font: { + color: 'var(--colors-brand-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--vertical-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + sidebar: { + default: { + token: '--Tabs--sidebar-', + body: { + font: { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + sideWidth: 'var(--sizes-base-31)', + sideMargin: 'var(--sizes-base-11)' + } + }, + active: { + token: '--Tabs--sidebar-active-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--sidebar-hover-', + body: { + font: { + color: 'var(--colors-brand-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--sidebar-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + } + }, + panel: { + panel: { + token: '--Panel-', + body: { + bg: 'var(--colors-neutral-fill-11)', + boxShadow: 'var(--shadows-shadow-sm)', + margin: { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-base-10)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + heading: { + token: '--Panel-heading-', + body: { + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-10)', + font: { + color: 'var(--colors-neutral-text-3)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + border: { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + body: { + token: '--Panel-body-', + body: { + padding: { + paddingTop: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-size-7)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + } + } + }, + footer: { + token: '--Panel-footer-', + body: { + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-2)' + }, + buttonSpace: 'var(--sizes-size-5)' + } + } + }, + divider: { + token: '--Divider-', + body: { + style: 'var(--borders-style-2)', + color: 'var(--colors-neutral-line-8)', + width: 'var(--borders-width-2)', + margin: { + marginTop: 'var(--sizes-size-7)', + marginBottom: 'var(--sizes-size-7)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + } + } + }, + dialog: { + base: { + default: { + token: '--dialog-default-', + body: { + 'border-width': 'var(--sizes-size-0)', + 'border-radius': 'var(--sizes-size-4)', + 'padding-y': 'var(--sizes-base-12)' + } + }, + icon: { + token: '--dialog-icon-', + body: { + icon: '', + size: 'var(--sizes-size-9)', + color: 'var(--colors-neutral-text-6)' + } + }, + header: { + token: '--dialog-header-', + body: { + height: 'var(--sizes-size-1)', + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + } + } + }, + content: { + token: '--dialog-content-', + body: { + 'height': 'var(--sizes-size-1)', + 'margin-left': 'var(--sizes-size-5)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + } + } + }, + footer: { + token: '--dialog-footer-', + body: { + 'height': 'var(--sizes-size-1)', + 'margin-left': 'var(--sizes-size-5)' + } + } + }, + size: { + sm: { + token: '--dialog-size-sm-', + body: { + width: '21.875rem' + } + }, + normal: { + token: '--dialog-size-normal-', + body: { + width: '31.25rem' + } + }, + lg: { + token: '--dialog-size-lg-', + body: { + width: '68.75rem' + } + }, + xl: { + token: '--dialog-size-xl-', + body: { + width: '90%' + } + } + } + }, + drawer: { + base: { + header: { + token: '--drawer-header-', + body: { + height: 'var(--sizes-size-1)', + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + } + } + }, + icon: { + token: '--drawer-header-icon-', + body: { + icon: '', + size: 'var(--sizes-size-7)', + color: 'var(--colors-neutral-text-2)' + } + }, + content: { + token: '--drawer-content-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-12)', + paddingBottom: 'var(--sizes-base-12)', + paddingLeft: 'var(--sizes-base-12)', + paddingRight: 'var(--sizes-base-12)' + } + } + }, + footer: { + token: '--drawer-footer-', + body: { + 'height': 'var(--sizes-size-1)', + 'margin-left': 'var(--sizes-size-9)' + } + } + }, + size: { + xs: { + token: '--drawer-size-xs-', + body: { + width: '12.5rem' + } + }, + sm: { + token: '--drawer-size-sm-', + body: { + width: '18.75rem' + } + }, + md: { + token: '--drawer-size-md-', + body: { + width: '31.25rem' + } + }, + lg: { + token: '--drawer-size-lg-', + body: { + width: '50rem' + } + }, + xl: { + token: '--drawer-size-xl-', + body: { + width: '90%' + } + } + } + }, + inputFile: { + base: { + token: '--inputFile-base-', + body: { + 'des-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'des-margin': 'var(--sizes-base-5)' + } + }, + list: { + token: '--inputFile-list-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-base-4)', + marginBottom: 'var(--sizes-base-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)', + paddingTop: 'var(--sizes-size-2)', + paddingBottom: 'var(--sizes-size-2)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)' + }, + 'font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'bg-color-hover': 'var(--colors-neutral-fill-9)', + 'icon-size': 'var(--sizes-base-6)', + 'icon-color': 'var(--colors-neutral-text-2)', + 'icon-margin': 'var(--sizes-size-3)', + 'delete-icon-size': 'var(--sizes-base-6)', + 'delete-icon-color': 'var(--colors-neutral-text-5)', + 'delete-icon-color-hover': 'var(--colors-neutral-text-4)' + } + }, + drag: { + token: '--inputFile-drag-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'hover-border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-3)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'icon-size': 'var(--sizes-base-24)', + 'icon-color': 'var(--colors-neutral-fill-8)', + 'icon-margin': 'var(--sizes-size-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'bg-color-hover': 'var(--colors-neutral-fill-11)' + } + } + }, + inputImage: { + base: { + label: '图片上传', + default: { + token: '--inputImage-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'color': 'var(--colors-neutral-text-5)', + 'icon-size': 'var(--sizes-base-12)', + 'icon-color': 'var(--colors-neutral-text-5)', + 'icon-margin': 'var(--sizes-size-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + token: '--inputImage-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-5)', + 'icon-color': 'var(--colors-neutral-text-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + token: '--inputImage-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-5)', + 'icon-color': 'var(--colors-neutral-text-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + token: '--inputImage-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-6)', + 'icon-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + } + }, + select: { + base: { + label: '默认', + default: { + label: '常规', + token: '--select-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'option-font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-neutral-fill-11)', + 'option-line-height': 'var(--sizes-base-16)' + } + }, + hover: { + label: '悬浮', + token: '--select-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-brand-10)' + } + }, + active: { + label: '点击', + token: '--select-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-color': 'var(--colors-brand-5)', + 'option-bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--select-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)', + 'option-color': 'var(--colors-neutral-text-6)', + 'option-bg-color': 'var(--colors-neutral-fill-11)' + } + } + }, + multiple: { + label: '多选', + token: '--select-multiple-', + body: { + 'border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-2)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)', + 'hover-bg-color': 'var(--colors-brand-10)', + 'icon-color': 'var(--colors-neutral-text-6)', + 'icon-hover-color': 'var(--colors-neutral-text-2)' + } + }, + group: { + label: '分组模式', + token: '--select-group-', + body: { + 'font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + } + } + }, + table: { + label: '表格模式', + token: '--select-table-', + body: { + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-base-9)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-base-9)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + } + } + }, + tree: { + label: '树模式', + token: '--select-tree-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'hover-bg-color': 'var(--colors-neutral-fill-10)', + 'active-bg-color': 'var(--colors-brand-10)' + } + } + }, + inputDate: { + base: { + label: '默认', + default: { + label: '常规', + token: '--inputDate-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'size': { + height: 'var(--sizes-base-16)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'icon': '', + 'icon-color': 'var(--colors-brand-5)', + 'icon-size': 'var(--sizes-base-7)', + 'title-color': 'var(--colors-neutral-text-2)', + 'title-arrow-color': 'var(--colors-neutral-text-5)', + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-neutral-fill-11)', + 'option-today-border-color': 'var(--colors-brand-5)', + 'option-border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + } + } + }, + hover: { + label: '悬浮', + token: '--inputDate-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'title-color': 'var(--colors-brand-6)', + 'title-arrow-color': 'var(--colors-neutral-text-2)', + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-neutral-fill-10)' + } + }, + active: { + label: '点击', + token: '--inputDate-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-color': 'var(--colors-neutral-text-11)', + 'option-bg-color': 'var(--colors-brand-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputDate-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'option-color': 'var(--colors-neutral-text-6)', + 'option-bg-color': 'var(--colors-neutral-fill-11)' + } + } + }, + other: { + default: { + label: '常规', + token: '--inputDate-other-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + } + } + }, + hover: { + label: '悬浮', + token: '--inputDate-other-hover-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + }, + active: { + label: '点击', + token: '--inputDate-other-active-', + body: { + 'color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputDate-other-disabled-', + body: { + 'color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + }, + range: { + label: '范围', + token: '--inputDate-range-', + body: { + 'line-height': 'var(--borders-width-3)', + 'line-color': 'var(--colors-brand-4)', + 'separator-width': 'var(--sizes-size-5)', + 'separator-margin': 'var(--sizes-size-5)', + 'separator-color': 'var(--colors-neutral-fill-6)', + 'between-color': 'var(--colors-brand-10)' + } + } + }, + inputTime: { + base: { + label: '默认', + default: { + label: '常规', + token: '--inputTime-default-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-text-11)' + } + }, + hover: { + label: '悬浮', + token: '--inputTime-hover-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + }, + active: { + label: '点击', + token: '--inputTime-active-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-10)' + } + } + } + }, + steps: { + base: { + label: '基本', + token: '--steps-base-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'subTitle-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'des-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'title-paddingRight': 'var(--sizes-size-5)', + 'subTitle-paddingLeft': 'var(--sizes-size-6)', + 'icon-size': 'var(--sizes-base-15)', + 'icon-paddingRight': 'var(--sizes-size-6)', + 'icon-fontSize': 'var(--fonts-size-6)', + 'line-color': 'var(--colors-neutral-line-8)', + 'line-active-color': 'var(--colors-brand-5)' + } + }, + status: { + label: '状态', + token: '--steps-status-', + body: { + 'wait-bg-color': 'var(--colors-neutral-fill-11)', + 'wait-color': 'var(--colors-neutral-text-8)', + 'process-bg-color': 'var(--colors-brand-5)', + 'process-color': 'var(--colors-neutral-text-11)', + 'finish-bg-color': 'var(--colors-brand-5)', + 'finish-color': 'var(--colors-neutral-text-11)', + 'error-bg-color': 'var(--colors-error-5)', + 'error-color': 'var(--colors-neutral-text-11)' + } + }, + dot: { + label: '点状', + token: '--steps-dot-', + body: { + 'icon-size': 'var(--sizes-size-5)', + 'wait-bg-color': 'var(--colors-neutral-fill-8)', + 'process-bg-color': 'var(--colors-brand-5)', + 'finish-bg-color': 'var(--colors-neutral-fill-11)', + 'error-bg-color': 'var(--colors-error-5)' + } + }, + simple: { + label: '简单模式', + token: '--steps-simple-', + body: { + 'icon': '', + 'icon-size': 'var(--sizes-size-8)' + } + } + }, + userSelect: { + base: { + label: '基础', + type: 'base', + default: { + label: '常规', + token: '--user-select-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '悬浮', + token: '--user-select-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--user-select-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--user-select-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + }, + addIcon: { + label: '添加图标', + token: '--user-select-add-', + body: { + 'width': 'var(--sizes-base-15)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'active-color': 'var(--colors-brand-5)', + 'active-bg-color': 'var(--colors-brand-10)', + 'icon': '', + 'icon-size': 'var(--sizes-size-7)' + } + }, + option: { + label: '选项', + token: '--user-select-option-', + body: { + 'height': 'var(--sizes-base-24)', + 'icon-size': 'var(--sizes-base-16)', + 'icon-bg-color': 'var(--colors-brand-6)', + 'icon-color': 'var(--colors-neutral-text-11)', + 'icon-marginRight': 'var(--sizes-size-6)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'des-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)' + }, + 'active-color': 'var(--colors-brand-5)' + } + }, + dialogOption: { + label: '弹窗选项', + token: '--user-select-dialog-option-', + body: { + 'height': 'var(--sizes-base-30)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'active-bg-color': 'var(--colors-neutral-fill-10)', + 'icon-size': 'var(--sizes-base-14)', + 'icon-bg-color': 'var(--colors-brand-6)', + 'icon-color': 'var(--colors-neutral-text-11)', + 'icon-marginRight': 'var(--sizes-size-7)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'des-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)' + } + } + } + }, + alert: { + base: { + label: '点击', + token: '--alert-base-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-9)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)', + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'title-padding-and-margin': { + paddingTop: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'title-margin-bottom': 'var(--sizes-size-3)' + } + }, + icon: { + label: '图标', + token: '--alert-icon-', + body: { + 'size': 'var(--sizes-base-8)', + 'margin-right': 'var(--sizes-size-5)' + } + }, + level: { + info: { + label: '提示', + token: '--alert-level-info-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-10)', + 'icon-color': 'var(--colors-brand-5)' + } + }, + success: { + label: '成功', + token: '--alert-level-success-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-success-10)', + 'icon-color': 'var(--colors-success-5)' + } + }, + warning: { + label: '成功', + token: '--alert-level-warning-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-warning-10)', + 'icon-color': 'var(--colors-warning-5)' + } + }, + danger: { + label: '成功', + token: '--alert-level-danger-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-error-10)', + 'icon-color': 'var(--colors-error-5)' + } + } + } + }, + spinner: { + base: { + label: '基本', + token: '--spinner-base-', + body: { + 'font': { + color: 'var(--colors-info-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'tip-size': 'var(--sizes-base-6)' + } + }, + small: { + label: 'small尺寸', + token: '--spinner-sm-', + body: { + size: 'var(--sizes-base-8)' + } + }, + normal: { + label: 'normal尺寸', + token: '--spinner-size-', + body: { + size: 'var(--sizes-base-16)' + } + }, + large: { + label: 'large尺寸', + token: '--spinner-lg-', + body: { + size: 'var(--sizes-base-24)' + } + } + }, + tag: { + base: { + label: '基本', + token: '--Tag-base-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'height': 'var(--sizes-base-12)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-5)', + paddingRight: 'var(--sizes-size-5)' + } + } + }, + model: [ + { + label: '面性标签', + type: 'normal', + token: '--Tag-model-normal-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'status-size': 'var(--sizes-size-0)', + 'status-margin': 'var(--sizes-size-0)', + 'close-size': 'var(--sizes-size-0)', + 'close-margin': 'var(--sizes-size-0)' + } + }, + { + label: '线性标签', + type: 'rounded', + token: '--Tag-model-rounded-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': '12px', + 'top-left-border-radius': '12px', + 'bottom-right-border-radius': '12px', + 'bottom-left-border-radius': '12px' + }, + 'status-size': 'var(--sizes-size-0)', + 'status-margin': 'var(--sizes-size-0)', + 'close-size': 'var(--sizes-size-0)', + 'close-margin': 'var(--sizes-size-0)' + } + }, + { + label: '状态标签', + type: 'status', + token: '--Tag-model-status-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'status-size': 'var(--sizes-size-5)', + 'status-margin': 'var(--sizes-size-5)', + 'close-size': 'var(--sizes-size-5)', + 'close-margin': 'var(--sizes-size-5)' + } + } + ], + color: [ + { + label: 'active', + type: 'active', + token: '--Tag-color-active-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-brand-5)' + } + }, + { + label: 'inactive', + type: 'inactive', + token: '--Tag-color-inactive-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-neutral-fill-6)' + } + }, + { + label: 'error', + tyupe: 'error', + token: '--Tag-color-error-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-error-5)' + } + }, + { + label: 'success', + type: 'success', + token: '--Tag-color-success-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-success-5)' + } + }, + { + label: 'processing', + tyupe: 'processing', + token: '--Tag-color-processing-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-brand-6)' + } + }, + { + label: 'warning', + type: 'warning', + token: '--Tag-color-warning-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-warning-5)' + } + } + ] + }, + timeline: { + base: { + label: '基本', + token: '--Timeline-', + body: { + 'time-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'detail-label-font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'detail-content-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'line-bg': '#e6e6e8', + 'round-bg': '#dadbdd', + 'left-size': 'var(--sizes-size-2)', + 'shadow': 'var(--shadows-shadow-normal)', + 'detail-icon-size': 'var(--sizes-base-8)', + 'detail-icon-color': 'var(--colors-brand-5)', + 'visible-padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'visible-border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + type: { + label: '颜色状态', + token: '--Timeline-type-', + body: { + 'info-color': 'var(--colors-info-5)', + 'success-color': 'var(--colors-success-5)', + 'warning-color': 'var(--colors-warning-5)', + 'danger-color': 'var(--colors-error-5)' + } + }, + horizontal: { + label: '方向', + token: '--Timeline-horizontal-', + body: { + 'top-size': 'var(--sizes-size-0)' + } + } + }, + pick: { + base: { + label: '基本', + token: '--Pick-base-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'bgColor': 'var(--colors-neutral-fill-11)', + 'value-font': { + color: 'var(--colors-other-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'value-border': { + 'top-border-color': 'var(--colors-other-7)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-other-7)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-other-7)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-other-7)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'value-bgColor': '#cce5ff', + 'value-radius': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'icon': '', + 'icon-size': 'var(--sizes-size-9)', + 'icon-color': '#84878c', + 'value-icon-color': 'var(--colors-other-5)', + 'value-hover-icon-color': '#b3d7ff' + } + }, + status: { + label: '配置 不同状态', + token: '--Pick-status-', + body: { + 'hover-border': { + 'top-border-color': 'var(--colors-other-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-other-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-other-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-other-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'hover-bgColor': 'var(--colors-neutral-line-11)', + 'focus-border': { + 'top-border-color': 'var(--colors-other-7)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-other-7)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-other-7)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-other-7)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'focus-shadow': 'var(--shadows-shadow-none)', + 'focus-bgColor': 'var(--colors-neutral-line-11)', + 'disabled-border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'disabled-bgColor': 'var(--colors-neutral-text-10)', + 'disabled-font': { + color: 'var(--colors-neutral-line-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + } + } + } + }, + toast: { + base: { + label: '基本', + token: '--Toast-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'icon-size': 'var(--sizes-size-9)' + } + }, + info: { + label: '基本', + token: '--Toast--info-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + }, + success: { + label: '基本', + token: '--Toast--success-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + }, + danger: { + label: '基本', + token: '--Toast--danger-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + }, + warning: { + label: '基本', + token: '--Toast--warning-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + } + }, + status: { + base: { + label: 'base', + type: 'base', + token: '--Status-base-', + body: { + 'fontSize': 'var(--fonts-size-9)', + 'icon-size': 'var(--sizes-size-8)', + 'text-margin': 'var(--sizes-size-3)' + } + }, + color: [ + { + label: 'fail', + type: 'fail', + token: '--Status-fail-', + body: { + color: 'var(--colors-error-5)' + } + }, + { + label: 'success', + type: 'success', + token: '--Status-success-', + body: { + color: 'var(--colors-success-5)' + } + }, + { + label: 'queue', + type: 'queue', + token: '--Status-queue-', + body: { + color: 'var(--colors-warning-5)' + } + }, + { + label: 'schedule', + type: 'schedule', + token: '--Status-schedule-', + body: { + color: 'var(--colors-neutral-fill-2)' + } + }, + { + label: 'pending', + type: 'pending', + token: '--Status-pending-', + body: { + 'before-color': 'var(--colors-error-5)', + 'after-color': 'var(--colors-brand-5)' + } + } + ] + }, + image: { + image: { + default: { + label: '默认样式', + normal: { + label: '整体', + token: '--image-image-normal-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'title-marginTop': 'var(--sizes-size-0)' + } + }, + description: { + label: '描述', + token: '--image-image-description-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + }, + marginTop: 'var(--sizes-size-0)' + } + } + } + }, + images: { + item: { + label: '图片项', + token: '--image-images-item-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-size-3)', + marginBottom: 'var(--sizes-size-3)', + marginLeft: 'var(--sizes-size-3)', + marginRight: 'var(--sizes-size-3)' + }, + 'size': '48px', + 'color': 'var(--colors-neutral-text-5)' + } + }, + preview: { + label: '图片项', + token: '--image-images-preview-', + body: { + 'radius': 'var(--sizes-size-3)', + 'bgColor': 'var(--colors-neutral-text-11)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + } + } + } + } + }, + inputTag: { + option: { + label: '选项', + token: '--inputTag-option-', + body: { + 'height': 'var(--sizes-base-16)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'hover-color': 'var(--colors-brand-5)', + 'hover-bg-color': 'var(--colors-brand-10)' + } + } + }, + fieldSet: { + legend: { + label: '标题', + token: '--fieldSet-legend-', + body: { + 'height': 'var(--sizes-size-9)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-8)', + paddingRight: 'var(--sizes-size-0)', + marginTop: 'var(--sizes-size-7)', + marginBottom: 'var(--sizes-size-7)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'border-color': 'var(--colors-brand-5)', + 'border-width': 'var(--sizes-size-3)' + } + }, + size: { + xs: { + label: 'xs', + token: '--fieldSet-size-xs-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-10)', + paddingRight: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-3)' + }, + 'fontSize': 'var(--fonts-size-8)' + } + }, + sm: { + label: 'sm', + token: '--fieldSet-size-sm-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-12)', + paddingRight: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)' + }, + 'fontSize': 'var(--fonts-size-8)' + } + }, + base: { + label: 'base', + token: '--fieldSet-size-base-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-15)', + paddingRight: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)' + }, + 'fontSize': 'var(--fonts-size-7)' + } + }, + md: { + label: 'md', + token: '--fieldSet-size-md-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-15)', + paddingRight: 'var(--sizes-base-10)', + paddingBottom: 'var(--sizes-base-10)', + paddingLeft: 'var(--sizes-base-10)' + }, + 'fontSize': 'var(--fonts-size-7)' + } + }, + lg: { + label: 'lg', + token: '--fieldSet-size-lg-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-20)', + paddingRight: 'var(--sizes-base-15)', + paddingBottom: 'var(--sizes-base-15)', + paddingLeft: 'var(--sizes-base-15)' + }, + 'fontSize': 'var(--fonts-size-6)' + } + } + } + }, + inputRichText: { + base: { + label: '基础样式', + default: { + label: '常规', + token: '--inputRichText-default-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + }, + hover: { + label: '常规', + token: '--inputRichText-hover-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + }, + active: { + label: '点击', + token: '--inputRichText-active-', + body: { + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + }, + disabled: { + label: '禁用', + token: '--inputRichText-disabled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + } + } + }, + conditionBuilder: { + base: { + label: '标题', + token: '--conditionBuilder-', + body: { + 'toolbar-size': { + width: 'var(--sizes-base-14)', + height: 'var(--sizes-base-14)' + }, + 'toolbar-font': { + color: 'var(--colors-brand-3)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'toolbar-bg-color': 'var(--colors-brand-9)', + 'toolbar-hover-font': { + color: 'var(--colors-neutral-text-11)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'toolbar-hover-bg-color': 'var(--colors-brand-5)', + 'line-width': 'var(--sizes-size-2)', + 'line-bg-color': 'var(--colors-brand-9)', + 'body-bg-color': 'var(--colors-neutral-line-10)', + 'body-padding-and-margin': { + paddingTop: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-size-7)', + paddingLeft: 'var(--sizes-base-14)' + } + } + } + }, + wizard: { + base: { + label: '基础样式', + badge: { + label: 'basebadge', + type: 'badge', + token: '--Wizard-badge-', + body: { + 'size': 'var(--sizes-base-13)', + 'font': { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-6)' + }, + 'border-width': 'var(--borders-width-2)', + 'border-color': 'var(--colors-neutral-line-6)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'onActive-color': 'var(--colors-neutral-text-11)', + 'onActive-bg-color': 'var(--colors-neutral-fill-3)', + 'text-margin': 'var(--sizes-size-4)' + } + }, + step: { + label: 'basestep', + type: 'step', + token: '--Wizard-step-', + body: { + 'font': { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-6)' + }, + 'padding': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'li-onActive-color': 'var(--colors-neutral-text-3)', + 'li-onActive-bg-color': 'var(--colors-neutral-fill-11)' + } + }, + after: { + label: 'baseafter', + type: 'after', + token: '--Wizard-after-', + body: { + 'color': 'var(--colors-neutral-text-6)', + 'onActive-color': 'var(--colors-neutral-text-3)' + } + }, + stepContent: { + label: 'basestepContent', + type: 'stepContent', + token: '--Wizard-stepContent-', + body: { + padding: { + paddingTop: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-size-7)', + paddingLeft: 'var(--sizes-size-7)' + } + } + } + } + }, + table: { + base: { + label: '基础', + token: '--table-', + body: { + 'border-width': 'var(--borders-width-2)', + 'border-color': 'var(--colors-neutral-line-8)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)' + }, + 'paddingX': 'var(--sizes-size-7)', + 'header-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'header-bg-color': 'var(--colors-neutral-fill-10)', + 'header-separate-line-color': 'var(--colors-neutral-fill-11)', + 'header-separate-line-width': 'var(--borders-width-2)', + 'body-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'body-bg-color': 'var(--colors-neutral-fill-11)', + 'body-hover-color': 'var(--colors-neutral-text-2)', + 'body-hover-bg-color': 'var(--colors-brand-10)', + 'body-disabled-color': 'var(--colors-neutral-text-6)', + 'body-disabled-bg-color': 'var(--colors-neutral-fill-10)', + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'title-bg-color': 'var(--colors-neutral-fill-11)', + 'title-padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-5)' + }, + 'icon-color': 'var(--colors-neutral-text-6)', + 'icon-hover-color': 'var(--colors-neutral-text-2)', + 'icon-active-color': 'var(--colors-brand-5)', + 'icon-marginLeft': 'var(--sizes-size-5)', + 'sort-icon': '', + 'sort-up-icon': '', + 'sort-down-icon': '', + 'filter-icon': '', + 'search-icon': '' + } + }, + togglable: { + label: '自定义列', + token: '--table-togglable-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingRight: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-5)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'hover-bg-color': 'var(--colors-neutral-fill-8)' + } + }, + size: { + large: { + label: '尺寸大', + token: '--table-size-large-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-10)', + paddingRight: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-base-10)', + paddingLeft: 'var(--sizes-size-7)' + } + } + }, + small: { + label: '尺寸小', + token: '--table-size-small-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingRight: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-3)' + } + } + } + } + }, + combo: { + base: { + label: '基本', + token: '--combo-', + body: { + 'bg-color': 'var(--colors-neutral-fill-11)', + 'vertical-border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'vertical-hover-border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)' + }, + 'vertical-padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)' + } + } + }, + multi: { + label: '多选模式', + token: '--combo-multi-', + body: { + 'delBtn-color': 'var(--colors-neutral-text-5)', + 'delBtn-hover-color': 'var(--colors-neutral-text-2)' + } + } + } +}; + +export default component; diff --git a/packages/amis-theme-editor-helper/src/systemTheme/cxd.ts b/packages/amis-theme-editor-helper/src/systemTheme/cxd.ts new file mode 100644 index 00000000000..a60a2478b37 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/cxd.ts @@ -0,0 +1,1513 @@ +import type {ThemeDefinition} from '../helper/declares'; +import component from './component'; + +const cxdData: ThemeDefinition = { + config: { + name: '云舍', + key: 'cxd', + description: '系统预设主题' + }, + global: { + colors: { + brand: { + token: '--colors-brand-', + label: '品牌色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-brand-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-brand-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-brand-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-brand-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-brand-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-brand-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-brand-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-brand-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-brand-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-brand-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + }, + neutral: { + token: '--colors-neutral-', + label: '中性色', + body: [ + { + token: '--colors-neutral-text-', + label: '文字', + body: { + common: [ + { + id: 'strong', + label: '强调/正文标题', + color: 1 + }, + { + id: 'lessStrong', + label: '次强调/正文标题', + color: 3 + }, + { + id: 'info', + label: '辅助说明', + color: 4 + }, + { + id: 'disabledInfo', + label: '禁用', + color: 5 + }, + { + id: 'white', + label: '纯白文字', + color: 10 + } + ], + colors: [ + { + token: '--colors-neutral-text-1', + label: '1-#070c14', + color: '#070c14', + index: 0 + }, + { + token: '--colors-neutral-text-2', + label: '2-#151b26', + color: '#151b26', + index: 1 + }, + { + token: '--colors-neutral-text-3', + label: '3-#303540', + color: '#303540', + index: 2 + }, + { + token: '--colors-neutral-text-4', + label: '4-#5c5f66', + color: '#5c5f66', + index: 3 + }, + { + token: '--colors-neutral-text-5', + label: '5-#84878c', + color: '#84878c', + index: 4 + }, + { + token: '--colors-neutral-text-6', + label: '6-#b8babf', + color: '#b8babf', + index: 5 + }, + { + token: '--colors-neutral-text-7', + label: '7-#d4d6d9', + color: '#d4d6d9', + index: 6 + }, + { + token: '--colors-neutral-text-8', + label: '8-#e8e9eb', + color: '#e8e9eb', + index: 7 + }, + { + token: '--colors-neutral-text-9', + label: '9-#f2f3f5', + color: '#f2f3f5', + index: 8 + }, + { + token: '--colors-neutral-text-10', + label: '10-#f7f8fa', + color: '#f7f8fa', + index: 9 + }, + { + token: '--colors-neutral-text-11', + label: '11-#ffffff', + color: '#ffffff', + index: 10 + } + ] + } + }, + { + token: '--colors-neutral-fill-', + label: '填充', + body: { + none: 'transparent', + common: [ + { + id: 'fill-white', + label: '纯白填充', + color: 10 + }, + { + id: 'fill-1', + label: '浅/禁用背景', + color: 9 + }, + { + id: 'fill-2', + label: '分割线', + color: 7 + }, + { + id: 'fill-3', + label: '深/灰底悬浮', + color: 6 + } + ], + colors: [ + { + token: '--colors-neutral-fill-1', + label: '1-#070c14', + color: '#070c14', + index: 0 + }, + { + token: '--colors-neutral-fill-2', + label: '2-#151b26', + color: '#151b26', + index: 1 + }, + { + token: '--colors-neutral-fill-3', + label: '3-#303540', + color: '#303540', + index: 2 + }, + { + token: '--colors-neutral-fill-4', + label: '4-#5c5f66', + color: '#5c5f66', + index: 3 + }, + { + token: '--colors-neutral-fill-5', + label: '5-#84878c', + color: '#84878c', + index: 4 + }, + { + token: '--colors-neutral-fill-6', + label: '6-#b8babf', + color: '#b8babf', + index: 5 + }, + { + token: '--colors-neutral-fill-7', + label: '7-#d4d6d9', + color: '#d4d6d9', + index: 6 + }, + { + token: '--colors-neutral-fill-8', + label: '8-#e8e9eb', + color: '#e8e9eb', + index: 7 + }, + { + token: '--colors-neutral-fill-9', + label: '9-#f2f3f5', + color: '#f2f3f5', + index: 8 + }, + { + token: '--colors-neutral-fill-10', + label: '10-#f7f8fa', + color: '#f7f8fa', + index: 9 + }, + { + token: '--colors-neutral-fill-11', + label: '11-#ffffff', + color: '#ffffff', + index: 10 + } + ] + } + }, + { + token: '--colors-neutral-line-', + label: '线条', + body: { + common: [ + { + id: 'line-1', + label: '浅', + color: 9 + }, + { + id: 'line-2', + label: '常规', + color: 7 + }, + { + id: 'line-3', + label: '深', + color: 5 + }, + { + id: 'line-4', + label: '重', + color: 3 + } + ], + colors: [ + { + token: '--colors-neutral-line-1', + label: '1-#070c14', + color: '#070c14', + index: 0 + }, + { + token: '--colors-neutral-line-2', + label: '2-#151b26', + color: '#151b26', + index: 1 + }, + { + token: '--colors-neutral-line-3', + label: '3-#303540', + color: '#303540', + index: 2 + }, + { + token: '--colors-neutral-line-4', + label: '4-#5c5f66', + color: '#5c5f66', + index: 3 + }, + { + token: '--colors-neutral-line-5', + label: '5-#84878c', + color: '#84878c', + index: 4 + }, + { + token: '--colors-neutral-line-6', + label: '6-#b8babf', + color: '#b8babf', + index: 5 + }, + { + token: '--colors-neutral-line-7', + label: '7-#d4d6d9', + color: '#d4d6d9', + index: 6 + }, + { + token: '--colors-neutral-line-8', + label: '8-#e8e9eb', + color: '#e8e9eb', + index: 7 + }, + { + token: '--colors-neutral-line-9', + label: '9-#f2f3f5', + color: '#f2f3f5', + index: 8 + }, + { + token: '--colors-neutral-line-10', + label: '10-#f7f8fa', + color: '#f7f8fa', + index: 9 + }, + { + token: '--colors-neutral-line-11', + label: '11-#ffffff', + color: '#ffffff', + index: 10 + } + ] + } + } + ] + }, + func: { + token: 'func', + label: '辅助色', + body: [ + { + token: '--colors-error-', + label: '失败色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-error-1', + label: '1-#590410', + color: '#590410', + index: 0 + }, + { + token: '--colors-error-2', + label: '2-#800d18', + color: '#800d18', + index: 1 + }, + { + token: '--colors-error-3', + label: '3-#a61922', + color: '#a61922', + index: 2 + }, + { + token: '--colors-error-4', + label: '4-#cc292e', + color: '#cc292e', + index: 3 + }, + { + token: '--colors-error-5', + label: '5-#f23d3d', + color: '#f23d3d', + index: 4 + }, + { + token: '--colors-error-6', + label: '6-#ff6966', + color: '#ff6966', + index: 5 + }, + { + token: '--colors-error-7', + label: '7-#ff908c', + color: '#ff908c', + index: 6 + }, + { + token: '--colors-error-8', + label: '8-#ffb6b3', + color: '#ffb6b3', + index: 7 + }, + { + token: '--colors-error-9', + label: '9-#ffdbd9', + color: '#ffdbd9', + index: 8 + }, + { + token: '--colors-error-10', + label: '10-#ffe8e6', + color: '#ffe8e6', + index: 9 + } + ] + } + }, + { + token: '--colors-warning-', + label: '警告色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-warning-1', + label: '1-#662500', + color: '#662500', + index: 0 + }, + { + token: '--colors-warning-2', + label: '2-#8c3800', + color: '#8c3800', + index: 1 + }, + { + token: '--colors-warning-3', + label: '3-#b35209', + color: '#b35209', + index: 2 + }, + { + token: '--colors-warning-4', + label: '4-#d97116', + color: '#d97116', + index: 3 + }, + { + token: '--colors-warning-5', + label: '5-#ff9326', + color: '#ff9326', + index: 4 + }, + { + token: '--colors-warning-6', + label: '6-#ffab52', + color: '#ffab52', + index: 5 + }, + { + token: '--colors-warning-7', + label: '7-#ffc27d', + color: '#ffc27d', + index: 6 + }, + { + token: '--colors-warning-8', + label: '8-#ffd8a8', + color: '#ffd8a8', + index: 7 + }, + { + token: '--colors-warning-9', + label: '9-#ffecd4', + color: '#ffecd4', + index: 8 + }, + { + token: '--colors-warning-10', + label: '10-#fff4e6', + color: '#fff4e6', + index: 9 + } + ] + } + }, + { + token: '--colors-success-', + label: '成功色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-success-1', + label: '1-#012600', + color: '#012600', + index: 0 + }, + { + token: '--colors-success-2', + label: '2-#054d00', + color: '#054d00', + index: 1 + }, + { + token: '--colors-success-3', + label: '3-#0b7300', + color: '#0b7300', + index: 2 + }, + { + token: '--colors-success-4', + label: '4-#1b9908', + color: '#1b9908', + index: 3 + }, + { + token: '--colors-success-5', + label: '5-#30bf13', + color: '#30bf13', + index: 4 + }, + { + token: '--colors-success-6', + label: '6-#54cc39', + color: '#54cc39', + index: 5 + }, + { + token: '--colors-success-7', + label: '7-#7bd964', + color: '#7bd964', + index: 6 + }, + { + token: '--colors-success-8', + label: '8-#a5e693', + color: '#a5e693', + index: 7 + }, + { + token: '--colors-success-9', + label: '9-#d1f2c7', + color: '#d1f2c7', + index: 8 + }, + { + token: '--colors-success-10', + label: '10-#ecffe6', + color: '#ecffe6', + index: 9 + } + ] + } + }, + { + token: '--colors-link-', + label: '链接色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-link-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-link-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-link-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-link-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-link-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-link-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-link-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-link-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-link-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-link-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + }, + { + token: '--colors-info-', + label: '提示色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-info-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-info-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-info-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-info-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-info-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-info-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-info-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-info-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-info-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-info-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + }, + { + token: '--colors-other-', + label: '其他色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-other-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-other-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-other-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-other-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-other-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-other-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-other-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-other-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-other-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-other-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + } + ] + }, + data: { + label: '数据色', + body: [ + { + label: '默认', + token: 'dataColor1', + colors: [ + { + value: '#2468f2' + }, + { + value: '#aa24ed' + }, + { + value: '#e32262' + }, + { + value: '#855f14' + }, + { + value: '#3b8714' + }, + { + value: '#158a63' + }, + { + value: '#1c77b8' + } + ] + }, + { + label: '经典', + token: 'dataColor2', + colors: [ + { + value: '#2468f2' + }, + { + value: '#c01fcf' + }, + { + value: '#cc3b1f' + }, + { + value: '#4f7a12' + }, + { + value: '#158f48' + }, + { + value: '#1c77b8' + }, + { + value: '#8437f0' + } + ] + }, + { + label: '过渡', + token: 'dataColor3', + colors: [ + { + value: '#2468f2' + }, + { + value: '#4856f0' + }, + { + value: '#6347ed' + }, + { + value: '#8437f0' + }, + { + value: '#aa24ed' + }, + { + value: '#c01fcf' + }, + { + value: '#cc1faf' + } + ] + } + ] + } + }, + fonts: { + base: { + label: '基础字体', + token: '--fonts-base-family', + body: [ + { + value: '-apple-system' + }, + { + value: 'BlinkMacSystemFont' + }, + { + value: 'SF Pro SC' + }, + { + value: 'SF Pro Text' + }, + { + value: 'Helvetica Neue' + }, + { + value: 'Helvetica' + }, + { + value: 'PingFang SC' + }, + { + value: 'Segoe UI' + }, + { + value: 'Roboto' + }, + { + value: 'Hiragino Sans GB' + }, + { + value: 'Arial' + }, + { + value: 'microsoft yahei ui' + }, + { + value: 'Microsoft YaHei' + }, + { + value: 'SimSun' + }, + { + value: 'sans-serif' + } + ] + }, + size: { + label: '字号', + token: '--fonts-size-', + body: [ + { + label: '运营标题-大', + token: '--fonts-size-1', + value: '48px' + }, + { + label: '运营标题-中', + token: '--fonts-size-2', + value: '40px' + }, + { + label: '运营标题-小', + token: '--fonts-size-3', + value: '32px' + }, + { + label: '标题-大', + token: '--fonts-size-4', + value: '24px' + }, + { + label: '标题-中', + token: '--fonts-size-5', + value: '18px' + }, + { + label: '标题-小', + token: '--fonts-size-6', + value: '16px' + }, + { + label: '正文-常规-大', + token: '--fonts-size-7', + value: '14px' + }, + { + label: '正文-常规-小', + token: '--fonts-size-8', + value: '12px' + }, + { + label: '水印文字', + token: '--fonts-size-9', + value: '12px' + } + ] + }, + lineHeight: { + label: '行高', + token: '--fonts-lineHeight-', + body: [ + { + label: 'Line-height-1', + token: '--fonts-lineHeight-1', + value: 1.3 + }, + { + label: 'Line-height-2', + token: '--fonts-lineHeight-2', + value: 1.5 + }, + { + label: 'Line-height-3', + token: '--fonts-lineHeight-3', + value: 1.7 + } + ] + }, + weight: { + label: '字重', + token: '--fonts-weight-', + body: [ + { + label: 'Ultra bold(heavy)', + token: '--fonts-weight-1', + value: 900 + }, + { + label: 'Extra bold', + token: '--fonts-weight-2', + value: 800 + }, + { + label: 'Blod', + token: '--fonts-weight-3', + value: 700 + }, + { + label: 'Semi bold', + token: '--fonts-weight-4', + value: 600 + }, + { + label: 'Medium', + token: '--fonts-weight-5', + value: 500 + }, + { + label: 'Regular', + token: '--fonts-weight-6', + value: 400 + }, + { + label: 'Light', + token: '--fonts-weight-7', + value: 300 + }, + { + label: 'Extra light(thin)', + token: '--fonts-weight-8', + value: 200 + }, + { + label: 'Uitra light', + token: '--fonts-weight-9', + value: 100 + } + ] + } + }, + borders: { + width: { + label: '粗细', + token: '--borders-width-', + body: [ + { + label: '无', + disabled: true, + token: '--borders-width-1', + value: '0px' + }, + { + label: '常规', + token: '--borders-width-2', + value: '1px' + }, + { + label: '中粗', + token: '--borders-width-3', + value: '2px' + }, + { + label: '特粗', + token: '--borders-width-4', + value: '4px' + } + ] + }, + style: { + label: '样式', + token: '--borders-style-', + body: [ + { + label: '无', + disabled: true, + token: '--borders-style-1', + value: 'none' + }, + { + label: '实线', + token: '--borders-style-2', + value: 'solid' + }, + { + label: '虚线', + token: '--borders-style-3', + value: 'dashed' + }, + { + label: '点线', + token: '--borders-style-4', + value: 'dotted' + } + ] + }, + radius: { + label: '圆角', + token: '--borders-radius-', + body: [ + { + label: '无', + disabled: true, + token: '--borders-radius-1', + value: '0px' + }, + { + label: '圆角1', + token: '--borders-radius-2', + value: '2px' + }, + { + label: '圆角2', + token: '--borders-radius-3', + value: '4px' + }, + { + label: '圆角3', + token: '--borders-radius-4', + value: '6px' + }, + { + label: '圆角4', + token: '--borders-radius-5', + value: '8px' + }, + { + label: '圆角5', + token: '--borders-radius-6', + value: '10px' + }, + { + label: '圆角6', + token: '--borders-radius-7', + value: '50%' + } + ] + } + }, + sizes: { + size: { + label: '尺寸', + token: '--sizes-size-', + base: 0.125, + start: '0.125rem', + body: [ + { + label: '无', + disabled: true, + token: '--sizes-size-0', + value: '0rem' + }, + { + label: 'auto', + disabled: true, + token: '--sizes-size-1', + value: 'auto' + }, + { + label: '特小', + token: '--sizes-size-2', + value: '0.125rem' + }, + { + label: '极小', + token: '--sizes-size-3', + value: '0.25rem' + }, + { + label: '小', + token: '--sizes-size-4', + value: '0.375rem' + }, + { + label: '正常', + token: '--sizes-size-5', + value: '0.5rem' + }, + { + label: '中', + token: '--sizes-size-6', + value: '0.625rem' + }, + { + label: '大', + token: '--sizes-size-7', + value: '0.75rem' + }, + { + label: '极大', + token: '--sizes-size-8', + value: '0.875rem' + }, + { + label: '特大', + token: '--sizes-size-9', + value: '1rem' + } + ] + } + }, + shadows: { + shadow: { + label: '阴影', + token: '--shadows-shadow-', + body: [ + { + label: '无阴影', + disabled: true, + token: '--shadows-shadow-none', + value: [ + { + inset: false, + x: '0px', + y: '0px', + blur: '0px', + spread: '0px', + color: 'transparent' + } + ] + }, + { + label: '阴影sm', + token: '--shadows-shadow-sm', + value: [ + { + inset: false, + x: '0px', + y: '1px', + blur: '2px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.05)' + } + ] + }, + { + label: '阴影', + token: '--shadows-shadow-normal', + value: [ + { + inset: false, + x: '0px', + y: '1px', + blur: '3px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '1px', + blur: '2px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.06)' + } + ] + }, + { + label: '阴影md', + token: '--shadows-shadow-md', + value: [ + { + inset: false, + x: '0px', + y: '4px', + blur: '-1px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '2px', + blur: '4px', + spread: '-1px', + color: 'rgba(0, 0, 0, 0.06)' + } + ] + }, + { + label: '阴影lg', + token: '--shadows-shadow-lg', + value: [ + { + inset: false, + x: '0px', + y: '10px', + blur: '15px', + spread: '-3px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '4px', + blur: '6px', + spread: '-2px', + color: 'rgba(0, 0, 0, 0.05)' + } + ] + }, + { + label: '阴影xl', + token: '--shadows-shadow-xl', + value: [ + { + inset: false, + x: '0px', + y: '20px', + blur: '25px', + spread: '-5px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '10px', + blur: '10px', + spread: '-5px', + color: 'rgba(0, 0, 0, 0.04)' + } + ] + }, + { + label: '阴影2xl', + token: '--shadows-shadow-2xl', + value: [ + { + inset: false, + x: '0px', + y: '25px', + blur: '50px', + spread: '-12px', + color: 'rgba(0, 0, 0, 0.25)' + } + ] + } + ] + } + } + }, + component +}; +export default cxdData; diff --git a/packages/amis-theme-editor-helper/src/systemTheme/index.ts b/packages/amis-theme-editor-helper/src/systemTheme/index.ts new file mode 100644 index 00000000000..fde3520b170 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/index.ts @@ -0,0 +1,3 @@ +import cxdData from './cxd'; +import antdData from './antd'; +export {cxdData, antdData}; diff --git a/packages/amis-theme-editor-helper/src/util.ts b/packages/amis-theme-editor-helper/src/util.ts new file mode 100644 index 00000000000..c6df987d60f --- /dev/null +++ b/packages/amis-theme-editor-helper/src/util.ts @@ -0,0 +1,156 @@ +import cloneDeep from 'lodash/cloneDeep'; + +/** + * 根据路径获取默认值 + */ +export function getValueByPath(path: string | string[], data: any): any { + try { + if (!path || !data) { + return null; + } + let res = {}; + const getValue = (p: string) => { + const keys = p.split('.'); + let value = cloneDeep(data.themeConfig.component); + let defaultToken = ''; + for (let i = 0; i < keys.length; i++) { + let key = keys[i]; + const isVar = /\$\{(.*)\}/.exec(key) || []; + if (isVar[1]) { + key = data[isVar[1]] || 'default'; + } + + if (Array.isArray(value)) { + value = value.find(n => n.type === key); + } else { + if (key === 'hover' || key === 'active' || key === 'disabled') { + defaultToken = value['default'].token; + } + value = value[key]; + } + } + if (defaultToken && value) { + // 继承default + if (typeof value === 'object') { + for (let key in value) { + if (value[key] === `var(${defaultToken}${key})`) { + value[key] = 'inherit'; + } + } + } else { + if (value === `var(${defaultToken}${keys[keys.length - 1]})`) { + value = 'inherit'; + } + } + } + return value; + }; + if (Array.isArray(path)) { + path.forEach(p => { + let value = getValue(p); + if (typeof value === 'string') { + value = {color: value}; + } + res = Object.assign(res, value); + }); + } else { + res = getValue(path); + } + return res; + } catch (e) { + return null; + } +} + +/** + * 获取继承值 + */ +export function getInheritValue(path: string | string[], data: any): any { + try { + if (!path || !data) { + return null; + } + let res = {}; + const getValue = (p: string) => { + const keys = p.split('.'); + let value = cloneDeep(data.themeConfig.component); + let defaultToken = ''; + for (let i = 0; i < keys.length; i++) { + let key = keys[i]; + const isVar = /\$\{(.*)\}/.exec(key) || []; + if (isVar[1]) { + key = data[isVar[1]] || 'default'; + } + + if (Array.isArray(value)) { + value = value.find(n => n.type === key); + } else { + if (key === 'hover' || key === 'active' || key === 'disabled') { + defaultToken = value['default'].token; + value = value['default']; + } else { + value = value[key]; + } + } + + if (!value) { + break; + } + } + if (defaultToken && value) { + return value; + } + return null; + }; + if (Array.isArray(path)) { + path.forEach(p => { + let value = getValue(p); + if (typeof value === 'string') { + value = {color: value}; + } + res = Object.assign(res, value); + }); + } else { + res = getValue(path); + } + return res; + } catch (e) { + return null; + } +} + +// 处理传入的继承数据 +export function formatInheritData(data: any) { + if (typeof data === 'string' && data.indexOf('inherit:') > -1) { + return 'inherit'; + } + if (!data || typeof data !== 'object') { + return data; + } + data = cloneDeep(data); + for (let key in data) { + if (typeof data[key] === 'string' && data[key].indexOf('inherit:') > -1) { + data[key] = 'inherit'; + } + } + return data; +} + +// 设置继承数据 +export function setInheritData(value: any, editorInheritValue: any) { + if (value && editorInheritValue) { + if (typeof value === 'string') { + if (value === 'inherit') { + value = 'inherit:' + (editorInheritValue || ''); + } + } else { + value = cloneDeep(value); + for (let key in value) { + if (value[key] === 'inherit') { + value[key] = 'inherit:' + (editorInheritValue[key] || ''); + } + } + } + } + return value; +} diff --git a/packages/amis-theme-editor-helper/tsconfig.json b/packages/amis-theme-editor-helper/tsconfig.json new file mode 100644 index 00000000000..510bd5e0b7c --- /dev/null +++ b/packages/amis-theme-editor-helper/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib", + "rootDir": "./src", + "typeRoots": [ + "../../types", + "./node_modules/@types", + "../../node_modules/@types" + ] + }, + "include": ["src/**/*"], + "references": [ + {"path": "../amis"}, + {"path": "../amis-ui"}, + {"path": "../amis-core"} + ] +} diff --git a/packages/amis-theme-editor-helper/typings.ts b/packages/amis-theme-editor-helper/typings.ts new file mode 100644 index 00000000000..800c1afec06 --- /dev/null +++ b/packages/amis-theme-editor-helper/typings.ts @@ -0,0 +1,5 @@ +declare module '*.json' { + const value: any; + export default value; +} +declare module 'plugin-react-i18n'; diff --git a/packages/amis-ui/src/components/TooltipWrapper.tsx b/packages/amis-ui/src/components/TooltipWrapper.tsx index 2a292b35f36..add73d05253 100644 --- a/packages/amis-ui/src/components/TooltipWrapper.tsx +++ b/packages/amis-ui/src/components/TooltipWrapper.tsx @@ -109,6 +109,7 @@ export interface TooltipWrapperProps { */ onVisibleChange?: (visible: boolean) => void; children?: React.ReactNode | Array; + disabled?: boolean; } interface TooltipWrapperState { diff --git a/publish-theme.sh b/publish-theme.sh new file mode 100644 index 00000000000..b0449eacbf9 --- /dev/null +++ b/publish-theme.sh @@ -0,0 +1,93 @@ +#!/bin/bash +set -e +source ./scripts/utils.sh + +echo "请选择发布内网or外网：" +publish_types=("internal" "external") + +select_option "${publish_types[@]}" + +publish_type=$selected_option + +echo "请选择发布版本的类型：" + +options=("latest" "beta" "alpha" "custom") + +select_option "${options[@]}" + +if [ "$selected_option" == "custom" ]; then + read -p "请自定义输入版本: " version + npm_get_tag $version + tag=$npm_tag +else + tag=$selected_option + if [ "$publish_type" == "internal" ]; then + current_version=`npm show @fex/amis-theme-editor-helper@${tag} version --registry=http://registry.npm.baidu-int.com` + else + current_version=`npm show amis-theme-editor-helper@${tag} version` + fi + if [ -z "${current_version}" ]; then + echo "没有找到的${tag}版本" + read -p "请自定义输入版本: " version + npm_get_tag $version + tag=$npm_tag + else + echo "当前版本：${current_version}" + npm_version $current_version $tag + version=$new_version + read -p "确认更新y or n: " confirm + if [ "$confirm" != "y" ]; then + read -p "请自定义输入版本: " version + npm_get_tag $version + tag=$npm_tag + fi + fi +fi + +sed -i '' -e 's/\"version\": \".*\"/\"version\": \"'${version}'\"/g' ./packages/amis-theme-editor-helper/package.json + +npm run build --workspace=amis-theme-editor-helper + +rm -rf theme-npm + +mkdir -p theme-npm/amis-theme-editor-helper + +cp -rf packages/amis-theme-editor-helper/lib theme-npm/amis-theme-editor-helper +cp -rf packages/amis-theme-editor-helper/esm theme-npm/amis-theme-editor-helper +cp packages/amis-theme-editor-helper/package.json theme-npm/amis-theme-editor-helper + +cd theme-npm/amis-theme-editor-helper + +if [ "$publish_type" == "internal" ]; then + # package.json 里面把包名称换了 + for f in $(find ./ -name "package.json"); do + sed -i '' -e 's/\"name\": \"amis/\"name\": \"@fex\/amis/g' $f + sed -i '' -e 's/\"amis-/\"@fex\/amis-/g' $f + sed -i '' -e 's/\"amis\":/\"@fex\/amis\":/g' $f + sed -i '' -e 's/\"i18n-runtime\":/\"@fex\/i18n-runtime\":/g' $f + done + + # 把代码里面import的部分换成内部包名称 + for f in $(find ./ -type f -name "*.[tj]s"); do + # 正则那个 | 用不了，还不知道为何 + #sed -i '' -e "s#\('|\"\)\(amis|amis-formula|amis-core|amis-ui|amis-editor|amis-editor-core\)\('|\"|\/\)#\1@fex\/\2\3#g" $f + + sed -i '' -e "s#'\(amis\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(amis\)\(['\"/]\)#\"@fex\/\1\2#g" $f + + sed -i '' -e "s#'\(amis-core\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(amis-core\)\(['\"/]\)#\"@fex\/\1\2#g" $f + + sed -i '' -e "s#'\(amis-ui\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(amis-ui\)\(['\"/]\)#\"@fex\/\1\2#g" $f + + sed -i '' -e "s#'\(i18n-runtime\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(i18n-runtime\)\(['\"/]\)#\"@fex\/\1\2#g" $f + done + + npm publish --tag=$tag --registry=http://registry.npm.baidu-int.com +else + npm publish --tag=$tag +fi + + diff --git a/scripts/utils.sh b/scripts/utils.sh new file mode 100644 index 00000000000..7da4823d0d6 --- /dev/null +++ b/scripts/utils.sh @@ -0,0 +1,83 @@ +#!/bin/bash + +render_option() { + for index in "${!choices[@]}"; do + if [ $index -eq $1 ]; then + printf "\033[31m> ${choices[$index]}\033[0m\n" # 高亮显示选中的选项 + else + echo " ${choices[$index]}" + fi + done +} + +clear_screen() { + local len=$1 + echo "\033[${len}A\033[K" + for ((i=1;i<$len;i++)); do + echo "\033[K" + done + echo "\033[$((${len} + 1))A" + +} + +select_option() { + choices=("$@") # 将选项数组声明为全局变量 + local selected=0 # 初始化选择索引 + local choices_lenght=${#choices[@]} # 获取选项数组长度 + render_option $selected + while true; do + read -n1 -s key # 读取单个按键并保持输入的隐私 + case "$key" in + A) # 上箭头 + if [ $selected -gt 0 ]; then + selected=$((selected - 1)) + else + selected=$(($choices_lenght - 1)) + fi + clear_screen $choices_lenght + render_option $selected + ;; + B) # 下箭头 + if [ $selected -lt $(($choices_lenght - 1)) ]; then + selected=$((selected + 1)) + else + selected=0 + fi + clear_screen $choices_lenght + render_option $selected + ;; + "") # 回车键 + break + ;; + esac + done + + # 打印最终结果日志 + selected_option="${choices[$selected]}" +} + +npm_version() { + local current_version=$1 + local tag=$2 + IFS='.-' read -r major minor patch pre_release pre_release_version <<< "$current_version" + if [ $tag = $pre_release ]; then + ((pre_release_version++)) + new_version="$major.$minor.$patch-$tag.$pre_release_version" + else + ((patch++)) + new_version="$major.$minor.$patch" + fi + + echo "新版本为：$new_version" +} + +npm_get_tag() { + IFS='.-' read -r major minor patch pre_release pre_release_version <<< "$1" + if [ "$pre_release" ]; then + npm_tag=$pre_release + else + npm_tag="latest" + fi + echo "发布tag为: $npm_tag" +} + diff --git a/tsconfig.json b/tsconfig.json index 5dc684d2971..c5824458a6f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,7 +29,10 @@ "amis": ["./packages/amis/src/index.tsx"], "office-viewer": ["./packages/office-viewer/src/index.ts"], "amis-editor-core": ["./packages/amis-editor-core/src/index.ts"], - "amis-editor": ["./packages/amis-editor/src/index.tsx"] + "amis-editor": ["./packages/amis-editor/src/index.tsx"], + "amis-theme-editor-helper": [ + "./packages/amis-theme-editor-helper/src/index.ts" + ] } }, "watchOptions": { diff --git a/vite.config.ts b/vite.config.ts index 17c70cc0612..c90ada6575a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,25 +14,6 @@ import i18nConfig from './i18nConfig'; var I18N = process.env.I18N; -var PROXY_THEME = process.env.PROXY_THEME - ? [ - { - find: 'amis-theme-editor/lib/renderers.css', - replacement: path.resolve( - __dirname, - '../editor/packages/amis-theme-editor/src/renderers/style/_index.scss' - ) - }, - { - find: 'amis-theme-editor/lib', - replacement: path.resolve( - __dirname, - '../editor/packages/amis-theme-editor/src' - ) - } - ] - : []; - // https://vitejs.dev/config/ export default defineConfig({ plugins: [ @@ -126,7 +107,14 @@ export default defineConfig({ { find: 'office-viewer', replacement: path.resolve(__dirname, './packages/office-viewer/src') + }, + { + find: 'amis-theme-editor-helper', + replacement: path.resolve( + __dirname, + './packages/amis-theme-editor-helper/src' + ) } - ].concat(PROXY_THEME) + ] } }); From ab05c56a484e8e1394e7f7d8259fadf480207a46 Mon Sep 17 00:00:00 2001 From: wutong25 Date: Thu, 23 Nov 2023 20:48:24 +0800 Subject: [PATCH 49/57] =?UTF-8?q?style:=20=E3=80=8C=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E5=99=A8=E3=80=8D=E9=85=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF=E5=B1=85?= =?UTF-8?q?=E4=B8=AD=E5=BF=85=E5=A1=AB=E9=A1=B9*=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/scss/control/_formItem-control.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/amis-editor-core/scss/control/_formItem-control.scss b/packages/amis-editor-core/scss/control/_formItem-control.scss index 74a7a6c5f94..696442ecb55 100644 --- a/packages/amis-editor-core/scss/control/_formItem-control.scss +++ b/packages/amis-editor-core/scss/control/_formItem-control.scss @@ -15,6 +15,10 @@ line-height: 32px; margin: 0; padding-top: 0; + + > span { + display: inline; + } } } From 923934c29d120501a54317c099860832faa7378d Mon Sep 17 00:00:00 2001 From: wutong25 Date: Thu, 23 Nov 2023 20:49:38 +0800 Subject: [PATCH 50/57] =?UTF-8?q?feat:=20=E5=AD=90=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E5=85=AC=E5=BC=8F=E8=BE=93=E5=85=A5=E6=A1=86=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E4=B8=AD=E5=8A=A0=E5=85=A5=E5=AE=BF=E4=B8=BB=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=B8=8A=E4=B8=8B=E6=96=87=E5=8F=98=E9=87=8F=E7=9A=84?= =?UTF-8?q?=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/SubEditor.tsx | 7 ++-- packages/amis-editor-core/src/util.ts | 38 +++++++++++++++++-- .../src/plugin/Form/ListSelect.tsx | 3 +- .../src/renderer/ExpressionFormulaControl.tsx | 2 +- packages/amis-editor/src/tpl/common.tsx | 1 + 5 files changed, 43 insertions(+), 8 deletions(-) diff --git a/packages/amis-editor-core/src/component/SubEditor.tsx b/packages/amis-editor-core/src/component/SubEditor.tsx index eea90e6b244..ca95a8b2eda 100644 --- a/packages/amis-editor-core/src/component/SubEditor.tsx +++ b/packages/amis-editor-core/src/component/SubEditor.tsx @@ -182,9 +182,10 @@ export class SubEditor extends React.Component { } return; }} - getHostNodeDataSchema={() => - manager.getContextSchemas(manager.store.activeId) - } + getHostNodeDataSchema={async () => { + await manager.getContextSchemas(manager.store.activeId); + return manager.dataSchema; + }} getAvaiableContextFields={node => manager.getAvailableContextFields(node) } diff --git a/packages/amis-editor-core/src/util.ts b/packages/amis-editor-core/src/util.ts index 4176209f092..6615f2993d5 100644 --- a/packages/amis-editor-core/src/util.ts +++ b/packages/amis-editor-core/src/util.ts @@ -1206,10 +1206,9 @@ export function style2ThemeCss(data: any) { export async function resolveVariablesFromScope(node: any, manager: any) { await manager?.getContextSchemas(node); // 获取当前组件内相关变量，如表单、增删改查 - const dataPropsAsOptions: VariableItem[] = updateComponentContext( - (await manager?.dataSchema?.getDataPropsAsOptions()) ?? [] - ); + let variableOptions = + (await manager?.dataSchema?.getDataPropsAsOptions()) ?? []; // 子编辑器内读取的host节点自定义变量，非数据域方式，如listSelect的选项值 let hostNodeVaraibles = []; if (manager?.store?.isSubEditor) { @@ -1217,7 +1216,40 @@ export async function resolveVariablesFromScope(node: any, manager: any) { manager.config?.hostNode?.info?.getSubEditorVariable?.( manager.config?.hostNode.schema ) || []; + + // 获取父编辑器内组件上下文变量，与当前自编辑器进行拼接 + const hostNodeDataSchema = await manager.config.getHostNodeDataSchema(); + const hostContextVariables = ( + hostNodeDataSchema?.getDataPropsAsOptions() || [] + ) + .filter((item: any) => item.label === '组件上下文') + .reduce((arr: any, item: any) => { + arr.push(...(item.children || [])); + return arr; + }, []); + if (hostContextVariables?.length) { + let hasContextVariables = false; + variableOptions = variableOptions.map((item: any) => { + if (item.label === '组件上下文' && !hasContextVariables) { + hasContextVariables = true; + item.children = item.children.concat(hostContextVariables); + } + return item; + }); + + if (!hasContextVariables) { + variableOptions = [ + { + label: '组件上下文', + children: hostContextVariables + }, + ...variableOptions + ]; + } + } } + const dataPropsAsOptions: VariableItem[] = + updateComponentContext(variableOptions); const variables: VariableItem[] = manager?.variableManager?.getVariableFormulaOptions() || []; diff --git a/packages/amis-editor/src/plugin/Form/ListSelect.tsx b/packages/amis-editor/src/plugin/Form/ListSelect.tsx index e97724ca8b6..a18193d6026 100644 --- a/packages/amis-editor/src/plugin/Form/ListSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ListSelect.tsx @@ -59,6 +59,8 @@ export class ListControlPlugin extends BasePlugin { panelTitle = '列表选择'; + panelJustify = true; + // 事件定义 events: RendererPluginEvent[] = [ { @@ -149,7 +151,6 @@ export class ListControlPlugin extends BasePlugin { ...(schema || {}), itemSchema: null }), - mode: 'vertical', useSelectMode: true, // 改用 Select 设置模式 visibleOn: 'this.options && this.options.length > 0' }) diff --git a/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx b/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx index 23d46a3b0c3..a75808cd114 100644 --- a/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx +++ b/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx @@ -113,7 +113,7 @@ export default class ExpressionFormulaControl extends React.Component< handleClearExpression(e: React.MouseEvent) { e.stopPropagation(); e.preventDefault(); - this.props?.onChange?.(''); + this.props?.onChange?.(undefined); } @autobind diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx index 4e6b80be1ce..f1e46c04286 100644 --- a/packages/amis-editor/src/tpl/common.tsx +++ b/packages/amis-editor/src/tpl/common.tsx @@ -170,6 +170,7 @@ setSchemaTpl('formItemInline', { label: '表单项内联', name: 'inline', visibleOn: 'data.mode != "inline"', + inputClassName: 'is-inline', pipeIn: defaultValue(false) // onChange: (value:any, origin:any, item:any, form:any) => form.getValueByName('size') === "full" && form.setValueByName('') }); From b8ad8f9e2f79019353495a48d5d6e1c506f346eb Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Fri, 24 Nov 2023 11:48:31 +0800 Subject: [PATCH 51/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E5=BC=B9=E7=AA=97=E5=9C=A8=E6=9F=90=E4=BA=9B=E6=83=85?= =?UTF-8?q?=E5=86=B5=E7=82=B9=E5=87=BB=E5=A4=96=E5=B1=82=E4=B8=8D=E5=85=B3?= =?UTF-8?q?=E9=97=AD=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/components/PopOver.tsx | 76 ++++++++++++++++++- 1 file changed, 75 insertions(+), 1 deletion(-) diff --git a/packages/amis-core/src/components/PopOver.tsx b/packages/amis-core/src/components/PopOver.tsx index 54482103ac4..6853de0c9bc 100644 --- a/packages/amis-core/src/components/PopOver.tsx +++ b/packages/amis-core/src/components/PopOver.tsx @@ -7,7 +7,7 @@ import React from 'react'; import {findDOMNode} from 'react-dom'; import {ClassNamesFn, themeable} from '../theme'; -import {camel, preventDefault} from '../utils'; +import {autobind, camel, preventDefault} from '../utils'; export interface Offset { x: number; @@ -54,6 +54,7 @@ export class PopOver extends React.PureComponent { parent: HTMLElement; wrapperRef: React.RefObject = React.createRef(); + isRootClosed = false; componentDidMount() { this.mayUpdateOffset(); @@ -68,6 +69,23 @@ export class PopOver extends React.PureComponent { capture: false }); } + + // 从弹窗中处理复制过来的，如果要修改，请同步修改 + // 因为 overlay 功能其实是用 postion: fixed 来实现的 + // 目的是加一个蒙层监听蒙层点击然后关闭弹窗。意图就是 closeOnOutside + // 但是如果上层有个 translateZ 之类的样式就会影响 fixed 的定位，导致功能失效 + // 所以这里兜底加了个 closeOnOutside 的功能 + document.body.addEventListener( + 'mousedown', + this.handleRootMouseDownCapture, + true + ); + document.body.addEventListener( + 'mouseup', + this.handleRootMouseUpCapture, + true + ); + document.body.addEventListener('mouseup', this.handleRootMouseUp); } componentDidUpdate() { @@ -80,6 +98,62 @@ export class PopOver extends React.PureComponent { if (this.wrapperRef && this.wrapperRef.current) { this.wrapperRef.current.removeEventListener('touchmove', preventDefault); } + + document.body.removeEventListener('mouseup', this.handleRootMouseUp); + document.body.removeEventListener( + 'mousedown', + this.handleRootMouseDownCapture, + true + ); + document.body.removeEventListener( + 'mouseup', + this.handleRootMouseUpCapture, + true + ); + } + + @autobind + handleRootMouseDownCapture(e: MouseEvent) { + const target = e.target as HTMLElement; + const {overlay: closeOnOutside, classPrefix: ns} = this.props; + const isLeftButton = + (e.button === 1 && window.event !== null) || e.button === 0; + + this.isRootClosed = !!( + isLeftButton && + closeOnOutside && + target && + this.wrapperRef.current && + ((!this.wrapperRef.current.contains(target) && + !target.closest('[role=dialog]')) || + (target.matches(`.${ns}Modal`) && target === this.wrapperRef.current)) + ); // 干脆过滤掉来自弹框里面的点击 + } + + @autobind + handleRootMouseUpCapture(e: MouseEvent) { + // mousedown 的时候不在弹窗里面，则不需要判断了 + if (!this.isRootClosed) { + return; + } + + // 再判断 mouseup 的时候是不是在弹窗里面 + this.handleRootMouseDownCapture(e); + } + + @autobind + handleRootMouseUp(e: MouseEvent) { + const {onHide} = this.props; + if (this.isRootClosed && !e.defaultPrevented) { + // 因为原来 overlay 是不会让别的部分还有点击事件的，所以这里要阻止默认事件 + // 参考：https://stackoverflow.com/questions/8643739/cancel-click-event-in-the-mouseup-event-handler + let captureClick = (e: Event) => { + e.stopPropagation(); + window.removeEventListener('click', captureClick, true); + }; + window.addEventListener('click', captureClick, true); + onHide?.(); + } } mayUpdateOffset() { From 2c110c964279e99d5f5b4d8e36c1ab06b5a579ea Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Fri, 24 Nov 2023 12:26:21 +0800 Subject: [PATCH 52/57] =?UTF-8?q?feat:=20Switch=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?onText=E5=92=8CoffText=E6=94=AF=E6=8C=81Schema=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20(#8816)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/switch.md | 51 +++++++++++++++++-- .../amis-editor/src/plugin/Form/Switch.tsx | 1 + .../__tests__/renderers/Form/switch.test.tsx | 48 +++++++++++++++++ packages/amis/src/renderers/Form/Switch.tsx | 37 ++++++++------ 4 files changed, 117 insertions(+), 20 deletions(-) diff --git a/docs/zh-CN/components/form/switch.md b/docs/zh-CN/components/form/switch.md index 629b8f26fa5..c549499162b 100755 --- a/docs/zh-CN/components/form/switch.md +++ b/docs/zh-CN/components/form/switch.md @@ -86,7 +86,7 @@ order: 51 ## 配置开启和关闭状态的文本 -> 1.1.5 版本之后支持 +> `1.1.5` 版本之后支持 ```schema: scope="body" { @@ -102,6 +102,47 @@ order: 51 } ``` +### 使用Schema配置文本 + +> `3.6.0` 版本之后支持 + +```schema: scope="body" +{ + "type": "form", + "body": [ + { + "name": "switch", + "type": "switch", + "onText": [ + { + "type": "icon", + "icon": "fa fa-plane", + "vendor": "", + "className": "mr-1" + }, + { + "type": "tpl", + "tpl": "飞行模式" + } + ], + "offText": [ + { + "type": "icon", + "icon": "fa fa-plane", + "vendor": "", + "className": "mr-1" + }, + { + "type": "tpl", + "tpl": "飞行模式" + } + ] + } + ] +} +``` + + ## 默认值 和其它表单项一样，如果要设置默认值，可以使用 value 属性 @@ -256,10 +297,10 @@ order: 51 | 属性名 | 类型 | 默认值 | 说明 | 版本 | | ---------- | --------------------------- | ------- | -------------------- | --- | | option | `string` | | 选项说明 | -| onText | `string / IconSchema` | | 开启时开关显示的内容 | -| offText | `string / IconSchema` | | 关闭时开关显示的内容 | -| trueValue | `boolean / string / number` | `true` | 标识真值 | -| falseValue | `boolean / string / number` | `false` | 标识假值 | +| onText | `string \| IconSchema \| SchemaCollection` | | 开启时开关显示的内容 | `3.6.0`支持Schema | +| offText | `string \| IconSchema \| SchemaCollection` | | 关闭时开关显示的内容 | `3.6.0`支持Schema | +| trueValue | `boolean \| string \| number` | `true` | 标识真值 | +| falseValue | `boolean \| string \| number` | `false` | 标识假值 | | size | `"sm" \| "md"` | `"md"` | 开关大小 | | loading | `boolean` | `false` | 是否处于加载状态 | `3.6.0` | diff --git a/packages/amis-editor/src/plugin/Form/Switch.tsx b/packages/amis-editor/src/plugin/Form/Switch.tsx index 188714b813f..6ffae58e7d2 100644 --- a/packages/amis-editor/src/plugin/Form/Switch.tsx +++ b/packages/amis-editor/src/plugin/Form/Switch.tsx @@ -84,6 +84,7 @@ export class SwitchControlPlugin extends BasePlugin { ]; panelJustify = true; + panelBodyCreator = (context: BaseEventContext) => getSchemaTpl('tabs', [ { diff --git a/packages/amis/__tests__/renderers/Form/switch.test.tsx b/packages/amis/__tests__/renderers/Form/switch.test.tsx index dc841a91017..dfc027d1bc1 100644 --- a/packages/amis/__tests__/renderers/Form/switch.test.tsx +++ b/packages/amis/__tests__/renderers/Form/switch.test.tsx @@ -110,3 +110,51 @@ test('Renderer:Switch with loading status', async () => { expect(loadingDom?.length).toEqual(2); }); + +test('Renderer:Switch onText & offText schema', async () => { + const {container} = render( + amisRender( + { + type: 'form', + body: [ + { + "name": "switch", + "type": "switch", + "onText": [ + { + "type": "icon", + "icon": "fa fa-plane", + "vendor": "", + "className": "mr-1" + }, + { + "type": "tpl", + "tpl": "飞行模式" + } + ], + "offText": [ + { + "type": "icon", + "icon": "fa fa-plane", + "vendor": "", + "className": "mr-1" + }, + { + "type": "tpl", + "tpl": "飞行模式" + } + ] + } + ], + actions: [] + }, + {}, + makeEnv() + ) + ); + + const text = container.querySelector('.cxd-Switch > span.text')!; + + /** offText的Schema包含了2个元素 */ + expect(text?.childNodes?.length).toEqual(2); +}); diff --git a/packages/amis/src/renderers/Form/Switch.tsx b/packages/amis/src/renderers/Form/Switch.tsx index d1692774dc8..43ee493d62c 100644 --- a/packages/amis/src/renderers/Form/Switch.tsx +++ b/packages/amis/src/renderers/Form/Switch.tsx @@ -8,7 +8,7 @@ import { import {Icon, Switch} from 'amis-ui'; import {autobind, isObject} from 'amis-core'; import {IconSchema} from '../Icon'; -import {FormBaseControlSchema} from '../../Schema'; +import {FormBaseControlSchema, SchemaCollection} from '../../Schema'; import {supportStatic} from './StaticHoc'; import type {SpinnerExtraProps} from 'amis-ui'; @@ -42,12 +42,12 @@ export interface SwitchControlSchema extends FormBaseControlSchema { /** * 开启时显示的内容 */ - onText?: string | IconSchema; + onText?: string | IconSchema | SchemaCollection; /** * 关闭时显示的内容 */ - offText?: string | IconSchema; + offText?: string | IconSchema | SchemaCollection; /** 开关尺寸 */ size?: 'sm' | 'md'; @@ -88,18 +88,25 @@ export default class SwitchControl extends React.Component { } getResult() { - const {classnames: cx, onText, offText} = this.props; - const on = isObject(onText) ? ( - - ) : ( - onText - ); - const off = isObject(offText) ? ( - - ) : ( - offText - ); - return {on, off}; + const {classnames: cx, render, onText, offText} = this.props; + let onComp = onText; + let offComp = offText; + + /** 兼容单独使用Icon的场景 */ + if (isObject(onText) && onText.icon && !onText.type) { + onComp = ; + } else if (onText != null && typeof onText !== 'string') { + /** 兼容原来的DOM接口，string类型直接渲染 */ + onComp = render('switch-on-text', onText); + } + + if (isObject(offText) && offText.icon && !offText.type) { + offComp = ; + } else if (offText != null && typeof offText !== 'string') { + offComp = render('switch-off-text', offText); + } + + return {on: onComp, off: offComp}; } renderBody(children: any) { From 6cb78fe5ad5ee4937eaa36adb3733f1391a47ea5 Mon Sep 17 00:00:00 2001 From: wutong25 Date: Fri, 24 Nov 2023 14:55:40 +0800 Subject: [PATCH 53/57] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=AE=BE=E8=AE=A1=E5=99=A8=E9=87=8D=E5=A4=8D=E6=89=A7?= =?UTF-8?q?=E8=A1=8ConChange=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/renderers/Form.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx index 5773221b4e3..78dce7bb0f1 100644 --- a/packages/amis-core/src/renderers/Form.tsx +++ b/packages/amis-core/src/renderers/Form.tsx @@ -530,7 +530,7 @@ export default class Form extends React.Component { reaction( () => store.initedAt, () => { - store.inited && this.emitChange(!!this.props.submitOnChange); + store.inited && this.emitChange(!!this.props.submitOnChange, true); } ) ); @@ -1012,21 +1012,21 @@ export default class Form extends React.Component { return dispatchEvent(type, data); } - async emitChange(submit: boolean) { + async emitChange(submit: boolean, skipIfNothingChanges: boolean = false) { const {onChange, store, submitOnChange, dispatchEvent, data} = this.props; if (!isAlive(store)) { return; } + const diff = difference(store.data, store.pristine); + if (skipIfNothingChanges && !Object.keys(diff).length) { + return; + } + // 提前准备好 onChange 的参数。 // 因为 store.data 会在 await 期间被 WithStore.componentDidUpdate 中的 store.initData 改变。导致数据丢失 - const changeProps = [ - store.data, - difference(store.data, store.pristine), - this.props - ]; - + const changeProps = [store.data, diff, this.props]; const dispatcher = await dispatchEvent( 'change', createObject(data, store.data) From e7ce0c993876757783b137fefea31f5f74abfce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=88=E7=91=9E=E6=9D=B0?= <34231082+pianruijie@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:01:02 +0800 Subject: [PATCH 54/57] =?UTF-8?q?fix:=E5=85=BC=E5=AE=B9schema=E4=B8=BA?= =?UTF-8?q?=E7=A9=BA=E7=9A=84=E6=83=85=E5=86=B5=20(#8888)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor/src/plugin/Form/Combo.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/amis-editor/src/plugin/Form/Combo.tsx b/packages/amis-editor/src/plugin/Form/Combo.tsx index 36d44799d79..e6f4160d7dc 100644 --- a/packages/amis-editor/src/plugin/Form/Combo.tsx +++ b/packages/amis-editor/src/plugin/Form/Combo.tsx @@ -703,8 +703,7 @@ export class ComboControlPlugin extends BasePlugin { while (pool.length) { const current = pool.shift() as EditorNodeType; const schema = current.schema; - - if (schema.name) { + if (schema?.name) { itemsSchema.properties[schema.name] = await current.info.plugin.buildDataSchemas?.( current, From ce53af623ad1ae69c689a5ca6b3989806704b2b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E4=B8=B9?= <365533093@qq.com> Date: Fri, 24 Nov 2023 17:24:14 +0800 Subject: [PATCH 55/57] =?UTF-8?q?docs(amis):=20=E8=A1=A5=E5=85=85custom?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8vue=E8=AF=AD=E6=B3=95?= =?UTF-8?q?=E7=9A=84=E8=AF=B4=E6=98=8E=20(#8887)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/custom.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/zh-CN/components/custom.md b/docs/zh-CN/components/custom.md index 21208ee6253..aec85fac27d 100644 --- a/docs/zh-CN/components/custom.md +++ b/docs/zh-CN/components/custom.md @@ -101,7 +101,7 @@ onUnmount 是在组件销毁的时候执行，可以在这里做资源清理， ### Vue.js -因为 onMount 拿到的 dom 就是标准的 dom，所以可以执行任意 JavaScript 代码，包括 jQuery 等，下面的例子演示了如何使用 vue 实现自定义组件： +因为 onMount 拿到的 dom 就是标准的 dom，所以可以执行任意 JavaScript 代码，包括 jQuery 等，下面的例子演示了如何使用 vue 2.0 实现自定义组件： ```javascript { @@ -139,6 +139,9 @@ onUnmount 是在组件销毁的时候执行，可以在这里做资源清理， } } ``` +【温馨提示】 +custom 组件中使用 vue2 语法，请先引入vue.js（umd 或 global 模块，比如：https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js） 。 +同理，使用 vue3 语法请先引入 vue3 对应的 umd 或 global 模块，比如：https://unpkg.com/vue@3/dist/vue.global.js 。 ### props From 9187f8b2e977191ceda5307e2c0e0c7da82a786d Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Fri, 24 Nov 2023 17:19:45 +0800 Subject: [PATCH 56/57] =?UTF-8?q?fix(amis-editor):=20=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=8B=A6=E6=88=AA=E4=B8=8D=E5=B1=95=E7=A4=BA?= =?UTF-8?q?schema?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/src/component/factory.tsx | 4 +--- packages/amis/src/renderers/Form/StaticHoc.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/amis-editor-core/src/component/factory.tsx b/packages/amis-editor-core/src/component/factory.tsx index becb7a66765..0118361fd2f 100644 --- a/packages/amis-editor-core/src/component/factory.tsx +++ b/packages/amis-editor-core/src/component/factory.tsx @@ -187,9 +187,7 @@ export function makeWrapper( value={this.editorNode || (this.context as any)} > { return (
diff --git a/packages/amis/src/renderers/Form/StaticHoc.tsx b/packages/amis/src/renderers/Form/StaticHoc.tsx index 5a0f6dccb3c..5222e9c4efd 100644 --- a/packages/amis/src/renderers/Form/StaticHoc.tsx +++ b/packages/amis/src/renderers/Form/StaticHoc.tsx @@ -135,7 +135,7 @@ export function supportStatic() { return ( { return (
From 5fe6a2e0bfd2b2c3bd727e529d4c558e86532876 Mon Sep 17 00:00:00 2001 From: LTtwinkle <39524810+LTtwinkle@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:13:01 +0800 Subject: [PATCH 57/57] =?UTF-8?q?feat:=20=E6=A0=91=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96=20(#7946)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 树组件优化 * pref: option类型组件统一新增deferField字段 * pref: 树组件优化问题修复 * fix: 树组件优化评审问题修复 --------- Co-authored-by: zhouqiqi01 --- docs/zh-CN/components/form/input-tree.md | 58 ++++++-- docs/zh-CN/components/form/options.md | 1 + docs/zh-CN/components/form/treeselect.md | 16 ++- packages/amis-core/src/renderers/Options.tsx | 11 +- .../amis-editor/src/plugin/Form/InputTree.tsx | 131 +++++++++++++++++- .../src/plugin/Form/TreeSelect.tsx | 38 ++++- packages/amis-editor/src/tpl/common.tsx | 13 ++ .../src/components/AssociatedSelection.tsx | 13 +- .../src/components/ChainedSelection.tsx | 9 +- packages/amis-ui/src/components/Selection.tsx | 1 + .../amis-ui/src/components/TabsTransfer.tsx | 4 +- packages/amis-ui/src/components/Transfer.tsx | 5 +- packages/amis-ui/src/components/Tree.tsx | 29 ++-- .../amis-ui/src/components/TreeSelection.tsx | 22 +-- .../amis-ui/src/components/UserSelect.tsx | 9 +- packages/amis-ui/src/locale/de-DE.ts | 2 + packages/amis-ui/src/locale/en-US.ts | 1 + packages/amis-ui/src/locale/zh-CN.ts | 1 + .../amis/src/renderers/Form/InputTree.tsx | 104 +++++++++++++- .../src/renderers/Form/TabsTransferPicker.tsx | 2 + packages/amis/src/renderers/Form/Transfer.tsx | 5 +- .../src/renderers/Form/TransferPicker.tsx | 2 + .../amis/src/renderers/Form/TreeSelect.tsx | 74 +++++++++- 23 files changed, 477 insertions(+), 74 deletions(-) diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md index 9bc6272d52a..917f7924f29 100755 --- a/docs/zh-CN/components/form/input-tree.md +++ b/docs/zh-CN/components/form/input-tree.md @@ -1047,6 +1047,43 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A } ``` +### searchApi + +> `3.6.0` 及以上版本 + +**发送** + +默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。 + +**响应** + +格式要求如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "options": [ + { + "label": "描述", + "value": "值" // , + // "children": [] // 可以嵌套 + }, + + { + "label": "描述2", + "value": "值2" + } + ], + + "value": "值" // 默认值，可以获取列表的同时设置默认值。 + } +} +``` + +适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。未配置 searchApi 是前端检索，配置之后就只能通过后端检索。 + ## 属性表 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 @@ -1061,6 +1098,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A | labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | | valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | | iconField | `string` | `"icon"` | 图标值字段 | +| deferField | `string` | `"defer"` | 懒加载字段 | `3.6.0` | | joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | | extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | | creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | @@ -1106,7 +1144,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A | 事件名称 | 事件参数 | 说明 | | ------------ | ----------------------------------------------------------------------------------------------- | ---------------------------- | -| change | `[name]: string` 组件的值 | 选中值变化时触发 | +| change | `items: object[]`选项集合（< 3.6.0 及以下版本 不支持该参数）
`[name]: string` 组件的值 | 选中值变化时触发 | | add | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）
`[name]: object` 新增的节点信息 | 新增节点提交时触发 | | edit | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）
`[name]: object` 编辑的节点信息 | 编辑节点提交时触发 | | delete | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）
`[name]: object` 删除的节点信息 | 删除节点提交时触发 | @@ -1116,10 +1154,14 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A 当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 -| 动作名称 | 动作配置 | 说明 | -| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- | -| expand | openLevel: `number` | 展开指定层级 | -| collapse | - | 收起 | -| clear | - | 清空 | -| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 | -| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 | +| 动作名称 | 动作配置 | 说明 | +| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- | +| expand | openLevel: `number` | 展开指定层级 | +| collapse | - | 收起 | +| add | `item: Option, parentValue?: any` | item 新增的数据项；parentValue 父级数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） | +| edit | `item: Option, originValue: any` | item 编辑后的数据项；originValue 编辑前数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） | +| delete | value: ` any` | 删除数据项的 value，（如果配置了 valueField，以 valueField 的字段值为准） | +| reload | - | 刷新 | +| clear | - | 清空 | +| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 | +| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 | diff --git a/docs/zh-CN/components/form/options.md b/docs/zh-CN/components/form/options.md index 48b3bae3bf4..13e86c266e8 100755 --- a/docs/zh-CN/components/form/options.md +++ b/docs/zh-CN/components/form/options.md @@ -1593,6 +1593,7 @@ order: 2 | multiple | `boolean` | `false` | 是否支持多选 | | labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 | | valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 | +| deferField | `string` | `"defer"` | 标识选项中哪个字段是`defer`值 | | joinValues | `boolean` | `true` | 是否拼接`value`值 | | extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 | | itemHeight | `number` | `32` | 每个选项的高度，用于虚拟渲染 | diff --git a/docs/zh-CN/components/form/treeselect.md b/docs/zh-CN/components/form/treeselect.md index 8ef7f3b7eae..f3b49666c88 100755 --- a/docs/zh-CN/components/form/treeselect.md +++ b/docs/zh-CN/components/form/treeselect.md @@ -411,7 +411,7 @@ order: 60 | 事件名称 | 事件参数 | 说明 | | ------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- | -| change | `[name]: string` 组件的值 | 选中值变化时触发 | +| change | `[name]: string` 组件的值
`items: object[]`选项集合（< 3.6.0 及以下版本 不支持该参数） | 选中值变化时触发 | | blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 | | focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 | | add | `[name]: object` 新增的节点信息
``items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 | @@ -423,8 +423,12 @@ order: 60 当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 -| 动作名称 | 动作配置 | 说明 | -| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- | -| clear | - | 清空 | -| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 | -| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 | +| 动作名称 | 动作配置 | 说明 | +| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- | +| add | `item: Option, parentValue?: any` | item 新增的数据项；parentValue 父级数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） | +| edit | `item: Option, originValue: any` | item 编辑后的数据项；originValue 编辑前数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） | +| delete | value: ` any` | 删除数据项的 value，（如果配置了 valueField，以 valueField 的字段值为准） | +| reload | - | 刷新 | +| clear | - | 清空 | +| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 | +| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 | diff --git a/packages/amis-core/src/renderers/Options.tsx b/packages/amis-core/src/renderers/Options.tsx index c037608eb31..8ac22d126a7 100644 --- a/packages/amis-core/src/renderers/Options.tsx +++ b/packages/amis-core/src/renderers/Options.tsx @@ -127,6 +127,11 @@ export interface FormOptionsControl extends FormBaseControl { */ resetValue?: string; + /** + * 懒加载字段 + */ + deferField?: string; + /** * 延时加载的 API，当选项中有 defer: true 的选项时，点开会通过此接口扩充。 */ @@ -960,6 +965,7 @@ export function registerOptionsControl(config: OptionsConfig) { source, data, valueField, + deferField, formItem: model, createBtnLabel, env, @@ -1072,7 +1078,10 @@ export function registerOptionsControl(config: OptionsConfig) { } // 如果是懒加载的，只懒加载当前节点。 - if (parent?.defer) { + if ( + (parent?.hasOwnProperty(deferField) && parent[deferField]) || + parent?.defer + ) { await this.deferLoad(parent); } else if (source && addApi) { // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了 diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx index 74b3b267d80..968ea76d11c 100644 --- a/packages/amis-editor/src/plugin/Form/InputTree.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx @@ -18,6 +18,109 @@ import {ValidatorTag} from '../../validator'; import {resolveOptionType} from '../../util'; import type {Schema} from 'amis'; +// 树组件公共动作 +export const TreeCommonAction: RendererPluginAction[] = [ + { + actionType: 'add', + actionLabel: '新增', + description: '新增数据项', + innerArgs: ['item', 'parentValue'], + schema: getArgsWrapper({ + type: 'container', + body: [ + { + type: 'input-kv', + label: '数据项', + name: 'item', + mode: 'horizontal', + inputClassName: 'ml-2', + size: 'lg', + required: true, + draggable: false, + valueType: 'ae-formulaControl', + keyPlaceholder: 'Option中属性的Key', + value: { + label: '', + value: '' + } + }, + getSchemaTpl('formulaControl', { + label: '父级数据项的值', + name: 'parentValue', + mode: 'horizontal', + inputClassName: 'ml-2', + size: 'lg', + variables: '${variables}', + inputMode: 'input-group', + placeholder: '请输入父级数据项 valueField 的值' + }) + ] + }) + }, + { + actionType: 'edit', + actionLabel: '编辑', + description: '编辑数据项', + innerArgs: ['item', 'originValue'], + schema: getArgsWrapper({ + type: 'container', + body: [ + { + type: 'input-kv', + label: '数据项', + name: 'item', + mode: 'horizontal', + inputClassName: 'ml-2', + size: 'lg', + required: true, + draggable: false, + valueType: 'ae-formulaControl', + keyPlaceholder: 'Option中属性的Key', + value: { + label: '', + value: '' + } + }, + getSchemaTpl('formulaControl', { + label: '数据编辑项的值', + name: 'originValue', + mode: 'horizontal', + inputClassName: 'ml-2', + required: true, + size: 'lg', + variables: '${variables}', + inputMode: 'input-group', + placeholder: '请输入数据项编辑前 valueField 的值' + }) + ] + }) + }, + { + actionType: 'delete', + actionLabel: '删除', + description: '删除数据项', + innerArgs: ['value'], + schema: getArgsWrapper([ + getSchemaTpl('formulaControl', { + label: '数据删除项的值', + name: 'value', + mode: 'horizontal', + inputClassName: 'ml-2', + required: true, + size: 'lg', + variables: '${variables}', + inputMode: 'input-group', + placeholder: '请输入删除项 valueField 的值' + }) + ]) + }, + { + actionType: 'reload', + actionLabel: '刷新', + description: '刷新数据' + } +]; + export class TreeControlPlugin extends BasePlugin { static id = 'TreeControlPlugin'; // 关联渲染器名字 @@ -25,8 +128,9 @@ export class TreeControlPlugin extends BasePlugin { $schema = '/schemas/TreeControlSchema.json'; // 组件名称 - name = '树选择框'; + name = '树组件'; isBaseComponent = true; + disabledRendererPlugin = true; icon = 'fa fa-list-alt'; pluginIcon = 'input-tree-plugin'; description = '树型结构选择，支持 [内嵌模式] 与 [浮层模式] 的外观切换'; @@ -36,7 +140,7 @@ export class TreeControlPlugin extends BasePlugin { tags = ['表单项']; scaffold = { type: 'input-tree', - label: '树选择框', + label: '树组件', name: 'tree', options: [ { @@ -68,7 +172,7 @@ export class TreeControlPlugin extends BasePlugin { body: [ { ...this.scaffold, - label: '树选择框 - 内嵌模式', + label: '树组件 - 内嵌模式', mode: 'normal' } ] @@ -95,6 +199,10 @@ export class TreeControlPlugin extends BasePlugin { value: { type: 'string', title: '变化的节点值' + }, + items: { + type: 'array', + title: '选项集合' } } } @@ -238,6 +346,8 @@ export class TreeControlPlugin extends BasePlugin { actionLabel: '收起', description: '收起树节点' }, + /** 新增、编辑、删除、刷新 */ + ...TreeCommonAction, { actionType: 'clear', actionLabel: '清空', @@ -368,8 +478,13 @@ export class TreeControlPlugin extends BasePlugin { }), getSchemaTpl('switch', { label: '可检索', - name: 'searchable', - visibleOn: 'data.type === "tree-select"' + name: 'searchable' + }), + getSchemaTpl('apiControl', { + name: 'searchApi', + label: '选项搜索接口', + labelClassName: 'none', + visibleOn: 'data.type === "input-tree" && data.searchable' }), getSchemaTpl('multiple', { body: [ @@ -444,6 +559,12 @@ export class TreeControlPlugin extends BasePlugin { getSchemaTpl('optionsMenuTpl', { manager: this.manager }), + getSchemaTpl('apiControl', { + name: 'deferApi', + label: '懒加载接口', + labelClassName: 'none' + }), + getSchemaTpl('deferField'), getSchemaTpl( 'loadingConfig', { diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx index 5e0b8d0605a..bb31049d5b1 100644 --- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx @@ -8,10 +8,14 @@ import {defaultValue, getSchemaTpl} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BaseEventContext, BasePlugin} from 'amis-editor-core'; import cloneDeep from 'lodash/cloneDeep'; -import {getEventControlConfig} from '../../renderer/event-control/helper'; +import { + getArgsWrapper, + getEventControlConfig +} from '../../renderer/event-control/helper'; import {ValidatorTag} from '../../validator'; import {tipedLabel} from 'amis-editor-core'; import {resolveOptionType} from '../../util'; +import {TreeCommonAction} from './InputTree'; export class TreeSelectControlPlugin extends BasePlugin { static id = 'TreeSelectControlPlugin'; @@ -20,17 +24,18 @@ export class TreeSelectControlPlugin extends BasePlugin { $schema = '/schemas/TreeSelectControlSchema.json'; // 组件名称 - name = '树选择框'; + name = '树组件'; isBaseComponent = true; - disabledRendererPlugin = true; icon = 'fa fa-list-alt'; pluginIcon = 'tree-select-plugin'; description = '树型结构选择，支持 [内嵌模式] 与 [浮层模式] 的外观切换'; + searchKeywords = + 'tree、树下拉、树下拉框、tree-select、树形选择框、树形选择器'; docLink = '/amis/zh-CN/components/form/treeselect'; tags = ['表单项']; scaffold = { type: 'tree-select', - label: '树下拉框', + label: '树组件', name: 'tree', clearable: false, options: [ @@ -61,7 +66,9 @@ export class TreeSelectControlPlugin extends BasePlugin { mode: 'horizontal', wrapWithPanel: false, body: { - ...this.scaffold + ...this.scaffold, + label: '树组件 - 浮层模式', + mode: 'normal' } }; @@ -86,6 +93,10 @@ export class TreeSelectControlPlugin extends BasePlugin { value: { type: 'string', title: '选中的节点值' + }, + items: { + type: 'array', + title: '选项列表' } } } @@ -235,6 +246,8 @@ export class TreeSelectControlPlugin extends BasePlugin { // 动作定义 actions: RendererPluginAction[] = [ + /** 新增、编辑、删除、刷新 */ + ...TreeCommonAction, { actionType: 'clear', actionLabel: '清空', @@ -368,8 +381,13 @@ export class TreeSelectControlPlugin extends BasePlugin { }), getSchemaTpl('switch', { label: '可检索', - name: 'searchable', - visibleOn: 'data.type === "tree-select"' + name: 'searchable' + }), + getSchemaTpl('apiControl', { + name: 'searchApi', + label: '选项搜索接口', + labelClassName: 'none', + visibleOn: 'data.type === "input-tree" && data.searchable' }), getSchemaTpl('multiple', { body: [ @@ -445,6 +463,12 @@ export class TreeSelectControlPlugin extends BasePlugin { getSchemaTpl('optionsMenuTpl', { manager: this.manager }), + getSchemaTpl('apiControl', { + name: 'deferApi', + label: '懒加载接口', + labelClassName: 'none' + }), + getSchemaTpl('deferField'), getSchemaTpl( 'loadingConfig', { diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx index f1e46c04286..c2a459d1183 100644 --- a/packages/amis-editor/src/tpl/common.tsx +++ b/packages/amis-editor/src/tpl/common.tsx @@ -1738,3 +1738,16 @@ setSchemaTpl('primaryField', { return value; } }); + +/** + * 是否为懒加载节点字段 + */ +setSchemaTpl('deferField', { + label: tipedLabel( + '懒加载字段', + '是否为懒加载节点的字段名称，默认为defer，可以用该配置项自定义字段名称' + ), + name: 'deferField', + type: 'input-text', + placeholder: '自定义开启懒加载的字段' +}); diff --git a/packages/amis-ui/src/components/AssociatedSelection.tsx b/packages/amis-ui/src/components/AssociatedSelection.tsx index f43c7aaccae..13571251fa1 100644 --- a/packages/amis-ui/src/components/AssociatedSelection.tsx +++ b/packages/amis-ui/src/components/AssociatedSelection.tsx @@ -52,7 +52,7 @@ export class AssociatedSelection extends BaseSelection< componentDidMount() { const leftValue = this.state.leftValue; - const {options, onDeferLoad} = this.props; + const {options, onDeferLoad, deferField = 'defer'} = this.props; if (leftValue) { const selectdOption = BaseSelection.resolveSelected( @@ -61,7 +61,7 @@ export class AssociatedSelection extends BaseSelection< (option: Option) => option.ref ); - if (selectdOption && onDeferLoad && selectdOption.defer) { + if (selectdOption && onDeferLoad && selectdOption[deferField]) { onDeferLoad(selectdOption); } } @@ -74,7 +74,7 @@ export class AssociatedSelection extends BaseSelection< @autobind handleLeftSelect(value: Option) { - const {options, onDeferLoad} = this.props; + const {options, onDeferLoad, deferField = 'defer'} = this.props; this.setState({leftValue: value}); const selectdOption = BaseSelection.resolveSelected( @@ -83,7 +83,7 @@ export class AssociatedSelection extends BaseSelection< (option: Option) => option.ref ); - if (selectdOption && onDeferLoad && selectdOption.defer) { + if (selectdOption && onDeferLoad && selectdOption[deferField]) { onDeferLoad(selectdOption); } } @@ -127,7 +127,8 @@ export class AssociatedSelection extends BaseSelection< itemHeight, loadingConfig, checkAll, - checkAllLabel + checkAllLabel, + deferField = 'defer' } = this.props; const selectdOption = BaseSelection.resolveSelected( @@ -169,7 +170,7 @@ export class AssociatedSelection extends BaseSelection<
{this.state.leftValue ? ( selectdOption ? ( - selectdOption.defer && !selectdOption.loaded ? ( + selectdOption[deferField] && !selectdOption.loaded ? (
onDeferLoad(option) : undefined + option[deferField] && onDeferLoad ? () => onDeferLoad(option) : undefined ); } @@ -129,11 +129,12 @@ export class ChainedSelection extends BaseSelection< itemRender, multiple, labelField, + deferField = 'defer', loadingConfig } = this.props; const valueArray = this.valueArray; - if (Array.isArray(option.children) || option.defer) { + if (Array.isArray(option.children) || option[deferField]) { return (
- {option.defer && option.loading ? ( + {option[deferField] && option.loading ? ( ) : null}
diff --git a/packages/amis-ui/src/components/Selection.tsx b/packages/amis-ui/src/components/Selection.tsx index b8b6e4753b8..485b1f6062f 100644 --- a/packages/amis-ui/src/components/Selection.tsx +++ b/packages/amis-ui/src/components/Selection.tsx @@ -32,6 +32,7 @@ export interface BaseSelectionProps extends ThemeProps, LocaleProps { clearable?: boolean; labelField?: string; valueField?: string; + deferField?: string; onChange?: (value: Array | any) => void; onDeferLoad?: (option: Option) => void; onLeftDeferLoad?: (option: Option, leftOptions: Option) => void; diff --git a/packages/amis-ui/src/components/TabsTransfer.tsx b/packages/amis-ui/src/components/TabsTransfer.tsx index 964d29e2ba5..a6f93b50cb2 100644 --- a/packages/amis-ui/src/components/TabsTransfer.tsx +++ b/packages/amis-ui/src/components/TabsTransfer.tsx @@ -350,7 +350,8 @@ export class TabsTransfer extends React.Component< onlyChildren, loadingConfig, valueField = 'value', - labelField = 'label' + labelField = 'label', + deferField = 'defer' } = this.props; const selectMode = option.selectMode || this.props.selectMode; @@ -453,6 +454,7 @@ export class TabsTransfer extends React.Component< virtualThreshold={virtualThreshold} valueField={valueField} labelField={labelField} + deferField={deferField} /> ) : ( option.deferApi || option.defer + (option: Option) => + option.deferApi || option[(props.deferField as string) || 'defer'] ); // 计算结果的selectMode @@ -751,6 +752,7 @@ export class Transfer< noResultsText, labelField, valueField = 'value', + deferField = 'defer', virtualThreshold, itemHeight, virtualListHeight, @@ -839,6 +841,7 @@ export class Transfer< multiple={multiple} labelField={labelField} valueField={valueField} + deferField={deferField} virtualThreshold={virtualThreshold} itemHeight={itemHeight} virtualListHeight={virtualListHeight} diff --git a/packages/amis-ui/src/components/Tree.tsx b/packages/amis-ui/src/components/Tree.tsx index 047bf6c938d..5b158829332 100644 --- a/packages/amis-ui/src/components/Tree.tsx +++ b/packages/amis-ui/src/components/Tree.tsx @@ -78,6 +78,7 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps, SpinnerExtraProps { labelField: string; valueField: string; iconField: string; + deferField: string; unfoldedField: string; foldedField: string; disabledField: string; @@ -186,6 +187,7 @@ export class TreeSelector extends React.Component< labelField: 'label', valueField: 'value', iconField: 'icon', + deferField: 'defer', unfoldedField: 'unfolded', foldedField: 'foled', disabledField: 'disabled', @@ -319,7 +321,7 @@ export class TreeSelector extends React.Component< // 初始化树节点的展开状态 let unfolded = this.unfolded; - const {foldedField, unfoldedField} = this.props; + const {deferField, foldedField, unfoldedField} = this.props; eachTree(props.options, (node: Option, index, level) => { if (unfolded.has(node) && !initFoldedLevel) { @@ -330,7 +332,7 @@ export class TreeSelector extends React.Component< let ret: any = true; if ( - node.defer && + node[deferField] && node.loaded && !initFoldedLevel && unfoldedField && @@ -362,14 +364,14 @@ export class TreeSelector extends React.Component< @autobind toggleUnfolded(node: any) { const unfolded = this.unfolded; - const {onDeferLoad, unfoldedField} = this.props; + const {deferField, onDeferLoad, unfoldedField} = this.props; - if (node.defer && !node.loaded) { + if (node[deferField] && !node.loaded) { onDeferLoad?.(node); return; } // ！ hack: 在node上直接添加属性，options 在更新的时候旧的字段会保留 - if (node.defer && node.loaded) { + if (node[deferField] && node.loaded) { node[unfoldedField] = !unfolded.get(node); } @@ -452,11 +454,17 @@ export class TreeSelector extends React.Component< @autobind handleSelect(node: any, value?: any) { - const {joinValues, valueField, onChange, enableNodePath, onlyLeaf} = - this.props; + const { + joinValues, + valueField, + deferField, + onChange, + enableNodePath, + onlyLeaf + } = this.props; if (node[valueField as string] === undefined) { - if (node.defer && !node.loaded) { + if (node[deferField] && !node.loaded) { this.toggleUnfolded(node); } return; @@ -1103,6 +1111,7 @@ export class TreeSelector extends React.Component< multiple, labelField, iconField, + deferField, cascade, classnames: cx, highlightTxt, @@ -1201,7 +1210,7 @@ export class TreeSelector extends React.Component< spinnerClassName={cx('Tree-spinner')} loadingConfig={loadingConfig} /> - ) : !isLeaf || (item.defer && !item.loaded) ? ( + ) : !isLeaf || (item[deferField] && !item.loaded) ? (
this.toggleUnfolded(item)} className={cx('Tree-itemArrow', { @@ -1273,7 +1282,7 @@ export class TreeSelector extends React.Component< {!disabled && !isAdding && !isEditing && - !(item.defer && !item.loaded) ? ( + !(item[deferField] && !item.loaded) ? (
{creatable && hasAbility(item, 'creatable') ? ( onDeferLoad(option) : undefined + option[deferField] && onDeferLoad ? () => onDeferLoad(option) : undefined ); } @@ -177,7 +178,8 @@ export class TreeSelection extends BaseSelection< itemClassName, itemRender, multiple, - loadingConfig + loadingConfig, + deferField = 'defer' } = this.props; const id = indexes.join('-'); const valueArray = this.valueArray; @@ -219,7 +221,7 @@ export class TreeSelection extends BaseSelection< key={index} className={cx( 'TreeSelection-item', - disabled || option.disabled || (option.defer && option.loading) + disabled || option.disabled || (option[deferField] && option.loading) ? 'is-disabled' : '', expaned ? 'is-expanded' : '' @@ -234,7 +236,7 @@ export class TreeSelection extends BaseSelection< )} onClick={() => this.toggleOption(option)} > - {hasChildren || option.defer ? ( + {hasChildren || option[deferField] ? ( ) => { e.stopPropagation(); @@ -246,11 +248,11 @@ export class TreeSelection extends BaseSelection< ) : null} - {option.defer && option.loading ? ( + {option[deferField] && option.loading ? ( ) : null} - {multiple && (!option.defer || option.loaded) ? ( + {multiple && (!option[deferField] || option.loaded) ? ( - {option.defer && option.loading ? ( + {option[deferField] && option.loading ? ( ) : null}
diff --git a/packages/amis-ui/src/components/UserSelect.tsx b/packages/amis-ui/src/components/UserSelect.tsx index ad2240ce157..32fe0f57f91 100644 --- a/packages/amis-ui/src/components/UserSelect.tsx +++ b/packages/amis-ui/src/components/UserSelect.tsx @@ -32,6 +32,7 @@ export interface UserSelectProps selection?: Array