feat: 接口生成页面弹窗改为平铺

.env

@@ -6,7 +6,7 @@ VITE_TITLE = 绝弹管理后台
 # 网站副标题
 VITE_SUBTITLE = 快速开发web应用的模板工具
 # 接口前缀 说明：参见 axios 的 baseURL
-VITE_API = http://127.0.0.1:3030/
+VITE_API = https://nest.dev.juetan.cn/
 
 # =====================================================================================
 # 开发设置

src/pages/my/dev.vue

@@ -1,7 +1,7 @@
 <template>
   <bread-page>
-    <a-input v-model="name" placeholder="中文名称"></a-input>
-    <a-button @click="editorRef?.open()">打开</a-button>
+    <div class="h-full grid grid-cols-[auto_auto_1fr]">
+      <div class="w-[300px]">
         <a-tabs type="capsule" @change="onChange">
           <a-tab-pane v-for="tag in tags" :key="tag.name" :title="tag.description">
             <a-form :model="{}" layout="vertical">
@@ -52,15 +52,25 @@
             </a-form>
           </a-tab-pane>
         </a-tabs>
-    <editor-modal ref="editorRef"></editor-modal>
+      </div>
+      <a-divider direction="vertical"></a-divider>
+      <div class="h-full grid grid-rows-[auto_1fr] gap-2">
+        <div>
+          <a-button type="primary" @click="onOpen">确定</a-button>
+        </div>
+        <editor-modal class="bg-gray-100" :content="content"></editor-modal>
+      </div>
+    </div>
   </bread-page>
 </template>
 
 <script setup lang="ts">
 import doc from "@/dd.json";
 import editorModal from "./editor.vue";
+import ejs from "ejs";
+import template from "./page.ejs?raw";
 
-const editorRef = ref<InstanceType<typeof editorModal>>();
+const content = ref("");
 const { tags, routes } = doc;
 const type = ref({
   create: undefined,
@@ -68,11 +78,37 @@ const type = ref({
   modify: undefined,
   delete: undefined,
 });
-const name = ref('')
 
 const onChange = (value: string | number) => {
   console.log(value);
 };
+
+const onOpen = () => {
+  const data = {
+    tag: '',
+    operationId: '',
+    create: {},
+    select: {},
+    modify: {},
+    delete: {},
+  };
+  for (const route of doc.routes) {
+    if (route.operationId === type.value.create) {
+      data.create = route;
+    }
+    if (route.operationId === type.value.select) {
+      data.select = route;
+    }
+    if (route.operationId === type.value.modify) {
+      data.modify = route;
+    }
+    if (route.operationId === type.value.delete) {
+      data.delete = route;
+    }
+  }
+  console.log(data);
+  content.value = ejs.render(template, data);
+};
 </script>
 
 <style lang="less" scoped></style>

src/pages/my/editor.vue

@@ -1,20 +1,14 @@
 <template>
-  <a-modal v-model:visible="visible" :width="1280" title="编辑代码" title-align="start" @close="onClose">
-    <div class="h-[700px]">
-      <div id="editor1" class="w-full h-full"></div>
-    </div>
-  </a-modal>
+  <div ref="editorRef" class="w-full h-full border"></div>
 </template>
 
 <script setup lang="ts">
-import ejs from "ejs";
 import * as monaco from "monaco-editor";
 import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
 import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
-import pageStr from "./page.ejs?raw";
 
 self.MonacoEnvironment = {
   getWorker(_, label) {
@@ -34,26 +28,32 @@ self.MonacoEnvironment = {
   },
 };
 
-const visible = ref(false);
 let editor: monaco.editor.IStandaloneCodeEditor | undefined;
-const onClose = () => {
-  editor?.dispose();
-};
-defineExpose({
-  async open() {
-    visible.value = true;
+const editorRef = ref<HTMLElement | null>(null);
+
+onMounted(async () => {
   await nextTick();
-    const box = document.getElementById("editor1")!;
-    const code = ejs.render(pageStr, {
-      tag: "user",
-      operationId: "addUser",
-    });
-    editor = monaco.editor.create(box, {
-      value: code,
+  if (editorRef.value) {
+    editor = monaco.editor.create(editorRef.value, {
+      value: "",
       language: "html",
     });
+  }
+});
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: "",
   },
 });
+
+watch(
+  () => props.content,
+  (value) => {
+    editor?.setValue(value);
+  }
+);
 </script>
 
 <style lang="less" scoped></style>

src/pages/my/page.ejs

@@ -10,7 +10,7 @@ import { createColumn, updateColumn, useAniTable } from "@/components";
 
 const [aniTable, aniCtx] = useAniTable({
   data: async (model, paging) => {
-    return api.<%= tag %>.<%= operationId %>({ ...model, ...paging });
+    return api.<%= select.tag %>.<%= operationId %>({ ...model, ...paging });
   },
   columns: [
     {
@@ -65,22 +65,24 @@ const [aniTable, aniCtx] = useAniTable({
       class: "!grid grid-cols-2 gap-x-6",
     },
     items: [
+      <%_ for(const item of create.bodyParams) { _%>
       {
-        field: "username",
-        label: "登录账号",
-        type: "input",
-        required: true,
+        field: "<%= item.name %>",
+        label: "<%= item.description %>",
+        type: "<%= item.type %>",
+        required: <%= item.required %>,
       },
+      <%_ } _%>
     ],
     submit: ({ model }) => {
-      return api.<%= tag %>.<%= operationId %>(model);
+      return api.<%= create.tag %>.<%= create.operationId %>(model);
     },
   },
   modify: {
     extend: true,
     title: "修改用户",
     submit: ({ model }) => {
-      return api.<%= tag %>.<%= operationId %>(model.id, model);
+      return api.<%= modify.tag %>.<%= modify.operationId %>(model.id, model);
     },
   },
 });

src/pages/post/media/index.vue

@@ -70,14 +70,6 @@ const table = useTable({
     {
       title: "文件名称",
       dataIndex: "name",
-      // render: ({ record }) => {
-      //   return (
-      //     <div class="flex items-center">
-      //       <i class={`${getIcon(record.mimetype)} text-xl mr-2`}></i>
-      //       {record.name}
-      //     </div>
-      //   );
-      // },
       render({ record }) {
         return (
           <div class="flex items-center">