pet-front-order/docs/性格选择功能说明.md

性格选择功能说明

功能概述

新增了独立的性格选择页面，用户可以在该页面中：

1. 输入宠物的性格描述
2. 选择预设的性格标签
3. 保存后回显到宠物信息页面

文件结构

新增文件

• pages/personalCenter/personalitySelect.vue - 性格选择页面

修改文件

• pages/personalCenter/components/petBaseInfo.vue - 修改性格选择逻辑，跳转到新页面
• pages.json - 添加新页面路由配置

功能特点

1. 性格描述输入

• 提供文本输入框，用户可以自由描述宠物性格
• 支持最多200字符输入
• 灰色背景，符合设计规范

2. 快捷选择

• 提供8个预设性格标签
• 支持多选功能
• 选中状态为橙色背景，白色文字
• 2行4列网格布局

3. 数据回显

• 从API获取性格选项列表
• 支持解析已有的性格数据
• 保存后自动更新父页面数据

4. 页面导航

• 从宠物信息页面点击"性格"字段跳转
• 保存后自动返回上一页
• 显示保存成功提示

使用流程

1. 在宠物信息页面点击"性格"字段
2. 跳转到性格选择页面
3. 输入性格描述（可选）
4. 选择性格标签（可多选）
5. 点击"保存"按钮
6. 自动返回宠物信息页面，数据已更新

技术实现

数据传递

• 使用URL参数传递现有性格数据
• 使用页面栈更新父页面数据

样式设计

• 响应式网格布局
• 符合设计图的颜色方案
• 流畅的交互动画

API集成

• 从pet_personality字典获取性格选项
• 支持动态加载和解析

注意事项

1. 确保至少选择一项性格特征才能保存
2. 性格描述和快捷选择可以组合使用
3. 数据格式为：描述 + "，" + 快捷选择标签
4. 支持编辑现有性格数据