From 867ceb8bc27a8098d61dcd9e4d894f521a53b9e9 Mon Sep 17 00:00:00 2001 From: Yiwei Mao Date: Tue, 1 Jul 2025 20:44:12 +0800 Subject: [PATCH] fix(materials): json schema title & variable selector long text style (#438) * fix: json schema title * fix: variable selector style * feat: add missing license header * feat: add doc build in gitignore --- .gitignore | 1 + .../components/full-variable-list.tsx | 5 +++++ .../components/global-variable-editor.tsx | 5 +++++ .../components/index.module.less | 5 +++++ .../components/variable-panel.tsx | 5 +++++ .../src/plugins/variable-panel-plugin/index.ts | 5 +++++ .../variable-panel-layer.tsx | 5 +++++ .../variable-panel-plugin.ts | 5 +++++ .../components/full-variable-list.tsx | 5 +++++ .../components/global-variable-editor.tsx | 5 +++++ .../components/index.module.less | 5 +++++ .../components/variable-panel.tsx | 5 +++++ .../src/plugins/variable-panel-plugin/index.ts | 5 +++++ .../variable-panel-layer.tsx | 5 +++++ .../variable-panel-plugin.ts | 5 +++++ .../components/dynamic-value-input/index.tsx | 1 + .../components/dynamic-value-input/styles.tsx | 2 ++ .../src/components/variable-selector/index.tsx | 4 ++-- .../components/variable-selector/styles.tsx | 13 ++++++++++++- .../src/utils/json-schema/index.ts | 18 ++++++++++++++++-- 20 files changed, 104 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index bc0211d3..acdc2e4e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # e2e results test-results/ +doc_build/ # Logs *.log diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx index 585deb9e..ee823d98 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { useVariableTree } from '@flowgram.ai/form-materials'; import { Tree } from '@douyinfe/semi-ui'; diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx index 283c529f..818d048d 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { useEffect } from 'react'; import { JsonSchemaEditor, JsonSchemaUtils } from '@flowgram.ai/form-materials'; diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/index.module.less b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/index.module.less index b01ad2c1..4f2190ee 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/index.module.less +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/index.module.less @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + .panel-wrapper { position: relative; z-index: 9999; diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx index 5a3cdc8f..c5f00170 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { useState } from 'react'; import { Button, Collapsible, Tabs, Tooltip } from '@douyinfe/semi-ui'; diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/index.ts b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/index.ts index e7a1126a..9f3c5874 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/index.ts +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/index.ts @@ -1 +1,6 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + export { createVariablePanelPlugin } from './variable-panel-plugin'; diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx index bd6c6062..e426c0af 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { domUtils, injectable, Layer } from '@flowgram.ai/fixed-layout-editor'; import { VariablePanel } from './components/variable-panel'; diff --git a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts index 63c65afa..98a9c71a 100644 --- a/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts +++ b/apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { JsonSchemaUtils } from '@flowgram.ai/form-materials'; import { ASTFactory, definePluginCreator, GlobalScope } from '@flowgram.ai/fixed-layout-editor'; diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx index 585deb9e..ee823d98 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { useVariableTree } from '@flowgram.ai/form-materials'; import { Tree } from '@douyinfe/semi-ui'; diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx index 8a66f2e1..506489bb 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { useEffect } from 'react'; import { diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/index.module.less b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/index.module.less index 4ae6e620..41e38dfc 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/index.module.less +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/index.module.less @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + .panel-wrapper { position: relative; } diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx index 5a3cdc8f..c5f00170 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { useState } from 'react'; import { Button, Collapsible, Tabs, Tooltip } from '@douyinfe/semi-ui'; diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/index.ts b/apps/demo-free-layout/src/plugins/variable-panel-plugin/index.ts index e7a1126a..9f3c5874 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/index.ts +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/index.ts @@ -1 +1,6 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + export { createVariablePanelPlugin } from './variable-panel-plugin'; diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx b/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx index a1f87184..ef776af7 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { domUtils, injectable, Layer } from '@flowgram.ai/free-layout-editor'; import { VariablePanel } from './components/variable-panel'; diff --git a/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts b/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts index 50e0bd66..d573b9d7 100644 --- a/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts +++ b/apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts @@ -1,3 +1,8 @@ +/** + * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates + * SPDX-License-Identifier: MIT + */ + import { ASTFactory, definePluginCreator, GlobalScope } from '@flowgram.ai/free-layout-editor'; import { JsonSchemaUtils } from '@flowgram.ai/form-materials'; diff --git a/packages/materials/form-materials/src/components/dynamic-value-input/index.tsx b/packages/materials/form-materials/src/components/dynamic-value-input/index.tsx index d7622ce5..4aeab5f6 100644 --- a/packages/materials/form-materials/src/components/dynamic-value-input/index.tsx +++ b/packages/materials/form-materials/src/components/dynamic-value-input/index.tsx @@ -50,6 +50,7 @@ export function DynamicValueInput({ // Display Variable Or Delete return ( onChange(_v ? { type: 'ref', content: _v } : undefined)} includeSchema={includeSchema} diff --git a/packages/materials/form-materials/src/components/dynamic-value-input/styles.tsx b/packages/materials/form-materials/src/components/dynamic-value-input/styles.tsx index de70ee19..69f2f770 100644 --- a/packages/materials/form-materials/src/components/dynamic-value-input/styles.tsx +++ b/packages/materials/form-materials/src/components/dynamic-value-input/styles.tsx @@ -13,6 +13,8 @@ export const UIContainer = styled.div` export const UIMain = styled.div` flex-grow: 1; + overflow: hidden; + min-width: 0; & .semi-tree-select, & .semi-input-number, diff --git a/packages/materials/form-materials/src/components/variable-selector/index.tsx b/packages/materials/form-materials/src/components/variable-selector/index.tsx index 16ab8e33..a2461948 100644 --- a/packages/materials/form-materials/src/components/variable-selector/index.tsx +++ b/packages/materials/form-materials/src/components/variable-selector/index.tsx @@ -11,7 +11,7 @@ import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons'; import { IJsonSchema } from '../../typings/json-schema'; import { useVariableTree } from './use-variable-tree'; -import { UIRootTitle, UITag, UITreeSelect } from './styles'; +import { UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles'; interface PropTypes { value?: string[]; @@ -102,7 +102,7 @@ export const VariableSelector = ({ {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null} - {_option.label} + {_option.label} ); }} diff --git a/packages/materials/form-materials/src/components/variable-selector/styles.tsx b/packages/materials/form-materials/src/components/variable-selector/styles.tsx index 870d1525..71fcc589 100644 --- a/packages/materials/form-materials/src/components/variable-selector/styles.tsx +++ b/packages/materials/form-materials/src/components/variable-selector/styles.tsx @@ -6,11 +6,22 @@ import styled from 'styled-components'; import { Tag, TreeSelect } from '@douyinfe/semi-ui'; -export const UIRootTitle = styled.span` +export const UIRootTitle = styled.div` margin-right: 4px; + min-width: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: var(--semi-color-text-2); `; +export const UIVarName = styled.div` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 50%; +`; + export const UITag = styled(Tag)` width: 100%; display: flex; diff --git a/packages/materials/form-materials/src/utils/json-schema/index.ts b/packages/materials/form-materials/src/utils/json-schema/index.ts index 61c23310..b8855dc4 100644 --- a/packages/materials/form-materials/src/utils/json-schema/index.ts +++ b/packages/materials/form-materials/src/utils/json-schema/index.ts @@ -42,7 +42,10 @@ export namespace JsonSchemaUtils { .map(([key, _property]) => ({ key, type: schemaToAST(_property), - meta: { description: _property.description }, + meta: { + title: _property.title, + description: _property.description, + }, })), }); case 'array': @@ -114,7 +117,18 @@ export namespace JsonSchemaUtils { type: 'object', properties: drilldown ? Object.fromEntries( - typeAST.properties.map((property) => [property.key, astToSchema(property.type)!]) + typeAST.properties.map((property) => { + const schema = astToSchema(property.type); + + if (property.meta?.title && schema) { + schema.title = property.meta.title; + } + if (property.meta?.description && schema) { + schema.description = property.meta.description; + } + + return [property.key, schema!]; + }) ) : {}, };