:feat: add reset

Author: rainpure

src/view/batch-replace.css

@@ -28,24 +28,23 @@ body, html, h2 {
 .header h2 {
     font-size: 28px;
 }
+.operator {
+    float: right;
+}
+.operator.clear-his {
+    font-size: 12px;
+    padding: 3px 0;
+}
 .operate {
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    min-height: 20px;
-    vertical-align: middle;
-    text-align: center;
-    display: inline-block;
-    border-radius: 50%;
+    font-size: 18px;
+    font-weight: bold;
     cursor: pointer;
 }
 .operate.add {
-    border: 1px solid #67c23a;
     color: #67c23a;
 }
 .operate.del {
     margin-left: 5px;
-    border: 1px solid #f56c6c;
     color: #f56c6c;
 }
 
@@ -69,4 +68,21 @@ body, html, h2 {
 .empty {
     text-align: center;
     color: #ccc;
+}
+
+.history {
+    margin-top: 20px;
+}
+.history-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+.history-title {
+    font-size: 12px;
+    color: #333;
+}
+
+.history-item {
+    cursor: pointer;
+    margin: 0 5px 5px 0;
 }

src/view/batch-replace.html

@@ -13,31 +13,45 @@
     <div id="app">
         <div class="header">
             <h2>Replace Rules</h2>
-            <span class="operate add" @click="add">+</span>
         </div>
-        <div class="content">
+        <el-card class="content">
+            <div slot="header" class="history-title">
+                <span>操作面板</span>
+                <span class="operator operate add" @click="add">+</span>
+            </div>
             <div class="rules">
                 <div class="rules-item" v-for="(item, index) in replaceRule" @mouseover="item.showDel = true"
                     @mouseout="item.showDel = false">
-                    <el-input v-model="item.find" placeholder="Search" :size="size"></el-input>
+                    <el-input size="mini" v-model="item.find" placeholder="Search"></el-input>
                     <span class="seperate">→</span>
-                    <el-input v-model="item.to" placeholder="Replace" :size="size"></el-input>
+                    <el-input size="mini" v-model="item.to" placeholder="Replace"></el-input>
                     <span :class="{ 'hide': !item.showDel }" class="operate del" @click="del(index)">×</span>
                 </div>
             </div>
             <div v-if="replaceRule.length > 0">
-                <el-button @click="match" :size="size">Search</el-button>
-                <el-button @click="replace" type="primary" :size="size">Replace All</el-button>
+                <el-button size="mini" @click="match">Search</el-button>
+                <el-button size="mini" @click="replace" type="primary">Replace All</el-button>
+                <el-button size="mini" @click="reset">Reset</el-button>
             </div>
             <div v-else class="empty">
-                点击右上角 "+" 添加匹配规则
+                点击右上角 "+" 添加匹配规则
             </div>
-            <!-- <div>{{replaceRule}}</div> -->
-        </div>
+        </el-card>
+        <el-card class="history">
+            <div slot="header" class="history-title">
+                <span>历史记录</span>
+                <el-button class="operator clear-his" type="text" @click=resetHistory>清空</el-button>
+            </div>
+            <div class="history-list">
+                <el-tag v-for="(item, index) in histroyRules" size="mini" class="history-item"
+                    @click="reuseHistory(item)" type="info">
+                    {{item.find}} → {{item.to}}</el-tag>
+            </div>
+        </el-card>
     </div>
-    <script src="../../lib/vue-2.5.17/vue.js"></script>
-    <script src="../../lib/element-ui-2.7.2/index.js"></script>
-    <script src="../../src/view/batch-replace.js"></script>
 </body>
 
-</html>
+</html>
+<script src="../../lib/vue-2.5.17/vue.js"></script>
+<script src="../../lib/element-ui-2.7.2/index.js"></script>
+<script src="../../src/view/batch-replace.js"></script>

src/view/batch-replace.js

@@ -45,12 +45,20 @@ new Vue({
             find: '输入需要替换的内容',
             to: '',
             showDel: false
-        }]
+        }],
+        histroyRules: []
     },
     mounted() {
         callVscode('getFileContent', fileContent => this.fileContent = fileContent);
+        console.log('window', window.localStorage);
+    },
+    watch: {
+        historyRules: {
+            deep: true,
+            handler() {
+            }
+        }
     },
-    watch: {},
     methods: {
         // 模拟alert
         alert(info) {
@@ -72,6 +80,9 @@ new Vue({
                 item.to = '';
             })
         },
+        resetHistory() {
+            this.histroyRules = []
+        },
         validate() {
             let emptyNum = 0;
             this.replaceRule.forEach(item => {
@@ -91,6 +102,11 @@ new Vue({
             if (!this.validate()) {
                 return;
             }
+            this.replaceRule.forEach(element => {
+                this.histroyRules.push({
+                    ...element
+                })
+            });
 
             callVscode({
                 cmd: 'match',
@@ -103,13 +119,17 @@ new Vue({
             if (!this.validate()) {
                 return;
             }
+            this.replaceRule.forEach(element => {
+                this.histroyRules.push({
+                    ...element
+                })
+            });
 
             callVscode({
                 cmd: 'replace',
                 rules: this.replaceRule
             }, (data) => {
                 this.alert(`${data.length}个匹配项已替换`);
-                this.reset();
             });
         },
         add() {
@@ -121,6 +141,9 @@ new Vue({
         },
         del(index) {
             this.replaceRule.splice(index, 1);
+        },
+        reuseHistory(item) {
+            this.replaceRule.push({...item})
         }
     }
 });