From f3b3b3cacb01c22322378ddaff5e70b986235813 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 9 Jul 2025 18:15:53 +0800
Subject: [PATCH] feat(ui): add topic switching

---
 open-isle-cli/src/views/HomePageView.vue | 124 ++++++++++++++---------
 1 file changed, 75 insertions(+), 49 deletions(-)

diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index ff34318b3..e6931d563 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/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,60 +24,71 @@
     </div>
 
     <div class="article-container">
-      <div class="header-container">
-        <div class="header-item main-item">
-          <div class="header-item-text">话题</div>
-        </div>
-        <div class="header-item avatars">
-          <div class="header-item-text">参与人员</div>
-        </div>
-        <div class="header-item">
-          <div class="header-item-text">回复</div>
-        </div>
-        <div class="header-item">
-          <div class="header-item-text">浏览</div>
-        </div>
-        <div class="header-item">
-          <div class="header-item-text">活动</div>
-        </div>
-      </div>
-
-      <div v-if="isLoadingPosts" class="loading-container">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-
-      <div v-else-if="articles.length === 0">
-        <div class="no-posts-container">
-          <div class="no-posts-text">暂时没有帖子 :( 点击发帖发送第一篇相关帖子吧!</div>
-        </div>
-      </div>
-
-      <div class="article-item" v-for="article in articles" :key="article.id">
-        <div class="article-main-container">
-          <router-link class="article-item-title main-item" :to="`/posts/${article.id}`">
-            {{ article.title }}
-          </router-link>
-          <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
-          <div class="article-info-container main-item">
-            <ArticleTags :tags="[article.category]" />
-            <ArticleTags :tags="article.tags" />
+      <template v-if="selectedTopic === '最新'">
+        <div class="header-container">
+          <div class="header-item main-item">
+            <div class="header-item-text">话题</div>
+          </div>
+          <div class="header-item avatars">
+            <div class="header-item-text">参与人员</div>
+          </div>
+          <div class="header-item">
+            <div class="header-item-text">回复</div>
+          </div>
+          <div class="header-item">
+            <div class="header-item-text">浏览</div>
+          </div>
+          <div class="header-item">
+            <div class="header-item-text">活动</div>
           </div>
         </div>
 
-        <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item" v-for="(avatar, idx) in article.members" :key="idx">
-            <img class="article-member-avatar-item-img" :src="avatar" alt="avatar">
+        <div v-if="isLoadingPosts" class="loading-container">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        </div>
+
+        <div v-else-if="articles.length === 0">
+          <div class="no-posts-container">
+            <div class="no-posts-text">暂时没有帖子 :( 点击发帖发送第一篇相关帖子吧!</div>
           </div>
         </div>
-        <div class="article-comments">
-          {{ article.comments }}
-        </div>
-        <div class="article-views">
-          {{ article.views }}
-        </div>
-        <div class="article-time">
-          {{ article.time }}
+
+        <div class="article-item" v-for="article in articles" :key="article.id">
+          <div class="article-main-container">
+            <router-link class="article-item-title main-item" :to="`/posts/${article.id}`">
+              {{ article.title }}
+            </router-link>
+            <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
+            <div class="article-info-container main-item">
+              <ArticleTags :tags="[article.category]" />
+              <ArticleTags :tags="article.tags" />
+            </div>
+          </div>
+
+          <div class="article-member-avatars-container">
+            <div class="article-member-avatar-item" v-for="(avatar, idx) in article.members" :key="idx">
+              <img class="article-member-avatar-item-img" :src="avatar" alt="avatar">
+            </div>
+          </div>
+          <div class="article-comments">
+            {{ article.comments }}
+          </div>
+          <div class="article-views">
+            {{ article.views }}
+          </div>
+          <div class="article-time">
+            {{ 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>
 
@@ -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>