jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-25 15:40:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1067 from smallclover/main

Browse Source 
tieba表情函数抽成共通
This commit is contained in:
Tim
2025-10-16 22:35:43 +08:00
committed by GitHub
parent a8667ce5e9 b3fa5e2bef
commit fa29d255c9
5 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_nuxt/assets/global.css
View File

@@ -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;
}

2
frontend_nuxt/components/NotificationContainer.vue
View File

@@ -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) {

24
frontend_nuxt/pages/index.vue
View File

@@ -76,7 +76,7 @@
{{ article.title }}
</NuxtLink>
<NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
<div v-html="sanitizeDescription(article.description)"></div>
<div v-html="stripMarkdownWithTiebaMoji(article.description, 500)"></div>
</NuxtLink>
<div class="article-info-container main-item">
<ArticleCategory :category="article.category" />
@@ -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: 为 <img>
const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => {
const key = `tieba${num}`
const file = tiebaEmoji[key]
return file
? `<img loading="lazy" class="emoji" src="${file}" alt="${key}">`
: match // 没有匹配到图片则保留原样
})
// 3️⃣ 可选：截断纯文本长度（防止撑太长）
const truncated = withEmoji.length > 500 ? withEmoji.slice(0, 500) + '…' : withEmoji
return truncated
}
// 页面选项同步到全局状态
watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {

22
frontend_nuxt/pages/message.vue
View File

@@ -75,7 +75,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
>
{{ stripMarkdownLength(item.parentComment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.parentComment.content, 500)"></span>
</NuxtLink>
</span>
回复了
@@ -85,7 +85,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</span>
</NotificationContainer>
@@ -115,7 +115,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</span>
</NotificationContainer>
@@ -162,7 +162,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</span>
进行了表态
@@ -267,7 +267,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</NotificationContainer>
</template>
@@ -287,7 +287,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
>
{{ stripMarkdownLength(item.parentComment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.parentComment.content, 500)"></span>
</NuxtLink>
回复了
<NuxtLink
@@ -295,7 +295,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</NotificationContainer>
</template>
@@ -323,7 +323,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</NotificationContainer>
</template>
@@ -342,7 +342,7 @@
@click="markRead(item.id)"
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
>
{{ stripMarkdownLength(item.comment.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
</NuxtLink>
</NotificationContainer>
</template>
@@ -556,7 +556,7 @@
</template>
删除了您的帖子
<span class="notif-content-text">
{{ stripMarkdownLength(item.content, 100) }}
<span v-html="stripMarkdownWithTiebaMoji(item.content, 500)"></span>
</span>
</NotificationContainer>
</template>
@@ -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,

23
frontend_nuxt/utils/markdown.js
View File

@@ -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: 为 <img>
const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => {
const key = `tieba${num}`
const file = tiebaEmoji[key]
return file
? `<img loading="lazy" class="emoji" src="${file}" alt="${key}">`
: match // 没有匹配到图片则保留原样
})
// 截断纯文本长度（防止撑太长）
const truncated = withEmoji.length > length ? withEmoji.slice(0, length) + '...' : withEmoji
return truncated
}