WindowBird/xlqx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改初始状态为加载中

Browse Source
This commit is contained in:
WindowBird 2025-11-04 11:47:39 +08:00
parent 4c3f6324ed
commit f3486bf3c8
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/DevelopNews.vue
View File

@ -11,7 +11,7 @@ interface NewsCategory {
// 响应式数据 // 响应式数据
const newsData = ref<NewsCategory[]>([]) const newsData = ref<NewsCategory[]>([])
const loading = ref(false) const loading = ref(true) // 初始为 true，避免渲染时机问题
const error = ref('') const error = ref('')
// 文章类型配置 // 文章类型配置
@ -117,7 +117,7 @@ onMounted(() => {
<div v-else-if="error" class="text-center py-12"> <div v-else-if="error" class="text-center py-12">
<div class="text-red-600 text-lg mb-5">加载失败: {{ error }}</div> <div class="text-red-600 text-lg mb-5">加载失败: {{ error }}</div>
<button <button
class="inline-block px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-base font-normal rounded transition-all duration-150 ease-in-out cursor-pointer border border-transparent" class="inline-block px-5 py-2.5 bg-primary-600 hover:bg-primary-700 text-white text-base font-normal rounded transition-all duration-150 ease-in-out cursor-pointer border border-transparent"
@click="fetchNewsData"> @click="fetchNewsData">
重新加载 重新加载
</button> </button>
@ -135,12 +135,12 @@ onMounted(() => {
<!-- 分类标题 --> <!-- 分类标题 -->
<div class="flex items-center justify-between mb-5"> <div class="flex items-center justify-between mb-5">
<div :title="category.name" class="text-xl lg:text-2xl text-blue-600"> <div :title="category.name" class="text-xl lg:text-2xl text-primary-600">
{{ category.name }} {{ category.name }}
</div> </div>
<a <a
:href="`/article?code=${category.code}`" :href="`/article?code=${category.code}`"
class="text-sm text-blue-600 hover:text-blue-800 hover:underline transition-colors" class="text-sm text-primary-600 hover:text-primary-800 hover:underline transition-colors"
> >
查看更多 查看更多
</a> </a>
@ -172,9 +172,9 @@ onMounted(() => {
</div> </div>
</div> </div>
<!-- 空状态 --> <!-- 空状态：仅在请求完成且确实无数据时显示 -->
<div v-if="!loading && !error && newsData.length === 0" class="text-center py-12"> <div v-if="!loading && !error && newsData.length === 0" class="text-center py-12">
<div class="text-gray-600 text-lg">暂无新闻数据</div> <div class="text-gray-600 text-lg">暂无文章</div>
<div class="py-12"/> <div class="py-12"/>
</div> </div>
@ -182,7 +182,7 @@ onMounted(() => {
<div v-if="!loading && !error && newsData.length > 0" class="text-center mt-0 mb-4"> <div v-if="!loading && !error && newsData.length > 0" class="text-center mt-0 mb-4">
<a <a
href="/article" href="/article"
class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white text-base font-medium rounded-lg transition-all duration-150 ease-in-out no-underline hover:shadow-lg" class="inline-block px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white text-base font-medium rounded-lg transition-all duration-150 ease-in-out no-underline hover:shadow-lg"
> >
查看全部文章 查看全部文章
</a> </a>

5
app/pages/article/index.vue
View File

@ -10,7 +10,7 @@ const code = computed(() => route.query.code as string | undefined)
// 响应式数据 // 响应式数据
const articles = ref<Article[]>([]) const articles = ref<Article[]>([])
const loading = ref(false) const loading = ref(true)
const error = ref('') const error = ref('')
const page = ref(1) const page = ref(1)
const pageSize = ref(5) const pageSize = ref(5)
@ -108,7 +108,7 @@ onMounted(() => {
<!-- 错误状态 --> <!-- 错误状态 -->
<div v-else-if="error" class="text-center py-20"> <div v-else-if="error" class="text-center py-20">
<div class="text-red-600 text-lg mb-6">{{ error }}</div> <div class="text-error-600 text-lg mb-6">{{ error }}</div>
<UButton @click="fetchArticles" color="primary"> <UButton @click="fetchArticles" color="primary">
重新加载 重新加载
</UButton> </UButton>
@ -133,7 +133,6 @@ onMounted(() => {
spotlight-color="primary" spotlight-color="primary"
highlight highlight
highlight-color="primary" highlight-color="primary"
> >
<!-- 默认图片占位 --> <!-- 默认图片占位 -->
<div class="object-cover aspect-[4/3] w-full bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center rounded-lg"> <div class="object-cover aspect-[4/3] w-full bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center rounded-lg">