!2 执行和格式化按钮改为选择文本后显示

Merge pull request !2 from zhengdahan/fronted-end

mayfly_go_web/package.json

@@ -7,6 +7,7 @@
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
   },
   "dependencies": {
+    "@types/lodash": "^4.14.178",
     "axios": "^0.21.1",
     "codemirror": "^5.61.0",
     "core-js": "^3.6.5",
@@ -16,6 +17,7 @@
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^1.0.2-beta.44",
     "jsonlint": "^1.6.3",
+    "lodash": "^4.17.21",
     "mitt": "^2.1.0",
     "nprogress": "^0.2.0",
     "screenfull": "^5.1.0",

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -25,9 +25,9 @@
             <el-aside id="sqlcontent" width="65%" style="background-color: rgb(238, 241, 246)">
                 <div class="toolbar">
                     <div class="fl">
-                        <el-button v-waves @click="runSql" type="success" icon="el-icon-video-play" size="mini" plain>执行</el-button>
+                        <!-- <el-button v-waves @click="runSql" type="success" icon="el-icon-video-play" size="mini" plain>执行</el-button>
 
-                        <el-button v-waves @click="formatSql" type="primary" icon="el-icon-magic-stick" size="mini" plain>格式化</el-button>
+                        <el-button v-waves @click="formatSql" type="primary" icon="el-icon-magic-stick" size="mini" plain>格式化</el-button> -->
 
                         <el-upload
                             style="display: inline-block; margin-left: 10px"
@@ -67,7 +67,19 @@
                         <el-button v-waves @click="deleteSql" type="danger" icon="el-icon-delete" size="mini" plain>删除</el-button>
                     </div>
                 </div>
-                <codemirror @beforeChange="onBeforeChange" class="codesql" ref="cmEditor" language="sql" v-model="sql" :options="cmOptions" />
+                <codemirror
+                    @mousemove="listenMouse"
+                    @beforeChange="onBeforeChange"
+                    class="codesql"
+                    ref="cmEditor"
+                    language="sql"
+                    v-model="sql"
+                    :options="cmOptions"
+                />
+                <el-button-group :style="btnStyle">
+                    <el-button v-waves @click="runSql" type="success" icon="el-icon-video-play" size="small" plain>执行</el-button>
+                    <el-button v-waves @click="formatSql" type="primary" icon="el-icon-magic-stick" size="small" plain>格式化</el-button>
+                </el-button-group>
             </el-aside>
 
             <el-container style="margin-left: 2px">
@@ -112,6 +124,7 @@
 <script lang="ts">
 import { toRefs, reactive, computed, defineComponent, ref } from 'vue';
 import { dbApi } from './api';
+import _ from 'lodash';
 
 import 'codemirror/addon/hint/show-hint.css';
 // import base style
@@ -168,6 +181,13 @@ export default defineComponent({
                 pageSize: 10,
                 envId: null,
             },
+            btnStyle: {
+                position: 'absolute',
+                zIndex: 1000,
+                display: 'none',
+                left: '',
+                top: '',
+            },
             cmOptions: {
                 tabSize: 4,
                 mode: 'text/x-sql',
@@ -486,7 +506,26 @@ export default defineComponent({
             const res = await dbApi.dbs.request(state.params);
             state.dbs = res.list;
         };
-
+        /**
+         * 获取选择文字，显示隐藏按钮，防抖
+         */
+        const getSelection = _.debounce((e) => {
+            let temp = codemirror.value.getSelection();
+            if (temp) {
+                state.btnStyle.display = 'block';
+                if (!state.btnStyle.left) {
+                    state.btnStyle.left = e.target.getBoundingClientRect().left - 100 + 'px';
+                    state.btnStyle.top = e.target.getBoundingClientRect().top - 20 + 'px';
+                }
+            } else {
+                state.btnStyle.display = 'none';
+                state.btnStyle.left = '';
+                state.btnStyle.top = '';
+            }
+        }, 100);
+        const listenMouse = (e: any) => {
+            getSelection(e);
+        };
         return {
             ...toRefs(state),
             cmEditor,
@@ -505,6 +544,7 @@ export default defineComponent({
             clearDb,
             formatSql,
             onBeforeChange,
+            listenMouse,
         };
     },
 });

mayfly_go_web/yarn.lock

@@ -107,6 +107,11 @@
   resolved "https://registry.npmmirror.com/@types/json-schema/download/@types/json-schema-7.0.9.tgz?cache=0&sync_timestamp=1637266073261&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha1-l+3JA36gw4WFMgsolk3eOznkZg0=
 
+"@types/lodash@^4.14.178":
+  version "4.14.178"
+  resolved "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
+  integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
+
 "@types/node@^15.6.0":
   version "15.14.9"
   resolved "https://registry.npmmirror.com/@types/node/download/@types/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa"