打小就很皮...-CSDN博客

原创实现可交互的泳道图组件（React）

本文介绍了如何使用React构建一个交互式泳道图编辑器。系统采用清晰的数据结构设计，包含泳道、节点和连接线三个核心元素。技术实现上使用Zustand进行状态管理，支持节点拖拽、贝塞尔曲线连接、撤销重做等功能。文章重点讲解了SVG绘制连接线的算法、拖拽交互的实现细节以及历史记录管理方案，并提供了样式优化和导出功能的实用技巧。整个方案兼顾了功能性和用户体验，可作为业务流程可视化工具的开发参考。

2026-03-06 14:32:09 395

摘要：Vue项目在Node.js17+环境打包时出现OpenSSL3.0兼容性问题，表现为digital envelope routines::unsupported错误。解决方案是在打包命令中添加--openssl-legacy-provider参数，并使用cross-env实现跨平台兼容。同时针对多环境打包需求，通过VUE_APP_前缀的环境变量区分不同版本。其他优化包括关闭sourcemap、Gzip压缩和代码分割。关键点：Node17+需注意OpenSSL兼容性，使用cross-env统一跨平台命令

2026-02-10 09:10:37 500

原创大文件上传的那些坑：分片上传+断点续传

摘要：为解决大文件上传问题，采用阿里云OSS分片上传方案，通过multipartUpload方法实现断点续传。核心代码简洁，但需注意超时设置（默认时间不足）、进度回调优化（UI需提示"正在上传"）及断点续传实现（依赖uploadId存储）。此外，通过UUID解决文件名冲突，前端校验文件类型/大小，并优化拖拽上传体验。关键点：参数需按业务调整，重视用户体验细节，全面测试网络异常及文件场景。

2026-02-09 13:34:31 482

原创二维码生成器：从前端到打印的全流程

本文介绍了前端使用qrcode库生成二维码的实践经验和常见问题解决方案。主要内容包括：1）基础用法和支付场景应用；2）二维码优化技巧（容错率设置、尺寸调整、打印适配）；3）常见问题如二维码复杂度、清晰度、打印效果的处理；4）二维码下载和支付状态轮询的实现；5）批量生成和打印预览等实用技巧。文章强调了根据使用场景调整参数的重要性，并提醒注意定时器清理等开发细节。

2026-02-09 09:37:52 844

原创 Base64 上传到阿里云 OSS

本文介绍了将Base64格式的Canvas截图上传至阿里云OSS的方法。首先需要将Base64转换为Blob对象：通过atob解码并转换为Uint8Array，再构造Blob。然后准备OSS表单数据FormData，包含签名、策略等必要参数。最后使用fetch API进行上传，相比XMLHttpRequest代码更简洁。关键点包括：去除Base64前缀、从Base64提取MIME类型、获取文件扩展名、正确构造Blob对象等。该方法解决了OSS不支持直接上传Base64数据的问题，提供了完整的解决方案。

2026-02-02 15:15:12 829

原创聊聊 OpenClaw：是真好用，还是真“坑爹”？

OpenClaw（原Clawdbot）近期在GitHub爆火，它让电脑具备远程语音控制、记忆用户习惯和兼容多AI系统的能力，使用体验流畅。但该工具存在严重安全隐患：需开放过高权限可能导致隐私泄露；AI误操作可能删除重要文件；还可能产生高额API费用。建议仅在闲置设备上试用，避免在主力机使用以防数据风险。

2026-02-02 11:16:24 866

原创 dnd-kit 实现表格拖拽排序

摘要：本文介绍了在React项目中实现表格行拖拽排序的技术方案。通过对比react-dnd、react-beautiful-dnd等主流库后，选择了@dnd-kit作为解决方案，因其轻量、高性能且完美支持React19。详细说明了如何集成@dnd-kit与Ant Design Table，包括处理表格行自定义、transform转换、拖拽手柄实现等关键点。特别强调了几个技术难点：使用CSS.Translate.toString()转换transform对象、通过Context传递listeners实现精准拖

2026-02-01 14:46:12 338

原创 React Router 7 全局路由保护

本文介绍了一种优化的React路由保护方案，通过全局路由保护替代原先分散的页面级验证。关键改进包括：1）在main.jsx中使用全局ProtectedRoute组件统一管理路由保护；2）实现token验证、路由白名单检查和401错误处理；3）通过isRelogin标志位防止多次401提示；4）处理懒加载与路由保护的兼容问题。该方案解决了重复代码、安全漏洞和逻辑混乱问题，使路由管理更集中可靠，同时保留了登录跳转和懒加载功能。文中还总结了全局保护、401处理、路由白名单维护等关键实践要点。

2026-02-01 13:56:00 422

原创 Tesseract.js OCR 中文识别

