Merge pull request #132 from nagisa77/codex/ui

Add topic switching placeholders

open-isle-cli/src/views/HomePageView.vue

@@ -9,7 +9,13 @@
 
     <div class="topic-container">
       <div class="topic-item-container">
-        <div v-for="topic in topics" :key="topic" class="topic-item" :class="{ selected: topic === selectedTopic }">
+        <div
+          v-for="topic in topics"
+          :key="topic"
+          class="topic-item"
+          :class="{ selected: topic === selectedTopic }"
+          @click="selectedTopic = topic"
+        >
           {{ topic }}
         </div>
         <CategorySelect v-model="selectedCategory" />
@@ -18,6 +24,7 @@
     </div>
 
     <div class="article-container">
+      <template v-if="selectedTopic === '最新'">
         <div class="header-container">
           <div class="header-item main-item">
             <div class="header-item-text">话题</div>
@@ -73,6 +80,16 @@
             {{ article.time }}
           </div>
         </div>
+      </template>
+      <div v-else-if="selectedTopic === '排行榜'" class="placeholder-container">
+        排行榜功能开发中，敬请期待。
+      </div>
+      <div v-else-if="selectedTopic === '热门'" class="placeholder-container">
+        热门帖子功能开发中，敬请期待。
+      </div>
+      <div v-else class="placeholder-container">
+        分类浏览功能开发中，敬请期待。
+      </div>
     </div>
 
   </div>
@@ -325,4 +342,13 @@ export default {
   height: 100%;
   object-fit: cover;
 }
+
+.placeholder-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  font-size: 16px;
+  opacity: 0.7;
+}
 </style>