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

refactor: 优化多篇页面细节与评论展示效果

Browse Source 
1. 隐藏两个页面的测试调试模块
2. 将图库默认样式改为card模式
3. 优化评论项间距与图标、内容展示
4. 调整代码块圆角样式与文章详情页逻辑
5. 新增文章导航封面处理与加载逻辑优化
This commit is contained in:
小莫唐尼
2026-06-15 22:02:59 +08:00
parent e191eb8358
commit 1ad951913e
6 changed files with 85 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mp-html/components/mp-html/node/node.vue
+1 -1
View File
@@ -821,7 +821,7 @@ export default {
}
}
</script>
<style>/deep/ .hl-code,/deep/ .hl-pre{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}/deep/ .hl-pre{padding:1em;margin:.5em 0;overflow:auto}/deep/ .hl-pre{background:#1a1a1a;border-radius:12px}/deep/ .hl-block-comment,/deep/ .hl-cdata,/deep/ .hl-comment,/deep/ .hl-doctype,/deep/ .hl-prolog{color:#999}/deep/ .hl-punctuation{color:#ccc}/deep/ .hl-attr-name,/deep/ .hl-deleted,/deep/ .hl-namespace,/deep/ .hl-tag{color:#e2777a}/deep/ .hl-function-name{color:#6196cc}/deep/ .hl-boolean,/deep/ .hl-function,/deep/ .hl-number{color:#f08d49}/deep/ .hl-class-name,/deep/ .hl-constant,/deep/ .hl-property,/deep/ .hl-symbol{color:#f8c555}/deep/ .hl-atrule,/deep/ .hl-builtin,/deep/ .hl-important,/deep/ .hl-keyword,/deep/ .hl-selector{color:#cc99cd}/deep/ .hl-attr-value,/deep/ .hl-char,/deep/ .hl-regex,/deep/ .hl-string,/deep/ .hl-variable{color:#7ec699}/deep/ .hl-entity,/deep/ .hl-operator,/deep/ .hl-url{color:#67cdcc}/deep/ .hl-bold,/deep/ .hl-important{font-weight:700}/deep/ .hl-italic{font-style:italic}/deep/ .hl-entity{cursor:help}/deep/ .hl-inserted{color:green}/deep/ .md-p {
<style>/deep/ .hl-code,/deep/ .hl-pre{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}/deep/ .hl-pre{padding:1em;margin:.5em 0;overflow:auto}/deep/ .hl-pre{background:#1a1a1a;border-radius:8px}/deep/ .hl-block-comment,/deep/ .hl-cdata,/deep/ .hl-comment,/deep/ .hl-doctype,/deep/ .hl-prolog{color:#999}/deep/ .hl-punctuation{color:#ccc}/deep/ .hl-attr-name,/deep/ .hl-deleted,/deep/ .hl-namespace,/deep/ .hl-tag{color:#e2777a}/deep/ .hl-function-name{color:#6196cc}/deep/ .hl-boolean,/deep/ .hl-function,/deep/ .hl-number{color:#f08d49}/deep/ .hl-class-name,/deep/ .hl-constant,/deep/ .hl-property,/deep/ .hl-symbol{color:#f8c555}/deep/ .hl-atrule,/deep/ .hl-builtin,/deep/ .hl-important,/deep/ .hl-keyword,/deep/ .hl-selector{color:#cc99cd}/deep/ .hl-attr-value,/deep/ .hl-char,/deep/ .hl-regex,/deep/ .hl-string,/deep/ .hl-variable{color:#7ec699}/deep/ .hl-entity,/deep/ .hl-operator,/deep/ .hl-url{color:#67cdcc}/deep/ .hl-bold,/deep/ .hl-important{font-weight:700}/deep/ .hl-italic{font-style:italic}/deep/ .hl-entity{cursor:help}/deep/ .hl-inserted{color:green}/deep/ .md-p {
margin-block-start: 1em;
margin-block-end: 1em;
}
src/components/mp-html/static/app-plus/mp-html/local.html
+1 -1
View File
@@ -1 +1 @@
<style>.hl-code,.hl-pre{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.hl-pre{padding:1em;margin:.5em 0;overflow:auto}.hl-pre{background:#1a1a1a;border-radius:12px}.hl-block-comment,.hl-cdata,.hl-comment,.hl-doctype,.hl-prolog{color:#999}.hl-punctuation{color:#ccc}.hl-attr-name,.hl-deleted,.hl-namespace,.hl-tag{color:#e2777a}.hl-function-name{color:#6196cc}.hl-boolean,.hl-function,.hl-number{color:#f08d49}.hl-class-name,.hl-constant,.hl-property,.hl-symbol{color:#f8c555}.hl-atrule,.hl-builtin,.hl-important,.hl-keyword,.hl-selector{color:#cc99cd}.hl-attr-value,.hl-char,.hl-regex,.hl-string,.hl-variable{color:#7ec699}.hl-entity,.hl-operator,.hl-url{color:#67cdcc}.hl-bold,.hl-important{font-weight:700}.hl-italic{font-style:italic}.hl-entity{cursor:help}.hl-inserted{color:green}</style><style>.md-p{margin-block-start:1em;margin-block-end:1em}.md-blockquote,.md-table{margin-bottom:16px}.md-table{box-sizing:border-box;width:100%;overflow:auto;border-spacing:0;border-collapse:collapse}.md-tr{background-color:#fff;border-top:1px solid #c6cbd1}.md-table .md-tr:nth-child(2n){background-color:#f6f8fa}.md-td,.md-th{padding:6px 13px!important;border:1px solid #dfe2e5}.md-th{font-weight:600}.md-blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5}.md-code{padding:.2em .4em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:3px}.md-pre .md-code{padding:0;font-size:100%;background:0 0;border:0}.hl-pre{position:relative}.hl-code{overflow:auto;display:block}.hl-language{font-size:12px;font-weight:600;position:absolute;right:8px;text-align:right;top:3px}.hl-pre{padding-top:1.5em}.hl-pre{font-size:14px;padding-left:3.8em;counter-reset:linenumber}.line-numbers-rows{position:absolute;pointer-events:none;top:1.5em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows .span{display:block;counter-increment:linenumber}.line-numbers-rows .span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}._address,._article,._aside,._body,._caption,._center,._cite,._footer,._header,._html,._nav,._pre,._section{display:block}._video{width:300px;height:225px;display:inline-block;background-color:#000}</style><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow-x:scroll;overflow-y:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}</style></head><body><div id="content" style="overflow:hidden"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
<style>.hl-code,.hl-pre{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.hl-pre{padding:1em;margin:.5em 0;overflow:auto}.hl-pre{background:#1a1a1a;border-radius:8px}.hl-block-comment,.hl-cdata,.hl-comment,.hl-doctype,.hl-prolog{color:#999}.hl-punctuation{color:#ccc}.hl-attr-name,.hl-deleted,.hl-namespace,.hl-tag{color:#e2777a}.hl-function-name{color:#6196cc}.hl-boolean,.hl-function,.hl-number{color:#f08d49}.hl-class-name,.hl-constant,.hl-property,.hl-symbol{color:#f8c555}.hl-atrule,.hl-builtin,.hl-important,.hl-keyword,.hl-selector{color:#cc99cd}.hl-attr-value,.hl-char,.hl-regex,.hl-string,.hl-variable{color:#7ec699}.hl-entity,.hl-operator,.hl-url{color:#67cdcc}.hl-bold,.hl-important{font-weight:700}.hl-italic{font-style:italic}.hl-entity{cursor:help}.hl-inserted{color:green}</style><style>.md-p{margin-block-start:1em;margin-block-end:1em}.md-blockquote,.md-table{margin-bottom:16px}.md-table{box-sizing:border-box;width:100%;overflow:auto;border-spacing:0;border-collapse:collapse}.md-tr{background-color:#fff;border-top:1px solid #c6cbd1}.md-table .md-tr:nth-child(2n){background-color:#f6f8fa}.md-td,.md-th{padding:6px 13px!important;border:1px solid #dfe2e5}.md-th{font-weight:600}.md-blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5}.md-code{padding:.2em .4em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:3px}.md-pre .md-code{padding:0;font-size:100%;background:0 0;border:0}.hl-pre{position:relative}.hl-code{overflow:auto;display:block}.hl-language{font-size:12px;font-weight:600;position:absolute;right:8px;text-align:right;top:3px}.hl-pre{padding-top:1.5em}.hl-pre{font-size:14px;padding-left:3.8em;counter-reset:linenumber}.line-numbers-rows{position:absolute;pointer-events:none;top:1.5em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows .span{display:block;counter-increment:linenumber}.line-numbers-rows .span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}._address,._article,._aside,._body,._caption,._center,._cite,._footer,._header,._html,._nav,._pre,._section{display:block}._video{width:300px;height:225px;display:inline-block;background-color:#000}</style><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow-x:scroll;overflow-y:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}</style></head><body><div id="content" style="overflow:hidden"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
src/components/post-detail/uh-post-comment-panel.vue
+5 -3
View File
@@ -319,7 +319,7 @@ onMounted(() => {
:src="avatar(reply.owner.avatar)"
mode="aspectFill"
/>
<view class="flex flex-1 flex-col gap-y-1 overflow-hidden">
<view class="flex flex-1 flex-col gap-y-1.5 overflow-hidden">
<view class="flex items-center justify-between">
<text class="text-[11px] text-gray-500 font-medium">{{ reply.owner.displayName || '匿名用户' }}</text>
<text class="text-[10px] text-gray-400">{{ timeFrom(reply.spec.creationTime || reply.metadata.creationTimestamp) }}</text>
@@ -329,13 +329,15 @@ onMounted(() => {
<text class="text-[11px] text-gray-400">回复 {{ reply.spec.quoteReply }}：</text>
</view>
<text class="text-xs text-gray-700 leading-4.5">{{ reply.spec.raw }}</text>
<text class="text-xs text-gray-700 leading-4.5">
<rich-text :nodes="reply.spec.raw" />
</text>
<view
class="flex items-center gap-x-1"
@click="handleReply(comment.metadata.name, reply.metadata.name, reply.owner.displayName || '匿名用户')"
>
<wd-icon name="chat" color="#9CA3AF" :size="12" />
<wd-icon name="message" color="#9CA3AF" :size="12" />
<text class="text-[10px] text-gray-400">回复</text>
</view>
</view>
src/pages/gallery/gallery.vue
+2 -2
View File
@@ -29,7 +29,7 @@ interface IGalleryGroup {
const groupBanner = reactive({
current: 0,
})
const galleryStyle = ref('mix')
const galleryStyle = ref('card')
const showListPanel = reactive({
show: false,
metadataName: '',
@@ -182,7 +182,7 @@ onPageScroll(() => { })
<template>
<view class="bg-page3 min-h-screen w-full flex flex-col">
<!-- 测试 -->
<view class="box-border w-full p-4 pb-0">
<view v-if="false" class="box-border w-full p-4 pb-0">
<view class="uh-shadow-card box-border w-full flex items-center gap-x-4 rounded-xl bg-white p-4 text-sm">
<view class="shrink-0">
{{ galleryStyle }}：
src/pages/moments/moments.vue
+1 -1
View File
@@ -65,7 +65,7 @@ onPageScroll(() => { })
<template>
<view class="bg-page3 min-h-screen w-full flex flex-col">
<!-- 测试 -->
<view class="box-border w-full p-4 pb-0">
<view v-if="false" class="box-border w-full p-4 pb-0">
<view class="uh-shadow-card box-border w-full flex items-center gap-x-4 rounded-xl bg-white p-4 text-sm">
<view class="shrink-0">
模式：【{{ useTimeline }}】
src/subpkg-blog/post-detail/post-detail.vue
+75 -72
View File
@@ -5,6 +5,7 @@ import { useUniHaloConfigStore } from '@/store/config'
import { queryPostByName, queryPostNavigationByName } from '@/api/halo-base/post'
import { upvote } from '@/api/halo-base/trackers'
import { completeUrl } from '@/utils/url'
import { cover } from '@/utils/imageHelper'
import { timeFrom } from '@/utils/base/timeFrom'
import { formatNumberUnit } from '@/utils/base/digital'
import type { NavigationPostVo, PostV1alpha1PublicApiQueryPostByNameRequest, PostVo } from '@halo-dev/api-client'
@@ -31,7 +32,7 @@ definePage({
const uniHaloConfigStore = useUniHaloConfigStore()
// --- 数据请求 ---
const { loading, data: post, run: fetchPost } = useRequest<PostVo, PostV1alpha1PublicApiQueryPostByNameRequest>(queryPostByName, { loadingToast: true, loadingToastContent: '加载中...' })
const { loading, data: post, run: fetchPost } = useRequest<PostVo, PostV1alpha1PublicApiQueryPostByNameRequest>(queryPostByName, { loadingToast: false, loadingToastContent: '加载中...' })
const { data: navigation, run: fetchNavigation } = useRequest<NavigationPostVo, PostV1alpha1PublicApiQueryPostByNameRequest>(queryPostNavigationByName)
let postName = ''
@@ -166,11 +167,8 @@ function handleOpenCommentPanel() {
<template>
<view class="min-h-screen w-full flex flex-col bg-page3">
<!-- 顶部导航栏 -->
<view
v-if="false"
class="fixed left-0 z-100 box-border w-full flex items-center justify-between"
:style="{ paddingTop: 'calc(var(--status-bar-height, 44px) ' }"
>
<view v-if="false" class="fixed left-0 z-100 box-border w-full flex items-center justify-between"
:style="{ paddingTop: 'calc(var(--status-bar-height, 44px) ' }">
<view class="box-border h-44px w-full flex items-center justify-between px-2">
<!-- 返回按钮 -->
<view class="h-8 w-9 center rounded-lg bg-gray-900 text-white" @click="handleBack">
@@ -194,22 +192,22 @@ function handleOpenCommentPanel() {
<!-- 文章信息卡片（覆盖封面底部） -->
<view class="relative z-20 box-border w-full flex flex-col gap-y-4 pt-52 -mt-8">
<!-- 主信息卡片 -->
<view v-if="htmlContent" class="uh-shadow-xs box-border w-full flex flex-col gap-y-3 overflow-hidden rounded-3xl bg-white">
<view v-if="htmlContent"
class="uh-shadow-xs box-border w-full flex flex-col gap-y-3 overflow-hidden rounded-3xl bg-white">
<!-- 标题 -->
<text class="box-border p-4 pb-0 text-lg text-gray-900 font-bold leading-6">{{ post?.spec?.title ?? '加载中...' }}</text>
<text class="box-border p-4 pb-0 text-lg text-gray-900 font-bold leading-6">
{{ post?.spec?.title ?? '加载中...'
}}
</text>
<!-- 分类 & 标签 -->
<view v-if="categories.length > 0 || tags.length > 0" class="box-border flex flex-wrap items-center gap-2 px-4">
<view
v-for="cat in categories" :key="cat.metadata.name"
class="rounded-full bg-gray-900 px-2.5 py-1 text-xs text-white font-medium"
>
<view v-for="cat in categories" :key="cat.metadata.name"
class="rounded-full bg-gray-900 px-2.5 py-1 text-xs text-white font-medium">
{{ cat.spec?.displayName }}
</view>
<view
v-for="tag in tags" :key="tag.metadata.name"
class="border border-gray-200 rounded-full bg-white px-2.5 py-1 text-xs text-gray-500"
>
<view v-for="tag in tags" :key="tag.metadata.name"
class="border border-gray-200 rounded-full bg-white px-2.5 py-1 text-xs text-gray-500">
# {{ tag.spec?.displayName }}
</view>
</view>
@@ -232,10 +230,8 @@ function handleOpenCommentPanel() {
<!-- 作者信息 -->
<view v-if="post?.owner" class="box-border flex items-center gap-x-2 hidden!">
<image
v-if="post.owner.avatar" class="h-8 w-8 border-2 border-white rounded-full border-solid"
:src="completeUrl(post.owner.avatar)" mode="aspectFill"
/>
<image v-if="post.owner.avatar" class="h-8 w-8 border-2 border-white rounded-full border-solid"
:src="completeUrl(post.owner.avatar)" mode="aspectFill" />
<view class="flex flex-col">
<text class="text-xs text-gray-900 font-medium">{{ post.owner.displayName }}</text>
<text v-if="post.owner.bio" class="line-clamp-1 text-[11px] text-gray-400">{{ post.owner.bio }}</text>
@@ -244,34 +240,66 @@ function handleOpenCommentPanel() {
<!-- 文章正文 -->
<view class="box-border px-1">
<mp-html
:content="htmlContent" :tag-style="markdownConfig.tagStyle"
<mp-html :content="htmlContent" :tag-style="markdownConfig.tagStyle"
:container-style="markdownConfig.containStyle" :domain="markdownConfig.domain" lazy-load selectable
/>
:scroll-table="true" :use-anchor="true" />
</view>
<!-- 上一篇/下一篇导航 -->
<view v-if="prevPost || nextPost" class="box-border w-full">
<view
class="box-border w-full flex flex-col gap-y-2 border-0 border-gray-100 rounded-xl border-solid p-4 pt-0">
<!-- 上一篇 -->
<view v-if="prevPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
@click="handleNavigatePost(prevPost.metadata.name)">
<view class="h-10 w-10 shrink-0 overflow-hidden rounded-lg">
<image class="box-border h-full w-full border-2 border-gray-50 rounded-lg border-solid bg-gray-200"
mode="aspectFill" :src="cover(prevPost.spec?.cover)" />
</view>
<view class="flex flex-1 flex-col gap-y-0.5 overflow-hidden">
<text class="text-[11px] text-gray-400">上一篇</text>
<text class="line-clamp-1 text-xs text-gray-900 font-medium">{{ prevPost.spec?.title }}</text>
</view>
<wd-icon name="arrow-right" color="#9CA3AF" :size="16" />
</view>
<!-- 下一篇 -->
<view v-if="nextPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
@click="handleNavigatePost(nextPost.metadata.name)">
<view class="h-10 w-10 shrink-0 overflow-hidden rounded-lg">
<image class="box-border h-full w-full border-2 border-gray-50 rounded-lg border-solid bg-gray-200"
mode="aspectFill" :src="cover(nextPost.spec?.cover)" />
</view>
<view class="flex flex-1 flex-col gap-y-0.5 overflow-hidden">
<text class="text-[11px] text-gray-400">下一篇</text>
<text class="line-clamp-1 text-xs text-gray-900 font-medium">{{ nextPost.spec?.title }}</text>
</view>
<wd-icon name="arrow-right" color="#9CA3AF" :size="16" />
</view>
</view>
</view>
<!-- 底部安全区占位 -->
<uh-tabbar-page-placeholder />
</view>
<!-- 加载中占位 -->
<view v-else-if="loading" class="uh-shadow-xs box-border w-full center rounded-2xl bg-white py-16">
<wd-loading />
<!-- 加载中占位 -->
<view v-else-if="loading" class="box-border h-full w-full center py-26">
<wd-loading :size="32" color="#1a1a1a">加载中...</wd-loading>
</view>
<!-- 上一篇/下一篇导航 -->
<view
v-if="prevPost || nextPost"
class="uh-shadow-xs box-border w-full flex flex-col gap-y-2 rounded-2xl bg-white p-4"
>
<view v-if="prevPost || nextPost"
class="uh-shadow-xs box-border w-full flex flex-col gap-y-2 rounded-2xl bg-white p-4 hidden!">
<view class="mb-1 text-sm text-gray-900 font-bold">
文章导航
</view>
<!-- 上一篇 -->
<view
v-if="prevPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
@click="handleNavigatePost(prevPost.metadata.name)"
>
<view v-if="prevPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
@click="handleNavigatePost(prevPost.metadata.name)">
<view class="h-10 w-10 shrink-0 overflow-hidden rounded-lg">
<image class="h-full w-full" mode="aspectFill" :src="completeUrl(prevPost.spec?.cover ?? '')" />
<image class="h-full w-full" mode="aspectFill" :src="cover(prevPost.spec?.cover)" />
</view>
<view class="flex flex-1 flex-col gap-y-0.5 overflow-hidden">
<text class="text-[11px] text-gray-400">上一篇</text>
@@ -281,12 +309,10 @@ function handleOpenCommentPanel() {
</view>
<!-- 下一篇 -->
<view
v-if="nextPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
@click="handleNavigatePost(nextPost.metadata.name)"
>
<view v-if="nextPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
@click="handleNavigatePost(nextPost.metadata.name)">
<view class="h-10 w-10 shrink-0 overflow-hidden rounded-lg">
<image class="h-full w-full" mode="aspectFill" :src="completeUrl(nextPost.spec?.cover ?? '')" />
<image class="h-full w-full" mode="aspectFill" :src="cover(nextPost.spec?.cover)" />
</view>
<view class="flex flex-1 flex-col gap-y-0.5 overflow-hidden">
<text class="text-[11px] text-gray-400">下一篇</text>
@@ -297,25 +323,15 @@ function handleOpenCommentPanel() {
</view>
</view>
<!-- 底部安全区占位 -->
<uh-tabbar-page-placeholder />
<!-- 底部浮动操作栏（iOS 26 风格） -->
<view class="fixed bottom-6 left-4 right-4 z-100 flex items-center gap-x-4" @touchmove.stop.prevent>
<!-- 左侧操作栏 -->
<view
class="uh-shadow-md uh-backdrop-blur box-border h-46px flex flex-1 items-center justify-around border border-white rounded-full border-solid bg-white/95 p-1"
>
class="uh-shadow-md uh-backdrop-blur box-border h-46px flex flex-1 items-center justify-around border border-white rounded-full border-solid bg-white/95 p-1">
<!-- 返回 -->
<view class="flex flex-1 items-center justify-center gap-x-0.5" @click="handleBack">
<view
class="center rounded-full transition-colors"
>
<wd-icon
name="arrow-left"
color="#6B7280"
:size="18"
/>
<view class="center rounded-full transition-colors">
<wd-icon name="arrow-left" color="#6B7280" :size="18" />
</view>
<text class="text-xs text-gray-900 font-medium">
返回
@@ -324,15 +340,8 @@ function handleOpenCommentPanel() {
<!-- 点赞 -->
<view class="flex flex-1 items-center justify-center gap-x-1" @click="handleUpvote">
<view
class="center rounded-full transition-colors"
:class="isUpvoted ? 'bg-red-50' : 'bg-transparent'"
>
<wd-icon
name="thumb-up"
:color="isUpvoted ? '#EF4444' : '#6B7280'"
:size="18"
/>
<view class="center rounded-full transition-colors" :class="isUpvoted ? 'bg-red-50' : 'bg-transparent'">
<wd-icon name="thumb-up" :color="isUpvoted ? '#EF4444' : '#6B7280'" :size="18" />
</view>
<text class="text-xs font-medium" :class="isUpvoted ? 'text-red-500' : 'text-gray-900'">
{{ stats.upvote }}
@@ -359,20 +368,14 @@ function handleOpenCommentPanel() {
<!-- 右侧返回顶部 -->
<view
class="uh-shadow-md uh-backdrop-blur box-border h-46px w-46px center flex shrink-0 border border-white rounded-full border-solid bg-white/95"
@click="handleScrollToTop"
>
@click="handleScrollToTop">
<wd-icon name="arrow-up" color="#1A1A1A" :size="18" />
</view>
</view>
</view>
<!-- 评论面板 -->
<uh-post-comment-panel
v-if="showCommentPanel"
:post-name="postName"
:comment-subject-version="post?.spec?.releaseSnapshot ?? ''"
:comment-count="post?.stats?.comment ?? 0"
@close="showCommentPanel = false"
@commented="loadData"
/>
<uh-post-comment-panel v-if="showCommentPanel" :post-name="postName"
:comment-subject-version="post?.spec?.releaseSnapshot ?? ''" :comment-count="post?.stats?.comment ?? 0"
@close="showCommentPanel = false" @commented="loadData" />
</template>