界面优化

src/App.vue

 <template>
-    <!-- <router-view></router-view>
-     -->
     <div id="realcontent">
-        <div id="EasySpiderResizer" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
+        <div id="EasySpiderResizer" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;">
+            <img style="width: 15px;height: 15px;" src="./assets/enlarge.svg">
+        </div>
         <div>
             <!-- 页头信息 -->
             <div class="tooldrag">
-                <img style="width: 20px;height: 20px;" src="./assets/logo.png">
+                <img style="width: 20px;height: 20px;" src="./assets/logo.svg">
                 <span style="padding-left: 3px;">K5 网页自动化工具</span>
             </div>
             <!-- 任务信息 -->
@@ -21,54 +21,63 @@
                         <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
                     </div>
                 </div>
-                <div style="display: flex;flex-direction: column;">
-                    <el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;" @click="submitPlan">保存任务</el-button>
-                    <el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
+                <div style="display: flex;flex-direction: column;height: 55px;justify-content: space-between;">
+                    <el-button size="mini" style="width: 60px;height: 25px;">保存任务</el-button>
+                    <el-button size="mini" style="width: 60px;height: 25px;" @click="submitPlan">导出任务</el-button>
                 </div>
             </div>
             <el-divider></el-divider>
             <!-- 动作集合 -->
             <div>
-                <div style="height: 35px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
+                <div style="height: 25px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
                     <span>动作集合:</span>
                     <span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.kvid">
                         <span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> >
                     </span>
                 </div>
             </div>
+            <div style="display: flex;align-items: flex-start;justify-content: space-between;">
                 <!-- 动作标签 -->
-            <div style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;padding-top: 5px;">
-                <!-- <el-button @click="goback">返回</el-button> -->
+                <div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 410px;height: 120px;">
                     <draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
                         <transition-group>
-                        <!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
-                        <el-tag class="boxtags" :key="tag.tagId" v-for="tag in treeNode" @click="selectTag(tag)">
+                            <el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
                                 <div style="display: flex;align-items: center;height: 30px;position: relative;">
-                                <span style="margin-left: 3px;min-width: 20px;">{{ 1 + tag.actionName }}</span>
-                                <img id="closeimg" @click="handleClose(tag)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
+                                    <span style="min-width: 40px;display: flex;align-items: center;">
+                                        <div class="circle">{{ index + 1 }}</div>
+                                        <span style="margin-left: 5px;">{{ tag.actionName }}</span>
+                                    </span>
+                                    <img id="closeimg" @click="handleClose(tag)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
                                 </div>
                             </el-tag>
                         </transition-group>
                     </draggable>
                     <draggable v-model="childrenTreeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == true">
                         <transition-group>
-                        <el-tag class="boxtags" :key="item.tagId" v-for="item in childrenTreeNode" @click="selectTag(item)">
+                            <el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode" @click="selectTag(item)">
                                 <div style="display: flex;align-items: center;height: 30px;position: relative;">
-                                <span style="margin-left: 3px;">{{ 2 + item.actionName }}</span>
-                                <img id="closeimg" @click="handleClose(item)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
+                                    <span style="min-width: 40px;display: flex;align-items: center;">
+                                        <div class="circle">{{ index + 1 }}</div>
+                                        <span style="margin-left: 5px;">{{ item.actionName }}</span>
+                                    </span>
+                                    <img id="closeimg" @click="handleClose(item)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
                                 </div>
                             </el-tag>
                         </transition-group>
                     </draggable>
                 </div>
+                <div style="height: 42px;display:flex;align-items: center;margin-right: 15px;">
+                    <el-button type="primary" size="mini" style="width: 60px;height: 25px;" @click="newAction">
+                        <img style="width: 20px;height: 20px;" src="./assets/add.svg">
+                    </el-button>
+                </div>
+            </div>
             <el-divider></el-divider>
             <!-- 动作配置 -->
-            <el-card class="box-card" v-if="isShowAction">
-                <div style="height: 35px;display: flex;justify-content: space-evenly;align-items: center;">
-                    <!-- <span>动作配置:</span> -->
+            <div v-if="isShowAction">
+                <div style="height: 35px;display: flex;justify-content: space-between;align-items: center;margin-left: 15px;margin-right: 15px;">
                     <div style="width: 211px;display: flex;align-items: center;">
                         <span style="width: 90px;">动作名称:</span>
-                        <!-- ref="saveTagInput"  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
                         <el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称">
                         </el-input>
                     </div>
@@ -84,7 +93,7 @@
                     </div>
                 </div>
                 <component :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" v-if="actionType !== ''"></component>
-            </el-card>
+            </div>
         </div>
     </div>
 </template>
