fix: 对话md渲染优化

This commit is contained in:
Gsh
2025-07-14 22:20:32 +08:00
parent 5162f9ce3b
commit 1ef82e5f93
4 changed files with 134 additions and 17 deletions

View File

@@ -48,7 +48,7 @@
"radash": "^12.1.0", "radash": "^12.1.0",
"reset-css": "^5.0.2", "reset-css": "^5.0.2",
"vue": "^3.5.16", "vue": "^3.5.16",
"vue-element-plus-x": "1.2.26-beta", "vue-element-plus-x": "1.2.3-beta",
"vue-router": "4" "vue-router": "4"
}, },
"devDependencies": { "devDependencies": {

View File

@@ -66,8 +66,8 @@ importers:
specifier: ^3.5.16 specifier: ^3.5.16
version: 3.5.16(typescript@5.8.3) version: 3.5.16(typescript@5.8.3)
vue-element-plus-x: vue-element-plus-x:
specifier: 1.2.26-beta specifier: 1.2.3-beta
version: 1.2.26-beta(@element-plus/icons-vue@2.3.1(vue@3.5.16(typescript@5.8.3)))(element-plus@2.9.11(vue@3.5.16(typescript@5.8.3)))(typescript-api-pro@0.0.7)(typescript@5.8.3) version: 1.2.3-beta(@element-plus/icons-vue@2.3.1(vue@3.5.16(typescript@5.8.3)))(element-plus@2.9.11(vue@3.5.16(typescript@5.8.3)))(typescript-api-pro@0.0.7)(typescript@5.8.3)
vue-router: vue-router:
specifier: '4' specifier: '4'
version: 4.5.1(vue@3.5.16(typescript@5.8.3)) version: 4.5.1(vue@3.5.16(typescript@5.8.3))
@@ -4388,6 +4388,11 @@ packages:
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}
hasBin: true hasBin: true
swrv@1.1.0:
resolution: {integrity: sha512-pjllRDr2s0iTwiE5Isvip51dZGR7GjLH1gCSVyE8bQnbAx6xackXsFdojau+1O5u98yHF5V73HQGOFxKUXO9gQ==}
peerDependencies:
vue: '>=3.2.26 < 4'
sync-child-process@1.0.2: sync-child-process@1.0.2:
resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==} resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
engines: {node: '>=16.0.0'} engines: {node: '>=16.0.0'}
@@ -4741,8 +4746,8 @@ packages:
'@vue/composition-api': '@vue/composition-api':
optional: true optional: true
vue-element-plus-x@1.2.26-beta: vue-element-plus-x@1.2.3-beta:
resolution: {integrity: sha512-Y50DoIUPYJxmKsINN1vJ334d8trx1xWrrqyDAt3MMbdKVh4v0nL1Px2WSXhljhr93ca3Ibf12Cmbl+Fa01wZsQ==} resolution: {integrity: sha512-s5C1Mv6Y+dqwZFV7k4t5GuKLkTlCl0/032qiwRCp2pFZldZDkTCaVMnxv3Hlny1Xf7asFrW4ljPHsQQA46PKHA==}
peerDependencies: peerDependencies:
'@element-plus/icons-vue': ^2.3.1 '@element-plus/icons-vue': ^2.3.1
element-plus: ^2.9.7 element-plus: ^2.9.7
@@ -9807,6 +9812,10 @@ snapshots:
picocolors: 1.1.1 picocolors: 1.1.1
stable: 0.1.8 stable: 0.1.8
swrv@1.1.0(vue@3.5.17(typescript@5.8.3)):
dependencies:
vue: 3.5.17(typescript@5.8.3)
sync-child-process@1.0.2: sync-child-process@1.0.2:
dependencies: dependencies:
sync-message-port: 1.1.3 sync-message-port: 1.1.3
@@ -10243,7 +10252,7 @@ snapshots:
dependencies: dependencies:
vue: 3.5.16(typescript@5.8.3) vue: 3.5.16(typescript@5.8.3)
vue-element-plus-x@1.2.26-beta(@element-plus/icons-vue@2.3.1(vue@3.5.16(typescript@5.8.3)))(element-plus@2.9.11(vue@3.5.16(typescript@5.8.3)))(typescript-api-pro@0.0.7)(typescript@5.8.3): vue-element-plus-x@1.2.3-beta(@element-plus/icons-vue@2.3.1(vue@3.5.16(typescript@5.8.3)))(element-plus@2.9.11(vue@3.5.16(typescript@5.8.3)))(typescript-api-pro@0.0.7)(typescript@5.8.3):
dependencies: dependencies:
'@element-plus/icons-vue': 2.3.1(vue@3.5.16(typescript@5.8.3)) '@element-plus/icons-vue': 2.3.1(vue@3.5.16(typescript@5.8.3))
'@shikijs/transformers': 3.7.0 '@shikijs/transformers': 3.7.0
@@ -10266,6 +10275,7 @@ snapshots:
remark-math: 6.0.0 remark-math: 6.0.0
remark-parse: 11.0.0 remark-parse: 11.0.0
remark-rehype: 11.1.2 remark-rehype: 11.1.2
swrv: 1.1.0(vue@3.5.17(typescript@5.8.3))
typescript-api-pro: 0.0.7 typescript-api-pro: 0.0.7
unified: 11.0.5 unified: 11.0.5
vue: 3.5.17(typescript@5.8.3) vue: 3.5.17(typescript@5.8.3)

