Welcome to Wang Xiaoze blog

dev-tools该项目是是rust + vue开发的桌面端项目，是前端可视化开发工具，当然此开发工具不同于平常的开发工具，是有利于自己的一款工具； 目前属于测试阶段，有些问题还未发现； 背景在开发中，我曾经有个疑问，就是不论在linux 还是docker的开发环境下，它都是有专属的可视化面板的，比如宝塔，1panel, docker桌面端等等；就好比说您如果不清楚操作命令， 那么您就可以使用面板的简单操作； 在这样的想法下， 于是我就简单的开发，之前的一个版本是electron + vue的开发，但是在开发过程中，遇到的问题太多太多了，electron操作的是node；于是就开发了一半； 不论是在开发过程中，还是最后的打包部署其体积都是很大的；简单的说就是底层用的是electron，其外层就是webview页面，不做优化的情况下体积很大；一个简单的工具总不是几十兆的大小吧，不合适； 于是就简单的接触了rust, 下载地址 mac 系统安装 windows 系统安装 开发进度 基础页面功能已完成; 主题切换功能已完成； git 配置功能已完成； node...

环境配置目前该软件还做不到一体化操作，有些环境需要手动配置；主要需要配置的是 node 相关环境变量 自动安装 如果您还未安装fnm, 那么您可以点击按钮就行安装，点击之后会自动进行安装，如果您安装失败了，那么需要手动安装，具体安装方法可以参考fnm 手动安装如果您执行这一步，那么您应该是自动安装失败了，那么您需要执行以下几个步骤即可； 如果您是mac/linux那么请查看这里 下载 fnm您可以在点击下载下载不同平台版本； 下载成功之后将其解压放在d盘（只要不是c盘即可）某个目录下（不能为中文），如：D:\tools\fnm 这个时候您需要配置对应的环境变量 在系统变量添加 123# FNM_DIR 为变量名 D:\tools\fnm\node为变量值 以下也是一样的FNM_DIR: D:\tools\fnm\nodeFNM_NODE_DIST_MIRRORs: D:\tools\fnm\node 这个时候需要手动重启cmd或者vscode, 输入命令fnm -v如果显示版本号，那么说明安装成功，可以继续往下走； 想要安装 node 只需要执行 fnm...

log-reporting - V1本系统的开发目的很简单，就是为了在部分情况下搜集前端的异常日志，用于分析异常情况; 如：线上环境的项目我们会吧一些日志删除，如果前端报错那么日志是首选， 这样的情况我们不知道是哪里的报错导致页面崩溃的； 那么开发这款工具常规情况下能解决大部分的问题； 🔈 地址 github 地址 npm 地址 🔈 日志搜集范围 资源： 资源地址不正确或不存在导致的资源异常 代码： 搜集报错信息，页面的崩溃等等； 请求： 请求参数错误，访问地址不存在，异常拦截 额外添加功能： 支持录制自定义时间的视频，但是最大时间不能超过 1 分钟; 🔈 如何使用🔈js 项目引入需要克隆下载该项目, 执行命令 pnpm run build， 之后会在根目录 dist 文件下看到打包的对应的文件信息; 根据不同平台引入即可; 下面代码示例为浏览器的使用： 123456789101112131415161718192021222324252627<script...

@log-reporting/core - V2值得注意: v2 版本的包为“@log-reporting/core”, 而 v1 版本的包为“log-reporting”； 写法参数等完全是不一样的，v2 版本为全新版本 当然， v2 版本由内置的types， 如果您的项目因为安装@log-reporting/core而导致ts类型报错，那就需要您安装@log-reporting/types了，这样就可以完全解决类型报错的问题； 当前版本仅仅支持客户端使用，不支持在服务端使用 🔈 地址 github 地址 npm 地址 🔈 注意事项 本系统的开发目的很简单，就是为了在部分情况下搜集前端的异常日志，用于分析异常情况;如：线上环境的项目我们会吧一些日志删除，如果前端报错那么日志是首选， 这样的情况我们不知道是哪里的报错导致页面崩溃的；那么开发这款工具常规情况下能解决大部分的问题； 该版本为全新版本, 与之前的版本会有很大的区别; 🔈...

个人项目 本人空余时间闲暇，开发一些小工具以及项目; 还在使用的项目sim-admin 这是一个用于快速入手上门的vue后台管理系统, 该应用用到最新的技术vue3, ts, rsbuild等；该项目还使用了辅助函数 functional-helpers-lib 工具 github 网站预览 辅助函数 functional-helpers-lib 就是一个用于常规的utils, hooks的函数辅助插件 github log-reporting 这款工具呢顾名思义就是日志上报，就是搜集客户端的一些告警报错日志到服务端，从而在服务端进行数据分析征集成客户端可视化数据面板； 目前该工具分为俩个版本： log-reporting 该版本为低版本，支支持部分功能，目前仅支持日志上报，视屏录制，但是不支持 pv与曝光统计 Github npm 文档说明 @log-reporting/core 该版本为全新版本，与 log-reporting 完全不同， 映射以及使用完全不一样; 在原有的基础上完全支持 pv与曝光统计；...

