1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-27 04:20:43 +08:00

refactor: 项目重构适配uni-halo,拆分首页组件

1.  统一环境变量前缀为VITE_UNI_HALO_BASEURL,替换原有VITE_SERVER_BASEURL
2.  新增首页home页面,将原index页面作为启动页跳转首页
3.  新增多个业务组件:模板组件、个人资料卡片、分类推荐卡片、文章卡片
4.  新增图片处理工具、数字格式化工具、URL验证工具
5.  重构tabbar配置,修正首页跳转路径
6.  更新站点统计API方法命名,优化请求逻辑
This commit is contained in:
小莫唐尼
2026-06-12 15:48:58 +08:00
parent f105dedc23
commit d8ad0772bf
23 changed files with 491 additions and 338 deletions
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
</script>
<template>
<view>
内容
</view>
</template>
+72
View File
@@ -0,0 +1,72 @@
<script setup lang="ts">
import { querySiteStats } from '@/api/halo-base/stats'
import { formatNumberUnit } from '@/utils/base/digital'
import type { SiteStatsVo } from '@halo-dev/api-client'
const { loading, error, data, run } = useRequest<SiteStatsVo>(querySiteStats, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
const stats = computed(() => {
return {
post: formatNumberUnit(data.value?.post || 0),
comment: formatNumberUnit(data.value?.comment || 0),
upvote: formatNumberUnit(data.value?.upvote || 0),
visit: formatNumberUnit(data.value?.visit || 0),
category: formatNumberUnit(data.value?.category || 0),
}
})
onMounted(() => {
run()
})
</script>
<template>
<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"
src="https://www.xiaoxiaomo.cn/logo.jpg" mode="scaleToFill"
/>
<view class="h-full flex flex-1 flex-col justify-between gap-y-1">
<view class="text-sm text-gray-900 font-bold">
小莫唐尼
</view>
<view class="line-clamp-1 text-xs text-gray-500">
一个爱凑热闹喜欢捣鼓前端的码农
</view>
</view>
<view class="h-full shrink-0 rounded-3xl bg-[#1A1A1A] px-4 py-2 text-xs text-white">
联系我
</view>
</view>
<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">{{ stats.post }}</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">{{ stats.visit }}</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">{{ stats.category }}</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">{{ stats.comment }}</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">{{ stats.upvote }}</text>
<text class="text-xs text-gray-600">点赞</text>
</view>
</view>
</view>
</template>
<style scoped>
.uh-shadow-xs {
box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.035);
}
</style>
@@ -0,0 +1,76 @@
<script setup lang="ts">
import { cover } from '@/utils/imageHelper'
import { queryCategories } from '@/api/halo-base/category'
import type { CategoryV1alpha1PublicApiQueryCategoriesRequest, CategoryVoList } from '@halo-dev/api-client'
const { loading, error, data, run } = useRequest<CategoryVoList, CategoryV1alpha1PublicApiQueryCategoriesRequest>(queryCategories, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
const isVisible = computed(() => {
return !loading.value && !error.value && data.value?.items.length > 0
})
const firstCateItem = computed(() => {
const item = data.value?.items[0]
return {
name: item.spec.displayName,
count: item.status.postCount,
cover: cover(item.spec.cover),
}
})
const otherCateItems = computed(() => {
const items = data.value?.items.slice(1) || []
return items.map(item => ({
name: item.spec.displayName,
count: item.status.postCount,
cover: cover(item.spec.cover),
}))
})
onMounted(() => {
console.log('分类推荐 onMounted')
run({
page: 1,
size: 3,
})
})
</script>
<template>
<view v-if="isVisible" 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="firstCateItem.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">{{ firstCateItem.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="text-[12px] text-white">{{ firstCateItem.count }}</text>
</view>
</view>
<view class="h-full flex flex-1 flex-col gap-2">
<view
v-for="cate in otherCateItems" :key="cate.name"
class="relative box-border flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white"
>
<image :src="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="text-[12px] text-white">{{ cate.count }}</text>
</view>
</view>
</view>
</view>
</view>
</template>