From 5ccefbd65a2f08949e17a267e0c25bfeae5326bc Mon Sep 17 00:00:00 2001
From: luoer <luoer@szbeihai.com>
Date: Tue, 24 Oct 2023 17:02:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=A5=E5=8F=A3=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=B9=E7=AA=97=E6=94=B9=E4=B8=BA=E5=B9=B3?=
 =?UTF-8?q?=E9=93=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                           |   2 +-
 src/pages/my/dev.vue           | 146 ++++++++++++++++++++-------------
 src/pages/my/editor.vue        |  44 +++++-----
 src/pages/my/page.ejs          |  16 ++--
 src/pages/post/media/index.vue |   8 --
 5 files changed, 123 insertions(+), 93 deletions(-)

diff --git a/.env b/.env
index f84a78f..2ea954c 100644
--- a/.env
+++ b/.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/
 
 # =====================================================================================
 # 开发设置
diff --git a/src/pages/my/dev.vue b/src/pages/my/dev.vue
index cec537e..0bc5579 100644
--- a/src/pages/my/dev.vue
+++ b/src/pages/my/dev.vue
@@ -1,66 +1,76 @@
 <template>
   <bread-page>
-    <a-input v-model="name" placeholder="中文名称"></a-input>
-    <a-button @click="editorRef?.open()">打开</a-button>
-    <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">
-          <a-form-item label="新增接口">
-            <a-radio-group type="button" v-model="type.create">
-              <a-radio
-                v-for="route in routes.filter((i) => i.tag === tag.name)"
-                :value="route.operationId"
-                :key="route.path"
-              >
-                {{ route.description }}
-              </a-radio>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item label="修改接口">
-            <a-radio-group type="button" v-model="type.modify">
-              <a-radio
-                v-for="route in routes.filter((i) => i.tag === tag.name)"
-                :value="route.operationId"
-                :key="route.path"
-              >
-                {{ route.description }}
-              </a-radio>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item label="查询接口">
-            <a-radio-group type="button" v-model="type.select">
-              <a-radio
-                v-for="route in routes.filter((i) => i.tag === tag.name)"
-                :value="route.operationId"
-                :key="route.path"
-              >
-                {{ route.description }}
-              </a-radio>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item label="删除接口">
-            <a-radio-group type="button" v-model="type.delete">
-              <a-radio
-                v-for="route in routes.filter((i) => i.tag === tag.name)"
-                :value="route.operationId"
-                :key="route.path"
-              >
-                {{ route.description }}
-              </a-radio>
-            </a-radio-group>
-          </a-form-item>
-        </a-form>
-      </a-tab-pane>
-    </a-tabs>
-    <editor-modal ref="editorRef"></editor-modal>
+    <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">
+              <a-form-item label="新增接口">
+                <a-radio-group type="button" v-model="type.create">
+                  <a-radio
+                    v-for="route in routes.filter((i) => i.tag === tag.name)"
+                    :value="route.operationId"
+                    :key="route.path"
+                  >
+                    {{ route.description }}
+                  </a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item label="修改接口">
+                <a-radio-group type="button" v-model="type.modify">
+                  <a-radio
+                    v-for="route in routes.filter((i) => i.tag === tag.name)"
+                    :value="route.operationId"
+                    :key="route.path"
+                  >
+                    {{ route.description }}
+                  </a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item label="查询接口">
+                <a-radio-group type="button" v-model="type.select">
+                  <a-radio
+                    v-for="route in routes.filter((i) => i.tag === tag.name)"
+                    :value="route.operationId"
+                    :key="route.path"
+                  >
+                    {{ route.description }}
+                  </a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item label="删除接口">
+                <a-radio-group type="button" v-model="type.delete">
+                  <a-radio
+                    v-for="route in routes.filter((i) => i.tag === tag.name)"
+                    :value="route.operationId"
+                    :key="route.path"
+                  >
+                    {{ route.description }}
+                  </a-radio>
+                </a-radio-group>
+              </a-form-item>
+            </a-form>
+          </a-tab-pane>
+        </a-tabs>
+      </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>
diff --git a/src/pages/my/editor.vue b/src/pages/my/editor.vue
index 0876cb9..e4fbb4c 100644
--- a/src/pages/my/editor.vue
+++ b/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;
-    await nextTick();
-    const box = document.getElementById("editor1")!;
-    const code = ejs.render(pageStr, {
-      tag: "user",
-      operationId: "addUser",
-    });
-    editor = monaco.editor.create(box, {
-      value: code,
+const editorRef = ref<HTMLElement | null>(null);
+
+onMounted(async () => {
+  await nextTick();
+  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>
diff --git a/src/pages/my/page.ejs b/src/pages/my/page.ejs
index cd2c72b..b5b0e03 100644
--- a/src/pages/my/page.ejs
+++ b/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);
     },
   },
 });
diff --git a/src/pages/post/media/index.vue b/src/pages/post/media/index.vue
index 04411a4..a88f5e3 100644
--- a/src/pages/post/media/index.vue
+++ b/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">