update print page

src/views/print/design.vue

@@ -11,14 +11,26 @@
 			<NavMenu @action="handleAction" :menu="menu" />
 		</section>
 		<section id="main-panel">
-			<section id="left-panel"></section>
+			<section id="left-panel">
+				<h2>组件</h2>
+				<div id="components"></div>
+			</section>
 			<section id="edit-panel"></section>
-			<section id="right-panel"></section>
+			<section id="right-panel">
+				<h2>设置</h2>
+				<div id="settings"></div>
+			</section>
 		</section>
 	</div>
 </template>
 
 <script>
+
+import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
+hiprint.init({
+  providers: [defaultElementTypeProvider()],
+});
+
 const NavSelector = {
 	name: 'NavSelector',
 	props: ['name', 'options'],
@@ -29,12 +41,13 @@ const NavSelector = {
 	},
 	methods: {
 		handleOpen() {
-            this.$emit('closeOtherMenu', this)
+			// this.$emit('closeOtherMenu', this)
+			// this.$emit('hover', this)
 			this.open = !this.open;
 		},
-        handleClickItem(e) {
-            this.$emit('click', e.target.innerText)
-        },
+		handleClickItem(e) {
+			this.$emit('click', e.target.innerText)
+		},
 		// 暴露一个close方法，供父组件调用
 		closeSubMenu() {
 			this.open = false;
@@ -42,7 +55,7 @@ const NavSelector = {
 	},
 	render: function (h) {
 		return (
-			<li class={'nav-selector__item'} onClick={this.handleOpen}>
+			<li class={'nav-selector__item'} onMouseenter={this.handleOpen} onMouseleave={this.handleOpen}>
 				<span class={'nav-selector__name'}>{this.name}</span>
 				<ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}>
 					{this.options.map((item) => {
@@ -59,20 +72,20 @@ const NavMenu = {
 	props: ['menu'],
 	components: { NavSelector },
 	data() {
-        return {}
-    },
+		return {}
+	},
 	methods: {
-        handleCloseOtherMenu(vueInstance) {
-            this.$children.forEach(vm => {
-                if (vm != vueInstance) {
-                    vm.closeSubMenu()
-                }
-            })
-        },
-        handleItemClicked(e) {
-            this.$emit('action', e);
-        }
-    },
+		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'}>
@@ -85,11 +98,12 @@ const NavMenu = {
 };
 
 export default {
-	name: 'PrintDesignPage ',
+	name: 'PrintDesignPage',
 	components: { NavMenu },
 	props: {},
 	data() {
 		return {
+			hiprintTemplate: null,
 			menu: [
 				{
 					name: '菜单',
@@ -103,11 +117,28 @@ export default {
 		};
 	},
 	computed: {},
+	mounted() {
+		this.loadSideBar();
+		this.loadDesigner();
+	},
 	methods: {
-        handleAction(name) {
-            console.log('name', name)
-        }
-    },
+		loadDesigner() {
+			$("#edit-panel").empty();  
+			this.hiprintTemplate = new hiprint.PrintTemplate({
+				settingContainer: "#settings",
+			});
+			this.hiprintTemplate.design("#edit-panel");
+		},
+		loadSideBar() {
+			this.loadProviders();
+			this.loadSettings();
+		},
+		loadProviders() { },
+		loadSettings() { },
+		handleAction(name) {
+			console.log('name', name)
+		}
+	},
 };
 </script>
 
@@ -122,7 +153,7 @@ export default {
 	height: 1px;
 	flex: 1;
 	display: grid;
-	grid-template-columns: 200px 1fr 200px;
+	grid-template-columns: 1fr 3fr 1fr;
 	grid-auto-rows: 1fr;
 	grid-template-areas: 'left main right';
 }
@@ -133,43 +164,68 @@ export default {
 	background: #fff;
 	border-bottom: 1px solid #ccc;
 
-	> ul {
+	>ul {
 		// background: #32aa32;
+		padding: 0;
 		list-style: none;
-		padding: 6px;
 		margin: 0;
+		margin-left: 10px;
 		display: flex;
-
-		li {
-			padding: 0;
-		}
 	}
 }
 
 #left-panel {
+	overflow: auto;
 	grid-area: left;
-	background: #f1f1f1;
+	background: #fff;
+	
+	h2 {
+		margin: 0;
+		font-weight: 400;
+		padding: 4px 20px;
+		border-bottom: 1px solid #ccc;
+		background: #ccc;
+	}
 }
 
 #edit-panel {
+	padding: 20px;
+	overflow: auto;
 	grid-area: main;
-	background: #e1e1e1;
+	justify-items: center;
+	background: #fff;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
 }
 
 #right-panel {
+	overflow: auto;
 	grid-area: right;
-	background: #f1f1f1;
+	background: #fff;
+
+	h2 {
+		margin: 0;
+		font-weight: 400;
+		padding: 4px 12px;
+		border-bottom: 1px solid #ccc;
+		background: #ccc;
+	}
 }
 </style>
 
 <style lang="scss">
 // 子组件的样式
 .nav-selector__item {
+	font-size: 18px;
+	letter-spacing: 1px;
+	// font-weight: 600;
+	padding: 6px 12px;
+	line-height: 1.25;
 	position: relative;
 	cursor: pointer;
 
-	&:not(:last-child) {
-		margin-right: 12px;
+	&:hover {
+		background: #f1f1f1;
 	}
 
 	ul {
@@ -177,9 +233,9 @@ export default {
 		margin: 0;
 		padding: 0;
 		position: absolute;
-		top: 128%;
+		top: 100%;
 		min-width: 128px;
-		left: -6px;
+		left: 0px;
 		background: #fff;
 		border: 1px solid #ccc;
 		// border-radius: 4px;
@@ -188,8 +244,9 @@ export default {
 		z-index: 100;
 
 		li {
-			padding: 2px 6px;
+			padding: 6px 12px;
 			cursor: pointer;
+
 			&:hover {
 				background: #f1f1f1;
 			}