refs #355 Add back button in tag page

src/renderer/components/TimelineSpace/Contents/Hashtag.vue

@@ -1,8 +1,22 @@
 <template>
 <div id="hashtag">
   <div class="search-header" v-loading="false">
-    <el-form :ineline="true">
+    <el-form>
-      <input v-model="tag" placeholder="Tag name" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
+      <div class="form-wrapper">
+        <div class="form-item" v-show="tagPage()">
+          <el-button type="text" @click="back">
+            <icon name="chevron-left"></icon>
+          </el-button>
+        </div>
+        <div class="form-item input">
+          <input v-model="tag" placeholder="Tag name" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
+        </div>
+        <div class="form-item" v-show="tagPage()">
+          <el-button type="text">
+            <icon name="thumbtack"></icon>
+          </el-button>
+        </div>
+      </div>
     </el-form>
   </div>
   <router-view></router-view>
@@ -23,6 +37,12 @@ export default {
     },
     search () {
       this.$router.push({ path: `/${this.id()}/hashtag/${this.tag}` })
+    },
+    tagPage () {
+      return this.$route.name === 'tag'
+    },
+    back () {
+      this.$router.push({ name: 'hashtag-list' })
     }
   }
 }
@@ -36,18 +56,35 @@ export default {
     background-color: var(--theme-selected-background-color);
     padding: 8px 12px;
 
-    .search-keyword {
+    .form-wrapper {
-      width: 100%;
+      display: flex;
-      background-color: var(--theme-background-color);
+      align-items: center;
-      border: none;
+
-      border-radius: 0 4px 4px 0;
+      .input {
-      color: var(--theme-primary-color);
+        flex-grow: 3;
-      line-height: 40px;
+      }
-      height: 40px;
+
-      padding: 0 15px;
+      .form-item {
-      outline: 0;
+        margin: auto 8px;
-      font-size: 14px;
+
-      box-sizing: border-box;
+        .el-button {
+          padding: 0;
+        }
+      }
+
+      .search-keyword {
+        width: 100%;
+        background-color: var(--theme-background-color);
+        border: none;
+        border-radius: 0 4px 4px 0;
+        color: var(--theme-primary-color);
+        line-height: 40px;
+        height: 40px;
+        padding: 0 15px;
+        outline: 0;
+        font-size: 14px;
+        box-sizing: border-box;
+      }
     }
   }
 }

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
     <el-menu
-      :default-active="activeRoute"
+      default-active="activeRoute"
       :background-color="themeColor"
       text-color="#909399"
       active-text-color="#ffffff"