feat: assist todo

wya-team · Jul 13, 2022 · 06d4ada · 06d4ada
1 parent 8be5ae7
commit 06d4ada
Show file tree

Hide file tree

Showing 11 changed files with 522 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;
+	}
+};
diff --git a/packages/assist/examples/modules/array/viewer.vue 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
@@ -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
@@ -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;
+	}
+};