From 4872e5352bd312379f6046f0b824e94fcd45052b Mon Sep 17 00:00:00 2001 From: roymondchen Date: Thu, 25 Aug 2022 15:25:04 +0800 Subject: [PATCH] =?UTF-8?q?chore(editor):=20=E9=87=8D=E6=9E=84tool-button?= =?UTF-8?q?=EF=BC=8C=E5=B0=86=E5=8A=9F=E8=83=BD=E9=80=BB=E8=BE=91=E7=A7=BB?= =?UTF-8?q?=E5=88=B0nav-menu=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/package.json | 2 +- packages/editor/package.json | 2 +- packages/editor/src/Editor.vue | 6 +- .../editor/src/components/ContentMenu.vue | 8 +- packages/editor/src/components/Icon.vue | 26 +-- packages/editor/src/components/ToolButton.vue | 180 ++++-------------- packages/editor/src/index.ts | 1 + packages/editor/src/layouts/NavMenu.vue | 160 +++++++++++++--- .../editor/src/layouts/sidebar/LayerMenu.vue | 6 +- .../src/layouts/workspace/ViewerMenu.vue | 6 +- packages/editor/src/theme/nav-menu.scss | 6 + packages/editor/src/type.ts | 29 ++- packages/form/package.json | 2 +- playground/package.json | 2 +- pnpm-lock.yaml | 22 +-- 15 files changed, 236 insertions(+), 222 deletions(-) diff --git a/docs/package.json b/docs/package.json index c2334341..7189dd43 100644 --- a/docs/package.json +++ b/docs/package.json @@ -8,7 +8,7 @@ "build": "npm run clean:top && vuepress build src -d dist" }, "dependencies": { - "@element-plus/icons-vue": "^2.0.6", + "@element-plus/icons-vue": "^2.0.9", "@tmagic/form": "1.1.0-beta.12", "@tmagic/schema": "1.1.0-beta.12", "@tmagic/utils": "1.1.0-beta.12", diff --git a/packages/editor/package.json b/packages/editor/package.json index 654a87b3..71437c50 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -44,7 +44,7 @@ ], "dependencies": { "@babel/core": "^7.18.0", - "@element-plus/icons-vue": "^2.0.6", + "@element-plus/icons-vue": "^2.0.9", "@tmagic/core": "1.1.0-beta.12", "@tmagic/form": "1.1.0-beta.12", "@tmagic/schema": "1.1.0-beta.12", diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue index c2f14a1f..ba12f1b4 100644 --- a/packages/editor/src/Editor.vue +++ b/packages/editor/src/Editor.vue @@ -64,7 +64,7 @@ import historyService from './services/history'; import propsService from './services/props'; import storageService from './services/storage'; import uiService from './services/ui'; -import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type'; +import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type'; export default defineComponent({ name: 'm-editor', @@ -97,12 +97,12 @@ export default defineComponent({ }, layerContentMenu: { - type: Array as PropType, + type: Array as PropType<(MenuButton | MenuComponent)[]>, default: () => [], }, stageContentMenu: { - type: Array as PropType, + type: Array as PropType<(MenuButton | MenuComponent)[]>, default: () => [], }, diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue index 52e130b5..ca53e4c7 100644 --- a/packages/editor/src/components/ContentMenu.vue +++ b/packages/editor/src/components/ContentMenu.vue @@ -25,13 +25,13 @@ diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue index f9eeb7f7..123d3912 100644 --- a/packages/editor/src/components/ToolButton.vue +++ b/packages/editor/src/components/ToolButton.vue @@ -2,169 +2,80 @@
- -
{{ item.text }}
+ +
{{ data.text }}
- - - diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue index 579a6dd2..032a8bbb 100644 --- a/packages/editor/src/layouts/sidebar/LayerMenu.vue +++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue @@ -9,7 +9,7 @@ import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue'; import { NodeType } from '@tmagic/schema'; import ContentMenu from '../../components/ContentMenu.vue'; -import type { ComponentGroup, MenuButton, MenuItem, Services } from '../../type'; +import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type'; export default defineComponent({ components: { ContentMenu }, @@ -22,7 +22,7 @@ export default defineComponent({ const isPage = computed(() => node.value?.type === NodeType.PAGE); const componentList = computed(() => services?.componentListService.getList() || []); - const layerContentMenu = inject('layerContentMenu', []); + const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []); const createMenuItems = (group: ComponentGroup): MenuButton[] => group.items.map((component) => ({ @@ -77,7 +77,7 @@ export default defineComponent({ return { menu, - menuData: computed(() => [ + menuData: computed<(MenuButton | MenuComponent)[]>(() => [ { type: 'button', text: '新增', diff --git a/packages/editor/src/layouts/workspace/ViewerMenu.vue b/packages/editor/src/layouts/workspace/ViewerMenu.vue index 00350eec..45c85735 100644 --- a/packages/editor/src/layouts/workspace/ViewerMenu.vue +++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue @@ -12,7 +12,7 @@ import { isPage } from '@tmagic/utils'; import ContentMenu from '../../components/ContentMenu.vue'; import storageService from '../../services/storage'; -import { LayerOffset, Layout, MenuItem, Services } from '../../type'; +import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type'; import { COPY_STORAGE_KEY } from '../../utils/editor'; const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false }); @@ -28,9 +28,9 @@ const nodes = computed(() => editorService?.get('nodes')); const parent = computed(() => editorService?.get('parent')); const stage = computed(() => editorService?.get('stage')); -const stageContentMenu = inject('stageContentMenu', []); +const stageContentMenu = inject<(MenuButton | MenuComponent)[]>('stageContentMenu', []); -const menuData = reactive([ +const menuData = reactive<(MenuButton | MenuComponent)[]>([ { type: 'button', text: '水平居中', diff --git a/packages/editor/src/theme/nav-menu.scss b/packages/editor/src/theme/nav-menu.scss index be8ecb78..8ed833fc 100644 --- a/packages/editor/src/theme/nav-menu.scss +++ b/packages/editor/src/theme/nav-menu.scss @@ -69,5 +69,11 @@ .menu-item-text { color: $--nav-color; } + + &.rule { + .el-icon { + transform: rotate(-90deg); + } + } } } diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index 4f96706c..e04318d0 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -82,16 +82,22 @@ export interface ComponentGroupState { list: ComponentGroup[]; } +export enum ColumnLayout { + LEFT = 'left', + CENTER = 'center', + RIGHT = 'right', +} + export interface SetColumnWidth { - left?: number; - center?: number | 'auto'; - right?: number; + [ColumnLayout.LEFT]?: number; + [ColumnLayout.CENTER]?: number | 'auto'; + [ColumnLayout.RIGHT]?: number; } export interface GetColumnWidth { - left: number; - center: number; - right: number; + [ColumnLayout.LEFT]: number; + [ColumnLayout.CENTER]: number; + [ColumnLayout.RIGHT]: number; } export interface StageRect { @@ -174,6 +180,7 @@ export interface MenuButton { /** type为button/dropdown时点击运行的方法 */ handler?: (data: Services, event: MouseEvent) => Promise | any; /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */ + className?: string; items?: MenuButton[]; } @@ -187,6 +194,7 @@ export interface MenuComponent { listeners?: Record; slots?: Record; /** 是否显示，默认为true */ + className?: string; display?: boolean | ((data?: Services) => Promise | boolean); } @@ -209,16 +217,17 @@ export type MenuItem = | 'guides' | 'rule' | MenuButton - | MenuComponent; + | MenuComponent + | string; /** 工具栏 */ export interface MenuBarData { /** 顶部工具栏左边项 */ - left?: MenuItem[]; + [ColumnLayout.LEFT]?: MenuItem[]; /** 顶部工具栏中间项 */ - center?: MenuItem[]; + [ColumnLayout.CENTER]?: MenuItem[]; /** 顶部工具栏右边项 */ - right?: MenuItem[]; + [ColumnLayout.RIGHT]?: MenuItem[]; } export interface SideComponent extends MenuComponent { diff --git a/packages/form/package.json b/packages/form/package.json index 28c652a2..788b3f02 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -34,7 +34,7 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "dependencies": { - "@element-plus/icons-vue": "^2.0.6", + "@element-plus/icons-vue": "^2.0.9", "@tmagic/utils": "1.1.0-beta.12", "element-plus": "^2.2.6", "lodash-es": "^4.17.21", diff --git a/playground/package.json b/playground/package.json index 0d387282..fded6e73 100644 --- a/playground/package.json +++ b/playground/package.json @@ -11,7 +11,7 @@ "serve": "vite preview" }, "dependencies": { - "@element-plus/icons-vue": "^2.0.6", + "@element-plus/icons-vue": "^2.0.9", "@tmagic/editor": "1.1.0-beta.12", "@tmagic/form": "1.1.0-beta.12", "@tmagic/schema": "1.1.0-beta.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 66d28e91..6bed6cc3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,7 +74,7 @@ importers: docs: specifiers: - '@element-plus/icons-vue': ^2.0.6 + '@element-plus/icons-vue': ^2.0.9 '@tmagic/form': 1.1.0-beta.12 '@tmagic/schema': 1.1.0-beta.12 '@tmagic/utils': 1.1.0-beta.12 @@ -92,7 +92,7 @@ importers: vue: ^3.2.37 vuepress: ^2.0.0-beta.49 dependencies: - '@element-plus/icons-vue': 2.0.6_vue@3.2.37 + '@element-plus/icons-vue': 2.0.9_vue@3.2.37 '@tmagic/form': link:../packages/form '@tmagic/schema': link:../packages/schema '@tmagic/utils': link:../packages/utils @@ -154,7 +154,7 @@ importers: packages/editor: specifiers: '@babel/core': ^7.18.0 - '@element-plus/icons-vue': ^2.0.6 + '@element-plus/icons-vue': ^2.0.9 '@tmagic/core': 1.1.0-beta.12 '@tmagic/form': 1.1.0-beta.12 '@tmagic/schema': 1.1.0-beta.12 @@ -184,7 +184,7 @@ importers: vue-tsc: ^0.39.4 dependencies: '@babel/core': 7.18.2 - '@element-plus/icons-vue': 2.0.6_vue@3.2.37 + '@element-plus/icons-vue': 2.0.9_vue@3.2.37 '@tmagic/core': link:../core '@tmagic/form': link:../form '@tmagic/schema': link:../schema @@ -217,7 +217,7 @@ importers: packages/form: specifiers: '@babel/core': ^7.18.0 - '@element-plus/icons-vue': ^2.0.6 + '@element-plus/icons-vue': ^2.0.9 '@tmagic/utils': 1.1.0-beta.12 '@types/lodash-es': ^4.17.4 '@types/node': ^15.12.4 @@ -235,7 +235,7 @@ importers: vue: ^3.2.37 vue-tsc: ^0.39.4 dependencies: - '@element-plus/icons-vue': 2.0.6_vue@3.2.37 + '@element-plus/icons-vue': 2.0.9_vue@3.2.37 '@tmagic/utils': link:../utils element-plus: 2.2.6_vue@3.2.37 lodash-es: 4.17.21 @@ -427,7 +427,7 @@ importers: playground: specifiers: - '@element-plus/icons-vue': ^2.0.6 + '@element-plus/icons-vue': ^2.0.9 '@tmagic/editor': 1.1.0-beta.12 '@tmagic/form': 1.1.0-beta.12 '@tmagic/schema': 1.1.0-beta.12 @@ -450,7 +450,7 @@ importers: vue-router: ^4.0.10 vue-tsc: ^0.39.4 dependencies: - '@element-plus/icons-vue': 2.0.6_vue@3.2.37 + '@element-plus/icons-vue': 2.0.9_vue@3.2.37 '@tmagic/editor': link:../packages/editor '@tmagic/form': link:../packages/form '@tmagic/schema': link:../packages/schema @@ -1175,8 +1175,8 @@ packages: resolution: {integrity: sha512-HsbMKc0ZAQH+EUeCmI/2PvTYSybmkaWwakU8QGDYYgMVIg9BQ5sM0A0Nnombjxo2+JzXHxmH+jw//yGX+y6GYw==} dev: false - /@element-plus/icons-vue/2.0.6_vue@3.2.37: - resolution: {integrity: sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew==} + /@element-plus/icons-vue/2.0.9_vue@3.2.37: + resolution: {integrity: sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==} peerDependencies: vue: ^3.2.0 dependencies: @@ -3324,7 +3324,7 @@ packages: vue: ^3.2.0 dependencies: '@ctrl/tinycolor': 3.4.1 - '@element-plus/icons-vue': 2.0.6_vue@3.2.37 + '@element-plus/icons-vue': 2.0.9_vue@3.2.37 '@floating-ui/dom': 0.5.4 '@popperjs/core': /@sxzz/popperjs-es/2.11.7 '@types/lodash': 4.14.182