调整代码区域布局

frontend/src/components/spider/EditSpider.vue

@@ -56,24 +56,34 @@
       <el-row>
         <el-col :span="24">
           <el-form-item label="页面资源过滤">
-            <el-input v-model="formData.filterResource" placeholder="多个以英文分号隔开(例：ws://;wss://;.tof;.woff;.ico;.mp4;.zip;.rar;.exe;)"></el-input>
+            <el-input v-model="formData.filterResource"
+              placeholder="多个以英文分号隔开(例：ws://;wss://;.tof;.woff;.ico;.mp4;.zip;.rar;.exe;)"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
 
-    <el-tabs v-model="activeName" class="demo-tabs">
-      <el-tab-pane label="列表页初始化JS代码" name="init">
+    <el-tabs v-model="activeName" tabPosition="left" class="demo-tabs">
+      <el-tab-pane label="初始化" name="init">
+        <template #label><span class="custom-tabs-label">
+            <el-icon>
+              <ElementPlus />
+            </el-icon>
+            <span>初始化</span>
+          </span>
+        </template>
         <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-input v-model="row.actionJs" readonly placeholder="click to input"
+                  @click="showEditActionCodeDialog(row, 'actionJs')"></el-input>
               </el-form-item>
             </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-input v-model="row.checkJs" readonly placeholder="click to input"
+                  @click="showEditActionCodeDialog(row, 'checkJs')"></el-input>
               </el-form-item>
             </div>
             <div class="form-init-row-ms">
@@ -83,7 +93,8 @@
             </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="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>
             </div>
@@ -94,7 +105,12 @@
         </el-form>
       </el-tab-pane>
 
-      <el-tab-pane label="列表页CSS选择器" name="list_css_selector">
+      <el-tab-pane label="列表CSS" name="list_css_selector">
+        <template #label><span class="custom-tabs-label">
+          <el-icon><ChromeFilled /></el-icon>
+            <span>列表CSS</span>
+          </span>
+        </template>
         <el-form ref="form1" :model="formData" label-width="160px">
           <el-row>
             <el-col :span="12">
@@ -105,7 +121,8 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="条目">
-                <el-input v-model="formData.listItemCss" placeholder="ul.list li" :style="{ background: cssInputBg.listItemCss.color }"></el-input>
+                <el-input v-model="formData.listItemCss" placeholder="ul.list li"
+                  :style="{ background: cssInputBg.listItemCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.listItemCss }}</div>
               </el-form-item>
             </el-col>
@@ -113,14 +130,16 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="条目链接">
-                <el-input v-model="formData.listLinkCss" placeholder="a" :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
+                <el-input v-model="formData.listLinkCss" placeholder="a"
+                  :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.listLinkCss }}</div>
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="条目发布时间">
-                <el-input v-model="formData.listPublishTimeCss" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
+                <el-input v-model="formData.listPublishTimeCss" placeholder="span"
+                  :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
               </el-form-item>
             </el-col>
@@ -128,26 +147,78 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="翻页下一页">
-                <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
+                <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a"
+                  :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.listNextPageCss }}</div>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </el-tab-pane>
+      <el-tab-pane label="列表代码" name="list_item_js">
+        <template #label><span class="custom-tabs-label">
+            <el-icon>
+              <ElementPlus />
+            </el-icon>
+            <span>列表代码</span>
+          </span>
+        </template>
+        <el-divider>
+          <el-button-group>
+            <el-tooltip v-for="item, index in TemplateJsCode.ListJsCodes" :key="index" class="box-item" effect="dark"
+              :content="item.tooltip" placement="top-start">
+              <el-button size="small" type="primary" @click='editorHandle.createImportListCode(index)'>{{ item.name
+                }}</el-button>
+            </el-tooltip>
+          </el-button-group>
+        </el-divider>
+        <el-row>
+          <el-input v-model="formData.listJs" class="codeEditor" :rows="6" type="textarea" placeholder="Please input" />
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="翻页代码" name="list_trunpage_js">
 
-      <el-tab-pane label="详情页CSS选择器" name="content">
+        <template #label><span class="custom-tabs-label">
+            <el-icon>
+              <ElementPlus />
+            </el-icon>
+            <span>翻页代码</span>
+          </span>
+        </template>
+        <el-divider>
+          <el-button-group>
+            <el-tooltip v-for="item, index in TemplateJsCode.ListTurnPageJsCodes" :key="index" class="box-item"
+              effect="dark" :content="item.tooltip" placement="top-start">
+              <el-button size="small" type="primary" @click='editorHandle.createImportListTrunPageCode(index)'>{{
+                item.name
+                }}</el-button>
+            </el-tooltip>
+          </el-button-group>
+        </el-divider>
+        <el-row>
+          <el-input v-model="formData.listTurnPageJs" class="codeEditor" :rows="6" type="textarea"
+            placeholder="Please input" />
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="详情CSS" name="content">
+        <template #label><span class="custom-tabs-label">
+          <el-icon><ChromeFilled /></el-icon>
+            <span>详情CSS</span>
+          </span>
+        </template>
         <el-form ref="form2" :model="formData" label-width="160px">
           <el-row>
             <el-col :span="12">
               <el-form-item label="详情页标题">
