分享了在 OpenTiny TinyVue 中为 DialogBox 组件实现 resizable 功能的实战经验。通过采用 Renderless 架构分离逻辑与视图，提升了组件对 AI Agent 的友好度。文章详细解析了数据流设计、核心函数实现（如事件监听、边界检查）、跨平台兼容处理（Pointer Events）以及内存泄漏等常见问题的解决方案。同时探讨了 WebMCP 协议在智能体交互中的应用，以及开发者在 AI 时代的角色转变与开源贡献价值。
作为一名企业级应用开发一线的前端，DialogBox 组件是常用组件之一。但传统模式下，用户无法调整弹窗大小。
在 AI 时代，组件应该是"可对话"的——用户说"我想把这个弹窗调大一点"，AI 就能理解意图并调用相应的 API。要实现这个愿景，首先得让组件具备足够的能力。因此，决定为 TinyVue 的 DialogBox 组件实现真正的 resizable 功能，这不仅是功能增强，更是为未来的 WebAgent 交互打下基础。
TinyVue 采用了 Renderless 架构——核心思想是逻辑和视图彻底分离。
vue.ts）只负责业务逻辑；表现层（pc.vue、mobile.vue）只负责渲染。这样做的好处是 AI 最擅长生成纯逻辑代码，Renderless 架构正好让 AI 专注于它擅长的部分，提高了 AI 生成代码的准确性。
通过查看源码，DialogBox 的文件结构如下：
dialog-box/
├── src/
│ ├── pc.vue # PC 端的 UI 表现
│ └── mobile.vue # 移动端的 UI 表现
├── vue.ts # 核心逻辑层（所有平台共用）
└── types.ts # 类型定义
这意味着只需要在 vue.ts 中添加逻辑，然后在 pc.vue 和 mobile.vue 中添加对应的 UI 句柄，就能实现跨平台的 resizable 功能。
要实现拖拽缩放，需要设计一套完整的数据流：
基于这个流程，设计了以下几个关键状态：
// 在 vue.ts 中添加的状态
resizing: false, // 标记是否正在缩放
resizeDirection: '', // 缩放方向（东南西北、东南、东北等 8 个方向）
startX: 0, // 鼠标按下的 X 坐标
startY: 0, // 鼠标按下的 Y 坐标
startWidth: 0, // 初始宽度
startHeight: 0, // 初始高度
minWidth: 200, // 最小宽度限制
minHeight: 100 // 最小高度限制
在 OpenTiny 的 Renderless 架构中，将 resizable 逻辑封装成了三个函数。
1. handleResizeStart（开始拖拽）
const handleResizeStart = (direction) => (event) => {
// 1. 检查是否允许 resize（比如全屏状态下不允许）
if (!props.resize || state.isFull) return;
// 2. 记录初始状态
state.resizing = true;
state.resizeDirection = direction;
state.startX = event.clientX;
state.startY = event.clientY;
// 获取当前尺寸作为基准
// 3. 添加全局监听（这样即使鼠标移出元素也能继续跟踪）
document.addEventListener('mousemove', handleResizeMove);
document.addEventListener('mouseup', handleResizeEnd);
};
为什么要添加到 document 而不是 element？
如果只监听元素本身，当用户快速拖动鼠标超出元素范围时，拖拽就会中断。添加到 document 上，就能保证整个拖拽过程的连续性。
2. handleResizeMove（拖拽中）
const handleResizeMove = (event) => {
if (!state.resizing) return;
// 1. 计算鼠标移动的偏移量
const deltaX = event.clientX - state.startX;
const deltaY = event.clientY - state.startY;
// 2. 根据拖拽方向计算新尺寸
let newWidth = state.startWidth;
let newHeight = state.startHeight;
if (direction.includes('e')) { // 向东（右）拖拽
newWidth = Math.max(state.minWidth, state.startWidth + deltaX);
}
if (direction.includes('s')) { // 向南（下）拖拽
newHeight = Math.max(state.minHeight, state.startHeight + deltaY);
}
// ... 其他方向类似处理
// 3. 直接修改 DOM 元素的样式
dialog.style.width = `${newWidth}px`;
dialog.style.height = `${newHeight}px`;
// 4. 触发事件，让外部知道尺寸变化
emit('resize-move', { width: newWidth, height: newHeight });
};
注意使用了 Math.max(state.minWidth, ...)，这是为了防止用户把窗口缩得太小。这种边界检查在实际开发中非常重要。
3. handleResizeEnd（结束拖拽）
const handleResizeEnd = () => {
if (!state.resizing) return;
// 1. 重置状态
state.resizing = false;
state.resizeDirection = '';
// 2. 移除监听器（非常重要！防止内存泄漏）
document.removeEventListener('mousemove', handleResizeMove);
document.removeEventListener('mouseup', handleResizeEnd);
// 3. 触发结束事件
emit('resize-end', { width, height });
};
为什么要移除监听器？
这是一个新手容易犯的错误。如果不移除，组件销毁后监听器还在，就会导致内存泄漏。
逻辑写好了，接下来要在 UI 上让用户能够操作。在 pc.vue 中添加了 8 个方向的拖拽句柄：
<template>
<div ref="dialog">
<!-- 原有的弹窗内容 -->
<!-- 新增：8 个方向的拖拽句柄 -->
<template v-if="resize && !isFull">
<!-- 四个角 -->
<div @mousedown="handleResizeStart('nw')"></div>
<div @mousedown="handleResizeStart('ne')"></div>
<div @mousedown="handleResizeStart('sw')"></div>
<div @mousedown="handleResizeStart('se')"></div>
<!-- 四个边 -->
<div @mousedown="handleResizeStart('n')"></div>
<div @mousedown="handleResizeStart('s')"></div>
<div @mousedown="handleResizeStart('w')"></div>
<div @mousedown="handleResizeStart('e')">
因为逻辑和 UI 分离，可以轻松地为不同平台定制不同的 UI。比如在 PC 端显示 8 个句柄，在移动端可能只需要显示 4 个角的句柄（节省屏幕空间）。
刚开始实现时，忘记清理事件监听器。后来添加了 onBeforeUnmount 钩子来兜底：
onBeforeUnmount(() => {
// 确保组件销毁时清理所有监听器
document.removeEventListener('mousemove', handleResizeMove);
document.removeEventListener('mouseup', handleResizeEnd);
});
Vue 提供了完整的生命周期钩子，让我们能在合适的时机做清理工作。
一开始用 offsetWidth 获取尺寸，发现会有小数位丢失的问题。解决方案是用 getComputedStyle：
const computedStyle = getComputedStyle(dialog);
const currentWidth = parseFloat(computedStyle.width); // 精确值
offsetWidth 返回的是整数（四舍五入后的像素值），而 getComputedStyle 返回的是精确的计算值。在连续拖拽的场景中，这种精度丢失会累积，导致明显的抖动。
在 PC 上测试完美，一到移动端就歇菜。原因很简单：移动端没有 mouse 事件，只有 touch 事件。
最初的做法是写两套逻辑，但后来发现了一个更好的方案——Pointer Events。
Pointer Events 是一个 W3C 标准，统一了鼠标、触摸、手写笔的输入事件：
// 一套代码搞定所有输入设备
element.addEventListener('pointerdown', handlePointerDown);
element.addEventListener('pointermove', handlePointerMove);
element.addEventListener('pointerup', handlePointerUp);
这样代码量直接减少了 40%。
这不是简单的给弹窗加个缩放功能，而是为未来的 WebAgent 交互 做准备。
想象一下这个场景：用户对 AI 说：'帮我把这个弹窗调大一点，里面的表格看不全'。如果没有 resizable 能力，AI 只能束手无策。但现在，AI 可以：
resize 方法可用handleResize 或修改 width/height 属性这就是 GenUI（生成式 UI）的核心理念：UI 不再是静态的，而是可以根据用户意图动态调整的。
WebMCP 就是让 AI 能够理解 Web 组件的能力。每个组件需要暴露一份"能力清单"：
{
"component": "DialogBox",
"version": "1.0.0",
"capabilities": {
"methods": ["open", "close", "resize"],
"properties": {
"width": { "type": "string", "writable": true, "description": "弹窗宽度" },
"height": { "type": "string", "writable": true, "description": "弹窗高度" },
"resize"
有了这份清单，AI 就知道哪些操作可行，哪些受限。
经过这次实战，发现 Renderless 架构 简直就是为 AI 而生的：
这次实践让我真切感受到：开发者的角色真的在变。
以前的我：
现在的我：
同样一个 resizable 功能，如果完全手写，至少需要半天。但借助 AI，我只用了 2 小时就完成了，而且代码质量更高。
✅ 放心交给 AI：
⚠️ 需要审核：
❌ 必须自己决策：
记住一句话：AI 是最好的副驾驶，但方向盘必须在你手里。
很多人问我：为什么要花时间参与 OpenTiny 开源项目？
技术层面：
思维层面：
职业发展：
最重要的是，感觉自己不是在"卷"，而是在创造价值。每一行代码都可能被成千上万的开发者使用。
这次 resizable 实践只是个开始。已经在规划下一步：
如果你也想在前端智能化领域有所建树，我的建议是：
前端智能化不是口号，而是正在发生的现实。
从辅助编码到智能体自主执行，这条路可能还需要走 3 年、5 年甚至 10 年。但每一步前进，都需要我们这一代开发者去铺路。
我很庆幸，自己能参与到这场变革中来。用代码为 AI 时代的基础设施添砖加瓦，这本身就是件很酷的事情。
与所有在前端智能化路上探索的朋友共勉。
项目源码：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online