冒泡排序（Bubble Sort）是一种简单的排序算法，它重复地遍历要排序的数据，比较相邻的两个元素，如果它们的顺序错误就把它们交换过来，直到没有需要交换的元素为止。 冒泡排序的基本步骤如下： 从第一个元素开始，比较相邻的两个元素。如果第一个元素大于第二个元素，则交换它们。 移动到下一对相邻的元素，重复步骤 1。 继续这个过程，直到最后一对相邻的元素 如果在整个过程中没有发生任何交换，则说明数据已经排好序。 否则，重复步骤 1-4，直到没有需要交换的元素为止。 demo代码123456789101112131415// 从左到右排序，// 它的核心逻辑是：在每一轮冒泡中，将当前元素与其后面的元素进行比较，如果当前元素大于后面的元素，则交换它们的位置。// 这样，每一轮冒泡都会将最大的元素冒泡到数组的末尾。function sort(data = []) { for (let i = 0; i < data.length; i++) { for (let j = i + 1; j < data.length; j++)...

快速排序（Quicksort）是一种高效的排序算法，它的平均时间复杂度为 O(n log n)，是目前最快的通用排序算法之一。 快速排序的基本步骤是： 选择一个元素作为枢轴（pivot）。 将所有小于枢轴的元素放在枢轴的左边，所有大于枢轴的元素放在枢轴的右边。 对枢轴左边和右边的子序列递归应用快速排序算法。 快速排序的关键在于选择合适的枢轴。不同的枢轴选择方法会影响快速排序的性能。常见的枢轴选择方法包括： 随机选择：随机选择一个元素作为枢轴。 中位数选择：选择中位数作为枢轴。 最小值选择：选择最小值作为枢轴。 demo代码123456789101112131415161718function quickSort(arr) { if (arr.length <= 1) { return arr; } const pivot = arr[0]; const left = []; const right = []; for (let i = 1; i < arr.length; i++) { if (arr[i]...

插入排序（Insertion Sort）是一种简单的排序算法，它的工作原理是通过逐一将未排序的元素插入到已排序的序列中，直到整个序列都有序。 插入排序的步骤如下： 从第二个元素开始（索引为 1），将当前元素作为 key 与 key 之前的元素进行比较，如果之前的元素大于 key，则将其向后移动一位。 重复步骤 2，直到找到一个小于或等于 key 的元素。 将 key 插入到该位置。 重复步骤 1-4，直到整个序列都有序。 demo代码12345678910111213function insertionSort(arr) { for (let i = 1; i < arr.length; i++) { let key = arr[i]; let j = i - 1; while (j >= 0 && arr[j] > key) { arr[j + 1] = arr[j]; j--; } arr[j + 1] = key; } return...

选择排序（Selection Sort）是一种简单的排序算法，它的基本思想是每次从未排序的数据中找出最小（或最大）元素，并将其放到已排序的数据的末尾。 选择排序的步骤如下： 从未排序的数据中找出最小（或最大）元素。 将最小（或最大）元素与当前元素交换位置。 将当前元素标记为已排序。 重复步骤 1-3，直到整个数据被排序。 demo代码1234567891011121314151617function selectionSort(data = []) { for (let i = 0; i < data.length; i++) { let min = i; for (let j = i + 1; j < data.length; j++) { if (data[min] > data[j]) { min = j; } } // let temp = data[i]; // data[i] = data[min]; // data[min] = temp; //...

Changelo.md 是什么Changelog.md 是一个用于记录项目变更历史的文件，通常以 Markdown 格式编写。这个文件会详细列出所有版本的更新内容，包括新增功能、修复的 bug、改进的地方以及其他重要变更。这对于开发者和用户来说非常重要，因为它可以帮助他们了解软件的演化过程以及每个版本的具体变化。 特点： 版本号明确：每个更新都会带有版本号，便于追踪。 日期标记：每次更新都附有日期，帮助用户了解变更的时间。 变更分类：如新增功能、问题修复、性能提升等，让阅读者快速定位关心的信息。 简洁明了：内容通常直接切入要点，避免冗长描述。 怎么使用？我们使用CHANGELOG不需要手动创建，手动创建需要吧commit的消息显示在CHANGELOG；并且太麻烦了。这里推荐使用一些第三方的工具或者依赖； 1pnpm add -D conventional-changelog...