From 2076a87f19d662324f85a4558147f9ae5d1d75c2 Mon Sep 17 00:00:00 2001
From: juetan <contact@juetan.cn>
Date: Tue, 10 Oct 2023 22:48:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/{items => blocks}/index.ts         |   0
 .../editor/{items => blocks}/text/index.ts    |   0
 .../{items => blocks}/text/interface.ts       |   0
 .../editor/{items => blocks}/text/option.vue  |  17 +-
 .../editor/{items => blocks}/text/render.vue  |   0
 .../editor/components/ImagePicker.vue         | 187 +++++++++++++++++-
 .../editor/components/InputColor.vue          |  26 +++
 .../editor/components/InputImage.vue          |  29 +++
 src/components/editor/components/mock.ts      |  29 +++
 src/components/editor/config/block.ts         |   2 +-
 src/components/editor/config/container.ts     |  10 +-
 src/components/editor/config/context.ts       |   7 +-
 src/components/editor/index.vue               |  20 +-
 src/components/editor/panel-left/index.vue    |   4 +-
 .../editor/panel-main/components/block.vue    |  12 +-
 .../editor/panel-main/components/header.vue   |  95 ++++-----
 .../editor/panel-main/components/texter.vue   |  47 +++++
 src/components/editor/panel-main/index.vue    |  36 ++--
 src/components/editor/panel-right/index.vue   |   7 +-
 src/components/editor/preview/index.vue       |  13 ++
 src/types/auto-component.d.ts                 |  23 ++-
 vite.config.ts                                |   8 +-
 22 files changed, 444 insertions(+), 128 deletions(-)
 rename src/components/editor/{items => blocks}/index.ts (100%)
 rename src/components/editor/{items => blocks}/text/index.ts (100%)
 rename src/components/editor/{items => blocks}/text/interface.ts (100%)
 rename src/components/editor/{items => blocks}/text/option.vue (76%)
 rename src/components/editor/{items => blocks}/text/render.vue (100%)
 create mode 100644 src/components/editor/components/InputColor.vue
 create mode 100644 src/components/editor/components/InputImage.vue
 create mode 100644 src/components/editor/components/mock.ts
 create mode 100644 src/components/editor/panel-main/components/texter.vue
 create mode 100644 src/components/editor/preview/index.vue

diff --git a/src/components/editor/items/index.ts b/src/components/editor/blocks/index.ts
similarity index 100%
rename from src/components/editor/items/index.ts
rename to src/components/editor/blocks/index.ts
diff --git a/src/components/editor/items/text/index.ts b/src/components/editor/blocks/text/index.ts
similarity index 100%
rename from src/components/editor/items/text/index.ts
rename to src/components/editor/blocks/text/index.ts
diff --git a/src/components/editor/items/text/interface.ts b/src/components/editor/blocks/text/interface.ts
similarity index 100%
rename from src/components/editor/items/text/interface.ts
rename to src/components/editor/blocks/text/interface.ts
diff --git a/src/components/editor/items/text/option.vue b/src/components/editor/blocks/text/option.vue
similarity index 76%
rename from src/components/editor/items/text/option.vue
rename to src/components/editor/blocks/text/option.vue
index 9d45710..ef4205b 100644
--- a/src/components/editor/items/text/option.vue
+++ b/src/components/editor/blocks/text/option.vue
@@ -7,9 +7,7 @@
             <a-tooltip content="固定水平方向">
               <i
                 class="cursor-pointer text-gray-400 hover:text-gray-700"
-                :class="
-                  data.xFixed ? 'icon-park-outline-lock text-gray-900' : 'icon-park-outline-unlock text-gray-400'
-                "
+                :class="data.xFixed ? 'icon-park-outline-lock text-gray-900' : 'icon-park-outline-unlock text-gray-400'"
                 @click="data.xFixed = !data.xFixed"
               ></i>
             </a-tooltip>
@@ -22,9 +20,7 @@
             <a-tooltip content="固定垂直方向">
               <i
                 class="cursor-pointer text-gray-400 hover:text-gray-700"
