Renderless 架构与 WebAgent：OpenTiny DialogBox resizable 功能实战

第三步：实现核心的三个函数

在 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 层添加拖拽句柄

逻辑写好了，接下来要在 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')"></div>
    </template>
  </div>
</template>

因为逻辑和 UI 分离，可以轻松地为不同平台定制不同的 UI。比如在 PC 端显示 8 个句柄，在移动端可能只需要显示 4 个角的句柄（节省屏幕空间）。

2.3 踩坑实录：那些让我头疼的问题

坑 1：内存泄漏的教训

刚开始实现时，忘记清理事件监听器。后来添加了 onBeforeUnmount 钩子来兜底：

onBeforeUnmount(() => {
  // 确保组件销毁时清理所有监听器
  document.removeEventListener('mousemove', handleResizeMove);
  document.removeEventListener('mouseup', handleResizeEnd);
});

Vue 提供了完整的生命周期钩子，让我们能在合适的时机做清理工作。

坑 2：CSS 单位的精度问题

一开始用 offsetWidth 获取尺寸，发现会有小数位丢失的问题。比如实际宽度是 500.7px，offsetWidth 返回 501。

解决方案是用 getComputedStyle：

const computedStyle = getComputedStyle(dialog);
const currentWidth = parseFloat(computedStyle.width); // 精确值

offsetWidth 返回的是整数（四舍五入后的像素值），而 getComputedStyle 返回的是精确的计算值。在连续拖拽的场景中，这种精度丢失会累积，导致明显的抖动。

坑 3：移动端的兼容性问题

在 PC 上测试完美，一到移动端就歇菜。原因很简单：移动端没有 mouse 事件，只有 touch 事件。

最初的做法是写两套逻辑，但后来发现了一个更好的方案——Pointer Events。

Pointer Events 是一个 W3C 标准，统一了鼠标、触摸、手写笔的输入事件：

// 一套代码搞定所有输入设备
element.addEventListener('pointerdown', handlePointerDown);
element.addEventListener('pointermove', handlePointerMove);
element.addEventListener('pointerup', handlePointerUp);

这样代码量直接减少了 40%。这就是拥抱 Web 标准的体现。

三、思考：从 resizable 到 WebAgent 的技术演进

3.1 为什么要做这件事？

这不是简单的功能增强，而是为未来的 WebAgent 交互 做准备。想象一下这个场景：

用户对 AI 说：'帮我把这个弹窗调大一点，里面的表格看不全'

如果没有 resizable 能力，AI 只能束手无策。但现在，AI 可以：

1. 通过 WebMCP 协议获取 DialogBox 的能力清单
2. 识别到 resize 方法可用
3. 自动调用 handleResize 或修改 width/height 属性
4. 完成用户的指令

这就是 GenUI（生成式 UI）的核心理念：UI 不再是静态的，而是可以根据用户意图动态调整的。

3.2 WebMCP：智能体与组件的"翻译官"

WebMCP（Model Context Protocol for Web）就是让 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": { "type": "boolean", "readonly": true, "description": "是否支持缩放" },
      "isFull": { "type": "boolean", "readonly": true, "description": "是否全屏" }
    },
    "events": ["resize-move", "resize-end"]
  }
}

有了这份清单，AI 就知道哪些方法可调，哪些属性可改，以及有哪些限制条件。

3.3 Renderless 架构对 AI 友好的秘密

经过这次实践，发现 Renderless 架构 简直就是为 AI 而生的：

1. 逻辑纯净：AI 最擅长生成纯函数式的逻辑代码，不需要理解 DOM。
2. 类型完备：TypeScript 类型定义让 AI 生成的代码更准确。
3. 职责单一：逻辑层只管状态和 API，表现层只管渲染，AI 不容易出错。
4. 易于测试：纯函数更容易编写单元测试，AI 可以自动生成测试用例。

四、感悟：开发者如何在 AI 时代找到新定位？

4.1 角色转变

开发者的角色真的在变。

• 以前：花大量时间写 CRUD 代码、调试事件监听、写注释文档。
• 现在：花少量时间描述需求，审查 AI 生成的代码，优化架构和性能。

同样一个 resizable 功能，借助 AI，效率显著提升，且代码质量更高（因为 AI 不会漏掉边界检查）。

4.2 什么应该交给 AI，什么必须自己把控？

✅ 放心交给 AI：

• 样板代码（getter/setter、事件处理框架）
• 单元测试
• 类型定义
• 代码格式化和小重构

⚠️ 需要审核：

• 业务逻辑的正确性
• 性能优化方案
• 错误处理策略
• 兼容性处理

❌ 必须自己决策：

• 架构设计和技术选型
• 用户体验细节
• 安全合规问题
• 技术债务的取舍

记住一句话：AI 是最好的副驾驶，但方向盘必须在你手里。

4.3 参与开源的真实收获

参与 OpenTiny 开源项目带来的收获包括：

• 技术层面：真正理解了 Renderless 架构的设计精髓，学会了如何编写对 AI 友好的代码。
• 思维层面：从"使用者"变成"贡献者"，开始思考组件的通用性和扩展性。
• 职业发展：留下了实实在在的贡献记录，认识了一群优秀的开源开发者。

最重要的是，感觉不是在"卷"，而是在创造价值。每一行代码都可能被成千上万的开发者使用。

五、展望：前端智能化的下一步

5.1 接下来的计划

1. 完善 resizable 功能：添加保持宽高比选项、支持拖拽到边缘自动吸附、添加动画过渡效果。
2. 探索 WebMCP 集成：为 DialogBox 编写 MCP Schema、实现 AI 可调用的标准接口。
3. 输出最佳实践：撰写教程、录制实战视频、在团队内部分享经验。

5.2 给同行的建议

1. 别观望，先动手：找个真实的开源项目，提交你的第一个 PR。
2. 善用 AI 工具：GitHub Copilot、Cursor 等，选一个顺手的。
3. 深入理解架构：不要满足于会用 API，要搞懂背后的设计思想。
4. 保持开放心态：新技术层出不穷，快速学习才是核心竞争力。
5. 拥抱开源社区：一个人的力量有限，一群人才能走得更远。

六、写在最后

前端智能化不是口号，而是正在发生的现实。从辅助编码到智能体自主执行，这条路可能还需要走几年。每一步前进，都需要我们这一代开发者去铺路。

我很庆幸，自己能参与到这场变革中来。用代码为 AI 时代的基础设施添砖加瓦，这本身就是件很酷的事情。

参考资源

• OpenTiny TinyVue - DialogBox 组件
• OpenTiny TinyEngine 低代码引擎