cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-26 20:10:51 +08:00
Code Issues Activity

feat: 新增友链页面，添加友链tabbar项并调整配置

Browse Source 
1. 新增友链页面组件，实现分组展示、滚动导航功能
2. 多语言中添加友链相关翻译
3. 修改默认首页跳转至友链页
4. 调整API请求配置，添加halo请求标记
5. 优化剪贴板提示、布局样式和工具函数
6. 更新开发环境请求地址
This commit is contained in:
小莫唐尼
2026-06-12 21:07:16 +08:00
parent d8ad0772bf
commit a012a57cf0
13 changed files with 330 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
env/.env.development
Vendored
+2 -1
View File
@@ -6,4 +6,5 @@ VITE_DELETE_CONSOLE=false
VITE_SHOW_SOURCEMAP=false
# development mode 后台请求地址
VITE_UNI_HALO_BASEURL='https://www.yijunzhao.cn'
# VITE_UNI_HALO_BASEURL='https://www.yijunzhao.cn'
VITE_UNI_HALO_BASEURL='https://www.xhhao.com'
src/api/halo-plugin/link.ts
+8 -2
View File
@@ -6,7 +6,10 @@ import { http } from '@/http/alova'
* @returns 获取链接分分组组列表响应参数
*/
export function queryLinkGroups(params: any) {
return http.Get<any>(`/apis/api.link.halo.run/v1alpha1/linkgroups`, { params })
return http.Get<any>(`/apis/api.link.halo.run/v1alpha1/linkgroups`, {
params,
meta: { isHalo: true },
})
}
/**
@@ -15,5 +18,8 @@ export function queryLinkGroups(params: any) {
* @returns 获取链接列表响应参数
*/
export function queryLinks(params: any) {
return http.Get<any>(`/apis/api.link.halo.run/v1alpha1/links`, { params })
return http.Get<any>(`/apis/api.link.halo.run/v1alpha1/links`, {
params,
meta: { isHalo: true },
})
}
src/components/uh-tabbar-page-placeholder/uh-tabbar-page-placeholder.vue
+6
View File
@@ -0,0 +1,6 @@
<template>
<view class="w-full pb-safe">
<!-- 60px -->
<view class="h-62px w-full" />
</view>
</template>
src/hooks/useListData.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import type { Ref } from 'vue'
interface IPaginationParams {
export interface IPaginationParams {
page: number
size: number
}
src/locale/en.json
+1
View File
@@ -2,6 +2,7 @@
"tabbar.home": "Home",
"tabbar.gallery": "Gallery",
"tabbar.moments": "Moments",
"tabbar.links": "Links",
"tabbar.about": "About",
"tabbar.me": "Me",
"tabbar.i18n": "I18n",
src/locale/zh-Hans.json
+1
View File
@@ -3,6 +3,7 @@
"tabbar.gallery": "相册",
"tabbar.moments": "瞬间",
"tabbar.about": "关于",
"tabbar.links": "友链",
"tabbar.me": "我的",
"tabbar.i18n": "语言",
"i18n.title": "中文标题",
src/pages/home/home.vue
+2 -2
View File
@@ -122,7 +122,7 @@ onPageScroll(() => { })
</script>
<template>
<view class="min-h-screen bg-page pb-safe">
<view class="min-h-screen bg-page2">
<!-- 顶部banner -->
<view v-if="false" class="relative h-72 w-full">
<image class="h-72 w-full object-cover" :src="exampleImageUrls.banner" />
@@ -217,7 +217,7 @@ onPageScroll(() => { })
</view>
<!-- 底部导航占位 -->
<view class="h-60px w-full" />
<uh-tabbar-page-placeholder />
</view>
</template>
src/pages/index/index.vue
+2 -1
View File
@@ -14,7 +14,8 @@ definePage({
onLoad(() => {
console.log('index onLoad')
// 默认跳转首页
uni.switchTab({ url: '/pages/home/home' })
// uni.switchTab({ url: '/pages/home/home' })
uni.switchTab({ url: '/pages/links/links' })
})
</script>
src/pages/links/links.vue
+281
View File
@@ -0,0 +1,281 @@
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import useRequest from '@/hooks/useRequest'
import { queryLinkGroups, queryLinks } from '@/api/halo-plugin/link'
import { cover } from '@/utils/imageHelper'
import { copy } from '@/utils/base/clipboard'
import { getRect } from '@/utils/base/getRect'
import { useListData } from '@/hooks/useListData'
import type { IPaginationParams } from '@/hooks/useListData'
import { debounce } from '@/utils/base/debounce'
defineOptions({
name: 'Links',
})
definePage({
style: {
navigationBarTitleText: '友情链接',
navigationBarBackgroundColor: '#ffffff',
enablePullDownRefresh: true,
},
})
const { loading: loadingGroups, error: errorGroups, data: dataGroups, run: runGroups } = useRequest<any>(queryLinkGroups, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
const { loading, error, data, run } = useRequest<any, IPaginationParams>(queryLinks, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
const { list: links, refresh } = useListData<any>({
params: {
page: 1,
size: 0,
},
loading: toRef(loading),
onPullDownRefresh: async (params, updateData) => {
await run({ ...params })
updateData({
error: error.value,
hasNext: data.value?.hasNext,
items: data.value?.items ?? [],
})
},
onReachBottom: async (params, updateData) => {
await run({ ...params })
updateData({
error: error.value,
hasNext: data.value?.hasNext,
items: data.value?.items ?? [],
})
},
})
// 分组列表,处理排序,分组显示
interface ILinkGroupData {
name: string
index: string
priority: number
links: any[]
}
const linkGroups = computed(() => {
const groupedLinks = links.value.reduce((acc, link) => {
const groupName = link.spec.groupName
const group = dataGroups.value?.find(item => item.metadata.name === groupName)
let _groupName = '未分组'
if (group) {
_groupName = group.spec.displayName
}
if (!acc[_groupName]) {
acc[_groupName] = {
name: _groupName,
index: _groupName,
priority: group?.spec.priority ?? (dataGroups.value ? dataGroups.value.length + 1 : 99),
links: [],
}
}
acc[_groupName].links.push(toRaw(link))
return acc
}, {} as Record<string, any[]>)
// // 分组还需要根据 分组中的 spec.priority 字段进行排序
return Object.values(groupedLinks)
.map((item) => {
return item
})
.sort((a: ILinkGroupData, b: ILinkGroupData) => a.priority - b.priority)
.map((item: ILinkGroupData) => {
item.links.sort((a, b) => a.spec.priority - b.spec.priority)
return item
})
})
const useBottomGroupNav = ref(false)
const allGroupRects = ref([])
const instance = getCurrentInstance()
async function getAllGroupPosition() {
await nextTick()
allGroupRects.value = []
linkGroups.value.forEach(async (item, index) => {
const groupRects = await getRect({ selector: `.group-start-${index},.group-end-${index}`, instance, all: true })
allGroupRects.value.push({
name: item.name,
index,
active: false,
startRect: groupRects[0],
endRect: groupRects[1],
})
})
}
function scrollToGroup(item: any) {
const startRect = item.startRect
if (startRect) {
uni.pageScrollTo({
scrollTop: startRect.top - 12,
duration: 300,
})
uni.showToast({
title: item.name,
icon: 'none',
duration: 600,
})
}
}
const handleActiveNavGroup = debounce((scrollTop: number) => {
allGroupRects.value.forEach((item) => {
if (scrollTop >= item.startRect.top - 24 && scrollTop <= item.endRect.top + 60) {
item.active = true
}
else {
item.active = false
}
})
}, 30)
watch(() => linkGroups.value, async (newVal) => {
if (newVal.length !== 0) {
await getAllGroupPosition()
}
})
onPageScroll(({ scrollTop }) => {
handleActiveNavGroup(scrollTop)
})
onLoad(async () => {
await runGroups()
await refresh()
})
</script>
<template>
<view class="min-h-screen w-full bg-page2">
<!-- <view>
<view>分组数据</view>
<view>{{ dataGroups }}</view>
</view> -->
<!-- 分组列表 -->
<view v-if="linkGroups.length !== 0" class="box-border w-full flex flex-col gap-y-4 overflow-hidden p-4 pb-0">
<template v-for="(item, index) in linkGroups" :key="item.name">
<view
v-if="linkGroups.length !== 1" class="flex items-center justify-between text-sm"
:class="[`group-start-${index}`]"
>
<text class="font-bold">{{ item.name }}</text>
<text class="text-xs text-gray-600"> {{ item.links.length }} 条记录 </text>
</view>
<!-- 分组卡片 -->
<view
v-for="(link, linkIndex) in item.links" :key="link.metadata.name"
class="uh-shadow-card box-border w-full flex flex-col items-center justify-center gap-y-2 overflow-hidden border-2 border-white rounded-xl border-solid bg-white p-4"
:class="[
linkIndex === item.links.length - 1 ? `group-end-${index}` : '',
]"
>
<!-- 顶部信息 -->
<view class="box-border w-full flex items-center justify-between gap-x-4">
<view
class="uh-shadow-md box-border h-11 w-11 shrink-0 overflow-hidden border-2 border-white rounded-xl border-solid bg-white"
>
<image :src="cover(link.spec.logo)" mode="aspectFill" class="h-full w-full" />
</view>
<view class="flex flex-1 flex-col gap-y-1">
<view class="line-clamp-1 text-sm text-gray-900 font-bold">
{{ link.spec.displayName }}
</view>
<view class="line-clamp-1 text-xs text-gray-400">
{{ link.spec.url }}
</view>
</view>
<view class="shrink-0">
<view
class="uh-shadow-md rounded-3xl bg-[#1A1A1A] px-4 py-2 text-xs text-white"
@click="copy(link.spec.url, true)"
>
复制
</view>
</view>
</view>
<!-- 底部信息 -->
<view class="line-clamp-2 w-full text-xs text-gray-500 leading-relaxed">
{{ link.spec.description }}
<!-- {{ '你好,我是 UNI HALO v3.0 新版本,开源免费 Halo 博客小程序，支持多端编译。' }} -->
</view>
</view>
</template>
</view>
<view v-else class="w-full flex flex-1 items-center justify-center">
<wd-empty icon="no-content" tip="暂无友链">
<template #image>
<wd-icon name="empty" color="#1A1A1A" :size="52" />
</template>
</wd-empty>
</view>
<!-- 导航 -->
<view
v-if="!useBottomGroupNav && allGroupRects.length !== 0" class="fixed right-2 top-1/2 z-50" :style="{
transform: 'translateY(-50%)',
}"
>
<view class="uh-shadow-md h-full flex flex-col items-center justify-center gap-y-1 rounded-full bg-white p-1">
<view
v-for="(item) in allGroupRects" :key="item.index"
class="flex flex-col items-center justify-center rounded-full px-1 py-1.5 text-gray-600"
:class="{ 'bg-gray-900 text-white py-1.5!': item.active }" @click="scrollToGroup(item)"
>
<text v-if="item.active" class="text-xs">
#
</text>
<text class="text-[10px] -mt-1">
{{ item.name.slice(0, 1) }}
</text>
</view>
</view>
</view>
<view
v-if="useBottomGroupNav && allGroupRects.length !== 0"
class="fixed bottom-0 left-4 right-4 z-50 box-border pb-4"
>
<view class="uh-shadow-md box-border w-full flex-1 overflow-hidden rounded-full bg-white p-2">
<scroll-view :scroll-x="true" class="uh-shadow-md w-full whitespace-nowrap rounded-full">
<view
v-for="(item) in allGroupRects" :key="item.index"
class="mr-2 inline-block border border-gray-900 rounded-2xl border-solid bg-gray-900 px-3 py-1.5 text-[11px] text-white"
@click="scrollToGroup(item.name)"
>
{{ item.name }}
</view>
</scroll-view>
</view>
<!-- 底部导航占位 -->
<uh-tabbar-page-placeholder />
</view>
<!-- 底部导航占位 -->
<view
class="w-full shrink-0" :class="{
'pb-10': useBottomGroupNav,
}"
>
<uh-tabbar-page-placeholder />
</view>
</view>
</template>
<style scoped>
.uh-shadow-xs {
box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.035);
}
.uh-shadow-md {
box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.075);
}
.uh-shadow-card {
box-shadow: 0 16rpx 60rpx rgba(0, 0, 0, 0.04);
}
</style>
src/tabbar/config.ts
+6
View File
@@ -58,6 +58,12 @@ export const customTabbarList: CustomTabBarItem[] = [
iconType: 'uiLib',
icon: 'send',
},
{
pagePath: 'pages/links/links',
text: '%tabbar.links%',
iconType: 'uiLib',
icon: 'link',
},
{
pagePath: 'pages/me/me',
text: '%tabbar.me%',
src/utils/base/clipboard.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export function copy(content: string, showToast: boolean = false) {
if (showToast) {
uni.showToast({
title: '复制成功',
icon: 'success',
icon: 'none',
})
}
},
src/utils/base/getRect.ts
+14 -5
View File
@@ -1,14 +1,23 @@
import { getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue'
interface IOptions {
/** 选择器 */
selector: string
/** 实例 */
instance?: ComponentInternalInstance
/** 是否获取所有匹配元素 */
all?: boolean
}
/**
* 获取元素的位置信息
* @param {any} selector 选择器
* @param {boolean} all 是否获取所有匹配元素
* @returns {Promise<any>} 返回一个 Promise，解析为元素的位置信息
*/
import { getCurrentInstance } from 'vue'
export function getRect(selector: any, _instance: any = null, all: boolean = false): Promise<any> {
const instance = _instance || getCurrentInstance()
export function getRect(options: IOptions): Promise<any> {
const { selector, instance = getCurrentInstance(), all = false } = options
return new Promise((resolve) => {
const query = uni.createSelectorQuery()
.in(instance?.proxy)
uno.config.ts
+5
View File
@@ -97,12 +97,17 @@ export default defineConfig({
/** 主题色，用法如: text-primary */
primary: 'var(--wot-color-theme,#0957DE)',
page: '#F8F8F8',
page2: '#F9FAFB',
},
fontSize: {
/** 提供更小号的字体，用法如：text-2xs */
'2xs': ['20rpx', '28rpx'],
'3xs': ['18rpx', '26rpx'],
},
shadow: {
xs: '0 0 24px rgba(0, 0, 0, 0.075)',
card: '0 16rpx 60rpx rgba(0, 0, 0, 0.04)',
},
},
// windows 系统会报错：[plugin:unocss:transformers:pre] Cannot overwrite a zero-length range - use append Left or prependRight instead.
// 去掉下面的就正常了