本文介绍了使用Tesseract.js实现纯前端OCR文字识别的实践经验。该方案支持中文识别并返回文本位置信息，主要优势包括无需后端、开源免费。文章详细说明了基础使用方法、词语位置提取算法（通过合并bbox实现）、性能优化建议（图片预处理）以及日志过滤技巧。同时指出了几个关键问题：中文识别准确率约70-80%、首次需下载20MB语言包、图片质量直接影响识别效果。最后提供了封装好的工具函数，便于项目复用。该方案特别适合需要在前端实现文字定位功能的场景。

2026-02-01 11:24:48 551

原创 React 用 Canvas 实现图片标注，我踩过这些坑

本文总结了在图片标注功能开发中的五大常见问题及解决方案：1.高DPI屏幕模糊问题，需通过devicePixelRatio调整canvas尺寸；2.缩放平移时的坐标转换问题，需记录fitScale、scale和offset三个状态；3.拖拽性能问题，采用ref保存offset和节流优化；4.标注框点击检测问题，通过增加气泡辅助点击；5.虚线框绘制问题，注意使用setLineDash并恢复实线。最终采用双层Canvas架构（图片层+标注层）提升性能。这些经验对开发图片标注功能具有重要参考价值。

2026-02-01 11:24:10 369

原创 React 19 + Vite 6 + SWC 构建优化实践

文章摘要：针对项目首屏加载慢的问题（8秒），通过分析发现2.8MB主bundle过大。采用Vite6的代码分割技术，手动配置分包策略将各依赖库拆分为300KB以内的chunk；优化开发环境配置，区分dev/test/prod环境；使用SWC替代Babel使编译时间从12秒降至4秒；清理生产环境console.log并添加React19补丁。最终主bundle降至800KB，首屏加载时间优化到1.5秒，Lighthouse评分提升至92分。关键经验：大型项目需手动分包、提前规划环境变量、优先使用SWC编译器。

2026-02-01 11:22:18 378

原创别再写三行 Flex 了！一行 CSS 实现完美居中

在前端圈，如何实现“垂直水平居中”几乎成了面试和日常开发的“固定节目”。从最原始的，到后来统治战场的，技术一直在寻找最简洁的写法。

2026-01-30 17:52:00 240

原创《在 React/Vue 项目中引入 Supademo 实现交互式新手指引》

Supademo是一款基于Web的互动式新手引导工具，帮助用户快速熟悉应用功能。它提供动态指引、自定义内容和简单集成，支持创建符合品牌形象的引导流程。使用方法：注册账号后编辑内容，通过API集成到项目，实现点击触发指引。适用于需要用户教育的产品，能显著提升用户体验。官网：https://app.supademo.com/

2026-01-30 16:54:50 489

原创阿里云OSS文件上传组件开发文档

本文分享了基于阿里云OSS的前端直传文件上传组件实现方案。该方案采用前端直传方式，通过后端生成临时签名保障安全性，减轻服务器压力。组件封装了文件验证（类型、大小、数量）、签名获取、进度监控等核心功能，使用时间戳重命名避免冲突。实现采用FormData和XMLHttpRequest，支持大文件上传和进度显示。组件提供丰富的配置选项，包括存储目录、文件类型限制等，并解决了签名过期等常见问题。该方案具有安全性高、性能好、易扩展等特点，可直接复用为通用上传组件。

2026-01-30 09:30:00 1417

原创 Vditor 实现混合模式评论，使用 Zustand 本地存储

本文介绍了如何为Markdown文档实现评论功能，主要包括：1. 使用Zustand状态管理创建评论Store，支持添加评论、回复、删除等操作，并实现localStorage持久化；2. 开发浮动评论面板组件，支持章节和段落两种评论粒度，包含评论列表、回复功能和用户交互；3. 在Markdown渲染器中集成评论功能，为标题和段落添加评论按钮，并显示评论数量。该方案支持多级回复、实时统计和持久化存储，通过enableComment参数即可启用。如需对接后端，可修改Store中的API调用逻辑。

2026-01-27 18:33:08 447

原创基于 React 实现 Vditor 的可复用 Markdown 渲染组件

本文介绍了基于Vditor的Markdown渲染组件实现方案。Vditor是一款支持所见即所得、即时渲染的浏览器端Markdown编辑器。通过封装Vditor.preview API，实现了支持主题切换、图片预览、大纲导航等功能的可复用组件。核心实现包括：使用Vditor渲染Markdown内容，动态替换img标签为Antd Image组件以支持图片预览，自动提取标题生成大纲导航，并优化了渲染性能。该方案适用于需要渲染复杂Markdown内容（含图片、视频、公式等）的场景，相比marked、markdown

2026-01-27 15:16:41 1064

原创 React 合同审查组件：按合同标题定位

