refactor(AppDeployCustom): 重构新增页面布局和样式

-优化了表单布局，使用 grid 系统替代原有的 el-row 和 el-col
- 移除了多余的模板代码，简化了结构
- 统一了表单项的样式和间距
- 调整了部分组件的属性，提高了代码可读性

project/oms/apps/develop/AppDeployCustom/add.vue

@@ -1,56 +1,52 @@
 <template>
   <section class="add">
     <ai-detail>
-      <ai-title slot="title" :title="pageTitle" isShowBottomBorder />
+      <ai-title slot="title" :title="pageTitle" isShowBottomBorder/>
       <template #content>
         <el-tabs tab-position="left">
           <el-tab-pane label="方案设置">
             <el-form ref="AddForm" :model="form" size="small" label-width="120px" :rules="rules">
               <ai-card title="基本信息">
-                <template #content>
+                <div class="grid">
-                  <el-form-item label="项目/系统名称" prop="name">
+                  <el-form-item label="项目/系统名称" prop="name" class="row">
-                    <el-input v-model="form.name" placeholder="请输入" clearable />
+                    <ai-input v-model="form.name"/>
                   </el-form-item>
-                  <el-row type="flex">
+                  <el-form-item label="系统类型" prop="type">
-                    <div class="fill">
+                    <ai-select v-model="form.type" dict="systemType" @change="form.apps = []"/>
-                      <el-form-item label="系统类型" prop="type">
+                  </el-form-item>
-                        <ai-select v-model="form.type" :selectList="dict.getDict('systemType')"
+                  <el-form-item label="库项目根路径" prop="customPath">
-                          @change="form.apps = []" />
+                    <ai-input v-model="form.customPath"/>
-                      </el-form-item>
+                  </el-form-item>
-                      <el-form-item label="更新项目路径" prop="dist">
+                  <el-form-item label="更新项目路径" prop="dist">
-                        <el-input v-model="form.dist" placeholder="常填写nginx路径,下载包从这里取" clearable />
+                    <ai-input v-model="form.dist" placeholder="常填写nginx路径,下载包从这里取"/>
-                      </el-form-item>
+                  </el-form-item>
-                    </div>
+                  <el-form-item label="版本号" prop="version">
-                    <div class="fill mar-l16">
+                    <ai-input v-model="form.version"/>
-                      <el-form-item label="库项目根路径" prop="customPath">
+                  </el-form-item>
-                        <el-input v-model="form.customPath" placeholder="请输入" clearable />
+                  <el-form-item label="微信机器人" prop="webhook">
-                      </el-form-item>
+                    <ai-input v-model="form.webhook"/>
-                      <el-form-item label="版本号" prop="version">
+                  </el-form-item>
-                        <el-input v-model="form.version" placeholder="请输入" clearable />
+                </div>
-                      </el-form-item>
-                    </div>
-                  </el-row>
-                </template>
               </ai-card>
               <ai-card title="主库应用">
                 <template #content>
                   <ai-lib-table v-if="form.type" v-model="form.apps" v-bind="$props" multiple searchKey="name"
-                    :action="`/node/wechatapps/list?type=${form.type}&isMain=1`" border />
+                                :action="`/node/wechatapps/list?type=${form.type}&isMain=1`" border/>
                   <ai-empty v-else>请先选择系统类型</ai-empty>
                 </template>
               </ai-card>
-              <component class="extraConfig" title="扩展设置" :is="extraConfig" v-model="form.extra" :appList="appList" />
+              <component class="extraConfig" title="扩展设置" :is="extraConfig" v-model="form.extra" :appList="appList"/>
             </el-form>
           </el-tab-pane>
           <el-tab-pane label="方案应用" lazy>
             <ai-lib-table :meta="appList" customData :isShowPagination="false" v-bind="$props" disabled
-              :colConfigs="appListConfigs">
+                          :colConfigs="appListConfigs">
               <template slot="options" slot-scope="{row}">
                 <ai-dialog-btn text="编辑" :customFooter="false" dialogTitle="应用配置" width="500px"
-                  @onConfirm="handleAppEdit(row)">
+                               @onConfirm="handleAppEdit(row)">
                   <el-form size="small" label-width="80px">
                     <el-form-item label="应用名称">
-                      <el-input v-model="row.label" clearable placeholder="请输入应用名称" />
+                      <el-input v-model="row.label" clearable placeholder="请输入应用名称"/>
                     </el-form-item>
                   </el-form>
                 </ai-dialog-btn>
@@ -68,7 +64,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex"
+import {mapActions} from "vuex"
 import AiLibTable from "./AiLibTable";
 import webConfig from "./config/webConfig.vue";
 import wxcpConfig from "./config/wxcpConfig.vue";
@@ -76,7 +72,7 @@ import wxmpConfig from "./config/wxmpConfig.vue";
 
 export default {
   name: "add",
-  components: { AiLibTable },
+  components: {AiLibTable},
   props: {
     instance: Function,
     dict: Object,
@@ -104,29 +100,29 @@ export default {
   },
   data() {
     return {
-      form: { apps: [], type: null, customPath: "", extra: { sysInfo: {} } },
+      form: {apps: [], type: null, customPath: "", extra: {sysInfo: {}}},
       rules: {
-        name: { required: true, message: "请输入" },
+        name: {required: true, message: "请输入"},
-        type: { required: true, message: "请选择" },
+        type: {required: true, message: "请选择"},
         // customPath: {required: true, message: "请输入"},
       },
       appListConfigs: [
-        { prop: 'label', label: "应用名称", render: (h, { row }) => h(row.tabbar ? 'b' : 'p', row.label + `  ${row.tabbar ? '(底部导航栏)' : ''}`) },
+        {prop: 'label', label: "应用名称", render: (h, {row}) => h(row.tabbar ? 'b' : 'p', row.label + `  ${row.tabbar ? '(底部导航栏)' : ''}`)},
-        { prop: 'project', label: "项目/框架" },
+        {prop: 'project', label: "项目/框架"},
-        { prop: 'category', label: "分类", dict: "appsCategory" },
+        {prop: 'category', label: "分类", dict: "appsCategory"},
-        { prop: 'name', label: "模块名" }
+        {prop: 'name', label: "模块名"}
       ],
     }
   },
   methods: {
     ...mapActions(['closePage']),
     getDetail() {
-      let { id } = this.$route.query
+      let {id} = this.$route.query
       id && this.instance.post("/node/custom/detail", null, {
-        params: { id }
+        params: {id}
       }).then(res => {
         if (res?.data) {
-          this.form = { ...this.form, ...res.data }
+          this.form = {...this.form, ...res.data}
         }
       })
     },
@@ -173,7 +169,7 @@ export default {
   :deep(.tabBarOptions) {
     flex-wrap: wrap;
 
-    .el-button--text+.el-button--text {
+    .el-button--text + .el-button--text {
       margin-left: 0;
     }
   }