diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css index 42d4118be..4db59267d 100644 --- a/frontend_nuxt/assets/global.css +++ b/frontend_nuxt/assets/global.css @@ -205,7 +205,6 @@ body { border-radius: 4px; background-color: var(--code-highlight-background-color); color: var(--text-color); - white-space: pre; /* 禁止自动换行 */ } .copy-code-btn { @@ -370,7 +369,10 @@ body { .d2h-code-line { padding-left: 10px !important; } - + /* 手机端不换行 */ + .info-content-text code { + white-space: pre; /* 禁止自动换行 */ + } /* .d2h-diff-table { font-size: 6px !important; } diff --git a/frontend_nuxt/components/NotificationContainer.vue b/frontend_nuxt/components/NotificationContainer.vue index db002aab4..2a97a8fd7 100644 --- a/frontend_nuxt/components/NotificationContainer.vue +++ b/frontend_nuxt/components/NotificationContainer.vue @@ -45,6 +45,7 @@ export default { font-size: 12px; cursor: pointer; margin-left: 10px; + white-space: nowrap; } .mark-read-button:hover { @@ -53,6 +54,7 @@ export default { .has-read-button { font-size: 12px; + white-space: nowrap; } @media (max-width: 768px) { diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue index 9152c2927..e33a39000 100644 --- a/frontend_nuxt/pages/index.vue +++ b/frontend_nuxt/pages/index.vue @@ -76,7 +76,7 @@ {{ article.title }} -
+
@@ -143,6 +143,7 @@ import { useIsMobile } from '~/utils/screen' import BaseUserAvatar from '~/components/BaseUserAvatar.vue' import TimeManager from '~/utils/time' import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter' +import { stripMarkdownWithTiebaMoji } from '~/utils/markdown' useHead({ title: 'OpenIsle - 全面开源的自由社区', meta: [ @@ -378,27 +379,6 @@ onBeforeUnmount(() => { /** 供 InfiniteLoadMore 重建用的 key:筛选/Tab 改变即重建内部状态 */ const ioKey = computed(() => asyncKey.value.join('::')) -// 在首页摘要加载贴吧表情包 -const sanitizeDescription = (text) => { - if (!text) return '' - - // 1️⃣ 先把 Markdown 转成纯文本 - const plain = stripMarkdown(text) - - // 2️⃣ 替换 :tieba123: 为 - const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => { - const key = `tieba${num}` - const file = tiebaEmoji[key] - return file - ? `${key}` - : match // 没有匹配到图片则保留原样 - }) - - // 3️⃣ 可选:截断纯文本长度(防止撑太长) - const truncated = withEmoji.length > 500 ? withEmoji.slice(0, 500) + '…' : withEmoji - - return truncated -} // 页面选项同步到全局状态 watch([selectedCategory, selectedTags], ([newCategory, newTags]) => { diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue index 9e0b45a8b..e89680ec4 100644 --- a/frontend_nuxt/pages/message.vue +++ b/frontend_nuxt/pages/message.vue @@ -75,7 +75,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`" > - {{ stripMarkdownLength(item.parentComment.content, 100) }} + 回复了 @@ -85,7 +85,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`" > - {{ stripMarkdownLength(item.comment.content, 100) }} + @@ -115,7 +115,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`" > - {{ stripMarkdownLength(item.comment.content, 100) }} + @@ -162,7 +162,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`" > - {{ stripMarkdownLength(item.comment.content, 100) }} + 进行了表态 @@ -267,7 +267,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`" > - {{ stripMarkdownLength(item.comment.content, 100) }} + @@ -287,7 +287,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`" > - {{ stripMarkdownLength(item.parentComment.content, 100) }} + 回复了 - {{ stripMarkdownLength(item.comment.content, 100) }} + @@ -323,7 +323,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`" > - {{ stripMarkdownLength(item.comment.content, 100) }} + @@ -342,7 +342,7 @@ @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`" > - {{ stripMarkdownLength(item.comment.content, 100) }} + @@ -556,7 +556,7 @@ 删除了您的帖子 - {{ stripMarkdownLength(item.content, 100) }} + @@ -586,7 +586,7 @@ import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue' import BaseTabs from '~/components/BaseTabs.vue' import { toast } from '~/main' import { authState, getToken } from '~/utils/auth' -import { stripMarkdownLength } from '~/utils/markdown' +import { stripMarkdownWithTiebaMoji } from '~/utils/markdown' import { fetchNotifications, fetchUnreadCount, diff --git a/frontend_nuxt/utils/markdown.js b/frontend_nuxt/utils/markdown.js index 42d46c0c4..be28d6dfb 100644 --- a/frontend_nuxt/utils/markdown.js +++ b/frontend_nuxt/utils/markdown.js @@ -265,3 +265,26 @@ export function stripMarkdownLength(text, length) { } return plain.slice(0, length) + '...' } + +// 朴素文本带贴吧表情 +export function stripMarkdownWithTiebaMoji(text, length){ + console.error(text) + if (!text) return '' + + // Markdown 转成纯文本 + const plain = stripMarkdown(text) + console.error(plain) + // 替换 :tieba123: 为 + const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => { + const key = `tieba${num}` + const file = tiebaEmoji[key] + return file + ? `${key}` + : match // 没有匹配到图片则保留原样 + }) + + // 截断纯文本长度(防止撑太长) + const truncated = withEmoji.length > length ? withEmoji.slice(0, length) + '...' : withEmoji + return truncated + +}