-                <el-input v-model="formData.titleCss" placeholder="ul.list li" :style="{ background: cssInputBg.titleCss.color }"></el-input>
+                <el-input v-model="formData.titleCss" placeholder="ul.list li"
+                  :style="{ background: cssInputBg.titleCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.titleCss }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="详情页发布时间">
-                <el-input v-model="formData.publishTimeCss" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
+                <el-input v-model="formData.publishTimeCss" placeholder="a"
+                  :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
               </el-form-item>
             </el-col>
@@ -155,13 +226,15 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="详情页发布单位">
-                <el-input v-model="formData.publishUnitCss" placeholder="span" :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
+                <el-input v-model="formData.publishUnitCss" placeholder="span"
+                  :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.publishUnitCss }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="详情页正文">
-                <el-input v-model="formData.contentCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.contentCss.color }"></el-input>
+                <el-input v-model="formData.contentCss" placeholder="li.nextpage a"
+                  :style="{ background: cssInputBg.contentCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.contentCss }}</div>
               </el-form-item>
             </el-col>
@@ -169,79 +242,34 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="详情页附件">
-                <el-input v-model="formData.attachCss" placeholder="span" :style="{ background: cssInputBg.attachCss.color }"></el-input>
+                <el-input v-model="formData.attachCss" placeholder="span"
+                  :style="{ background: cssInputBg.attachCss.color }"></el-input>
                 <div class="form-item-sub-line">{{ fastKeyDownMap.attachCss }}</div>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </el-tab-pane>
-      <el-tab-pane label="列表页JS代码" name="list_item_js">
-        <template #label><span class="custom-tabs-label">
-                        <el-icon>
-                            <ElementPlus />
-                        </el-icon>
-                        <span>列表页JS代码</span>
-                    </span>
-        </template>
-        <el-divider>
-          手写列表页提取JS代码
-          <el-button-group>
-            <el-tooltip v-for="item,index in TemplateJsCode.ListJsCodes" :key="index" class="box-item" effect="dark" :content="item.tooltip"
-                        placement="top-start">
-              <el-button size="small" type="primary" @click='editorHandle.createImportListCode(index)'>{{item.name}}</el-button>
-            </el-tooltip>
-          </el-button-group>
-        </el-divider>
-        <el-row>
-          <el-input v-model="formData.listJs" class="codeEditor" :rows="6" type="textarea"
-                    placeholder="Please input" />
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane label="列表页翻页JS代码" name="list_trunpage_js">
+      <el-tab-pane label="详情代码" name="content_js">
 
         <template #label><span class="custom-tabs-label">
-                        <el-icon>
-                            <ElementPlus />
-                        </el-icon>
-                        <span>列表页翻页JS代码</span>
-                    </span>
+            <el-icon>
+              <ElementPlus />
+            </el-icon>
+            <span>详情代码</span>
+          </span>
         </template>
         <el-divider>
-          手写列表页翻页JS代码
           <el-button-group>
-            <el-tooltip v-for="item,index in TemplateJsCode.ListTurnPageJsCodes" :key="index" class="box-item" effect="dark" :content="item.tooltip"
-                        placement="top-start">
-              <el-button size="small" type="primary" @click='editorHandle.createImportListTrunPageCode(index)'>{{item.name}}</el-button>
-            </el-tooltip>
-          </el-button-group>
-        </el-divider>
-        <el-row>
-          <el-input v-model="formData.listTurnPageJs" class="codeEditor" :rows="6" type="textarea"
-                    placeholder="Please input" />
-        </el-row>
-      </el-tab-pane>
-
-      <el-tab-pane label="详情页JS代码" name="content_js">
-
-        <template #label><span class="custom-tabs-label">
-                        <el-icon>
-                            <ElementPlus />
-                        </el-icon>
-                        <span>详情页JS代码</span>
-                    </span>
-        </template>
-        <el-divider>
-          手写附件下载/上传JS代码
-          <el-button-group>
-            <el-tooltip v-for="item,index in TemplateJsCode.ContentJsCodes" :key="index" class="box-item" effect="dark" :content="item.tooltip"
-                        placement="top-start">
-              <el-button size="small" type="primary" @click='editorHandle.createImportContentCode(index)'>{{item.name}}</el-button>
+            <el-tooltip v-for="item, index in TemplateJsCode.ContentJsCodes" :key="index" class="box-item" effect="dark"
+              :content="item.tooltip" placement="top-start">
+              <el-button size="small" type="primary" @click='editorHandle.createImportContentCode(index)'>{{ item.name
+                }}</el-button>
             </el-tooltip>
           </el-button-group>
         </el-divider>
         <el-row><el-input v-model="formData.contentJs" class="codeEditor" :rows="6" type="textarea"
