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