-                :class="
-                  data.yFixed ? 'icon-park-outline-lock text-gray-900' : 'icon-park-outline-unlock text-gray-400'
-                "
+                :class="data.yFixed ? 'icon-park-outline-lock text-gray-900' : 'icon-park-outline-unlock text-gray-400'"
                 @click="data.yFixed = !data.yFixed"
               ></i>
             </a-tooltip>
@@ -43,11 +39,7 @@
     </div>
 
     <a-form-item label="背景图片">
-      <a-input v-model="data.bgImage" class="group w-full" allow-clear placeholder="暂无">
-        <template #prefix>
-          <a-link class="!text-xs">选择</a-link>
-        </template>
-      </a-input>
+      <input-image v-model="data.bgImage"></input-image>
     </a-form-item>
 
     <a-form-item label="背景颜色">
@@ -62,6 +54,7 @@
 
 <script setup lang="ts">
 import { PropType } from "vue";
+import InputImage from "../../components/InputImage.vue";
 
 defineProps({
   data: {
@@ -70,5 +63,3 @@ defineProps({
   },
 });
 </script>
-
-<style scoped></style>
diff --git a/src/components/editor/items/text/render.vue b/src/components/editor/blocks/text/render.vue
similarity index 100%
rename from src/components/editor/items/text/render.vue
rename to src/components/editor/blocks/text/render.vue
diff --git a/src/components/editor/components/ImagePicker.vue b/src/components/editor/components/ImagePicker.vue
index 8079942..185bdcc 100644
--- a/src/components/editor/components/ImagePicker.vue
+++ b/src/components/editor/components/ImagePicker.vue
@@ -1,16 +1,189 @@
 <template>
-  <a-modal title="选择图片" v-model:visible="visible" title-align="start" :closable="false">
-    <div class="flex flex-wrap gap-4">
-      <div v-for="item in images" :key="item" class="w-24 h-24 bg-gray-200 flex items-center justify-center">
-        <img :src="item" class="w-full h-full object-cover" />
+  <a-modal
+    v-model:visible="innerVisible"
+    title="选择图片"
+    title-align="start"
+    :width="1080"
+    :closable="false"
+    :mask-closable="false"
+    :ok-button-props="{ disabled: !seleted.length }"
+  >
+    <div class="w-full flex items-center justify-between gap-4">
+      <div>
+        <a-button type="outline" class="!text-gray-700 !border-gray-300">
+          <template #icon>
+            <i class="icon-park-outline-upload"></i>
+          </template>
+          上传
+        </a-button>
+      </div>
+      <div>
+        <a-input-search
+          :disabled="loading"
+          class="!w-48 mr-2"
+          placeholder="请输入素材名称"
+          @search="loadData"
+        ></a-input-search>
       </div>
     </div>
+    <a-spin :loading="loading" :dot="true" tip="正在加载中，请稍等..." class="h-[450px] w-full">
+      <div class="h-[450px] grid grid-cols-5 grid-rows-2 items-start justify-between gap-4 mt-2">
+        <div
+          v-for="item in images"
+          :key="item.title"
+          :class="{
+            selected: selectedKeys.includes(item.id),
+          }"
+          class="p-2 border border-transparent rounded"
+          @click="onSelectedImage(item)"
+        >
+          <div class="w-full bg-gray-50 flex items-center justify-center">
+            <img :src="item.url" class="w-full aspect-video object-cover rounded hover:opacity-80" />
+          </div>
+          <div class="mt-2 flex items-center gap-2">
+            <div class="flex-1 truncate">
+              {{ item.title }}
+            </div>
+            <div class="text-xs text-gray-400">1280 * 800</div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-2 flex justify-end">
+        <a-pagination
+          v-model:current="pagination.page"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :disabled="loading"
+          @change="loadData"
+          @page-size-change="loadData"
+        ></a-pagination>
+      </div>
+    </a-spin>
+    <template #footer>
+      <div class="flex items-center justify-between gap-4">
+        <div>已选: {{ seleted.length }} 项</div>
+        <div>
+          <a-button class="mr-2" @click="onClose">取消</a-button>
+          <a-button type="primary" @click="onBeforeOk" :disabled="!seleted.length">确定</a-button>
+        </div>
+      </div>
+    </template>
   </a-modal>
 </template>
 
 <script setup lang="ts">
-const visible = ref(false);
-const images = ref([]);
+import { mockLoad } from "./mock";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  load: {
+    type: Function,
+    default: mockLoad,
+  },
+});
+
+const loadData = async () => {
+  const { page, size } = pagination.value;
+  const params = { ...search.value, page, size };
+  try {
+    loading.value = true;
+    const { data, total } = await props.load(params);
+    images.value = data;
+    pagination.value.total = total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const pagination = ref({ page: 1, size: 15, total: 0 });
+const search = ref({ name: "" });
+const loading = ref(false);
+const images = ref<any[]>([]);
+const seleted = ref<any[]>([]);
+const selectedKeys = computed(() => seleted.value.map((item) => item.id));
+
+const onBeforeOk = () => {
+  emit("update:modelValue", seleted.value[0]?.url);
+  onClose();
+};
+
+const onClose = () => {
+  seleted.value = [];
+  images.value = [];
+  pagination.value.page = 1;
+  pagination.value.total = 0;
+  search.value.name = "";
+  innerVisible.value = false;
+};
+
+const onSelectedImage = (image: any) => {
+  if (selectedKeys.value.includes(image.id)) {
+    seleted.value = seleted.value.filter((item) => item.id !== image.id);
+  } else {
+    if (!props.multiple) {
+      seleted.value = [image];
+      return;
+    }
+    seleted.value.push(image);
+  }
+};
+
+watch(
+  () => props.visible,
+  async (value) => {
+    if (!value) return;
+
+    loadData();
+  }
+);
+
+const emit = defineEmits(["update:modelValue", "update:visible"]);
+
+const innerVisible = computed({
+  get: () => props.visible,
+  set: (value) => emit("update:visible", value),
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.selected {
+  position: relative;
+  border-color: rgb(var(--primary-6));
+  background-color: rgb(var(--primary-1));
+  cursor: pointer;
+}
+.selected:after {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  width: 0;
+  height: 0;
+  border-bottom: 20px solid #09f;
+  border-left: 20px solid transparent;
+}
+.selected:before {
+  content: "";
+  position: absolute;
+  bottom: 5px;
+  right: 1px;
+  width: 10px;
+  height: 5px;
+  border: 2px solid white;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-55deg);
+  z-index: 2;
+}
+</style>
diff --git a/src/components/editor/components/InputColor.vue b/src/components/editor/components/InputColor.vue
new file mode 100644
index 0000000..a72e62f
--- /dev/null
+++ b/src/components/editor/components/InputColor.vue
@@ -0,0 +1,26 @@
+<template>
+  <a-input v-model="model">
+    <template #prefix>
+      <color-picker v-model="model"></color-picker>
+    </template>
+  </a-input>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/editor/components/InputImage.vue b/src/components/editor/components/InputImage.vue
new file mode 100644
index 0000000..687cb42
--- /dev/null
+++ b/src/components/editor/components/InputImage.vue
@@ -0,0 +1,29 @@
+<template>
+  <a-input v-model="model" class="group w-full" allow-clear placeholder="暂无">
+    <template #prefix>
+      <a-link @click="visible = true">选择</a-link>
+    </template>
+  </a-input>
+  <image-picker v-model="model" v-model:visible="visible"></image-picker>
+</template>
+
+<script setup lang="ts">
+import ImagePicker from './ImagePicker.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const visible = ref(false);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/editor/components/mock.ts b/src/components/editor/components/mock.ts
new file mode 100644
index 0000000..b291da2
--- /dev/null
+++ b/src/components/editor/components/mock.ts
@@ -0,0 +1,29 @@
+const sleep = (time: number) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, time);
+  });
+};
+
+interface MockParams {
+  page: number;
+  size: number;
+}
+
+export const mockLoad = async (params: MockParams) => {
+  const { page, size } = params;
+  await sleep(1000);
+  const counts = Array(15).fill(9);
+  const data = counts.map((v, i) => {
+    return {
+      id: (page - 1) * size + i,
+      title: "图片1",
+      url: `https://source.unsplash.com/random?sig=${(page - 1) * size + i}`,
+    };
+  });
+  return {
+    data,
+    total: 100,
+  };
+};
diff --git a/src/components/editor/config/block.ts b/src/components/editor/config/block.ts
index 4123ef4..25838e6 100644
--- a/src/components/editor/config/block.ts
+++ b/src/components/editor/config/block.ts
@@ -11,7 +11,7 @@ export interface Block<T = any> {
   bgColor?: string;
   data: T;
   meta: Record<string, any>;
-  actived: false,
+  actived: boolean,
   resizable: boolean,
   draggable: boolean,
 }