@@ -147,6 +156,7 @@ export default {
             tableData: [],
             drag: false,
             tagId: 0,
+            index: 1,
             dynamicTagObj: {},
             parentTree: [],
             childrenTreeNode: [],
@@ -626,6 +636,20 @@ export default {
 </script>
 
 <style>
+.circle {
+    width: 15px;
+    height: 15px;
+    border: 1px solid #ffffff;
+    /* 圆环的颜色和宽度 */
+    border-radius: 50%;
+    /* 将边框半径设置为50%以创建圆形 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* 文本颜色 */
+    font-weight: bold;
+}
+
 /* 删除时鼠标手势 */
 #closeimg {
     cursor: pointer;
@@ -649,7 +673,7 @@ export default {
 
 .tooltips {
     min-width: 500px;
-    min-height: 444px;
+    min-height: 500px;
     background-color: white;
     position: fixed;
     z-index: 9999;
@@ -664,11 +688,6 @@ export default {
     /* 文字不可被选中 */
 }
 
-.el-card__body,
-.el-main {
-    padding: 0px !important;
-}
-
 .el-input__icon {
     line-height: 0px !important;
 }
@@ -687,10 +706,18 @@ export default {
 .el-tag {
     background-color: #409EFF !important;
     color: #ffffff !important;
+    padding: 0 5px !important;
+    margin-left: 12px !important;
+    margin-top: 6px !important;
 }
 
-.el-tag+.el-tag {
-    margin-left: 10px;
+/* .el-tag+.el-tag {
+    margin-left: 0px !important;
+} */
+
+.el-button+.el-button,
+.el-checkbox.is-bordered+.el-checkbox.is-bordered {
+    margin-left: 0px !important;
 }
 
 .button-new-tag {

src/assets/add.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699959198713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6767" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M921.6 458.752h-357.888V100.864c0-27.648-22.016-49.664-49.664-49.664s-49.664 22.016-49.664 49.664v357.888H106.496c-27.648 0-49.664 22.016-49.664 49.664s22.016 49.664 49.664 49.664h357.888v358.4c0 27.648 22.016 49.664 49.664 49.664s49.664-22.016 49.664-49.664v-358.4H921.6c27.648 0 49.664-22.016 49.664-49.664s-22.016-49.664-49.664-49.664z" fill="#ffffff" p-id="6768"></path></svg>
\ No newline at end of file

src/assets/close.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">  <image id="image0" width="200" height="200" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACUlBMVEUAAADgPVLmQVDnP1Dm
+QFDlQFDmP1DkQE7lP07lQE7mP07/QEDnP03lQFDmP1DkP0/kP0/lQU/pQ07kQVDlP0/mQU/lQE/i
+Pk7mQVDlQE/kQVDlP0/kP0/lQU7mQFDmQE/mQFDmQE/lQU/lQE/lQE/mQE7/AADlQE/lQE/lQU/k
+P0/lP1DlQE/lQE/kP1DkPlDkQE/lQE/jPk7jQ07lQU/mQVDnPU/lQFDkQE7mP0/lQE/lQE/lPk/l
+QU/mQE/oPk3lP0/mQE7mQlLlP0/lQE/iQFDkQU/lQE/lQU/mQE3lQE/lQE/kQ1HmQE/kQE/rQ1Hl
+QE/kQE/kQE/lQE/2tLr93uH83eD3uL7/7vD/7e//7fDlQVD/7O//7O7lQlH/6+3lQ1H+6u3/6+7m
+Q1LlQ1L+6ezmRFP+6evmRVPmRFL+6Or+6uzmRlT+5+rmRlX+5unmR1bmRVT+5uj+6OvmSFb+5ejm
+SVf+5OfmSVjmR1X94+bnSljnS1n94uXnTFrmSFf94eT94OPnTVvnTlzmSlj93+LnT1znT1393eHn
+UF7oUV/83N/oUl/829/oUmD82t7oU2H82d3pWGX71dnpWWboUV771Nj83ODpWmfpW2j709f70tb8
+297pXGnoU2D70dbpXWr70dX82t3pXmroVGH70NTqXmvoVGL6z9PqX2zoVWL6ztP82NzqYGzoVWP6
+ztLqYW3oVmP6zdH819vqYW7oVmT6zNHqYm7oV2T6y9D71trqY2/6zNDqYm/qYG370tfqX2v60NTp
+Xmv6zdL0oqr////6LzFiAAAAU3RSTlMAGTNJXGx5g4mMeQQ1Y4212fkXVpHJ/j6GzEOV5SeD3FC0
+atjWaAF05OFxbePgaVbTz1Iusa0qgHw9y8c6fnshubYf7etQep+eFLy7E9LSJuLv5E6/o8oAAAAB
+YktHRMVjCyt3AAAAB3RJTUUH5wsOCjEJ4oz9eAAABx5JREFUeNrtnfd3FUUUgJf0hFRSCISEJNTQ
+e4dQQgmhBG8SHtJEpYg0lSYERBSl14hUCSooCoqKgr3AH2Y2j8cOL+8lc+/c2dE98/2W3dm5852z
+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" />
+</svg>

src/assets/enlarge.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">  <image id="image0" width="200" height="200" x="0" y="0"
+    href="data:image/png;base64,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
+TkSuQmCC" />
+</svg>

src/assets/logo.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="389px" height="389px" viewBox="0 0 389 389" enable-background="new 0 0 389 389" xml:space="preserve">  <image id="image0" width="389" height="389" x="0" y="0"
+    href="data:image/png;base64,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
+RU5ErkJggg==" />
+</svg>

src/components/elRightClick.vue

@@ -8,7 +8,7 @@
         </div>
         <el-form label-position="right" label-width="80px" :model="actionConfig">
             <el-form-item label="查找方式">
-                <el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled ? '请先右击选择元素' : '请选择'" @change="handleChange" filterable remote :disabled="selectDisabled">
+                <el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled ? '右击选择元素' : '请选择'" @change="handleChange" filterable remote :disabled="selectDisabled">
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
                 </el-select>

webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
         打包速度很慢，仅适合在项目发布阶段使用
     */
     mode: 'development',
-    entry:{
+    entry: {
         main: './src/main.js', // 入口： 默认是./src/index.html
         components: './src/components/index.js' // 组件入口文件
     },
@@ -67,7 +67,7 @@ module.exports = {
                 exclude: /node_modules/
             },
             {
-                test: /\.(png|jpg|gif)$/i,
+                test: /\.(png|jpg|gif|svg)$/i,
                 use: [
                     {
                         loader: 'url-loader',