first commit

KEYBOARD_UPLOAD_FEATURE.md

@@ -0,0 +1,80 @@
+# 造梦页面 - 虚拟键盘适配功能
+
+## 功能说明
+
+当用户在造梦页面的创造模式中输入文字时，虚拟键盘会弹起。为了避免上传组件被键盘遮挡，实现了以下适配方案：
+
+### 适配方案
+
+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 的所有平台
+- 特别优化移动端体验
+- 自动适配不同尺寸的虚拟键盘