界面优化，拖拽模块bug修复

src/components/actions.vue

+<template>
+  <div class="actions">
+    容器
+  </div>
+</template>
+
+<script>
+export default {
+  name:'actions',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/collectSingleElements.vue

+<template>
+  <div class="collectSingleElements">
+    采集单元素
+  </div>
+</template>
+
+<script>
+export default {
+  name:'collectSingleElements',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/collectionTable.vue

+<template>
+    <div class="collectionTable">
+        <div style="height: 35px;margin-left: 15px;text-align: left;">
+            <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
+            <span style="margin-left: 3px;">元素信息如下:</span>
+        </div>
+        <!-- 表格信息 -->
+        <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
+            <vxe-column field="xpath" title="xpath"></vxe-column>
+            <vxe-column field="content" title="content"></vxe-column>
+            <vxe-column title="操作" width="100">
+                <template #default="{ row }">
+                    <vxe-button status="danger" content="删除" @click="deleteRowEvent(row)"
+                        style="margin-right: 20px;width: 50px;"></vxe-button>
+                </template>
+            </vxe-column>
+        </vxe-table>
+    </div>
+</template>
+
+<script>
+import VXETable, { t } from 'vxe-table'
+
+export default {
+    name: 'collectionTable',
+    components: {},
+    props: {},
+    data () {
+        return {
+            tableData: []
+        }
+    },
+    created () { },
+    mounted () { },
+    watch: {},
+    computed: {},
+    methods: {
+        selectElement () {
+            let _this = this
+            document.addEventListener('contextmenu', function (event) {
+                var xpath = _this.getElementXPath(event.target);
+                var textContent = event.target.textContent.trim();
+                console.log('XPath of the clicked element:', xpath);
+                console.log('Text content of the clicked element:', textContent);
+                _this.docClose()
+            }, false);
+
+        },
+        getTableData () {
+            const $table = this.$refs.xTable
+            const removeRecords = $table.getRemoveRecords()
+
+        },
+        async deleteRowEvent (row) {
+            this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
+        },
+        getElementXPath (element) {
+            let _this = this
+            if (element.tagName === 'BODY') {
+                return '/HTML/' + element.tagName;
+            }
+            var ix = 1, siblings = element.parentNode.childNodes;
+            for (var i = 0; i < siblings.length; i++) {
+                var sibling = siblings[i];
+                if (sibling === element) {
+                    return _this.getElementXPath(element.parentNode) + '/' + element.tagName + '[' + ix + ']';
+                }
+                if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+                    ix++;
+                }
+            }
+        },
+        // deleteRowEvent (row) {
+        //     console.log(row)
+        // },
+        docClose () {
+            document.oncontextmenu = () => false;
+        },
+    },
+}
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file

src/components/elClick.vue

+<template>
+  <div class="elClick">点击</div>
+</template>
+
+<script>
+export default {
+  name:'elClick',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/index.js

+import onSelect from './onSelect.vue';
+import elClick from './elClick.vue';
+import wait from './wait.vue';
+import loopClick from './loopClick.vue'
+import collectSingleElements from './collectSingleElements.vue';
+import pageClose from './pageClose.vue';
+import mouseMove from './mouseMove.vue';
+import pageJavascipt from './pageJavascipt.vue'
+import collectionTable from './collectionTable.vue';
+import submit from './submit.vue';
+import actions from './actions.vue';
+import onInput from './onInput.vue'
+// import ComponentC from './ComponentC.vue';
+
+export { onSelect, elClick, wait, onInput,loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file

src/components/loopClick.vue

+<template>
+  <div class="loopClick">循环点击</div>
+</template>
+
+<script>
+export default {
+  name:'loopClick',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/mouseMove.vue

+<template>
+  <div class="mouseMove">鼠标移动</div>
+</template>
+
+<script>
+export default {
+  name:'mouseMove',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/onInput.vue

+<template>
+  <div class="onInput">输入</div>
+</template>
+
+<script>
+export default {
+  name:'onInput',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/onSelect.vue

+<template>
+  <div class="onSelect">选择</div>
+</template>
+
+<script>
+export default {
+  name:'onSelect',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/pageClose.vue

+<template>
+  <div class="pageClose">页面关闭</div>
+</template>
+
+<script>
+export default {
+  name:'pageClose',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/pageJavascipt.vue

+<template>
+  <div class="pageJavascipt">页面执行</div>
+</template>
+
+<script>
+export default {
+  name:'pageJavascipt',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/submit.vue

+<template>
+  <div class="submit">提交</div>
+</template>
+
+<script>
+export default {
+  name:'submit',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/wait.vue

+<template>
+  <div class="wait">等待</div>
+</template>
+
+<script>
+export default {
+  name:'wait',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/main.js

@@ -6,6 +6,7 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+
 Vue.use(VXETable)
 Vue.use(ElementUI);
 
@@ -115,37 +116,37 @@ function generateToolkit () {
 
 window.onload = function () {
 
-let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
+    let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
 
-toolkit = document.createElement("div");
-toolkit.classList = "tooltips"; //添加样式
-toolkit.setAttribute("id", "wrapperToolkit");
-let tooltips = false; //标记鼠标是否在提示框上
+    toolkit = document.createElement("div");
+    toolkit.classList = "tooltips"; //添加样式
+    toolkit.setAttribute("id", "wrapperToolkit");
+    let tooltips = false; //标记鼠标是否在提示框上
 
-//右键菜单屏蔽
-document.oncontextmenu = () => false;
+    //右键菜单屏蔽
+    document.oncontextmenu = () => false;
 
-toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
+    toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
 
-document.body.append(toolkit);
-console.log(document)
+    document.body.append(toolkit);
+    console.log(document)
 
-$(".tooltips").html(`
+    $(".tooltips").html(`
 <div id="k5WebDriver"></div>
 `);
-// global.app = new Vue(ToolKit);
-new Vue({
+    // global.app = new Vue(ToolKit);
+    new Vue({
         el: '#k5WebDriver',
         router,
         render: h => h(App)
-})
+    })
 
-document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", function () {
         // 在 DOMContentLoaded 事件触发后执行的代码
         var body = document.body;
 
         // 执行其他操作
-});
-generateToolkit();
+    });
+    generateToolkit();
 }
 

webpack.config.js

@@ -15,11 +15,15 @@ module.exports = {
         打包速度很慢，仅适合在项目发布阶段使用
     */
     mode: 'development',
-    entry: './src/main.js', // 入口： 默认是./src/index.html
+    entry:{
+       main: './src/main.js', // 入口： 默认是./src/index.html
+       components: './src/components/index.js' // 组件入口文件
+    },
     // 输出 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
     output: {
         path: path.join(__dirname, 'dist'), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
-        filename: "bundle.js" // 默认是 ./dist/main.js
+        filename: '[name].bundle.js', // 默认是 ./dist/main.js
+        
     },
     module: {
         // ... 其它规则
@@ -103,5 +107,11 @@ module.exports = {
         }),
         new VueLoaderPlugin(), // 使用npm 导入使用vue-loader的插件
         new webpack.HotModuleReplacementPlugin() // 热更新引入(HMR 绝对不能被用在生产环境)
-    ]
+    ],
+    resolve: {
+        alias: {
+          'vue$': 'vue/dist/vue.esm.js'
+        },
+        extensions: ['*', '.js', '.vue', '.json']
+      },
 };