From 2521f87fc324c6693672c15aada20e844722185c Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Fri, 17 Jun 2022 14:30:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20JSON=E5=B1=95=E7=A4=BA=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=AE=BE=E7=BD=AE=E6=9C=80=E5=A4=A7=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E9=95=BF=E5=BA=A6;=20fix:=20Debug=E9=9D=A2=E6=9D=BF=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=20(#4632)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/json.md | 42 +++++++++++++++----- packages/amis-core/src/utils/debug.tsx | 8 ++++ packages/amis-ui/scss/components/_debug.scss | 4 ++ packages/amis/src/renderers/Json.tsx | 12 +++++- 4 files changed, 53 insertions(+), 13 deletions(-) diff --git a/docs/zh-CN/components/json.md b/docs/zh-CN/components/json.md index 86e88ef92..eec6505e2 100755 --- a/docs/zh-CN/components/json.md +++ b/docs/zh-CN/components/json.md @@ -233,16 +233,36 @@ List 的内容、Card 卡片的内容配置同上 } ``` +## 文本过长自动处理 + +> 2.0.0 及以上版本 + +设置`ellipsisThreshold`可以设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串。 + +```schema +{ + "type": "page", + "body": { + "type": "json", + "ellipsisThreshold": 80, + "value": { + "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + } + } +} +``` + ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ---------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ | -| type | `string` | | 如果在 Table、Card 和 List 中，为`"json"`；在 Form 中用作静态展示，为`"static-json"` | -| className | `string` | | 外层 CSS 类名 | -| value | `object`/`string` | | json 值，如果是 string 会自动 parse | -| source | `string` | `''` | 通过数据映射获取数据链中的值 | -| placeholder | `string` | `-` | 占位文本 | -| levelExpand | `number` | `1` | 默认展开的层级 | -| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` | -| mutable | `boolean` | `false` | 是否可修改 | -| displayDataTypes | `boolean` | `false` | 是否显示数据类型 | +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"json"`；在 Form 中用作静态展示，为`"static-json"` | +| className | `string` | | 外层 CSS 类名 | +| value | `object`/`string` | | json 值，如果是 string 会自动 parse | +| source | `string` | `''` | 通过数据映射获取数据链中的值 | +| placeholder | `string` | `-` | 占位文本 | +| levelExpand | `number` | `1` | 默认展开的层级 | +| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` | +| mutable | `boolean` | `false` | 是否可修改 | +| displayDataTypes | `boolean` | `false` | 是否显示数据类型 | +| ellipsisThreshold | `number` | `false` | 设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串 | diff --git a/packages/amis-core/src/utils/debug.tsx b/packages/amis-core/src/utils/debug.tsx index cc7f5de9a..4a95b687d 100644 --- a/packages/amis-core/src/utils/debug.tsx +++ b/packages/amis-core/src/utils/debug.tsx @@ -53,6 +53,11 @@ class AMISDebugStore { * 当前选中的组件节点 id */ @observable activeId: string; + + /** + * 字段值文本最大展示长度 + */ + @observable ellipsisThreshold: number; } const store = new AMISDebugStore(); @@ -67,6 +72,8 @@ const ComponentInfo = {} as {[propName: string]: ComponentInspect}; const LogView = observer(({store}: {store: AMISDebugStore}) => { const logs = store.logs; + const ellipsisThreshold = store.ellipsisThreshold ?? 50; + return ( <> {logs.map((log, index) => { @@ -83,6 +90,7 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => { collapsed={true} enableClipboard={false} displayDataTypes={false} + collapseStringsAfterLength={ellipsisThreshold} iconStyle="square" /> ) : null} diff --git a/packages/amis-ui/scss/components/_debug.scss b/packages/amis-ui/scss/components/_debug.scss index ddc70318a..3a7894f63 100644 --- a/packages/amis-ui/scss/components/_debug.scss +++ b/packages/amis-ui/scss/components/_debug.scss @@ -167,4 +167,8 @@ &-inspect { padding: var(--gap-sm); } + + &-logLine { + overflow-x: hidden; + } } diff --git a/packages/amis/src/renderers/Json.tsx b/packages/amis/src/renderers/Json.tsx index fcf9bb2af..c5304af6f 100644 --- a/packages/amis/src/renderers/Json.tsx +++ b/packages/amis/src/renderers/Json.tsx @@ -54,6 +54,11 @@ export interface JsonSchema extends BaseSchema { * 是否为键排序 */ sortKeys?: boolean; + + /** + * 设置字符串的最大展示长度，超出长度阈值的字符串将被截断，点击value可切换字符串展示方式，默认为false + */ + ellipsisThreshold?: number | false; } export interface JSONProps extends RendererProps, JsonSchema { @@ -74,7 +79,8 @@ export class JSONField extends React.Component { enableClipboard: false, iconStyle: 'square', quotesOnKeys: true, - sortKeys: false + sortKeys: false, + ellipsisThreshold: false }; @autobind @@ -114,7 +120,8 @@ export class JSONField extends React.Component { iconStyle, quotesOnKeys, sortKeys, - name + name, + ellipsisThreshold } = this.props; const value = getPropValue(this.props); @@ -157,6 +164,7 @@ export class JSONField extends React.Component { shouldCollapse={this.shouldExpandNode} enableClipboard={enableClipboard} displayDataTypes={displayDataTypes} + collapseStringsAfterLength={ellipsisThreshold} iconStyle={iconStyle} quotesOnKeys={quotesOnKeys} sortKeys={sortKeys}