天渺工作室 | 天渺工作室的blog

别再写改名脚本了，一个 Vite 插件搞定压缩、校验、自动哈希命名vite-plugin-pack-orchestrator

wangkai233@qq.com (天渺工作室) — Sat, 25 Apr 2026 12:00:00 GMT

别再写改名脚本了，一个 Vite 插件搞定压缩、校验、自动哈希命名vite-plugin-pack-orchestrator，市面上已经有一些 Vite 打包插件，比如 vite-plugin-zip-pack，vite-plugin-compress等，能用，但总差那么点意思 — 大多只支持 ZIP，功能也比较单一。

给AI装上「丁真语录」skill，vibecoding也能加点笑料

wangkai233@qq.com (天渺工作室) — Sat, 11 Apr 2026 12:00:00 GMT

最近看到有人搞了个蒸馏同事的skill，还有峰哥skill（这是好事啊😂），决定自己也搞个丁真的，不是什么正经功能，纯粹是给枯燥的编程生活加点笑料。

前端复古风选型必看！像素UI 、8bitUI 、精简复古风UI

wangkai233@qq.com (天渺工作室) — Sat, 04 Apr 2026 12:00:00 GMT

前端复古风选型必看！像素UI 、8bitUI 、精简复古风UI。整理了几个亲测还不错的复古风格UI库😂

Chrome浏览器自带翻译的诡异Bug：ID翻译后竟然变化了

wangkai233@qq.com (天渺工作室) — Sat, 22 Nov 2025 12:00:00 GMT

当前负责的项目主打海外业务，总免不了和多语言打交道。但最近我在Vite+Vue3+Element Plus技术栈的项目里，遇到了一个堪称“玄学”的bug——Chrome浏览器自带翻译功能，居然能把表格里的数字ID直接改了！从印度同事到国内运...

Ollama本地电脑运行无限制AI模型超简单案例

wangkai233@qq.com (天渺工作室) — Sat, 15 Nov 2025 12:00:00 GMT

想在本地用一款 “无拘无束” 的 AI 模型？Ollama 能帮你轻松实现，但先得说清楚：这类 “越狱模型” 虽自由，却可能藏着不少小麻烦。

整理些我常逛的Web3社区

wangkai233@qq.com (天渺工作室) — Wed, 12 Nov 2025 12:00:00 GMT

Web3作为热门互联网技术正在快速发展（也包含大量嘎割韭菜的），涌现出了许多有价值的社区。整理了一些我常逛社区资源。

谷歌广告AdSense/GAM 接入避坑 + 填充监听 + 问题排查

wangkai233@qq.com (天渺工作室) — Fri, 10 Oct 2025 12:00:00 GMT

作为长期负责海外业务的开发者，公司业务中经常会和谷歌的人员有沟通。在接入谷歌广告生态时，踩了很多坑，很多坑都是和谷歌的技术人员沟通后才发现问题的（有些最新情况和文档不一致，很坑）。

如何优雅判断 AdBlock 是否开启？前端实现方案分享

wangkai233@qq.com (天渺工作室) — Mon, 10 Feb 2025 12:00:00 GMT

因为自己主要负责面对海外的用户项目，发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了，于是专门研究了一下，并尝试了很多方法。发现npm上的插件基本都失效了，于是研究了一下屏蔽原理。

Vite打包zip并改名为md5sum哈希案例

wangkai233@qq.com (天渺工作室) — Tue, 10 Sep 2024 12:00:00 GMT

在前端项目 DevOps CICD 流水线中，通过 MD5 哈希值命名打包文件的实践方案。核心流程为：使用工具将 dist 目录打包为 ZIP，通过 md5sum 计算该 ZIP 文件的 MD5 哈希值，再以哈希值重命名 ZIP 文件。

MapLibre Native安卓集成实战：从环境配置到地图展示全指南

wangkai233@qq.com (天渺工作室) — Fri, 07 Jun 2024 12:00:00 GMT

