From 7e26c5f858c23847fdc7846baf68c2a66484be37 Mon Sep 17 00:00:00 2001
From: dev-zuo <i@zuoguoqing.com>
Date: Sat, 16 Mar 2024 17:36:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E6=97=B6=E5=85=A5=E5=BA=93=EF=BC=8C=E7=94=9F=E6=88=90ID?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E6=94=BE=E5=88=B0=E5=90=8E=E7=AB=AF=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20vitepress=20=E4=B8=BB=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vitepress/theme/style/var.css       | 22 +++++++--
 configList/components/ConfigList.vue | 73 ++++++++++++++++++----------
 2 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/.vitepress/theme/style/var.css b/.vitepress/theme/style/var.css
index c7505c6..87347a7 100644
--- a/.vitepress/theme/style/var.css
+++ b/.vitepress/theme/style/var.css
@@ -1,10 +1,18 @@
 :root {
   /* 标题 */
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient( 135deg, #1358d9 10%, #4154ff 100%);
-  
+  --vp-home-hero-name-background: linear-gradient(
+    135deg,
+    #1358d9 10%,
+    #4154ff 100%
+  );
+
   /* 图标背景 */
-  --vp-home-hero-image-background-image: linear-gradient( 135deg, #1358d9 10%, #4154ff 100%);
+  --vp-home-hero-image-background-image: linear-gradient(
+    135deg,
+    #1358d9 10%,
+    #4154ff 100%
+  );
   --vp-home-hero-image-filter: blur(250px);
 
   /* brand按钮 */
@@ -24,9 +32,13 @@
   --vp-c-brand-dark: #4154ff;
 
   /* 代码块背景色 */
-  --vp-code-block-bg: rgba(125,125,125,.04);
+  --vp-code-block-bg: rgba(125, 125, 125, 0.04);
 }
 
 .VPImage.logo {
   border-radius: 50%;
-}
\ No newline at end of file
+}
+
+.main {
+  width: 900px;
+}
diff --git a/configList/components/ConfigList.vue b/configList/components/ConfigList.vue
index fb3cac6..e13e4a5 100644
--- a/configList/components/ConfigList.vue
+++ b/configList/components/ConfigList.vue
@@ -8,15 +8,12 @@
       <el-table v-loading="loading" :data="tableDataObject.list">
         <el-table-column prop="name" label="名称" />
         <el-table-column prop="bid" label="配置ID" />
-        <el-table-column prop="config" label="配置" />
+        <el-table-column prop="remark" label="备注" />
         <el-table-column prop="createDate" label="创建日期" />
-        <!-- <el-table-column prop="id" label="ID">
-          <template #default="scope">{{ scope.row.type }}</template>
-        </el-table-column> -->
         <el-table-column prop="operate" label="操作" width="180">
           <template #default="scope">
             <el-button type="primary" text @click="handleEdit(scope.row)"
-              >编辑</el-button
+              >详情</el-button
             >
             <el-button type="primary" text @click="handleDelete(scope.row)"
               >删除</el-button
@@ -40,9 +37,12 @@
   </div>
   <el-dialog v-model="dialogFormVisible" title="创建低代码配置" width="500">
     <el-form :model="form">
-      <el-form-item label="配置名称" :label-width="formLabelWidth">
+      <el-form-item label="配置名称">
         <el-input v-model="form.name" autocomplete="off" />
       </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" autocomplete="off" />
+      </el-form-item>
       <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
         <el-select v-model="form.region" placeholder="Please select a zone">
           <el-option label="Zone No.1" value="shanghai" />
@@ -53,7 +53,9 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="saveConfig"> 确定 </el-button>
+        <el-button type="primary" @click="saveConfig" :loading="confirmLoading">
+          确定
+        </el-button>
       </div>
     </template>
   </el-dialog>
@@ -70,6 +72,7 @@ const loading = ref(false);
 const dialogFormVisible = ref(false);
 const form = reactive({
   name: "",
+  remark: "",
 });
 async function findPage() {
   loading.value = true;
@@ -79,7 +82,7 @@ async function findPage() {
   };
   try {
     console.log(JSON.stringify(payload, null, 2));
-    await new Promise((r) => setTimeout(r, 500));
+    // await new Promise((r) => setTimeout(r, 500));
     const res: any = await apiServer.get("/configList/list", {
       params: payload,
     });
@@ -136,28 +139,48 @@ async function handleDelete(row: any) {
 function addConfig() {
   dialogFormVisible.value = true;
 }
-
-function saveConfig() {
-  gotoConfigPage();
+function resetAddForm() {
+  dialogFormVisible.value = false;
+  Object.assign(form, {
+    name: "",
+    remark: "",
+  });
 }
 
-function gotoConfigPage() {
-  function generateId() {
-    let chars =
-      "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-    let id = "";
-    for (let i = 0; i < 16; i++) {
-      id += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return id;
+const confirmLoading = ref(false);
+async function saveConfig() {
+  try {
+    confirmLoading.value = true;
+    const data: any = await apiServer.post("/configList/add", {
+      name: form.name,
+      remark: form.remark,
+    });
+    // success
+    ElMessage.success("添加成功!");
+    findPage();
+    resetAddForm();
+    // "data": {
+    //     "name": "3343",
+    //     "remark": "3433434sdfdsf ",
+    //     "bid": "4dl91VMMBL8vWuOh",
+    //     "createDate": "2024/03/15 00:11:02",
+    //     "_id": "65f321961effb4ffb79e29b6"
+    // },
+    gotoConfigPage(data);
+  } catch (e) {
+    console.log(e);
+  } finally {
+    confirmLoading.value = false;
   }
-  // 生成一个 16 位的随机 ID
-  let randomId = generateId();
-  const name = encodeURIComponent(form.name);
-  console.log(randomId);
+  // console.log("res", res);
+  // gotoConfigPage();
+}
+
+function gotoConfigPage({ bid, name }) {
+  const newName = encodeURIComponent(name);
   //   window.open(`http://127.0.0.1:3000?bid=${randomId}`, "_blank");
   window.open(
-    `${import.meta.env.VITE_DESIGN_URL}?bid=${randomId}&name=${name}`,
+    `${import.meta.env.VITE_DESIGN_URL}?bid=${bid}&name=${newName}`,
     "_blank"
   );
 }