From 06d4ada7c2d38b8dbf5feb830af1bf80008c40f8 Mon Sep 17 00:00:00 2001
From: "Mr.Z" <zrd0921@qq.com>
Date: Thu, 14 Jul 2022 05:40:09 +0800
Subject: [PATCH] feat: assist todo

---
 packages/assist/examples/basic.vue            |  90 ++++++++++-
 .../assist/examples/modules/array/editor.vue  |  27 ++++
 .../assist/examples/modules/array/root.jsx    |  50 ++++++
 .../assist/examples/modules/array/viewer.vue  |  32 ++++
 .../assist/examples/modules/page/editor.vue   |  30 ++++
 packages/assist/examples/modules/page/root.js |  35 +++++
 .../assist/examples/modules/page/viewer.vue   | 143 ++++++++++++++++++
 packages/assist/examples/modules/root.js      |  12 ++
 .../assist/examples/modules/tpl/editor.vue    |  33 ++++
 packages/assist/examples/modules/tpl/root.js  |  40 +++++
 .../assist/examples/modules/tpl/viewer.vue    |  32 ++++
 11 files changed, 522 insertions(+), 2 deletions(-)
 create mode 100755 packages/assist/examples/modules/array/editor.vue
 create mode 100755 packages/assist/examples/modules/array/root.jsx
 create mode 100755 packages/assist/examples/modules/array/viewer.vue
 create mode 100755 packages/assist/examples/modules/page/editor.vue
 create mode 100755 packages/assist/examples/modules/page/root.js
 create mode 100755 packages/assist/examples/modules/page/viewer.vue
 create mode 100755 packages/assist/examples/modules/root.js
 create mode 100755 packages/assist/examples/modules/tpl/editor.vue
 create mode 100755 packages/assist/examples/modules/tpl/root.js
 create mode 100755 packages/assist/examples/modules/tpl/viewer.vue

diff --git a/packages/assist/examples/basic.vue b/packages/assist/examples/basic.vue
index a1b7659..e7539bf 100644
--- a/packages/assist/examples/basic.vue
+++ b/packages/assist/examples/basic.vue
@@ -1,9 +1,95 @@
 <template>
-	// TODO
+	<div class="vm-hack-entry">
+		<div style="padding: 10px">
+			<vc-button @click="theme = theme === 'dark' ? 'light' : 'dark'">
+				主题: {{ theme }}
+			</vc-button>
+			<vc-button @click="showSlots = !showSlots">
+				头部/尾部: {{ showSlots ? '展示' : '隐藏' }}
+			</vc-button>
+			<vc-button @click="$refs.combo.preview()">
+				预览
+			</vc-button>
+			<vc-button @click="$refs.combo.undo()">
+				撤回
+			</vc-button>
+			<vc-button @click="$refs.combo.redo()">
+				取消撤回
+			</vc-button>
+		</div>
+
+		<!-- <vm-preview :data-source="list"/> -->
+		<vm-combo 
+			ref="combo"
+			v-model="list"
+			:frame-w="375"
+			:frame-h="606"
+			:editor-w="400"
+			:show-assist="false"
+			:width="style.width"
+			:height="style.height"
+			:modules="defaultModules"
+			mode="sortable"
+			@save="handleSave"
+			@error="handleError"
+		>
+			<template v-if="showSlots" #frame-header>
+				<div>header</div>
+			</template>
+			<template v-if="showSlots" #frame-footer>
+				<div>footer</div>
+			</template>
+		</vm-combo>
+	</div>
 </template>
 
-<script lang="ts" setup >
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { Message, Utils, Button as VcButton } from '@wya/vc';
+import { Combo as VmCombo } from '@wya/vm';
+import { defaultModules } from './modules/root';
+
+const { Resize } = Utils;
+
+const list = ref([
+	{
+		id: String(Math.random()),
+		module: 'page',
+	}
+]);
+
+const style = ref({
+	width: window.innerWidth - 40,
+	height: window.innerHeight - 60,
+});
+
+const theme = ref('dark');
+const showSlots = ref(false);
+
+
+const handleResize = () => {
+	// 需要减去padding值
+	style.value = {
+		width: window.innerWidth - 40,
+		height: window.innerHeight - 60,
+	};
+};
+
+const handleSave = (response) => {
+	console.log(response, list.value);
+};
+
+const handleError = ({ msg }) => {
+	Message.error(msg);
+};
+
+onMounted(() => {
+	Resize.on(document.body, handleResize);
+});
 
+onUnmounted(() => {
+	Resize.off(document.body, handleResize);
+});
 </script>
 
 <style lang="scss">
