From 0b49b85a0aae9898a55eefb3346f7c0f6d781643 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Fri, 27 Sep 2024 15:10:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=A0=91=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E9=A2=84=E8=A7=88=E5=8C=BA=E7=82=B9=E5=87=BB=E6=97=B6?= =?UTF-8?q?=E6=93=8D=E4=BD=9C=E5=8C=BA=E8=BF=9B=E8=A1=8C=E5=AF=B9=E5=BA=94?= =?UTF-8?q?=E9=80=89=E4=B8=AD=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=A0=91=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E8=8A=82=E7=82=B9=E6=97=B6=E9=BB=98=E8=AE=A4=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E8=AF=A5=E8=8A=82=E7=82=B9=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=A0=91=E8=AE=BE=E8=AE=A1=E6=93=8D=E4=BD=9C=E5=8C=BA=E9=80=82?= =?UTF-8?q?=E9=85=8D=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tree-design/CHANGELOG.md | 2 + .../tree-design-popover.scss | 4 + .../tree-design-popover.tsx | 2 +- .../src/components/tree-shell/tree-shell.tsx | 20 +- .../tree-design-content.controller.ts | 22 ++ .../tree-design-content.tsx | 1 + .../tree_design_operation.controller.ts | 32 ++- .../tree_design_operation.scss | 225 +++++++++++------- .../tree_design_operation.tsx | 2 +- 9 files changed, 212 insertions(+), 98 deletions(-) diff --git a/packages/tree-design/CHANGELOG.md b/packages/tree-design/CHANGELOG.md index d218d585..be9273f3 100644 --- a/packages/tree-design/CHANGELOG.md +++ b/packages/tree-design/CHANGELOG.md @@ -9,6 +9,8 @@ ### Add +- 更新预览区默认展开根节点，左侧预览区树节点点击时，操作区进行对应节点选中，导航区进行对应导航跳转 +- 更新树设计工具操作区适配暗黑主题 - 新增树设计工具预览区树壳组件 - 更新树设计工具操作区组件 diff --git a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss index 32f74246..f8be0bfe 100644 --- a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss +++ b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss @@ -40,4 +40,8 @@ border-radius: 50%; } } + @include e('footer'){ + display: flex; + justify-content: end; + } } \ No newline at end of file diff --git a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx index b777da15..098346e4 100644 --- a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx +++ b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx @@ -91,7 +91,7 @@ export default defineComponent({ ); })} -
+
确定 diff --git a/packages/tree-design/src/components/tree-shell/tree-shell.tsx b/packages/tree-design/src/components/tree-shell/tree-shell.tsx index be36301e..55b72df2 100644 --- a/packages/tree-design/src/components/tree-shell/tree-shell.tsx +++ b/packages/tree-design/src/components/tree-shell/tree-shell.tsx @@ -11,11 +11,11 @@ export default defineComponent({ type: Object as PropType, }, items: { - type: Object as PropType, + type: Array, default: () => [], }, rsDatas: { - type: Object as PropType, + type: Array, default: () => [], }, context: { @@ -23,7 +23,8 @@ export default defineComponent({ required: true, }, }, - setup(props) { + emits: ['nodeSelect'], + setup(props, { emit }) { const ns = useNamespace('tree-shell'); const shellNS = useNamespace('light-theme-shell'); const theme = ref('light'); @@ -115,13 +116,15 @@ export default defineComponent({ }); if (hasRsTag) { if (item.rootnode === 1) { - //根节点默认展开 + // 根节点默认展开 defaultExpandedKeys.value = [item.psdetreenodeid]; } tempItems.push({ appId: props.context!.srfappid, _text: item.psdetreenodename, _uuid: item.psdetreenodeid, + _id: item.psdetreenodeid, + _nodeId: item.nodetype, isRoot: item.rootnode === 1, _disableSelect: false, _pid: pids, @@ -155,6 +158,13 @@ export default defineComponent({ treeData.value = initData(); }; + // 选中了节点，抛出选中事件 + const onNodeClick = (data: IData) => { + const { nodeData } = data; + const { _id } = nodeData; + emit('nodeSelect', _id); + }; + watch( () => [props.items, props.rsDatas], () => { @@ -179,6 +189,7 @@ export default defineComponent({ treeData, tempModelData, treeRef, + onNodeClick, }; }, render() { @@ -196,6 +207,7 @@ export default defineComponent({ modelData={this.tempModelData} defaultExpandedKeys={this.defaultExpandedKeys} context={this.context} + onNodeClick={this.onNodeClick} >
) diff --git a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.controller.ts b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.controller.ts index 413d9653..9aa051cb 100644 --- a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.controller.ts +++ b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.controller.ts @@ -138,4 +138,26 @@ export class TreeDesignContentController extends DesignContentController { const rsDatas = await this.getNodeRss(); this.state.rsDatas = rsDatas; } + + /** + * 节点选中 + * + * @param {string} id + * @memberof TreeDesignContentController + */ + public onNodeSelect(id: string) { + const data = this.state.itemDatas.find((item: IData) => { + return item.srfkey === id; + }); + if (data) { + this.view.call('onActive', { + id: data.srfkey!, + label: data.srfmajortext!, + type: '', + data, + }); + } else { + this.view.call('onActiveRoot'); + } + } } diff --git a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.tsx b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.tsx index 9ae85a9a..58dbab4e 100644 --- a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.tsx +++ b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.tsx @@ -30,6 +30,7 @@ export default defineComponent({ items={this.state.itemDatas} rsDatas={this.state.rsDatas} context={this.controller.panel.context} + onNodeSelect={(id: string) => this.controller.onNodeSelect(id)} >
); diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.controller.ts b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.controller.ts index 5f0eb5ef..c55573f1 100644 --- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.controller.ts +++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.controller.ts @@ -184,10 +184,28 @@ export class TreeDesignOperationController extends DesignOperationController { * * @memberof TreeDesignOperationController */ - public async addItemNode() { + public async addItemNode(event: MouseEvent) { + event.stopPropagation(); + event.preventDefault(); const tempNodeData: IData = {}; this.fillDefault(tempNodeData); - await this.create([tempNodeData]); + const result = await this.itemService.createTemp(this.panel.context, [ + tempNodeData, + ]); + if (result.ok && Array.isArray(result.data)) { + await this.view.evt.emit('onCreateSuccess', undefined); + const item = result.data[result.data.length - 1]; + if (item) { + await this.view.call('onActive', { + id: item.srfkey!, + label: item.srfmajortext!, + type: '', + data: item, + }); + } + } else { + ibiz.log.error('新建节点失败'); + } } // 创建关系子项 @@ -225,7 +243,7 @@ export class TreeDesignOperationController extends DesignOperationController { * @param {IData} data * @memberof TreeDesignOperationController */ - public handleAddItem = async (items: IData[], data: IData) => { + public async handleAddItem(items: IData[], data: IData) { const rss = items.map((item: IData) => { const param = { ppsdetreenodeid: data.srfkey, @@ -244,17 +262,17 @@ export class TreeDesignOperationController extends DesignOperationController { await this.view.evt.emit('onCreateSuccess', undefined); const item = result.data[result.data.length - 1]; if (item) { - this.view.call('onActive', { + await this.view.call('onActive', { id: item.srfkey!, label: item.srfmajortext!, - type: item.itemtype, + type: '', data: item, }); } } else { ibiz.log.error('新建关系子节点失败'); } - }; + } /** * 填充节点数据 @@ -337,7 +355,7 @@ export class TreeDesignOperationController extends DesignOperationController { this.view.call('onActive', { id: data.srfkey!, label: data.srfmajortext!, - type: data.itemtype, + type: '', data, }); } diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss index c761fe41..b006664b 100644 --- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss +++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss @@ -1,160 +1,215 @@ +/* stylelint-disable CssSyntaxError */ /* stylelint-disable block-no-empty */ $tree_design_operation: ( - header-caption-padding:5px, - header-title-padding:10px, - header-height:52px, + header-caption-padding: 5px, + header-title-padding: 10px, + header-height: 52px, collapse-item-icon-margin: 4px, - item-node-padding:5px, - item-select:getCssVar(color-primary-light-active), - item-padding-left:16px, - item-label-height:28px, - item-actions-width:52px, - item-actions-font-size:18px, - item-actions-icon-margin:4px, - item-selected-bg:#42a5f5, - item-selected-color--node:white, - children-item-padding:24px, - children-item-height:32px, + item-node-padding: 5px, + item-select: getCssVar(color, primary, light-active), + item-padding-left: 16px, + item-label-height: 28px, + item-actions-width: 52px, + item-actions-font-size: 18px, + item-actions-icon-margin: 4px, + item-selected-bg: #42a5f5, + item-selected-color--node: white, + children-item-padding: 24px, + children-item-height: 32px, ); -@include b('tree_design_operation-header'){ +@include b('tree_design_operation-header') { @include set-component-css-var(tree_design_operation, $tree_design_operation); - @include e('caption'){ + @include e('caption') { display: flex; align-items: center; - padding:getCssVar(tree_design_operation,header-caption-padding); - color:getCssVar(color,primary,text); - background-color: getCssVar(color,primary); - border-radius: getCssVar(border-radius,small); - @include m('title'){ + padding: getCssVar(tree_design_operation, header-caption-padding); + color: getCssVar(color, primary, text); + background-color: getCssVar(color, primary); + border-radius: getCssVar(border-radius, small); + @include m('title') { flex: 1; - padding: getCssVar(tree_design_operation,header-title-padding) getCssVar(tree_design_operation,header-caption-padding); + padding: getCssVar(tree_design_operation, header-title-padding) + getCssVar(tree_design_operation, header-caption-padding); } } - @include e('icon'){ - padding: getCssVar(spacing,extra,tight); - color: getCssVar(color,primary); + @include e('icon') { + padding: getCssVar(spacing, extra, tight); + color: getCssVar(color, primary); cursor: pointer; - background-color: getCssVar(color,primary,text); - border-radius: getCssVar(border-radius,small); + background-color: getCssVar(color, primary, text); + border-radius: getCssVar(border-radius, small); } - @include e('search'){ + @include e('search') { display: flex; - padding: getCssVar(tree_design_operation,item-node-padding); + padding: getCssVar(tree_design_operation, item-node-padding); } - @include e('collapse'){ + @include e('collapse') { display: flex; align-items: center; justify-content: center; - @include m('icon'){ - padding: getCssVar(tree_design_operation,item-node-padding); + @include m('icon') { + padding: getCssVar(tree_design_operation, item-node-padding); cursor: pointer; } } - @include when('selected'){ - background-color: getCssVar(tree_design_operation,item-selected-bg); + @include when('selected') { + background-color: getCssVar(tree_design_operation, item-selected-bg); } } -@include b('tree_design_operation-tree-item'){ +@include b('tree_design_operation-tree-item') { @include set-component-css-var(tree_design_operation, $tree_design_operation); width: 100%; - @include e('actions'){ - opacity: 0; - } - @include e('node'){ + @include e('node') { display: flex; align-items: center; width: 100%; - padding: getCssVar(tree_design_operation,item-node-padding) 0 ; - padding-left: getCssVar(tree_design_operation,item-padding-left); - font-size: getCssVar(font-size,regular); + padding: getCssVar(tree_design_operation, item-node-padding) 0; + padding-left: getCssVar(tree_design_operation, item-padding-left); + font-size: getCssVar(font-size, regular); cursor: pointer; - background-color: getCssVar(color,primary,light-default); - border: 1px solid getCssVar(color,border); + background-color: getCssVar(color, primary, light-default); + border: 1px solid getCssVar(color, border); - &:hover{ - .#{bem('tree_design_operation-tree-item','actions')}{ + &:hover { + /* stylelint-disable-next-line CssSyntaxError */ + .#{bem('tree_design_operation-tree-item','actions')} { opacity: 1; } } - @include when('selected'){ - color:white; - background-color: getCssVar(tree_design_operation,item-selected-bg); + @include when('selected') { + color: white; + background-color: getCssVar(tree_design_operation, item-selected-bg); } } - @include e('collapse'){ + @include e('collapse') { display: flex; align-items: center; height: 100%; - margin-right:getCssVar(spacing,base-tight); - @include m('icon'){ - margin-top: getCssVar(tree_design_operation,collapse-item-icon-margin); + margin-right: getCssVar(spacing, base-tight); + @include m('icon') { + margin-top: getCssVar(tree_design_operation, collapse-item-icon-margin); } } - @include e('label'){ + @include e('label') { display: flex; flex: 1; align-items: center; - height: getCssVar(tree_design_operation,item-label-height); + height: getCssVar(tree_design_operation, item-label-height); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - @include e('actions'){ + @include e('actions') { + opacity: 0; display: flex; align-items: center; - min-width:getCssVar(tree_design_operation,item-actions-width); - font-size: getCssVar(tree_design_operation,item-actions-font-size); - @include m('icon'){ - margin: 0 getCssVar(tree_design_operation,item-actions-icon-margin); - color: getCssVar(color,primary); + min-width: getCssVar(tree_design_operation, item-actions-width); + font-size: getCssVar(tree_design_operation, item-actions-font-size); + @include m('icon') { + margin: 0 getCssVar(tree_design_operation, item-actions-icon-margin); + color: getCssVar(color, primary); cursor: pointer; - background-color: getCssVar(color,primary,text); - border-radius: getCssVar(border-radius,small); + background-color: getCssVar(color, primary, text); + border-radius: getCssVar(border-radius, small); } } - @include e('children'){ + @include e('children') { height: calc-size(auto); overflow: hidden; - font-size: getCssVar(font-size,regular); + font-size: getCssVar(font-size, regular); cursor: pointer; - background-color: getCssVar(color,white); - transition: all .3s ease; - @include when('collapse'){ + background-color: getCssVar(color, white); + transition: all 0.3s ease; + @include when('collapse') { height: 0; } } - @include e('rs-item'){ + @include e('rs-item') { display: flex; align-items: center; - height: getCssVar(tree_design_operation,children-item-height); - padding-left: getCssVar(tree_design_operation,children-item-padding); - border: 1px solid getCssVar(color,border); - @include m('label'){ + height: getCssVar(tree_design_operation, children-item-height); + padding-left: getCssVar(tree_design_operation, children-item-padding); + border: 1px solid getCssVar(color, border); + @include m('label') { flex: 1; } - @include m('icon'){ - margin: 0 getCssVar(tree_design_operation,item-actions-icon-margin); - font-size: getCssVar(tree_design_operation,item-actions-font-size); - color: getCssVar(color,primary); + @include m('icon') { + margin: 0 getCssVar(tree_design_operation, item-actions-icon-margin); + font-size: getCssVar(tree_design_operation, item-actions-font-size); + color: getCssVar(color, primary); cursor: pointer; - background-color: getCssVar(color,primary,text); - border: 1px solid getCssVar(color,border); - border-radius: getCssVar(border-radius,small); + background-color: getCssVar(color, primary, text); + border: 1px solid getCssVar(color, border); + border-radius: getCssVar(border-radius, small); opacity: 0; } - &:hover{ + &:hover { // background-color: getCssVar(tree_design_operation,item-select); - .#{bem('tree_design_operation-tree-item','rs-item','icon')}{ + .#{bem('tree_design_operation-tree-item','rs-item','icon')} { opacity: 1; } } - @include when('selected'){ - background-color: getCssVar(tree_design_operation,item-selected-bg); + @include when('selected') { + background-color: getCssVar(tree_design_operation, item-selected-bg); + } + } +} + +// 暗色主题 +:root.studio_dark { + @include b('tree_design_operation-header') { + @include e('icon') { + color: getCssVar(color, primary, text); + background-color: transparent; + } + @include e('caption') { + background-color: getCssVar(color, bg, 0); + &:hover { + background-color: getCssVar(color, bg, 3); + } + @include when('selected') { + background-color: getCssVar(tree_design_operation, item-selected-bg); + } + } + } + @include b('tree_design_operation-tree-item') { + @include e('node') { + background-color: getCssVar(color, bg, 0); + &:hover { + background-color: getCssVar(color, bg, 3); + } + @include when('selected') { + color: white; + background-color: getCssVar(tree_design_operation, item-selected-bg); + } + } + @include e('children') { + background-color: getCssVar(color, bg, 0); + } + @include e('rs-item') { + @include m('icon') { + color: getCssVar(color, primary, text); + background-color: transparent; + } + &:hover { + background-color: getCssVar(color, bg, 3); + } + @include when('selected') { + color: white; + background-color: getCssVar(tree_design_operation, item-selected-bg); + } + } + @include e('actions') { + @include m('icon') { + color: getCssVar(color, primary, text); + background-color: transparent; + } } + // #{getCssVarName(tree_design_operation, item-color)}: rgba(var(#{getCssVarName(white)}), 1); } -} \ No newline at end of file +} diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx index 4dbcd153..0e6d1622 100644 --- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx +++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx @@ -93,7 +93,7 @@ export default defineComponent({ title='新增' class={ns.be('header', 'icon')} name='add-outline' - onClick={() => c.addItemNode()} + onClick={(event: MouseEvent) => c.addItemNode(event)} >
-- Gitee