style: 调整主题色为深灰并优化文章页样式

1.  将全局主题色替换为#1A1A1A
2.  重构markdown样式，优化间距与排版
3.  新增文章页返回顶部功能
4.  优化文章详情页的布局与交互细节

src/components/mp-html/components/mp-html/node/node.vue

@@ -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:#111827;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: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 {
   margin-block-start: 1em;
   margin-block-end: 1em;
 }

src/components/mp-html/static/app-plus/mp-html/local.html

@@ -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:#111827;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: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>

src/config/markdown/config.ts

@@ -1,6 +1,6 @@
 import { useAppConfig } from '../useAppConfig'
 
-const primaryColor = '#111827'
+const primaryColor = '#1a1a1a'
 
 export const markdownConfig = {
   domain: useAppConfig().appBaseUrl.value,
@@ -11,8 +11,8 @@ border-collapse:collapse;
 margin-bottom: 18px;
 overflow: hidden;
 font-size: 13px;
-color: var(--routine);
+color: ${primaryColor};
-background: #f2f6fc;
+background: rgba(247, 247, 247, 1);
 border: 1px solid #dcdcdc;
 border-radius: 4px;
 `,
@@ -28,68 +28,77 @@ border-bottom: 1px solid var(--classE);
 `,
     blockquote: `
 padding: 8px 15px;
+padding-bottom: 1px;
 color: #606266;
-background: #f2f6fc;
+background: rgba(247, 247, 247, 1);
 border-left: 5px solid ${primaryColor};
 border-radius: 4px;
 line-height: 26px;
 margin-bottom: 18px;
+margin-top: 4px;
 `,
     ul: 'padding-left: 15px;line-height: 1.85;',
     ol: 'padding-left: 15px;line-height: 1.85;',
     li: 'margin-bottom: 12px;line-height: 1.85;',
     h1: `
 margin: 30px 0 20px;
-color: var(--main);
+color: ${primaryColor};
 line-height: 24px;
 position: relative;
 font-size:1.2em;
+font-weight: bold;
 `,
     h2: `
-color: var(--main);
+color: ${primaryColor};
 line-height: 24px;
 position: relative;
 margin: 22px 0 16px;
 font-size: 1.16em;
+font-weight: bold;
 `,
     h3: `
-color: var(--main);
+color: ${primaryColor};
 line-height: 24px;
 position: relative;
 margin: 26px 0 18px;
 font-size: 1.14em;
+font-weight: bold;
 `,
     h4: `
-color: var(--main);
+color: ${primaryColor};
 line-height: 24px;
 margin-bottom: 18px;
 position: relative;
 font-size: 1.12em;
+font-weight: bold;
 `,
     h5: `
-color: var(--main);
+color: ${primaryColor};
 line-height: 24px;
 margin-bottom: 14px;
 position: relative;
 font-size: 1.1em;
+font-weight: bold;
 `,
     h6: `
-color: #303133;
+color: ${primaryColor};
 line-height: 24px;
 margin-bottom: 14px;
 position: relative;
 font-size: 14px;
+font-weight: bold;
 `,
     p: `
 line-height: 1.65;
-margin-bottom: 14px;
+margin-bottom: 12px;
 font-size: 14px;
 `,
     code: `  `,
-    strong: 'font-weight: 700;color: rgb(248, 57, 41);',
+    strong: `font-weight: 700;color: ${primaryColor};`,
     video: 'width: 100%',
   },
-  containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
+//   containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px; background-color:transparent;',
+  containStyle: 'word-spacing: 0.8px;letter-spacing: 0.8px; background-color:transparent;',
 
   loadingGif: '',
   emptyGif: '',

src/subpkg-blog/post-detail/post-detail.vue

@@ -122,6 +122,19 @@ async function loadData() {
   upvoteCount.value = post.value?.stats?.upvote ?? 0
 }
 
