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