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:
@@ -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>
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user