+// --- 返回顶部 ---
+const showBackTop = ref(false)
+let beforeScrollTop = 0
+
+onPageScroll(({ scrollTop }) => {
+  showBackTop.value = scrollTop > 300 && scrollTop > beforeScrollTop
+  beforeScrollTop = scrollTop
+})
+
+function handleScrollToTop() {
+  uni.pageScrollTo({ scrollTop: 0, duration: 300 })
+}
+
 // --- 生命周期 ---
 onLoad((options: IPostDetailLoadOptions) => {
   postName = options.metadataName
@@ -145,8 +158,10 @@ onShareAppMessage(() => {
 <template>
   <view class="min-h-screen w-full flex flex-col bg-page3">
     <!-- 顶部导航栏 -->
-    <view class="fixed left-0 z-100 box-border w-full flex items-center justify-between"
+    <view
-      :style="{ paddingTop: 'calc(var(--status-bar-height, 44px) ' }">
+      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">
@@ -168,26 +183,30 @@ onShareAppMessage(() => {
     </view>
 
     <!-- 文章信息卡片（覆盖封面底部） -->
-    <view class="uh-shadow-card relative z-20 box-border w-full flex flex-col gap-y-4 pt-52 -mt-8">
+    <view class="relative z-20 box-border w-full flex flex-col gap-y-4 pt-52 -mt-8">
       <!-- 主信息卡片 -->
-      <view v-if="htmlContent" class="box-border w-full flex flex-col gap-y-3 overflow-hidden rounded-3xl bg-white p-4">
+      <view v-if="htmlContent" class="uh-shadow-xs box-border w-full flex flex-col gap-y-3 overflow-hidden rounded-3xl bg-white p-4">
         <!-- 标题 -->
         <text class="text-lg text-gray-900 font-bold leading-6">{{ post?.spec?.title ?? '加载中...' }}</text>
 
         <!-- 分类 & 标签 -->
         <view v-if="categories.length > 0 || tags.length > 0" class="flex flex-wrap items-center gap-2">
-          <view v-for="cat in categories" :key="cat.metadata.name"
+          <view
-            class="rounded-full bg-gray-900 px-2.5 py-1 text-xs text-white font-medium">
+            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"
+          <view
-            class="rounded-full border border-gray-200 bg-white px-2.5 py-1 text-xs text-gray-500">
+            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>
 
         <!-- 元信息 -->
-        <view class="flex items-center gap-x-1">
+        <view class="flex flex-1 items-center gap-x-1">
           <text class="text-[11px] text-gray-500">{{ publishTime }}</text>
           <text class="text-[11px] text-gray-400">·</text>
           <text class="text-[11px] text-gray-500">浏览 {{ stats.visit }}</text>
@@ -195,6 +214,8 @@ onShareAppMessage(() => {
           <text class="text-[11px] text-gray-500">评论 {{ stats.comment }}</text>
           <text class="text-[11px] text-gray-400">·</text>
           <text class="text-[11px] text-gray-500">点赞 {{ stats.upvote }}</text>
+          <text class="text-[11px] text-gray-400">·</text>
+          <text class="text-[11px] text-gray-500">字数 {{ formatNumberUnit(htmlContent.length) }}</text>
         </view>
 
         <!-- 分割线 -->
@@ -202,8 +223,10 @@ onShareAppMessage(() => {
 
         <!-- 作者信息 -->
         <view v-if="post?.owner" class="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"
+          <image
-            :src="completeUrl(post.owner.avatar)" mode="aspectFill" />
+            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>
@@ -211,8 +234,10 @@ onShareAppMessage(() => {
         </view>
 
         <!-- 文章正文 -->
-        <mp-html :content="htmlContent" :tag-style="markdownConfig.tagStyle"
+        <mp-html
-          :container-style="markdownConfig.containStyle" :domain="markdownConfig.domain" lazy-load selectable />
+          :content="htmlContent" :tag-style="markdownConfig.tagStyle"
+          :container-style="markdownConfig.containStyle" :domain="markdownConfig.domain" lazy-load selectable
+        />
       </view>
 
       <!-- 加载中占位 -->
@@ -220,19 +245,20 @@ onShareAppMessage(() => {
         <wd-loading />
       </view>
 
-      <!-- 底部操作栏占位 -->
-      <view class="h-20 w-full" />
-
       <!-- 上一篇/下一篇导航 -->
-      <view v-if="prevPost || nextPost"
+      <view
-        class="uh-shadow-xs box-border w-full flex flex-col gap-y-2 rounded-2xl bg-white p-4">
+        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 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"
+        <view
-          @click="handleNavigatePost(prevPost.metadata.name)">
+          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 ?? '')" />
           </view>
@@ -244,8 +270,10 @@ onShareAppMessage(() => {
         </view>
 
         <!-- 下一篇 -->
-        <view v-if="nextPost" class="flex items-center gap-x-3 rounded-xl bg-gray-50 p-3"
+        <view
-          @click="handleNavigatePost(nextPost.metadata.name)">
+          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 ?? '')" />
           </view>
@@ -259,21 +287,18 @@ onShareAppMessage(() => {
     </view>
 
     <!-- 底部安全区占位 -->
-    <view class="pb-safe">
+    <uh-tabbar-page-placeholder />
-      <view class="h-4 w-full" />
-    </view>
 
     <!-- 底部浮动操作栏（iOS 26 风格） -->
-    <view class="fixed bottom-6 left-4 right-4 z-100 flex items-center gap-x-3" @touchmove.stop.prevent>
+    <view class="fixed bottom-6 left-4 right-4 z-100 flex items-center gap-x-4" @touchmove.stop.prevent>
-      <!-- 操作栏主体 -->
+      <!-- 左侧操作栏 -->
       <view
-        class="uh-shadow-sm uh-backdrop-blur flex flex-1 items-center justify-around border border-white rounded-full border-solid bg-white/95 px-2"
+        class="uh-shadow-sm 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"
-        style="height: 54px"
       >
         <!-- 点赞 -->
-        <view class="flex items-center gap-x-1.5" @click="handleUpvote">
+        <view class="flex flex-1 items-center justify-center gap-x-1" @click="handleUpvote">
           <view
-            class="h-9 w-9 center rounded-full transition-colors"
+            class="center rounded-full transition-colors"
             :class="isUpvoted ? 'bg-red-50' : 'bg-transparent'"
           >
             <wd-icon
@@ -282,33 +307,35 @@ onShareAppMessage(() => {
               :size="18"
             />
           </view>
-          <text class="text-xs font-medium" :class="isUpvoted ? 'text-red-500' : 'text-gray-600'">
+          <text class="text-sm font-medium" :class="isUpvoted ? 'text-red-500' : 'text-gray-600'">
             {{ stats.upvote }}
           </text>
         </view>
 
-        <!-- 分割线 -->
-        <view class="h-6 w-1px bg-gray-200" />
-
         <!-- 评论 -->
-        <view class="flex items-center gap-x-1.5">
+        <view class="flex flex-1 items-center justify-center gap-x-1">
-          <view class="h-9 w-9 center rounded-full bg-transparent">
+          <view class="center rounded-full bg-transparent">
-            <wd-icon name="chat" color="#6B7280" :size="18" />
+            <wd-icon name="message" color="#6B7280" :size="18" />
           </view>
-          <text class="text-xs text-gray-600 font-medium">{{ stats.comment }}</text>
+          <text class="text-sm text-gray-600 font-medium">{{ stats.comment }}</text>
         </view>
 
-        <!-- 分割线 -->
-        <view class="h-6 w-1px bg-gray-200" />
-
         <!-- 分享 -->
-        <view class="flex items-center gap-x-1.5" @click="handleShare">
+        <view class="flex flex-1 items-center justify-center gap-x-1" @click="handleShare">
-          <view class="h-9 w-9 center rounded-full bg-transparent">
+          <view class="center rounded-full bg-transparent">
-            <wd-icon name="share" color="#6B7280" :size="18" />
+            <wd-icon name="share-alt" color="#6B7280" :size="18" />
           </view>
-          <text class="text-xs text-gray-600 font-medium">分享</text>
+          <text class="text-sm text-gray-600 font-medium">分享</text>
         </view>
       </view>
+
+      <!-- 右侧返回顶部 -->
+      <view
+        class="uh-shadow-sm 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"
+      >
+        <wd-icon name="arrow-up" color="#1A1A1A" :size="18" />
+      </view>
     </view>
   </view>
 </template>

uno.config.ts

@@ -95,7 +95,7 @@ export default defineConfig({
   theme: {
     colors: {
       /** 主题色，用法如: text-primary */
-      primary: 'var(--wot-color-theme,#0957DE)',
+      primary: '#1A1A1A',
       page: '#F8F8F8',
       page2: '#F9FAFB',
       page3: '#F8FAFC',