- 博客(96)
- 收藏
- 关注
RSS订阅原创 小龙虾 OpenClaw 安装教程：从零到能干的 AI 助手
特点是「能干活」：除对话外，支持浏览器自动化、桌面控制、向量记忆、定时任务等，并可通过 Gateway 接入微信、飞书、Telegram、Discord 等渠道。在这里可以直接和 OpenClaw 对话，并体验「浏览器操作」「电脑控制」等能力，对前端同学理解「AI + 前端」交互非常直观。或配置文件中按文档填写对应平台的 Token/密钥，即可在聊天软件里和同一只「小龙虾」对话，实现「多端一个助手」。按上述流程走一遍，你就能在本地拥有一个「能干活的」小龙虾 OpenClaw，非常适合作为。
2026-03-09 16:14:55
1637
1
原创 html2canvas 深入解析：实现原理 + 替代方案一文讲清
在 H5 活动页里，html2canvas 常被用于“分享图生成”。它好用，但并不等于系统截图，而是通过“克隆文档 + 解析样式 + Canvas 重绘”来还原页面。本文基于 v1.4.1 源码拆解主流程，重点说明克隆、层叠上下文、文本渲染与资源加载机制，并给出 html-to-image、Puppeteer/Playwright、Canvas/SVG 自绘 等替代方案对比，帮助你在“接入成本、还原度、稳定性”之间做出更适合业务的选型。
2026-02-26 15:58:07
1124
原创 html2canvas 踩坑记录：分享图生成与平板缩放兼容
结果是：克隆文档里保留了祖先的 transform，但实际绘制时没有按同样方式应用，导致「视觉上」的缩放在 Canvas 里错位或失效，文字排版就乱了。这样，克隆树里只有「截图根节点」带缩放，且与真实页面视觉效果一致，文字和间距就不会再错位。这样 html2canvas 只处理一层 transform，结果就和页面看到的一致。是常用的方案：对目标 DOM 做一次「快照」，输出 Canvas，再转成图片。这样既减少请求，又避免无关资源拖慢生成，分享图速度会明显改善。，取矩阵左上 2×2 的缩放分量即可）。
2026-02-10 15:49:50
433
原创 Canvas 画板的实现 2.0：支持放大、缩小
在 1.0 版本中，画板已经具备“好用”的基础能力，但一旦用户想细画或写字时，缩放就成了刚需。本篇记录我为画板加入“放大/缩小”的实现思路：既保留 1.0 的绘制体验，又在缩放过程中保证笔迹精度与交互一致性。
2026-02-04 17:20:56
658
原创 Canvas 画板的实现：换色、清除、前进/回退与橡皮擦
本文详细介绍了实现一个功能完整的网页画板的核心技术要点。主要内容包括：1) 基础画板搭建与鼠标/触摸绘制功能实现；2) 颜色切换功能；3) 橡皮擦功能通过改变合成模式实现；4) 历史记录功能采用快照栈实现撤销/重做；5) 高清适配方案。文章提供了可直接使用的精简代码示例，涵盖了从基础绘制到高级功能的完整实现思路，适合快速集成到项目中。
2026-01-27 16:20:42
318
原创 移动端屏幕适配新思路：基于宽高比的动态适配策略
基于宽高比的动态适配策略为移动端和多设备兼容提供了更精细的控制手段。通过结合CSS属性选择器和JavaScript动态检测，我们可以创建出真正适应各种屏幕比例的用户体验。多媒体展示网站电子商务平台数据可视化应用全屏交互体验记住，优秀的响应式设计不仅仅是适应不同宽度，更要考虑屏幕比例、设备特性和用户使用场景。通过宽高比检测，我们可以为用户提供更加精准和舒适的浏览体验。扩展阅读CSS宽高比属性 aspect-ratio设备像素比与响应式图片。
2025-12-14 22:13:27
596
原创 如何自定义一个MCP服务器：从零到一的完整指南
满足特定业务需求：连接企业内部系统、数据库或API提升开发效率：封装常用操作，减少重复代码增强安全性：完全控制数据访问和权限管理优化性能：针对特定场景进行性能优化✅ MCP的基本概念和用途✅ 如何搭建基础的MCP服务器✅ 如何实现工具、资源和提示词✅ 错误处理和日志记录✅ 配置和部署流程✅ 最佳实践和进阶功能自定义MCP服务器为AI应用提供了无限的可能性。无论是连接企业内部系统，还是集成第三方服务，MCP都能帮助你扩展AI模型的能力。现在，开始构建你自己的MCP服务器吧！🚀。
2025-12-01 19:03:39
1169
原创 Figma MCP 在 Cursor 的实战：从设计到代码的无缝转换
作为一名前端开发者，你是否遇到过这样的场景：设计师在 Figma 中完成了精美的界面设计，而你需要在代码中手动还原每一个像素、每一个间距、每一个颜色值？这个过程既耗时又容易出错。随着 AI 编程工具 Cursor 的兴起，以及 Figma MCP 协议的推出，我们终于可以告别这种低效的工作方式。本文将带你深入了解如何在 Cursor 中配置和使用 Figma MCP，实现从设计稿到代码的自动化转换。设计文件的结构和层级组件的样式属性（颜色、字体、间距等）设计规范（Design Tokens）
2025-11-17 21:58:26
2818
原创 Chrome DevTools MCP 使用指南
是Anthropic提出的一个开放协议，用于连接大型语言模型（LLM）与外部工具和数据源。提升开发效率：AI可以自动执行繁琐的测试任务改善代码质量：AI可以实时分析性能，提供优化建议简化测试流程：自动化测试变得简单易用增强AI能力：AI从代码生成扩展到实际测试和调试。
2025-11-10 02:15:27
3673
3
原创 background样式问题踩坑
复合background语法在现代浏览器中支持良好。如需支持老旧浏览器，可能需要单独设置属性并注意执行顺序。使用了background属性且需要动态更新背景图时，单独设置的。在动态更新时的性能表现不如静态设置稳定，特别是对大尺寸图像。属性在IE11及以下版本需要polyfill支持。CSS属性设置顺序影响最终效果，当先设置。可能失效，主要原因是属性覆盖顺序问题。当需要更精确控制动态图像时，使用。属性通常能提供更稳定的渲染结果。
2025-10-31 21:14:33
244
原创 vscode自动保存注意事项
临时解决方案：禁用插件或调整文件，适合快速解决问题。长期策略：与团队协商统一格式化时机（如提交时而非保存时），减少开发阶段的干扰。调试工具：利用VS Code的Output面板（选择或Prettier日志）观察格式化触发链。通过分层排查插件、编辑器配置和项目文件，可精准控制保存时的格式化行为，平衡开发效率与代码一致性需求。
2025-10-09 18:19:17
408
原创 状态管理库 Zustand 的接入流程与注意点
Zustand 的简洁性使其适合中小型项目快速接入，但对于超大型应用需谨慎设计 Store 结构。合理使用中间件和 TypeScript 能显著提升可维护性。
2025-09-27 20:57:49
881
原创 redux-toolkit踩坑记录
业务中采用Redux Toolkit（RTK）作为状态管理方案，因其简化了Redux的繁琐配置，提高了开发效率。但在低版本浏览器（如Chrome 49以下）运行时出现报错，导致功能异常。技术选型的全面评估引入新库时需彻底检查其底层依赖和浏览器兼容性，尤其是元编程等高级特性。降级方案的可行性对于无法通过垫片解决的API，需提前制定备选方案，避免后期被动。团队协作影响迁移过程中需统一团队规范，并提供替代方案的示例代码和文档支持。
2025-09-27 15:35:14
491
原创 tua-body-scroll-lock踩坑记录
但是在滑动过程中如果调用lock方法，此时window.scrollY会变为0，会导致标题栏的底色消失，这样的体验很不佳，用户可能会认为有bug。解决方法也很简单，在调用lock时存一个变量，当scroll事件回调发现这个变量为true时也认为此时页面已经滚动了，如下面代码。在日常工作中，我们经常会遇到拉起弹窗时要禁止页面的滚动，此时tua-body-scroll-lock库就是一个很好的选择。但是最近在维护老项目的时候发现这个项目会监听滚动事件，当滚到到某个地方时就会给标题栏一个底色，如下面代码。
2025-09-12 21:16:06
250
原创 ts学习4
假设我们有一个名为padLeft的函数。如果padding是number，它会将其视为我们想要添加到input的空格数。如果padding是string，它应该只是将padding前置到input。让我们尝试实现当padLeft为padding传递number时的逻辑。哦，我们在padding上遇到错误。TypeScript 警告我们，将添加到number可能不会给我们想要的东西，这是正确的。换句话说，我们没有先明确检查padding是否是number，也没有处理它是string的情况，所以让我们这样做。
2025-08-11 01:03:04
305
原创 ts学习3
您可能会看到的第一种组合类型的方法是联合类型。联合类型是由两种或多种其他类型组成的类型，表示可能是这些类型中的任何一种的值。我们将这些类型中的每一种都称为联合的成员。
2025-07-28 20:01:40
1043
原创 ts学习2
JavaScript 中的每个值都有一组行为，您可以通过运行不同的操作来观察这些行为。这听起来很抽象，但作为一个简单的例子，考虑我们可能在名为message的变量上运行的一些操作。如果我们将其分解，第一行可运行的代码会访问一个名为的属性，然后调用它。第二个尝试直接调用message。但是假设我们不知道message的值——这很常见——我们不能可靠地说明尝试运行这些代码会得到什么结果。每个操作的行为完全取决于我们最初拥有的价值。message。
2025-07-18 20:53:19
748
原创 ts学习1
您可以在 JavaScript 中使用多种设计模式。但是，某些设计模式使得自动推断类型变得困难（例如，使用动态编程的模式）。为了涵盖这些情况，TypeScript 支持 JavaScript 语言的扩展，它为您提供了告诉 TypeScript 类型应该是什么的地方。例如，要创建一个包含和id: numberid: 0,您可以使用interfaceid: number;然后，您可以在变量声明后使用类似: TypeName的语法来声明 JavaScript 对象符合新interface。
2025-07-09 21:05:39
1055
原创 koa搭建服务器（二）
操作数据库就可以使用Sequelize内置的方法了，这里用我的查询接口为例，接口可以支持日期、状态、分类、分页查询，所以需要动态给where添加相应的条件。由于在实际项目中连接一个数据库中的多个表，所以在这里我建了一个models文件夹，index.js用来遍历models文件夹下的js文件并依次创建实例。框架其他的一些方法可以看下以下文章，首先也是需要安装相关的依赖。
2023-10-29 15:34:53
371
原创 react的setState做了什么
setState这个方法在调用的时候是同步的，但是引起React的状态更新是异步的。在React中，如果是由React引发的事件处理（比如是通过onClick引发的事件处理,以及生命周期函数调用setState），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。如果需要对state数据更改监听，就可以使用第二个参数，它是用来监听state里面数据的更改，当数据更改完成，调用回调函数，用于可以实时的获取到更新之后的数据。
2023-10-22 20:11:39
701
原创 react&antd（11）＜Table /＞组件更改dataSource和columns时页面不更新渲染的问题
组件增加一列数据，于是我在该状态下对columns进行操作并把更新后的columns重新setState，但是此时页面的表格并没有更新渲染，我在控制台打印的columns却已经是更新后的了。因为columns和dataSource都是一个对象数组（[{},{},{}]），所以我们更改columns/dataSource时引用地址并没有改变，改的只是引用地址指向的内存数据。
2023-06-19 17:14:16
4187
原创 npm报错The operation was rejected by your operating system问题解决
npm报错The operation was rejected by your operating system问题解决
2023-04-23 17:44:34
1092
原创 git推送远程仓库报错解决
kex_exchange_identification: Connection closed by remote hostConnection closed by 20.205.243.166 port 22fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.
2023-04-08 23:55:30
1227
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人