# 性格选择功能说明

## 功能概述

新增了独立的性格选择页面，用户可以在该页面中：
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. 支持编辑现有性格数据