From 417acc6c64f52c3492b06ea12f9c12b11cbe0042 Mon Sep 17 00:00:00 2001
From: Guo Tiantian <1431335589@qq.com>
Date: Fri, 12 Sep 2025 00:03:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E5=88=86=E9=85=8D=E7=88=B6=E5=AD=90=E8=81=94=E5=8A=A8=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E6=A0=B9=E6=8D=AE=E4=BF=9D=E5=AD=98=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=8A=A8=E6=80=81=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/gencode/backcode/README.md | 153 +++
 .../gencode/backcode/components/Canvas.vue    | 407 +++++++
 .../backcode/components/CanvasComponent.vue   | 378 +++++++
 .../backcode/components/ComponentRenderer.vue | 628 +++++++++++
 .../gencode/backcode/components/Inspector.vue | 473 +++++++++
 .../gencode/backcode/components/Palette.vue   | 355 +++++++
 .../backcode/components/PropertyEditor.vue    | 466 ++++++++
 frontend/src/views/gencode/backcode/index.vue | 997 +++---------------
 .../views/gencode/backcode/utils/schema.ts    | 606 +++++++++++
 .../gencode/backcode/utils/serializer.ts      | 412 ++++++++
 .../role/components/PermissonDrawer.vue       |  66 +-
 11 files changed, 4092 insertions(+), 849 deletions(-)
 create mode 100644 frontend/src/views/gencode/backcode/README.md
 create mode 100644 frontend/src/views/gencode/backcode/components/Canvas.vue
 create mode 100644 frontend/src/views/gencode/backcode/components/CanvasComponent.vue
 create mode 100644 frontend/src/views/gencode/backcode/components/ComponentRenderer.vue
 create mode 100644 frontend/src/views/gencode/backcode/components/Inspector.vue
 create mode 100644 frontend/src/views/gencode/backcode/components/Palette.vue
 create mode 100644 frontend/src/views/gencode/backcode/components/PropertyEditor.vue
 create mode 100644 frontend/src/views/gencode/backcode/utils/schema.ts
 create mode 100644 frontend/src/views/gencode/backcode/utils/serializer.ts

