feat: 新增权限指令并集成到多个页面组件

refactor(backend): 重构数据库模型和初始化逻辑

fix(frontend): 修复权限指令在多个组件中的使用问题

perf(backend): 优化数据库连接和初始化性能

docs: 更新低代码生成器的README文档

style: 清理无用代码和注释

chore: 移除不再需要的依赖项

test: 更新用户权限相关测试用例

ci: 更新CI配置以支持新的权限检查

build: 更新依赖项版本

frontend/src/views/gencode/backcode/components/basicInfoForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input placeholder="请输入仓库名称" v-model="info.tableName" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input placeholder="请输入" v-model="info.tableComment" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="实体类名称" prop="className">
+          <el-input placeholder="请输入" v-model="info.className" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="functionAuthor">
+          <el-input placeholder="请输入" v-model="info.functionAuthor" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+defineProps({
+  info: {
+    type: Object,
+    default: null
+  }
+});
+
+// 表单校验
+const rules = ref({
+  tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
+  tableComment: [{ required: true, message: "请输入表描述", trigger: "blur" }],
+  className: [{ required: true, message: "请输入实体类名称", trigger: "blur" }],
+  functionAuthor: [{ required: true, message: "请输入作者", trigger: "blur" }]
+});
+</script>

frontend/src/views/gencode/backcode/components/createTable.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- 创建表 -->
+  <el-dialog title="创建表" v-model="visible" width="800px" top="5vh" append-to-body>
+    <span>创建表语句(支持多个建表语句)：</span>
+    <el-input type="textarea" :rows="10" placeholder="请输入文本" v-model="content"></el-input>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import GencodeAPI from "@/api/generator/gencode";
+
+const visible = ref(false);
+const content = ref("");
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["ok"]);
+
+/** 显示弹框 */
+function show() {
+  visible.value = true;
+}
+
+/** 导入按钮操作 */
+function handleImportTable() {
+  if (content.value === "") {
+    proxy.$modal.msgError("请输入建表语句");
+    return;
+  }
+  GencodeAPI.createTable({ sql: content.value }).then(res => {
+    proxy.$modal.msgSuccess(res.msg);
+    if (res.code === 200) {
+      visible.value = false;
+      emit("ok");
+    }
+  });
+}
+
+defineExpose({
+  show,
+});
+</script>

