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

refactor: 重构项目页面与组件,优化整体结构与体验

1.  重构分类页面路由与实现,替换旧分类详情页为文章列表页
2.  统一使用自定义导航栏,替换原有原生导航配置
3.  重构加载状态管理,统一使用useDataLoadingStatus hook
4.  优化插件可用性检查逻辑与组件展示
5.  调整数据加载占位与空状态样式
6.  优化文章卡片样式与交互,新增分类跳转功能
7.  重构设置页枚举选择弹窗,使用wd-picker替换自定义实现
8.  删除废弃的IPluginAvailable类型与相关代码
This commit is contained in:
小莫唐尼
2026-09-04 20:31:46 +08:00
parent 56ce29e69e
commit 02fa9e4294
27 changed files with 727 additions and 630 deletions
@@ -3,17 +3,11 @@
import { NeedPlugins } from '@/hooks/usePluginAvailable'
const props = withDefaults(defineProps<{
/** 插件名称(与 NeedPlugins 中的 id 对应) */
pluginId : string
errorText ?: string
useDecoration ?: boolean
useBorder ?: boolean
customStyle ?: Record<string, string>
checking : boolean
}>(), {
errorText: '',
useDecoration: true,
useBorder: true,
customStyle: () => ({}),
})
const emit = defineEmits<{
@@ -25,75 +19,40 @@
const info = NeedPlugins.get(props.pluginId)
return info || {
id: props.pluginId,
name: props.pluginId,
name: props.name,
desc: '',
logo: '',
url: '',
}
})
const defaultStyle = {
width: '80vw',
borderRadius: '24rpx',
function handleRefresh() {
if (props.checking) { return }
emit('on-refresh')
}
const calcCustomStyle = computed(() => ({
...defaultStyle,
...props.customStyle,
}))
</script>
<template>
<view v-if="pluginInfo"
class="uh-plugin-unavailable mx-auto my-auto box-border flex flex-col gap-6 p-10 text-[28rpx]"
:class="{ border: useBorder, decoration: useDecoration }" :style="[calcCustomStyle]">
<!-- 图标 -->
<image class="plugin-logo box-border h-[120rpx] w-[120rpx] rounded-3xl" :src="pluginInfo.logo"
mode="scaleToFill" />
<!-- 名称 -->
<view class="plugin-name box-border text-[32rpx] text-[#333] font-bold">
<view v-if="pluginInfo" class="mx-auto my-auto box-border flex flex-col items-center justify-center gap-6 text-sm">
<wd-icon class-prefix="uhemoji-icon" name="-cry" size="160rpx"></wd-icon>
<view class="box-border text-lg text-gray-900 font-bold">
{{ pluginInfo.name }}
</view>
<!-- 自定义错误提示 -->
<view v-if="errorText" class="plugin-tip box-border border-2 rounded-xl border-dashed px-5 py-2.5 text-[24rpx]"
style="border-color: #f2c97d; color: #f0a020;">
<view v-if="errorText" class=" text-yellow-500 text-sm">
{{ errorText }}
</view>
<!-- 反馈按钮/复制地址 -->
<view class="plugin-btns box-border w-full">
<view class="w-full flex flex-col gap-y-4">
<uh-button custom-class="!rounded-full py-2 !uh-shadow-xs" @click="handleRefresh()">
{{props.checking?'正在刷新':'刷新试试'}}
</uh-button>
<!-- #ifdef MP-WEIXIN -->
<wd-button type="warning" plain block size="medium" open-type="contact">
<uh-button custom-class="bg-white py-2 !rounded-full" open-type="contact">
提交反馈
</wd-button>
</uh-button>
<!-- #endif -->
</view>
<!-- 刷新按钮 -->
<view class="flex justify-center">
<wd-button size="small" plain type="info" @click="emit('on-refresh')">
刷新试试
</wd-button>
</view>
<view class="plugin-copyright text-[20rpx] text-[#999]" style="transform: scale(0.9) translateY(20px);">
提示请确保 Halo 博客已安装相关插件
</view>
</view>
</template>
<style scoped lang="scss">
.uh-plugin-unavailable {
&.border {
border: 2rpx solid #eee;
}
&.decoration {
background-color: rgb(255 255 255 / 95%);
box-shadow: 0 0 12rpx rgb(226 232 240 / 35%);
backdrop-filter: blur(6rpx);
border-top: 12rpx solid rgb(3 169 244);
}
}
</style>
</template>