cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-27 12:30:41 +08:00
Code Issues Activity

refactor: 重构项目并新增多项功能

Browse Source 
1. 新增全局配置管理store，拉取uni-halo插件配置
2. 新增post-card文章卡片组件，简化首页文章列表代码
3. 优化tabbar样式与切换逻辑，调整图标库类型
4. 新增随机图片工具函数，重构首页横幅与分类模块
5. 调整openapi生成配置，新增工具类与样式类
6. 移除废弃的tabbar关于页面配置项
This commit is contained in:
小莫唐尼
2026-06-12 14:32:21 +08:00
parent c847dfb1c4
commit f105dedc23
11 changed files with 293 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.vue
+81 -49
View File
@@ -4,10 +4,11 @@ import { queryPostByName, queryPosts } from '@/api/halo-base/post'
import { completeUrl } from '@/utils/url'
import { timeFrom } from '@/utils/base/timeFrom'
import { useListData } from '@/hooks/useListData'
import { randomImageUrl } from '@/utils/randomResources'
import { getRandomUrl, randomImageUrl } from '@/utils/randomResources'
import type { ListedPostVo, ListedPostVoList, PostV1alpha1PublicApiQueryPostByNameRequest, PostV1alpha1PublicApiQueryPostsRequest, PostVo } from '@halo-dev/api-client'
import PostCard from '@/components/post-card/post-card.vue'
defineOptions({
name: 'Home',
})
@@ -50,6 +51,24 @@ const banner = reactive({
],
})
const categories = reactive([
{
name: '全栈开发',
count: 120,
cover: getRandomUrl(),
},
{
name: 'Docker',
count: 0,
cover: getRandomUrl(),
},
{
name: 'Vue技术',
count: 99,
cover: getRandomUrl(),
},
])
const quickList = reactive([
{
pagePath: 'pages/moments/moments',
@@ -115,6 +134,10 @@ onLoad(() => {
refresh()
runSingle({ name: '019eb1ca-e37c-7729-97af-e0b658aeef0f' })
})
onPageScroll(({ scrollTop }) => {
})
</script>
<template>
@@ -132,22 +155,26 @@ onLoad(() => {
<view>
<wd-swiper
v-model:current="banner.current" :list="banner.items" indicator-position="right" autoplay
:height="290"
:height="340"
>
<template #default="{ index }">
<view class="relative h-full w-full">
<image class="h-full w-full object-cover" :src="banner.list[index].value" />
<view class="absolute bottom-0 left-0 right-0 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-4">
<view class="w-5/6 flex flex-col gap-y-2">
<image class="h-full w-full" mode="aspectFill" :src="banner.list[index].value" />
<!-- 渐变遮罩 from-black/0 via-black/50 to-black/90 bg-gradient-to-b -->
<view class="absolute bottom-0 left-0 right-0 p-4 pb-16">
<view class="relative z-20 w-5/6 flex flex-col gap-y-2">
<text class="text-xs text-white/90">{{ banner.list[index].time }}</text>
<text class="line-clamp-1 text-xl text-white font-bold">{{ banner.list[index].title }}</text>
<text class="line-clamp-1 text-xs text-white/95">{{ banner.list[index].desc }}</text>
</view>
<view
class="absolute bottom-0 left-0 right-0 z-10 h-3/5 from-black/0 via-page/50 to-page bg-gradient-to-b"
/>
</view>
</view>
</template>
<template #indicator="{ current, total }">
<view class="absolute bottom-4 right-4 text-xs text-white">
<view class="absolute bottom-16 right-4 text-xs text-white">
{{ current + 1 }}/{{ total }}
</view>
</template>
@@ -155,8 +182,8 @@ onLoad(() => {
</view>
<!-- 作者卡片 -->
<view class="mt-4 box-border px-4">
<view class="box-border flex flex-col items-center gap-y-2 rounded-2xl bg-white p-4 shadow-sm">
<view class="relative z-10 box-border px-4 -mt-12">
<view class="uh-shadow-xs box-border flex flex-col items-center gap-y-2 rounded-2xl bg-white p-4">
<view class="w-full flex items-center justify-between gap-x-2">
<image
class="uh-shadow-xs h-11 w-11 shrink-0 border-2 border-white rounded-full border-solid"
@@ -174,11 +201,11 @@ onLoad(() => {
联系我
</view>
</view>
<view class="my-1 h-1px w-full bg-gray-100" />
<view class="grid grid-cols-4 w-full gap-x-4">
<view class="my-1 h-1px w-full bg-gray-50" />
<view class="grid grid-cols-5 w-full gap-x-4">
<view class="flex flex-col items-center justify-center gap-y-0.5">
<text class="text-sm text-gray-900 font-bold">128</text>
<text class="text-xs text-gray-600">文章</text>
<text class="text-xs text-gray-600">内容</text>
</view>
<view class="flex flex-col items-center justify-center gap-y-0.5">
<text class="text-sm text-gray-900 font-bold">999</text>
@@ -186,24 +213,28 @@ onLoad(() => {
</view>
<view class="flex flex-col items-center justify-center gap-y-0.5">
<text class="text-sm text-gray-900 font-bold">1.2k</text>
<text class="text-xs text-gray-600">获赞</text>
<text class="text-xs text-gray-600">分类</text>
</view>
<view class="flex flex-col items-center justify-center gap-y-0.5">
<text class="text-sm text-gray-900 font-bold">128k</text>
<text class="text-xs text-gray-600">收藏</text>
<text class="text-xs text-gray-600">评论</text>
</view>
<view class="flex flex-col items-center justify-center gap-y-0.5">
<text class="text-sm text-gray-900 font-bold">10.5k</text>
<text class="text-xs text-gray-600">点赞</text>
</view>
</view>
</view>
</view>
<!-- 金刚区 -->
<view class="mt-4 px-4">
<view class="mt-6 px-4">
<view class="flex items-center justify-around gap-x-4">
<view
v-for="item in quickList" :key="item.pagePath"
class="w-1/5 flex flex-col items-center justify-center gap-y-1"
>
<view class="flex items-center justify-center rounded-3xl bg-white p-3.5 shadow-sm">
<view class="uh-shadow-xs flex items-center justify-center rounded-2xl bg-white p-3.5">
<wd-icon :name="item.icon" :size="24" />
</view>
<text class="text-xs text-gray-800">{{ item.text }}</text>
@@ -211,12 +242,39 @@ onLoad(() => {
</view>
</view>
<!-- 分类推荐 -->
<!-- 分类推荐（磁贴） -->
<view class="mt-6 box-border px-4">
<view class="mb-4 box-border flex items-center justify-between">
<text class="text-sm text-gray-900 font-bold">热门分类</text>
</view>
<view class="box-border h-36 flex items-center gap-2 overflow-hidden">
<view class="relative box-border h-full flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white">
<image :src="completeUrl(categories[0].cover)" mode="heightFix" class="h-full w-full rounded-xl" />
<view class="absolute bottom-0 left-0 right-0 z-10 box-border box-border w-full flex flex-col gap-y-1 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-2">
<text class="line-clamp-1 text-xs text-white font-bold">{{ categories[0].name }}</text>
</view>
<view class="absolute right-2 top-2 z-10 box-border rounded-md bg-black/20 px-1.5 py-0.5">
<text class="line-clamp-1 text-[12px] text-white">{{ categories[0].count }}</text>
</view>
</view>
<view class="h-full flex flex-1 flex-col gap-2">
<view v-for="cate in categories.slice(1)" :key="cate.name" class="relative box-border flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white">
<image :src="completeUrl(cate.cover)" mode="aspectFill" class="w-full rounded-xl" />
<view class="absolute bottom-0 left-0 right-0 z-10 box-border box-border w-full flex flex-col gap-y-1 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-2">
<text class="line-clamp-1 text-xs text-white font-bold">{{ cate.name }}</text>
</view>
<view class="absolute right-2 top-2 z-10 box-border rounded-md bg-black/20 px-1.5 py-0.5">
<text class="line-clamp-1 text-[12px] text-white">{{ cate.count }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 瞬间推荐 -->
<!-- 置顶文章 -->
<view v-if="dataSingle" class="mt-4 box-border px-4">
<view v-if="dataSingle && false" class="mt-4 box-border px-4">
<view class="mb-2 box-border flex items-center justify-between">
<text class="text-lg text-gray-900 font-bold">置顶文章</text>
</view>
@@ -230,42 +288,16 @@ onLoad(() => {
</view>
<!-- 最新文章 -->
<view class="mt-4">
<view class="mb-2 box-border flex items-center justify-between px-4">
<text class="text-lg text-gray-900 font-bold">最新文章</text>
<view class="mt-4 mt-4 box-border px-4">
<view class="mb-4 box-border flex items-center justify-between">
<text class="text-sm text-gray-900 font-bold">最新文章</text>
</view>
<view class="box-border w-full flex flex-col items-center justify-center gap-y-4 overflow-hidden px-4">
<view class="box-border w-full flex flex-col items-center justify-center gap-y-4 overflow-hidden">
<view v-if="error && postList.length > 0" class="un-shadow-xs w-full rounded-2xl bg-white py-12">
<wd-empty :icon-size="60" icon="no-result" tip="暂无数据" />
</view>
<template v-else>
<view
v-for="post in postList" :key="post.metadata.name"
class="uh-shadow-xs flex justify-center overflow-hidden rounded-2xl bg-white p-4"
>
<image :src="completeUrl(post.spec.cover)" mode="aspectFill" class="h-22 w-22 shrink-0 rounded-lg" />
<view class="box-border flex-1 pl-4">
<view class="h-full flex flex-1 flex-col justify-between">
<view class="line-clamp-1 text-sm text-gray-900 font-bold">
{{ post.spec.title }}
</view>
<view class="line-clamp-2 text-xs text-gray-500">
{{ post.status.excerpt }}
</view>
<view class="w-full flex items-center gap-x-4">
<view class="text-xs text-gray-600">
{{ timeFrom(post.spec.publishTime) }}
</view>
<view class="text-xs text-gray-600">
·
</view>
<view class="text-xs text-gray-600">
{{ post.categories.map(c => c.spec.displayName).join('·') }}
</view>
</view>
</view>
</view>
</view>
<post-card v-for="post in postList" :key="post.metadata.name" :post="post" type="topCover" />
</template>
</view>
</view>