frontend/src/views/gencode/backcode/components/editTable.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basic">
+        <basic-info-form ref="basicInfo" :info="info" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="columnInfo">
+        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
+          <el-table-column label="序号" type="index" min-width="5%"/>
+          <el-table-column
+            label="字段列名"
+            prop="columnName"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="字段描述" min-width="10%">
+            <template #default="scope">
+              <el-input v-model="scope.row.columnComment"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="物理类型"
+            prop="columnType"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="Python类型" min-width="11%">
+            <template #default="scope">
+              <el-select v-model="scope.row.pythonType">
+                <el-option label="str" value="str" />
+                <el-option label="int" value="int" />
+                <el-option label="float" value="float" />
+                <el-option label="Decimal" value="Decimal" />
+                <el-option label="date" value="date" />
+                <el-option label="time" value="time" />
+                <el-option label="datetime" value="datetime" />
+                <el-option label="bytes" value="bytes" />
+                <el-option label="dict" value="dict" />
+                <el-option label="list" value="list" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="Python属性" min-width="10%">
+            <template #default="scope">
+              <el-input v-model="scope.row.pythonField"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="插入" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="编辑" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="列表" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询方式" min-width="10%">
+            <template #default="scope">
+              <el-select v-model="scope.row.queryType">
+                <el-option label="=" value="EQ" />
+                <el-option label="!=" value="NE" />
+                <el-option label=">" value="GT" />
+                <el-option label=">=" value="GTE" />
+                <el-option label="<" value="LT" />
+                <el-option label="<=" value="LTE" />
+                <el-option label="LIKE" value="LIKE" />
+                <el-option label="BETWEEN" value="BETWEEN" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="必填" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="唯一" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isUnique"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示类型" min-width="12%">
+            <template #default="scope">
+              <el-select v-model="scope.row.htmlType">
+                <el-option label="文本框" value="input" />
+                <el-option label="文本域" value="textarea" />
+                <el-option label="下拉框" value="select" />
+                <el-option label="单选框" value="radio" />
+                <el-option label="复选框" value="checkbox" />
+                <el-option label="日期控件" value="datetime" />
+                <el-option label="图片上传" value="imageUpload" />
+                <el-option label="文件上传" value="fileUpload" />
+                <el-option label="富文本控件" value="editor" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="字典类型" min-width="12%">
+            <template #default="scope">
+              <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+                <el-option
+                  v-for="dict in dictOptions"
+                  :key="dict.dictType"
+                  :label="dict.dictName"
+                  :value="dict.dictType">
+                  <span style="float: left">{{ dict.dictName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
+              </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="genInfo">
+        <gen-info-form ref="genInfo" :info="info" :tables="tables" />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form label-width="100px">
+      <div style="text-align: center;margin-left:-100px;margin-top:10px;">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </div>
+    </el-form>
+  </el-card>
+</template>
+
+<script setup name="GenEdit">
+import GencodeAPI from "@/api/generator/gencode";
+import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
+import basicInfoForm from "./components/basicInfoForm";
+import genInfoForm from "./components/genInfoForm";
+
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+
+const activeName = ref("columnInfo");
+const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");
+const tables = ref([]);
+const columns = ref([]);
+const dictOptions = ref([]);
+const info = ref({});
+
+/** 提交按钮 */
+function submitForm() {
+  const basicForm = proxy.$refs.basicInfo.$refs.basicInfoForm;
+  const genForm = proxy.$refs.genInfo.$refs.genInfoForm;
+  Promise.all([basicForm, genForm].map(getFormPromise)).then(res => {
+    const validateResult = res.every(item => !!item);
+    if (validateResult) {
+      const genTable = Object.assign({}, info.value);
+      genTable.columns = columns.value;
+      genTable.params = {
+        treeCode: info.value.treeCode,
+        treeName: info.value.treeName,
+        treeParentCode: info.value.treeParentCode,
+        parentMenuId: info.value.parentMenuId
+      };
+      GencodeAPI.updateGenTable(genTable).then(res => {
+        proxy.$modal.msgSuccess(res.msg);
+        if (res.code === 200) {
+          close();
+        }
+      });
+    } else {
+      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
+    }
+  });
+}
+
+function getFormPromise(form) {
+  return new Promise(resolve => {
+    form.validate(res => {
+      resolve(res);
+    });
+  });
+}
+
+function close() {
+  const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: route.query.pageNum } };
+  proxy.$tab.closeOpenPage(obj);
+}
+
+(() => {
+  const tableId = route.params && route.params.tableId;
+  if (tableId) {
+    // 获取表详细信息
+    GencodeAPI.getGenTable(tableId).then(res => {
+      columns.value = res.data.rows;
+      info.value = res.data.info;
+      tables.value = res.data.tables;
+    });
+    /** 查询字典下拉列表 */
+    GencodeAPI.getDictOptionselect().then(response => {
+      dictOptions.value = response.data;
+    });
+  }
+})();
+</script>

frontend/src/views/gencode/backcode/components/genInfoForm.vue

