1818uniapp/KEYBOARD_UPLOAD_FEATURE.md

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

功能说明

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

适配方案

1. 键盘监听

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

2. 响应式布局变化

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

3. 视觉效果

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

技术实现

状态管理

const keyboardHeight = ref(0)          // 键盘高度
const isKeyboardVisible = ref(false)   // 键盘是否可见

键盘监听

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 的所有平台
• 特别优化移动端体验
• 自动适配不同尺寸的虚拟键盘