feat: 编辑弹窗输入框添加背景色

frontend/src/components/spider/EditSpider.vue

@@ -67,7 +67,7 @@
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="条目">
-                                <el-input v-model="formData.listItemCss" @input="onCssFormChange" placeholder="ul.list li"></el-input>
+                                <el-input v-model="formData.listItemCss" @input="onCssFormChange" 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>
@@ -75,14 +75,14 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="条目链接">
-                                <el-input v-model="formData.listLinkCss" @input="onCssFormChange" placeholder="a"></el-input>
+                                <el-input v-model="formData.listLinkCss" @input="onCssFormChange" 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" @input="onCssFormChange" placeholder="span"></el-input>
+                                <el-input v-model="formData.listPublishTimeCss" @input="onCssFormChange" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -90,7 +90,7 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="翻页下一页">
-                                <el-input v-model="formData.listNextPageCss" @input="onCssFormChange" placeholder="li.nextpage a"></el-input>
+                                <el-input v-model="formData.listNextPageCss" @input="onCssFormChange" 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>
@@ -103,13 +103,13 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="详情页标题">
-                                <el-input v-model="formData.titleCss" @input="onCssFormChange" placeholder="ul.list li"></el-input>
+                                <el-input v-model="formData.titleCss" @input="onCssFormChange" 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" @input="onCssFormChange" placeholder="a"></el-input>
+                                <el-input v-model="formData.publishTimeCss" @input="onCssFormChange" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -117,13 +117,13 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="详情页发布单位">
-                                <el-input v-model="formData.publishUnitCss" @input="onCssFormChange" placeholder="span"></el-input>
+                                <el-input v-model="formData.publishUnitCss" @input="onCssFormChange" 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" @input="onCssFormChange" placeholder="li.nextpage a"></el-input>
+                                <el-input v-model="formData.contentCss" @input="onCssFormChange" 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>
@@ -246,6 +246,7 @@ const formData = ref({
     maxPages: '',
 });
 
+// 快捷键map
 const fastKeyDownMap = {
     // list
     listBodyCss: 'ctrl+2',
@@ -260,6 +261,18 @@ const fastKeyDownMap = {
     contentCss: 'ctrl+alt+6',
     attachCss: 'ctrl+alt+7',
 }
+// 背景色map
+const cssInputBg = {
+    listItemCss: { color: "#fff9c4", label: "列表条目" },
+    listLinkCss: { color: "#bbdefb", label: "列表标题" },
+    listPublishTimeCss: { color: "#c8e6c9", label: "列表发布时间" },
+    listNextPageCss: { color: "#dcedc8", label: "列表下一页" },
+    titleCss: { color: "#e7f3fe", label: "文章标题" },
+    publishTimeCss: { color: "#ffe0b2", label: "文章发布时间" },
+    publishUnitCss: { color: "#ffe1e1", label: "文章发布单位" },
+    contentCss: { color: "#e0f7fa", label: "文章正文" },
+    attachCss: { color: "#fff1e5", label: "文章附件" },
+}
 
 const activeName = ref("first")
 const dialogVisible = ref(false)
@@ -356,6 +369,9 @@ defineExpose({
     .el-form-item {
         margin-bottom: 10px;
     }
+    .el-input__wrapper {
+        background-color: transparent;
+    }
 }
 
 .codeEditor {

frontend/src/styles/element/tags.scss

@@ -1,3 +1,4 @@
 .el-tag__content {
   white-space: pre-wrap;
+  word-break: break-all;
 }