摘要：该功能实现了通过条款标题在文档中快速定位并高亮显示整个章节内容。主要特点包括：1）通过标题匹配定位，支持4种匹配策略；2）智能确定章节边界（根据标题层级）；3）自动高亮从当前标题到下一个同级/更高级标题之间的所有内容；4）100ms延迟确保DOM渲染完成；5）优先选择最短标题匹配以提高精确度。与基于内容片段的定位相比，该方案更适合条款级别的快速浏览，具有较低的算法复杂度和中等容错能力。

2026-01-26 10:58:57 598

原创 React 合同审查组件：按合同原文定位

本文介绍了一个合同审核系统中的原文定位功能实现。该功能允许用户通过点击右侧风险点列表中的"定位原文"按钮，快速定位并高亮显示中间文档对应的原文内容。主要实现包括：1)构建精确匹配和模糊匹配两种正则表达式策略；2)使用TreeWalker遍历DOM查找匹配节点；3)基于编辑距离计算相似度实现模糊匹配；4)自动向上查找合适父元素添加高亮样式；5)平滑滚动至目标位置。系统优先尝试精确匹配，失败时使用模糊匹配算法(相似度阈值>0.8)，并支持处理空格变体、标点符号等格式差异，提高了定位的准

2026-01-26 09:15:52 246

原创 React 合同审查组件：文档结构树渲染及定位详解

本文介绍了合同审查系统中Markdown文档结构树的实现方案。系统通过栈数据结构解析后端返回的Markdown文本，构建层级目录树，并利用AntDesignTree组件进行渲染。核心功能包括：1）使用正则匹配和栈结构处理多级标题；2）实现节点点击定位与平滑滚动；3）标题高亮显示。方案优化了用户体验（平滑滚动、视觉反馈）和性能（延迟执行、唯一key），支持各类标题组合情况，并预留了搜索、同步滚动等扩展接口。该实现将数据解析、UI渲染和交互逻辑分离，构建出灵活高效的文档导航组件。

2026-01-21 10:09:19 727

原创 Claude + Skills 快速生成PPT

这次分享一个"黑科技":利用 AI + PPT Skill,从大纲到成品演示文稿,全程自动化。在 Claude Code 中: 直接把对应的PPT的SKill.md文档链接丢给claude以及大纲丢给它，按照自己想要的需求及进行微调。大纲的内容是根据我的需求描述让Gemini帮我生成的大纲，他主要是针对每一个模块、第几张PPT的内容分区进行大纲的编写。这是 Claude Code 提供的一个 PPT 生成 Skill,本质上是把你的大纲转换成专业的演示文稿。- 我的技术主题:深蓝色 + 青色(科技感)

2026-01-18 23:21:28 2436

原创网页包装为桌面应用（electron版）

使用 Electron 将在线网页封装成独立的 Windows 桌面应用程序。npm start显示了自定义图标 ✅打包时因为网络问题无法下载签名工具，导致图标无法嵌入到 exe 文件中 ❌解决方案有几个：方案1：手动下载签名工具缓存# 手动下载 winCodeSign-2.6.0.7z 并放到缓存目录方案2：使用 ResHacker 或其他工具手动修改图标方案3：暂时接受现状（虽然打包失败，但 exe 文件已经生成在，只是图标是默认的）

2025-12-31 15:17:51 1408

原创网页包装为桌面应用（Nativefier版）

Nativefier 是一个开源的命令行工具，用于将任何网站快速打包成独立的桌面应用程序，支持 Windows、macOS 和 Linux 系统。它基于 Electron 框架，使用 Chromium 内核渲染网页，生成的本地应用可执行文件（如 .exe、.app 或 .deb）可直接运行。

2025-12-31 14:28:02 602

原创发送到飞书机器人的完整流程（拓展）

技术点实现位置说明消息格式使用卡片消息 +lark_mdMarkdownURL 验证多重验证确保 URL 合法性错误处理双层HTTP 状态码 + 飞书 API 错误码降级方案剪贴板复制手动发送格式转换HTML → 飞书 Markdown状态管理publishing→completed。

2025-12-30 16:54:46 899

原创录音与阿里云ASR实时识别实现流程

获取到的相关Key自己手动配置在.env文件即可。录音结束后（录音开始时就获取到了token）库实现浏览器录音功能。

2025-12-29 17:46:58 794

原创 AI Skills认知

Skills 就像是将特定的业务场景和 AI 能力封装成一个标准化的"技能包"或者"记忆包"，包含配置说明、服务实现和集成规范，能将它从一个通用 AI 变为精准执行特定任务的专家。其采用渐进式披露机制，它并不会一次性加载所有的内容，而是分层、按需调用。Skills 主要是去教 Claude “如何做” 一件事（内部知识和流程），而工具是让 Claude “去做” 一件事（调用外部数据或执行动作）。其采用渐进式披露机制，它并不会一次性加载所有的内容，而是分层、按需调用。脚本、模板、参考文档（存在情况下）

2025-12-29 16:08:52 652

H5 简单demo示例模板

空空如也