diff --git a/frontend/src/views/gencode/backcode/README.md b/frontend/src/views/gencode/backcode/README.md
new file mode 100644
index 00000000..b7f55a2b
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/README.md
@@ -0,0 +1,153 @@
+# 低代码页面生成器
+
+一个基于 Vue3 + TypeScript + Element Plus 的可视化页面生成器，支持拖拽式组件设计和代码生成。
+
+## 功能特性
+
+- 🎨 **可视化设计**: 拖拽式组件设计，所见即所得
+- 📦 **丰富组件**: 支持所有 Element Plus 组件
+- ⚙️ **属性编辑**: 实时编辑组件属性
+- 💾 **模板管理**: 保存和加载页面模板
+- 🔧 **代码生成**: 生成完整的 Vue3 + TypeScript 代码
+- 📱 **响应式**: 支持移动端适配
+
+## 文件结构
+
+```
+src/views/gencode/backcode/
+├── index.vue              # 主界面
+├── components/
+│   ├── Palette.vue        # 左侧组件库
+│   ├── Canvas.vue         # 中间画布
+│   ├── CanvasComponent.vue # 画布中的组件
+│   ├── Inspector.vue      # 右侧属性面板
+│   └── PropertyEditor.vue # 属性编辑器
+└── utils/
+    ├── schema.ts          # 组件 Schema 定义
+    └── serializer.ts      # 代码生成器
+```
+
+## 使用方法
+
+### 1. 添加组件
+- 从左侧组件库拖拽组件到中间画布
+- 或点击组件快速添加
+
+### 2. 编辑组件
+- 点击画布中的组件选中
+- 在右侧属性面板编辑属性
+- 支持样式、事件、插槽等设置
+
+### 3. 生成代码
+- 点击顶部"生成代码"按钮
+- 代码会自动复制到剪贴板
+- 可选择下载为 .vue 文件
+
+### 4. 保存模板
+- 点击"保存模板"按钮
+- 输入模板名称和描述
+- 模板会保存到本地存储
+
+## 支持的组件类型
+
+### 基础组件
+- 按钮 (el-button)
+- 链接 (el-link)
+- 文本 (el-text)
+- 图标 (el-icon)
+
+### 布局组件
+- 行 (el-row)
+- 列 (el-col)
+- 容器 (el-container)
+
+### 表单组件
+- 输入框 (el-input)
+- 选择器 (el-select)
+- 单选框 (el-radio)
+- 复选框 (el-checkbox)
+- 开关 (el-switch)
+- 滑块 (el-slider)
+- 日期选择器 (el-date-picker)
+- 时间选择器 (el-time-picker)
+- 上传 (el-upload)
+- 评分 (el-rate)
+- 颜色选择器 (el-color-picker)
+
+### 数据展示组件
+- 卡片 (el-card)
+- 表格 (el-table)
+- 轮播图 (el-carousel)
+- 折叠面板 (el-collapse)
+- 描述列表 (el-descriptions)
+- 空状态 (el-empty)
+- 图片 (el-image)
+- 分页 (el-pagination)
+- 进度条 (el-progress)
+- 结果页 (el-result)
+- 骨架屏 (el-skeleton)
+- 统计数值 (el-statistic)
+- 标签 (el-tag)
+- 时间线 (el-timeline)
+- 树形控件 (el-tree)
+
+### 导航组件
+- 固钉 (el-affix)
+- 面包屑 (el-breadcrumb)
+- 下拉菜单 (el-dropdown)
+- 菜单 (el-menu)
+- 页面头部 (el-page-header)
+- 步骤条 (el-steps)
+- 标签页 (el-tabs)
+
+### 反馈组件
+- 警告提示 (el-alert)
+- 抽屉 (el-drawer)
+- 加载 (el-loading)
+- 消息提示 (el-message)
+- 消息确认框 (el-message-box)
+- 通知 (el-notification)
+- 气泡确认框 (el-popconfirm)
+- 弹出框 (el-popover)
+- 文字提示 (el-tooltip)
+
+### 其他组件
+- 回到顶部 (el-backtop)
+- 分割线 (el-divider)
+- 水印 (el-watermark)
+
+## 技术栈
+
+- **Vue 3**: 使用 Composition API
+- **TypeScript**: 完整的类型支持
+- **Element Plus**: UI 组件库
+- **Vite**: 构建工具
+- **SCSS**: 样式预处理器
+
+## 开发说明
+
+### 添加新组件
+1. 在 `utils/schema.ts` 中添加组件类型
+2. 在 `COMPONENT_CONFIGS` 中配置组件属性
+3. 在 `COMPONENT_CATEGORIES` 中分类组件
+
+### 自定义属性编辑器
+1. 在 `PropertyEditor.vue` 中添加新的属性类型
+2. 实现对应的编辑器组件
+3. 更新属性验证逻辑
+
+### 扩展代码生成
+1. 在 `serializer.ts` 中添加新的生成逻辑
+2. 支持自定义模板和样式
+3. 添加代码格式化功能
+
+## 注意事项
+
+- 组件 ID 必须唯一
+- 属性值需要符合 Element Plus 组件规范
+- 生成的代码需要手动验证和测试
+- 复杂布局建议使用栅格系统
+
+## 许可证
+
+MIT License
diff --git a/frontend/src/views/gencode/backcode/components/Canvas.vue b/frontend/src/views/gencode/backcode/components/Canvas.vue
new file mode 100644
index 00000000..38f47548
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/components/Canvas.vue
@@ -0,0 +1,407 @@
+<!--
+  低代码页面生成器 - 画布组件
+  中间可放置和编辑组件的画布区域
+-->
+<template>
+  <div class="center-board">
+    <div class="action-bar">
+      <el-button icon="Download" type="primary" text @click="generateCode">
+        导出vue文件
+      </el-button>
+      <el-button class="copy-btn-main" icon="DocumentCopy" type="primary" text @click="copyCode">
+        复制代码
+      </el-button>
+      <el-button class="delete-btn" icon="Delete" text @click="clearCanvas" type="danger">
+        清空
+      </el-button>
+    </div>
+    
+    <el-scrollbar class="center-scrollbar">
+      <el-row class="center-board-row" :gutter="20">
+        <div class="drawing-board-container">
+          <draggable 
+            class="drawing-board" 
+            :list="components" 
+            :animation="340" 
+            group="componentsGroup"
+            item-key="id"
+            @add="handleAdd"
+            @change="handleChange"
+          >
+            <template #item="{ element, index }">
+              <CanvasComponent
+                :key="element.id"
+                :component="element"
+                :index="index"
+                :selected-id="selectedComponentId"
+                :drawing-list="components"
+                @select="handleSelectComponent"
+                @update="handleUpdateComponent"
+                @delete="handleDeleteComponent"
+                @copy="handleCopyComponent"
+              />
+            </template>
+          </draggable>
+          
+          <div v-show="!components.length" class="empty-info">
+            从左侧拖入或点选组件进行页面设计
+          </div>
+        </div>
+      </el-row>
+    </el-scrollbar>
+    
+    <!-- 预览对话框 -->
+    <el-dialog
+      v-model="previewVisible"
+      title="页面预览"
+      width="80%"
+      :before-close="handlePreviewClose"
+    >
+      <div class="preview-content">
+        <iframe
+          v-if="previewUrl"
+          :src="previewUrl"
+          frameborder="0"
+          class="preview-iframe"
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Delete, View, Download, Plus, DocumentCopy } from '@element-plus/icons-vue';
+import draggable from 'vuedraggable';
+import CanvasComponent from './CanvasComponent.vue';
+import { ComponentSchema, generateId } from '../utils/schema';
+import { generateVueFile, exportAsFile, copyToClipboard } from '../utils/serializer';
+
+// 定义 Props
+interface Props {
+  components: ComponentSchema[];
+  selectedComponentId?: string;
+}
+
+// 定义 Emits
+interface Emits {
+  updateComponents: [components: ComponentSchema[]];
+  selectComponent: [component: ComponentSchema | null];
+  updateComponent: [component: ComponentSchema];
+  deleteComponent: [componentId: string];
+  moveComponent: [fromIndex: number, toIndex: number];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 响应式数据
+const previewVisible = ref(false);
+const previewUrl = ref('');
+
+// 处理拖拽添加
+function handleAdd(event: any) {
+  console.log('添加组件:', event);
+}
+
+// 处理拖拽变化
+function handleChange(event: any) {
+  console.log('组件变化:', event);
+  emit('updateComponents', props.components);
+}
+
+// 处理组件选择
+function handleSelectComponent(component: ComponentSchema) {
+  emit('selectComponent', component);
+}
+
+// 处理组件更新
+function handleUpdateComponent(component: ComponentSchema) {
+  emit('updateComponent', component);
+}
+
+// 处理组件删除
+function handleDeleteComponent(componentId: string) {
+  emit('deleteComponent', componentId);
+}
+
+// 处理组件复制
+function handleCopyComponent(component: ComponentSchema) {
+  const newComponent = JSON.parse(JSON.stringify(component));
+  newComponent.id = generateId();
+  const newComponents = [...props.components, newComponent];
+  emit('updateComponents', newComponents);
+  ElMessage.success('组件已复制');
+}
+
+// 清空画布
+function clearCanvas() {
+  ElMessageBox.confirm('确定要清空所有组件吗？', '确认清空', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  }).then(() => {
+    emit('updateComponents', []);
+    emit('selectComponent', null);
+    ElMessage.success('画布已清空');
+  }).catch(() => {
+    // 用户取消清空
+  });
+}
+
+// 复制代码
+async function copyCode() {
+  if (props.components.length === 0) {
+    ElMessage.warning('请先添加组件');
+    return;
+  }
+  
+  const pageSchema = {
+    id: 'generated-page',
+    name: '生成的页面',
+    components: props.components
+  };
+  
+  try {
+    await copyToClipboard(pageSchema);
+    ElMessage.success('代码已复制到剪贴板');
+  } catch (error) {
+    console.error('复制代码失败:', error);
+    ElMessage.error('复制代码失败');
+  }
+}
+
+// 预览页面
+function previewPage() {
+  if (props.components.length === 0) {
+    ElMessage.warning('请先添加组件');
+    return;
+  }
+  
+  // 生成预览代码
+  const pageSchema = {
+    id: 'preview-page',
+    name: '预览页面',
+    components: props.components
+  };
+  
+  const vueCode = generateVueFile(pageSchema);
+  
+  // 创建预览 URL
+  const blob = new Blob([vueCode], { type: 'text/html' });
+  previewUrl.value = URL.createObjectURL(blob);
+  previewVisible.value = true;
+}
+
+// 关闭预览
+function handlePreviewClose() {
+  previewVisible.value = false;
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value);
+    previewUrl.value = '';
+  }
+}
+
+// 生成代码
+async function generateCode() {
+  if (props.components.length === 0) {
+    ElMessage.warning('请先添加组件');
+    return;
+  }
+  
+  const pageSchema = {
+    id: 'generated-page',
+    name: '生成的页面',
+    components: props.components
+  };
+  
+  try {
+    // 复制到剪贴板
+    await copyToClipboard(pageSchema);
+    ElMessage.success('代码已复制到剪贴板');
+    
+    // 同时提供下载选项
+    ElMessageBox.confirm('代码已复制到剪贴板，是否同时下载文件？', '生成完成', {
+      confirmButtonText: '下载',
+      cancelButtonText: '取消',
+      type: 'success'
+    }).then(() => {
+      exportAsFile(pageSchema, 'generated-page.vue');
+    }).catch(() => {
+      // 用户取消下载
+    });
+  } catch (error) {
+    console.error('生成代码失败:', error);
+    ElMessage.error('生成代码失败');
+  }
+}
+
+// 获取组件标签
+function getComponentLabel(componentType: string): string {
+  // 这里可以根据组件类型返回对应的标签
+  const typeMap: Record<string, string> = {
+    'el-button': '按钮',
+    'el-input': '输入框',
+    'el-select': '选择器',
+    'el-card': '卡片',
+    'el-form': '表单',
+    'el-row': '行',
+    'el-col': '列'
+  };
+  
+  return typeMap[componentType] || componentType;
+}
+
+// 监听组件变化，自动保存到本地存储
+watch(() => props.components, (newComponents) => {
+  try {
+    localStorage.setItem('lowcode-canvas-components', JSON.stringify(newComponents));
+  } catch (error) {
+    console.warn('保存到本地存储失败:', error);
+  }
+}, { deep: true });
+</script>
+
+<style scoped>
+.center-board {
+  height: calc(100vh - 50px - 40px);
+  width: auto;
+  margin: 0 350px 0 260px;
+  box-sizing: border-box;
+  background: var(--el-bg-color);
+
+  .action-bar {
+    position: relative;
+    height: 42px;
+    padding: 0 15px;
+    box-sizing: border-box;
+    border: 1px solid var(--el-border-color-extra-light);
+    border-top: none;
+    border-left: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background: var(--el-bg-color);
+    gap: 8px;
+
+    .delete-btn {
+      color: var(--el-color-danger);
+    }
+  }
+
+  .center-scrollbar {
+    height: calc(100vh - 50px - 40px - 42px);
+    overflow: hidden;
+    border-left: 1px solid var(--el-border-color-extra-light);
+    border-right: 1px solid var(--el-border-color-extra-light);
+    box-sizing: border-box;
+    background: var(--el-bg-color-page);
+
+    .el-scrollbar__view {
+      overflow-x: hidden;
+    }
+
+    .center-board-row {
+      padding: 12px 12px 15px 12px;
+      box-sizing: border-box;
+
+      .drawing-board-container {
+        width: 100%;
+        min-height: calc(100vh - 50px - 40px - 69px);
+        position: relative;
+
+        .drawing-board {
+          min-height: calc(100vh - 50px - 40px - 69px);
+          position: relative;
+          padding: 20px;
+          background: var(--el-bg-color);
+          border-radius: 6px;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+          .sortable-ghost {
+            position: relative;
+            display: block;
+            overflow: hidden;
+
+            &::before {
+              content: " ";
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              height: 3px;
+              background: var(--el-color-primary);
+              z-index: 2;
+            }
+          }
+        }
+
+        .empty-info {
+          position: absolute;
+          top: 46%;
+          left: 0;
+          right: 0;
+          text-align: center;
+          font-size: 18px;
+          color: var(--el-text-color-placeholder);
+          letter-spacing: 4px;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}
+
+.preview-content {
+  height: 70vh;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* 滚动条样式 */
+.center-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.center-scrollbar::-webkit-scrollbar-track {
+  background: var(--el-fill-color-light);
+  border-radius: 3px;
+}
+
+.center-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--el-border-color);
+  border-radius: 3px;
+}
+
+.center-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--el-border-color-dark);
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .center-board {
+    margin: 0 300px 0 240px;
+  }
+}
+
+@media (max-width: 768px) {
+  .center-board {
+    margin: 0;
+    width: 100%;
+  }
+  
+  .action-bar {
+    padding: 0 8px;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/components/CanvasComponent.vue b/frontend/src/views/gencode/backcode/components/CanvasComponent.vue
new file mode 100644
index 00000000..e49f7214
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/components/CanvasComponent.vue
@@ -0,0 +1,378 @@
+<!--
+  低代码页面生成器 - 画布中的单个组件
+  渲染和编辑画布中的组件
+-->
+<template>
+  <div
+    class="drawing-item"
+    :class="{
+      'active-from-item': isSelected,
+      'unfocus-bordered': !isSelected
+    }"
+    @click.stop="handleSelect"
+  >
+    <!-- 组件操作按钮 -->
+    <div class="drawing-item-copy" title="复制" @click.stop="handleCopy">
+      <el-icon><CopyDocument /></el-icon>
+    </div>
+    <div class="drawing-item-delete" title="删除" @click.stop="handleDelete">
+      <el-icon><Delete /></el-icon>
+    </div>
+    
+    <!-- 组件内容区域 -->
+    <div class="component-wrapper">
+      <ComponentRenderer
+        :component="component"
+        @click.stop="handleSelect"
+      >
+        <template #children>
+          <!-- 容器组件的拖拽区域 -->
+          <draggable 
+            v-if="isContainer()"
+            class="drag-wrapper"
+            :list="component.children || []"
+            group="componentsGroup"
+            :animation="340"
+            item-key="id"
+            @add="handleAdd"
+            @change="handleChange"
+          >
+            <template #item="{ element }">
+              <CanvasComponent
+                :key="element.id"
+                :component="element"
+                :selected-id="selectedId"
+                :drawing-list="component.children"
+                @select="$emit('select', $event)"
+                @update="$emit('update', $event)"
+                @delete="$emit('delete', $event)"
+                @copy="$emit('copy', $event)"
+              />
+            </template>
+          </draggable>
+          
+          <!-- 非容器组件的子组件 -->
+          <template v-else>
+            <CanvasComponent
+              v-for="child in component.children"
+              :key="child.id"
+              :component="child"
+              :selected-id="selectedId"
+              :drawing-list="drawingList"
+              @select="$emit('select', $event)"
+              @update="$emit('update', $event)"
+              @delete="$emit('delete', $event)"
+              @copy="$emit('copy', $event)"
+            />
+          </template>
+          
+          <!-- 容器占位符 -->
+          <div v-if="needsPlaceholder()" class="component-placeholder">
+            {{ getPlaceholderText() }}
+          </div>
+        </template>
+      </ComponentRenderer>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Delete, CopyDocument } from '@element-plus/icons-vue';
+import draggable from 'vuedraggable';
+import ComponentRenderer from './ComponentRenderer.vue';
+import { ComponentSchema, generateId } from '../utils/schema';
+
+// 定义 Props
+interface Props {
+  component: ComponentSchema;
+  selectedId?: string;
+  drawingList?: ComponentSchema[];
+  index?: number;
+}
+
+// 定义 Emits
+interface Emits {
+  select: [component: ComponentSchema];
+  update: [component: ComponentSchema];
+  delete: [componentId: string];
+  copy: [component: ComponentSchema];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 计算属性
+const isSelected = computed(() => props.selectedId === props.component.id);
+
+// 处理选择
+function handleSelect() {
+  emit('select', props.component);
+}
+
+// 处理删除
+function handleDelete() {
+  emit('delete', props.component.id);
+}
+
+// 处理复制
+function handleCopy() {
+  emit('copy', props.component);
+}
+
+// 判断是否为容器组件
+function isContainer(): boolean {
+  const containerTypes = [
+    'el-card', 'el-form', 'el-form-item', 'el-row', 'el-col', 
+    'el-container', 'el-header', 'el-main', 'el-aside', 'el-footer'
+  ];
+  return containerTypes.includes(props.component.type);
+}
+
+// 处理拖拽添加
+function handleAdd(event: any) {
+  console.log('子组件拖拽添加:', event);
+  emit('update', props.component);
+}
+
+// 处理拖拽变化
+function handleChange(event: any) {
+  console.log('子组件拖拽变化:', event);
+  emit('update', props.component);
+}
+
+
+// 判断是否需要占位符
+function needsPlaceholder() {
+  const hasChildren = props.component.children && props.component.children.length > 0;
+  const containerComponents = ['el-card', 'el-form', 'el-form-item', 'el-row', 'el-col', 'el-container', 'el-header', 'el-main', 'el-aside', 'el-footer'];
+  const isContainer = containerComponents.includes(props.component.type);
+  
+  return isContainer && !hasChildren;
+}
+
+// 获取占位符文本
+function getPlaceholderText(): string {
+  const typeMap: Record<string, string> = {
+    'el-card': '拖拽组件到此处',
+    'el-form': '拖拽表单项到此处',
+    'el-form-item': '拖拽表单控件到此处',
+    'el-row': '拖拽列到此处',
+    'el-col': '拖拽组件到此处',
+    'el-container': '拖拽容器组件到此处',
+    'el-header': '头部区域',
+    'el-main': '主要内容区域',
+    'el-aside': '侧边栏区域',
+    'el-footer': '底部区域'
+  };
+  
+  return typeMap[props.component.type] || '空容器';
+}
+</script>
+
+<style scoped>
+.drawing-item {
+  position: relative;
+  cursor: move;
+  margin-bottom: 15px;
+  transition: all 0.2s ease;
+
+  &.unfocus-bordered:not(.active-from-item) {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .component-wrapper {
+    position: relative;
+    min-height: 40px;
+  }
+
+  &.active-from-item {
+    .component-wrapper {
+      background: var(--el-fill-color-light);
+      border-radius: 6px;
+      padding: 8px;
+    }
+
+    .drawing-item-copy,
+    .drawing-item-delete {
+      display: initial;
+    }
+  }
+
+  &:hover {
+    .component-wrapper {
+      background: var(--el-fill-color-light);
+      border-radius: 6px;
+      padding: 8px;
+    }
+
+    .drawing-item-copy,
+    .drawing-item-delete {
+      display: initial;
+    }
+  }
+
+  .drawing-item-copy,
+  .drawing-item-delete {
+    display: none;
+    position: absolute;
+    top: -10px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 50%;
+    font-size: 12px;
+    border: 1px solid;
+    cursor: pointer;
+    z-index: 10;
+    background: var(--el-bg-color);
+    
+    .el-icon {
+      font-size: 12px;
+    }
+  }
+
+  .drawing-item-copy {
+    right: 56px;
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
+
+    &:hover {
+      background: var(--el-color-primary);
+      color: var(--el-color-white);
+    }
+  }
+
+  .drawing-item-delete {
+    right: 24px;
+    border-color: var(--el-color-danger);
+    color: var(--el-color-danger);
+
+    &:hover {
+      background: var(--el-color-danger);
+      color: var(--el-color-white);
+    }
+  }
+}
+
+.component-placeholder {
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  font-style: italic;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  background: var(--el-fill-color-lighter);
+  margin: 8px 0;
+}
+
+/* 组件特定样式 */
+:deep(.el-button) {
+  margin: 4px;
+}
+
+:deep(.el-input) {
+  margin: 4px 0;
+}
+
+:deep(.el-select) {
+  margin: 4px 0;
+}
+
+:deep(.el-card) {
+  margin: 8px 0;
+  
+  .el-card__body {
+    min-height: 60px;
+  }
+}
+
+:deep(.el-form) {
+  margin: 8px 0;
+  padding: 16px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  min-height: 80px;
+}
+
+:deep(.el-row) {
+  margin: 8px 0;
+  padding: 12px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  min-height: 60px;
+}
+
+:deep(.el-col) {
+  padding: 8px;
+  border: 1px dashed var(--el-border-color-lighter);
+  border-radius: 4px;
+  min-height: 40px;
+  margin: 4px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .drawing-item-copy {
+    right: 40px;
+    top: -8px;
+  }
+  
+  .drawing-item-delete {
+    right: 12px;
+    top: -8px;
+  }
+}
+
+/* 拖拽区域样式 */
+.drag-wrapper {
+  min-height: 40px;
+  width: 100%;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.drag-wrapper:empty {
+  min-height: 60px;
+  border: 1px dashed var(--el-border-color);
+  background: var(--el-fill-color-lighter);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.drag-wrapper:empty::after {
+  content: '拖拽组件到此处';
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+}
+
+/* 拖拽排序样式 */
+.sortable-ghost {
+  opacity: 0.5;
+  background: var(--el-color-primary-light-9);
+  border: 2px dashed var(--el-color-primary);
+}
+
+.sortable-chosen {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px var(--el-color-primary-light-3);
+}
+
+/* 容器组件特殊样式 */
+.drawing-item .drag-wrapper {
+  padding: 8px;
+}
+
+.drawing-item:hover .drag-wrapper {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/components/ComponentRenderer.vue b/frontend/src/views/gencode/backcode/components/ComponentRenderer.vue
new file mode 100644
index 00000000..8a3f27d1
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/components/ComponentRenderer.vue
@@ -0,0 +1,628 @@
+<!--
+  组件渲染器 - 根据组件类型渲染不同的 Element Plus 组件
+  确保每个组件都能正确显示和交互
+-->
+<template>
+  <div class="component-renderer">
+    <!-- 按钮组件 -->
+    <el-button 
+      v-if="component.type === 'el-button'"
+      v-bind="component.props"
+      @click="handleClick"
+    >
+      {{ component.props?.children || '按钮' }}
+    </el-button>
+    
+    <!-- 链接组件 -->
+    <el-link 
+      v-else-if="component.type === 'el-link'"
+      v-bind="component.props"
+      @click="handleClick"
+    >
+      {{ component.props?.children || '链接' }}
+    </el-link>
+    
+    <!-- 文本组件 -->
+    <el-text 
+      v-else-if="component.type === 'el-text'"
+      v-bind="component.props"
+    >
+      {{ component.props?.children || '文本内容' }}
+    </el-text>
+    
+    <!-- 输入框组件 -->
+    <el-input 
+      v-else-if="component.type === 'el-input'"
+      v-bind="component.props"
+      :model-value="getInputValue()"
+      @input="handleInput"
+    />
+    
+    <!-- 数字输入框 -->
+    <el-input-number 
+      v-else-if="component.type === 'el-input-number'"
+      v-bind="component.props"
+      :model-value="getNumberValue()"
+      @change="handleNumberChange"
+    />
+    
+    <!-- 选择器 -->
+    <el-select 
+      v-else-if="component.type === 'el-select'"
+      v-bind="component.props"
+      :model-value="getSelectValue()"
+      @change="handleSelectChange"
+    >
+      <el-option
+        v-for="option in getSelectOptions()"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+    
+    <!-- 单选框 -->
+    <el-radio 
+      v-else-if="component.type === 'el-radio'"
+      v-bind="component.props"
+      :model-value="getRadioValue()"
+      @change="handleRadioChange"
+    >
+      {{ component.props?.label || '选项' }}
+    </el-radio>
+    
+    <!-- 单选框组 -->
+    <el-radio-group 
+      v-else-if="component.type === 'el-radio-group'"
+      v-bind="component.props"
+      :model-value="getRadioGroupValue()"
+      @change="handleRadioGroupChange"
+    >
+      <el-radio 
+        v-for="option in getRadioOptions()"
+        :key="option.value"
+        :label="option.value"
+      >
+        {{ option.label }}
+      </el-radio>
+    </el-radio-group>
+    
+    <!-- 复选框 -->
+    <el-checkbox 
+      v-else-if="component.type === 'el-checkbox'"
+      v-bind="component.props"
+      :model-value="getCheckboxValue()"
+      @change="handleCheckboxChange"
+    >
+      {{ component.props?.label || '选项' }}
+    </el-checkbox>
+    
+    <!-- 复选框组 -->
+    <el-checkbox-group 
+      v-else-if="component.type === 'el-checkbox-group'"
+      v-bind="component.props"
+      :model-value="getCheckboxGroupValue()"
+      @change="handleCheckboxGroupChange"
+    >
+      <el-checkbox 
+        v-for="option in getCheckboxOptions()"
+        :key="option.value"
+        :label="option.value"
+      >
+        {{ option.label }}
+      </el-checkbox>
+    </el-checkbox-group>
+    
+    <!-- 开关 -->
+    <el-switch 
+      v-else-if="component.type === 'el-switch'"
+      v-bind="component.props"
+      :model-value="getSwitchValue()"
+      @change="handleSwitchChange"
+    />
+    
+    <!-- 滑块 -->
+    <el-slider 
+      v-else-if="component.type === 'el-slider'"
+      v-bind="component.props"
+      :model-value="getSliderValue()"
+      @change="handleSliderChange"
+    />
+    
+    <!-- 日期选择器 -->
+    <el-date-picker 
+      v-else-if="component.type === 'el-date-picker'"
+      v-bind="component.props"
+      :model-value="getDateValue()"
+      @change="handleDateChange"
+    />
+    
+    <!-- 时间选择器 -->
+    <el-time-picker 
+      v-else-if="component.type === 'el-time-picker'"
+      v-bind="component.props"
+      :model-value="getTimeValue()"
+      @change="handleTimeChange"
+    />
+    
+    <!-- 卡片 -->
+    <el-card 
+      v-else-if="component.type === 'el-card'"
+      v-bind="component.props"
+    >
+      <slot name="children">
+        <div class="card-placeholder">
+          {{ component.props?.children || '卡片内容区域' }}
+        </div>
+      </slot>
+    </el-card>
+    
+    <!-- 标签 -->
+    <el-tag 
+      v-else-if="component.type === 'el-tag'"
+      v-bind="component.props"
+    >
+      {{ component.props?.children || '标签' }}
+    </el-tag>
+    
+    <!-- 进度条 -->
+    <el-progress 
+      v-else-if="component.type === 'el-progress'"
+      v-bind="component.props"
+    />
+    
+    <!-- 警告 -->
+    <el-alert 
+      v-else-if="component.type === 'el-alert'"
+      v-bind="component.props"
+    />
+    
+    <!-- 分割线 -->
+    <el-divider 
+      v-else-if="component.type === 'el-divider'"
+      v-bind="component.props"
+    >
+      {{ component.props?.children }}
+    </el-divider>
+    
+    <!-- 表单 -->
+    <el-form 
+      v-else-if="component.type === 'el-form'"
+      v-bind="component.props"
+      class="form-container"
+    >
+      <slot name="children">
+        <div class="form-placeholder">拖拽表单项到此处</div>
+      </slot>
+    </el-form>
+    
+    <!-- 表单项 -->
+    <el-form-item 
+      v-else-if="component.type === 'el-form-item'"
+      v-bind="component.props"
+    >
+      <slot name="children">
+        <div class="form-item-placeholder">拖拽表单控件到此处</div>
+      </slot>
+    </el-form-item>
+    
+    <!-- 行布局 -->
+    <div 
+      v-else-if="component.type === 'el-row'"
+      class="row-layout"
+      :style="getRowStyle()"
+    >
+      <slot name="children">
+        <div class="layout-placeholder">
+          <el-icon><Grid /></el-icon>
+          <span>行布局 - 水平排列容器</span>
+          <small>拖拽组件到此处，它们将水平排列</small>
+        </div>
+      </slot>
+    </div>
+    
+    <!-- 列布局 -->
+    <div 
+      v-else-if="component.type === 'el-col'"
+      class="col-layout"
+      :style="getColStyle()"
+    >
+      <slot name="children">
+        <div class="layout-placeholder">
+          <el-icon><Grid /></el-icon>
+          <span>列布局 - 垂直排列容器</span>
+          <small>拖拽组件到此处，它们将垂直排列</small>
+        </div>
+      </slot>
+    </div>
+    
+    <!-- 容器布局 -->
+    <el-container 
+      v-else-if="component.type === 'el-container'"
+      v-bind="component.props"
+      class="container-layout"
+    >
+      <slot name="children">
+        <div class="container-placeholder">拖拽容器组件到此处</div>
+      </slot>
+    </el-container>
+    
+    <!-- 头部 -->
+    <el-header 
+      v-else-if="component.type === 'el-header'"
+      v-bind="component.props"
+      class="header-container"
+    >
+      <slot name="children">
+        <div class="header-placeholder">头部内容</div>
+      </slot>
+    </el-header>
+    
+    <!-- 主要区域 -->
+    <el-main 
+      v-else-if="component.type === 'el-main'"
+      v-bind="component.props"
+      class="main-container"
+    >
+      <slot name="children">
+        <div class="main-placeholder">主要内容区域</div>
+      </slot>
+    </el-main>
+    
+    <!-- 侧边栏 -->
+    <el-aside 
+      v-else-if="component.type === 'el-aside'"
+      v-bind="component.props"
+      class="aside-container"
+    >
+      <slot name="children">
+        <div class="aside-placeholder">侧边栏内容</div>
+      </slot>
+    </el-aside>
+    
+    <!-- 底部 -->
+    <el-footer 
+      v-else-if="component.type === 'el-footer'"
+      v-bind="component.props"
+      class="footer-container"
+    >
+      <slot name="children">
+        <div class="footer-placeholder">底部内容</div>
+      </slot>
+    </el-footer>
+    
+    <!-- 未知组件 -->
+    <div v-else class="unknown-component">
+      未知组件: {{ component.type }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Grid, Plus } from '@element-plus/icons-vue';
+import { ComponentSchema } from '../utils/schema';
+
+// 定义 Props
+interface Props {
+  component: ComponentSchema;
+}
+
+const props = defineProps<Props>();
+
+// 事件处理
+function handleClick() {
+  console.log('按钮点击');
+}
+
+function handleInput(value: string) {
+  console.log('输入值:', value);
+}
+
+function handleNumberChange(value: number | undefined) {
+  console.log('数字变化:', value);
+}
+
+function handleSelectChange(value: any) {
+  console.log('选择变化:', value);
+}
+
+function handleRadioChange(value: any) {
+  console.log('单选变化:', value);
+}
+
+function handleRadioGroupChange(value: any) {
+  console.log('单选组变化:', value);
+}
+
+function handleCheckboxChange(value: any) {
+  console.log('复选框变化:', value);
+}
+
+function handleCheckboxGroupChange(value: any[]) {
+  console.log('复选框组变化:', value);
+}
+
+function handleSwitchChange(value: any) {
+  console.log('开关变化:', value);
+}
+
+function handleSliderChange(value: any) {
+  console.log('滑块变化:', value);
+}
+
+function handleDateChange(value: any) {
+  console.log('日期变化:', value);
+}
+
+function handleTimeChange(value: any) {
+  console.log('时间变化:', value);
+}
+
+// 获取各种组件的值
+function getInputValue() {
+  return props.component.props?.modelValue || '';
+}
+
+function getNumberValue() {
+  return props.component.props?.modelValue || 0;
+}
+
+function getSelectValue() {
+  return props.component.props?.modelValue || '';
+}
+
+function getRadioValue() {
+  return props.component.props?.modelValue || false;
+}
+
+function getRadioGroupValue() {
+  return props.component.props?.modelValue || '';
+}
+
+function getCheckboxValue() {
+  return props.component.props?.modelValue || false;
+}
+
+function getCheckboxGroupValue() {
+  return props.component.props?.modelValue || [];
+}
+
+function getSwitchValue() {
+  return props.component.props?.modelValue || false;
+}
+
+function getSliderValue() {
+  return props.component.props?.modelValue || 0;
+}
+
+function getDateValue() {
+  return props.component.props?.modelValue || null;
+}
+
+function getTimeValue() {
+  return props.component.props?.modelValue || null;
+}
+
+// 获取选项数据
+function getSelectOptions() {
+  return [
+    { label: '选项一', value: 'option1' },
+    { label: '选项二', value: 'option2' },
+    { label: '选项三', value: 'option3' }
+  ];
+}
+
+function getRadioOptions() {
+  return [
+    { label: '选项一', value: 'radio1' },
+    { label: '选项二', value: 'radio2' }
+  ];
+}
+
+function getCheckboxOptions() {
+  return [
+    { label: '选项一', value: 'checkbox1' },
+    { label: '选项二', value: 'checkbox2' }
+  ];
+}
+
+// 获取行布局样式
+function getRowStyle() {
+  const defaultStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '12px',
+    padding: '12px',
+    border: '1px dashed var(--el-border-color)',
+    borderRadius: '4px',
+    minHeight: '60px',
+    background: 'var(--el-fill-color-lighter)'
+  };
+  
+  const customStyle = props.component.props?.style || {};
+  const gap = props.component.props?.gap || '12px';
+  const justifyContent = props.component.props?.justifyContent || 'flex-start';
+  const alignItems = props.component.props?.alignItems || 'flex-start';
+  
+  return {
+    ...defaultStyle,
+    ...customStyle,
+    gap,
+    justifyContent,
+    alignItems
+  };
+}
+
+// 获取列布局样式
+function getColStyle() {
+  const defaultStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    padding: '12px',
+    border: '1px dashed var(--el-border-color)',
+    borderRadius: '4px',
+    minHeight: '60px',
+    background: 'var(--el-fill-color-lighter)'
+  };
+  
+  const customStyle = props.component.props?.style || {};
+  const gap = props.component.props?.gap || '12px';
+  const justifyContent = props.component.props?.justifyContent || 'flex-start';
+  const alignItems = props.component.props?.alignItems || 'flex-start';
+  
+  return {
+    ...defaultStyle,
+    ...customStyle,
+    gap,
+    justifyContent,
+    alignItems
+  };
+}
+</script>
+
+<style scoped>
+.component-renderer {
+  width: 100%;
+}
+
+/* 占位符样式 */
+.card-placeholder,
+.form-placeholder,
+.form-item-placeholder,
+.row-placeholder,
+.col-placeholder,
+.container-placeholder,
+.header-placeholder,
+.main-placeholder,
+.aside-placeholder,
+.footer-placeholder {
+  padding: 20px;
+  text-align: center;
+  color: var(--el-text-color-placeholder);
+  background: var(--el-fill-color-lighter);
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+/* 容器组件样式 */
+.form-container {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  padding: 20px;
+  min-height: 120px;
+  background: var(--el-fill-color-lighter);
+  position: relative;
+}
+
+.row-layout,
+.col-layout {
+  position: relative;
+  transition: all 0.2s ease;
+  margin: 8px 0;
+}
+
+.row-layout:hover,
+.col-layout:hover {
+  border-color: var(--el-color-primary) !important;
+  background: var(--el-color-primary-light-9) !important;
+}
+
+.layout-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--el-text-color-placeholder);
+  text-align: center;
+  padding: 20px;
+}
+
+.layout-placeholder .el-icon {
+  font-size: 24px;
+}
+
+.layout-placeholder span {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.layout-placeholder small {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.container-layout {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  min-height: 200px;
+  background: var(--el-fill-color-lighter);
+  padding: 16px;
+}
+
+.header-container,
+.footer-container {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  background: var(--el-fill-color-lighter);
+}
+
+.main-container {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  background: var(--el-fill-color-lighter);
+  min-height: 200px;
+}
+
+.aside-container {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  background: var(--el-fill-color-lighter);
+}
+
+.unknown-component {
+  padding: 16px;
+  background: var(--el-color-danger-light-9);
+  border: 1px dashed var(--el-color-danger);
+  border-radius: 4px;
+  color: var(--el-color-danger);
+  text-align: center;
+  font-size: 14px;
+}
+
+/* 组件间距 */
+.component-renderer > * {
+  margin: 4px 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .card-placeholder,
+  .form-placeholder,
+  .form-item-placeholder,
+  .row-placeholder,
+  .col-placeholder,
+  .container-placeholder,
+  .header-placeholder,
+  .main-placeholder,
+  .aside-placeholder,
+  .footer-placeholder {
+    padding: 12px;
+    min-height: 40px;
+    font-size: 12px;
+  }
+  
+  .form-container,
+  .row-container,
+  .col-container {
+    padding: 8px;
+    min-height: 60px;
+  }
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/components/Inspector.vue b/frontend/src/views/gencode/backcode/components/Inspector.vue
new file mode 100644
index 00000000..fd9f80a5
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/components/Inspector.vue
@@ -0,0 +1,473 @@
+<!--
+  低代码页面生成器 - 属性检查器
+  右侧编辑选中组件属性的面板
+-->
+<template>
+  <div class="right-board">
+    <el-tabs v-model="currentTab" stretch class="center-tabs">
+      <el-tab-pane label="组件属性" name="field" />
+      <el-tab-pane label="样式设置" name="style" />
+    </el-tabs>
+    
+    <div class="field-box">
+      <!-- 文档链接 -->
+      <a 
+        v-if="selectedComponent && getDocumentLink()"
+        class="document-link" 
+        target="_blank" 
+        :href="getDocumentLink()" 
+        title="查看组件文档"
+      >
+        <el-icon><Link /></el-icon>
+      </a>
+      
+      <el-scrollbar class="right-scrollbar">
+        <!-- 未选中组件 -->
+        <div v-if="!selectedComponent" class="empty-inspector">
+          <el-icon class="empty-icon"><Setting /></el-icon>
+          <p>请选择一个组件来编辑属性</p>
+        </div>
+        
+        <!-- 组件属性 -->
+        <el-form 
+          v-show="currentTab === 'field' && selectedComponent" 
+          size="small" 
+          label-width="90px" 
+          label-position="top"
+        >
+          <!-- 基本信息 -->
+          <el-form-item label="组件类型">
+            <el-input :value="getComponentLabel(selectedComponent?.type || '')" disabled />
+          </el-form-item>
+          
+          <el-form-item v-if="selectedComponent?.label !== undefined" label="标签">
+            <el-input v-model="selectedComponent.label" placeholder="请输入标签" />
+          </el-form-item>
+          
+          <!-- 布局组件特殊配置 -->
+          <template v-if="selectedComponent?.type === 'el-row' || selectedComponent?.type === 'el-col'">
+            <el-form-item label="间隔">
+              <el-input
+                :model-value="selectedComponent?.props?.gap || '12px'"
+                placeholder="如: 12px, 1rem"
+                @update:model-value="(value) => handlePropertyUpdate('gap', value)"
+              />
+            </el-form-item>
+            
+            <el-form-item label="主轴对齐">
+              <el-select
+                :model-value="selectedComponent?.props?.justifyContent || 'flex-start'"
+                @update:model-value="(value) => handlePropertyUpdate('justifyContent', value)"
+              >
+                <el-option label="起始对齐" value="flex-start" />
+                <el-option label="居中对齐" value="center" />
+                <el-option label="末尾对齐" value="flex-end" />
+                <el-option label="两端对齐" value="space-between" />
+                <el-option label="环绕对齐" value="space-around" />
+                <el-option label="平均对齐" value="space-evenly" />
+              </el-select>
+            </el-form-item>
+            
+            <el-form-item label="交叉轴对齐">
+              <el-select
+                :model-value="selectedComponent?.props?.alignItems || 'flex-start'"
+                @update:model-value="(value) => handlePropertyUpdate('alignItems', value)"
+              >
+                <el-option label="起始对齐" value="flex-start" />
+                <el-option label="居中对齐" value="center" />
+                <el-option label="末尾对齐" value="flex-end" />
+                <el-option label="拉伸对齐" value="stretch" />
+              </el-select>
+            </el-form-item>
+          </template>
+          
+          <!-- 组件属性 -->
+          <template v-for="propKey in getEditableProps()" :key="propKey">
+            <el-form-item v-if="propKey !== 'columnCount'" :label="getPropertyLabel(propKey)">
+              <PropertyEditor
+                :prop-key="propKey"
+                :prop-value="selectedComponent?.props?.[propKey]"
+                :component-type="selectedComponent?.type || ''"
+                @update="handlePropertyUpdate"
+              />
+            </el-form-item>
+          </template>
+        </el-form>
+        
+        <!-- 样式设置 -->
+        <el-form 
+          v-show="currentTab === 'style' && selectedComponent" 
+          size="small" 
+          label-width="90px" 
+          label-position="top"
+        >
+          <el-form-item label="宽度">
+            <el-input v-model="styleProps.width" placeholder="如: 100px, 50%, auto" />
+          </el-form-item>
+          <el-form-item label="高度">
+            <el-input v-model="styleProps.height" placeholder="如: 100px, 50vh, auto" />
+          </el-form-item>
+          <el-form-item label="外边距">
+            <el-input v-model="styleProps.margin" placeholder="如: 10px, 10px 20px" />
+          </el-form-item>
+          <el-form-item label="内边距">
+            <el-input v-model="styleProps.padding" placeholder="如: 10px, 10px 20px" />
+          </el-form-item>
+          <el-form-item label="背景色">
+            <el-color-picker v-model="styleProps.backgroundColor" show-alpha />
+          </el-form-item>
+          <el-form-item label="边框">
+            <el-input v-model="styleProps.border" placeholder="如: 1px solid #ccc" />
+          </el-form-item>
+          <el-form-item label="圆角">
+            <el-input v-model="styleProps.borderRadius" placeholder="如: 4px, 50%" />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Setting, Link } from '@element-plus/icons-vue';
+import PropertyEditor from './PropertyEditor.vue';
+import { ComponentSchema, COMPONENT_CONFIGS, generateId } from '../utils/schema';
+
+// 定义 Props
+interface Props {
+  selectedComponent: ComponentSchema | null;
+}
+
+// 定义 Emits
+interface Emits {
+  updateComponent: [component: ComponentSchema];
+  deleteComponent: [componentId: string];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 响应式数据
+const currentTab = ref('field');
+
+// 计算属性 - 样式属性
+const styleProps = computed({
+  get() {
+    return props.selectedComponent?.style || {};
+  },
+  set(value) {
+    if (props.selectedComponent) {
+      props.selectedComponent.style = { ...props.selectedComponent.style, ...value };
+      emit('updateComponent', props.selectedComponent);
+    }
+  }
+});
+
+
+// 处理属性更新
+function handlePropertyUpdate(key: string, value: any) {
+  if (props.selectedComponent) {
+    if (!props.selectedComponent.props) {
+      props.selectedComponent.props = {};
+    }
+    props.selectedComponent.props[key] = value;
+    emit('updateComponent', props.selectedComponent);
+  }
+}
+
+
+// 获取文档链接
+function getDocumentLink(): string {
+  if (!props.selectedComponent) return '';
+  const config = COMPONENT_CONFIGS[props.selectedComponent.type as keyof typeof COMPONENT_CONFIGS];
+  return `https://element-plus.org/zh-CN/component/${props.selectedComponent.type.replace('el-', '')}`;
+}
+
+// 获取可编辑的属性列表
+function getEditableProps(): string[] {
+  if (!props.selectedComponent) return [];
+  const config = COMPONENT_CONFIGS[props.selectedComponent.type as keyof typeof COMPONENT_CONFIGS];
+  return config?.editableProps || [];
+}
+
+// 获取组件标签
+function getComponentLabel(componentType: string): string {
+  const config = COMPONENT_CONFIGS[componentType as keyof typeof COMPONENT_CONFIGS];
+  return config?.label || componentType;
+}
+
+// 获取属性标签
+function getPropertyLabel(key: string): string {
+  const labelMap: Record<string, string> = {
+    // 基础属性
+    type: '类型',
+    size: '尺寸',
+    disabled: '禁用',
+    children: '内容',
+    
+    // 按钮属性
+    plain: '朴素按钮',
+    round: '圆角',
+    circle: '圆形',
+    loading: '加载中',
+    
+    // 输入框属性
+    placeholder: '占位符',
+    clearable: '可清空',
+    readonly: '只读',
+    maxlength: '最大长度',
+    showWordLimit: '显示字数统计',
+    
+    // 数字输入框
+    min: '最小值',
+    max: '最大值',
+    step: '步长',
+    precision: '精度',
+    controls: '显示控制按钮',
+    controlsPosition: '控制按钮位置',
+    
+    // 选择器
+    multiple: '多选',
+    filterable: '可筛选',
+    
+    // 单选/复选框
+    border: '带边框',
+    textColor: '文字颜色',
+    fill: '填充色',
+    indeterminate: '半选状态',
+    
+    // 开关
+    width: '开关宽度',
+    activeText: '打开文字',
+    inactiveText: '关闭文字',
+    activeValue: '打开值',
+    inactiveValue: '关闭值',
+    activeColor: '打开颜色',
+    inactiveColor: '关闭颜色',
+    
+    // 滑块
+    showStops: '显示间断点',
+    showTooltip: '显示提示',
+    range: '范围选择',
+    
+    // 日期/时间选择器
+    format: '显示格式',
+    valueFormat: '绑定值格式',
+    
+    // 表单
+    model: '表单数据对象',
+    rules: '表单验证规则',
+    labelWidth: '标签宽度',
+    labelPosition: '标签位置',
+    inline: '行内表单',
+    labelSuffix: '标签后缀',
+    hideRequiredAsterisk: '隐藏必填星号',
+    showMessage: '显示错误信息',
+    inlineMessage: '行内显示错误信息',
+    statusIcon: '显示状态图标',
+    validateOnRuleChange: '规则改变时验证',
+    
+    // 表单项
+    required: '必填',
+    error: '错误信息',
+    
+    // 布局
+    gap: '间隔',
+    justifyContent: '主轴对齐',
+    alignItems: '交叉轴对齐',
+    gutter: '栅格间隔',
+    justify: '水平排列',
+    align: '垂直排列',
+    span: '栅格占据列数',
+    offset: '栅格左侧间隔',
+    push: '栅格向右移动',
+    pull: '栅格向左移动',
+    tag: '自定义元素标签',
+    direction: '排列方向',
+    height: '高度',
+    
+    // 卡片
+    header: '卡片标题',
+    shadow: '阴影显示时机',
+    bodyStyle: '内容区域样式',
+    
+    // 标签
+    closable: '可关闭',
+    disableTransitions: '禁用渐变动画',
+    hit: '是否有边框描边',
+    color: '背景色',
+    effect: '主题',
+    
+    // 进度条
+    percentage: '百分比',
+    strokeWidth: '进度条宽度',
+    textInside: '文字内显',
+    status: '状态',
+    showText: '显示文字',
+    
+    // 警告
+    title: '标题',
+    description: '描述',
+    center: '文字居中',
+    closeText: '关闭按钮文字',
+    showIcon: '显示图标',
+    
+    // 分割线
+    contentPosition: '内容位置',
+    
+    // 链接
+    href: '链接地址',
+    underline: '下划线'
+  };
+  
+  return labelMap[key] || key;
+}
+</script>
+
+<style scoped>
+.right-board {
+  width: 350px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-top: 3px;
+  height: calc(100vh - 50px - 40px);
+  background: var(--el-bg-color);
+  border-left: 1px solid var(--el-border-color-light);
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+    background: var(--el-bg-color);
+  }
+
+  :deep(.el-input-group__append .el-button) {
+    display: inline-flex;
+  }
+
+  .field-box {
+    position: relative;
+    height: calc(100vh - 50px - 40px - 42px);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .right-scrollbar {
+    height: 100%;
+
+    :deep(.el-scrollbar__view) {
+      padding: 20px;
+    }
+  }
+}
+
+.empty-inspector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: var(--el-text-color-placeholder);
+  text-align: center;
+
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    color: var(--el-border-color);
+  }
+
+  p {
+    margin: 8px 0;
+    font-size: 14px;
+  }
+}
+
+.document-link {
+  position: absolute;
+  display: flex;
+  width: 26px;
+  height: 26px;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background: var(--el-color-primary);
+  z-index: 10;
+  border-radius: 0 0 6px 0;
+  justify-content: center;
+  align-items: center;
+  color: var(--el-color-white);
+  font-size: 14px;
+
+  &:hover {
+    background: var(--el-color-primary-dark-2);
+  }
+}
+
+/* 表单样式 */
+:deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 500;
+  color: var(--el-text-color-regular);
+  margin-bottom: 6px;
+}
+
+:deep(.el-input) {
+  width: 100%;
+}
+
+:deep(.el-select) {
+  width: 100%;
+}
+
+:deep(.el-color-picker) {
+  width: 100%;
+}
+
+:deep(.el-slider) {
+  width: 100%;
+}
+
+/* 提示文字样式 */
+.form-item-tip {
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+/* 滚动条样式 */
+.right-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.right-scrollbar::-webkit-scrollbar-track {
+  background: var(--el-fill-color-light);
+  border-radius: 3px;
+}
+
+.right-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--el-border-color);
+  border-radius: 3px;
+}
+
+.right-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--el-border-color-dark);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .right-board {
+    width: 300px;
+  }
+  
+  .right-scrollbar {
+    :deep(.el-scrollbar__view) {
+      padding: 16px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/components/Palette.vue b/frontend/src/views/gencode/backcode/components/Palette.vue
new file mode 100644
index 00000000..4bddb449
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/components/Palette.vue
@@ -0,0 +1,355 @@
+<!--
+  低代码页面生成器 - 组件库面板
+  左侧可拖拽的 Element Plus 组件库
+-->
+<template>
+  <div class="left-board">
+    <div class="logo-wrapper">
+      <div class="logo">
+        <el-icon class="logo-icon"><Tools /></el-icon>
+        低代码生成器
+      </div>
+    </div>
+    
+    <el-scrollbar class="left-scrollbar">
+      <div class="components-list">
+        <div
+          v-for="(components, category) in filteredCategories"
+          :key="category"
+          class="component-category"
+        >
+          <div class="components-title">
+            <el-icon><Grid /></el-icon>
+            {{ category }}
+          </div>
+          <draggable
+            class="components-draggable"
+            :list="getComponentList(components)"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
+            item-key="type"
+          >
+            <template #item="{ element }">
+              <div class="components-item" @click="addComponent(element)">
+                <div class="components-body">
+                  <el-icon class="component-icon">
+                    <component :is="getComponentIcon(element.type)" />
+                  </el-icon>
+                  <span class="component-label">{{ element.label }}</span>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </div>
+    </el-scrollbar>
+    
+    <!-- 搜索框 -->
+    <div class="search-wrapper">
+      <el-input
+        v-model="searchText"
+        placeholder="搜索组件"
+        clearable
+        size="small"
+        prefix-icon="Search"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import draggable from 'vuedraggable';
+import { Tools, Grid, Search } from '@element-plus/icons-vue';
+import { 
+  ComponentType, 
+  COMPONENT_CONFIGS, 
+  COMPONENT_CATEGORIES,
+  createComponent 
+} from '../utils/schema';
+
+// 定义事件
+const emit = defineEmits<{
+  addComponent: [component: any];
+}>();
+
+// 响应式数据
+const searchText = ref('');
+
+// 计算属性 - 过滤后的组件分类
+const filteredCategories = computed(() => {
+  if (!searchText.value) {
+    return COMPONENT_CATEGORIES;
+  }
+  
+  const filtered: Record<string, ComponentType[]> = {};
+  
+  for (const [category, components] of Object.entries(COMPONENT_CATEGORIES)) {
+    const filteredComponents = components.filter(componentType => {
+      const config = COMPONENT_CONFIGS[componentType];
+      return config?.label?.toLowerCase().includes(searchText.value.toLowerCase());
+    });
+    
+    if (filteredComponents.length > 0) {
+      filtered[category] = filteredComponents;
+    }
+  }
+  
+  return filtered;
+});
+
+// 获取组件列表
+function getComponentList(components: ComponentType[]) {
+  return components.map(type => {
+    const config = COMPONENT_CONFIGS[type];
+    return {
+      type,
+      label: config?.label || type,
+      icon: config?.icon || 'Grid'
+    };
+  });
+}
+
+// 克隆组件
+function cloneComponent(element: any) {
+  const component = createComponent(element.type);
+  return component;
+}
+
+// 处理拖拽结束
+function onEnd(event: any) {
+  // 拖拽结束后的处理
+}
+
+// 处理组件点击
+function addComponent(element: any) {
+  const component = createComponent(element.type);
+  emit('addComponent', component);
+}
+
+// 获取组件图标
+function getComponentIcon(componentType: ComponentType): string {
+  const iconMap: Record<string, string> = {
+    'el-button': 'Connection',
+    'el-link': 'Link',
+    'el-text': 'Document',
+    'el-input': 'Edit',
+    'el-input-number': 'Plus',
+    'el-select': 'ArrowDown',
+    'el-radio': 'CircleCheck',
+    'el-radio-group': 'CircleCheck',
+    'el-checkbox': 'Check',
+    'el-checkbox-group': 'Check',
+    'el-switch': 'Switch',
+    'el-slider': 'Minus',
+    'el-date-picker': 'Calendar',
+    'el-time-picker': 'Clock',
+    'el-card': 'Document',
+    'el-tag': 'PriceTag',
+    'el-progress': 'Loading',
+    'el-alert': 'Warning',
+    'el-form': 'List',
+    'el-form-item': 'Tickets',
+    'el-row': 'Right',
+    'el-col': 'Bottom',
+    'el-container': 'Grid',
+    'el-header': 'Top',
+    'el-main': 'Grid',
+    'el-aside': 'Operation',
+    'el-footer': 'Bottom',
+    'el-divider': 'Minus'
+  };
+  return iconMap[componentType] || 'Grid';
+}
+</script>
+
+<style scoped>
+.left-board {
+  width: 260px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: calc(100vh - 50px - 40px);
+  background: var(--el-bg-color);
+  border-right: 1px solid var(--el-border-color-light);
+
+  .logo-wrapper {
+    position: relative;
+    height: 42px;
+    border-bottom: 1px solid var(--el-border-color-extra-light);
+    box-sizing: border-box;
+    background: var(--el-bg-color);
+
+    .logo {
+      position: absolute;
+      left: 12px;
+      top: 6px;
+      line-height: 30px;
+      color: var(--el-color-primary);
+      font-weight: 600;
+      font-size: 16px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .logo-icon {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .left-scrollbar {
+    height: calc(100% - 42px - 60px);
+    
+    .el-scrollbar__wrap {
+      box-sizing: border-box;
+      overflow-x: hidden !important;
+      margin-bottom: 0 !important;
+    }
+
+    .components-list {
+      padding: 8px;
+      box-sizing: border-box;
+      height: 100%;
+
+      .component-category {
+        margin-bottom: 16px;
+      }
+
+      .components-title {
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+        margin: 6px 2px 8px 2px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 500;
+
+        .el-icon {
+          font-size: 16px;
+          color: var(--el-color-primary);
+        }
+      }
+
+      .components-draggable {
+        padding-bottom: 8px;
+
+        .components-item {
+          display: inline-block;
+          width: 48%;
+          margin: 1%;
+          transition: transform 0.2s ease;
+          cursor: grab;
+
+          .components-body {
+            padding: 10px 8px;
+            background: var(--el-fill-color-light);
+            font-size: 12px;
+            border: 1px solid var(--el-border-color-light);
+            border-radius: 4px;
+            text-align: center;
+            transition: all 0.2s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            min-height: 60px;
+            justify-content: center;
+
+            .component-icon {
+              font-size: 18px;
+              color: var(--el-text-color-regular);
+            }
+
+            .component-label {
+              color: var(--el-text-color-regular);
+              line-height: 1.2;
+              word-break: break-all;
+            }
+
+            &:hover {
+              border: 1px solid var(--el-color-primary);
+              background: var(--el-color-primary-light-9);
+              color: var(--el-color-primary);
+              transform: translateY(-1px);
+
+              .component-icon,
+              .component-label {
+                color: var(--el-color-primary);
+              }
+            }
+          }
+
+          &:active {
+            cursor: grabbing;
+            
+            .components-body {
+              transform: scale(0.95);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .search-wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px;
+    background: var(--el-bg-color);
+    border-top: 1px solid var(--el-border-color-extra-light);
+  }
+}
+
+/* 滚动条样式 */
+.left-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.left-scrollbar::-webkit-scrollbar-track {
+  background: var(--el-fill-color-light);
+  border-radius: 3px;
+}
+
+.left-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--el-border-color);
+  border-radius: 3px;
+}
+
+.left-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--el-border-color-dark);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .left-board {
+    width: 240px;
+  }
+  
+  .components-item {
+    width: 98% !important;
+    margin: 1% !important;
+  }
+}
+
+/* 空状态 */
+.components-draggable:empty::after {
+  content: '暂无组件';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 4px;
+  margin: 1%;
+  width: 48%;
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/components/PropertyEditor.vue b/frontend/src/views/gencode/backcode/components/PropertyEditor.vue
new file mode 100644
index 00000000..bd75e68d
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/components/PropertyEditor.vue
@@ -0,0 +1,466 @@
+<!--
+  低代码页面生成器 - 属性编辑器
+  根据属性类型渲染不同的编辑器
+-->
+<template>
+  <div class="property-editor">
+    <!-- 字符串输入 -->
+    <el-input
+      v-if="isStringType"
+      :model-value="propValue"
+      :placeholder="getPlaceholder()"
+      @update:model-value="handleUpdate"
+    />
+    
+    <!-- 数字输入 -->
+    <el-input-number
+      v-else-if="isNumberType"
+      :model-value="propValue"
+      :min="getMinValue()"
+      :max="getMaxValue()"
+      :step="getStepValue()"
+      :precision="getPrecision()"
+      @update:model-value="handleUpdate"
+    />
+    
+    <!-- 布尔开关 -->
+    <el-switch
+      v-else-if="isBooleanType"
+      :model-value="propValue"
+      @update:model-value="handleUpdate"
+    />
+    
+    <!-- 选择器 -->
+    <el-select
+      v-else-if="isSelectType"
+      :model-value="propValue"
+      :placeholder="getPlaceholder()"
+      @update:model-value="handleUpdate"
+    >
+      <el-option
+        v-for="option in getSelectOptions()"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+    
+    <!-- 颜色选择器 -->
+    <el-color-picker
+      v-else-if="isColorType"
+      :model-value="propValue"
+      :show-alpha="getShowAlpha()"
+      :color-format="getColorFormat()"
+      @update:model-value="handleUpdate"
+    />
+    
+    <!-- 滑块 -->
+    <el-slider
+      v-else-if="isSliderType"
+      :model-value="propValue"
+      :min="getMinValue()"
+      :max="getMaxValue()"
+      :step="getStepValue()"
+      :show-stops="getShowStops()"
+      :range="getRange()"
+      @update:model-value="handleUpdate"
+    />
+    
+    <!-- 文本域 -->
+    <el-input
+      v-else-if="isTextareaType"
+      :model-value="propValue"
+      type="textarea"
+      :rows="getTextareaRows()"
+      :placeholder="getPlaceholder()"
+      @update:model-value="handleUpdate"
+    />
+    
+    <!-- 对象编辑器 -->
+    <div v-else-if="isObjectType" class="object-editor">
+      <el-input
+        :model-value="JSON.stringify(propValue, null, 2)"
+        type="textarea"
+        :rows="4"
+        placeholder="JSON 对象"
+        @update:model-value="handleObjectUpdate"
+      />
+    </div>
+    
+    <!-- 数组编辑器 -->
+    <div v-else-if="isArrayType" class="array-editor">
+      <div v-for="(item, index) in propValue" :key="index" class="array-item">
+        <el-input
+          :model-value="item"
+          :placeholder="`项目 ${index + 1}`"
+          @update:model-value="handleArrayItemUpdate(index, $event)"
+        />
+        <el-button
+          size="small"
+          type="danger"
+          @click="removeArrayItem(index)"
+        >
+          <el-icon><Delete /></el-icon>
+        </el-button>
+      </div>
+      <el-button size="small" @click="addArrayItem">
+        <el-icon><Plus /></el-icon>
+        添加项目
+      </el-button>
+    </div>
+    
+    <!-- 默认输入框 -->
+    <el-input
+      v-else
+      :model-value="String(propValue)"
+      :placeholder="getPlaceholder()"
+      @update:model-value="handleUpdate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Delete, Plus } from '@element-plus/icons-vue';
+
+// 定义 Props
+interface Props {
+  propKey: string;
+  propValue: any;
+  componentType: string;
+}
+
+// 定义 Emits
+interface Emits {
+  update: [key: string, value: any];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 计算属性 - 判断属性类型
+const isStringType = computed(() => {
+  return typeof props.propValue === 'string' && !isSelectType.value && !isTextareaType.value;
+});
+
+const isNumberType = computed(() => {
+  return typeof props.propValue === 'number' || 
+         (typeof props.propValue === 'string' && !isNaN(Number(props.propValue)));
+});
+
+const isBooleanType = computed(() => {
+  return typeof props.propValue === 'boolean';
+});
+
+const isSelectType = computed(() => {
+  const selectProps = ['type', 'size', 'status', 'position', 'placement', 'trigger'];
+  return selectProps.includes(props.propKey);
+});
+
+const isColorType = computed(() => {
+  return props.propKey.includes('color') || props.propKey.includes('Color');
+});
+
+const isSliderType = computed(() => {
+  return ['min', 'max', 'step', 'value'].includes(props.propKey);
+});
+
+const isTextareaType = computed(() => {
+  return props.propKey.includes('text') || 
+         props.propKey.includes('content') || 
+         props.propKey.includes('description');
+});
+
+const isObjectType = computed(() => {
+  return typeof props.propValue === 'object' && !Array.isArray(props.propValue);
+});
+
+const isArrayType = computed(() => {
+  return Array.isArray(props.propValue);
+});
+
+// 处理更新
+function handleUpdate(value: any) {
+  emit('update', props.propKey, value);
+}
+
+// 处理对象更新
+function handleObjectUpdate(value: string) {
+  try {
+    const obj = JSON.parse(value);
+    emit('update', props.propKey, obj);
+  } catch (error) {
+    console.error('JSON 解析错误:', error);
+  }
+}
+
+// 处理数组项更新
+function handleArrayItemUpdate(index: number, value: any) {
+  const newArray = [...props.propValue];
+  newArray[index] = value;
+  emit('update', props.propKey, newArray);
+}
+
+// 添加数组项
+function addArrayItem() {
+  const newArray = [...props.propValue, ''];
+  emit('update', props.propKey, newArray);
+}
+
+// 删除数组项
+function removeArrayItem(index: number) {
+  const newArray = props.propValue.filter((_: any, i: number) => i !== index);
+  emit('update', props.propKey, newArray);
+}
+
+// 获取占位符
+function getPlaceholder(): string {
+  const placeholders: Record<string, string> = {
+    placeholder: '请输入占位符',
+    label: '请输入标签',
+    text: '请输入文本',
+    value: '请输入值',
+    name: '请输入名称',
+    id: '请输入ID',
+    class: '请输入CSS类名',
+    style: '请输入样式',
+    title: '请输入标题',
+    content: '请输入内容',
+    description: '请输入描述'
+  };
+  
+  return placeholders[props.propKey] || '请输入值';
+}
+
+// 获取选择器选项
+function getSelectOptions() {
+  const optionMap: Record<string, Array<{ label: string; value: any }>> = {
+    type: getTypeOptions(),
+    size: [
+      { label: '大', value: 'large' },
+      { label: '默认', value: 'default' },
+      { label: '小', value: 'small' }
+    ],
+    shadow: [
+      { label: '总是显示', value: 'always' },
+      { label: '悬停时显示', value: 'hover' },
+      { label: '从不显示', value: 'never' }
+    ],
+    justify: [
+      { label: '左对齐', value: 'start' },
+      { label: '居中', value: 'center' },
+      { label: '右对齐', value: 'end' },
+      { label: '两端对齐', value: 'space-between' },
+      { label: '环绕对齐', value: 'space-around' },
+      { label: '平均对齐', value: 'space-evenly' }
+    ],
+    align: [
+      { label: '顶部', value: 'top' },
+      { label: '中间', value: 'middle' },
+      { label: '底部', value: 'bottom' }
+    ],
+    labelPosition: [
+      { label: '右侧', value: 'right' },
+      { label: '左侧', value: 'left' },
+      { label: '顶部', value: 'top' }
+    ],
+    direction: [
+      { label: '垂直', value: 'vertical' },
+      { label: '水平', value: 'horizontal' }
+    ],
+    contentPosition: [
+      { label: '左侧', value: 'left' },
+      { label: '居中', value: 'center' },
+      { label: '右侧', value: 'right' }
+    ],
+    effect: [
+      { label: '浅色', value: 'light' },
+      { label: '深色', value: 'dark' }
+    ]
+  };
+  
+  return optionMap[props.propKey] || [];
+}
+
+// 根据组件类型获取type选项
+function getTypeOptions() {
+  const componentTypeOptions: Record<string, Array<{ label: string; value: any }>> = {
+    'el-button': [
+      { label: '默认', value: 'default' },
+      { label: '主要', value: 'primary' },
+      { label: '成功', value: 'success' },
+      { label: '信息', value: 'info' },
+      { label: '警告', value: 'warning' },
+      { label: '危险', value: 'danger' },
+      { label: '文本', value: 'text' }
+    ],
+    'el-input': [
+      { label: '文本', value: 'text' },
+      { label: '密码', value: 'password' },
+      { label: '数字', value: 'number' },
+      { label: '邮箱', value: 'email' },
+      { label: '电话', value: 'tel' },
+      { label: 'URL', value: 'url' }
+    ],
+    'el-alert': [
+      { label: '成功', value: 'success' },
+      { label: '信息', value: 'info' },
+      { label: '警告', value: 'warning' },
+      { label: '错误', value: 'error' }
+    ],
+    'el-tag': [
+      { label: '默认', value: '' },
+      { label: '成功', value: 'success' },
+      { label: '信息', value: 'info' },
+      { label: '警告', value: 'warning' },
+      { label: '危险', value: 'danger' }
+    ],
+    'el-link': [
+      { label: '默认', value: 'default' },
+      { label: '主要', value: 'primary' },
+      { label: '成功', value: 'success' },
+      { label: '信息', value: 'info' },
+      { label: '警告', value: 'warning' },
+      { label: '危险', value: 'danger' }
+    ],
+    'el-text': [
+      { label: '主要', value: 'primary' },
+      { label: '常规', value: 'regular' },
+      { label: '次要', value: 'secondary' },
+      { label: '占位符', value: 'placeholder' },
+      { label: '禁用', value: 'disabled' }
+    ],
+    'el-progress': [
+      { label: '线形', value: 'line' },
+      { label: '环形', value: 'circle' },
+      { label: '仪表盘', value: 'dashboard' }
+    ],
+    'el-date-picker': [
+      { label: '日期', value: 'date' },
+      { label: '周', value: 'week' },
+      { label: '月', value: 'month' },
+      { label: '年', value: 'year' },
+      { label: '日期时间', value: 'datetime' },
+      { label: '日期范围', value: 'daterange' },
+      { label: '月范围', value: 'monthrange' },
+      { label: '日期时间范围', value: 'datetimerange' }
+    ]
+  };
+  
+  return componentTypeOptions[props.componentType] || [
+    { label: '默认', value: 'default' },
+    { label: '主要', value: 'primary' },
+    { label: '成功', value: 'success' },
+    { label: '信息', value: 'info' },
+    { label: '警告', value: 'warning' },
+    { label: '危险', value: 'danger' }
+  ];
+}
+
+// 获取最小值
+function getMinValue(): number {
+  const minMap: Record<string, number> = {
+    min: 0,
+    max: 0,
+    step: 0,
+    value: 0,
+    span: 1,
+    offset: 0,
+    push: 0,
+    pull: 0,
+    columnCount: 1,
+    percentage: 0,
+    width: 0
+  };
+  
+  return minMap[props.propKey] ?? -Infinity;
+}
+
+// 获取最大值
+function getMaxValue(): number {
+  const maxMap: Record<string, number> = {
+    span: 24,
+    offset: 23,
+    push: 23,
+    pull: 23,
+    maxlength: 1000,
+    columnCount: 6,
+    percentage: 100,
+    width: 200
+  };
+  
+  return maxMap[props.propKey] ?? Infinity;
+}
+
+// 获取步长
+function getStepValue(): number {
+  return props.propKey === 'step' ? 1 : 0.1;
+}
+
+// 获取精度
+function getPrecision(): number {
+  return props.propKey === 'precision' ? 0 : 2;
+}
+
+// 获取是否显示透明度
+function getShowAlpha(): boolean {
+  return props.propKey.includes('alpha') || props.propKey === 'backgroundColor';
+}
+
+// 获取颜色格式
+function getColorFormat(): string {
+  return props.propKey.includes('alpha') ? 'rgba' : 'hex';
+}
+
+// 获取是否显示间断点
+function getShowStops(): boolean {
+  return props.propKey === 'step' || props.propKey === 'value';
+}
+
+// 获取是否范围选择
+function getRange(): boolean {
+  return props.propKey === 'value' && props.componentType === 'el-slider';
+}
+
+// 获取文本域行数
+function getTextareaRows(): number {
+  return props.propKey.includes('description') ? 4 : 2;
+}
+</script>
+
+<style scoped>
+.property-editor {
+  width: 100%;
+}
+
+.object-editor {
+  width: 100%;
+}
+
+.array-editor {
+  width: 100%;
+}
+
+.array-item {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  align-items: center;
+}
+
+.array-item .el-input {
+  flex: 1;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .array-item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .array-item .el-button {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/index.vue b/frontend/src/views/gencode/backcode/index.vue
index 7d7def3c..c979dd4a 100644
--- a/frontend/src/views/gencode/backcode/index.vue
+++ b/frontend/src/views/gencode/backcode/index.vue
@@ -1,872 +1,173 @@
+<!--
+  低代码页面生成器 - 主界面
+  整合 Palette、Canvas、Inspector 三个核心组件
+-->
 <template>
-  <div class="app-container">
-    <!-- 搜索区域 -->
-    <div class="search-container">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-form-item prop="keywords" label="关键字">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="表名"
-            clearable
-            @keyup.enter="handleQuery"
-          />
-        </el-form-item>
-
-        <el-form-item class="search-buttons">
-          <el-button type="primary" @click="handleQuery">
-            <template #icon>
-              <Search />
-            </template>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery">
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <el-card shadow="hover" class="table-card">
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        border
-        class="data-table__content"
-      >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="表名" prop="tableName" min-width="100" />
-        <el-table-column label="描述" prop="tableComment" width="150" />
-
-        <el-table-column label="存储引擎" align="center" prop="engine" />
-
-        <el-table-column label="排序规则" align="center" prop="tableCollation" />
-        <el-table-column label="创建时间" align="center" prop="createTime" />
-
-        <el-table-column fixed="right" label="操作" width="200">
-          <template #default="scope">
-            <el-button
-              type="primary"
-              size="small"
-              link
-              @click="handleOpenDialog(scope.row.tableName)"
-            >
-              <template #icon>
-                <MagicStick />
-              </template>
-              生成代码
-            </el-button>
-
-            <el-button
-              v-if="scope.row.isConfigured === 1"
-              type="danger"
-              size="small"
-              link
-              @click="handleResetConfig(scope.row.tableName)"
-            >
-              <template #icon>
-                <RefreshLeft />
-              </template>
-              重置配置
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.page_no"
-        v-model:limit="queryParams.page_size"
-        @pagination="handleQuery"
-      />
-    </el-card>
-
-    <el-drawer
-      v-model="dialog.visible"
-      :title="dialog.title"
-      size="80%"
-      @close="dialog.visible = false"
-    >
-      <el-steps :active="active" align-center finish-status="success" simple>
-        <el-step title="基础配置" />
-        <el-step title="字段配置" />
-        <el-step title="预览生成" />
-      </el-steps>
-
-      <div class="mt-5">
-        <el-form
-          v-show="active == 0"
-          :model="genConfigFormData"
-          :label-width="100"
-          :rules="genConfigFormRules"
-        >
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="表名" prop="tableName">
-                <el-input v-model="genConfigFormData.tableName" readonly />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="业务名" prop="businessName">
-                <el-input v-model="genConfigFormData.businessName" placeholder="用户" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="主包名" prop="packageName">
-                <el-input v-model="genConfigFormData.packageName" placeholder="com.youlai.boot" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="模块名" prop="moduleName">
-                <el-input v-model="genConfigFormData.moduleName" placeholder="system" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="实体名" prop="entityName">
-                <el-input v-model="genConfigFormData.entityName" placeholder="User" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="作者">
-                <el-input v-model="genConfigFormData.author" placeholder="youlai" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="12">
-              <el-form-item>
-                <template #label>
-                  <div class="flex-y-between">
-                    <span>上级菜单</span>
-                    <el-tooltip effect="dark">
-                      <template #content>
-                        选择上级菜单，生成代码后会自动创建对应菜单。
-                        <br />
-                        注意1：生成菜单后需分配权限给角色，否则菜单将无法显示。
-                        <br />
-                        注意2：演示环境默认不生成菜单，如需生成，请在本地部署数据库。
-                      </template>
-                      <el-icon class="cursor-pointer">
-                        <QuestionFilled />
-                      </el-icon>
-                    </el-tooltip>
-                  </div>
-                </template>
-
-                <el-tree-select
-                  v-model="genConfigFormData.parentMenuId"
-                  placeholder="选择上级菜单"
-                  :data="menuOptions"
-                  check-strictly
-                  :render-after-expand="false"
-                  filterable
-                  clearable
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-
-        <div v-show="active == 1" class="elTableCustom">
-          <el-table
-            v-loading="loading"
-            row-key="id"
-            :element-loading-text="loadingText"
-            highlight--currentrow
-            :data="genConfigFormData.fieldConfigs"
-          >
-            <el-table-column width="55" align="center">
-              <el-icon class="cursor-move sortable-handle">
-                <Rank />
-              </el-icon>
-            </el-table-column>
-
-            <el-table-column label="列名" width="110">
-              <template #default="scope">
-                {{ scope.row.columnName }}
-              </template>
-            </el-table-column>
-
-            <el-table-column label="列类型" width="80">
-              <template #default="scope">
-                {{ scope.row.columnType }}
-              </template>
-            </el-table-column>
-            <el-table-column label="字段名" width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.fieldName" />
-              </template>
-            </el-table-column>
-            <el-table-column label="字段类型" width="80">
-              <template #default="scope">
-                {{ scope.row.fieldType }}
-              </template>
-            </el-table-column>
-
-            <el-table-column label="字段注释" min-width="100">
-              <template #default="scope">
-                <el-input v-model="scope.row.fieldComment" />
-              </template>
-            </el-table-column>
-
-            <el-table-column label="最大长度" width="80">
-              <template #default="scope">
-                <el-input v-model="scope.row.maxLength" />
-              </template>
-            </el-table-column>
-
-            <el-table-column width="70">
-              <template #header>
-                <div class="flex-y-center">
-                  <span>查询</span>
-                  <el-checkbox
-                    v-model="isCheckAllQuery"
-                    class="ml-1"
-                    @change="toggleCheckAll('isShowInQuery', isCheckAllQuery)"
-                  />
-                </div>
-              </template>
-              <template #default="scope">
-                <el-checkbox v-model="scope.row.isShowInQuery" :true-value="1" :false-value="0" />
-              </template>
-            </el-table-column>
-
-            <el-table-column width="70">
-              <template #header>
-                <div class="flex-y-center">
-                  <span>列表</span>
-                  <el-checkbox
-                    v-model="isCheckAllList"
-                    class="ml-1"
-                    @change="toggleCheckAll('isShowInList', isCheckAllList)"
-                  />
-                </div>
-              </template>
-
-              <template #default="scope">
-                <el-checkbox v-model="scope.row.isShowInList" :true-value="1" :false-value="0" />
-              </template>
-            </el-table-column>
-
-            <el-table-column width="70">
-              <template #header>
-                <div class="flex-y-center">
-                  <span>表单</span>
-                  <el-checkbox
-                    v-model="isCheckAllForm"
-                    class="ml-1"
-                    @change="toggleCheckAll('isShowInForm', isCheckAllForm)"
-                  />
-                </div>
-              </template>
-
-              <template #default="scope">
-                <el-checkbox v-model="scope.row.isShowInForm" :true-value="1" :false-value="0" />
-              </template>
-            </el-table-column>
-
-            <el-table-column label="必填" width="70">
-              <template #default="scope">
-                <el-checkbox
-                  v-if="scope.row.isShowInForm == 1"
-                  v-model="scope.row.isRequired"
-                  :true-value="1"
-                  :false-value="0"
-                />
-                <span v-else>-</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="查询方式" min-width="120">
-              <template #default="scope">
-                <el-select
-                  v-if="scope.row.isShowInQuery === 1"
-                  v-model="scope.row.queryType"
-                  placeholder="请选择"
-                >
-                  <el-option
-                    v-for="(item, key) in queryTypeOptions"
-                    :key="key"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-                <span v-else>-</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="表单类型" min-width="120">
-              <template #default="scope">
-                <el-select
-                  v-if="scope.row.isShowInQuery === 1 || scope.row.isShowInForm === 1"
-                  v-model="scope.row.formType"
-                  placeholder="请选择"
-                >
-                  <el-option
-                    v-for="(item, key) in formTypeOptions"
-                    :key="key"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-                <span v-else>-</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="字典类型" min-width="100">
-              <template #default="scope">
-                <el-select
-                  v-if="scope.row.formType === FormTypeEnum.SELECT.value"
-                  v-model="scope.row.dictType"
-                  placeholder="请选择"
-                  clearable
-                >
-                  <el-option
-                    v-for="item in dictOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-                <span v-else>-</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <el-row v-show="active == 2">
-          <el-col :span="6">
-            <el-scrollbar max-height="72vh">
-              <el-tree
-                :data="treeData"
-                default-expand-all
-                highlight-current
-                @node-click="handleFileTreeNodeClick"
-              >
-                <template #default="{ data }">
-                  <div :class="`i-svg:${getFileTreeNodeIcon(data.label)}`" />
-                  <span class="ml-1">{{ data.label }}</span>
-                </template>
-              </el-tree>
-            </el-scrollbar>
-          </el-col>
-          <el-col :span="18">
-            <el-scrollbar max-height="72vh">
-              <div class="absolute z-36 right-5 top-2">
-                <el-link type="primary" @click="handleCopyCode">
-                  <el-icon>
-                    <CopyDocument />
-                  </el-icon>
-                  一键复制
-                </el-link>
-              </div>
-
-              <Codemirror
-                ref="cmRef"
-                v-model:value="code"
-                :options="cmOptions"
-                border
-                :readonly="true"
-                height="100%"
-                width="100%"
-              />
-            </el-scrollbar>
-          </el-col>
-        </el-row>
-      </div>
-
-      <template #footer>
-        <el-button v-if="active !== 0" type="success" @click="handlePrevClick">
-          <el-icon>
-            <Back />
-          </el-icon>
-          {{ prevBtnText }}
-        </el-button>
-        <el-button type="primary" @click="handleNextClick">
-          {{ nextBtnText }}
-          <el-icon v-if="active !== 2">
-            <Right />
-          </el-icon>
-          <el-icon v-else>
-            <Download />
-          </el-icon>
-        </el-button>
-      </template>
-    </el-drawer>
+  <div class="container">
+    <!-- 左侧组件库 -->
+    <Palette @add-component="handleAddComponent" />
+    
+    <!-- 中间画布 -->
+    <Canvas
+      :components="components"
+      :selected-component-id="selectedComponentId || undefined"
+      @update-components="handleUpdateComponents"
+      @select-component="handleSelectComponent"
+      @update-component="handleUpdateComponent"
+      @delete-component="handleDeleteComponent"
+      @move-component="handleMoveComponent"
+    />
+    
+    <!-- 右侧属性面板 -->
+    <Inspector
+      :selected-component="selectedComponent"
+      @update-component="handleUpdateComponent"
+      @delete-component="handleDeleteComponent"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Codegen",
+import { ref, computed, onMounted, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import Palette from './components/Palette.vue';
+import Canvas from './components/Canvas.vue';
+import Inspector from './components/Inspector.vue';
+import { ComponentSchema, PageSchema, generateId } from './utils/schema';
+import { generateVueFile, exportAsFile, copyToClipboard } from './utils/serializer';
+
+// 响应式数据
+const components = ref<ComponentSchema[]>([]);
+const selectedComponentId = ref<string | null>(null);
+
+
+// 计算属性
+const selectedComponent = computed(() => {
+  if (!selectedComponentId.value) return null;
+  return findComponentById(components.value, selectedComponentId.value);
 });
 
-import Sortable from "sortablejs";
-import "codemirror/mode/javascript/javascript.js";
-import Codemirror from "codemirror-editor-vue3";
-import type { CmComponentRef } from "codemirror-editor-vue3";
-import type { EditorConfiguration } from "codemirror";
-
-import { FormTypeEnum } from "@/enums/codegen/form.enum";
-import { QueryTypeEnum } from "@/enums/codegen/query.enum";
-
-import GeneratorAPI, {
-  TablePageVO,
-  GenConfigForm,
-  TablePageQuery,
-  FieldConfig,
-} from "@/api/codegen.api";
-
-import DictAPI from "@/api/system/dict";
-import MenuAPI from "@/api/system/menu";
-
-interface TreeNode {
-  label: string;
-  content?: string;
-  children?: TreeNode[];
-}
-const treeData = ref<TreeNode[]>([]);
-
-const queryFormRef = ref();
-const queryParams = reactive<TablePageQuery>({
-  page_no: 1,
-  page_size: 10,
-});
-
-const loading = ref(false);
-const loadingText = ref("loading...");
-
-const pageData = ref<TablePageVO[]>([]);
-const total = ref(0);
-
-const formTypeOptions: Record<string, OptionType> = FormTypeEnum;
-const queryTypeOptions: Record<string, OptionType> = QueryTypeEnum;
-const dictOptions = ref<OptionType[]>();
-const menuOptions = ref<OptionType[]>([]);
-const genConfigFormData = ref<GenConfigForm>({
-  fieldConfigs: [],
-});
-
-const genConfigFormRules = {
-  tableName: [{ required: true, message: "请输入表名", trigger: "blur" }],
-  businessName: [{ required: true, message: "请输入业务名", trigger: "blur" }],
-  packageName: [{ required: true, message: "请输入主包名", trigger: "blur" }],
-  moduleName: [{ required: true, message: "请输入模块名", trigger: "blur" }],
-  entityName: [{ required: true, message: "请输入实体名", trigger: "blur" }],
-};
-
-const dialog = reactive({
-  visible: false,
-  title: "",
-});
-
-const { copy, copied } = useClipboard();
-const code = ref();
-const cmRef = ref<CmComponentRef>();
-const cmOptions: EditorConfiguration = {
-  mode: "text/javascript",
-};
-
-const prevBtnText = ref("");
-const nextBtnText = ref("下一步，字段配置");
-const active = ref(0);
-const currentTableName = ref("");
-const sortFlag = ref<object>();
-
-// 查询是否全选
-const isCheckAllQuery = ref(false);
-// 列表是否全选
-const isCheckAllList = ref(false);
-// 表单是否全选
-const isCheckAllForm = ref(false);
-
-watch(active, (val) => {
-  if (val === 0) {
-    nextBtnText.value = "下一步，字段配置";
-  } else if (val === 1) {
-    prevBtnText.value = "上一步，基础配置";
-    nextBtnText.value = "下一步，确认生成";
-  } else if (val === 2) {
-    prevBtnText.value = "上一步，字段配置";
-    nextBtnText.value = "下载代码";
-  }
-});
-
-watch(copied, () => {
-  if (copied.value) {
-    ElMessage.success("复制成功");
-  }
-});
-
-watch(
-  () => genConfigFormData.value.fieldConfigs as FieldConfig[],
-  (newVal: FieldConfig[]) => {
-    newVal.forEach((fieldConfig) => {
-      if (
-        fieldConfig.fieldType &&
-        fieldConfig.fieldType.includes("Date") &&
-        fieldConfig.isShowInQuery === 1
-      ) {
-        fieldConfig.queryType = QueryTypeEnum.BETWEEN.value as number;
-      }
-    });
-  },
-  { deep: true, immediate: true }
-);
-
-const initSort = () => {
-  if (sortFlag.value) {
-    return;
-  }
-  const table = document.querySelector(".elTableCustom .el-table__body-wrapper tbody");
-  sortFlag.value = Sortable.create(<HTMLElement>table, {
-    group: "shared",
-    animation: 150,
-    ghostClass: "sortable-ghost", //拖拽样式
-    handle: ".sortable-handle", //拖拽区域
-    easing: "cubic-bezier(1, 0, 0, 1)",
-
-    // 结束拖动事件
-    onEnd: (item: any) => {
-      setNodeSort(item.oldIndex, item.newIndex);
-    },
-  });
-};
-
-const setNodeSort = (oldIndex: number, newIndex: number) => {
-  // 使用arr复制一份表格数组数据
-  const arr = Object.assign([], genConfigFormData.value.fieldConfigs);
-  const currentRow = arr.splice(oldIndex, 1)[0];
-  arr.splice(newIndex, 0, currentRow);
-  arr.forEach((item: FieldConfig, index) => {
-    item.fieldSort = index + 1;
-  });
-  genConfigFormData.value.fieldConfigs = [];
-  nextTick(async () => {
-    genConfigFormData.value.fieldConfigs = arr;
-  });
-};
-
-/** 上一步 */
-function handlePrevClick() {
-  if (active.value === 2) {
-    //这里需要重新获取一次数据，如果第一次生成代码后，再次点击上一步，数据不重新获取，再次点击下一步，会再次插入数据，导致索引重复报错
-    genConfigFormData.value = {
-      fieldConfigs: [],
-    };
-    nextTick(() => {
-      loading.value = true;
-      GeneratorAPI.getGenConfig(currentTableName.value)
-        .then((data) => {
-          genConfigFormData.value = data;
-        })
-        .finally(() => {
-          loading.value = false;
-        });
-    });
-    initSort();
-  }
-  if (active.value-- <= 0) active.value = 0;
-}
-
-/** 下一步 */
-function handleNextClick() {
-  if (active.value === 0) {
-    //这里需要校验基础配置
-    const { tableName, packageName, businessName, moduleName, entityName } =
-      genConfigFormData.value;
-    if (!tableName || !packageName || !businessName || !moduleName || !entityName) {
-      ElMessage.error("表名、业务名、包名、模块名、实体名不能为空");
-      return;
+// 查找组件
+function findComponentById(components: ComponentSchema[], id: string): ComponentSchema | null {
+  for (const component of components) {
+    if (component.id === id) {
+      return component;
     }
-    initSort();
-  }
-  if (active.value === 1) {
-    // 保存生成配置
-    const tableName = genConfigFormData.value.tableName;
-    if (!tableName) {
-      ElMessage.error("表名不能为空");
-      return;
-    }
-    loading.value = true;
-    loadingText.value = "代码生成中，请稍后...";
-    GeneratorAPI.saveGenConfig(tableName, genConfigFormData.value)
-      .then(() => {
-        handlePreview(tableName);
-      })
-      .then(() => {
-        if (active.value++ >= 2) active.value = 2;
-      })
-      .finally(() => {
-        loading.value = false;
-        loadingText.value = "loading...";
-      });
-  } else {
-    if (active.value++ >= 2) {
-      active.value = 2;
-    }
-    if (active.value === 2) {
-      const tableName = genConfigFormData.value.tableName;
-      if (!tableName) {
-        ElMessage.error("表名不能为空");
-        return;
-      }
-      GeneratorAPI.download(tableName);
-    }
-  }
-}
-
-/** 查询 */
-function handleQuery() {
-  loading.value = true;
-  GeneratorAPI.getTablePage(queryParams)
-    .then((data) => {
-      pageData.value = data.items;
-      total.value = data.total;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/** 重置查询 */
-function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryParams.page_no = 1;
-  handleQuery();
-}
-
-/** 打开弹窗 */
-async function handleOpenDialog(tableName: string) {
-  dialog.visible = true;
-  active.value = 0;
-
-  menuOptions.value = await MenuAPI.getMenuList({
-    page_no: 1,
-    page_size: 1000,
-  });
-
-  currentTableName.value = tableName;
-  // 获取字典数据
-  DictAPI.getDictTypeList({
-    page_no: 1,
-    page_size: 1000,
-  }).then((data) => {
-    dictOptions.value = data;
-    loading.value = true;
-    GeneratorAPI.getGenConfig(tableName)
-      .then((data) => {
-        dialog.title = `${tableName} 代码生成`;
-        genConfigFormData.value = data;
-
-        checkAllSelected("isShowInQuery", isCheckAllQuery);
-        checkAllSelected("isShowInList", isCheckAllList);
-        checkAllSelected("isShowInForm", isCheckAllForm);
-
-        // 如果已经配置过，直接跳转到预览页面
-        if (genConfigFormData.value.id) {
-          active.value = 2;
-          handlePreview(tableName);
-        } else {
-          // 如果没有配置过，跳转到基础配置页面
-          active.value = 0;
-        }
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  });
-}
-
-/** 重置配置 */
-function handleResetConfig(tableName: string) {
-  ElMessageBox.confirm("确定要重置配置吗？", "提示", {
-    type: "warning",
-  }).then(() => {
-    GeneratorAPI.resetGenConfig(tableName).then(() => {
-      ElMessage.success("重置成功");
-      handleQuery();
-    });
-  });
-}
-
-type FieldConfigKey = "isShowInQuery" | "isShowInList" | "isShowInForm";
-
-/** 全选 */
-const toggleCheckAll = (key: FieldConfigKey, value: boolean) => {
-  const fieldConfigs = genConfigFormData.value?.fieldConfigs;
-
-  if (fieldConfigs) {
-    fieldConfigs.forEach((row: FieldConfig) => {
-      row[key] = value ? 1 : 0;
-    });
-  }
-};
-
-const checkAllSelected = (key: keyof FieldConfig, isCheckAllRef: any) => {
-  const fieldConfigs = genConfigFormData.value?.fieldConfigs || [];
-  isCheckAllRef.value = fieldConfigs.every((row: FieldConfig) => row[key] === 1);
-};
-
-/** 获取生成预览 */
-function handlePreview(tableName: string) {
-  treeData.value = [];
-  GeneratorAPI.getPreviewData(tableName)
-    .then((data) => {
-      dialog.title = `代码生成 ${tableName}`;
-      // 组装树形结构完善代码
-      const tree = buildTree(data);
-      treeData.value = [tree];
-
-      // 默认选中第一个叶子节点并设置 code 值
-      const firstLeafNode = findFirstLeafNode(tree);
-      if (firstLeafNode) {
-        code.value = firstLeafNode.content || "";
-      }
-    })
-    .catch(() => {
-      active.value = 0;
-    });
-}
-
-/**
- * 递归构建树形结构
- *
- * @param data - 数据数组
- * @returns 树形结构根节点
- */
-function buildTree(data: { path: string; fileName: string; content: string }[]): TreeNode {
-  // 动态获取根节点
-  const root: TreeNode = { label: "前后端代码", children: [] };
-
-  data.forEach((item) => {
-    // 将路径分成数组
-    const separator = item.path.includes("/") ? "/" : "\\";
-    const parts = item.path.split(separator);
-
-    // 定义特殊路径
-    const specialPaths = [
-      "src" + separator + "main",
-      "java",
-      genConfigFormData.value.backendAppName,
-      genConfigFormData.value.frontendAppName,
-      (genConfigFormData.value.packageName + "." + genConfigFormData.value.moduleName).replace(
-        /\./g,
-        separator
-      ),
-    ];
-
-    // 检查路径中的特殊部分并合并它们
-    const mergedParts: string[] = [];
-    let buffer: string[] = [];
-
-    parts.forEach((part) => {
-      buffer.push(part);
-      const currentPath = buffer.join(separator);
-      if (specialPaths.includes(currentPath)) {
-        mergedParts.push(currentPath);
-        buffer = [];
-      }
-    });
-
-    // 将 mergedParts 路径中的分隔符\替换为/
-    mergedParts.forEach((part, index) => {
-      mergedParts[index] = part.replace(/\\/g, "/");
-    });
-
-    if (buffer.length > 0) {
-      mergedParts.push(...buffer);
-    }
-
-    let currentNode = root;
-
-    mergedParts.forEach((part) => {
-      // 查找或创建当前部分的子节点
-      let node = currentNode.children?.find((child) => child.label === part);
-      if (!node) {
-        node = { label: part, children: [] };
-        currentNode.children?.push(node);
-      }
-      currentNode = node;
-    });
-
-    // 添加文件节点
-    currentNode.children?.push({
-      label: item.fileName,
-      content: item?.content,
-    });
-  });
-
-  return root;
-}
-
-/**
- * 递归查找第一个叶子节点
- * @param node - 树形节点
- * @returns 第一个叶子节点
- */
-function findFirstLeafNode(node: TreeNode): TreeNode | null {
-  if (!node.children || node.children.length === 0) {
-    return node;
-  }
-  for (const child of node.children) {
-    const leafNode = findFirstLeafNode(child);
-    if (leafNode) {
-      return leafNode;
+    if (component.children) {
+      const found = findComponentById(component.children, id);
+      if (found) return found;
     }
   }
   return null;
 }
 
-/** 文件树节点 Click */
-function handleFileTreeNodeClick(data: TreeNode) {
-  if (!data.children || data.children.length === 0) {
-    code.value = data.content || "";
+// 处理添加组件
+function handleAddComponent(component: ComponentSchema) {
+  components.value.push(component);
+  selectedComponentId.value = component.id;
+  ElMessage.success(`已添加 ${component.type} 组件`);
+}
+
+// 处理更新组件列表
+function handleUpdateComponents(newComponents: ComponentSchema[]) {
+  components.value = newComponents;
+}
+
+// 处理选择组件
+function handleSelectComponent(component: ComponentSchema | null) {
+  selectedComponentId.value = component?.id || null;
+}
+
+// 处理更新组件
+function handleUpdateComponent(component: ComponentSchema) {
+  updateComponentById(components.value, component);
+}
+
+// 更新组件
+function updateComponentById(components: ComponentSchema[], updatedComponent: ComponentSchema) {
+  for (let i = 0; i < components.length; i++) {
+    if (components[i].id === updatedComponent.id) {
+      components[i] = updatedComponent;
+      return;
+    }
+    if (components[i].children) {
+      updateComponentById(components[i].children!, updatedComponent);
+    }
   }
 }
 
-/** 获取文件树节点图标 */
-function getFileTreeNodeIcon(label: string) {
-  if (label.endsWith(".java")) {
-    return "java";
+// 处理删除组件
+function handleDeleteComponent(componentId: string) {
+  deleteComponentById(components.value, componentId);
+  if (selectedComponentId.value === componentId) {
+    selectedComponentId.value = null;
   }
-  if (label.endsWith(".html")) {
-    return "html";
-  }
-  if (label.endsWith(".vue")) {
-    return "vue";
-  }
-  if (label.endsWith(".ts")) {
-    return "typescript";
-  }
-  if (label.endsWith(".xml")) {
-    return "xml";
-  }
-  return "file";
 }
 
-/** 一键复制 */
-const handleCopyCode = () => {
-  if (code.value) {
-    copy(code.value);
+// 删除组件
+function deleteComponentById(components: ComponentSchema[], id: string): boolean {
+  for (let i = 0; i < components.length; i++) {
+    if (components[i].id === id) {
+      components.splice(i, 1);
+      return true;
+    }
+    if (components[i].children) {
+      if (deleteComponentById(components[i].children!, id)) {
+        return true;
+      }
+    }
   }
-};
+  return false;
+}
 
-/** 组件挂载后执行 */
+// 处理移动组件
+function handleMoveComponent(fromIndex: number, toIndex: number) {
+  const component = components.value.splice(fromIndex, 1)[0];
+  components.value.splice(toIndex, 0, component);
+}
+
+
+// 组件挂载时加载本地数据
 onMounted(() => {
-  handleQuery();
-  cmRef.value?.destroy();
+  try {
+    const savedComponents = localStorage.getItem('lowcode-components');
+    if (savedComponents) {
+      components.value = JSON.parse(savedComponents);
+    }
+  } catch (error) {
+    console.warn('加载本地数据失败:', error);
+  }
 });
+
+// 监听组件变化，自动保存到本地存储
+watch(() => components.value, (newComponents) => {
+  try {
+    localStorage.setItem('lowcode-components', JSON.stringify(newComponents));
+  } catch (error) {
+    console.warn('保存到本地存储失败:', error);
+  }
+}, { deep: true });
 </script>
+
+<style scoped>
+.container {
+  position: relative;
+  width: 100%;
+  background-color: var(--el-bg-color-overlay);
+  height: calc(100vh - 50px - 40px);
+  overflow: hidden;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .container {
+    height: calc(100vh - 40px);
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    height: calc(100vh - 30px);
+  }
+}
+</style>
diff --git a/frontend/src/views/gencode/backcode/utils/schema.ts b/frontend/src/views/gencode/backcode/utils/schema.ts
new file mode 100644
index 00000000..4621fc0e
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/utils/schema.ts
@@ -0,0 +1,606 @@
+/**
+ * 低代码页面生成器 - 组件 Schema 定义
+ * 定义组件的 JSON 结构和类型
+ */
+
+// 基础组件属性接口
+export interface BaseComponentProps {
+  id: string;
+  type: string;
+  label?: string;
+  children?: ComponentSchema[];
+  style?: Record<string, any>;
+  class?: string | string[];
+}
+
+// Element Plus 组件类型枚举（只包含已配置的组件）
+export enum ComponentType {
+  // 基础组件
+  BUTTON = 'el-button',
+  LINK = 'el-link',
+  TEXT = 'el-text',
+  
+  // 布局组件
+  ROW = 'el-row',
+  COL = 'el-col',
+  CONTAINER = 'el-container',
+  HEADER = 'el-header',
+  MAIN = 'el-main',
+  ASIDE = 'el-aside',
+  FOOTER = 'el-footer',
+  
+  // 表单组件
+  FORM = 'el-form',
+  FORM_ITEM = 'el-form-item',
+  INPUT = 'el-input',
+  INPUT_NUMBER = 'el-input-number',
+  SELECT = 'el-select',
+  RADIO = 'el-radio',
+  RADIO_GROUP = 'el-radio-group',
+  CHECKBOX = 'el-checkbox',
+  CHECKBOX_GROUP = 'el-checkbox-group',
+  SWITCH = 'el-switch',
+  SLIDER = 'el-slider',
+  TIME_PICKER = 'el-time-picker',
+  DATE_PICKER = 'el-date-picker',
+  
+  // 数据展示组件
+  CARD = 'el-card',
+  TAG = 'el-tag',
+  PROGRESS = 'el-progress',
+  
+  // 反馈组件
+  ALERT = 'el-alert',
+  
+  // 其他组件
+  DIVIDER = 'el-divider'
+}
+
+// 组件 Schema 接口
+export interface ComponentSchema extends BaseComponentProps {
+  props?: Record<string, any>;
+  events?: Record<string, string>;
+  slots?: Record<string, string>;
+}
+
+// 页面 Schema 接口
+export interface PageSchema {
+  id: string;
+  name: string;
+  components: ComponentSchema[];
+  globalStyle?: Record<string, any>;
+}
+
+// 组件配置接口
+export interface ComponentConfig {
+  type: ComponentType;
+  label: string;
+  icon: string;
+  category: string;
+  defaultProps: Record<string, any>;
+  editableProps: string[];
+  canHaveChildren: boolean;
+  maxChildren?: number;
+}
+
+// 组件库配置
+export const COMPONENT_CONFIGS: Record<ComponentType, ComponentConfig> = {
+  // 基础组件
+  [ComponentType.BUTTON]: {
+    type: ComponentType.BUTTON,
+    label: '按钮',
+    icon: 'el-icon-edit',
+    category: '基础',
+    defaultProps: {
+      type: 'primary',
+      size: 'default',
+      plain: false,
+      round: false,
+      circle: false,
+      disabled: false,
+      loading: false,
+      children: '按钮'
+    },
+    editableProps: ['type', 'size', 'plain', 'round', 'circle', 'disabled', 'loading', 'children'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.LINK]: {
+    type: ComponentType.LINK,
+    label: '链接',
+    icon: 'el-icon-link',
+    category: '基础',
+    defaultProps: {
+      type: 'primary',
+      href: '',
+      disabled: false,
+      underline: true,
+      children: '链接文本'
+    },
+    editableProps: ['type', 'href', 'disabled', 'underline', 'children'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.TEXT]: {
+    type: ComponentType.TEXT,
+    label: '文本',
+    icon: 'el-icon-document',
+    category: '基础',
+    defaultProps: {
+      type: 'primary',
+      size: 'default',
+      tag: 'span',
+      children: '文本内容'
+    },
+    editableProps: ['type', 'size', 'tag', 'children'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.INPUT]: {
+    type: ComponentType.INPUT,
+    label: '输入框',
+    icon: 'el-icon-edit',
+    category: '表单',
+    defaultProps: {
+      type: 'text',
+      placeholder: '请输入内容',
+      clearable: true,
+      disabled: false,
+      readonly: false,
+      maxlength: null,
+      showWordLimit: false,
+      size: 'default'
+    },
+    editableProps: ['type', 'placeholder', 'clearable', 'disabled', 'readonly', 'maxlength', 'showWordLimit', 'size'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.INPUT_NUMBER]: {
+    type: ComponentType.INPUT_NUMBER,
+    label: '数字输入框',
+    icon: 'el-icon-plus',
+    category: '表单',
+    defaultProps: {
+      min: 0,
+      max: 100,
+      step: 1,
+      precision: 0,
+      size: 'default',
+      disabled: false,
+      controls: true,
+      controlsPosition: ''
+    },
+    editableProps: ['min', 'max', 'step', 'precision', 'size', 'disabled', 'controls', 'controlsPosition'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.SELECT]: {
+    type: ComponentType.SELECT,
+    label: '选择器',
+    icon: 'el-icon-arrow-down',
+    category: '表单',
+    defaultProps: {
+      placeholder: '请选择',
+      clearable: true,
+      disabled: false,
+      multiple: false,
+      filterable: false,
+      size: 'default'
+    },
+    editableProps: ['placeholder', 'clearable', 'disabled', 'multiple', 'filterable', 'size'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.RADIO]: {
+    type: ComponentType.RADIO,
+    label: '单选框',
+    icon: 'el-icon-check',
+    category: '表单',
+    defaultProps: {
+      label: '选项',
+      disabled: false,
+      border: false,
+      size: 'default'
+    },
+    editableProps: ['label', 'disabled', 'border', 'size'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.RADIO_GROUP]: {
+    type: ComponentType.RADIO_GROUP,
+    label: '单选框组',
+    icon: 'el-icon-check',
+    category: '表单',
+    defaultProps: {
+      disabled: false,
+      size: 'default',
+      textColor: '#ffffff',
+      fill: '#409eff'
+    },
+    editableProps: ['disabled', 'size', 'textColor', 'fill'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.CHECKBOX]: {
+    type: ComponentType.CHECKBOX,
+    label: '复选框',
+    icon: 'el-icon-check',
+    category: '表单',
+    defaultProps: {
+      label: '选项',
+      disabled: false,
+      border: false,
+      size: 'default',
+      indeterminate: false
+    },
+    editableProps: ['label', 'disabled', 'border', 'size', 'indeterminate'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.CHECKBOX_GROUP]: {
+    type: ComponentType.CHECKBOX_GROUP,
+    label: '复选框组',
+    icon: 'el-icon-check',
+    category: '表单',
+    defaultProps: {
+      disabled: false,
+      min: null,
+      max: null,
+      size: 'default',
+      textColor: '#ffffff',
+      fill: '#409eff'
+    },
+    editableProps: ['disabled', 'min', 'max', 'size', 'textColor', 'fill'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.SWITCH]: {
+    type: ComponentType.SWITCH,
+    label: '开关',
+    icon: 'el-icon-switch-button',
+    category: '表单',
+    defaultProps: {
+      disabled: false,
+      width: 40,
+      activeText: '',
+      inactiveText: '',
+      activeValue: true,
+      inactiveValue: false,
+      activeColor: '#409eff',
+      inactiveColor: '#dcdfe6'
+    },
+    editableProps: ['disabled', 'width', 'activeText', 'inactiveText', 'activeValue', 'inactiveValue', 'activeColor', 'inactiveColor'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.SLIDER]: {
+    type: ComponentType.SLIDER,
+    label: '滑块',
+    icon: 'el-icon-minus',
+    category: '表单',
+    defaultProps: {
+      min: 0,
+      max: 100,
+      step: 1,
+      disabled: false,
+      showStops: false,
+      showTooltip: true,
+      range: false
+    },
+    editableProps: ['min', 'max', 'step', 'disabled', 'showStops', 'showTooltip', 'range'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.DATE_PICKER]: {
+    type: ComponentType.DATE_PICKER,
+    label: '日期选择器',
+    icon: 'el-icon-date',
+    category: '表单',
+    defaultProps: {
+      type: 'date',
+      placeholder: '选择日期',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+      disabled: false,
+      clearable: true,
+      size: 'default'
+    },
+    editableProps: ['type', 'placeholder', 'format', 'valueFormat', 'disabled', 'clearable', 'size'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.TIME_PICKER]: {
+    type: ComponentType.TIME_PICKER,
+    label: '时间选择器',
+    icon: 'el-icon-time',
+    category: '表单',
+    defaultProps: {
+      placeholder: '选择时间',
+      format: 'HH:mm:ss',
+      valueFormat: 'HH:mm:ss',
+      disabled: false,
+      clearable: true,
+      size: 'default'
+    },
+    editableProps: ['placeholder', 'format', 'valueFormat', 'disabled', 'clearable', 'size'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.CARD]: {
+    type: ComponentType.CARD,
+    label: '卡片',
+    icon: 'el-icon-document',
+    category: '数据展示',
+    defaultProps: {
+      header: '卡片标题',
+      shadow: 'always',
+      bodyStyle: {}
+    },
+    editableProps: ['header', 'shadow', 'bodyStyle'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.TAG]: {
+    type: ComponentType.TAG,
+    label: '标签',
+    icon: 'el-icon-price-tag',
+    category: '数据展示',
+    defaultProps: {
+      type: 'primary',
+      closable: false,
+      disableTransitions: false,
+      hit: false,
+      color: '',
+      size: 'default',
+      effect: 'light',
+      children: '标签'
+    },
+    editableProps: ['type', 'closable', 'disableTransitions', 'hit', 'color', 'size', 'effect', 'children'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.PROGRESS]: {
+    type: ComponentType.PROGRESS,
+    label: '进度条',
+    icon: 'el-icon-loading',
+    category: '数据展示',
+    defaultProps: {
+      percentage: 50,
+      type: 'line',
+      strokeWidth: 6,
+      textInside: false,
+      status: '',
+      color: '#409eff',
+      showText: true,
+      format: null
+    },
+    editableProps: ['percentage', 'type', 'strokeWidth', 'textInside', 'status', 'color', 'showText'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.ALERT]: {
+    type: ComponentType.ALERT,
+    label: '警告',
+    icon: 'el-icon-warning',
+    category: '反馈',
+    defaultProps: {
+      title: '警告标题',
+      type: 'info',
+      description: '',
+      closable: true,
+      center: false,
+      closeText: '',
+      showIcon: false,
+      effect: 'light'
+    },
+    editableProps: ['title', 'type', 'description', 'closable', 'center', 'closeText', 'showIcon', 'effect'],
+    canHaveChildren: false
+  },
+  
+  [ComponentType.FORM]: {
+    type: ComponentType.FORM,
+    label: '表单',
+    icon: 'el-icon-document',
+    category: '表单',
+    defaultProps: {
+      model: 'formData',
+      rules: 'formRules',
+      labelWidth: '120px',
+      labelPosition: 'right',
+      inline: false,
+      labelSuffix: '',
+      hideRequiredAsterisk: false,
+      showMessage: true,
+      inlineMessage: false,
+      statusIcon: false,
+      validateOnRuleChange: true,
+      size: 'default',
+      disabled: false
+    },
+    editableProps: ['labelWidth', 'labelPosition', 'inline', 'labelSuffix', 'hideRequiredAsterisk', 'showMessage', 'inlineMessage', 'statusIcon', 'validateOnRuleChange', 'size', 'disabled'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.FORM_ITEM]: {
+    type: ComponentType.FORM_ITEM,
+    label: '表单项',
+    icon: 'el-icon-tickets',
+    category: '表单',
+    defaultProps: {
+      label: '标签',
+      labelWidth: '',
+      required: false,
+      rules: null,
+      error: '',
+      showMessage: true,
+      inlineMessage: false,
+      size: 'default'
+    },
+    editableProps: ['label', 'labelWidth', 'required', 'showMessage', 'inlineMessage', 'size'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.ROW]: {
+    type: ComponentType.ROW,
+    label: '行布局',
+    icon: 'el-icon-menu',
+    category: '布局',
+    defaultProps: {
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '12px',
+        padding: '12px',
+        border: '1px dashed #dcdfe6',
+        borderRadius: '4px',
+        minHeight: '60px'
+      }
+    },
+    editableProps: ['gap', 'justifyContent', 'alignItems'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.COL]: {
+    type: ComponentType.COL,
+    label: '列布局',
+    icon: 'el-icon-menu',
+    category: '布局',
+    defaultProps: {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '12px',
+        border: '1px dashed #dcdfe6',
+        borderRadius: '4px',
+        minHeight: '60px'
+      }
+    },
+    editableProps: ['gap', 'justifyContent', 'alignItems'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.CONTAINER]: {
+    type: ComponentType.CONTAINER,
+    label: '容器',
+    icon: 'el-icon-s-grid',
+    category: '布局',
+    defaultProps: {
+      direction: 'vertical'
+    },
+    editableProps: ['direction'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.HEADER]: {
+    type: ComponentType.HEADER,
+    label: '头部',
+    icon: 'el-icon-top',
+    category: '布局',
+    defaultProps: {
+      height: '60px'
+    },
+    editableProps: ['height'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.MAIN]: {
+    type: ComponentType.MAIN,
+    label: '主要区域',
+    icon: 'el-icon-s-grid',
+    category: '布局',
+    defaultProps: {},
+    editableProps: [],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.ASIDE]: {
+    type: ComponentType.ASIDE,
+    label: '侧边栏',
+    icon: 'el-icon-s-unfold',
+    category: '布局',
+    defaultProps: {
+      width: '300px'
+    },
+    editableProps: ['width'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.FOOTER]: {
+    type: ComponentType.FOOTER,
+    label: '底部',
+    icon: 'el-icon-bottom',
+    category: '布局',
+    defaultProps: {
+      height: '60px'
+    },
+    editableProps: ['height'],
+    canHaveChildren: true
+  },
+  
+  [ComponentType.DIVIDER]: {
+    type: ComponentType.DIVIDER,
+    label: '分割线',
+    icon: 'el-icon-minus',
+    category: '其他',
+    defaultProps: {
+      direction: 'horizontal',
+      contentPosition: 'center',
+      children: ''
+    },
+    editableProps: ['direction', 'contentPosition', 'children'],
+    canHaveChildren: false
+  }
+};
+
+// 组件分类
+export const COMPONENT_CATEGORIES = {
+  '基础': [ComponentType.BUTTON, ComponentType.LINK, ComponentType.TEXT],
+  '布局': [ComponentType.ROW, ComponentType.COL, ComponentType.CONTAINER, ComponentType.HEADER, ComponentType.MAIN, ComponentType.ASIDE, ComponentType.FOOTER],
+  '表单': [ComponentType.FORM, ComponentType.FORM_ITEM, ComponentType.INPUT, ComponentType.INPUT_NUMBER, ComponentType.SELECT, ComponentType.RADIO, ComponentType.RADIO_GROUP, ComponentType.CHECKBOX, ComponentType.CHECKBOX_GROUP, ComponentType.SWITCH, ComponentType.SLIDER, ComponentType.TIME_PICKER, ComponentType.DATE_PICKER],
+  '数据展示': [ComponentType.CARD, ComponentType.TAG, ComponentType.PROGRESS],
+  '反馈': [ComponentType.ALERT],
+  '其他': [ComponentType.DIVIDER]
+};
+
+// 生成唯一 ID
+export function generateId(): string {
+  return `component_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// 创建组件实例
+export function createComponent(type: ComponentType, props: Record<string, any> = {}): ComponentSchema {
+  const config = COMPONENT_CONFIGS[type];
+  if (!config) {
+    throw new Error(`Unknown component type: ${type}`);
+  }
+  
+  const component: ComponentSchema = {
+    id: generateId(),
+    type,
+    props: { ...config.defaultProps, ...props },
+    children: config.canHaveChildren ? [] : undefined
+  };
+  
+  // 布局组件初始化为空容器，不自动生成子组件
+  
+  return component;
+}
+
+// 验证组件 Schema
+export function validateComponentSchema(schema: ComponentSchema): boolean {
+  if (!schema.id || !schema.type) {
+    return false;
+  }
+  
+  const config = COMPONENT_CONFIGS[schema.type as ComponentType];
+  if (!config) {
+    return false;
+  }
+  
+  if (config.canHaveChildren && schema.children) {
+    return schema.children.every(child => validateComponentSchema(child));
+  }
+  
+  return true;
+}
diff --git a/frontend/src/views/gencode/backcode/utils/serializer.ts b/frontend/src/views/gencode/backcode/utils/serializer.ts
new file mode 100644
index 00000000..5c5afa1e
--- /dev/null
+++ b/frontend/src/views/gencode/backcode/utils/serializer.ts
@@ -0,0 +1,412 @@
+/**
+ * 低代码页面生成器 - 序列化器
+ * 将 JSON Schema 转换为 Vue3 + TypeScript 单文件组件
+ */
+
+import { ComponentSchema, PageSchema, ComponentType, COMPONENT_CONFIGS } from './schema';
+
+// 生成 Vue 组件的模板字符串
+export function generateVueTemplate(schema: PageSchema): string {
+  const template = generateTemplateFromComponents(schema.components);
+  const script = generateScriptSetup(schema);
+  const style = generateStyle();
+  
+  return `<template>
+${template}
+</template>
+
+${script}
+
+${style}`;
+}
+
+// 递归生成组件模板
+function generateTemplateFromComponents(components: ComponentSchema[], indent = 0): string {
+  const spaces = '  '.repeat(indent);
+  let template = '';
+  
+  for (const component of components) {
+    template += generateComponentTemplate(component, indent);
+  }
+  
+  return template;
+}
+
+// 生成单个组件的模板
+function generateComponentTemplate(component: ComponentSchema, indent = 0): string {
+  const spaces = '  '.repeat(indent);
+  const { type, props = {}, children = [], events = {}, slots = {} } = component;
+  
+  // 对于行列布局，生成为div
+  const actualType = (type === 'el-row' || type === 'el-col') ? 'div' : type;
+  
+  // 生成属性字符串
+  const propsString = generatePropsString(props, type);
+  
+  // 生成事件字符串
+  const eventsString = generateEventsString(events);
+  
+  // 获取组件内容
+  const componentContent = getComponentContent(component, indent);
+  
+  // 生成子组件模板
+  const childrenTemplate = children.length > 0 
+    ? `\n${generateTemplateFromComponents(children, indent + 1)}\n${spaces}`
+    : '';
+  
+  // 自闭合标签处理
+  const isSelfClosing = isSelfClosingTag(actualType);
+  
+  if (isSelfClosing) {
+    return `${spaces}<${actualType}${propsString}${eventsString} />\n`;
+  } else {
+    const content = componentContent || childrenTemplate;
+    return `${spaces}<${actualType}${propsString}${eventsString}>${content}</${actualType}>\n`;
+  }
+}
+
+// 获取组件内容
+function getComponentContent(component: ComponentSchema, indent = 0): string {
+  const spaces = '  '.repeat(indent + 1);
+  
+  // 有文本内容的组件
+  if (component.props?.children && typeof component.props.children === 'string') {
+    return component.props.children;
+  }
+  
+  // 特殊组件的默认内容
+  const defaultContent: Record<string, string> = {
+    'el-button': '按钮',
+    'el-link': '链接',
+    'el-text': '文本',
+    'el-tag': '标签',
+    'el-alert': '', // alert 通过 title 属性显示内容
+    'el-card': `\n${spaces}<div>卡片内容</div>\n${spaces.slice(2)}`,
+    'el-form': `\n${spaces}<!-- 表单项 -->\n${spaces.slice(2)}`,
+    'el-form-item': `\n${spaces}<!-- 表单控件 -->\n${spaces.slice(2)}`,
+    'el-container': `\n${spaces}<!-- 容器内容 -->\n${spaces.slice(2)}`,
+    'el-header': `\n${spaces}<!-- 头部内容 -->\n${spaces.slice(2)}`,
+    'el-main': `\n${spaces}<!-- 主要内容 -->\n${spaces.slice(2)}`,
+    'el-aside': `\n${spaces}<!-- 侧边栏内容 -->\n${spaces.slice(2)}`,
+    'el-footer': `\n${spaces}<!-- 底部内容 -->\n${spaces.slice(2)}`
+  };
+  
+  return defaultContent[component.type] || '';
+}
+
+// 生成属性字符串
+function generatePropsString(props: Record<string, any>, componentType?: string): string {
+  const propStrings: string[] = [];
+  
+  for (const [key, value] of Object.entries(props)) {
+    if (value === null || value === undefined) continue;
+    
+    // 对于行列布局，将样式属性转换为style
+    if ((componentType === 'el-row' || componentType === 'el-col') && key === 'style') {
+      const styleString = Object.entries(value)
+        .map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`)
+        .join('; ');
+      propStrings.push(`style="${styleString}"`);
+      continue;
+    }
+    
+    // 跳过布局组件的特殊属性
+    if ((componentType === 'el-row' || componentType === 'el-col') && 
+        ['gap', 'justifyContent', 'alignItems'].includes(key)) {
+      continue;
+    }
+    
+    if (typeof value === 'boolean') {
+      if (value) {
+        propStrings.push(key);
+      }
+    } else if (typeof value === 'string') {
+      propStrings.push(`${key}="${escapeHtml(value)}"`);
+    } else if (typeof value === 'number') {
+      propStrings.push(`${key}="${value}"`);
+    } else if (Array.isArray(value)) {
+      propStrings.push(`:${key}="[${value.map(v => JSON.stringify(v)).join(', ')}]"`);
+    } else if (typeof value === 'object') {
+      propStrings.push(`:${key}="${JSON.stringify(value)}"`);
+    } else {
+      propStrings.push(`:${key}="${value}"`);
+    }
+  }
+  
+  return propStrings.length > 0 ? ` ${propStrings.join(' ')}` : '';
+}
+
+// 生成事件字符串
+function generateEventsString(events: Record<string, string>): string {
+  const eventStrings: string[] = [];
+  
+  for (const [event, handler] of Object.entries(events)) {
+    eventStrings.push(`@${event}="${handler}"`);
+  }
+  
+  return eventStrings.length > 0 ? ` ${eventStrings.join(' ')}` : '';
+}
+
+// 生成插槽字符串
+function generateSlotsString(slots: Record<string, string>): string {
+  const slotStrings: string[] = [];
+  
+  for (const [slotName, slotContent] of Object.entries(slots)) {
+    if (slotName === 'default') {
+      slotStrings.push(slotContent);
+    } else {
+      slotStrings.push(`<template #${slotName}>${slotContent}</template>`);
+    }
+  }
+  
+  return slotStrings.length > 0 ? ` ${slotStrings.join(' ')}` : '';
+}
+
+// 生成 Script Setup
+function generateScriptSetup(schema: PageSchema): string {
+  const imports = generateImports(schema);
+  const reactiveData = generateReactiveData(schema);
+  const methods = generateMethods(schema);
+  const computed = generateComputed(schema);
+  
+  return `<script setup lang="ts">
+${imports}
+
+${reactiveData}
+
+${computed}
+
+${methods}
+</script>`;
+}
+
+// 生成导入语句
+function generateImports(schema: PageSchema): string {
+  const componentTypes = new Set<string>();
+  
+  // 收集所有使用的组件类型
+  function collectComponentTypes(components: ComponentSchema[]) {
+    for (const component of components) {
+      componentTypes.add(component.type);
+      if (component.children) {
+        collectComponentTypes(component.children);
+      }
+    }
+  }
+  
+  collectComponentTypes(schema.components);
+  
+  // 生成导入语句
+  const imports = [
+    "import { ref, reactive, computed, onMounted } from 'vue'",
+    "import { ElMessage } from 'element-plus'"
+  ];
+  
+  // 添加 Element Plus 组件导入
+  const elementComponents = Array.from(componentTypes).filter(type => 
+    type.startsWith('el-') && !['el-icon', 'el-text'].includes(type)
+  );
+  
+  if (elementComponents.length > 0) {
+    imports.push(`import { ${elementComponents.join(', ')} } from 'element-plus'`);
+  }
+  
+  return imports.join('\n');
+}
+
+// 生成响应式数据
+function generateReactiveData(schema: PageSchema): string {
+  const dataProperties: string[] = [];
+  
+  // 收集所有需要的数据属性
+  function collectDataProperties(components: ComponentSchema[]) {
+    for (const component of components) {
+      if (component.type === ComponentType.FORM) {
+        dataProperties.push('formData: {}');
+        dataProperties.push('formRules: {}');
+      } else if (component.type === ComponentType.INPUT || 
+                 component.type === ComponentType.SELECT ||
+                 component.type === ComponentType.INPUT_NUMBER) {
+        const fieldName = component.props?.model || `field_${component.id}`;
+        dataProperties.push(`${fieldName}: ""`);
+      }
+      
+      if (component.children) {
+        collectDataProperties(component.children);
+      }
+    }
+  }
+  
+  collectDataProperties(schema.components);
+  
+  if (dataProperties.length === 0) {
+    return '// 响应式数据\nconst data = reactive({})';
+  }
+  
+  return `// 响应式数据
+const data = reactive({
+  ${dataProperties.join(',\n  ')}
+})`;
+}
+
+// 生成计算属性
+function generateComputed(schema: PageSchema): string {
+  return `// 计算属性
+const computedValue = computed(() => {
+  // 在这里添加计算逻辑
+  return 'computed value'
+})`;
+}
+
+// 生成方法
+function generateMethods(schema: PageSchema): string {
+  const methods: string[] = [];
+  
+  // 收集所有需要的方法
+  function collectMethods(components: ComponentSchema[]) {
+    for (const component of components) {
+      if (component.events) {
+        for (const [event, handler] of Object.entries(component.events)) {
+          if (!methods.includes(handler)) {
+            methods.push(handler);
+          }
+        }
+      }
+      
+      if (component.children) {
+        collectMethods(component.children);
+      }
+    }
+  }
+  
+  collectMethods(schema.components);
+  
+  // 添加默认方法
+  methods.push('handleSubmit');
+  methods.push('handleReset');
+  
+  const methodBodies = methods.map(method => {
+    switch (method) {
+      case 'handleSubmit':
+        return `function handleSubmit() {
+  ElMessage.success('提交成功')
+}`;
+      case 'handleReset':
+        return `function handleReset() {
+  // 重置表单逻辑
+}`;
+      default:
+        return `function ${method}() {
+  // ${method} 方法实现
+}`;
+    }
+  });
+  
+  return `// 方法
+${methodBodies.join('\n\n')}
+
+// 生命周期
+onMounted(() => {
+  // 组件挂载后的逻辑
+})`;
+}
+
+// 生成样式
+function generateStyle(): string {
+  return `<style scoped>
+/* 页面样式 */
+.page-container {
+  padding: 20px;
+}
+
+/* 组件样式 */
+.component-wrapper {
+  margin-bottom: 16px;
+}
+
+/* 响应式样式 */
+@media (max-width: 768px) {
+  .page-container {
+    padding: 10px;
+  }
+}
+</style>`;
+}
+
+// 判断是否为自闭合标签
+function isSelfClosingTag(tag: string): boolean {
+  const selfClosingTags = [
+    'el-input',
+    'el-input-number',
+    'el-icon',
+    'el-image',
+    'el-progress',
+    'el-skeleton',
+    'el-empty',
+    'el-backtop'
+  ];
+  
+  return selfClosingTags.includes(tag);
+}
+
+// HTML 转义
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  
+  return text.replace(/[&<>"']/g, (m) => map[m]);
+}
+
+// 生成完整的 Vue 文件内容
+export function generateVueFile(schema: PageSchema, filename?: string): string {
+  const template = generateVueTemplate(schema);
+  const header = `<!--
+  文件名: ${filename || 'generated-page.vue'}
+  生成时间: ${new Date().toLocaleString()}
+  描述: 由低代码页面生成器自动生成
+-->
+
+`;
+  
+  return header + template;
+}
+
+// 导出为文件
+export function exportAsFile(schema: PageSchema, filename: string = 'generated-page.vue'): void {
+  const content = generateVueFile(schema, filename);
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  
+  URL.revokeObjectURL(url);
+}
+
+// 复制到剪贴板
+export async function copyToClipboard(schema: PageSchema): Promise<void> {
+  const content = generateVueFile(schema);
+  
+  try {
+    await navigator.clipboard.writeText(content);
+    console.log('代码已复制到剪贴板');
+  } catch (err) {
+    console.error('复制失败:', err);
+    // 降级方案
+    const textArea = document.createElement('textarea');
+    textArea.value = content;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+  }
+}
diff --git a/frontend/src/views/system/role/components/PermissonDrawer.vue b/frontend/src/views/system/role/components/PermissonDrawer.vue
index a80c4405..c62bd0f8 100644
--- a/frontend/src/views/system/role/components/PermissonDrawer.vue
+++ b/frontend/src/views/system/role/components/PermissonDrawer.vue
@@ -170,7 +170,7 @@ const drawerVisible = computed({
   }
 })
 const isExpanded = ref(true);
-const parentChildLinked = ref(true)
+const parentChildLinked = ref(false)
 const loading = ref<boolean>(false);
 const deptTreeData = ref<permissionDeptType[]>([]);
 const menuTreeData = ref<permissionMenuType[]>([]);
@@ -205,6 +205,9 @@ const init = async () => {
       dept_ids: roleResponse.data.data.depts?.map(dept => dept.id) || []
     };
 
+    // 根据保存的权限数据判断是否应该开启父子联动
+    parentChildLinked.value = checkParentChildLinked(permissionState.value.menu_ids, menuTreeData.value);
+
     // 回显菜单树选中项
     if (permTreeRef.value) {
       await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
@@ -295,6 +298,67 @@ function handleFilter(
   return data.label.includes(value);
 }
 
+// 检查权限数据是否遵循父子联动模式
+function checkParentChildLinked(menuIds: number[], menuTreeData: permissionMenuType[]): boolean {
+  if (!menuIds.length || !menuTreeData.length) return false;
+  
+  // 创建一个映射来快速查找菜单项
+  const menuMap = new Map<number, permissionMenuType>();
+  const buildMenuMap = (menus: permissionMenuType[]) => {
+    menus.forEach(menu => {
+      menuMap.set(menu.id, menu);
+      if (menu.children) {
+        buildMenuMap(menu.children);
+      }
+    });
+  };
+  buildMenuMap(menuTreeData);
+  
+  let hasParentChildConflict = false;
+  
+  // 检查每个选中的菜单项
+  for (const menuId of menuIds) {
+    const menu = menuMap.get(menuId);
+    if (!menu) continue;
+    
+    // 如果选中了父菜单，检查是否有子菜单未被选中
+    if (menu.children && menu.children.length > 0) {
+      const hasUnselectedChildren = menu.children.some(child => !menuIds.includes(child.id));
+      if (hasUnselectedChildren) {
+        hasParentChildConflict = true;
+        break; // 发现冲突，直接返回false
+      }
+    }
+    
+    // 如果选中了子菜单，检查父菜单是否也被选中
+    const parentMenu = findParentMenu(menuId, menuTreeData);
+    if (parentMenu && !menuIds.includes(parentMenu.id)) {
+      hasParentChildConflict = true;
+      break; // 发现冲突，直接返回false
+    }
+  }
+  
+  // 如果没有发现父子冲突，说明是父子联动模式
+  return !hasParentChildConflict;
+}
+
+// 查找父菜单
+function findParentMenu(menuId: number, menuTreeData: permissionMenuType[]): permissionMenuType | null {
+  for (const menu of menuTreeData) {
+    if (menu.children) {
+      for (const child of menu.children) {
+        if (child.id === menuId) {
+          return menu;
+        }
+        // 递归查找更深层的父菜单
+        const found = findParentMenu(menuId, [child]);
+        if (found) return found;
+      }
+    }
+  }
+  return null;
+}
+
 // 父子菜单节点是否联动
 function handleParentChildLinkedChange(val: any) {
   parentChildLinked.value = val;