diff --git a/packages/assist/examples/modules/array/editor.vue b/packages/assist/examples/modules/array/editor.vue
new file mode 100755
index 0000000..15d4ff0
--- /dev/null
+++ b/packages/assist/examples/modules/array/editor.vue
@@ -0,0 +1,27 @@
+<template>
+	<div style="display: flex; flex-direction: column;" class="v-x">
+		<div>w: <input :value="$attrs.w" @input="handleChange($event, 'w')"></div>
+		<div>h: <input :value="$attrs.h" @input="handleChange($event, 'h')"></div>
+		<div>x: <input :value="$attrs.x" @input="handleChange($event, 'x')"></div>
+		<div>y: <input :value="$attrs.y" @input="handleChange($event, 'y')"></div>
+		<div>z: <input :value="$attrs.z" @input="handleChange($event, 'z')"></div>
+		<div>r: <input :value="$attrs.r" @input="handleChange($event, 'r')"></div>
+		<div>name: <input :value="$attrs.name" @input="handleChange($event, 'name')"></div>
+	</div>
+</template>
+
+<script setup>
+const emit = defineEmits(['change']);
+const handleChange = (e, key) => {
+	emit('change', { [key]: e.target.value });
+};
+</script>
+
+<style lang="scss">
+.v-x {
+	input {
+		margin: 10px;
+		border: 1px solid #000;
+	}
+}
+</style>
diff --git a/packages/assist/examples/modules/array/root.jsx b/packages/assist/examples/modules/array/root.jsx
new file mode 100755
index 0000000..40575b6
--- /dev/null
+++ b/packages/assist/examples/modules/array/root.jsx
@@ -0,0 +1,50 @@
+
+import Viewer from './viewer.vue';
+import Editor from './editor.vue';
+
+export const array = {
+	module: "array",
+	type: '营销',
+	name: "数组模版",
+	widgets: [
+		// 写法一
+		{
+			render() {
+				return (
+					<div>一行两列</div>
+				);
+			}
+		},
+		// 写法二
+		{
+			name: '一行两列',
+			image: 'https://avatars3.githubusercontent.com/u/34465004?s=200&v=4',
+		}
+	],
+	Viewer,
+	Editor, 
+	// 初始数据
+	data: (index) => ({
+		// for draggable
+		w: 200,
+		h: 150,
+		r: 0,
+		x: 0, // 动态分配
+		y: 0, // 动态分配
+		z: 1,
+		parent: false,
+		// for frame
+		closeable: true,
+		
+		// for content
+		name: `名称${index}`
+	}),
+	dataValidity: (res = {}) => {
+		if (!res.name) {
+			return {
+				error: "输入框内容必填"
+			};
+		}
+		return null;
+	}
+};
\ No newline at end of file
diff --git a/packages/assist/examples/modules/array/viewer.vue b/packages/assist/examples/modules/array/viewer.vue
new file mode 100755
index 0000000..5585118
--- /dev/null
+++ b/packages/assist/examples/modules/array/viewer.vue
@@ -0,0 +1,32 @@
+<template>
+	<div :style="[{ height: `${h ? `${h}px` : 'auto' }`, width: `${w ? `${w}px` : 'auto' }`, color: 'black' }]">
+		id: {{ id }} <br>
+		X: {{ x }} <br>
+		Y: {{ y }} <br>
+		Z: {{ z }} <br>
+		Width: {{ w ? w : 'auto' }} <br>
+		Height: {{ h ? h : 'auto' }} <br>
+		Rotate: {{ r }} <br>
+		Name: {{ name }} <br>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	vm: {
+		type: Object,
+		default: () => ({})
+	},
+	id: String,
+	x: Number,
+	y: Number,
+	z: Number,
+	w: Number,
+	h: Number,
+	r: Number,
+	name: [Number, String]
+});
+</script>
+
+<style lang="scss">
+</style>
diff --git a/packages/assist/examples/modules/page/editor.vue b/packages/assist/examples/modules/page/editor.vue
new file mode 100755
index 0000000..8c89db8
--- /dev/null
+++ b/packages/assist/examples/modules/page/editor.vue
@@ -0,0 +1,30 @@
+<template>
+	<div style="display: flex; flex-direction: column;">
+		<div style="padding: 20px;">
+			<span>屏幕大小：</span>
+			<InputNumber
+				:model-value="$attrs.w"
+				style="width: 88px; margin-right: 23px;"
+				@input="e => handleChange(e, 'w')"
+			/>
+			<InputNumber
+				v-model="$attrs.h"
+				style="width: 88px;"
+				@input="e => handleChange(e, 'h')"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { InputNumber } from '@wya/vc';
+
+const emit = defineEmits(['change']);
+
+const handleChange = (v, key) => {
+	emit('change', { [key]: v });
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/packages/assist/examples/modules/page/root.js b/packages/assist/examples/modules/page/root.js
new file mode 100755
index 0000000..ee5f116
--- /dev/null
+++ b/packages/assist/examples/modules/page/root.js
@@ -0,0 +1,35 @@
+import Viewer from './viewer.vue';
+import Editor from './editor.vue';
+
+export const page = {
+	module: "page",
+	Viewer,
+	Editor, 
+	// 初始数据
+	data: {
+		name: '',
+
+		w: window.screen.width,
+		h: window.screen.height,
+		parent: false, // 不能超过父级
+		// handles: [], // 可以控制操作handles
+		draggable: false, // 可以拖拽
+		rotatable: false, // 可以旋转
+		resizable: false, // 可以变化
+		// for frame
+		closeable: false,
+		active: false,
+		
+		dragProps: {
+			
+		}
+	},
+	dataValidity: (res = {}) => {
+		if (!res.w && !res.h) {
+			return {
+				error: "输入框内容必填"
+			};
+		}
+		return null;
+	}
+};
\ No newline at end of file
diff --git a/packages/assist/examples/modules/page/viewer.vue b/packages/assist/examples/modules/page/viewer.vue
new file mode 100755
index 0000000..524d0ed
--- /dev/null
+++ b/packages/assist/examples/modules/page/viewer.vue
@@ -0,0 +1,143 @@
+<template>
+	<div 
+		:style="[{ height: `${h ? `${h}px` : 'auto' }`, width: `${w ? `${w}px` : 'auto' }` }]"
+		class="vm-basic-page-viewer"
+		@mousedown.left="handleSelectionMouseDown"
+	>
+		<div 
+			class="vm-basic-page-viewer__bottom" 
+			@mousedown.left.stop="handleMouseDown(arguments[0], 'bottom')" 
+		/>
+		<div 
+			class="vm-basic-page-viewer__right" 
+			@mousedown.left.stop="handleMouseDown(arguments[0], 'right')" 
+		/>
+
+		<div 
+			class="vm-basic-page-viewer__bottom-right" 
+			@mousedown.left.stop="handleMouseDown(arguments[0], 'bottom-right')" 
+		/>		
+	</div>
+</template>
+
+<script setup>
+const emit = defineEmits(['change']);
+const props = defineProps({
+	vm: {
+		type: Object,
+		default: () => ({})
+	},
+	id: String,
+	x: Number,
+	y: Number,
+	z: Number,
+	w: Number,
+	h: Number,
+	r: Number,
+	scale: Number,
+	name: [Number, String],
+});
+const operateDOMEvents = (type) => {
+	let fn = type === 'add'
+		? document.documentElement.addEventListener
+		: document.documentElement.removeEventListener;
+
+	fn('mouseup', handleMouseUp);
+	fn('mousemove', handleMouseMove);
+};
+
+let startH;
+let startW;
+let startX;
+let startY;
+let handle;
+let hasRecord;
+
+const handleMouseDown = (e, $handle) => {
+	startH = props.h;
+	startW = props.w;
+
+	startX = e.clientX;
+	startY = e.clientY;
+
+	handle = $handle;
+	operateDOMEvents('add');
+
+	hasRecord = false;
+};
+
+const handleMouseMove = (e) => {
+	if (!hasRecord) {
+		// 用于撤回操作
+		emit('change', {
+			w: props.w, 
+			h: props.h, 
+			history: true
+		});
+		hasRecord = true;
+	}
+	let x = (e.clientX - startX) / props.scale;
+	let y = (e.clientY - startY) / props.scale;
+	let el = document.querySelector('.vm-frame-draggable__wrapper');
+
+	// TODO: 滚动
+	if (handle.includes('bottom')) {
+		emit('change', { h: startH + y, history: false });
+		el.scrollTop = el.scrollHeight - el.clientHeight;
+	}
+
+	if (handle.includes('right')) {
+		emit('change', { w: startW + x, history: false });
+		el.scrollLeft = el.scrollWidth - el.clientWidth;
+	}
+};
+
+const handleMouseUp = () => {
+	// 用于撤回操作
+	operateDOMEvents('remove');
+};
+
+
+const handleSelectionMouseDown = (e) => {
+	e.stopPropagation(); // 阻止page被设置为activited
+
+	const el = document.querySelector('.vm-selection');
+	el && el.dispatchEvent(new MouseEvent('mousedown', e));
+};
+
+</script>
+
+<style lang="scss">
+$size: 4px;
+
+.vm-basic-page-viewer {
+	position: relative;
+
+	&__bottom {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		cursor: ns-resize;
+		border-bottom: $size solid transparent;
+	}
+
+	&__right {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		cursor: ew-resize;
+		border-right: $size solid transparent;
+	}
+
+	&__bottom-right {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		width: $size * 4;
+		height: $size * 4;
+		cursor: nwse-resize;
+	}
+}
+</style>
diff --git a/packages/assist/examples/modules/root.js b/packages/assist/examples/modules/root.js
new file mode 100755
index 0000000..38d2a38
--- /dev/null
+++ b/packages/assist/examples/modules/root.js
@@ -0,0 +1,12 @@
+/**
+ * roots
+ */
+import { tpl } from './tpl/root';
+import { array } from './array/root';
+import { page } from './page/root';
+
+export const defaultModules = [
+	tpl,
+	array,
+	page
+];
diff --git a/packages/assist/examples/modules/tpl/editor.vue b/packages/assist/examples/modules/tpl/editor.vue
new file mode 100755
index 0000000..e9ce559
--- /dev/null
+++ b/packages/assist/examples/modules/tpl/editor.vue
@@ -0,0 +1,33 @@
+<template>
+	<div style="display: flex; flex-direction: column;">
+		{{ x }}
+		<div>w: <input :value="w" @input="handleChange($event, 'w')"></div>
+		<div>h: <input :value="h" @input="handleChange($event, 'h')"></div>
+		<div>x: <input :value="x" @input="handleChange($event, 'x')"></div>
+		<div>y: <input :value="y" @input="handleChange($event, 'y')"></div>
+		<div>z: <input :value="z" @input="handleChange($event, 'z')"></div>
+		<div>r: <input :value="r" @input="handleChange($event, 'r')"></div>
+		<div>name: <input :value="name" @input="handleChange($event, 'name')"></div>
+	</div>
+</template>
+
+<script setup>
+	
+const emit = defineEmits(['change']);
+defineProps({
+	w: Number,
+	h: Number,
+	r: Number,
+	x: Number,
+	y: Number,
+	z: Number,
+	name: [Number, String],
+});
+
+const handleChange = (e, key) => {
+	emit('change', { [key]: e.target.value });
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/packages/assist/examples/modules/tpl/root.js b/packages/assist/examples/modules/tpl/root.js
new file mode 100755
index 0000000..47aba69
--- /dev/null
+++ b/packages/assist/examples/modules/tpl/root.js
@@ -0,0 +1,40 @@
+
+import Viewer from './viewer.vue';
+import Editor from './editor.vue';
+
+export const tpl = {
+	module: "tpl",
+	type: '基础',
+	name: "模版",
+	Viewer,
+	Editor, 
+	// 初始数据
+	data: {
+		// for draggable
+		w: 200,
+		h: 200,
+		r: 0,
+		x: 0, // 动态分配
+		y: 0, // 动态分配
+		z: 1,
+		parent: true, // 不能超过父级
+		// handles: [], // 可以控制操作handles
+		draggable: true, // 可以拖拽
+		rotatable: true, // 可以旋转
+		resizable: true, // 可以变化
+		// for frame
+		closeable: true,
+		active: false,
+		
+		// for content
+		name: '名称'
+	},
+	dataValidity: (res = {}) => {
+		if (!res.name) {
+			return {
+				error: "输入框内容必填"
+			};
+		}
+		return null;
+	}
+};
\ No newline at end of file
diff --git a/packages/assist/examples/modules/tpl/viewer.vue b/packages/assist/examples/modules/tpl/viewer.vue
new file mode 100755
index 0000000..3aafdc9
--- /dev/null
+++ b/packages/assist/examples/modules/tpl/viewer.vue
@@ -0,0 +1,32 @@
+<template>
+	<div :style="[{ height: `${h ? `${h}px` : 'auto' }`, width: `${w ? `${w}px` : 'auto' }`, color: 'black' }]">
+		id: {{ id }} <br>
+		X: {{ x }} <br>
+		Y: {{ y }} <br>
+		Z: {{ z }} <br>
+		Width: {{ w ? w : 'auto' }} <br>
+		Height: {{ h ? h : 'auto' }} <br>
+		Rotate: {{ r }} <br>
+		Name: {{ name }} <br>
+		<input style="background: red;" type="text">
+		<br>
+		<input style=" pointer-events: none; background: yellow;" type="text">
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	vm: {
+		type: Object,
+		default: () => ({})
+	},
+	id: String,
+	x: Number,
+	y: Number,
+	z: Number,
+	w: Number,
+	h: Number,
+	r: Number,
+	name: [Number, String],
+});
+</script>