前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载useInlineRename(onCommit)是 Open-Pencil Vue SDKopen-pencil/vue提供的组合式函数用于管理就地重命名inline rename流程中的编辑状态、焦点控制、外部点击与键盘行为。它面向自定义页面列表、图层树LayerTree以及其他不需要独立弹窗、直接在行内完成改名的界面。阅读本文后你将掌握该 API 的完整签名与生命周期、如何在 Vue 组件中接入输入框事件以及项目内部页面面板、图层树与文档标题重命名的三种真实用法。核心 API 概览useInlineRename的签名定义在 packages/vue/src/editor/inline-rename/use.tsexport function useInlineRenameT extends string( onCommit: (id: T, newName: string) void ): InlineRenameStateT它接收一个唯一的onCommit回调当用户确认修改时回调会收到被重命名对象的id与新的名称newName。对象 id 使用泛型T extends string约束便于在调用侧声明更精确的 id 类型例如document-name字面量类型。该组合式函数返回一个InlineRenameStateT状态对象接口定义成员类型作用editingIdRefT \| null当前正在编辑的对象 idnull表示没有进行中的重命名start(id, currentName)(id: T, currentName: string) void进入编辑模式记录被编辑 id 与原始名称focusInput(input)(input: HTMLInputElement \| null) Promisevoid注册输入框引用、安装外部点击监听、聚焦并全选文本commit(id, eventOrInput)(id: T, Event \| HTMLInputElement) void提交本次改名或丢弃输入并退出编辑模式cancel()() void取消编辑清理全部状态onKeydown(e)(e: KeyboardEvent) void统一处理 Enter 提交与 Escape 取消状态与生命周期useInlineRename内部以响应式状态机方式管理整个改名流程进入编辑startstart(id, currentName)将editingId.value设为目标 id并把currentName缓存为originalName源码。originalName用于提交时判断名称是否真的发生了变化。聚焦与外部点击focusInputfocusInput先缓存输入框引用再通过vueuse/core的onClickOutside安装外部点击监听——点击输入框以外的区域会触发input.blur()从而走 blur 提交路径源码。随后在nextTick()后调用input.focus()与input.select()让用户进入输入状态即自动全选旧名称可直接覆盖输入。提交commitcommit(id, eventOrInput)首先校验editingId.value id防止过期回调提交错误的行然后从Event取其target或直接传入的HTMLInputElement中取出输入框读取value.trim()后的文本。只有新值非空且与originalName不同才会调用onCommit(id, value)源码。无论提交与否最后都会清空编辑状态与外部点击监听。取消cancelcancel()将editingId与输入框引用置空并清理onClickOutside监听源码。从源码结构可以推断useInlineRename刻意保持无状态持有设计它不保存输入框的中间文本一切以 DOM 输入框的实际值input.value为准外部 UI 只负责渲染输入框并转发事件。键盘行为Enter 提交、Escape 取消onKeydown是键盘交互的唯一入口源码function onKeydown(e: KeyboardEvent) { if (e.code Enter) { blurTarget(e) return } if (e.code Escape) { cancel() } }Enter不直接调用commit而是调用blurTarget(e)让输入框失焦。失焦事件blur会自然触发外层绑定的commit处理——这是一种事件驱动式的提交设计避免了同一输入值被提交两次。blurTarget是 SDK 共享的 DOM 工具函数定义于 packages/vue/src/shared/dom-events.ts其实现为if (e.target instanceof HTMLElement) e.target.blur()同时也从 packages/vue/src/index.ts 对外导出。Escape调用cancel()直接退出编辑模式不触发onCommit输入内容被丢弃。在使用时输入框上需要同时绑定blur提交与keydown.stop键盘并用editingId控制输入框的渲染条件。完整接入示例综合状态、焦点与键盘行为一个最小可运行的 Vue 接入模式如下script setup langts import { useInlineRename } from open-pencil/vue interface PageItem { id: string; name: string } const props defineProps{ pages: PageItem[] }() const emit defineEmits{ rename: [id: string, name: string] }() const rename useInlineRename((id, name) emit(rename, id, name)) function startRename(page: PageItem) { rename.start(page.id, page.name) } function onInputMount(input: HTMLInputElement | null) { void rename.focusInput(input) } /script template ul li v-forpage in pages :keypage.id template v-ifrename.editingId.value page.id input :valuepage.name mountonInputMount blurrename.commit(page.id, $event) keydown.stoprename.onKeydown / /template template v-else button dblclickstartRename(page){{ page.name }}/button /template /li /ul /template要点说明用v-ifrename.editingId.value page.id控制哪一行处于编辑态保证同一时刻只有一行可编辑输入框挂载后调用rename.focusInput(input)完成聚焦、全选与外部点击监听安装blur绑定rename.commit(page.id, $event)keydown.stop绑定rename.onKeydown双击或上下文菜单触发startRename(page)进入编辑。项目内的真实用法页面列表PagesPanel主应用中src/components/PagesPanel.vue 用useInlineRename((id, name) pageActions.value?.rename(id, name))驱动页面改名并通过rename.editingId.value pg.id在PageListRoot的作用域插槽里切换渲染行内输入框输入框同时绑定blurrename.commit(pg.id, $event)与keydown.stoprename.onKeydown源码。双击页面行L131或选择上下文菜单重命名L155-L160都会调用startRename(pg, actions.rename)进入编辑。这印证了文档中页面列表这一典型场景useInlineRename与PageListRootheadless 页面列表结构原语见 PageListRoot 文档配合使用SDK 提供结构行为应用自行渲染与美化。图层树LayerTreesrc/components/LayerTree/LayerTree.vue 中const rename useInlineRename((id, name) store.renameNode(id, name))将提交回调直接接到编辑器 store 的renameNode实现图层节点改名。它还监听store.state.renameNodeId在编辑器发出改名请求时自动rename.start(node.id, node.name)源码。改名行组件 src/components/LayerTree/LayerTreeRenameRow.vue 通过watch(renameInput, (input) { if (input) void renameControls.focusInput(input) })在输入框挂载时交给useInlineRename管理焦点并在模板中绑定blurrenameControls.commit(node.id, $event)与keydown.stoprenameControls.onKeydown源码。图层树的 headless 行原语是LayerTreeItem见 LayerTreeItem 文档。文档标题document-namesrc/app/shell/menu/document-name.ts 展示了泛型 id 的用法useInlineRenamedocument-name((_id, name) { store.state.documentName name })直接改写文档名状态调用侧封装出startRename与commitRename(e)供标题 UI 使用并通过computed(() rename.editingId.value DOCUMENT_NAME_ID)判断标题当前是否处于编辑态。适用场景与边界useInlineRename适用于行内、单行、无弹窗的重命名交互页面列表、图层树、文档标题等。使用时注意editingId是单一值而非集合天然保证同一时刻仅一行在编辑提交判定依赖originalName与input.value.trim()的差异比较因此空名称不会被提交它只负责编辑状态 焦点 键盘这一层名称变更后的数据落库如store.renameNode、pageActions.rename由调用方的onCommit回调完成外部点击提交依赖输入框的blur事件因此输入框必须绑定blur提交处理器。该 API 由 packages/vue/src/index.ts 统一对外导出可直接从open-pencil/vue导入使用。相关 APIPageListRoot——headless 页面列表结构原语提供 pages / 当前页 / 分隔线检测 / 页面动作等插槽属性LayerTreeItem——headless 图层树行原语暴露选中、展开、可见性、锁定与改名处理器赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐Velocity主题高级功能探索自动隐藏侧边栏与活跃行高亮的实用技巧Velocity主题高级功能探索自动隐藏侧边栏与活跃行高亮的实用技巧 Velocity是Obsidian的一款现代化主题以其简洁设计和强大功能深受用户喜爱。前端桌面应用AI 应用MCP 服务open-pencil 内联重命名指南用 useInlineRename 实现无弹窗的页面与图层改名交互open pencil 内联重命名指南用 useInlineRename 实现无弹窗的页面与图层改名交互 导读 本文围绕 open pencil 的 op前端桌面应用AI 应用MCP 服务NS-USBLoader终极指南Switch文件管理的一站式解决方案NS USBLoader终极指南Switch文件管理的一站式解决方案 想象一下你刚下载了几个精彩的Switch游戏准备在掌机上畅玩却发现文件太大无法直接前端桌面应用AI 应用MCP 服务上一篇CloudBase Framework配置详解打造专属部署流程的完整指南下一篇Superstruct边缘AI本地设备的推理结果验证创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考