瀏覽代碼

feat: 初始化js的form表单样式调整

cuiyalong 9 月之前
父節點
當前提交
e4923097e9
共有 2 個文件被更改,包括 34 次插入14 次删除
  1. 3 0
      frontend/index.html
  2. 31 14
      frontend/src/components/spider/EditSpider.vue

+ 3 - 0
frontend/index.html

@@ -7,6 +7,9 @@
 </head>
 <body>
 <div id="app"></div>
+<!-- 如果路由是createWebHistory,则需要手动引下面两行 -->
+<!-- <script src="/wails/ipc.js"></script>
+<script src="/wails/runtime.js"></script> -->
 <script src="./src/main.js" type="module"></script>
 </body>
 </html>

+ 31 - 14
frontend/src/components/spider/EditSpider.vue

@@ -57,30 +57,30 @@
         
         <el-tabs v-model="activeName" class="demo-tabs">
             <el-tab-pane label="列表页初始化" name="init">
-                <el-form ref="formInit" label-width="60px">
-                    <el-row v-for="(row, index) in tabData.initList" :key="row.id" class="form-init-row">
-                        <el-col :span="8">
+                <el-form ref="formInit" label-width="66px" class="form-init">
+                    <div v-for="(row, index) in tabData.initList" :key="row.id" class="form-init-row">
+                        <div class="form-init-row-js">
                             <el-form-item label="动作JS" required class="pointer-input">
                                 <el-input v-model="row.actionJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'actionJs')"></el-input>
                             </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
+                        </div>
+                        <div class="form-init-row-js">
                             <el-form-item label="检查JS" class="pointer-input">
                                 <el-input v-model="row.checkJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'checkJs')"></el-input>
                             </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
+                        </div>
+                        <div class="form-init-row-ms">
                             <el-form-item label="延迟(MS)" required label-width="90px">
                                 <el-input v-model.trim="row.sleepTime"></el-input>
                             </el-form-item>
-                        </el-col>
-                        <el-col :span="3">
+                        </div>
+                        <div class="form-init-row-actions">
                             <el-button-group class="mark-buttons">
                                 <el-button type="success" size="small" :icon="CirclePlusFilled" @click="addInitItem(index)" v-if="tabData.initList.length < tabData.initLengthMax"></el-button>
                                 <el-button type="danger" size="small" :icon="RemoveFilled" @click="removeInitItem(row)"></el-button>
                             </el-button-group>
-                        </el-col>
-                    </el-row>
+                        </div>
+                    </div>
                     <div class="no-init-list-container" v-if="tabData.initList.length === 0">
                         <el-button type="success" :icon="CirclePlusFilled" @click="addInitItem(index)"></el-button>
                     </div>
@@ -273,7 +273,7 @@ class InitListItem {
 }
 
 const tabData = reactive({
-    initLengthMax: 5,
+    initLengthMax: 10,
     initList: [
         // {
         //     actionJs: '', //动作JS
@@ -730,11 +730,28 @@ defineExpose({
     }
 }
 
+.form-init {
+    padding-bottom: 16px;
+}
 .form-init-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     ::v-deep {
-        .el-form-item__label {
-            white-space: nowrap;
+        .el-form-item {
+            margin-bottom: 0;
         }
     }
+
+    .form-init-row-js {
+        flex: 8;
+    }
+    .form-init-row-ms {
+        flex: 4;
+    }
+
+    &:not(:last-of-type) {
+        margin-bottom: 16px;
+    }
 }
 </style>