diff --git a/src/components/editor/config/container.ts b/src/components/editor/config/container.ts
index e4722f3..ee69fdd 100644
--- a/src/components/editor/config/container.ts
+++ b/src/components/editor/config/container.ts
@@ -1,11 +1,13 @@
 
 export interface Container {
   id: number | string;
+  x: number;
+  y: number;
+  zoom: number;
   title: string;
-  description?: string;
+  description: string;
   width: number;
   height: number;
-  bgImage?: string;
-  bgColor?: string;
-  zoom: number;
+  bgImage: string;
+  bgColor: string;
 }
diff --git a/src/components/editor/config/context.ts b/src/components/editor/config/context.ts
index 1a3f228..ff06b35 100644
--- a/src/components/editor/config/context.ts
+++ b/src/components/editor/config/context.ts
@@ -3,12 +3,13 @@ import { Block } from "./block";
 import { Container } from "./container";
 
 export interface Context {
-  current: {
-    block: Block;
-  };
+  current: Ref<{
+    block: Block | null;
+  }>;
   blocks: Ref<Block[]>;
   container: Ref<Container>;
   setCurrentBlock: (block: Block) => void;
+  setContainerOrigin: () => void;
 }
 
 export const ContextKey = Symbol('ContextKey') as InjectionKey<Context>;
diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue
index 941940b..42f412b 100644
--- a/src/components/editor/index.vue
+++ b/src/components/editor/index.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script setup lang="ts">
-import { ContextKey } from "./config";
+import { Block, Container, ContextKey } from "./config";
 import PanelHeader from "./panel-header/index.vue";
 import PanelLeft from "./panel-left/index.vue";
 import PanelMain from "./panel-main/index.vue";
 import PanelRight from "./panel-right/index.vue";
 
-const blocks = ref<Block>([]);
+const blocks = ref<Block[]>([]);
 
 const current = ref({
   block: null as Block | null,
@@ -36,30 +36,40 @@ const container = ref<Container>({
   id: 11,
   title: "国庆节喜庆版式设计",
   description: "适用于国庆节1日-7日间上午9:00-10:00播出的版式设计",
+  x: 0,
+  y: 0,
+  zoom: 0.7,
   width: 1920,
   height: 1080,
   bgImage: "",
   bgColor: "#ffffff",
-  zoom: 1,
 });
 
 const setCurrentBlock = (block: Block | null) => {
   for (const block of blocks.value) {
-    block.active = false;
+    block.actived = false;
   }
   if (!block) {
     current.value.block = null;
     return;
   }
-  block.active = true;
+  block.actived = true;
   current.value.block = block;
 };
 
+// 恢复画布到原始比例和远点
+const setContainerOrigin = () => {
+  container.value.x = 0;
+  container.value.y = 0;
+  container.value.zoom = 0.7;
+};
+
 provide(ContextKey, {
   current,
   container,
   blocks,
   setCurrentBlock,
+  setContainerOrigin,
 });
 </script>
 
diff --git a/src/components/editor/panel-left/index.vue b/src/components/editor/panel-left/index.vue
index 97bce3a..9192dc2 100644
--- a/src/components/editor/panel-left/index.vue
+++ b/src/components/editor/panel-left/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full grid grid-cols-[auto_1fr]" :style="{ width: !collapsed ? '248px' : undefined }">
     <div class="h-full grid grid-rows-[1fr_auto] border-r border-slate-200">
-      <a-menu :collapsed="true">
+      <a-menu :collapsed="true" :default-selected-keys="['0_0']">
         <a-menu-item key="0_0">
           <template #icon>
             <i class="icon-park-outline-all-application"></i>
@@ -57,7 +57,7 @@
 <script setup lang="ts">
 const collapsed = ref(false);
 
-const onDragStart = (e: Event) => {
+const onDragStart = (e: DragEvent) => {
   console.log('start');
   e.dataTransfer?.setData("type", (e.target as HTMLElement).dataset.type!);
 }
diff --git a/src/components/editor/panel-main/components/block.vue b/src/components/editor/panel-main/components/block.vue
index 4f2f196..0ff5917 100644
--- a/src/components/editor/panel-main/components/block.vue
+++ b/src/components/editor/panel-main/components/block.vue
@@ -6,11 +6,11 @@
     :h="data.h"
     :parentW="container.width"
     :parentH="container.height"
-    :parentScaleX="container.zoom / 100"
-    :parentScaleY="container.zoom / 100"
+    :parentScaleX="container.zoom"
+    :parentScaleY="container.zoom"
     :parentLimitation="true"
     :preventActiveBehavior="!data.draggable"
-    :isActive="data.active"
+    :isActive="data.actived"
     :isResizable="data.resizable"
     :style="blockStyle"
     @dragging="onItemDragOrResize"
@@ -23,9 +23,9 @@
 
 <script setup lang="ts">
 import { PropType } from "vue";
-import { Block, Container, ContextKey } from "../../config";
-import { BlockerMap } from "../../items";
+import { BlockerMap } from "../../blocks";
 import DragResizer from "../../components/DragResizer.vue";
+import { Block, Container, ContextKey } from "../../config";
 
 const props = defineProps({
   data: {
@@ -38,7 +38,7 @@ const props = defineProps({
   },
 });
 
-const { setCurrentBlock } = inject(ContextKey);
+const { setCurrentBlock } = inject(ContextKey)!;
 
 const blockStyle = computed(() => {
   const { bgColor, bgImage } = props.data;
diff --git a/src/components/editor/panel-main/components/header.vue b/src/components/editor/panel-main/components/header.vue
index 6578e8f..c1537ac 100644
--- a/src/components/editor/panel-main/components/header.vue
+++ b/src/components/editor/panel-main/components/header.vue
@@ -3,43 +3,33 @@
     <div class="flex-1">
       <div class="group">
         <span class="text-gray-400">描述: </span>
-        <span v-if="!descEditing">
-          {{ container.description }}
-          <i
-            class="!hidden !group-hover:inline-block icon-park-outline-edit text-gray-400 hover:text-gray-700 ml-1 cursor-pointer"
-            @click="onDescEdit"
-          ></i>
-        </span>
-        <span v-else class="inline-flex items-center">
-          <a-input size="small" v-model="descContent" class="!w-96"></a-input>
-          <a-button type="text" size="small" @click="onDescEdited" class="ml-2">
-            <template #icon>
-              <i class="icon-park-outline-check"></i>
-            </template>
-          </a-button>
-          <a-button type="text" size="small" class="!text-gray-500" @click="descEditing = false">
-            <template #icon>
-              <i class="icon-park-outline-close"></i>
-            </template>
-          </a-button>
-        </span>
+        <ani-texter v-model="container.description"></ani-texter>
       </div>
     </div>
     <div class="flex items-center">
-      <span class="text-gray-400 text-xs mr-2">
+      <span class="text-gray-400 text-xs mr-3">
+        坐标：
+        <span class="text-gray-700">{{ Math.floor(container.x) }} , {{ Math.floor(container.y) }} </span>
+      </span>
+      <span class="text-gray-400 text-xs mr-3">
         尺寸：
-        <span class="text-gray-700"> {{ container.width }} * {{ container.height }} </span>
+        <span class="text-gray-700">{{ container.width }} * {{ container.height }} </span>
       </span>
       <span class="text-gray-400 text-xs mr-2">
         比例：
-        <span class="text-gray-700">
-          {{ parseInt(container.zoom * 100) }}%
-        </span>
+        <span class="inline-block w-8 text-gray-700">{{ Math.floor(container.zoom * 100) }}% </span>
       </span>
       <span class="text-gray-400 text-xs mr-2">
         组件：
-        <span class="text-gray-700">{{ 2 }} 个</span>
+        <span class="inline-block w-6 text-gray-700">{{ blocks.length }} 个</span>
       </span>
+      <a-tooltip content="自适应比例" position="bottom">
+        <a-button type="text" @click="setContainerOrigin">
+          <template #icon>
+            <i class="icon-park-outline-equal-ratio text-base !text-gray-600"></i>
+          </template>
+        </a-button>
+      </a-tooltip>
       <a-tooltip content="预览" position="bottom">
         <a-button type="text">
           <template #icon>
@@ -48,20 +38,24 @@
         </a-button>
       </a-tooltip>
       <a-popover position="br" trigger="click">
-        <a-button type="text">
-          <template #icon>
-            <i class="icon-park-outline-config text-base !text-gray-600"></i>
-          </template>
-        </a-button>
+        <a-tooltip content="设置" position="bottom">
+          <a-button type="text">
+            <template #icon>
+              <i class="icon-park-outline-config text-base !text-gray-600"></i>
+            </template>
+          </a-button>
+        </a-tooltip>
         <template #content>
-          <span>
-            背景图片:
-            <a-link>选择</a-link>
-          </span>
-          <span class="inline-flex items-center">
-            背景颜色：
-            <color-picker></color-picker>
-          </span>
+          <a-form :model="{}" layout="vertical">
+            <div class="muti-form-item">
+              <a-form-item label="背景图片">
+                <input-image v-model="container.bgImage"></input-image>
+              </a-form-item>
+              <a-form-item label="背景颜色">
+                <input-color v-model="container.bgColor"></input-color>
+              </a-form-item>
+            </div>
+          </a-form>
         </template>
       </a-popover>
     </div>
@@ -69,25 +63,12 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  container: {
-    type: Object as PropType<any>,
-    required: true,
-  },
-});
+import InputColor from "../../components/InputColor.vue";
+import InputImage from "../../components/InputImage.vue";
+import { ContextKey } from "../../config";
+import AniTexter from "./texter.vue";
 
-const descEditing = ref(false);
-const descContent = ref("");
-
-const onDescEdited = () => {
-  props.container.description = descContent.value;
-  descEditing.value = false;
-};
-
-const onDescEdit = () => {
-  descContent.value = props.container.description;
-  descEditing.value = true;
-};
+const { container, blocks, setContainerOrigin } = inject(ContextKey)!;
 </script>
 
 <style scoped></style>
diff --git a/src/components/editor/panel-main/components/texter.vue b/src/components/editor/panel-main/components/texter.vue
new file mode 100644
index 0000000..f310257
--- /dev/null
+++ b/src/components/editor/panel-main/components/texter.vue
@@ -0,0 +1,47 @@
+<template>
+  <span v-if="!descEditing">
+    {{ modelValue }}
+    <i
+      class="!hidden !group-hover:inline-block icon-park-outline-edit text-gray-400 hover:text-gray-700 ml-1 cursor-pointer"
+      @click="onDescEdit"
+    ></i>
+  </span>
+  <span v-else class="inline-flex items-center">
+    <a-input size="small" v-model="descContent" class="!w-96"></a-input>
+    <a-button type="text" size="small" @click="onDescEdited" class="ml-2">
+      <template #icon>
+        <i class="icon-park-outline-check"></i>
+      </template>
+    </a-button>
+    <a-button type="text" size="small" class="!text-gray-500" @click="descEditing = false">
+      <template #icon>
+        <i class="icon-park-outline-close"></i>
+      </template>
+    </a-button>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const descEditing = ref(false);
+const descContent = ref("");
+
+const onDescEdited = () => {
+  emit("update:modelValue", descContent.value);
+  descEditing.value = false;
+};
+
+const onDescEdit = () => {
+  descContent.value = props.modelValue;
+  descEditing.value = true;
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/editor/panel-main/index.vue b/src/components/editor/panel-main/index.vue
index bb130a5..6943a73 100644
--- a/src/components/editor/panel-main/index.vue
+++ b/src/components/editor/panel-main/index.vue
@@ -22,10 +22,11 @@
 </template>
 
 <script setup lang="ts">
-import ColorPicker from "../components/ColorPicker.vue";
+import { ContextKey } from "../config";
 import AniBlock from "./components/block.vue";
 import AniHeader from "./components/header.vue";
-import { Block, ContextKey, Container } from "../config";
+
+const { blocks, container } = inject(ContextKey)!;
 
 const isStart = ref(false);
 const position = ref({
@@ -37,19 +38,19 @@ const position = ref({
   mouseY: 0,
 });
 
-const onMouseDown = (e: Event) => {
+const onMouseDown = (e: MouseEvent) => {
   isStart.value = true;
   position.value.startX = e.offsetX;
   position.value.startY = e.offsetY;
 };
 
-const onMouseMove = (e: Event) => {
+const onMouseMove = (e: MouseEvent) => {
   if (!isStart.value) {
     return;
   }
   const scale = container.value.zoom;
-  position.value.x += (e.offsetX - position.value.startX) * scale;
-  position.value.y += (e.offsetY - position.value.startY) * scale;
+  container.value.x += (e.offsetX - position.value.startX) * scale;
+  container.value.y += (e.offsetY - position.value.startY) * scale;
 };
 
 const onMouseUp = () => {
@@ -64,11 +65,8 @@ onUnmounted(() => {
   window.removeEventListener("mouseup", onMouseUp);
 });
 
-const { blocks, container } = inject(ContextKey);
-
 const containerStyle = computed(() => {
-  const { width, height, bgColor, bgImage, zoom } = container.value;
-  const { x, y } = position.value;
+  const { width, height, bgColor, bgImage, zoom, x, y } = container.value;
   return {
     position: "absolute",
     width: `${width}px`,
@@ -76,13 +74,13 @@ const containerStyle = computed(() => {
     backgroundColor: bgColor,
     backgroundImage: bgImage ? `url(${bgImage})` : undefined,
     backgroundSize: "100% 100%",
-    // transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom})`,
-    transform: `matrix(${zoom}, 0, 0, ${zoom}, ${x}, ${y})`,
+    transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom})`,
+    // transform: `matrix(${zoom}, 0, 0, ${zoom}, ${x}, ${y})`,
     // transformOrigin: "0 0",
-  };
+  } as any;
 });
 
-const onDragDrop = (e: Event) => {
+const onDragDrop = (e: DragEvent) => {
   e.preventDefault();
   e.stopPropagation();
 
@@ -92,8 +90,7 @@ const onDragDrop = (e: Event) => {
   }
 
   blocks.value.push({
-    x: 0,
-    y: 0,
+    id: "0",
     w: 200,
     h: 100,
     bgColor: "#0099ff",
@@ -104,6 +101,9 @@ const onDragDrop = (e: Event) => {
     type,
     x: e.offsetX,
     y: e.offsetY,
+    data: {},
+    meta: {},
+    actived: false,
   });
 };
 
@@ -111,14 +111,12 @@ const onMouseWheel = (e: WheelEvent) => {
   e.preventDefault();
   const prezoom = container.value.zoom;
   let zoom = prezoom;
-  if (e.wheelDelta > 0) {
-    console.log("放大");
+  if (e.deltaY > 0) {
     zoom += 0.1;
     if (zoom > 10) {
       return;
     }
   } else {
-    console.log("缩小");
     zoom -= 0.1;
     if (zoom < 0.1) {
       return;
diff --git a/src/components/editor/panel-right/index.vue b/src/components/editor/panel-right/index.vue
index 991e548..5c3dbf4 100644
--- a/src/components/editor/panel-right/index.vue
+++ b/src/components/editor/panel-right/index.vue
@@ -17,12 +17,11 @@
 </template>
 
 <script setup lang="ts">
-import BlockAttr from "./block-attr.vue";
-import TextAttr from "./text-attr.vue";
+import { BlockerMap } from "../blocks";
 import { ContextKey } from "../config";
-import BlockerMap from "../items";
+import TextAttr from "./text-attr.vue";
 
-const { current } = inject(ContextKey);
+const { current } = inject(ContextKey)!;
 
 const item = ref<any>({
   x: 0,
diff --git a/src/components/editor/preview/index.vue b/src/components/editor/preview/index.vue
new file mode 100644
index 0000000..542020b
--- /dev/null
+++ b/src/components/editor/preview/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/types/auto-component.d.ts b/src/types/auto-component.d.ts
index 02e7d41..de38408 100644
--- a/src/types/auto-component.d.ts
+++ b/src/types/auto-component.d.ts
@@ -7,25 +7,34 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAvatar: typeof import('@arco-design/web-vue')['Avatar']
     AButton: typeof import('@arco-design/web-vue')['Button']
-    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
     ADivider: typeof import('@arco-design/web-vue')['Divider']
     ADoption: typeof import('@arco-design/web-vue')['Doption']
+    ADrawer: typeof import('@arco-design/web-vue')['Drawer']
+    ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
     ADropdownButton: typeof import('@arco-design/web-vue')['DropdownButton']
     AForm: typeof import('@arco-design/web-vue')['Form']
     AFormItem: typeof import('@arco-design/web-vue')['FormItem']
     AInput: typeof import('@arco-design/web-vue')['Input']
     AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
-    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
+    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
+    ALayout: typeof import('@arco-design/web-vue')['Layout']
+    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
+    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
+    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
     ALink: typeof import('@arco-design/web-vue')['Link']
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
+    AMenuItemGroup: typeof import('@arco-design/web-vue')['MenuItemGroup']
     AModal: typeof import('@arco-design/web-vue')['Modal']
+    APagination: typeof import('@arco-design/web-vue')['Pagination']
     APopover: typeof import('@arco-design/web-vue')['Popover']
     ARadio: typeof import('@arco-design/web-vue')['Radio']
     ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
+    AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
     ASelect: typeof import('@arco-design/web-vue')['Select']
-    ASpace: typeof import('@arco-design/web-vue')['Space']
+    ASpin: typeof import('@arco-design/web-vue')['Spin']
     ATag: typeof import('@arco-design/web-vue')['Tag']
     ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
@@ -38,16 +47,20 @@ declare module '@vue/runtime-core' {
     Editor: typeof import('./../components/editor/index.vue')['default']
     Header: typeof import('./../components/editor/panel-main/components/header.vue')['default']
     ImagePicker: typeof import('./../components/editor/components/ImagePicker.vue')['default']
-    Option: typeof import('./../components/editor/items/text/option.vue')['default']
+    InputColor: typeof import('./../components/editor/components/InputColor.vue')['default']
+    InputImage: typeof import('./../components/editor/components/InputImage.vue')['default']
+    Option: typeof import('./../components/editor/blocks/text/option.vue')['default']
     Page403: typeof import('./../components/error/page-403.vue')['default']
     PanelHeader: typeof import('./../components/editor/panel-header/index.vue')['default']
     PanelLeft: typeof import('./../components/editor/panel-left/index.vue')['default']
     PanelMain: typeof import('./../components/editor/panel-main/index.vue')['default']
     PanelRight: typeof import('./../components/editor/panel-right/index.vue')['default']
-    Render: typeof import('./../components/editor/items/text/render.vue')['default']
+    Preview: typeof import('./../components/editor/preview/index.vue')['default']
+    Render: typeof import('./../components/editor/blocks/text/render.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TextAttr: typeof import('./../components/editor/panel-right/text-attr.vue')['default']
+    Texter: typeof import('./../components/editor/panel-main/components/texter.vue')['default']
     Toast: typeof import('./../components/toast/toast.vue')['default']
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index dac6e3f..66d6d61 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,9 +8,9 @@ import { ArcoResolver } from "unplugin-vue-components/resolvers";
 import AutoComponent from "unplugin-vue-components/vite";
 import { defineConfig, loadEnv } from "vite";
 import Page from "vite-plugin-pages";
-import plugin from "./scripts/vite/plugin";
 import { arcoToUnoColor } from "./scripts/vite/color";
 import fileIcon from "./scripts/vite/icon-file.json";
+import plugin from "./scripts/vite/plugin";
 
 /**
  * vite 配置
@@ -51,7 +51,11 @@ export default defineConfig(({ mode }) => {
        * 提供 Vue 3 单文件组件支持
        * @see https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue
        */
-      Vue({}),
+      Vue({
+        script: {
+          defineModel: true
+        } 
+      }),
 
       /**
        * 提供 Vue 3 JSX 支持