From d528d214b5e6a09b35fd8a0ffe978de67267aace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?= Date: Wed, 9 Sep 2026 17:47:54 +0800 Subject: [PATCH] =?UTF-8?q?style,refactor,feat:=20=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80=E4=B8=BA=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=9C=A8=E4=B8=8A=E5=B9=B6=E4=BC=98=E5=8C=96=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 调整全局默认卡片样式为image_top，更新各页面默认布局配置 2. 给文章卡片添加variant属性适配双列/单列布局 3. 优化文章内容区域文字样式与评论列表空状态 4. 简化快捷导航组件代码，移除冗余样式与多余props 5. 优化markdown渲染配置与评论头像空格格式 --- hermes/preferences.md | 11 ++++---- .../uh-article-card/uh-article-card.vue | 8 +++--- .../uh-comment-list/uh-comment-list.vue | 28 ++++++++----------- .../uh-home-quick-nav/uh-home-quick-nav.vue | 17 ++--------- src/config/appSettings.ts | 6 ++-- src/config/markdown.ts | 19 ++----------- src/pages-blog/archives/archives.vue | 1 + .../article-detail/article-detail.vue | 2 +- src/pages/tabbar/home/home.vue | 2 +- 9 files changed, 32 insertions(+), 62 deletions(-) diff --git a/hermes/preferences.md b/hermes/preferences.md index a30edac..44d246f 100644 --- a/hermes/preferences.md +++ b/hermes/preferences.md @@ -43,9 +43,9 @@ layout: { | 页面 | listLayout | cardType | |------|-----------|----------| -| home(首页) | `single` | `image_bottom` | -| articles(文章列表) | `double` | `image_bottom` | -| archives(文章归档) | `single` | `image_bottom` | +| home(首页) | `single` | `image_top` | +| articles(文章列表) | `double` | `image_top` | +| archives(文章归档) | `single` | `image_top` | ## 3. 后端插件字段映射(getConfigs.preferences) @@ -73,7 +73,7 @@ layout: { | `src/pages/tabbar/home/home.vue` | `layout.home.listLayout` 决定容器单/双列;卡片 `from="home"` 读 `layout.home.cardType` | | `src/pages-blog/articles/articles.vue` | `layout.articles.listLayout` 决定容器与 `variant`(grid/list);卡片 `from="articles"` | | `src/pages-blog/archives/archives.vue` | `layout.archives.listLayout` 决定归档时间线内单/双列;卡片 `from="archives"` | -| `src/components/uh-article-card/uh-article-card.vue` | 按 `from` 读取对应页面 `cardType` 作为 layout;grid/双列窄列自动回退 `image_top`;非法值兜底 `image_bottom` | +| `src/components/uh-article-card/uh-article-card.vue` | 按 `from` 读取对应页面 `cardType` 作为 layout;grid/双列窄列自动回退 `image_top`;非法值兜底 `image_top` | ## 5. 设置页枚举(「默认」= 跟随站点默认) @@ -85,5 +85,6 @@ layout: { | 版本 | 变更 | |------|------| -| v2.4 | 卡片样式值体系由旧 `lr_*/tb_*` 改为组件 layout 值 `image_top/image_right/image_bottom/image_left`;内置默认 cardType 统一为 `image_bottom`;移除 `uh-article-card` 旧值映射(`CARD_TYPE_TO_LAYOUT`),非法值兜底 `image_bottom` | +| v2.5 | 内置默认 cardType 统一为 `image_top`;组件非法值兜底同步为 `image_top` | +| v2.4 | 卡片样式值体系由旧 `lr_*/tb_*` 改为组件 layout 值 `image_top/image_right/image_bottom/image_left`;移除 `uh-article-card` 旧值映射(`CARD_TYPE_TO_LAYOUT`) | | v2.3 | 布局偏好由全局 `layout.home` / `layout.cardType`(字符串)重构为按页面分组 `layout.{home,articles,archives}.{listLayout,cardType}`;设置页增加「布局 / 功能」分段器与页面分组设置项;三个消费页面联动卡片 | diff --git a/src/components/uh-article-card/uh-article-card.vue b/src/components/uh-article-card/uh-article-card.vue index 64a913f..a6314d6 100644 --- a/src/components/uh-article-card/uh-article-card.vue +++ b/src/components/uh-article-card/uh-article-card.vue @@ -117,7 +117,7 @@ return raw }) - const cardLayout = computed(() => CARD_LAYOUTS[effectiveLayout.value] ?? CARD_LAYOUTS.image_bottom) + const cardLayout = computed(() => CARD_LAYOUTS[effectiveLayout.value] ?? CARD_LAYOUTS.image_top) /** 社交卡片形态(封面在下):左上用户信息(头像 + 昵称/日期垂直)、右上浏览数 */ const isSocialCard = computed(() => effectiveLayout.value === 'image_bottom') @@ -183,7 +183,7 @@ - + - {{ article.owner.displayName }} + {{ article.owner.displayName }} {{ publishTimeText }} - + 浏览 {{ visitCount }} 次 diff --git a/src/components/uh-comment-list/uh-comment-list.vue b/src/components/uh-comment-list/uh-comment-list.vue index ae2bfeb..30c2cf0 100644 --- a/src/components/uh-comment-list/uh-comment-list.vue +++ b/src/components/uh-comment-list/uh-comment-list.vue @@ -39,7 +39,7 @@ result.value = res.data dataList.value = res.data.items.map((item) => { // todo：临时 - item.spec.owner.avatar = checkAvatarUrl(item.spec.owner.avatar??'https://api.dicebear.com/10.x/adventurer-neutral/svg') + item.spec.owner.avatar = checkAvatarUrl(item.spec.owner.avatar ?? 'https://api.dicebear.com/10.x/adventurer-neutral/svg') return item }) loading.value = 'success' @@ -101,8 +101,7 @@ 评论列表 - - \ No newline at end of file + \ No newline at end of file diff --git a/src/config/appSettings.ts b/src/config/appSettings.ts index 8861b50..9c907ab 100644 --- a/src/config/appSettings.ts +++ b/src/config/appSettings.ts @@ -63,9 +63,9 @@ export const DefaultAppSettings: IAppSettings = { dotPosition: 'right', }, layout: { - home: { listLayout: 'single', cardType: 'image_bottom' }, - articles: { listLayout: 'double', cardType: 'image_bottom' }, - archives: { listLayout: 'single', cardType: 'image_bottom' }, + home: { listLayout: 'single', cardType: 'image_top' }, + articles: { listLayout: 'double', cardType: 'image_top' }, + archives: { listLayout: 'single', cardType: 'image_top' }, }, ad: { timeout: 3, diff --git a/src/config/markdown.ts b/src/config/markdown.ts index 29d6f88..610e4bc 100644 --- a/src/config/markdown.ts +++ b/src/config/markdown.ts @@ -1,16 +1,9 @@ -/** - * mp-html 富文本 / markdown 渲染业务配置 - * 源自旧项目 common/markdown/markdown.config.js,TS 化复刻(业务封装新建,插件本体走 npm mp-html) - * 用法: - */ import { checkImageUrl } from '@/utils/url' const primaryColor = '#B9E424' export const markdownConfig = { - /** 图片域名前缀(mp-html 相对路径补全,源自旧配置 domain: BASE_API) */ domain: import.meta.env.VITE_SERVER_BASEURL || '', - /** 标签样式定制(表格/引用/标题/代码等) */ tagStyle: { table: ` table-layout: fixed; @@ -25,13 +18,9 @@ export const markdownConfig = { `, th: ` padding: 8px; - border-right: 1px solid var(--classE); - border-bottom: 1px solid var(--classE); `, td: ` padding: 8px; - border-right: 1px solid var(--classE); - border-bottom: 1px solid var(--classE); `, blockquote: ` padding: 8px 15px; @@ -66,7 +55,7 @@ export const markdownConfig = { color: ${primaryColor}; line-height: 24px; position: relative; - margin: 26px 0 18px; + margin: 20px 0 14px; font-size: 1.14em; `, h4: ` @@ -93,15 +82,13 @@ export const markdownConfig = { p: ` line-height: 1.65; margin-bottom: 14px; - font-size: 14px; `, code: ' ', strong: 'font-weight: 700;color: rgb(248, 57, 41);', + img: 'border-radius: 10px', video: 'width: 100%', }, - /** 容器样式 */ - containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:0;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 0px;background-color:transparent;', - /** 加载图 / 空图(来自应用配置 imagesConfig) */ + containStyle: 'padding:0;background-color:transparent;', loadingGif: checkImageUrl(undefined), emptyGif: checkImageUrl(undefined), } diff --git a/src/pages-blog/archives/archives.vue b/src/pages-blog/archives/archives.vue index be37108..a4620c9 100644 --- a/src/pages-blog/archives/archives.vue +++ b/src/pages-blog/archives/archives.vue @@ -282,6 +282,7 @@ onReachBottom(() => { v-for="post in item.posts" :key="post.metadata.name" from="archives" + :variant="archivesListLayout === 'double' ? 'grid' : 'list'" :article="post" :audit-mode="calcAuditModeEnabled" /> diff --git a/src/pages-blog/article-detail/article-detail.vue b/src/pages-blog/article-detail/article-detail.vue index c68f0fc..6499222 100644 --- a/src/pages-blog/article-detail/article-detail.vue +++ b/src/pages-blog/article-detail/article-detail.vue @@ -539,7 +539,7 @@ - +