sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AI小程序端样式修复

Browse Source
This commit is contained in:
francis_fh
2026-01-22 14:05:22 +08:00
parent 96c89e0210
commit 80bd1ee181
6 changed files with 246 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
components/md-render/md-render.vue
View File

@@ -1,7 +1,12 @@
<template>
<view class="markdown-body">
<!-- 根据不同平台使用不同的渲染方式 -->
<!-- #ifdef MP-WEIXIN -->
<rich-text class="markdownRich" id="markdown-content" :nodes="renderedHtml" @itemclick="handleItemClick" />
<!-- <view class="markdown-body" v-html="renderedHtml"></view> -->
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="markdown-body" v-html="renderedHtml"></view>
<!-- #endif -->
</view>
</template>
@@ -267,7 +272,7 @@ ol {
</style>
<style lang="stylus">
.custom-more{
.custom-more
display: flex
justify-content: center
align-items: center
@@ -282,15 +287,16 @@ ol {
transition: all 0.3s ease
position: relative
overflow: hidden
.more-icon{
width: 32rpx;
height: 32rpx;
background: url('@/static/svg/seemore.svg') center center no-repeat;
.more-icon
width: 32rpx
height: 32rpx
background: url('@/static/svg/seemore.svg') center center no-repeat
background-size: 100% 100%
margin-left: 12rpx
filter: brightness(0) invert(1)
}
&::before {
&::before
content: ''
position: absolute
top: 0
@@ -299,93 +305,124 @@ ol {
height: 100%
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
transition: left 0.5s ease
}
&:active {
&:active
transform: translateY(2rpx)
box-shadow: 0rpx 4rpx 16rpx rgba(37, 107, 250, 0.4)
}
&:active::before {
&:active::before
left: 100%
}
}
/* 为小程序专门优化的样式 */
/* #ifdef MP-WEIXIN */
.rich-text-container
padding: 0 20rpx
.markdownRich
padding: 0
/* #endif */
.custom-card
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 28rpx 24rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-bottom: 20rpx;
position: relative;
display: flex;
background: #FFFFFF
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04)
border-radius: 20rpx
padding: 28rpx 24rpx
font-weight: 400
font-size: 28rpx
color: #333333
margin-bottom: 20rpx
position: relative
display: flex
flex-direction: column
/* 确保在小程序中边距正确应用 */
/* #ifdef MP-WEIXIN */
margin-left: auto
margin-right: auto
width: 100%
box-sizing: border-box
/* #endif */
.card-title
font-weight: 600;
display: flex;
align-items: center;
font-weight: 600
display: flex
align-items: center
justify-content: space-between
margin-bottom: 16rpx
.title-text
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
max-width: calc(100% - 160rpx);
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif
max-width: calc(100% - 160rpx)
overflow: hidden
text-overflow: ellipsis
font-size: 30rpx
line-height: 1.4
.card-salary
font-family: DIN-Medium;
font-size: 28rpx;
color: #FF6E1C;
font-family: DIN-Medium
font-size: 28rpx
color: #FF6E1C
line-height: 1.4
.card-company
margin-top: 16rpx;
max-width: calc(100%);
overflow: hidden;
margin-bottom: 22rpx
max-width: 100%
overflow: hidden
text-overflow: ellipsis
color: #6C7282;
color: #6C7282
line-height: 1.4
.card-info
margin-top: 22rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 40rpx;
display: flex
align-items: center
justify-content: space-between
padding-right: 40rpx
.info-item
display: flex;
position: relative;
align-items: center;
color: #256BFA;
font-size: 28rpx;
padding-right: 10rpx
display: flex
position: relative
align-items: center
&:last-child
color: #256BFA
font-size: 28rpx
padding-right: 10rpx
.position-nav
position: absolute;
right: -10rpx;
top: 50%;
position: absolute
right: -10rpx
top: 50%
transform: translateY(-50%)
.position-nav::before
position: absolute;
left: 0;
top: -4rpx;
content: '';
width: 4rpx;
height: 16rpx;
position: absolute
left: 0
top: -4rpx
content: ''
width: 4rpx
height: 16rpx
border-radius: 2rpx
background: #256BFA;
transform: translate(0, -50%) rotate(-45deg) ;
background: #256BFA
transform: translate(0, -50%) rotate(-45deg)
.position-nav::after
position: absolute;
left: 0;
top: -4rpx;
content: '';
width: 4rpx;
height: 16rpx;
position: absolute
left: 0
top: -4rpx
content: ''
width: 4rpx
height: 16rpx
border-radius: 2rpx
background: #256BFA;
background: #256BFA
transform: rotate(45deg)
.card-tag
font-weight: 500;
font-size: 24rpx;
color: #333333;
width: fit-content;
background: #F4F4F4;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 4rpx 20rpx;
margin-right: 16rpx;
font-weight: 500
font-size: 24rpx
color: #333333
width: fit-content
background: #F4F4F4
border-radius: 4rpx
padding: 4rpx 20rpx
margin-right: 16rpx
margin-bottom: 0
</style>

9
config.js
View File

@@ -6,8 +6,8 @@
*/
export default {
// baseUrl: 'http://39.98.44.136:8080', // 测试
baseUrl: 'https://www.xjksly.cn/api/ks', // 正式环境
// baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试
// baseUrl: 'https://www.xjksly.cn/api/ks', // 正式环境
baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试
// LCBaseUrl:'http://10.110.145.145:9100',//内网端口
// LCBaseUrlInner:'http://10.110.145.145:10100',//招聘、培训、帮扶
@@ -22,10 +22,11 @@ export default {
StreamBaseURl: 'https://www.xjksly.cn/api/ks/app/chat',
// StreamBaseURl: 'https://qd.zhaopinzao8dian.com/ai/test',
// 语音转文字
vioceBaseURl: 'wss://qd.zhaopinzao8dian.com/api/ks/app/speech/asr',
vioceBaseURl: 'https://www.xjksly.cn/api/ks/app/speech/asr',
// vioceBaseURl: 'wss://qd.zhaopinzao8dian.com/api/speech-recognition',
// 语音合成
speechSynthesis: 'wss://qd.zhaopinzao8dian.com/api/speech-synthesis',
speechSynthesis: 'https://www.xjksly.cn/api/ks/app/speech/tts',
// speechSynthesis: 'wss://qd.zhaopinzao8dian.com/api/speech-synthesis',
// indexedDB
DBversion: 2,
// 只使用本地缓寸的数据

5
hook/useTTSPlayer.js
View File

@@ -292,11 +292,6 @@ export function useTTSPlayer(wsUrl) {
onHide(cancelAudio)
onUnload(cancelAudio)
// 只在支持 AudioContext 的环境中初始化 WebSocket
if (audioContext) {
initWebSocket()
}
return {
speak,
pause,

99
pages/chat/components/ai-paging.vue
View File

@@ -134,9 +134,16 @@
<view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
</view>
<view v-if="isTyping" class="self">
<text class="message msg-loading">
<span class="ai-loading"></span>
</text>
<view class="message msg-loading">
<div class="loading-content">
<span class="ai-loading">
<span></span>
<span></span>
<span></span>
</span>
<text class="loading-text">AI正在思考中...</text>
</div>
</view>
</view>
</view>
</scroll-view>
@@ -1005,12 +1012,26 @@ image-margin-top = 40rpx
.messageNull
display: none
.msg-loading{
background: transparent;
font-size: 24rpx;
color: #8f8d8e;
background: #F6F6F6;
border-radius: 20rpx 0 20rpx 20rpx;
padding: 20rpx;
width: fit-content;
display: flex;
align-items: flex-end;
justify-content: flex-start;
align-items: center;
justify-content: center;
.loading-content{
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
}
.loading-text{
font-size: 28rpx;
color: #666666;
font-weight: 500;
}
}
.loaded{
padding-left: 20rpx
@@ -1250,25 +1271,55 @@ image-margin-top = 40rpx
.file-border
width: 160rpx !important;
@keyframes ai-circle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
/* 更美观的loading动画 - 兼容H5和小程序 */
@keyframes ai-loading-dots {
0%, 20%, 80%, 100% {
transform: scale(1);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
40% {
transform: scale(1.2);
opacity: 1;
}
}
.ai-loading
/* 重置默认样式 */
.ai-loading {
display: inline-flex;
vertical-align: middle;
width: 28rpx;
height: 28rpx;
background: 0 0;
align-items: center;
justify-content: center;
gap: 8rpx;
width: auto;
height: auto;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
/* 三个点的样式 - 使用标准CSS语法，不使用嵌套 */
.ai-loading span {
display: inline-block;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
border: 4rpx solid;
border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
-webkit-animation: ai-circle 1s linear infinite;
animation: ai-circle 1s linear infinite;
background-color: #256BFA;
animation: ai-loading-dots 1.4s ease-in-out infinite both;
margin: 0;
padding: 0;
}
/* 为每个点设置不同的动画延迟 */
.ai-loading span:nth-child(1) {
animation-delay: -0.32s;
}
.ai-loading span:nth-child(2) {
animation-delay: -0.16s;
}
.ai-loading span:nth-child(3) {
animation-delay: 0s;
}
</style>

4
pages/index/components/index-one.vue
View File

@@ -255,10 +255,10 @@
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
<text>添加</text>
</view>
<!-- <view class="jobs-add button-click" @click="navTo('/pages/city-select/index')" style="padding-right:0;">
<view class="jobs-add button-click" @click="navTo('/pages/city-select/index')" style="padding-right:0;">
<text>{{ selectedCity.name || '地区' }}</text>
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</view> -->
</view>
</view>
<view class="filter-bottom">
<view class="btm-left">

70
utils/markdownParser.js
View File

@@ -19,38 +19,20 @@ const md = new MarkdownIt({
const result = safeExtractJson(str);
if (result) { // json解析成功
const jobId = result.appJobUrl.split('jobId=')[1]
let domContext = `
<a class="custom-card" data-job-id="${jobId}">
<div class="card-title">
<span class="title-text" >${result.jobTitle}</span>
<div class="card-salary">${result.salary}</div>
</div>
<div class="card-company">${result.location}·${result.companyName}</div>
<div class="card-info">
<div class="info-item">
<div class="card-tag">${result.education}</div>
<div class="card-tag">${result.experience}</div>
</div>
<div class="info-item">查看详情<div class="position-nav"></div></div>
</div>
</a>
`
let domContext = `<a class="custom-card" data-job-id="${jobId}"><div class="card-title"><span class="title-text">${result.jobTitle}</span><div class="card-salary">${result.salary}</div></div><div class="card-company">${result.location}·${result.companyName}</div><div class="card-info"><div class="info-item"><div class="card-tag">${result.education}</div><div class="card-tag">${result.experience}</div></div><div class="info-item">查看详情<div class="position-nav"></div></div></div></a>`
if (result.data) {
jobMoreMap.set(jobId, result.data)
domContext +=
`<a class="custom-more" data-job-id="${jobId}">查看更多岗位<div class="more-icon"></div></a>`
domContext += `<a class="custom-more" data-job-id="${jobId}">查看更多岗位<div class="more-icon"></div></a>`
}
return domContext
}
}
// <div class="card-tag">${result.location}</div>
// <div class="info-item">${result.salary}</div>
// 代码块
let preCode = ""
try {
preCode = hljs.highlightAuto(str).value
} catch (err) {
preCode = markdownIt.utils.escapeHtml(str);
preCode = md.utils.escapeHtml(str);
}
// 以换行进行分割 , 按行拆分代码
const lines = preCode.split(/\n/).slice(0, -1);
@@ -58,7 +40,7 @@ const md = new MarkdownIt({
.map((line, index) =>
line ?
`<li><span class="line-num" data-line="${index + 1}"></span>${line}</li>` :
''
'<li></li>'
)
.join('');
@@ -127,9 +109,49 @@ export function clearJobMoreMap() { // 切换对话清空
export function parseMarkdown(content) {
if (!content) {
return //处理特殊情况，比如网络异常导致的响应的 content 的值为空
return [] //处理特殊情况，比如网络异常导致的响应的 content 的值为空
}
// 过滤掉<think>标签及其内容，这些是AI内部思考过程，不应该显示给用户
// 1. 处理原始标签（支持多行）
content = content.replace(/<\s*think\s*>[\s\S]*?<\s*\/\s*think\s*>/gi, '')
// 2. 处理HTML编码的标签
content = content.replace(/&lt;\s*think\s*&gt;[\s\S]*?&lt;\s*\/\s*think\s*&gt;/gi, '')
// 3. 处理部分编码的标签
content = content.replace(/&lt;\s*think\s*>/gi, '')
content = content.replace(/<\s*\/\s*think\s*&gt;/gi, '')
codeDataList = []
const unsafeHtml = md.render(content || '')
return unsafeHtml
// 在markdown渲染后再次过滤，确保没有遗漏
let filteredHtml = unsafeHtml
// 1. 处理原始标签（支持多行）
filteredHtml = filteredHtml.replace(/<\s*think\s*>[\s\S]*?<\s*\/\s*think\s*>/gi, '')
// 2. 处理HTML编码的标签
filteredHtml = filteredHtml.replace(/&lt;\s*think\s*&gt;[\s\S]*?&lt;\s*\/\s*think\s*&gt;/gi, '')
// 3. 处理部分编码的标签
filteredHtml = filteredHtml.replace(/&lt;\s*think\s*>/gi, '')
filteredHtml = filteredHtml.replace(/<\s*\/\s*think\s*&gt;/gi, '')
// 4. 单独处理剩余的think标签对
filteredHtml = filteredHtml.replace(/&lt;think&gt;/gi, '')
filteredHtml = filteredHtml.replace(/&lt;\/think&gt;/gi, '')
filteredHtml = filteredHtml.replace(/<think>/gi, '')
filteredHtml = filteredHtml.replace(/<\/think>/gi, '')
// 根据平台返回不同的内容格式
// 微信小程序：返回rich-text组件支持的nodes格式
// H5：直接返回HTML字符串，避免HTML解析错误
if (process.env.UNI_PLATFORM === 'mp-weixin') {
try {
return parseHtml(filteredHtml)
} catch (error) {
console.error('HTML解析失败:', error)
// 解析失败时返回空数组，避免页面崩溃
return []
}
} else {
// H5端直接返回HTML字符串
return filteredHtml
}
}