From 64a69195d21de653ed18a62308b5f1bd47c78910 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Sat, 1 Aug 2020 00:39:29 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=B8=93=E9=A2=98=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/topic/index.js |  9 +++++++
 components/common/topic/main.vue | 43 ++++++++++++++++++++++++++++++++
 pages/topic/_topic_uri.vue       |  8 ++++++
 plugins/extend.js                |  2 ++
 store/topic.js                   |  5 ++--
 5 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 components/common/topic/index.js
 create mode 100644 components/common/topic/main.vue

diff --git a/components/common/topic/index.js b/components/common/topic/index.js
new file mode 100644
index 0000000..cdfd10e
--- /dev/null
+++ b/components/common/topic/index.js
@@ -0,0 +1,9 @@
+import TopicNav from './main'
+
+export const topicNav = {
+  install(Vue) {
+    Vue.component('topic-nav', TopicNav)
+  }
+}
+
+export default topicNav
diff --git a/components/common/topic/main.vue b/components/common/topic/main.vue
new file mode 100644
index 0000000..739c16c
--- /dev/null
+++ b/components/common/topic/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-row class="wrapper">
+    <el-col style="margin-bottom: 1rem;">
+      <el-menu type="border-card" :default-active="currentTopic" style="margin-top: -2px;border: 0;" mode="horizontal"
+               @select="handleSelectTopic">
+        <el-menu-item index="news">最新</el-menu-item>
+        <el-menu-item v-for="topic in topicNavs" :key="topic.idTopic" :index="topic.topicUri">{{topic.topicTitle}}
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex'
+
+  export default {
+    name: "topicNav",
+    props: {
+      currentTopic: {
+        type: String,
+        default: 'news'
+      }
+    },
+    computed: {
+      ...mapState({
+        topicNavs: state => state.topic.data,
+        isFetching: state => state.topic.fetching
+      })
+    },
+    methods: {
+      handleSelectTopic(item) {
+        this.$router.push({
+          path: '/topic/' + item
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/topic/_topic_uri.vue b/pages/topic/_topic_uri.vue
index aba758e..5ab2a49 100644
--- a/pages/topic/_topic_uri.vue
+++ b/pages/topic/_topic_uri.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="topic-archive-page">
+    <topic-nav :currentTopic="defaultParams.topic_uri"></topic-nav>
     <article-list :articles="articles" @currentChange="currentChangeArticle"/>
   </div>
 </template>
@@ -13,6 +14,9 @@
       ArticleList
     },
     validate({ params, store }) {
+      if (params.topic_uri === 'news') {
+        return true;
+      }
       return params.topic_uri && store.state.topic.data.some(
         topic => topic.topicUri === params.topic_uri
       )
@@ -25,6 +29,9 @@
         return this.$store.state.article.list.data
       },
       currentTopic() {
+        if (this.$route.params.topic_uri === 'news') {
+          return true;
+        }
         return this.$store.state.topic.data.find(
           topic => topic.topicUri === this.$route.params.topic_uri
         )
@@ -42,6 +49,7 @@
     },
     mounted() {
       this.$store.commit('setActiveMenu', 'topic');
+      console.log(this.defaultParams)
     },
     created() {
       if (!this.currentTopic) {
diff --git a/plugins/extend.js b/plugins/extend.js
index fbb82a2..fd7e8ad 100644
--- a/plugins/extend.js
+++ b/plugins/extend.js
@@ -1,3 +1,5 @@
 import Vue from 'vue'
 import CommentBox from '~/components/common/comment'
+import TopicNavBox from '~/components/common/topic'
 Vue.use(CommentBox)
+Vue.use(TopicNavBox)
diff --git a/store/topic.js b/store/topic.js
index 5d3a437..b133e2f 100644
--- a/store/topic.js
+++ b/store/topic.js
@@ -1,7 +1,7 @@
 /**
  * @file 分类数据状态 / ES module
  * @module store/category
- * @author Surmon <https://github.com/surmon-china>
+ * @author Ronger <https://github.com/ronger-x>
  */
 
 export const TOPIC_API_PATH = '/api/topic'
@@ -24,8 +24,7 @@ export const mutations = {
 
 export const actions = {
   fetchList({ commit }, params) {
-    commit('updateFetching', true)
-    console.log(params)
+    commit('updateFetching', true);
     return this.$axios
       .$get(`${TOPIC_API_PATH}/topic-nav`)
       .then(response => {