.gitignore

@@ -20,3 +20,4 @@ selenium-debug.log
 *.local
 
 package-lock.json
+echarts.js

src/router/index.js

@@ -64,6 +64,11 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/error/401'], resolve),
     hidden: true
   },
+  {
+    path: '/print-design',
+    component: (resolve) => require(['@/views/print/design'], resolve),
+    hidden: true
+  },
   {
     path: '/',
     component: Layout,

src/views/print/design.vue

@@ -0,0 +1,203 @@
+<!-- 
+    filename: design.vue
+    author: liubin
+    date: 2023-10-07 13:14:40
+    description: 设计打印模板
+-->
+
+<template>
+	<div class="print-design">
+		<section id="menu">
+			<NavMenu @action="handleAction" :menu="menu" />
+		</section>
+		<section id="main-panel">
+			<section id="left-panel"></section>
+			<section id="edit-panel"></section>
+			<section id="right-panel"></section>
+		</section>
+	</div>
+</template>
+
+<script>
+const NavSelector = {
+	name: 'NavSelector',
+	props: ['name', 'options'],
+	data() {
+		return {
+			open: false,
+		};
+	},
+	methods: {
+		handleOpen() {
+            this.$emit('closeOtherMenu', this)
+			this.open = !this.open;
+		},
+        handleClickItem(e) {
+            this.$emit('click', e.target.innerText)
+        },
+		// 暴露一个close方法，供父组件调用
+		closeSubMenu() {
+			this.open = false;
+		},
+	},
+	render: function (h) {
+		return (
+			<li class={'nav-selector__item'} onClick={this.handleOpen}>
+				<span class={'nav-selector__name'}>{this.name}</span>
+				<ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}>
+					{this.options.map((item) => {
+						return <li onClick={this.handleClickItem}>{item}</li>;
+					})}
+				</ul>
+			</li>
+		);
+	},
+};
+
+const NavMenu = {
+	name: 'NavMenu',
+	props: ['menu'],
+	components: { NavSelector },
+	data() {
+        return {}
+    },
+	methods: {
+        handleCloseOtherMenu(vueInstance) {
+            this.$children.forEach(vm => {
+                if (vm != vueInstance) {
+                    vm.closeSubMenu()
+                }
+            })
+        },
+        handleItemClicked(e) {
+            this.$emit('action', e);
+        }
+    },
+	render: function (h) {
+		return (
+			<ul class={'nav-menu'}>
+				{this.menu.map((item) => {
+					return <NavSelector onClick={this.handleItemClicked} onCloseOtherMenu={this.handleCloseOtherMenu} name={item.name} options={item.options} />;
+				})}
+			</ul>
+		);
+	},
+};
+
+export default {
+	name: 'PrintDesignPage ',
+	components: { NavMenu },
+	props: {},
+	data() {
+		return {
+			menu: [
+				{
+					name: '菜单',
+					options: ['新建', '打开', '保存', '另存为', '导出', '打印', '退出'],
+				},
+				{
+					name: '视图',
+					options: ['编辑', '布局'],
+				},
+			],
+		};
+	},
+	computed: {},
+	methods: {
+        handleAction(name) {
+            console.log('name', name)
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.print-design {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+#main-panel {
+	height: 1px;
+	flex: 1;
+	display: grid;
+	grid-template-columns: 200px 1fr 200px;
+	grid-auto-rows: 1fr;
+	grid-template-areas: 'left main right';
+}
+
+#menu {
+	// background: black;
+	// color: white;
+	background: #fff;
+	border-bottom: 1px solid #ccc;
+
+	> ul {
+		// background: #32aa32;
+		list-style: none;
+		padding: 6px;
+		margin: 0;
+		display: flex;
+
+		li {
+			padding: 0;
+		}
+	}
+}
+
+#left-panel {
+	grid-area: left;
+	background: #f1f1f1;
+}
+
+#edit-panel {
+	grid-area: main;
+	background: #e1e1e1;
+}
+
+#right-panel {
+	grid-area: right;
+	background: #f1f1f1;
+}
+</style>
+
+<style lang="scss">
+// 子组件的样式
+.nav-selector__item {
+	position: relative;
+	cursor: pointer;
+
+	&:not(:last-child) {
+		margin-right: 12px;
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		position: absolute;
+		top: 128%;
+		min-width: 128px;
+		left: -6px;
+		background: #fff;
+		border: 1px solid #ccc;
+		// border-radius: 4px;
+		margin: 0;
+		box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+		z-index: 100;
+
+		li {
+			padding: 2px 6px;
+			cursor: pointer;
+			&:hover {
+				background: #f1f1f1;
+			}
+		}
+	}
+
+	.hidden {
+		display: none;
+	}
+}
+</style>