feat: rebuild reply button
This commit is contained in:
parent
c5f62d9e45
commit
a9c7403037
|
@ -1,6 +1,9 @@
|
||||||
export function getPlainText(html: string): string {
|
export function getPlainText(html: string): string {
|
||||||
const re1 = new RegExp('<.+?>', 'g')
|
// 使用正则表达式匹配所有HTML标签并删除
|
||||||
const arrEntities: Record<string, string> = {
|
const plainText = html.replace(/<[^>]*>/g, '')
|
||||||
|
|
||||||
|
// 使用实体编码映射表将HTML实体编码还原
|
||||||
|
const entityMap: Record<string, string> = {
|
||||||
lt: '<',
|
lt: '<',
|
||||||
gt: '>',
|
gt: '>',
|
||||||
nbsp: ' ',
|
nbsp: ' ',
|
||||||
|
@ -11,11 +14,10 @@ export function getPlainText(html: string): string {
|
||||||
rdquo: '”',
|
rdquo: '”',
|
||||||
}
|
}
|
||||||
|
|
||||||
const plainText = html
|
// 使用正则表达式匹配实体编码并还原
|
||||||
.replace(re1, '')
|
const decodedText = plainText.replace(/&(\w+);/g, function (match, entity) {
|
||||||
.replace(/&(lt|gt|nbsp|amp|quot|ldquo|mdash|rdquo);/gi, function (all, t) {
|
return entityMap[entity] || match
|
||||||
return arrEntities[t]
|
|
||||||
})
|
})
|
||||||
|
|
||||||
return plainText
|
return decodedText
|
||||||
}
|
}
|
||||||
|
|
|
@ -87,7 +87,8 @@ const loliStatus = computed(() => {
|
||||||
<div class="content-bottom">
|
<div class="content-bottom">
|
||||||
<!-- 话题状态 -->
|
<!-- 话题状态 -->
|
||||||
<div class="status">
|
<div class="status">
|
||||||
话题状态:<span :class="loliStatus">{{ loliStatus }}</span>
|
<span>{{ `${$tm('topic.content.status')}:` }}</span>
|
||||||
|
<span :class="loliStatus">{{ loliStatus }}</span>
|
||||||
</div>
|
</div>
|
||||||
<Rewrite v-if="edited" :time="edited" />
|
<Rewrite v-if="edited" :time="edited" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -196,6 +197,10 @@ const loliStatus = computed(() => {
|
||||||
color: var(--kungalgame-font-color-3);
|
color: var(--kungalgame-font-color-3);
|
||||||
/* 话题状态 */
|
/* 话题状态 */
|
||||||
span {
|
span {
|
||||||
|
&:nth-child(1) {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
color: var(--kungalgame-white);
|
color: var(--kungalgame-white);
|
||||||
|
@ -204,6 +209,7 @@ const loliStatus = computed(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 话题的 status */
|
/* 话题的 status */
|
||||||
.normal {
|
.normal {
|
||||||
|
|
|
@ -3,8 +3,6 @@
|
||||||
import { nextTick } from 'vue'
|
import { nextTick } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { Icon } from '@iconify/vue'
|
import { Icon } from '@iconify/vue'
|
||||||
// 引入流光环绕的特效
|
|
||||||
import '@/styles/effect/effect.scss'
|
|
||||||
|
|
||||||
import { TopicUserInfo } from '@/api'
|
import { TopicUserInfo } from '@/api'
|
||||||
|
|
||||||
|
@ -79,13 +77,8 @@ const handelReply = async () => {
|
||||||
<!-- 底部右侧部分(回复、评论、只看、编辑) -->
|
<!-- 底部右侧部分(回复、评论、只看、编辑) -->
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li @click="handelReply">
|
||||||
<!-- 对所有此类元素应用样式 -->
|
<div class="reply">
|
||||||
<div class="kungalgame-comet-surround" @click="handelReply">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
{{ $tm('topic.content.reply') }}
|
{{ $tm('topic.content.reply') }}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -157,10 +150,51 @@ const handelReply = async () => {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
li {
|
li {
|
||||||
margin-right: 17px;
|
margin-right: 17px;
|
||||||
&:nth-child(1) {
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply {
|
||||||
|
position: relative;
|
||||||
|
width: 70px;
|
||||||
|
height: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--kungalgame-blue-4);
|
||||||
|
box-shadow: inset 0 0 0 2px var(--kungalgame-blue-1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: var(--kungalgame-pink-4);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: width 0.2s, height 0.2s, border-bottom-color 0s;
|
||||||
|
transition-delay: 0.2s, 0s, 0.2s;
|
||||||
|
width: 70px;
|
||||||
|
height: 30px;
|
||||||
|
border-left: 2px solid var(--kungalgame-pink-4);
|
||||||
|
border-bottom: 2px solid var(--kungalgame-pink-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: width 0.2s, height 0.2s, border-right-color 0.2s;
|
||||||
|
transition-delay: 0s, 0.2s, 0.2s;
|
||||||
|
width: 70px;
|
||||||
|
height: 30px;
|
||||||
|
border-top: 2px solid var(--kungalgame-pink-4);
|
||||||
|
border-right: 2px solid var(--kungalgame-pink-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue