导航面包屑修改为tab页签

src/views/Home.vue

@@ -21,7 +21,7 @@
     </el-header>
     <el-container>
       <el-aside width="200px">
-        <el-menu :default-active="activeMenuItem" :default-openeds="openMenuNames" style="height: 100%;">
+        <el-menu :default-active="defaultActiveMenuKey" :default-openeds="openMenuNames" style="height: 100%;">
           <el-sub-menu v-for="menu in menus" :key="menu.name" :index="menu.name">
             <template #title>
               <component :is="menu.icon" style="width: 18px; margin-right: 5px;"></component>
@@ -34,13 +34,18 @@
         </el-menu>
       </el-aside>
       <el-main class="layout-main">
-        <div class="layout-breadcrumb">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item v-for="(item,index) in $store.state.breadcrumb" :key="index">{{item}}</el-breadcrumb-item>
-          </el-breadcrumb>
+        <div class="layout-tabs">
+          <el-tabs type="card" class="nav-tabs" v-model="$store.state.activeTab" @tab-change="openMenu" @tab-remove="removeTab">
+            <el-tab-pane label="首页" name="/"></el-tab-pane>
+            <el-tab-pane v-for="tab in $store.state.tabs" :key="tab.name" :label="tab.title" :name="tab.path" closable></el-tab-pane>
+          </el-tabs>
         </div>
         <div class="layout-content">
-          <router-view class="main-view"></router-view>
+          <router-view class="main-view" v-slot="{ Component }">
+            <keep-alive :include="keepViews">
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
         </div>
         <div class="layout-copy">2016-{{currentYear}} &copy; colorfulsweet 上次更新：{{ version }}</div>
       </el-main>
@@ -60,16 +65,21 @@ export default class Home extends Vue{
   currentYear = new Date().getFullYear()
   // 菜单项
   menus = menus
-  activeMenuItem: string | null = null
+  defaultActiveMenuKey: string | null = null
   openMenuNames: string[] = []
   get realname(): null | string { // 当前用户的显示名称
     return this.$store.state.loginInfo.userInfo
       ? this.$store.state.loginInfo.userInfo.realname : null
   }
+  get keepViews(): string[] {
+    return this.$store.state.tabs
+      .filter(item => item.name)
+      .map(item => item.name)
+  }
   async created(): Promise<void> {
-    this.activeMenuItem = this.$route.path
-    if(this.activeMenuItem) {
-      let result = /^\/(.*)\//.exec(this.activeMenuItem)
+    this.defaultActiveMenuKey = this.$route.path
+    if(this.defaultActiveMenuKey) {
+      let result = /^\/(.*)\//.exec(this.defaultActiveMenuKey)
       if(result) {
         this.openMenuNames.push(result[1])
       }
@@ -103,5 +113,12 @@ export default class Home extends Vue{
   openMenu(path: string): void {
     this.$router.push(path)
   }
+  removeTab(path: string): void {
+    this.$store.commit('removeTab', path)
+    if (this.$store.state.activeTab === path) { // 关闭的是当前打开的页签
+      const { tabs } = this.$store.state
+      this.openMenu(tabs[tabs.length - 1]?.path || '/')
+    }
+  }
 }
 </script>

src/views/system/Article.vue

@@ -106,7 +106,7 @@
     v-model="markdownPreview.show"
     :title="markdownPreview.title"
     direction="rtl"
-    custom-class="custom-drawer">
+    class="custom-drawer">
     <div v-html="markdownPreview.content"></div>
   </el-drawer>
 </div>

src/views/tool/SqlReplace.vue

@@ -1,71 +0,0 @@
-<template>
-<div>
-  <el-form :label-width="100">
-    <el-form-item label="SQL语句">
-      <el-input v-model="sql" type="textarea" :rows="5"/>
-    </el-form-item>
-    <el-form-item label="参数">
-      <el-input v-model="params" type="textarea" :rows="3"/>
-    </el-form-item>
-    <el-form-item label="替换结果">
-      <el-input v-model="replaceResult" ref="resultInput" readonly/>
-    </el-form-item>
-  </el-form>
-  <div style="text-align:center">
-    <el-button-group size="large" >
-      <el-button type="primary" icon="DocumentCopy" @click="replacePlaceholder">替换占位符</el-button>
-      <el-button type="default" @click="clear">清空</el-button>
-    </el-button-group>
-  </div>
-</div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-import { ElInput, ElMessage } from 'element-plus'
-
-@Options({
-  name: 'SqlReplace'
-})
-export default class SqlReplace extends Vue {
-  sql: string = ''
-  params: string = ''
-  replaceResult: string = ''
-
-  replacePlaceholder() {
-    let sql = this.sql
-    const reg = /(.+?)\s*\((String|Integer|Boolean)\),?/g
-    let execResult = reg.exec(this.params)
-    let replaceMent = ''
-    while(execResult && sql.indexOf('?') !== -1) {
-      switch(execResult[2]) {
-        case 'String': 
-          replaceMent = `'${execResult[1].trim()}'`
-          break
-        case 'Integer': 
-          replaceMent = execResult[1].trim()
-          break
-        case 'Boolean':
-          replaceMent = eval(execResult[1]) ? '1' : '0'
-          break
-      }
-      sql = sql.replace('?', replaceMent)
-      execResult = reg.exec(this.params)
-    }
-    this.replaceResult = sql
-    Promise.resolve('已复制到剪贴板').then(message => {
-      (this.$refs.resultInput as typeof ElInput).select()
-      if (document.execCommand('copy')) {
-        ElMessage.success(message)
-      } else {
-        ElMessage.warning('复制失败，请手动复制')
-      }
-    })
-  }
-  clear() {
-    this.sql = ''
-    this.params = ''
-    this.replaceResult = ''
-  }
-}
-</script>