From 391caa5ff1d2e4cec87e7914a81ad507042e49ab Mon Sep 17 00:00:00 2001 From: donghao Date: Tue, 15 Jul 2025 10:05:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5logicFlow=E6=8F=92?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc-auto-import.json | 1 + .gitignore | 1 + package-lock.json | 152 +++++++++++- package.json | 7 +- src/renderer/auto-imports.d.ts | 1 + .../src/components/LogicFlowNodes/index.ts | 0 .../LogicFlowNodes/src/imageNode.tsx | 0 src/renderer/src/config/designCanvas.ts | 47 ++++ src/renderer/src/config/designControl.ts | 83 +++++++ src/renderer/src/hooks/useLogicFlow.ts | 51 ++++ .../src/layout/designContentLayout.vue | 222 ++++++++++++++++++ src/renderer/src/main.ts | 15 +- src/renderer/src/plugins/elementPlus.ts | 30 +++ src/renderer/src/plugins/zhCnElement.ts | 19 -- src/renderer/src/router/index.ts | 6 +- src/renderer/src/styles/base.scss | 26 ++ src/renderer/src/styles/design.scss | 12 +- src/renderer/src/styles/element-plus.scss | 1 + src/renderer/src/styles/logic-flow-core.scss | 214 +++++++++++++++++ .../src/views/Design/Controls/navCtrl.vue | 96 ++------ .../src/views/Design/Controls/panelCtrl.scss | 55 +++++ .../src/views/Design/Controls/panelCtrl.vue | 129 +++++----- .../views/Design/Workflow/logicFlowView.scss | 28 +++ .../views/Design/Workflow/logicFlowView.vue | 169 ++++++++++++- src/renderer/src/views/Design/index.vue | 2 +- 25 files changed, 1200 insertions(+), 167 deletions(-) create mode 100644 src/renderer/src/components/LogicFlowNodes/index.ts create mode 100644 src/renderer/src/components/LogicFlowNodes/src/imageNode.tsx create mode 100644 src/renderer/src/config/designCanvas.ts create mode 100644 src/renderer/src/config/designControl.ts create mode 100644 src/renderer/src/hooks/useLogicFlow.ts create mode 100644 src/renderer/src/layout/designContentLayout.vue create mode 100644 src/renderer/src/plugins/elementPlus.ts delete mode 100644 src/renderer/src/plugins/zhCnElement.ts create mode 100644 src/renderer/src/styles/logic-flow-core.scss create mode 100644 src/renderer/src/views/Design/Controls/panelCtrl.scss create mode 100644 src/renderer/src/views/Design/Workflow/logicFlowView.scss diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json index 9102b68..d3ddebc 100644 --- a/.eslintrc-auto-import.json +++ b/.eslintrc-auto-import.json @@ -7,6 +7,7 @@ "EffectScope": true, "ElButton": true, "ElDialog": true, + "ElMessage": true, "ExtractDefaultPropTypes": true, "ExtractPropTypes": true, "ExtractPublicPropTypes": true, diff --git a/.gitignore b/.gitignore index 75bfa0b..f406213 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ dist release out .DS_Store +test *.log* diff --git a/package-lock.json b/package-lock.json index 07eb590..6af8f5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,17 @@ "dependencies": { "@electron-toolkit/preload": "^3.0.0", "@electron-toolkit/utils": "^3.0.0", + "@element-plus/icons-vue": "^2.3.1", + "@logicflow/core": "^2.0.16", + "@logicflow/extension": "^2.0.21", + "@types/sortablejs": "^1.15.8", "axios": "^1.10.0", "element-plus": "^2.10.2", "mockjs": "^1.1.0", "pinia": "^3.0.3", "vite-plugin-mock": "^3.0.2", - "vue-router": "^4.5.1" + "vue-router": "^4.5.1", + "vuedraggable": "^2.24.3" }, "devDependencies": { "@electron-toolkit/eslint-config": "^1.0.2", @@ -82,6 +87,11 @@ "node": ">=6.0.0" } }, + "node_modules/@antv/hierarchy": { + "version": "0.6.14", + "resolved": "https://registry.npmmirror.com/@antv/hierarchy/-/hierarchy-0.6.14.tgz", + "integrity": "sha512-V3uknf7bhynOqQDw2sg+9r9DwZ9pc6k/EcqyTFdfXB1+ydr7urisP0MipIuimucvQKN+Qkd+d6w601r1UIroqQ==" + }, "node_modules/@babel/code-frame": { "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", @@ -1577,6 +1587,40 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@logicflow/core": { + "version": "2.0.16", + "resolved": "https://registry.npmmirror.com/@logicflow/core/-/core-2.0.16.tgz", + "integrity": "sha512-KoNdY5g7WcAtfk7sMe+uOOso28mw6dwCHgLKmnzC0nenASD0HGWhFq+Yo7ktHP2asMXUISPb9hbQA221NcYZdg==", + "dependencies": { + "classnames": "^2.3.2", + "lodash-es": "^4.17.21", + "mobx": "^5.15.7", + "mobx-preact": "^3.0.0", + "mobx-utils": "^5.6.1", + "mousetrap": "^1.6.5", + "preact": "^10.17.1", + "uuid": "^9.0.0" + } + }, + "node_modules/@logicflow/extension": { + "version": "2.0.21", + "resolved": "https://registry.npmmirror.com/@logicflow/extension/-/extension-2.0.21.tgz", + "integrity": "sha512-SdYBOnDlCEOEElScGFIprgxqH0fv39ur7suyYzhiWUaWjL/TpvIESgqcR/ujE9aolFNTtzv2USc6xPcrouc4PQ==", + "dependencies": { + "@antv/hierarchy": "^0.6.11", + "@logicflow/core": "2.0.16", + "classnames": "^2.3.2", + "lodash-es": "^4.17.21", + "medium-editor": "^5.23.3", + "mobx": "^5.15.7", + "preact": "^10.17.1", + "rangy": "^1.3.1", + "vanilla-picker": "^2.12.3" + }, + "peerDependencies": { + "@logicflow/core": "2.0.16" + } + }, "node_modules/@malept/cross-spawn-promise": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz", @@ -2175,6 +2219,11 @@ "url": "https://github.com/sindresorhus/is?sponsor=1" } }, + "node_modules/@sphinxxxx/color-conversion": { + "version": "2.2.2", + "resolved": "https://registry.npmmirror.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz", + "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==" + }, "node_modules/@szmarczak/http-timer": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz", @@ -2653,6 +2702,11 @@ "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==", "dev": true }, + "node_modules/@types/sortablejs": { + "version": "1.15.8", + "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz", + "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==" + }, "node_modules/@types/verror": { "version": "1.10.9", "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.9.tgz", @@ -3917,6 +3971,11 @@ "node": ">=8" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/cli-truncate": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz", @@ -5654,6 +5713,11 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "node_modules/hookable": { "version": "5.5.3", "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz", @@ -6466,6 +6530,11 @@ "node": ">=10" } }, + "node_modules/medium-editor": { + "version": "5.23.3", + "resolved": "https://registry.npmmirror.com/medium-editor/-/medium-editor-5.23.3.tgz", + "integrity": "sha512-he9/TdjX8f8MGdXGfCs8AllrYnqXJJvjNkDKmPg3aPW/uoIrlRqtkFthrwvmd+u4QyzEiadhCCM0EwTiRdUCJw==" + }, "node_modules/memoize-one": { "version": "6.0.0", "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz", @@ -6640,6 +6709,35 @@ "pathe": "^2.0.1" } }, + "node_modules/mobx": { + "version": "5.15.7", + "resolved": "https://registry.npmmirror.com/mobx/-/mobx-5.15.7.tgz", + "integrity": "sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + } + }, + "node_modules/mobx-preact": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/mobx-preact/-/mobx-preact-3.0.0.tgz", + "integrity": "sha512-ijan/cBs3WmRye87E5+3JmoFBB00KDAwNA3pm7bMwYLPHBAXlN86aC3gdrXw8aKzM5RI8V3a993PphzPv6P4FA==", + "dependencies": { + "hoist-non-react-statics": "^2.3.1" + }, + "peerDependencies": { + "mobx": "5.x", + "preact": ">=8" + } + }, + "node_modules/mobx-utils": { + "version": "5.6.2", + "resolved": "https://registry.npmmirror.com/mobx-utils/-/mobx-utils-5.6.2.tgz", + "integrity": "sha512-a/WlXyGkp6F12b01sTarENpxbmlRgPHFyR1Xv2bsSjQBm5dcOtd16ONb40/vOqck8L99NHpI+C9MXQ+SZ8f+yw==", + "peerDependencies": { + "mobx": "^4.13.1 || ^5.13.1" + } + }, "node_modules/mockjs": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/mockjs/-/mockjs-1.1.0.tgz", @@ -6651,6 +6749,11 @@ "random": "bin/random" } }, + "node_modules/mousetrap": { + "version": "1.6.5", + "resolved": "https://registry.npmmirror.com/mousetrap/-/mousetrap-1.6.5.tgz", + "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz", @@ -7230,6 +7333,15 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/preact": { + "version": "10.26.9", + "resolved": "https://registry.npmmirror.com/preact/-/preact-10.26.9.tgz", + "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -7356,6 +7468,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/rangy": { + "version": "1.3.2", + "resolved": "https://registry.npmmirror.com/rangy/-/rangy-1.3.2.tgz", + "integrity": "sha512-fS1C4MOyk8T+ZJZdLcgrukPWxkyDXa+Hd2Kj+Zg4wIK71yrWgmjzHubzPMY1G+WD9EgGxMp3fIL0zQ1ickmSWA==" + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz", @@ -7764,6 +7881,11 @@ "npm": ">= 3.0.0" } }, + "node_modules/sortablejs": { + "version": "1.10.2", + "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz", + "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==" + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -8629,6 +8751,26 @@ "node": ">= 0.4.0" } }, + "node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/vanilla-picker": { + "version": "2.12.3", + "resolved": "https://registry.npmmirror.com/vanilla-picker/-/vanilla-picker-2.12.3.tgz", + "integrity": "sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==", + "dependencies": { + "@sphinxxxx/color-conversion": "^2.2.2" + } + }, "node_modules/verror": { "version": "1.10.1", "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz", @@ -8811,6 +8953,14 @@ "typescript": "*" } }, + "node_modules/vuedraggable": { + "version": "2.24.3", + "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz", + "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==", + "dependencies": { + "sortablejs": "1.10.2" + } + }, "node_modules/webpack-virtual-modules": { "version": "0.6.2", "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", diff --git a/package.json b/package.json index 773b5d5..a4d5096 100644 --- a/package.json +++ b/package.json @@ -56,12 +56,17 @@ "dependencies": { "@electron-toolkit/preload": "^3.0.0", "@electron-toolkit/utils": "^3.0.0", + "@element-plus/icons-vue": "^2.3.1", + "@logicflow/core": "^2.0.16", + "@logicflow/extension": "^2.0.21", + "@types/sortablejs": "^1.15.8", "axios": "^1.10.0", "element-plus": "^2.10.2", "mockjs": "^1.1.0", "pinia": "^3.0.3", "vite-plugin-mock": "^3.0.2", - "vue-router": "^4.5.1" + "vue-router": "^4.5.1", + "vuedraggable": "^2.24.3" }, "devDependencies": { "@electron-toolkit/eslint-config": "^1.0.2", diff --git a/src/renderer/auto-imports.d.ts b/src/renderer/auto-imports.d.ts index cf39582..61767cd 100644 --- a/src/renderer/auto-imports.d.ts +++ b/src/renderer/auto-imports.d.ts @@ -9,6 +9,7 @@ declare global { const EffectScope: typeof import('vue')['EffectScope'] const ElButton: typeof import('element-plus/es')['ElButton'] const ElDialog: typeof import('element-plus/es')['ElDialog'] + const ElMessage: typeof import('element-plus/es')['ElMessage'] const computed: typeof import('vue')['computed'] const createApp: typeof import('vue')['createApp'] const customRef: typeof import('vue')['customRef'] diff --git a/src/renderer/src/components/LogicFlowNodes/index.ts b/src/renderer/src/components/LogicFlowNodes/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/renderer/src/components/LogicFlowNodes/src/imageNode.tsx b/src/renderer/src/components/LogicFlowNodes/src/imageNode.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/renderer/src/config/designCanvas.ts b/src/renderer/src/config/designCanvas.ts new file mode 100644 index 0000000..a99a3fb --- /dev/null +++ b/src/renderer/src/config/designCanvas.ts @@ -0,0 +1,47 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-07-14 14:30:34 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-07-14 16:12:13 + * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\config\designCanvas.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +export const logicFlowConf = { + background: { + backgroundColor: '#242529' + }, + snapline: { + stroke: '#ff0000', // 对齐线颜色 + strokeWidth: 1 // 对齐线宽度 + } +} + +export const logicFlowThemeConf = { + baseNode: { + fill: '#fff', + stroke: '#154DDD', + strokeWidth: 2 + }, + nodeText: { + color: '#ff0000', + overflowMode: 'default', + lineHeight: 1.2, + fontSize: 12 + }, + line: { + stroke: '#154DDD', + strokeWidth: 2 + }, + polyline: { + stroke: '#154DDD', + strokeWidth: 2 + }, + edgeText: { + textWidth: 100, + overflowMode: 'default', + fontSize: 12, + background: { + fill: 'transparent' + } + } +} diff --git a/src/renderer/src/config/designControl.ts b/src/renderer/src/config/designControl.ts new file mode 100644 index 0000000..5ebc16d --- /dev/null +++ b/src/renderer/src/config/designControl.ts @@ -0,0 +1,83 @@ +import SaveIcon from '@/assets/images/navBar/save.png' +import PrevIcon from '@/assets/images/navBar/prev.png' +import NextIcon from '@/assets/images/navBar/next.png' +import LockIcon from '@/assets/images/navBar/lock.png' +import CameraIcon from '@/assets/images/navBar/camera.png' +import ControlIcon from '@/assets/images/navBar/control.png' +import GlobalIcon from '@/assets/images/navBar/global.png' +import CommIcon from '@/assets/images/navBar/comm.png' +import TriggerIcon from '@/assets/images/navBar/trigger.png' +import ScriptIcon from '@/assets/images/navBar/script.png' +import SingleExecIcon from '@/assets/images/navBar/single_execution.png' +import ContinuousExecIcon from '@/assets/images/navBar/continuous_execution.png' +import RunInterfaceIcon from '@/assets/images/navBar/run_interface.png' +import RunModelIcon from '@/assets/images/navBar/run_model.png' + +export interface ControlsItemType { + icon: any + text: string + type: string +} + +export const navControlsConf: ControlsItemType[] = [ + { + icon: SaveIcon, + text: '保存', + type: 'save' + }, + { + icon: PrevIcon, + text: '上一步', + type: 'undo' + }, + { + icon: NextIcon, + text: '下一步', + type: 'redo' + }, + { + icon: LockIcon, + text: '锁定', + type: 'lock' + }, + { + icon: CameraIcon, + text: '相机管理' + }, + { + icon: ControlIcon, + text: '控制管理' + }, + { + icon: GlobalIcon, + text: '全局变量' + }, + { + icon: CommIcon, + text: '通信管理' + }, + { + icon: TriggerIcon, + text: '全局触发' + }, + { + icon: ScriptIcon, + text: '全局脚本' + }, + { + icon: SingleExecIcon, + text: '单次执行' + }, + { + icon: ContinuousExecIcon, + text: '连续执行' + }, + { + icon: RunInterfaceIcon, + text: '编辑运行界面' + }, + { + icon: RunModelIcon, + text: '编辑运行界面' + } +] diff --git a/src/renderer/src/hooks/useLogicFlow.ts b/src/renderer/src/hooks/useLogicFlow.ts new file mode 100644 index 0000000..797eb06 --- /dev/null +++ b/src/renderer/src/hooks/useLogicFlow.ts @@ -0,0 +1,51 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-07-14 14:33:03 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-07-14 16:26:52 + * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\hooks\useLoginFlow.ts + * @Description: 画布通用处理层 + * + */ +export const useLogicFlow = () => { + const graphData = { + nodes: [ + { + id: 'node_id_1', + type: 'rect', + x: 100, + y: 100, + text: { x: 100, y: 100, value: '节点1' }, + properties: {} + }, + { + id: 'node_id_2', + type: 'circle', + x: 200, + y: 300, + text: { x: 200, y: 300, value: '节点2' }, + properties: {} + } + ], + edges: [ + { + id: 'edge_id', + type: 'polyline', + sourceNodeId: 'node_id_1', + targetNodeId: 'node_id_2', + text: { x: 139, y: 200, value: '' }, + startPoint: { x: 100, y: 140 }, + endPoint: { x: 200, y: 250 }, + pointsList: [ + { x: 100, y: 140 }, + { x: 100, y: 200 }, + { x: 200, y: 200 }, + { x: 200, y: 250 } + ], + properties: {} + } + ] + } + + return { graphData } +} diff --git a/src/renderer/src/layout/designContentLayout.vue b/src/renderer/src/layout/designContentLayout.vue new file mode 100644 index 0000000..f192d83 --- /dev/null +++ b/src/renderer/src/layout/designContentLayout.vue @@ -0,0 +1,222 @@ + + + + + diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts index 3046caa..705fbd8 100644 --- a/src/renderer/src/main.ts +++ b/src/renderer/src/main.ts @@ -2,25 +2,22 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-07-02 13:17:44 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-07-09 12:42:56 + * @LastEditTime: 2025-07-15 10:02:10 * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\main.ts * @Description: 入口文件 */ -import ElementPlus from 'element-plus' + import './styles/tailwind.scss' import './styles/main.scss' import { createApp } from 'vue' import App from './App.vue' import router from '@router' import { createPinia } from 'pinia' -import zhCn from '@/plugins/zhCnElement' // 引入中文语言包 -const app = createApp(App) +import setupElementPlus from '@/plugins/elementPlus' -app.use(router).use(createPinia()).use(ElementPlus, { - locale: zhCn, - size: 'large', // 全局组件尺寸 - zIndex: 3000 // 全局z-index -}) +const app = createApp(App) +setupElementPlus(app) +app.use(router).use(createPinia()) app.mount('#app') diff --git a/src/renderer/src/plugins/elementPlus.ts b/src/renderer/src/plugins/elementPlus.ts new file mode 100644 index 0000000..ed9d372 --- /dev/null +++ b/src/renderer/src/plugins/elementPlus.ts @@ -0,0 +1,30 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-07-15 09:49:13 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-07-15 10:00:07 + * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\plugins\elementPlus.ts + * @Description: element-plus相关插件 + */ +import ElementPlus from 'element-plus' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' +import zhCn from 'element-plus/es/locale/lang/zh-cn' + +export default function setupElementPlus(app: App) { + // 自定义分页器文案 + zhCn.el.pagination = { + goto: '前往', + pageClassifier: '', + pagesize: '条/页', + total: '共 {total} 条' + } + // 全局注册所有图标 + for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) + } + app.use(ElementPlus, { + locale: zhCn, + size: 'large', // 全局组件尺寸 + zIndex: 3000 // 全局z-index + }) +} diff --git a/src/renderer/src/plugins/zhCnElement.ts b/src/renderer/src/plugins/zhCnElement.ts deleted file mode 100644 index d8d541c..0000000 --- a/src/renderer/src/plugins/zhCnElement.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * @Author: donghao donghao@supervision.ltd - * @Date: 2025-03-11 11:09:39 - * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-07-08 16:50:31 - * @FilePath: \5G-Loading-Bay-Web\src\plugins\zhCn.ts - * @Description: element-plus 中文 - */ -import zhCn from 'element-plus/es/locale/lang/zh-cn' - -// 自定义分页器文案 -zhCn.el.pagination = { - goto: '前往', - pageClassifier: '', - pagesize: '条/页', - total: '共 {total} 条' -} - -export default zhCn diff --git a/src/renderer/src/router/index.ts b/src/renderer/src/router/index.ts index 82b2b59..e3b86d9 100644 --- a/src/renderer/src/router/index.ts +++ b/src/renderer/src/router/index.ts @@ -2,16 +2,18 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-07-02 13:17:44 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-07-08 17:40:18 + * @LastEditTime: 2025-07-10 14:04:12 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\router\index.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import { createRouter, createWebHashHistory } from 'vue-router' import Home from '@views/Home/index.vue' import Design from '@views/Design/index.vue' +import TestLF from '@views/Test/logicFlow.vue' + export default createRouter({ history: createWebHashHistory(), //hash模式 - routes: [{ path: '/', component: Design }] //路由配置规则数组 + routes: [{ path: '/', component: Design }, { path: '/testLF', component: TestLF }] //路由配置规则数组 }) /** 重置路由 */ diff --git a/src/renderer/src/styles/base.scss b/src/renderer/src/styles/base.scss index 6020dd2..cd9225d 100644 --- a/src/renderer/src/styles/base.scss +++ b/src/renderer/src/styles/base.scss @@ -35,3 +35,29 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +// 美化滚动条 +::-webkit-scrollbar-track-piece { + -webkit-border-radius: 0; +} + +::-webkit-scrollbar { + width: 5px; + height: 10px; +} + +::-webkit-scrollbar-thumb { + height: 50px; + background-color: #ccc; + -webkit-border-radius: 6px; + outline-offset: -2px; + -moz-opacity: 0.5; + -khtml-opacity: 0.5; + opacity: 0.5; +} + +::-webkit-scrollbar-thumb:hover { + height: 50px; + background-color: #878987; + -webkit-border-radius: 6px; +} \ No newline at end of file diff --git a/src/renderer/src/styles/design.scss b/src/renderer/src/styles/design.scss index ae2c82a..5cc787d 100644 --- a/src/renderer/src/styles/design.scss +++ b/src/renderer/src/styles/design.scss @@ -1,10 +1,10 @@ + +@import url('./logic-flow-core.scss'); // 引入logicflow样式 .design-wrap { .design-header { - background-color: orange; height: 80px; } .design-content { - // background-color: red; height: calc(100vh - 80px); .design-panel-box { background-color: #373737; @@ -12,11 +12,15 @@ } .design-logic-flow-box { background-color: #242529; - width: calc((100% - 64px) * 0.4745); + width: 880px; } .design-content-right { background-color: #151515; - width: calc((100% - 64px) * 0.5255); + width: calc((100% - 64px) - 880px); + } + .design-main-container { + width: 100vw; + height: calc(100vh - 80px); } } } diff --git a/src/renderer/src/styles/element-plus.scss b/src/renderer/src/styles/element-plus.scss index 775914b..ab89977 100644 --- a/src/renderer/src/styles/element-plus.scss +++ b/src/renderer/src/styles/element-plus.scss @@ -2,6 +2,7 @@ @import url('element-plus/theme-chalk/dark/css-vars.css'); // 暗黑主题 @import url('@/styles/base.scss'); @import url('@/styles/global.scss'); + // 重置主题色变量 * { --el-color-primary: var(--ds-color-primary); // 主色调 diff --git a/src/renderer/src/styles/logic-flow-core.scss b/src/renderer/src/styles/logic-flow-core.scss new file mode 100644 index 0000000..548c5f2 --- /dev/null +++ b/src/renderer/src/styles/logic-flow-core.scss @@ -0,0 +1,214 @@ +.lf-graph { + position: relative; + z-index: 0; + width: 100%; + height: 100%; + background: #fff; + user-select: none; +} +.lf-element-text { + cursor: text; +} +.lf-text-disabled { + pointer-events: none; +} +.lf-text-draggable { + cursor: move; +} +*:focus { + outline: none; +} +.lf-node-anchor { + cursor: crosshair; +} +.lf-node-anchor-hover { + visibility: hidden; +} +.lf-anchor:hover .lf-node-anchor-hover { + visibility: visible; +} +.lf-edge.pointer-none { + pointer-events: none; +} +.lf-edge-append { + cursor: pointer; +} +.lf-edge-animation { + stroke-dashoffset: 100%; + animation: lf_animate_dash 5s linear infinite; +} +@keyframes lf_animate_dash { + to { + stroke-dashoffset: 0; + } +} +/* node */ +.lf-node-not-allow { + cursor: not-allowed; +} +.lf-polyline-append-ns-resize { + cursor: ns-resize; +} +.lf-polyline-append-ew-resize { + cursor: ew-resize; +} +.lf-dragging { + cursor: move; +} +.lf-dragging .lf-element-text { + cursor: move; +} +.lf-draggable { + cursor: default; +} +.lf-bezier-adjust-anchor { + cursor: pointer; +} +/* background */ +.lf-background, +.lf-grid { + position: absolute; + inset: 0; + z-index: -1; +} +.lf-background-area { + width: 100%; + height: 100%; +} +/* html-overlay */ +.lf-html-overlay { + position: absolute; + inset: 0; + z-index: 1; + overflow: hidden; + user-select: none; + pointer-events: none; +} +.lf-html-overlay__transform > * { + pointer-events: all; +} +.lf-text-editable { + pointer-events: all; +} +.lf-text-input { + position: absolute; + box-sizing: border-box; + min-width: 100px; + min-height: 20px; + padding: 5px; + line-height: 1.2; + white-space: pre; + text-align: center; + color: var(--ds-clort-text-1); + background: #ccc; + border: 1px solid #edefed; + border-radius: 3px; + outline: none; + transform: translate(-50%, -50%); + resize: none; +} +.lf-get-text-height { + display: inline-block; + box-sizing: border-box; + word-break: break-all; + /* 为了跟输入效果保持一致，设置透明边框占位 */ + border: 1px solid transparent; +} +.lf-node-text-auto-wrap { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + /* border: 1px solid transparent; */ +} +.lf-node-text-auto-wrap-content { + width: 100%; + line-height: 1.2; + text-align: center; + word-break: break-all; + background: transparent; +} +.lf-node-text-ellipsis-content { + width: 100%; + line-height: 1.2; + white-space: nowrap; + text-align: center; + background: transparent; + /* overflow: hidden; + text-overflow: ellipsis; */ +} +.lf-node-text-ellipsis-content > div { + overflow: hidden; + text-overflow: ellipsis; +} +/* tool-overlay */ +.lf-tool-overlay { + position: absolute; + inset: 0; + z-index: 2; + overflow: hidden; + pointer-events: none; +} +.lf-tool-overlay > * { + pointer-events: all; +} +/* modification-overlay */ +.modification-overlay { + position: absolute; + inset: 0; + z-index: 1; + overflow: hidden; + pointer-events: none; +} +.modification-overlay > * { + pointer-events: all; +} +.lf-outline, +.lf-snapline { + pointer-events: none; +} +.lf-keyboard-tips { + float: right; +} +.lf-node-select-decorate { + position: absolute; + border: 1px dashed #343435; + transform: translate(-50%, -50%); + pointer-events: none; +} +.lf-multiple-select { + position: absolute; + border: 2px dashed #187dffcc; + box-shadow: 0 0 3px 0 #187dff80; + cursor: move; +} +.lf-edge-adjust-point { + cursor: move; +} +.lf-rotate-control { + cursor: grabbing; +} +.lf-resize-control-nw { + cursor: nw-resize; +} +.lf-resize-control-n { + cursor: n-resize; +} +.lf-resize-control-ne { + cursor: ne-resize; +} +.lf-resize-control-e { + cursor: e-resize; +} +.lf-resize-control-se { + cursor: se-resize; +} +.lf-resize-control-s { + cursor: s-resize; +} +.lf-resize-control-sw { + cursor: sw-resize; +} +.lf-resize-control-w { + cursor: w-resize; +} diff --git a/src/renderer/src/views/Design/Controls/navCtrl.vue b/src/renderer/src/views/Design/Controls/navCtrl.vue index d836249..d31c611 100644 --- a/src/renderer/src/views/Design/Controls/navCtrl.vue +++ b/src/renderer/src/views/Design/Controls/navCtrl.vue @@ -1,8 +1,16 @@ +