mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-07-27 04:20:43 +08:00
style: 调整主题色为深灰并优化文章页样式
1. 将全局主题色替换为#1A1A1A 2. 重构markdown样式，优化间距与排版 3. 新增文章页返回顶部功能 4. 优化文章详情页的布局与交互细节
This commit is contained in:
小莫唐尼
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
background: #f2f6fc;
|
||||
color: ${primaryColor};
|
||||
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: '',
|
||||
|
||||
@@ -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"
|
||||
:style="{ paddingTop: 'calc(var(--status-bar-height, 44px) ' }">
|
||||
<view
|
||||
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"
|
||||
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="rounded-full border border-gray-200 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>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<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"
|
||||
: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>
|
||||
@@ -211,8 +234,10 @@ onShareAppMessage(() => {
|
||||
</view>
|
||||
|
||||
<!-- 文章正文 -->
|
||||
<mp-html :content="htmlContent" :tag-style="markdownConfig.tagStyle"
|
||||
:container-style="markdownConfig.containStyle" :domain="markdownConfig.domain" lazy-load selectable />
|
||||
<mp-html
|
||||
: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"
|
||||
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"
|
||||
>
|
||||
<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 ?? '')" />
|
||||
</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"
|
||||
@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 ?? '')" />
|
||||
</view>
|
||||
@@ -259,21 +287,18 @@ onShareAppMessage(() => {
|
||||
</view>
|
||||
|
||||
<!-- 底部安全区占位 -->
|
||||
<view class="pb-safe">
|
||||
<view class="h-4 w-full" />
|
||||
</view>
|
||||
<uh-tabbar-page-placeholder />
|
||||
|
||||
<!-- 底部浮动操作栏（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"
|
||||
style="height: 54px"
|
||||
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"
|
||||
>
|
||||
<!-- 点赞 -->
|
||||
<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="h-9 w-9 center rounded-full bg-transparent">
|
||||
<wd-icon name="chat" color="#6B7280" :size="18" />
|
||||
<view class="flex flex-1 items-center justify-center gap-x-1">
|
||||
<view class="center rounded-full bg-transparent">
|
||||
<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="h-9 w-9 center rounded-full bg-transparent">
|
||||
<wd-icon name="share" color="#6B7280" :size="18" />
|
||||
<view class="flex flex-1 items-center justify-center gap-x-1" @click="handleShare">
|
||||
<view class="center rounded-full bg-transparent">
|
||||
<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>
|
||||
|
||||
+1
-1
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user