View File

@@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ElMessageBox } from 'element-plus';
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { getUserInfo } from '@/api'; import { getUserInfo } from '@/api';
@@ -60,7 +61,7 @@ function handleThirdPartyLogin() {
const popup = window.open( const popup = window.open(
`${SSO_SEVER_URL}/login?client_id=${SSO_CLIENT_ID}&redirect_uri=${redirectUri}`, `${SSO_SEVER_URL}/login?client_id=${SSO_CLIENT_ID}&redirect_uri=${redirectUri}`,
'SSOLogin', 'SSOLogin',
'width=800,height=600', 'width=1000,height=800',
); );
// 使用标志位防止重复执行 // 使用标志位防止重复执行
@@ -106,7 +107,102 @@ function handleThirdPartyLogin() {
popup.close(); popup.close();
ElMessage.warning('登录超时'); ElMessage.warning('登录超时');
} }
}, 30000); // 30秒超时 }, 60 * 1000); // 60分钟超时关闭
}
const wxSrc = computed(
() => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/wx.png`,
);
// 微信群二维码
const wxGroupQD = `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/jlq.png`;
const srcList = [
wxGroupQD,
];
function openContact() {
ElMessageBox.alert(
`
<div class="text-center relative">
<h3 class="text-lg font-bold mb-3">请扫码或搜索微信号添加站长微信<br>
获取专属客服支持</h3>
<div class="mb-4 flex items-center justify-center space-x-2">
<span class="font-semibold">站长微信账号:</span>
<span class="text-blue-600 font-mono select-text" id="wechat-id">chengzilaoge520</span>
<span class="cursor-pointer" onclick="navigator.clipboard.writeText('chengzilaoge520').then(() => { window.parent.ElMessage({
message: '微信号已复制到剪贴板',
type: 'success',
duration: 2000,
});})"
title="点击复制">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-70 hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/>
</svg>
</span>
</div>
<div class="flex justify-center mb-4">
<div>
<h4>
站长微信
</h4>
<img
src="${wxSrc.value}"
class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
onclick="document.getElementById('wechat-qrcode-fullscreen').style.display = 'flex'"
alt="微信二维码"
>
</div><div>
<h4>
微信交流群
</h4>
<img
src="${wxGroupQD}"
class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
onclick="document.getElementById('wx-group-qrcode-fullscreen').style.display = 'flex'"
alt="微信二维码"
>
</div>
</div>
<div class="text-sm text-gray-600">
<p class="mb-1">请备注 <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">ai</span> 快速通过验证</p>
</div>
<!-- 全屏放大二维码 -->
<div
id="wechat-qrcode-fullscreen"
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
onclick="this.style.display='none'"
>
<img
src="${wxSrc.value}"
style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
/>
</div>
<div
id="wx-group-qrcode-fullscreen"
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
onclick="this.style.display='none'"
>
<img
src="${wxGroupQD}"
style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
/>
</div>
</div>
`,
'联系站长',
{
confirmButtonText: '我知道了',
dangerouslyUseHTMLString: true,
customClass: 'wechat-message-box',
callback: () => {
},
},
);
} }
</script> </script>
@@ -149,7 +245,9 @@ function handleThirdPartyLogin() {
<!-- 新增第三方登录按钮 --> <!-- 新增第三方登录按钮 -->
<div class="third-party-login"> <div class="third-party-login">
<el-divider content-position="center"> <el-divider content-position="center">
点击下方登录 <p class="w-max">
点击下方图标登录
</p>
</el-divider> </el-divider>
<div class="third-party-buttons"> <div class="third-party-buttons">
<el-tooltip content="使用意社区账号登录" placement="top"> <el-tooltip content="使用意社区账号登录" placement="top">
@@ -158,9 +256,22 @@ function handleThirdPartyLogin() {
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<el-divider class="w-max">
<p class="w-max">
如遇问题请联系我们
</p>
</el-divider>
<el-button
class="w-full"
type="primary"
size="large"
style="background: #D7BD8D;color: white;border: #191919"
@click="openContact"
>
联系我们
</el-button>
</div> </div>
</div> </div>
<div v-if="loginFormType === 'RegistrationForm'" class="form-container"> <div v-if="loginFormType === 'RegistrationForm'" class="form-container">
<span class="content-title"> 登录后免费使用完整功能 </span> <span class="content-title"> 登录后免费使用完整功能 </span>
@@ -345,8 +456,8 @@ function handleThirdPartyLogin() {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 44px; width: 66px;
height: 44px; height: 66px;
cursor: pointer; cursor: pointer;
background-color: #f5f7fa; background-color: #f5f7fa;
border-radius: 50%; border-radius: 50%;

View File

@@ -271,10 +271,6 @@ watch(
}, },
); );
function markdownContent(item: any) {
return item.content;
}
// 复制 // 复制
function copy(item: any) { function copy(item: any) {
console.log('复制', item); console.log('复制', item);
@@ -296,7 +292,7 @@ function copy(item: any) {
</template> </template>
<!-- 自定义气泡内容 --> <!-- 自定义气泡内容 -->
<template #content="{ item }"> <template #content="{ item }">
<XMarkdown class="markdown-body" :markdown="markdownContent(item)" /> <XMarkdown v-if="item.content" class="markdown-body" :markdown="item.content" />
</template> </template>
<!-- 自定义底部 --> <!-- 自定义底部 -->