-                          placeholder="Please input" />
+            placeholder="Please input" />
         </el-row>
       </el-tab-pane>
     </el-tabs>
@@ -265,7 +293,7 @@ import { ServerActionCurrentOpenTab } from "../../../wailsjs/go/main/App"
 import { RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue'
 import CodeEditor from './CodeEditor.vue';
 
-const codeEditor =ref(null)
+const codeEditor = ref(null)
 const codeEditorShow = ref(false)
 
 const emit = defineEmits(['custom-event', 'data-tag', 'form-change']);
@@ -412,8 +440,8 @@ const editorHandle = {
   ImportAttachCode: () => {
     formData.value.attachJs = TemplateJsCode.AttachJsCode
   },
-  ImportListTrunPageCode:()=>{
-    formData.value.listTurnPageJs=TemplateJsCode.ListTurnPageJsCode
+  ImportListTrunPageCode: () => {
+    formData.value.listTurnPageJs = TemplateJsCode.ListTurnPageJsCode
   },
   createImportListCode(mode) {
     // 数据替换
@@ -484,9 +512,9 @@ const createInitListRow = (action, check, sleep) => {
 
 const setPageData = (row) => {
   if (!row) return
-  row.listDelayTime = row.listDelayTime||"1000"
-  row.listTurnDelayTime = row.listTurnDelayTime||"1000"
-  row.contentDelayTime = row.contentDelayTime||"1000"
+  row.listDelayTime = row.listDelayTime || "1000"
+  row.listTurnDelayTime = row.listTurnDelayTime || "1000"
+  row.contentDelayTime = row.contentDelayTime || "1000"
   row.maxPages = row.maxPages || "2"
 
   formData.value = row
@@ -605,18 +633,18 @@ const handleSave = () => {
 
   // 如果有js，则需要二次确认
   let jswarn = "";
-  if (!formData.value.listJs || !formData.value.listTurnPageJs||!formData.value.contentJs){
+  if (!formData.value.listJs || !formData.value.listTurnPageJs || !formData.value.contentJs) {
     jswarn = "部分模块JS代码为空，请生成JS代码后，再进行保存！"
   }
   if (jswarn != "") {
     ElMessageBox.confirm(jswarn, '提示',
-        {
-          customClass: 'j-confirm-message-box',
-          type: 'warning',
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          showCancelButton: false,
-        }
+      {
+        customClass: 'j-confirm-message-box',
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showCancelButton: false,
+      }
     )/*.then(() => {
       emitSaveEvent()
     })*/
@@ -714,15 +742,18 @@ defineExpose({
   .el-form-item {
     margin-bottom: 10px;
   }
+
   .el-input__wrapper {
     background-color: transparent;
   }
 
 }
+
 .header-left {
   display: flex;
   align-items: center;
 }
+
 .codeEditor {
   width: 100%;
   font-size: 12pt;
@@ -730,20 +761,25 @@ defineExpose({
   line-height: 1.5em;
   padding: 10px;
 }
+
 .edit-tag-list {
   flex-wrap: wrap;
 }
+
 .edit-tag {
   margin-bottom: 4px;
 }
+
 .edit-css-header {
   display: flex;
 }
+
 .mark-container {
   display: flex;
   align-items: center;
   flex: 1;
   margin-left: 10px;
+
   :deep(.el-tag) {
     padding-top: 2px;
     padding-bottom: 2px;
@@ -751,14 +787,17 @@ defineExpose({
     min-height: 24px;
   }
 }
+
 .mark-buttons {
   margin: 0 10px;
   padding: 4px;
 }
+
 .form-item-sub-line {
   line-height: 24px;
   color: var(--el-color-primary);
 }
+
 .rollback-reason-container {
   color: var(--el-color-danger);
 }
@@ -766,6 +805,7 @@ defineExpose({
 .demo-tabs {
   .pointer-input {
     ::v-deep {
+
       .el-input__wrapper,
       .el-input__inner {
         cursor: pointer;
@@ -777,10 +817,12 @@ defineExpose({
 .form-init {
   padding-bottom: 16px;
 }
+
 .form-init-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   ::v-deep {
     .el-form-item {
       margin-bottom: 0;
@@ -790,6 +832,7 @@ defineExpose({
   .form-init-row-js {
     flex: 8;
   }
+
   .form-init-row-ms {
     flex: 4;
   }