jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-22 22:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #132 from nagisa77/codex/ui

Browse Source 
Add topic switching placeholders
This commit is contained in:
Tim
2025-07-09 18:16:09 +08:00
committed by GitHub
parent 9fdf068cd6 f3b3b3cacb
commit 5436402127
1 changed files with 75 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
open-isle-cli/src/views/HomePageView.vue
View File

@@ -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>