# 造梦页面 - 虚拟键盘适配功能

## 功能说明

当用户在造梦页面的创造模式中输入文字时，虚拟键盘会弹起。为了避免上传组件被键盘遮挡，实现了以下适配方案：

### 适配方案

1. **键盘监听**
   - 使用 `uni.onKeyboardHeightChange` 监听虚拟键盘的显示和隐藏
   - 实时获取键盘高度，判断键盘是否可见

2. **响应式布局变化**
   - **键盘未弹起时**：上传组件显示为大型卡片样式，位于内容区域中央
   - **键盘弹起时**：
     - 隐藏大型上传卡片
     - 在输入框右上角显示紧凑的长方形上传按钮
     - 输入框自动为上传按钮留出空间（右侧 padding）

3. **视觉效果**
   - 紧凑上传按钮采用圆角矩形设计
   - 包含图标和"上传"文字
   - 带有滑入动画效果
   - 点击时有缩放反馈

## 技术实现

### 状态管理
```javascript
const keyboardHeight = ref(0)          // 键盘高度
const isKeyboardVisible = ref(false)   // 键盘是否可见
```

### 键盘监听
```javascript
const setupKeyboardListener = () => {
  uni.onKeyboardHeightChange((res) => {
    keyboardHeight.value = res.height
    isKeyboardVisible.value = res.height > 0
  })
}

const removeKeyboardListener = () => {
  uni.offKeyboardHeightChange()
}
```

### 生命周期
- `onShow`: 设置键盘监听器
- `onHide`: 移除键盘监听器

### 条件渲染
- 大型上传卡片：`v-if="isExpanded && !isKeyboardVisible"`
- 紧凑上传按钮：`v-if="isKeyboardVisible && canAddMoreImages"`

## 样式特点

### 紧凑上传按钮
- 位置：绝对定位在输入框右上角
- 尺寸：自适应内容，紧凑设计
- 颜色：深色背景 (#3f3f46)，与整体风格一致
- 动画：滑入效果 (slideInRight)
- 交互：点击缩放反馈

### 输入框适配
- 动态 padding-right：当上传按钮显示时自动调整
- 平滑过渡：使用 CSS transition

## 用户体验

1. **无缝切换**：键盘弹起/收起时，上传功能始终可用
2. **空间优化**：键盘弹起时最大化利用可见区域
3. **视觉连贯**：保持统一的设计语言
4. **操作便捷**：上传按钮始终在易于点击的位置

## 兼容性

- 支持 uni-app 的所有平台
- 特别优化移动端体验
- 自动适配不同尺寸的虚拟键盘