From df3f5f52698eaee0f9e333b4a056422c27a69ae9 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Tue, 12 Aug 2025 11:01:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90AI=E5=8A=A9=E6=89=8B=E5=92=8C?=
=?UTF-8?q?=E9=A2=86=E5=85=BB=E4=B8=93=E5=8C=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
✨ AI助手功能:
- 智能对话系统，支持宠物相关问题问答
- 快捷问题按钮，常见问题一键提问
- 知识库匹配，根据关键词智能回复
- 思考状态显示，模拟真实AI交互
- 宠物知识库页面，分类浏览知识内容
✨ 领养专区功能:
- 宠物领养信息展示
- 分类筛选（猫咪/狗狗/待领养）
- 搜索功能（品种/地区）
- 联系方式展示
- 现代化卡片布局
🎨 界面优化:
- 使用uView组件构建现代化界面
- 自定义导航栏和配色方案
- 响应式布局和交互动画
- 统一的设计语言
📱 用户体验:
- 流畅的对话交互
- 智能的内容匹配
- 便捷的筛选和搜索
- 清晰的信息展示
---
README.md | 65 +++----
pages.json | 12 +-
pages/adoption/adoption.vue | 179 ++++++++++++++++--
pages/assistant/assistant.vue | 340 ++++++++++++++++++++++++++++------
pages/assistant/knowledge.vue | 133 +++++++++++++
5 files changed, 614 insertions(+), 115 deletions(-)
create mode 100644 pages/assistant/knowledge.vue
diff --git a/README.md b/README.md
index 350267d..9c68e7c 100644
--- a/README.md
+++ b/README.md
@@ -19,48 +19,41 @@ pet-ai/
## 当前完成状态
✅ 基础项目结构搭建
-✅ Tab导航配置
-✅ 四个主要页面创建
-✅ 宠物页面基础功能
+✅ Tab导航配置和可爱宠物图标
+✅ uview-ui-next UI框架完整集成
+✅ 宠物管理完整功能
+ - 宠物列表展示
+ - 添加宠物（头像上传、信息录入）
+ - 宠物详情页面
+ - 添加宠物记录（支持照片上传）
+ - 本地存储数据持久化
+✅ 现代化UI界面和用户体验
## 待完成任务
-### 1. UI框架安装
-**推荐方式**：在HBuilderX中打开项目，通过插件市场安装uview-next
-- 插件市场地址：https://ext.dcloud.net.cn/plugin?id=24021
-- 插件ID：uview-next
-- 安装后需要配置main.js和uni.scss
+### 1. AI助手功能开发
+- [ ] 智能对话系统
+- [ ] 宠物知识库集成
+- [ ] 健康建议和提醒
+- [ ] 语音交互功能
-### 2. Tab图标获取
-需要为以下4个tab页面添加可爱的宠物主题图标：
-
-**推荐图标资源**：
-- [iconfont阿里巴巴矢量图标库](https://www.iconfont.cn/)
-- [Feather Icons](https://feathericons.com/)
-- [Heroicons](https://heroicons.com/)
-
-**所需图标**：
-- `static/tabbar/pets.png` - 宠物图标（如猫爪、宠物头像）
-- `static/tabbar/pets-active.png` - 宠物图标激活状态
-- `static/tabbar/assistant.png` - AI助手图标（如机器人、对话框）
-- `static/tabbar/assistant-active.png` - AI助手图标激活状态
-- `static/tabbar/adoption.png` - 领养图标（如爱心、房子）
-- `static/tabbar/adoption-active.png` - 领养图标激活状态
-- `static/tabbar/profile.png` - 个人中心图标（如用户头像）
-- `static/tabbar/profile-active.png` - 个人中心图标激活状态
-
-**图标规格**：
-- 尺寸：81px × 81px（推荐）
-- 格式：PNG
-- 背景：透明
-
-### 3. 功能完善
-- [ ] 宠物详情页面
-- [ ] 添加宠物页面
-- [ ] 宠物记录功能
-- [ ] AI对话功能
+### 2. 领养专区功能
- [ ] 领养信息发布
+- [ ] 领养信息浏览和搜索
+- [ ] 联系方式管理
+- [ ] 地理位置服务
+
+### 3. 用户系统完善
- [ ] 微信登录集成
+- [ ] 用户资料管理
+- [ ] 消息通知系统
+- [ ] 隐私设置
+
+### 4. 高级功能
+- [ ] 宠物健康档案
+- [ ] 疫苗提醒系统
+- [ ] 社区分享功能
+- [ ] 数据统计和分析
## 技术栈
diff --git a/pages.json b/pages.json
index 5cba2cc..5f4b807 100644
--- a/pages.json
+++ b/pages.json
@@ -13,7 +13,17 @@
"style": {
"navigationBarTitleText": "AI助手",
"navigationBarBackgroundColor": "#ffffff",
- "navigationBarTextStyle": "black"
+ "navigationBarTextStyle": "black",
+ "navigationStyle": "custom"
+ }
+ },
+ {
+ "path": "pages/assistant/knowledge",
+ "style": {
+ "navigationBarTitleText": "宠物知识库",
+ "navigationBarBackgroundColor": "#ffffff",
+ "navigationBarTextStyle": "black",
+ "navigationStyle": "custom"
}
},
{
diff --git a/pages/adoption/adoption.vue b/pages/adoption/adoption.vue
index eeb5084..18b7d57 100644
--- a/pages/adoption/adoption.vue
+++ b/pages/adoption/adoption.vue
@@ -1,41 +1,180 @@
-
-
-
- 宠物领养信息发布与浏览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/assistant/assistant.vue b/pages/assistant/assistant.vue
index bc86fab..1a74fee 100644
--- a/pages/assistant/assistant.vue
+++ b/pages/assistant/assistant.vue
@@ -1,20 +1,81 @@
-
-
-
-
- 您好！我是您的宠物AI助手
- 可以为您解答宠物饲养、健康、训练等问题
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- 发送
+
+
+
@@ -24,7 +85,149 @@
export default {
data() {
return {
-
+ inputMessage: '',
+ scrollTop: 0,
+ isThinking: false,
+ userAvatar: '/static/user-avatar.png',
+ messageList: [
+ {
+ type: 'ai',
+ content: '您好！我是您的宠物AI助手🐾\n\n我可以为您解答关于宠物饲养、健康、训练、营养等方面的问题。有什么可以帮助您的吗？',
+ time: this.getCurrentTime()
+ }
+ ],
+ quickQuestions: [
+ { id: 1, text: '猫咪不吃饭怎么办？' },
+ { id: 2, text: '狗狗需要多久洗一次澡？' },
+ { id: 3, text: '宠物疫苗接种时间' },
+ { id: 4, text: '如何训练宠物定点上厕所？' },
+ { id: 5, text: '宠物发烧的症状' },
+ { id: 6, text: '幼猫喂养注意事项' }
+ ],
+ // 知识库数据
+ knowledgeBase: {
+ '喂食': {
+ keywords: ['喂食', '吃饭', '食物', '饮食', '营养'],
+ responses: [
+ '定时定量喂食很重要，成年猫每天2-3次，幼猫3-4次。',
+ '选择优质的宠物食品，避免给宠物吃人类食物。',
+ '确保宠物随时有清洁的饮用水。'
+ ]
+ },
+ '健康': {
+ keywords: ['健康', '生病', '症状', '发烧', '呕吐', '腹泻'],
+ responses: [
+ '定期体检很重要，建议每年至少一次。',
+ '注意观察宠物的食欲、精神状态和排便情况。',
+ '如果出现异常症状，请及时就医。'
+ ]
+ },
+ '疫苗': {
+ keywords: ['疫苗', '接种', '免疫', '预防'],
+ responses: [
+ '幼猫幼犬8-12周开始接种疫苗。',
+ '成年宠物每年需要加强免疫。',
+ '常见疫苗包括三联疫苗和狂犬疫苗。'
+ ]
+ },
+ '训练': {
+ keywords: ['训练', '教育', '行为', '定点', '上厕所'],
+ responses: [
+ '训练需要耐心和一致性。',
+ '使用正向强化，奖励好行为。',
+ '避免体罚，这会让宠物产生恐惧。'
+ ]
+ },
+ '洗澡': {
+ keywords: ['洗澡', '清洁', '卫生'],
+ responses: [
+ '狗狗一般1-2周洗一次澡，猫咪通常不需要经常洗澡。',
+ '使用宠物专用洗浴用品。',
+ '洗澡后要及时吹干，避免感冒。'
+ ]
+ }
+ }
+ }
+ },
+ methods: {
+ getCurrentTime() {
+ const now = new Date()
+ return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
+ },
+
+ askQuestion(question) {
+ this.inputMessage = question
+ this.sendMessage()
+ },
+
+ sendMessage() {
+ if (!this.inputMessage.trim() || this.isThinking) return
+
+ // 添加用户消息
+ const userMessage = {
+ type: 'user',
+ content: this.inputMessage,
+ time: this.getCurrentTime()
+ }
+ this.messageList.push(userMessage)
+
+ // 开始AI思考
+ this.isThinking = true
+ this.scrollToBottom()
+
+ // 模拟AI回复
+ setTimeout(() => {
+ const aiMessage = {
+ type: 'ai',
+ content: this.getAIResponse(this.inputMessage),
+ time: this.getCurrentTime()
+ }
+ this.messageList.push(aiMessage)
+ this.isThinking = false
+ this.scrollToBottom()
+ }, 1500 + Math.random() * 1000) // 1.5-2.5秒随机延迟
+
+ this.inputMessage = ''
+ },
+
+ getAIResponse(question) {
+ // 智能匹配知识库
+ for (let category in this.knowledgeBase) {
+ const { keywords, responses } = this.knowledgeBase[category]
+ if (keywords.some(keyword => question.includes(keyword))) {
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)]
+ return `${randomResponse}\n\n💡 如果您需要更详细的建议，建议咨询专业的宠物医生。`
+ }
+ }
+
+ // 默认回复
+ const defaultResponses = [
+ '这是一个很好的问题！建议您咨询专业的宠物医生获得更准确的建议。',
+ '每只宠物的情况都不同，建议根据具体情况来处理。您可以查看我们的知识库了解更多信息。',
+ '感谢您的提问！这个问题比较复杂，建议您带宠物去专业的宠物医院检查。',
+ '我理解您的担心。建议您记录宠物的具体症状，然后咨询专业医生。'
+ ]
+
+ return defaultResponses[Math.floor(Math.random() * defaultResponses.length)]
+ },
+
+ scrollToBottom() {
+ this.$nextTick(() => {
+ this.scrollTop = 999999
+ })
+ },
+
+ startVoiceInput() {
+ uni.showToast({
+ title: '语音功能开发中',
+ icon: 'none'
+ })
+ },
+
+ openKnowledge() {
+ uni.navigateTo({
+ url: '/pages/assistant/knowledge'
+ })
}
}
}
@@ -38,40 +241,73 @@ export default {
background-color: #f8f9fa;
}
-.header {
- padding: 20rpx 30rpx;
+.quick-questions {
background-color: white;
- border-bottom: 1rpx solid #eee;
-
- .title {
- font-size: 36rpx;
- font-weight: bold;
- color: #333;
+ padding: 20rpx;
+ margin: 20rpx;
+ border-radius: 20rpx;
+
+ .question-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20rpx;
+
+ /deep/ .u-button {
+ margin: 0;
+ }
}
}
.chat-area {
flex: 1;
- padding: 40rpx;
- display: flex;
- align-items: center;
- justify-content: center;
+ padding: 20rpx;
}
-.welcome-message {
- text-align: center;
-
- .welcome-text {
- font-size: 32rpx;
- color: #333;
- display: block;
- margin-bottom: 20rpx;
+.message-list {
+ .message-item {
+ display: flex;
+ margin-bottom: 30rpx;
+ align-items: flex-start;
+
+ &.user-message {
+ flex-direction: row-reverse;
+
+ .message-content {
+ background-color: #4ecdc4;
+ margin-right: 20rpx;
+ border-radius: 20rpx 20rpx 8rpx 20rpx;
+
+ /deep/ .u-text {
+ color: white !important;
+ }
+ }
+ }
+
+ &.ai-message {
+ .message-content {
+ background-color: white;
+ margin-left: 20rpx;
+ border-radius: 20rpx 20rpx 20rpx 8rpx;
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+
+ &.thinking {
+ display: flex;
+ align-items: center;
+ padding: 20rpx;
+ }
+ }
+ }
}
-
- .welcome-desc {
- font-size: 26rpx;
- color: #666;
- display: block;
+}
+
+.message-content {
+ max-width: 70%;
+ padding: 20rpx;
+
+ /deep/ .u-text {
+ line-height: 1.5;
+ word-break: break-word;
+ white-space: pre-wrap;
}
}
@@ -79,26 +315,14 @@ export default {
background-color: white;
padding: 20rpx 30rpx;
border-top: 1rpx solid #eee;
- display: flex;
- align-items: center;
-
- .message-input {
- flex: 1;
- background-color: #f5f5f5;
- border-radius: 30rpx;
- padding: 20rpx 30rpx;
- font-size: 28rpx;
- margin-right: 20rpx;
- }
-
- .send-btn {
- background-color: #4ecdc4;
- padding: 20rpx 40rpx;
- border-radius: 30rpx;
-
- .send-text {
- color: white;
- font-size: 28rpx;
+
+ .input-container {
+ display: flex;
+ align-items: center;
+ gap: 20rpx;
+
+ /deep/ .u-input {
+ flex: 1;
}
}
}
diff --git a/pages/assistant/knowledge.vue b/pages/assistant/knowledge.vue
new file mode 100644
index 0000000..e6fa32c
--- /dev/null
+++ b/pages/assistant/knowledge.vue
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+