@@ -0,0 +1,306 @@
+<template>
+  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item prop="tplCategory">
+          <template #label>生成模板</template>
+          <el-select v-model="info.tplCategory" @change="tplSelectChange">
+            <el-option label="单表（增删改查）" value="crud" />
+            <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="主子表（增删改查）" value="sub" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="tplWebType">
+          <template #label>前端类型</template>
+          <el-select v-model="info.tplWebType">
+            <el-option label="Vue2 Element UI 模版" value="element-ui" />
+            <el-option label="Vue3 Element Plus 模版" value="element-plus" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="packageName">
+          <template #label>
+            生成包路径
+            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.packageName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <template #label>
+            生成模块名
+            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <template #label>
+            生成业务名
+            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="functionName">
+          <template #label>
+            生成功能名
+            <el-tooltip content="用作类描述，例如 用户" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.functionName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="genType">
+          <template #label>
+            生成代码方式
+            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-radio v-model="info.genType" value="0">zip压缩包</el-radio>
+          <el-radio v-model="info.genType" value="1">自定义路径</el-radio>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            上级菜单
+            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-tree-select
+            v-model="info.parentMenuId"
+            :data="menuOptions"
+            :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
+            value-key="menuId"
+            placeholder="请选择系统菜单"
+            check-strictly
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" v-if="info.genType == '1'">
+        <el-form-item prop="genPath">
+          <template #label>
+            自定义路径
+            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.genPath">
+            <template #append>
+              <el-dropdown>
+                <el-button type="primary">
+                  最近路径快速选择
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    
+    <template v-if="info.tplCategory == 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-row v-show="info.tplCategory == 'tree'">
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树编码字段
+              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树父编码字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeParentCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+    <template v-if="info.tplCategory == 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              关联子表的表名
+              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+              <el-option
+                v-for="(table, index) in tables"
+                :key="index"
+                :label="table.tableName + '：' + table.tableComment"
+                :value="table.tableName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              子表关联的外键名
+              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.subTableFkName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in subColumns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+  </el-form>
+</template>
+
+<script setup>
+import { listMenu } from "@/api/system/menu";
+
+const subColumns = ref([]);
+const menuOptions = ref([]);
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  info: {
+    type: Object,
+    default: null
+  },
+  tables: {
+    type: Array,
+    default: null
+  }
+});
+
+// 表单校验
+const rules = ref({
+  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
+  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
+  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
+  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
+  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
+});
+
+function subSelectChange(value) {
+  props.info.subTableFkName = "";
+}
+
+function tplSelectChange(value) {
+  if (value !== "sub") {
+    props.info.subTableName = "";
+    props.info.subTableFkName = "";
+  }
+}
+
+function setSubTableColumns(value) {
+  for (var item in props.tables) {
+    const name = props.tables[item].tableName;
+    if (value === name) {
+      subColumns.value = props.tables[item].columns;
+      break;
+    }
+  }
+}
+
+/** 查询菜单下拉树结构 */
+function getMenuTreeselect() {
+  listMenu().then(response => {
+    menuOptions.value = proxy.handleTree(response.data, "menuId");
+  });
+}
+
+onMounted(() => {
+  getMenuTreeselect();
+})
+
+watch(() => props.info.subTableName, val => {
+  setSubTableColumns(val);
+});
+
+watch(() => props.info.tplWebType, val => {
+  if (val === '') {
+    props.info.tplWebType = "element-plus";
+  }
+});
+
+</script>

frontend/src/views/gencode/backcode/components/importTable.vue

