前段时间，我用 OpenClaw对公司官网做了一次比较彻底的改版和修复。从路由逻辑、组件重构，到 UI 交互细节，全程几乎都在和 OpenClaw"结对编程"。
整个过程说不上顺滑——有惊喜，也有坑。写这篇文章，是想把这段经历完整地复盘一遍，给同样在探索 OpenClaw 辅助开发的朋友一个真实的参考。
我们在做什么样的网站？
官网基于 ThinkPHP 6 + Vue 3 的前后端分离架构：
- 后端：ThinkPHP 处理路由转发、API 接口
- 前端：Vue 3 + Vite 构建 SPA，产物部署在
public/cn/ 目录 - 访问路径：
/ → 302 跳到 /cn，再由 Vue Router 接管单页路由
看起来很常规，但就是这套"常规"方案，在一些细节上埋了不少雷。
改版做了什么
这次改版涉及 5 个核心模块，全部通过 AI 协作完成。
1. 修复首页跳转逻辑
问题： 后端 IndexController
里的跳转逻辑是写死的——桌面端跳 /pc，移动端跳 /mobile。但前端已经迁移到新的 /cn 目录，用户访问首页会直接 404。
AI 的做法： 不是粗暴地把 /pc 改成 /cn，而是先检测 public/cn/index.html 文件是否真实存在，存在才跳 /cn；否则降级走旧逻辑。这个"降级兜底"的思路，是我自己没想到的——AI 天然比人更"防御性编程"。
// 优先检测新版前端是否已部署if (file_exists(public_path() . 'cn/index.html')) { return redirect('/cn');}// 降级到旧版return redirect(request()->isMobile() ? '/mobile' : '/pc');
收获：OpenClaw 处理这类"兼容性跳转"很有优势，它不会只解决眼前的需求，而是顺手把边界情况也考虑进去。
2. Logo 动态绑定，避免 Vite 构建坑
问题： 原来组件里用了内联 SVG 绘制了一个自定义六边形 Logo，视觉效果一般，也不方便后台统一管理。我们希望改成读取系统上传的图片。
初次尝试（踩坑）：
<!-- 静态路径 —— Vite 构建会报错 --><imgsrc="/resource/image/adminapi/default/pc_logo.png" />
Vite 在构建时会把 src里的路径当作模块去解析，找不到文件直接报错。
OpenClaw的解决方式： 改用动态绑定src，Vite 就不会尝试解析它：<!-- 动态绑定 —— Vite 不会处理，运行时直接访问服务器路径 --><img:src="'/resource/image/adminapi/default/pc_logo.png'"alt="NAME" />
一个冒号的差距，省去了一大堆折腾。这个细节，如果不是 AI 直接指出来，估计我要翻 Vite 文档翻很久。
3. 备案号这种"小事"，OpenClaw 也不会漏
备案号从占位符 ICP备XXXXXXXX号-1 更新为真实的 ICP备XXXXXX号-1。
这件事说起来微不足道，但实际上 AppFooter.vue 里有多处引用，人工改容易漏。AI 扫描了全文件，一次性全部替换，并同步更新了跳转链接指向工信部备案查询系统。
感受： AI 对于"批量、精准、无遗漏"的修改，比人工可靠得多。
4. 联系页 Banner 改版：两栏布局 + 新媒体矩阵上移
问题： 原来"联系我们"页的新媒体矩阵（公众号、视频号、抖音等6个平台）是一个独立的 Section，藏在页面中部，用户经常忽略。
改版方案： Hero Banner 区域由单列改为两栏 Grid 布局（1fr 320px），左边保留主标题和 CTA 按钮，右边新增新媒体矩阵卡片，和第一屏内容同时可见。
.contact-page__hero-inner { display: grid; grid-template-columns: 1fr 320px; gap: 60px; align-items: center;}
每个平台图标都是 48×48 的圆角方形，有各自品牌色渐变背景，hover 时图标上浮 + 缩放，有二维码的图标右上角显示蓝色小圆点角标，底部有一行提示文案"悬停图标查看二维码"。
原来页面中部的独立"新媒体矩阵" section 同步删除，页面结构更清爽。
感受： 这类涉及布局调整 + 交互设计的需求，AI 能给出完整的 HTML 结构 + SCSS 样式 + 交互逻辑，人工只需要做最终审阅和微调，效率提升非常明显。
5. 浮动导航二维码弹窗：用 Teleport 彻底解决遮挡问题
这是这次改版里技术含量最高的一个点。
问题背景： 右侧浮动导航栏（FloatNav）有两个按钮——企业微信和公众号，hover 时显示对应二维码弹窗。但弹窗老是被遮挡：父组件设置了 overflow: hidden，弹窗只要超出容器边界就消失。
错误方案： 尝试调整 z-index，没用——z-index 解决不了 overflow 裁剪的问题。
OpenClaw 的方案：Vue 3 的 <Teleport>把弹窗从组件内部"传送"到 <body> 顶层渲染，彻底脱离任何父级容器的 overflow 约束：
<teleportto="body"> <transitionname="qr-slide"> <div v-if="showQR" class="float-nav-qr-popup" :style="qrStyle" @mouseenter="keepQR" @mouseleave="closeQR" > <!-- 二维码内容 --> </div> </transition></teleport>
弹窗位置通过 getBoundingClientRect() 动态计算触发元素的坐标，用 position: fixed 精准定位，z-index: 9999 确保永远在最顶层。
为了防止鼠标从触发按钮移向弹窗时弹窗消失（中间有间距），还用了一个 120ms 的延时关闭 + 进入弹窗时取消关闭定时器的技巧。
同时，由于弹窗挂载到了 body，原来的 scoped 样式就失效了，需要把弹窗样式改为全局 <style lang="scss">（不加 scoped）。这个细节 AI 也一并处理了，没有遗漏。
构建与发布：也踩了一个坑
所有代码改完后，执行npx vite build打包。
但后来发现有个问题：部分文件（HeroBanner.vue、ContactPage.vue）在第一次构建后又有改动，而没有重新构建，导致线上跑的还是旧代码。
这次是 AI 主动发现的——它对比了源码文件和构建产物的修改时间戳：
ContactPage.vue: 2026/03/15 18:13 (源码更新时间)cn/index.html: 2026/03/15 11:53 (上次构建时间)
发现构建已经过期，立刻重新执行了 npx vite build，并验证了全部 26 个产物（15 JS + 11 CSS）都已更新到最新时间戳。
这个细节非常值得注意：前端构建产物不会自动感知源码变化，人工很容易忽略"改了代码但没重新构建"的情况。
总结：OpenClaw 辅助开发，我的真实感受
经过这次改版，我有几点比较实在的感受：
- 有明确技术方案的实现（Teleport、Grid 布局、动态绑定）
- 调试思路提示（z-index vs overflow 的本质区别）
还需要人来把关的：
OpenClaw 不是银弹，但它确实把"把想法变成代码"这件事的门槛大幅降低了。对于中小企业来说，过去需要一个熟练前端工程师花几天做的改版，现在可能半天就能完成——前提是你能清楚地描述你要什么。学会和 AI 协作，是这个时代程序员和产品人都绕不开的课题。
