feat: ✨ 使用codemirror预览代码

src/api/database.ts

@@ -22,7 +22,7 @@ class DatabaseAPI {
 
   /** 获取代码生成预览数据 */
   static getPreviewData(tableName: string) {
-    return request<any, GeneratorPreviewVO>({
+    return request<any, GeneratorPreviewVO[]>({
       url: `${DATABASE_BASE_URL}/table/${tableName}/generate-preview`,
       method: "get",
     });

src/views/generator/index.vue

@@ -85,19 +85,20 @@
       size="80%"
     >
       <el-row>
-        <el-col :span="6">123</el-col>
+        <el-col :span="6">
+          <el-tree :data="[{ value: 'Controller', label: 'Controller' }]" />
+        </el-col>
         <el-col :span="18">
-          <Codemirror
+          <div>
-            v-model:value="code"
+            <Codemirror
-            :options="cmOptions"
+              v-model:value="code"
-            border
+              :options="cmOptions"
-            ref="cmRef"
+              border
-            height="400"
+              ref="cmRef"
-            width="600"
+              height="100%"
-            @change="onChange"
+              width="100%"
-            @input="onInput"
+            />
-            @ready="onReady"
+          </div>
-          />
         </el-col>
       </el-row>
 
@@ -119,32 +120,12 @@ import Codemirror from "codemirror-editor-vue3";
 import type { CmComponentRef } from "codemirror-editor-vue3";
 import type { Editor, EditorConfiguration } from "codemirror";
 
-const code = ref(
+const code = ref();
-  `var i = 0;
-for (; i < 9; i++) {
-    console.log(i);
-    // more statements
-}
-`
-);
 const cmRef = ref<CmComponentRef>();
 const cmOptions: EditorConfiguration = {
   mode: "text/javascript",
 };
 
-const onChange = (val: string, cm: Editor) => {
-  console.log(val);
-  console.log(cm.getValue());
-};
-
-const onInput = (val: string) => {
-  console.log(val);
-};
-
-const onReady = (cm: Editor) => {
-  console.log(cm.focus());
-};
-
 onMounted(() => {
   setTimeout(() => {
     cmRef.value?.refresh();
@@ -174,7 +155,6 @@ import DatabaseAPI, {
 const queryFormRef = ref(ElForm);
 
 const loading = ref(false);
-const ids = ref<number[]>([]);
 const total = ref(0);
 
 const queryParams = reactive<TablePageQuery>({
@@ -184,8 +164,6 @@ const queryParams = reactive<TablePageQuery>({
 
 const pageData = ref<TablePageVO[]>([]);
 
-const formData = reactive<any>({});
-
 const dialog = reactive({
   visible: false,
   title: "",
@@ -213,6 +191,9 @@ function handleResetQuery() {
 function handlePreview(tableName: string) {
   DatabaseAPI.getPreviewData(tableName).then((data) => {
     dialog.title = `预览 ${tableName}`;
+    code.value = data[0].content;
+
+    console.log("data", data);
     handleOpenDialog();
   });
 }
@@ -227,9 +208,9 @@ function handleOpenDialog() {
 
 function handleSubmit() {}
 
-/* onMounted(() => {
+onMounted(() => {
   handleQuery();
-}); */
+});
 </script>
 
 <style lang="scss" scoped></style>