feat(wd-fab): 添加自定义位置和偏移量支持，修复关闭拖拽后，菜单弹出方向未更新回来的bug #1315
Conversation
为悬浮按钮组件添加自定义位置类型(custom)和偏移量属性(offsetX/offsetY)，支持通过props设置初始位置和展开方向的偏移量
在Fab组件中新增自定义位置选项，允许用户通过滑块调整X/Y轴偏移量。添加相关中英文翻译字段，并实现重新渲染功能以确保偏移量更改生效。
清理fab组件中未使用的custom-class属性和对应的样式定义，减少冗余代码
将Y偏移量滑块的最大值从固定值100改为动态变量maxOffsetY，提高组件灵活性
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Walkthrough为 FAB 新增“custom”自定义位置与 X/Y 偏移能力；示例页加入偏移调节与强制重渲染逻辑；组件类型新增 offsetX/offsetY 属性并扩展 FabPosition；组件实现支持自定义位置初始化与边界夹取；中英文文案新增对应键值。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as 用户
participant Demo as FAB示例页(Index.vue)
participant Fab as 组件：wd-fab
User->>Demo: 选择 position = "custom"\n调整 offsetX/offsetY
Demo->>Fab: 渲染 <wd-fab position="custom"\n:offset-x="offsetX" :offset-y="offsetY">
activate Fab
Note over Fab: initPosition 读取 offsetX/offsetY\n并进行边界夹取
Fab-->>Demo: 完成首次渲染
deactivate Fab
User->>Demo: 点击“重新渲染”
Demo->>Demo: 变更 key 触发重挂载
Demo->>Fab: 以新 key 重建组件\n传入当前 offsetX/offsetY
activate Fab
Fab-->>Demo: 以自定义位置完成渲染
deactivate Fab
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue (2)
93-98: 仅在拖拽关闭时重置弹出方向，避免开启拖拽时被覆盖当前 watch 在 draggable 任意变更（true/false）时都会重置 fabDirection，可能在“开启拖拽”时无意覆盖 props.direction 或拖拽后逻辑。建议仅在“拖拽被关闭（变为 false）”时同步一次方向。
可按下述方式调整：
-watch( - () => props.draggable, - () => { - fabDirection.value = props.direction - } -) +watch( + () => props.draggable, + (newVal, _oldVal) => { + if (newVal === false) { + fabDirection.value = props.direction + } + } +)
169-176: 自定义位置仅初始化生效，未响应 offsetX/offsetY 动态变更组件在 position='custom' 时仅在初始化/切换 position 时读取 offsetX/offsetY；运行期修改 offset 不会生效（示例页只能通过强制重渲染规避）。建议在 position='custom' 时侦听 offsetX/offsetY 变更并重算位置，消除对强制重渲染的依赖。
可在现有 watch 段后追加监听（插入到 watch 区域，非本片段）：
// 当自定义偏移变化时，重新计算位置 watch( [() => props.offsetX, () => props.offsetY], () => { if (props.position === 'custom') { initPosition() } } )如需在 gap 变化或窗口尺寸变化时也自适应，可再补充：
watch( () => props.gap, async () => { await getBounding() initPosition() }, { deep: true } )请确认此行为是否与期望一致（例如：当用户已拖拽过，是否仍应被外部 offset 覆盖）。如需避免覆盖拖拽结果，可在 init 前增加保护条件。
src/subPages/fab/Index.vue (4)
27-39: 示例滑块的最大偏移建议与组件实际边界一致maxOffsetX/maxOffsetY 直接取窗口宽高，未扣除 gap 与 FAB 尺寸，用户拖到极值后会被组件再次夹取，体验不直观。建议示例页估算更贴近的上限，或在文案提示“实际会受边界夹取”。
可近似处理（示例用，不需精确）：默认 gap=16px、默认 FAB≈56px
const approxGap = 16 const approxFab = 56 const maxOffsetX = Math.max(0, sysInfo.windowWidth - approxGap - approxFab - approxGap) const maxOffsetY = Math.max(0, sysInfo.windowHeight - approxGap - approxFab - approxGap)
72-81: 去除强制重渲染依赖（待组件支持 offset 响应式）当前通过 :key 与“重新渲染”按钮强制重挂载 FAB 才能应用 offset。若上游组件按建议监听 offsetX/offsetY，则可移除 :key、按钮与 reRenderFab 简化示例。
先移除 :key：
- :key="fabKey"随后可删除“重新渲染”按钮与 reRenderFab 相关代码（见下方对应片段）。
123-129: 偏移上限与设备信息初始化 OK；建议监听方向/尺寸变更时重算上限横竖屏切换或窗口发生变化时，maxOffsetX/Y 不会更新。作为示例可选：监听 onResize 或页面 show 时刷新。
133-135: “重新渲染”仅为示例兜底逻辑，可在组件完善后移除上游实现 offset 响应式后，可删除该函数与按钮，降低示例复杂度。
对应移除：
-<wd-button @click="reRenderFab">重新渲染</wd-button>-const fabKey = ref<number>(0) ... -function reRenderFab() { - fabKey.value++ -}src/uni_modules/wot-design-uni/components/wd-fab/types.ts (1)
63-71: offsetX/offsetY 注释与实现不符，请统一语义注释称“在展开时作为展开方向偏移量”，但当前实现仅用于 position='custom' 的初始定位，未影响展开菜单位置。请二选一：修正文档或补齐实现。
若选择修正文档（最小改动）：
- /** - * 悬浮按钮的x偏移量，在position为custom时作为初始x位置，在展开时作为展开方向的x偏移量 - */ + /** + * 悬浮按钮的 x 偏移量，仅在 position 为 'custom' 时用于初始位置 + */ offsetX: makeNumberProp(0), - /** - * 悬浮按钮的y轴偏移量，在position为custom时作为初始y位置，在展开时作为展开方向的y偏移量 - */ + /** + * 悬浮按钮的 y 偏移量，仅在 position 为 'custom' 时用于初始位置 + */ offsetY: makeNumberProp(0)若选择补齐实现：建议在 wd-fab.vue 中为 actions 容器增加偏移样式（按 fabDirection 分别作用于 top/left/transform），以匹配注释语义。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/locale/en-US.json(1 hunks)src/locale/zh-CN.json(1 hunks)src/subPages/fab/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-fab/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test Components (wd-fab)
🔇 Additional comments (5)
src/locale/zh-CN.json (1)
427-429: 文案键新增符合预期新增自定义位置与偏移量文案键与功能对齐，命名清晰，无冲突。
src/locale/en-US.json (1)
427-429: i18n 键新增正确英文文案与中文键一一对应，满足示例页展示需要。
src/subPages/fab/Index.vue (2)
24-25: 新增 custom 位置选项合理示例增加 “自定义” 位置入口，契合新特性。
113-116: 类型扩展为含 custom 的联合值 ✅与组件新增能力一致。
src/uni_modules/wot-design-uni/components/wd-fab/types.ts (1)
6-15: FabPosition 扩展包含 'custom' ✅类型层面与实现、示例一致，向后兼容良好。
1 participant
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
wd-fab组件可拖动记忆。 #1310
Fab 悬浮按钮添加 offset 属性 #811
Fab组件支持自定义初始位置 #660
💡 需求背景和解决方案
需求背景：
解决方案：
custom定位类型，支持通过offsetX和offsetY属性自定义FAB组件的初始位置watch监听器，确保draggable属性变化时正确更新fabDirectionAPI变更：
offsetX: 自定义X轴偏移量（number类型）offsetY: 自定义Y轴偏移量（number类型）代码变更：
/d:/code-open/wot-design-uni/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue#L169-176: 添加自定义位置初始化逻辑/d:/code-open/wot-design-uni/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue#L93-98: 修复菜单弹出方向更新逻辑☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档/示例
Bug 修复