MapLibre Native 是一个免费且开源的库，用于在各种平台上的应用程序和桌面应用程序中发布地图。由于 GPU 加速的矢量瓦片渲染，地图的快速显示成为可能。

JavaScript 正则陷阱：全局匹配 /g 导致的 test () 方法异常详解

wangkai233@qq.com (天渺工作室) — Mon, 29 Apr 2024 12:00:00 GMT

在 JavaScript 正则表达式使用中，一个看似简单的全局匹配标志/g，可能会在循环检测时引发令人困惑的结果。本文将通过实际案例解析这一现象的底层原因，并提供多种解决方案。

你可能忽略的 HTML 细节：lang 属性的作用与避坑指南

wangkai233@qq.com (天渺工作室) — Sat, 10 Feb 2024 12:00:00 GMT

在 HTML 标签中，lang属性看似简单，却隐藏着影响用户体验的关键细节。本文将深入解析lang的作用，结合真实案例说明配置不当可能引发的问题，并提供正确的使用方法。

Vue3中Fragment特性的一个bug，需要留意的注意事项

wangkai233@qq.com (天渺工作室) — Mon, 15 May 2023 12:00:00 GMT

Vue3中的Fragment特性虽然提供了更灵活的组件结构，但在某些特定场景下可能会出现意外的行为。本文详细介绍了一个需要注意的Fragment相关bug及其解决方案。

温习网络协议基础：TCP/IP与OSI模型层级关系详解

wangkai233@qq.com (天渺工作室) — Sun, 02 Apr 2023 12:00:00 GMT

本文详细介绍了TCP/IP与OSI网络模型的层级关系，包括各层次的对应关系、功能定位及主要协议，帮助读者建立网络协议栈的完整认知框架。

Android startActivityForResult()废弃替代方案详解及实例

wangkai233@qq.com (天渺工作室) — Sun, 05 Mar 2023 12:00:00 GMT

本文详细介绍Android中startActivityForResult()方法被废弃后的替代方案——Activity Result API的使用方法，并通过完整案例展示页面间的数据传递和结果接收流程。

Chrome 浏览器移除 Event.path 后的兼容方案

wangkai233@qq.com (天渺工作室) — Sun, 12 Feb 2023 12:00:00 GMT

2023 年 2 月初，Chrome 浏览器（版本 109.0.5414.120）在一次更新中移除了点击等事件中 Event.path 数组参数。值得注意的是...

基于 Vue 自定义指令实现点击事件权限控制

wangkai233@qq.com (天渺工作室) — Sun, 12 Feb 2023 12:00:00 GMT

在许多业务场景中，需要对按钮等元素的点击事件添加权限校验：当用户拥有权限时，正常触发点击事件；无权限时，则拦截事件或执行其他提示逻辑。若通过封装组件实现，在使用第三方 UI 库（如 Element Plus）的场景下，会导致封装成本过高。本文将介绍如何通过 Vue 自定义指令低成本实现这一需求。

Flutter MediaQuery 详解：监听设备字体等配置动态变化

wangkai233@qq.com (天渺工作室) — Fri, 27 Jan 2023 12:00:00 GMT

本文详细介绍 Flutter 中 MediaQuery 组件的使用方法，包括如何监听设备信息和配置动态变化（如系统字体大小、主题模式切换等），并通过实战示例演示如何实现响应式界面逻辑。

Vite 代码分割完全指南：从原理到实战配置

wangkai233@qq.com (天渺工作室) — Sun, 28 Aug 2022 12:00:00 GMT

在前端工程化中，代码分割（Code Splitting）是优化应用加载性能的关键技术。对于使用 Vite 构建的项目，合理配置代码分割可以显著减少初始加载体积，提升用户体验。本文将从基础原理到实战配置，全面讲解 Vite 中的代码分割实现。

Vue3中的Composables组合式函数

wangkai233@qq.com (天渺工作室) — Sun, 12 Jun 2022 12:00:00 GMT

