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

refactor: 优化多处组件样式与页面逻辑

Browse Source 
1. 重构评论弹窗圆角样式与玻璃弹窗内部样式
2. 更新首页通知入口文案与样式
3. 调整tabbar图标尺寸与样式
4. 优化回到顶部组件布局
5. 重构公告列表页与详情页逻辑，添加加载延迟与数据状态管理
This commit is contained in:
小莫唐尼
2026-09-08 14:13:42 +08:00
parent dbe70e3b49
commit 7b79a2c5a3
8 changed files with 255 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/uh-comment-modal/uh-comment-modal.vue
+1 -1
View File
@@ -265,7 +265,7 @@
</script> </script>
<template> <template>
<uh-glass-popup v-model="isShow" position="bottom" custom-class="!border rounded-lt-2xl rounded-rt-2xl" <uh-glass-popup v-model="isShow" position="bottom" custom-class="!border rounded-2xl"
:z-index="100" @close="handleOnChange(false)"> :z-index="100" @close="handleOnChange(false)">
<view class="box-border p-4"> <view class="box-border p-4">
<view <view
src/components/uh-glass-popup/uh-glass-popup.vue
+7 -2
View File
@@ -50,8 +50,7 @@
const emit = defineEmits<IEmits>() const emit = defineEmits<IEmits>()
const panelStyle = computed(() => { const panelStyle = computed(() => {
const radiusStyle = props.radius ? `border-radius:${props.radius};` : '' return props.customStyle
return `${radiusStyle}${props.customStyle}`
}) })
const panelClass = computed(() =>{ const panelClass = computed(() =>{
@@ -96,4 +95,10 @@
background-color: rgb(255 255 255 / 88%); background-color: rgb(255 255 255 / 88%);
} }
} }
:deep(.wd-popup--bottom){
left:24rpx;
bottom:24rpx;
right:24rpx;
}
</style> </style>
src/components/uh-home-notify/uh-home-notify.vue
+3 -5
View File
@@ -65,11 +65,9 @@
</view> </view>
<!-- 右侧更多入口 --> <!-- 右侧更多入口 -->
<view class="flex shrink-0 items-center gap-0.5 py-2 pl-2" @click="handleGoList"> <view class="box-border flex shrink-0 items-center gap-0.5 py-2 pl-2 text-gray-400" @click="handleGoList">
<text class="text-[22rpx] text-[#bbb]"> <text class="text-xs"> 全部 </text>
更多 <wd-icon name="arrow-right" size="26rpx" />
</text>
<wd-icon name="arrow-right" size="12px" color="#bbb" />
</view> </view>
</view> </view>
</template> </template>
src/components/uh-scroll-top/uh-scroll-top.vue
+6 -4
View File
@@ -22,9 +22,11 @@
</script> </script>
<template> <template>
<view v-if="visible" <view v-if="visible" class="fixed bottom-22 right-3 z-50 pb-safe">
class="uh-global-card-glass border fixed bottom-24 right-4 z-50 h-10 w-10 flex items-center justify-center rounded-full text-primary" <view
:class="props.customClass" @click="handleScrollTop"> class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full text-primary"
<wd-icon name="arrow-up" size="20px" /> :class="props.customClass" @click="handleScrollTop">
<wd-icon name="arrow-up" size="20px" />
</view>
</view> </view>
</template> </template>
src/pages-blog/notice/detail.vue
+3 -7
View File
@@ -1,15 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
/**
* 公告详情页(plugin-uni-halo 通知公告,2026-09-03 客户端接入)
* 公开 GET /notices/{name} 返回完整 Notice extension(metadata+spec,spec 内嵌
* typeDisplayName/typeColor);正文 content 为富文本 HTML,mp-html 渲染。
* 不存在/删除中返回 404 → 空态提示。UIUX 见 .docs/notice-module-client-design.md
*/
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import { getNoticeDetail } from '@/api/uni-halo' import { getNoticeDetail } from '@/api/uni-halo'
import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus' import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
import { checkImageUrl, checkIsUrl } from '@/utils/url' import { checkImageUrl, checkIsUrl } from '@/utils/url'
import { sleep } from '@/utils/common'
import { markdownConfig } from '@/config/markdown' import { markdownConfig } from '@/config/markdown'
import type { INoticeDetail } from '@/api/types/uni-halo' import type { INoticeDetail } from '@/api/types/uni-halo'
@@ -74,6 +69,7 @@
try { try {
const res = await getNoticeDetail(name.value) const res = await getNoticeDetail(name.value)
detail.value = res.data || null detail.value = res.data || null
await sleep(600)
updateLoadingStatus( updateLoadingStatus(
detail.value?.spec ? DataLoadingStatusEnum.Success : DataLoadingStatusEnum.Empty, detail.value?.spec ? DataLoadingStatusEnum.Success : DataLoadingStatusEnum.Empty,
) )
@@ -97,7 +93,7 @@
<uh-navbar default-title="公告详情" title-color="text-gray-900" /> <uh-navbar default-title="公告详情" title-color="text-gray-900" />
<!-- 加载/错误/空态(状态机) --> <!-- 加载/错误/空态(状态机) -->
<uh-data-loading v-if="loadingStatus !== 'success'" :loading-status="loadingStatus" min-height="55vh" <uh-data-loading v-if="loadingStatus !== 'success'" :loading-status="loadingStatus" min-height="75vh"
error-text="公告加载失败" empty-text="公告不存在或已下线" empty-sub-text="" @refresh="loadDetail" /> error-text="公告加载失败" empty-text="公告不存在或已下线" empty-sub-text="" @refresh="loadDetail" />
<!-- 正文 --> <!-- 正文 -->
src/pages-blog/notice/notice.vue
+230 -238
View File
@@ -1,261 +1,253 @@
<script lang="ts" setup> <script lang="ts" setup>
/** import { computed, ref } from 'vue'
* 公告中心·列表页(plugin-uni-halo 通知公告,2026-09-03 客户端接入) import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
* 公开接口 GET /notices 仅分页(脱敏不含 content);公告量小,页面一次拉取 import { getNotices } from '@/api/uni-halo'
* size=100 后本地做「类型筛选 + 排序(最新/最早/按类型分组)」,触底续拉下一页。 import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
* UIUX 见 .docs/notice-module-client-design.md import { checkImageUrl } from '@/utils/url'
*/ import { sleep } from '@/utils/common'
import { computed, ref } from 'vue' import type { INoticeListVo } from '@/api/types/uni-halo'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { getNotices } from '@/api/uni-halo'
import type { INoticeListVo } from '@/api/types/uni-halo'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '公告中心', navigationBarTitleText: '公告中心',
enablePullDownRefresh: true, navigationStyle: 'custom',
}, enablePullDownRefresh: true,
}) },
})
const PAGE_SIZE = 100 const PAGE_SIZE = 100
const loading = ref(false) /** 状态机:首屏/下拉刷新 loading、empty、error;触底加载失败仅提示,不切整页错误态 */
const allItems = ref<INoticeListVo[]>([]) const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
const page = ref(1) const allItems = ref<INoticeListVo[]>([])
const total = ref(0) const page = ref(1)
const activeType = ref('') const total = ref(0)
type SortKey = 'latest' | 'earliest' | 'group' const activeType = ref('')
const sortKey = ref<SortKey>('latest') type SortKey = 'latest' | 'earliest' | 'group'
const sortKey = ref<SortKey>('latest')
/** 请求并发锁(下拉刷新与触底加载互斥) */
const fetching = ref(false)
/** 触底加载更多底部文案(加载中/上拉加载更多/没有更多/失败提示) */
const loadMoreText = ref('')
const SORT_OPTIONS: Array<{ id: SortKey, label: string }> = [ const SORT_OPTIONS : Array<{ id : SortKey, label : string }> = [
{ id: 'latest', label: '最新在前' }, { id: 'latest', label: '最新在前' },
{ id: 'earliest', label: '最早在前' }, { id: 'earliest', label: '最早在前' },
{ id: 'group', label: '按类型分组' }, { id: 'group', label: '按类型分组' },
] ]
/* ---------------- 类型 chips(从已加载列表聚合) ---------------- */ /* ---------------- 类型 chips(从已加载列表聚合) ---------------- */
const typeOptions = computed(() => { const typeOptions = computed(() => {
const map = new Map<string, { typeName: string, typeDisplayName: string, typeColor: string }>() const map = new Map<string, { typeName : string, typeDisplayName : string, typeColor : string }>()
for (const item of allItems.value) { for (const item of allItems.value) {
const key = item.typeName || '' const key = item.typeName || ''
const display = item.typeDisplayName || '未分类' const display = item.typeDisplayName || '未分类'
if (!map.has(key)) { if (!map.has(key)) {
map.set(key, { typeName: key, typeDisplayName: display, typeColor: item.typeColor || '' }) map.set(key, { typeName: key, typeDisplayName: display, typeColor: item.typeColor || '' })
} }
} }
return Array.from(map.values()) return Array.from(map.values())
}) })
/* ---------------- 时间与排序 ---------------- */ /* ---------------- 时间与排序 ---------------- */
function formatDate(value?: string): string { function formatDate(value ?: string) : string {
if (!value) if (!value)
return '' return ''
const date = new Date(value) const date = new Date(value)
if (Number.isNaN(date.getTime())) if (Number.isNaN(date.getTime()))
return '' return ''
const pad = (n: number) => String(n).padStart(2, '0') const pad = (n : number) => String(n).padStart(2, '0')
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
} }
function timeOf(item: INoticeListVo): number { function timeOf(item : INoticeListVo) : number {
const time = item.publishTime ? new Date(item.publishTime).getTime() : NaN const time = item.publishTime ? new Date(item.publishTime).getTime() : Number.NaN
return Number.isNaN(time) ? 0 : time return Number.isNaN(time) ? 0 : time
} }
/** 展示列表:先按类型筛选,再按排序键排序(时间倒序/正序/按类型分组) */ /** 展示列表:先按类型筛选,再按排序键排序(时间倒序/正序/按类型分组) */
const displayList = computed(() => { const displayList = computed(() => {
let list = allItems.value let list = allItems.value
if (activeType.value !== '') { if (activeType.value !== '') {
list = list.filter(item => (item.typeName || '') === activeType.value) list = list.filter(item => (item.typeName || '') === activeType.value)
} }
if (sortKey.value === 'latest') { if (sortKey.value === 'latest') {
list = [...list].sort((a, b) => timeOf(b) - timeOf(a)) list = [...list].sort((a, b) => timeOf(b) - timeOf(a))
} }
else if (sortKey.value === 'earliest') { else if (sortKey.value === 'earliest') {
list = [...list].sort((a, b) => timeOf(a) - timeOf(b)) list = [...list].sort((a, b) => timeOf(a) - timeOf(b))
} }
else { else {
// 按类型分组:未分类排最后,组内按发布时间倒序 // 按类型分组:未分类排最后,组内按发布时间倒序
const groupOrder = new Map<string, number>() const groupOrder = new Map<string, number>()
for (const item of allItems.value) { for (const item of allItems.value) {
const key = item.typeName || '' const key = item.typeName || ''
if (!groupOrder.has(key)) { if (!groupOrder.has(key)) {
groupOrder.set(key, groupOrder.size) groupOrder.set(key, groupOrder.size)
} }
} }
list = [...list].sort((a, b) => { list = [...list].sort((a, b) => {
const ka = a.typeName || '' const ka = a.typeName || ''
const kb = b.typeName || '' const kb = b.typeName || ''
const ga = groupOrder.get(ka) ?? Number.MAX_SAFE_INTEGER const ga = groupOrder.get(ka) ?? Number.MAX_SAFE_INTEGER
const gb = groupOrder.get(kb) ?? Number.MAX_SAFE_INTEGER const gb = groupOrder.get(kb) ?? Number.MAX_SAFE_INTEGER
if (ga !== gb) if (ga !== gb)
return ga - gb return ga - gb
return timeOf(b) - timeOf(a) return timeOf(b) - timeOf(a)
}) })
} }
return list return list
}) })
/* ---------------- 数据加载 ---------------- */ /* ---------------- 数据加载(状态机:loading/empty/error/success) ---------------- */
async function loadNotices(reset: boolean) { async function loadNotices(reset : boolean) {
if (loading.value) if (fetching.value)
return return
loading.value = true fetching.value = true
try { if (reset) {
const target = reset ? 1 : page.value + 1 updateLoadingStatus(DataLoadingStatusEnum.Loading)
const res = await getNotices({ page: target, size: PAGE_SIZE }) loadMoreText.value = ''
const body = res.data }
const items = body?.items || [] else {
if (reset) { loadMoreText.value = '加载中...'
allItems.value = items }
page.value = 1 try {
} const target = reset ? 1 : page.value + 1
else { const res = await getNotices({ page: target, size: PAGE_SIZE })
allItems.value = [...allItems.value, ...items] const body = res.data
page.value = target const items = body?.items || []
} if (reset) {
total.value = body?.total ?? allItems.value.length allItems.value = items
} page.value = 1
catch (err) { }
console.error('公告列表加载失败', err) else {
uni.showToast({ icon: 'none', title: '公告加载失败' }) allItems.value = [...allItems.value, ...items]
} page.value = target
finally { }
loading.value = false total.value = body?.total ?? allItems.value.length
} loadMoreText.value = allItems.value.length >= total.value ? '呜呜，没有更多数据啦~' : '上拉加载更多'
} await sleep(600)
updateLoadingStatus(
allItems.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success,
)
}
catch (err) {
console.error('公告列表加载失败', err)
if (reset) {
updateLoadingStatus(DataLoadingStatusEnum.Error)
}
else {
// 触底加载失败:保留已加载列表,仅底部提示,避免整页切错误态
loadMoreText.value = '加载失败，请下拉刷新！'
}
}
finally {
setTimeout(() => {
fetching.value = false
uni.stopPullDownRefresh()
}, 500)
}
}
function loadMore() { function loadMore() {
if (loading.value || allItems.value.length >= total.value) if (fetching.value || allItems.value.length >= total.value) { return }
return loadNotices(false)
loadNotices(false) }
}
onLoad(() => { onLoad(() => {
loadNotices(true) loadNotices(true)
}) })
onReachBottom(() => { onReachBottom(() => {
loadMore() loadMore()
}) })
onPullDownRefresh(async () => { onPullDownRefresh(() => {
await loadNotices(true) if (fetching.value) {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}) return
}
loadNotices(true)
})
/* ---------------- 跳转 ---------------- */ /* ---------------- 跳转 ---------------- */
function handleToDetail(item: INoticeListVo) { function handleToDetail(item : INoticeListVo) {
if (!item.name) if (!item.name) { return }
return uni.navigateTo({ url: `/pages-blog/notice/detail?name=${item.name}` })
uni.navigateTo({ url: `/pages-blog/notice/detail?name=${item.name}` }) }
}
</script> </script>
<template> <template>
<view class="notice-page min-h-screen w-screen bg-[#f7f8fa]"> <view class="app-page min-h-screen w-screen flex flex-col bg-page">
<!-- 类型筛选(横滑 chips) --> <!-- 自定义导航 -->
<scroll-view scroll-x class="type-bar sticky top-0 z-10 w-full bg-white px-3 py-2" :show-scrollbar="false"> <uh-navbar default-title="公告中心" title-color="text-gray-900" />
<view class="flex items-center gap-2 whitespace-nowrap">
<view
class="rounded-full px-4 py-1.5 text-[24rpx]"
:class="activeType === '' ? 'bg-[#f83856] text-white' : 'bg-[#f0f0f0] text-[#666]'"
@click="activeType = ''"
>
全部
</view>
<view
v-for="type in typeOptions"
:key="type.typeName || '__none__'"
class="flex items-center gap-1 rounded-full px-4 py-1.5 text-[24rpx]"
:class="activeType === type.typeName ? 'bg-[#f83856] text-white' : 'bg-[#f0f0f0] text-[#666]'"
@click="activeType = activeType === type.typeName ? '' : type.typeName"
>
<view v-if="type.typeColor" class="h-2 w-2 rounded-full" :style="{ backgroundColor: type.typeColor }" />
<text>{{ type.typeDisplayName }}</text>
</view>
</view>
</scroll-view>
<!-- 排序 --> <wd-sticky>
<view class="sort-bar flex items-center gap-2 px-4 py-2"> <scroll-view scroll-x class="w-full whitespace-nowrap" :show-scrollbar="false">
<view <view class="flex gap-2 px-3 pb-1 pt-2">
v-for="opt in SORT_OPTIONS" <view class="uh-global-card-glass uh-shadow-xs inline-block border rounded-2xl px-4 py-1.5 text-sm"
:key="opt.id" :class="activeType === '' ? 'bg-primary font-bold' : 'text-gray-500'" @click="activeType = ''">
class="rounded-full px-3 py-1 text-[22rpx]" 全部
:class="sortKey === opt.id ? 'bg-[#fdeef1] text-[#f83856]' : 'text-[#999]'" </view>
@click="sortKey = opt.id" <view v-for="(type) in typeOptions" :key="type.typeName || '__none__'"
> class="uh-global-card-glass uh-shadow-xs inline-flex items-center gap-1 border rounded-2xl px-4 py-1.5 text-sm"
{{ opt.label }} :class="activeType === type.typeName ? 'bg-primary font-bold' : 'text-gray-500'"
</view> @click="activeType = activeType === type.typeName ? '' : type.typeName">
</view> <view v-if="type.typeColor" class="shrink-0 h-2 w-2 rounded-full"
:style="{ backgroundColor: type.typeColor }" />
<text class="shrink-0">{{ type.typeDisplayName }}</text>
</view>
</view>
</scroll-view>
</wd-sticky>
<!-- 列表 --> <view class="flex items-center gap-2 px-3 py-2">
<view v-if="displayList.length > 0" class="px-3 pb-6"> <view v-for="opt in SORT_OPTIONS" :key="opt.id"
<view class="uh-global-card-glass uh-shadow-xs inline-block border rounded-2xl px-4 py-1 text-xs"
v-for="item in displayList" :class="sortKey === opt.id ? 'bg-primary font-bold' : 'text-gray-500'" @click="sortKey = opt.id">
:key="item.name" {{ opt.label }}
class="mb-3 flex overflow-hidden rounded-xl bg-white p-4" </view>
@click="handleToDetail(item)" </view>
>
<image
v-if="item.cover"
class="mr-3 h-[140rpx] w-[180rpx] shrink-0 rounded-lg"
:src="item.cover"
mode="aspectFill"
/>
<view class="min-w-0 flex-1">
<view class="text-[28rpx] font-bold leading-snug text-[#333] line-clamp-2">
{{ item.title }}
</view>
<view v-if="item.summary" class="mt-1 text-[24rpx] leading-relaxed text-[#888] line-clamp-2">
{{ item.summary }}
</view>
<view class="mt-2 flex items-center gap-2">
<view
v-if="item.typeDisplayName"
class="rounded px-1.5 py-0.5 text-[20rpx]"
:style="{
color: item.typeColor || '#f83856',
backgroundColor: item.typeColor ? `${item.typeColor}1a` : '#fdeef1',
}"
>
{{ item.typeDisplayName }}
</view>
<text class="text-[22rpx] text-[#bbb]">
{{ formatDate(item.publishTime) }}
</text>
</view>
</view>
</view>
<view v-if="loading" class="py-6 text-center text-[24rpx] text-[#bbb]"> <uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
加载中... empty-text="暂无公告" empty-sub-text="" @refresh="loadNotices(true)" />
</view>
<view v-else-if="allItems.length >= total.value" class="py-6 text-center text-[24rpx] text-[#bbb]">
没有更多了
</view>
</view>
<!-- 空态 --> <view v-else class="box-border pt-4">
<view v-else class="flex flex-col items-center justify-center py-32"> <template v-if="displayList.length > 0">
<text class="text-[40rpx]">📢</text> <view class="box-border flex flex-col gap-3 px-3">
<text class="mt-4 text-[26rpx] text-[#999]"> <view v-for="item in displayList" :key="item.name"
{{ loading ? '加载中...' : '暂无公告' }} class="box-border uh-global-card-glass uh-shadow-xs flex overflow-hidden rounded-xl p-3"
</text> @click="handleToDetail(item)">
</view> <image v-if="item.cover" class="mr-3 h-18 w-24 shrink-0 rounded-lg"
</view> :src="checkImageUrl(item.cover)" mode="aspectFill" />
</template> <view class="min-w-0 flex-1 flex flex-col justify-between">
<view class="truncate text-sm text-gray-900 font-bold leading-snug">
{{ item.title }}
</view>
<view v-if="item.summary" class="truncate mt-1 text-[24rpx] text-gray-500 leading-relaxed">
{{ item.summary }}
</view>
<view class="mt-2 flex items-center gap-2">
<view v-if="item.typeDisplayName" class="rounded px-1.5 py-0.5 text-[20rpx]" :style="{
color: item.typeColor || '#f83856',
backgroundColor: item.typeColor ? `${item.typeColor}1a` : '#fdeef1',
}">
{{ item.typeDisplayName }}
</view>
<text class="text-[22rpx] text-gray-500">
{{ formatDate(item.publishTime) }}
</text>
</view>
</view>
</view>
<view class="load-text py-5 text-center text-[24rpx] text-gray-500">
{{ loadMoreText }}
</view>
</view>
</template>
<style scoped lang="scss"> <!-- 类型筛选后无匹配 -->
.type-bar { <uh-data-loading v-else :loading-status="DataLoadingStatusEnum.Empty"></uh-data-loading>
white-space: nowrap; </view>
} </view>
</template>
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
src/tabbar/TabbarItem.vue
+1 -1
View File
@@ -29,7 +29,7 @@ function isActive(index: number) {
<!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) --> <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
<!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) --> <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
<!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) --> <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
<text class="text-primary"><wd-icon :name="item.icon" size="52rpx" /></text> <text class="text-primary"><wd-icon :name="item.icon" size="50rpx" /></text>
</template> </template>
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"> <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
<view class="flex-1" :class="[item.icon, isBulge ? 'text-80px' : 'text-20px']" /> <view class="flex-1" :class="[item.icon, isBulge ? 'text-80px' : 'text-20px']" />
src/tabbar/index.vue
+4 -4
View File
@@ -101,18 +101,18 @@
<template> <template>
<view v-if="customTabbarEnable" class="h-56px pb-safe bg-page"> <view v-if="customTabbarEnable" class="h-56px pb-safe bg-page">
<view class="border-and-fixed w-full px-2"> <view class="border-and-fixed w-full px-3">
<view class="flex box-border w-full items-center justify-between gap-x-2" @touchmove.stop.prevent> <view class="flex box-border w-full items-center justify-between gap-x-2" @touchmove.stop.prevent>
<view <view
class="flex-1 box-border uh-global-card-glass bg-white/75 border rounded-full p-1 h-52px flex items-center gap-x-1"> class="flex-1 box-border uh-global-card-glass bg-white/75 border rounded-full p-1 h-50px flex items-center gap-x-1">
<view v-for="(item, index) in noRightTabbarList" :key="index" class="text-gray-900 flex-1" <view v-for="(item, index) in noRightTabbarList" :key="index" class="text-gray-900 flex-1"
:style="{ color: getColorByIndex(index) }" @click="handleClick(index)"> :style="{ color: getColorByIndex(index) }" @click="handleClick(index)">
<TabbarItem :item="item" :index="index" class="relative" <TabbarItem :item="item" :index="index" class="relative"
:class="[isActive(index)?'uh-global-card-glass bg-white/30 border':'']" /> :class="[isActive(index)?'uh-global-card-glass bg-white/0 border':'']" />
</view> </view>
</view> </view>
<view v-if="rightButton.item" <view v-if="rightButton.item"
class="shrink-0 uh-global-card-glass border bg-white/65 rounded-full h-52px w-52px p-1 flex items-center justify-center" class="shrink-0 uh-global-card-glass border bg-white/65 rounded-full h-50px w-50px p-1 flex items-center justify-center"
@click="handleClickRightButton()"> @click="handleClickRightButton()">
<TabbarItem :item="rightButton.item" :index="rightButton.index" :is-bulge="true" /> <TabbarItem :item="rightButton.item" :index="rightButton.index" :is-bulge="true" />
</view> </view>