mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 17:30:42 +08:00
小莫唐尼
62b604644c
- 新增本地收藏store与工具函数，支持文章/瞬间收藏持久化 - 重构插件可用性检查hook，统一管理依赖插件状态 - 替换旧数据加载hook为新的状态管理方案 - 优化首页布局与加载逻辑，调整公告组件样式 - 为瞬间详情页添加点赞、评论与收藏功能 - 新增文本处理工具，支持HTML/Markdown转纯文本与摘要截断 - 修复评论弹窗适配瞬间类型的参数问题
101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { getNotices } from '@/api/uni-halo'
|
|
import type { INoticeListVo } from '@/api/types/uni-halo'
|
|
|
|
/** 轮播展示条数上限(垂直循环) */
|
|
const MAX_SHOW = 6
|
|
|
|
const list = ref<INoticeListVo[]>([])
|
|
const showList = computed(() => list.value.slice(0, MAX_SHOW))
|
|
|
|
async function fetchNotices() {
|
|
try {
|
|
const res = await getNotices({ page: 1, size: MAX_SHOW })
|
|
list.value = res.data?.items || []
|
|
}
|
|
catch (err) {
|
|
console.error('首页公告获取失败', err)
|
|
list.value = []
|
|
}
|
|
}
|
|
|
|
/** 点击单条公告标题 → 详情页 */
|
|
function handleTap(item: INoticeListVo) {
|
|
if (!item.name)
|
|
return
|
|
uni.navigateTo({ url: `/pages-blog/notice/detail?name=${item.name}` })
|
|
}
|
|
|
|
/** 点击「公告/更多」→ 公告列表页 */
|
|
function handleGoList() {
|
|
uni.navigateTo({ url: '/pages-blog/notice/notice' })
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchNotices()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
v-if="showList.length > 0"
|
|
class="uh-global-card-glass box-border mx-3 mt-3 mb-2 flex items-center rounded-xl px-3"
|
|
>
|
|
<!-- 左侧公告入口 -->
|
|
<view class="flex shrink-0 items-center gap-1 py-2 pr-3" @click="handleGoList">
|
|
<text class="text-sm">
|
|
📢
|
|
</text>
|
|
<text class="text-xs font-bold text-red-400">
|
|
公告
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 标题轮播(仅一条时静态展示) -->
|
|
<view class="h-[60rpx] min-w-0 flex-1 overflow-hidden">
|
|
<swiper
|
|
v-if="showList.length > 1"
|
|
class="h-full w-full"
|
|
vertical
|
|
circular
|
|
autoplay
|
|
:interval="3500"
|
|
:duration="400"
|
|
>
|
|
<swiper-item
|
|
v-for="(item, index) in showList"
|
|
:key="item.name || index"
|
|
class="h-full w-full"
|
|
>
|
|
<view
|
|
class="flex h-full w-full items-center truncate text-xs text-gray-500"
|
|
@click="handleTap(item)"
|
|
>
|
|
{{ item.title }}
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view
|
|
v-else
|
|
class="flex h-full w-full items-center truncate text-[24rpx] text-[#555]"
|
|
@click="handleTap(showList[0])"
|
|
>
|
|
{{ showList[0]?.title }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧更多入口 -->
|
|
<view class="flex shrink-0 items-center gap-0.5 py-2 pl-2" @click="handleGoList">
|
|
<text class="text-[22rpx] text-[#bbb]">
|
|
更多
|
|
</text>
|
|
<wd-icon name="arrow-right" size="12px" color="#bbb" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
/* 布局由 UnoCSS 原子类实现 */
|
|
</style>
|