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

refactor: 清理配置文件注释并优化组件样式与逻辑

1. 移除appSettings.ts和appConfig.ts中的旧注释文档
2. 优化首页分类、文章页的箭头按钮样式与尺寸
3. 隐藏home页的多余"更多"按钮并统一右侧按钮样式
4. 重构快捷导航组件的逻辑,简化默认列表渲染
5. 优化文章卡片的布局样式、结构和代码组织
This commit is contained in:
小莫唐尼
2026-09-10 00:44:27 +08:00
parent 260d6965e3
commit eb19276a2d
6 changed files with 75 additions and 101 deletions
@@ -22,12 +22,28 @@
pinned : string pinned : string
} }
const props = withDefaults(defineProps<{
from ?: 'home' | 'articles' | 'archives' | ''
auditMode ?: boolean
article : IPost
variant ?: 'list' | 'grid'
layout ?: CardLayout
}>(), {
auditMode: false,
from: '',
variant: 'list',
})
const settingStore = useSettingStore()
const isGrid = computed(() => props.variant === 'grid')
/** 单一事实源:每种布局的完整形态,模板不再有任何 order / 条件分支 */ /** 单一事实源:每种布局的完整形态,模板不再有任何 order / 条件分支 */
const CARD_LAYOUTS: Record<CardLayout, CardLayoutClasses> = { const CARD_LAYOUTS = computed(()=> ({
image_top: { image_top: {
container: 'flex flex-col gap-y-2', container: `flex flex-col gap-y-2 ${isGrid.value ? '!p-0' : ''}`,
cover: '', cover: `${isGrid.value ? 'rounded-lb-0 rounded-rb-0' : ''}`,
contentWrapper: 'w-full', contentWrapper: `box-border w-full ${isGrid.value ? 'p-2 pt-0' : ''}`,
footer: 'flex items-center', footer: 'flex items-center',
authorGroup: 'flex-1 items-center justify-start gap-x-1', authorGroup: 'flex-1 items-center justify-start gap-x-1',
avatar: '', avatar: '',
@@ -36,7 +52,7 @@
time: 'flex-1 text-center', time: 'flex-1 text-center',
tagCategory: '', tagCategory: '',
visits: 'flex-1 justify-end', visits: 'flex-1 justify-end',
pinned: 'right-4 top-4', pinned: `${isGrid.value ? 'right-2 top-2' : 'right-4 top-4'}`,
}, },
image_bottom: { image_bottom: {
container: 'flex flex-col gap-y-2', container: 'flex flex-col gap-y-2',
@@ -80,23 +96,7 @@
visits: '', visits: '',
pinned: 'right-3 top-3', pinned: 'right-3 top-3',
}, },
} }) as Record<CardLayout, CardLayoutClasses>)
const props = withDefaults(defineProps<{
from ?: 'home' | 'articles' | 'archives' | ''
auditMode ?: boolean
article : IPost
variant ?: 'list' | 'grid'
layout ?: CardLayout
}>(), {
auditMode: false,
from: '',
variant: 'list',
})
const settingStore = useSettingStore()
const isGrid = computed(() => props.variant === 'grid')
/** 各页面卡片样式字段名(与插件端 preferences 字段一致) */ /** 各页面卡片样式字段名(与插件端 preferences 字段一致) */
const CARD_TYPE_KEY : Record<'home' | 'articles' | 'archives', string> = { const CARD_TYPE_KEY : Record<'home' | 'articles' | 'archives', string> = {
@@ -124,7 +124,7 @@
return raw return raw
}) })
const cardLayout = computed(() => CARD_LAYOUTS[effectiveLayout.value] ?? CARD_LAYOUTS.image_top) const cardLayout = computed(() => CARD_LAYOUTS.value[effectiveLayout.value] ?? CARD_LAYOUTS.value.image_top)
/** 社交卡片形态(封面在下):左上用户信息(头像 + 昵称/日期垂直)、右上浏览数 */ /** 社交卡片形态(封面在下):左上用户信息(头像 + 昵称/日期垂直)、右上浏览数 */
const isSocialCard = computed(() => effectiveLayout.value === 'image_bottom') const isSocialCard = computed(() => effectiveLayout.value === 'image_bottom')
@@ -157,8 +157,11 @@
:class="cardLayout.pinned"> :class="cardLayout.pinned">
置顶 置顶
</text> </text>
<image :class="[isGrid ? 'w-full h-24 rounded-lg' : 'w-full h-36 rounded-lg', cardLayout.cover]" <view class="relative overflow-hidden" :class="[isGrid ? 'w-full h-24 rounded-lg' : 'w-full h-36 rounded-lg', cardLayout.cover]">
:src="checkThumbnailUrl(article.spec.cover)" mode="aspectFill" lazy-load /> <image class="w-full h-full block" :src="checkThumbnailUrl(article.spec.cover)" mode="aspectFill" lazy-load />
<!-- <view v-if="isGrid" class="absolute left-0 bottom-0 w-full h-4 bg-gradient-to-b from-white/0 to-white" /> -->
</view>
<view class="flex flex-col gap-y-2 text-sm" :class="cardLayout.contentWrapper"> <view class="flex flex-col gap-y-2 text-sm" :class="cardLayout.contentWrapper">
<view class="truncate font-bold"> <view class="truncate font-bold">
{{ article.spec.title }} {{ article.spec.title }}
@@ -182,11 +185,13 @@
</view> </view>
<view class="flex items-center text-xs text-gray-500" :class="cardLayout.footer"> <view class="flex items-center text-xs text-gray-500" :class="cardLayout.footer">
<view class="flex items-center" :class="cardLayout.authorGroup"> <view class="flex items-center" :class="cardLayout.authorGroup">
<image :src="checkAvatarUrl(article.owner?.avatar || '')" class="uh-global-card-glass h-5 w-5 rounded-full" <image :src="checkAvatarUrl(article.owner?.avatar || '')"
:class="cardLayout.avatar" mode="aspectFill" /> class="uh-global-card-glass h-5 w-5 rounded-full" :class="cardLayout.avatar"
mode="aspectFill" />
<template v-if="isSocialCard"> <template v-if="isSocialCard">
<view :class="cardLayout.infoCol"> <view :class="cardLayout.infoCol">
<text class="block truncate" :class="cardLayout.nickname">{{ article.owner.displayName }}</text> <text class="block truncate"
:class="cardLayout.nickname">{{ article.owner.displayName }}</text>
<view class="flex items-center gap-x-2"> <view class="flex items-center gap-x-2">
<text class="text-gray-400" :class="cardLayout.time">{{ publishTimeText }}</text> <text class="text-gray-400" :class="cardLayout.time">{{ publishTimeText }}</text>
<view class="visits flex items-center gap-x-1 text-gray-400"> <view class="visits flex items-center gap-x-1 text-gray-400">
@@ -201,7 +206,8 @@
</view> </view>
<text v-if="!isGrid && !isSocialCard" class="text-gray-400" <text v-if="!isGrid && !isSocialCard" class="text-gray-400"
:class="cardLayout.time">{{ publishTimeText }}</text> :class="cardLayout.time">{{ publishTimeText }}</text>
<view v-if="!isGrid && !isSocialCard" class="visits flex items-center gap-x-1" :class="cardLayout.visits"> <view v-if="!isGrid && !isSocialCard" class="visits flex items-center gap-x-1"
:class="cardLayout.visits">
浏览 浏览
<text class="number">{{ visitCount }}</text> <text class="number">{{ visitCount }}</text>
@@ -78,9 +78,9 @@
<uh-section-title class="mb-4 px-3 box-border"> <uh-section-title class="mb-4 px-3 box-border">
精选分类 精选分类
<template #right> <template #right>
<view class="box-border flex items-center justify-center rounded-md bg-white p-1.5 text-gray-400" <view class="uh-global-card-glass uh-shadow-xs border flex items-center justify-center rounded-md p-1 text-gray-400"
@click="handleToCategoryPage"> @click="handleToCategoryPage">
<wd-icon name="arrow-right" size="24rpx" /> <wd-icon name="arrow-right" size="28rpx" />
</view> </view>
</template> </template>
</uh-section-title> </uh-section-title>
@@ -22,6 +22,8 @@
visible ?: boolean visible ?: boolean
} }
// 是否使用本地的快捷导航数据(本地的可以任意修改图标、路径,插件端的无法修改图标)
const useLocalNav = false
/** 内置默认项(未配置时回退;字段命名与插件端一致,可作配置缺失字段的兜底) */ /** 内置默认项(未配置时回退;字段命名与插件端一致,可作配置缺失字段的兜底) */
const DEFAULT_NAV_LIST : QuickNavItem[] = [ const DEFAULT_NAV_LIST : QuickNavItem[] = [
{ {
@@ -78,37 +80,16 @@
/** 快捷导航列表:优先读插件端配置(零映射,visible 过滤);未配置/为空回退内置默认(保留原显隐推导) */ /** 快捷导航列表:优先读插件端配置(零映射,visible 过滤);未配置/为空回退内置默认(保留原显隐推导) */
const navList = computed(() => { const navList = computed(() => {
const socialEnabled = !!(haloConfigs.value.authorConfig?.social as { enabled ?: boolean } | undefined)?.enabled
const loveEnabled = !!(haloConfigs.value.loveConfig as { loveEnabled ?: boolean })?.loveEnabled
const configured = haloConfigs.value.pageConfig?.homeConfig?.quickNavigation const configured = haloConfigs.value.pageConfig?.homeConfig?.quickNavigation
let list : QuickNavItem[] let list : QuickNavItem[]
if (configured && configured.length) { if (!useLocalNav && configured && configured.length) {
// 配置模式:以配置项为准,缺失字段(icon/iconPrefix/color/path 等)按 key 从默认项兜底 // 配置模式:以配置项为准,缺失字段(icon/iconPrefix/color/path 等)按 key 从默认项兜底
list = configured.map(item => { list = configured.map(item => {
const fallback = DEFAULT_NAV_LIST.find(d => d.key === item.key) || DEFAULT_NAV_LIST[0] const fallback = DEFAULT_NAV_LIST.find(d => d.key === item.key) || DEFAULT_NAV_LIST[0]
return { ...fallback, ...item } return { ...fallback, ...item }
}) })
} } else {
else { list = DEFAULT_NAV_LIST;
// 默认模式(老部署无配置):回退内置默认项,保留原显隐推导
list = DEFAULT_NAV_LIST.map(item => {
if (item.key === 'archives') {
return { ...item, title: calcAuditModeEnabled.value ? '内容归档' : item.title }
}
if (item.key === 'contact-blogger') {
return { ...item, visible: socialEnabled }
}
if (item.key === 'love') {
return { ...item, visible: loveEnabled }
}
if (item.key === 'vote') {
return { ...item, visible: calcVotePluginEnabled.value }
}
if (item.key === 'disclaimers') {
return { ...item, visible: calcLinksPluginEnabled.value }
}
return item
})
} }
return list.filter(item => item.visible !== false) return list.filter(item => item.visible !== false)
}) })
@@ -122,7 +103,8 @@
</script> </script>
<template> <template>
<view v-if="calcIsShowQuickNavigationEnabled && navList.length" class="box-border overflow-hidden rounded-xl p-3 px-4 mb-3"> <view v-if="calcIsShowQuickNavigationEnabled && navList.length"
class="box-border overflow-hidden rounded-xl p-3 px-4 mb-3">
<uh-section-title class="mb-4"> <uh-section-title class="mb-4">
快捷导航 快捷导航
</uh-section-title> </uh-section-title>
-7
View File
@@ -1,10 +1,3 @@
/**
* 应用配置默认值(源自旧项目 config/index.js 的 DefaultAppConfigs)
* 与 src/api/uni-halo.ts 的 getAppConfigs(plugin-uni-halo/getConfigs)配合,deepMerge 使用
* 页面/组件依赖其字段结构(pluginConfig.toolsPlugin.Authorization 等),改动需谨慎
* 2026-09-08 清理:与插件端 getConfigs 结构统一,移除已下线/无消费的默认字段
* (tokenConfig/pageTitle/bannerConfig/categoryConfig.type 等)
*/
import type { IAppConfig } from '@/api/types/uni-halo' import type { IAppConfig } from '@/api/types/uni-halo'
export const DefaultAppConfigs: IAppConfig = { export const DefaultAppConfigs: IAppConfig = {
-7
View File
@@ -1,10 +1,3 @@
/**
* 应用设置默认值与类型(源自旧项目 utils/app.js 的 _DefaultAppSettings)
* 布局偏好字段命名与插件端 getConfigs.preferences 一致(2026-09-08 起去映射,以插件端字段为准)
* 2026-09-08 清理:banner/ad/gallery/links/about/article/contact 等无消费字段已移除,
* 仅保留偏好相关字段(与插件端 preferences 结构对齐)
*/
export interface IAppSettings { export interface IAppSettings {
/** 评论头像是否圆形(插件端字段 avatarRadius */ /** 评论头像是否圆形(插件端字段 avatarRadius */
avatarRadius: boolean avatarRadius: boolean
+4 -4
View File
@@ -229,14 +229,14 @@
@click="handleRecommendModeChange(tab.value as 'default' | 'pinned' | 'latest' | 'oldest')"> @click="handleRecommendModeChange(tab.value as 'default' | 'pinned' | 'latest' | 'oldest')">
{{ tab.label }} {{ tab.label }}
</view> </view>
<view class="rounded-md px-2 py-0.5 text-xs text-gray-500" @click="handleToArticles()"> <view v-if="false" class="rounded-md px-2 py-0.5 text-xs text-gray-500" @click="handleToArticles()">
更多 更多
</view> </view>
</view> </view>
<view v-if="false" <view
class="uh-global-card-glass flex items-center justify-center gap-x-1 rounded-md p-1 text-gray-400" class="uh-global-card-glass uh-shadow-xs border flex items-center justify-center rounded-md p-1 text-gray-400"
@click="handleToArticles()"> @click="handleToArticles()">
<wd-icon name="arrow-right" size="24rpx" /> <wd-icon name="arrow-right" size="28rpx" />
</view> </view>
</view> </view>
</template> </template>