Vue3中的Composables是类React Hooks式的组合式函数封装方法，它提供了一种更灵活的方式来组织和复用组件逻辑。本文详细介绍Composables的概念、优势以及与Vue2 mixins的对比。

Vue3源码中的TypeScript重载函数的作用

wangkai233@qq.com (天渺工作室) — Mon, 30 May 2022 12:00:00 GMT

函数重载一般指重载函数。重载函数是函数的一种特殊情况，为方便使用，C++允许在同一范围中声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同，也就是说用同一个函数完成不同的功能。这就是重载函数

写TS效率大提升,TypeScript中常用内置工具类型Omit、Pick、Partial、Required、Readonly、Exclude 、Extract

wangkai233@qq.com (天渺工作室) — Sun, 29 May 2022 12:00:00 GMT

TypeScript提供了多种内置工具类型，如Omit、Pick、Partial、Required、Readonly、Exclude、Extract等，这些工具类型可以显著提升开发效率，简化类型操作。本文详细介绍这些工具类型的使用方法和应用场景。

TypeScript type 和 interface区别

wangkai233@qq.com (天渺工作室) — Sun, 22 May 2022 12:00:00 GMT

TypeScript中type和interface都是用来定义类型的方式，但它们在语法、功能和使用场景上存在一些区别。本文将详细介绍TypeScript中type和interface的区别以及各自的使用场景。

Vue3+ElementPlus el-date-picker 时间范围限制配置详解

wangkai233@qq.com (天渺工作室) — Wed, 04 May 2022 12:00:00 GMT

详细介绍 Vue3 + ElementPlus 中使用 el-date-picker 组件实现时间范围限制的配置方法，包括固定时间段可选功能的实现。

JS中JSON.parse(JSON.stringify())深拷贝的缺点

wangkai233@qq.com (天渺工作室) — Sat, 22 Jan 2022 12:00:00 GMT

在JavaScript中实现深拷贝时，JSON.parse(JSON.stringify())方法虽然简单易用，但存在诸多局限性，包括数据类型丢失、循环引用报错等问题。本文通过具体案例详细分析其缺点，并提供更可靠的替代方案。

Flutter Dart 深拷贝全方案：Map 与实体类全解析

wangkai233@qq.com (天渺工作室) — Sun, 21 Mar 2021 12:00:00 GMT

在 Web 开发中，JSON.parse(JSON.stringify(obj)) 是实现深拷贝的常用方案（函数等特殊类型除外）。而在 Dart 中，深拷贝场景同样高频，尤其涉及 Map 和实体类时。Dart 没有内置通用深拷贝 API，本文结合 Dart 3.x 特性，整理一套实用方案，覆盖主流场景。

Flutter 监听软键盘弹出 / 关闭：官方原生方案（替代 keyboard_visibility）

wangkai233@qq.com (天渺工作室) — Wed, 06 May 2020 12:00:00 GMT

在 Flutter 开发中，监听软键盘的弹出与关闭是高频需求，但第三方插件 keyboard_visibility 已停止维护，存在编译报错（如 build.gradle 冲突）等问题，不推荐在新项目中使用。本文介绍 Flutter 官方提供的原生解决方案。

Ionic3 监听软键盘的高度

wangkai233@qq.com (天渺工作室) — Fri, 01 Mar 2019 12:00:00 GMT

在Ionic3应用开发中，监听软键盘的高度变化对于优化用户体验至关重要。本文介绍如何在Ionic3中实现软键盘高度的监听和处理，包括使用Ionic Native Keyboard插件和自定义解决方案。

MySQL Workbench 6.3CE 菜单汉化 xml

wangkai233@qq.com (天渺工作室) — Fri, 01 Mar 2019 12:00:00 GMT

找了很多 CSDN都要积分直接自己搞了个 MySQL8.0亲测可以 https://pan.baidu.com/s/1Mwbye2tUj2u3RMdR_oW7rQ