@@ -0,0 +1,126 @@
+<template>
+  <!-- 导入表 -->
+  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryRef" :inline="true">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          style="width: 180px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          style="width: 180px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import GencodeAPI from "@/api/generator/gencode";
+
+const total = ref(0);
+const visible = ref(false);
+const tables = ref([]);
+const dbTableList = ref([]);
+const { proxy } = getCurrentInstance();
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  tableName: undefined,
+  tableComment: undefined
+});
+
+const emit = defineEmits(["ok"]);
+
+/** 查询参数列表 */
+function show() {
+  getList();
+  visible.value = true;
+}
+
+/** 单击选择行 */
+function clickRow(row) {
+  proxy.$refs.table.toggleRowSelection(row);
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  tables.value = selection.map(item => item.tableName);
+}
+
+/** 查询表数据 */
+function getList() {
+  GencodeAPI.listDbTable(queryParams).then(res => {
+    dbTableList.value = res.rows;
+    total.value = res.total;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 导入按钮操作 */
+function handleImportTable() {
+  const tableNames = tables.value.join(",");
+  if (tableNames == "") {
+    proxy.$modal.msgError("请选择要导入的表");
+    return;
+  }
+  GencodeAPI.importTable({ tables: tableNames }).then(res => {
+    proxy.$modal.msgSuccess(res.msg);
+    if (res.code === 200) {
+      visible.value = false;
+      emit("ok");
+    }
+  });
+}
+
+defineExpose({
+  show,
+});
+</script>

frontend/src/views/gencode/backcode/index.vue

@@ -1,173 +1,323 @@
-<!--
-  低代码页面生成器 - 主界面
-  整合 Palette、Canvas、Inspector 三个核心组件
--->
 <template>
-  <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 class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" style="width: 308px">
+        <el-date-picker
+          v-model="dateRange"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['generator:gencode:query']">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery" v-hasPermi="['generator:gencode:query']">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Download"
+          :disabled="multiple"
+          @click="handleGenTable"
+          v-hasPermi="['generator:gencode:code']"
+        >生成</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="openCreateTable"
+          v-hasRole="['admin']"
+        >创建</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Upload"
+          @click="openImportTable"
+          v-hasPermi="['generator:gencode:import']"
+        >导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+          <el-button
+           type="success"
+           plain
+           icon="Edit"
+           :disabled="single"
+           @click="handleEditTable"
+           v-hasPermi="['generator:gencode:update']"
+          >修改</el-button>
+        </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['generator:gencode:delete']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center" width="55"></el-table-column>
+      <el-table-column label="序号" type="index" width="50" align="center">
+        <template #default="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="表名称"
+        align="center"
+        prop="tableName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="表描述"
+        align="center"
+        prop="tableComment"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="实体"
+        align="center"
+        prop="className"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
+      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
+      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="预览" placement="top">
+            <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['generator:gencode:query']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="编辑" placement="top">
+            <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['generator:gencode:update']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['generator:gencode:delete']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="同步" placement="top">
+            <el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['generator:gencode:edit']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="生成代码" placement="top">
+            <el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['generator:gencode:code']"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
     />
+    <!-- 预览界面 -->
+    <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+      <el-tabs v-model="preview.activeName">
+        <el-tab-pane
+          v-for="(value, key) in preview.data"
+          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.jinja2'))"
+          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.jinja2'))"
+          :key="value"
+        >
+          <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">&nbsp;复制</el-link>
+          <pre>{{ value }}</pre>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <import-table ref="importRef" @ok="handleQuery" />
+    <create-table ref="createRef" @ok="handleQuery" />
   </div>
 </template>
 
-<script setup lang="ts">
-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);
+<script setup name="Gen">
+defineOptions({
+    name: "GenCode",
+    inheritAttrs: false,
 });
 
-// 查找组件
-function findComponentById(components: ComponentSchema[], id: string): ComponentSchema | null {
-  for (const component of components) {
-    if (component.id === id) {
-      return component;
-    }
-    if (component.children) {
-      const found = findComponentById(component.children, id);
-      if (found) return found;
-    }
-  }
-  return null;
-}
+import GencodeAPI from "@/api/generator/gencode";
+import router from "@/router";
+import importTable from "@/views/gencode/backcode/components/importTable.vue";
+import createTable from "@/views/gencode/backcode/components/createTable.vue";
 
-// 处理添加组件
-function handleAddComponent(component: ComponentSchema) {
-  components.value.push(component);
-  selectedComponentId.value = component.id;
-  ElMessage.success(`已添加 ${component.type} 组件`);
-}
+const route = useRoute();
+const { proxy } = getCurrentInstance();
 
-// 处理更新组件列表
-function handleUpdateComponents(newComponents: ComponentSchema[]) {
-  components.value = newComponents;
-}
+const tableList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const tableNames = ref([]);
+const dateRange = ref([]);
+const uniqueId = ref("");
 
-// 处理选择组件
-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 handleDeleteComponent(componentId: string) {
-  deleteComponentById(components.value, componentId);
-  if (selectedComponentId.value === componentId) {
-    selectedComponentId.value = null;
-  }
-}
-
-// 删除组件
-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(() => {
-  try {
-    const savedComponents = localStorage.getItem('lowcode-components');
-    if (savedComponents) {
-      components.value = JSON.parse(savedComponents);
-    }
-  } catch (error) {
-    console.warn('加载本地数据失败:', error);
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tableName: undefined,
+    tableComment: undefined
+  },
+  preview: {
+    open: false,
+    title: "代码预览",
+    data: {},
+    activeName: "do.py"
   }
 });
 
-// 监听组件变化，自动保存到本地存储
-watch(() => components.value, (newComponents) => {
-  try {
-    localStorage.setItem('lowcode-components', JSON.stringify(newComponents));
-  } catch (error) {
-    console.warn('保存到本地存储失败:', error);
+const { queryParams, preview } = toRefs(data);
+
+onActivated(() => {
+  const time = route.query.t;
+  if (time != null && time != uniqueId.value) {
+    uniqueId.value = time;
+    queryParams.value.pageNum = Number(route.query.pageNum);
+    dateRange.value = [];
+    proxy.resetForm("queryForm");
+    getList();
   }
-}, { deep: true });
+})
+
+/** 查询表集合 */
+function getList() {
+  loading.value = true;
+  GencodeAPI.listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    tableList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 生成代码操作 */
+function handleGenTable(row) {
+  const tbNames = row.tableName || tableNames.value;
+  if (tbNames == "") {
+    proxy.$modal.msgError("请选择要生成的数据");
+    return;
+  }
+  if (row.genType === "1") {
+    GencodeAPI.genCodeToPath(row.tableName).then(() => {
+      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
+    });
+  } else {
+    GencodeAPI.batchGenCode(tbNames).then(response => {
+      const blob = new Blob([response], { type: 'application/zip' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = 'code.zip';
+      link.click();
+      window.URL.revokeObjectURL(url);
+    });
+  }
+}
+
+/** 同步数据库操作 */
+function handleSynchDb(row) {
+  const tableName = row.tableName;
+  proxy.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
+    return GencodeAPI.syncDb(tableName);
+  }).then(() => {
+    proxy.$modal.msgSuccess("同步成功");
+  }).catch(() => {});
+}
+
+/** 打开导入表弹窗 */
+function openImportTable() {
+  proxy.$refs["importRef"].show();
+}
+
+/** 打开创建表弹窗 */
+function openCreateTable() {
+  proxy.$refs["createRef"].show();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 预览按钮 */
+function handlePreview(row) {
+  GencodeAPI.previewTable(row.tableId).then(response => {
+    preview.value.data = response.data;
+    preview.value.open = true;
+    preview.value.activeName = "do.py";
+  });
+}
+
+/** 复制代码成功 */
+function copyTextSuccess() {
+  proxy.$modal.msgSuccess("复制成功");
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.tableId);
+  tableNames.value = selection.map(item => item.tableName);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 修改按钮操作 */
+function handleEditTable(row) {
+  const tableId = row.tableId || ids.value[0];
+  router.push({ path: "/tool/gen-edit/index/" + tableId, query: { pageNum: queryParams.value.pageNum } });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const tableIds = row.tableId ? [row.tableId] : ids.value;
+  proxy.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
+    return GencodeAPI.deleteTable(tableIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </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>

frontend/src/views/gencode/webcode/components/RightPanel.vue

@@ -993,4 +993,4 @@ function tagChange(tagIcon) {
   font-size: 14px;
   padding-right: 8px;
 }
-</style>
+</style>

frontend/src/views/gencode/webcode/demo/index.vue

@@ -0,0 +1,173 @@
+<!--
+  低代码页面生成器 - 主界面
+  整合 Palette、Canvas、Inspector 三个核心组件
+-->
+<template>
+  <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">
+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);
+});
+
+// 查找组件
+function findComponentById(components: ComponentSchema[], id: string): ComponentSchema | null {
+  for (const component of components) {
+    if (component.id === id) {
+      return component;
+    }
+    if (component.children) {
+      const found = findComponentById(component.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// 处理添加组件
+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 handleDeleteComponent(componentId: string) {
+  deleteComponentById(components.value, componentId);
+  if (selectedComponentId.value === componentId) {
+    selectedComponentId.value = null;
+  }
+}
+
+// 删除组件
+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(() => {
+  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>

frontend/src/views/gencode/webcode/index.vue

@@ -11,9 +11,10 @@
           <div class="components-title">
             <svg-icon icon-class="component" />输入型组件
           </div>
-          <draggable class="components-draggable" :list="inputComponents"
+          <draggable
+class="components-draggable" :list="inputComponents"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            draggable=".components-item" :sort="false" item-key="label" @end="onEnd">
             <template #item="{ element, index }">
               <div :key="index" class="components-item" @click="addComponent(element)">
                 <div class="components-body">
@@ -26,9 +27,10 @@
           <div class="components-title">
             <svg-icon icon-class="component" />选择型组件
           </div>
-          <draggable class="components-draggable" :list="selectComponents"
+          <draggable
+class="components-draggable" :list="selectComponents"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            draggable=".components-item" :sort="false" item-key="label" @end="onEnd">
             <template #item="{ element, index }">
               <div :key="index" class="components-item" @click="addComponent(element)">
                 <div class="components-body">
@@ -41,9 +43,10 @@
           <div class="components-title">
             <svg-icon icon-class="component" /> 布局型组件
           </div>
-          <draggable class="components-draggable" :list="layoutComponents"
+          <draggable
+class="components-draggable" :list="layoutComponents"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            draggable=".components-item" :sort="false" item-key="label" @end="onEnd">
             <template #item="{ element, index }">
               <div :key="index" class="components-item" @click="addComponent(element)">
                 <div class="components-body">
@@ -58,13 +61,13 @@
     </div>
     <div class="center-board">
       <div class="action-bar">
-        <el-button icon="Download" type="primary" text @click="download">
+        <el-button icon="Download" type="primary" text @click="download" v-hasPermi="['generator:webcode:download']">
           导出vue文件
         </el-button>
-        <el-button class="copy-btn-main" icon="DocumentCopy" type="primary" text @click="copy">
+        <el-button class="copy-btn-main" icon="DocumentCopy" type="primary" text @click="copy" v-hasPermi="['generator:webcode:copy']">
           复制代码
         </el-button>
-        <el-button class="delete-btn" icon="Delete" text @click="empty" type="danger">
+        <el-button class="delete-btn" icon="Delete" text type="danger" @click="empty" v-hasPermi="['generator:webcode:empty']">
           清空
         </el-button>
       </div>
@@ -72,12 +75,14 @@
         <el-row class="center-board-row" :gutter="formConf.gutter">
           <el-form :size="formConf.size" :label-position="formConf.labelPosition" :disabled="formConf.disabled"
             :label-width="formConf.labelWidth + 'px'">
-            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"
+            <draggable 
+              class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"
               item-key="label">
               <template #item="{ element, index }">
-                <draggable-item :key="element.renderKey" :drawing-list="drawingList" :element="element" :index="index"
-                  :active-id="activeId" :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy"
-                  @deleteItem="drawingItemDelete" />
+                <DraggableItem 
+                  :key="element.renderKey" :drawing-list="drawingList" :element="element" :index="index"
+                  :active-id="activeId" :form-conf="formConf" @active-item="activeFormItem" @copy-item="drawingItemCopy"
+                  @delete-item="drawingItemDelete" />
               </template>
             </draggable>
             <div v-show="!drawingList.length" class="empty-info">
@@ -87,10 +92,11 @@
         </el-row>
       </el-scrollbar>
     </div>
-    <right-panel :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length"
+    <RightPanel 
+      :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length"
       @tag-change="tagChange" />
 
-    <code-type-dialog v-model="dialogVisible" title="选择生成类型" :showFileName="showFileName" @confirm="generate" />
+    <CodeTypeDialog v-model="dialogVisible" title="选择生成类型" :show-file-name="showFileName" @confirm="generate" />
     <input id="copyNode" type="hidden">
   </div>
 </template>
@@ -108,9 +114,9 @@ import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
 import Download from '@/plugins/download.ts'
 import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
-import DraggableItem from './DraggableItem.vue'
-import RightPanel from './RightPanel.vue'
-import CodeTypeDialog from './CodeTypeDialog.vue'
+import DraggableItem from './components/DraggableItem.vue'
+import RightPanel from './components/RightPanel.vue'
+import CodeTypeDialog from './components/CodeTypeDialog.vue'
 import { onMounted, watch, ref, nextTick } from 'vue'
 
 const drawingList = ref(drawingDefalut)