gxwebsoft/aishangjia-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ai-house): 支持 Markdown 并优化找房交互

Browse Source
This commit is contained in:
weicw
2026-08-08 06:48:09 +08:00
parent d6861ab8c4
commit 87890a10ed
8 changed files with 138 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.js
+2 -2
View File
@@ -10,8 +10,8 @@ module.exports = {
// 生产环境
serverUrl: 'https://server.websoft.top/api',
// apiUrl: 'http://127.0.0.1:9200/api',
apiUrl: 'https://cms-api.websoft.top/api',
apiUrl: 'http://127.0.0.1:9200/api',
// apiUrl: 'https://cms-api.websoft.top/api',
socketUrl: 'wss://server.websoft.top',
fileUrl: 'https://file.wsdns.cn',
pages/ai-house/index.vue
+22 -197
View File
@@ -2,14 +2,6 @@
<view class="page">
<view class="page-toolbar">
<view class="page-toolbar-title">AI找房助手</view>
<view
class="clear-session-btn"
:class="{ 'clear-session-btn-disabled': loading }"
@click="confirmClearSession"
>
<u-icon name="trash" size="18" color="#667085"></u-icon>
<text class="clear-session-text">清空</text>
</view>
</view>
<view class="message-scroll">
<view class="message-content">
@@ -41,7 +33,7 @@
></image>
<view :class="['message-bubble', message.role === 'user' ? 'bubble-user' : 'bubble-ai']">
<view v-if="message.type === 'form'" class="form-message">
<view class="form-title">{{ message.content || '您好，请填写您的找房需求' }}</view>
<!-- <view class="form-title">{{ message.content || '您好，请填写您的找房需求' }}</view> -->
<view class="form-desc">填写楼盘、面积和预算，我来帮您筛选合适的房源。</view>
<view class="form-item">
<text class="form-label">楼盘</text>
@@ -118,7 +110,12 @@
</view>
</view>
<view v-else-if="message.type === 'text'" class="text-message">
<view user-select>{{ message.content }}</view>
<mp-html
v-if="message.role === 'ai'"
:content="message.content"
markdown
/>
<view v-else user-select>{{ message.content }}</view>
<!-- <view-->
<!-- v-if="message.content"-->
<!-- class="copy-btn"-->
@@ -132,25 +129,6 @@
<!-- <text class="copy-text">复制</text>-->
<!-- </view>-->
</view>
<view v-else-if="message.type === 'location'" class="location-message">
<view class="result-title">{{ message.content }}</view>
<view v-for="item in message.locationCards" :key="item.locationId" class="location-card">
<view class="location-card-title">{{ item.locationName }}</view>
<view v-if="item.parentLocationName || item.city" class="location-card-path">
{{ [item.city, item.parentLocationName].filter(Boolean).join(' / ') }}
</view>
<view v-if="item.tags && item.tags.length" class="location-tag-row">
<text v-for="tag in item.tags" :key="tag" class="location-tag">{{ tag }}</text>
</view>
<view v-for="knowledge in item.knowledgeItems" :key="knowledge.topic" class="location-knowledge-item">
<view class="location-knowledge-title">{{ knowledge.title }}</view>
<view v-if="locationKnowledgeFacts(knowledge)" class="location-knowledge-facts">
{{ locationKnowledgeFacts(knowledge) }}
</view>
<view v-if="knowledge.content" class="location-knowledge-content">{{ knowledge.content }}</view>
</view>
</view>
</view>
<view v-else-if="message.type === 'contact'" class="contact-message">
<button class="contact-btn" open-type="contact">{{ message.content || '联系客服' }}</button>
</view>
@@ -218,6 +196,14 @@
>
{{ item.label }}
</view>
<view
class="clear-session-btn clear-session-btn-inline"
:class="{ 'clear-session-btn-disabled': loading }"
@click="confirmClearSession"
>
<u-icon name="trash" size="18" color="#667085"></u-icon>
<text class="clear-session-text">清空</text>
</view>
</view>
<view class="input-row">
<input
@@ -260,15 +246,15 @@
quickQuestions: [
{
label: '面积和价格',
question: '这套房的面积和价格是多少？'
question: '介绍一下所有楼盘的面积和价格。'
},
{
label: '物业和水电',
question: '这套房的物业费和水电怎么收费？'
question: '介绍一下所有楼盘的物业费和水电收费情况。'
},
{
label: '空调和停车',
question: '这套房有空调和停车位吗？'
question: '介绍一下所有楼盘是否配备空调和停车位。'
}
],
inputText: '',
@@ -654,84 +640,6 @@
}
return []
},
normalizeLocationCards(value) {
return this.normalizeStructuredArray(value)
.map((item, index) => {
if (!item || typeof item !== 'object') {
return null
}
return {
...item,
locationId: item.locationId ?? item.location_id ?? `location-${index}`,
locationName: item.locationName ?? item.location_name ?? item.name ?? '地点资料',
parentLocationName: item.parentLocationName ?? item.parent_location_name ?? '',
tags: this.normalizeLocationTags(item.tags),
knowledgeItems: this.normalizeLocationKnowledgeItems(
item.knowledgeItems !== undefined ? item.knowledgeItems : item.knowledge_items
)
}
})
.filter(Boolean)
},
normalizeStructuredArray(value) {
if (Array.isArray(value)) {
return value
}
if (typeof value === 'string') {
try {
const parsed = JSON.parse(value)
return Array.isArray(parsed) ? parsed : (parsed && typeof parsed === 'object' ? [parsed] : [])
} catch (error) {
return []
}
}
return value && typeof value === 'object' ? [value] : []
},
normalizeLocationTags(value) {
if (Array.isArray(value)) {
return value.filter(Boolean).map((item) => String(item))
}
if (typeof value === 'string') {
const tags = this.normalizeStructuredArray(value)
if (tags.length) {
return tags.filter(Boolean).map((item) => String(item))
}
return value.split(/[，,]/).map((item) => item.trim()).filter(Boolean)
}
return []
},
normalizeLocationKnowledgeItems(value) {
return this.normalizeStructuredArray(value)
.map((item, index) => {
if (!item || typeof item !== 'object') {
return null
}
return {
...item,
topic: item.topic || `knowledge-${index}`,
name: item.name || '',
title: item.title || '补充信息',
propertyCompany: item.propertyCompany ?? item.property_company,
propertyFees: item.propertyFees ?? item.property_fees,
waterBillingType: item.waterBillingType ?? item.water_billing_type,
waterUnitPrice: item.waterUnitPrice ?? item.water_unit_price,
electricityBillingType: item.electricityBillingType ?? item.electricity_billing_type,
electricityUnitPrice: item.electricityUnitPrice ?? item.electricity_unit_price,
parkingAvailable: this.normalizeBoolean(item.parkingAvailable ?? item.parking_available),
parkingFee: item.parkingFee ?? item.parking_fee
}
})
.filter(Boolean)
},
normalizeBoolean(value) {
if (value === 'true' || value === 1 || value === '1') {
return true
}
if (value === 'false' || value === 0 || value === '0') {
return false
}
return value
},
connectWebSocket() {
if (!this.loginUserId) {
return
@@ -847,17 +755,6 @@
})
)
}
const locationCards = this.normalizeLocationCards(
data.locationCards !== undefined ? data.locationCards : data.location_cards
)
if (locationCards.length) {
this.messages.push(
this.createMessage('ai', 'location', {
content: '以下地点资料来自已维护的知识库：',
locationCards
})
)
}
if (data.showContactForm) {
this.messages.push(this.createMessage('ai', 'messageForm'))
}
@@ -872,19 +769,6 @@
url: `/sub_pages/house/detail?houseId=${item.houseId}`
})
},
locationKnowledgeFacts(item) {
const facts = []
if (item.propertyCompany) facts.push(`物业公司：${item.propertyCompany}`)
if (item.propertyFees !== null && item.propertyFees !== undefined) facts.push(`物业费：${item.propertyFees}`)
if (item.waterBillingType) facts.push(`水费：${item.waterBillingType}`)
if (item.waterUnitPrice !== null && item.waterUnitPrice !== undefined) facts.push(`水费单价：${item.waterUnitPrice}`)
if (item.electricityBillingType) facts.push(`电费：${item.electricityBillingType}`)
if (item.electricityUnitPrice !== null && item.electricityUnitPrice !== undefined) facts.push(`电费单价：${item.electricityUnitPrice}`)
if (item.parkingAvailable === true) facts.push('停车：可用')
if (item.parkingAvailable === false) facts.push('停车：不可用')
if (item.parkingFee) facts.push(`停车费用：${item.parkingFee}`)
return facts.join('；')
},
scrollToBottom() {
this.$nextTick(() => {
setTimeout(() => {
@@ -939,6 +823,10 @@
opacity: 0.45;
}
.clear-session-btn-inline {
margin-left: auto;
}
.message-scroll {
padding: 24rpx 24rpx 0;
box-sizing: border-box;
@@ -1055,69 +943,6 @@
justify-content: flex-start;
}
.location-message {
padding: 20rpx;
border-radius: 24rpx;
background: #f8fbff;
border: 1rpx solid #e6eefc;
}
.location-card {
margin-top: 16rpx;
padding: 20rpx;
border-radius: 16rpx;
background: #ffffff;
border: 1rpx solid #e9edf5;
}
.location-card-title {
font-size: 30rpx;
font-weight: 600;
color: #1f2937;
}
.location-card-path {
margin-top: 8rpx;
font-size: 23rpx;
color: #667085;
}
.location-tag-row {
display: flex;
flex-wrap: wrap;
gap: 8rpx;
margin-top: 14rpx;
}
.location-tag {
padding: 4rpx 12rpx;
border-radius: 8rpx;
background: #eef6ff;
color: #2f5f9f;
font-size: 21rpx;
}
.location-knowledge-item {
margin-top: 16rpx;
padding-top: 16rpx;
border-top: 1rpx solid #eef1f6;
}
.location-knowledge-title {
font-size: 26rpx;
font-weight: 600;
color: #344054;
}
.location-knowledge-facts,
.location-knowledge-content {
margin-top: 8rpx;
font-size: 24rpx;
line-height: 1.55;
color: #667085;
word-break: break-all;
}
.faq-message {
padding: 8rpx 0 0;
}
tests/check-ai-house-location-response.js
+23 -41
View File
@@ -29,47 +29,29 @@ function createPageVm() {
return vm
}
function receiveLocationResponse(fieldName, locationCards) {
const vm = createPageVm()
const response = {
type: 'house_ai_result',
answer: '已按已维护的地点资料筛选，以下地点可供参考。'
}
response[fieldName] = locationCards
vm.handleSocketMessage(JSON.stringify(response))
return vm.messages.find((message) => message.type === 'location')
}
const locationCard = {
location_id: 101,
city: '南宁市',
location_name: '五象航洋城',
parent_location_name: '五象新区',
tags: ['停车方便'],
knowledge_items: [{
topic: 'parking',
title: '停车',
parking_available: true,
parking_fee: '月租 300 元'
const vm = createPageVm()
vm.handleSocketMessage(JSON.stringify({
type: 'house_ai_result',
answer: '航洋城附近通勤方便，停车以现场政策为准。',
locationCards: [{
locationId: 101,
locationName: '航洋城',
knowledgeItems: [{ title: '停车' }]
}],
houses: [{
houseId: 201,
houseTitle: '航洋城附近两居室',
files: []
}]
}
}))
const locationMessage = receiveLocationResponse('location_cards', JSON.stringify([locationCard]))
assert.equal(vm.messages.filter((message) => message.type === 'location').length, 0,
'地点资料不应在小程序中创建卡片消息')
assert.equal(vm.messages.filter((message) => message.type === 'text').length, 1,
'地点资料应由 AI 直接组织为文本回答')
assert.equal(vm.messages.find((message) => message.type === 'text').content,
'航洋城附近通勤方便，停车以现场政策为准。')
assert.equal(vm.messages.filter((message) => message.type === 'list').length, 1,
'房源结果仍应创建房源卡片消息')
assert.ok(locationMessage, '地点咨询回包应创建地点卡片消息')
assert.ok(Array.isArray(locationMessage.locationCards), '地点卡片应转换为数组')
assert.equal(locationMessage.locationCards[0].locationId, 101)
assert.equal(locationMessage.locationCards[0].locationName, '五象航洋城')
assert.equal(locationMessage.locationCards[0].knowledgeItems[0].parkingAvailable, true)
const backendLocationMessage = receiveLocationResponse('locationCards', [{
locationId: 102,
city: '南宁市',
locationName: '会展航洋城',
knowledgeItems: []
}])
assert.ok(backendLocationMessage, '后端驼峰地点卡片回包应保持兼容')
assert.equal(backendLocationMessage.locationCards[0].locationName, '会展航洋城')
console.log('地点咨询回包能够创建可渲染的地点卡片消息')
console.log('地点资料仅由 AI 组织为文本，页面不渲染地点卡片')
tests/check-ai-house-markdown.js
+24
View File
@@ -0,0 +1,24 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const path = require('node:path')
const root = path.resolve(__dirname, '..')
const pagePath = path.join(root, 'pages/ai-house/index.vue')
const componentPath = path.join(root, 'uni_modules/mp-html/components/mp-html/mp-html.vue')
const markdownPluginPath = path.join(root, 'uni_modules/mp-html/components/mp-html/markdown/index.js')
const page = fs.readFileSync(pagePath, 'utf8')
const component = fs.readFileSync(componentPath, 'utf8')
assert.match(page, /v-if="message\.role === 'ai'"[\s\S]*:content="message\.content"[\s\S]*markdown/)
assert.match(component, /markdown:\s*Boolean/)
assert.match(component, /require\('\.\/markdown\/index\.js'\)/)
const Markdown = require(markdownPluginPath)
const html = new Markdown({ markdown: true }).onUpdate('# 标题\n\n**重点**\n\n- 房源 A')
assert.match(html, /<h1[^>]*>标题<\/h1>/)
assert.match(html, /<strong>重点<\/strong>/)
assert.match(html, /<li>房源 A<\/li>/)
console.log('AI 找房 Markdown 渲染配置检查通过')
tests/check-ai-house-quick-questions.js
+24
View File
@@ -0,0 +1,24 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const path = require('node:path')
const pagePath = path.resolve(__dirname, '../pages/ai-house/index.vue')
const page = fs.readFileSync(pagePath, 'utf8')
for (const label of ['面积和价格', '物业和水电', '空调和停车']) {
assert.match(page, new RegExp(`label: '${label}'`))
}
for (const question of [
'介绍一下所有楼盘的面积和价格。',
'介绍一下所有楼盘的物业费和水电收费情况。',
'介绍一下所有楼盘是否配备空调和停车位。'
]) {
assert.ok(page.includes(`question: '${question}'`))
}
assert.ok(!page.includes('这套房的面积和价格是多少？'))
assert.ok(!page.includes('这套房的物业费和水电怎么收费？'))
assert.ok(!page.includes('这套房有空调和停车位吗？'))
console.log('AI 找房全量楼盘快捷提问检查通过')
uni_modules/mp-html/components/mp-html/markdown/index.js
+34
View File
@@ -0,0 +1,34 @@
/**
* @fileoverview markdown 插件
* Include marked (https://github.com/markedjs/marked)
* Include github-markdown-css (https://github.com/sindresorhus/github-markdown-css)
*/
const marked = require('./marked.min')
let index = 0
function Markdown (vm) {
this.vm = vm
vm._ids = {}
}
Markdown.prototype.onUpdate = function (content) {
if (this.vm.markdown) {
return marked(content)
}
}
Markdown.prototype.onParse = function (node, vm) {
if (vm.options.markdown) {
// 中文 id 需要转换，否则无法跳转
if (vm.options.useAnchor && node.attrs && /[\u4e00-\u9fa5]/.test(node.attrs.id)) {
const id = 't' + index++
this.vm._ids[node.attrs.id] = id
node.attrs.id = id
}
if (node.name === 'p' || node.name === 'table' || node.name === 'tr' || node.name === 'th' || node.name === 'td' || node.name === 'blockquote' || node.name === 'pre' || node.name === 'code') {
node.attrs.class = `md-${node.name} ${node.attrs.class || ''}`
}
}
}
module.exports = Markdown
uni_modules/mp-html/components/mp-html/markdown/marked.min.js
Vendored
+6
View File
File diff suppressed because one or more lines are too long
uni_modules/mp-html/components/mp-html/mp-html.vue
+3 -1
View File
@@ -39,7 +39,7 @@
// #ifndef APP-PLUS-NVUE
import node from './node/node'
// #endif
const plugins=[]
const plugins=[require('./markdown/index.js')]
const Parser = require('./parser')
// #ifdef APP-PLUS-NVUE
const dom = weex.requireModule('dom')
@@ -55,6 +55,7 @@ export default {
}
},
props: {
markdown: Boolean,
containerStyle: {
type: String,
default: ''
@@ -152,6 +153,7 @@ export default {
* @returns {Promise}
*/
navigateTo (id, offset) {
id = this._ids[decodeURI(id)] || id
return new Promise((resolve, reject) => {
if (!this.useAnchor) {
reject(Error('Anchor is disabled'))