患得患失949-CSDN博客

原创【GitHub Actions Workflow 实战】从构建到部署的完整指南，从旧版本部署迁移到新版本的完整流程

【GitHub Actions Workflow 实战】从构建到部署的完整指南，从旧版本部署迁移到新版本的完整流程

2025-07-31 11:00:00 1752

原创【GitHub Workflows】GitHub Pages 自动部署进阶：PR 预览、多语言、自定义域名绑定

本文介绍了GitHub Pages部署的进阶技巧：1) PR预览功能，通过GitHub Actions自动构建并生成临时预览链接；2) 多语言站点部署方案，支持合并构建或子项目整合；3) 自定义域名绑定及HTTPS配置方法。文中提供了详细的YAML配置示例和DNS设置指南，并推荐了自动评论通知等实用功能。这些技巧能显著提升开源项目的协作效率和用户体验，特别适合文档和UI展示类项目。

2025-07-30 15:00:00 498

原创【GitHub Workflows 】自动发布静态网站的老旧方式 vs 新方式全对比

GitHub静态网站部署方式对比：传统方式需推送至gh-pages分支，简单但存在分支污染、效率低等问题；新方式通过artifact上传和deploy-pages自动部署，更安全整洁，支持预览环境，适合新项目。旧方式仍适用于老项目维护，但建议逐步迁移。新方式具有更细粒度权限管理、artifact可回溯等优势，是现代化部署的首选方案。

2025-07-30 11:00:00 334

原创【GitHub Workflows 基础（四）】workflow\_run、matrix 并行任务、复用 reusable workflows

GitHub Actions进阶功能摘要：本文介绍了GitHub Actions三大实用功能：1）workflow_run实现工作流依赖，通过监听其他工作流完成状态来触发后续流程；2）matrix策略支持并行运行多参数组合任务，如同时测试多个Node版本；3）reusable workflows通过workflow_call和uses实现跨项目流程复用，避免重复配置。这些功能可构建更高效的CI/CD管道，其中workflow_run适合构建-部署串联，matrix提升测试效率，复用工作流则降低

2025-07-29 13:00:00 301

原创【GitHub Workflows 基础（三）】深入理解 Artifact、缓存优化、并发控制与条件执行

本文深入讲解GitHub Actions工作流的高级功能：Artifact用于在job间传递构建产物；Cache加速依赖安装和构建；if条件控制步骤执行；concurrency防止冲突部署。还介绍了GitHub Pages专用上传方式、重试机制等实用技巧，并通过完整示例展示了如何组合这些功能实现高效构建部署流程。掌握这些功能可大幅提升工作流的智能性和执行效率。

2025-07-29 11:00:00 712

原创【GitHub Workflows 基础（二）】深入理解 on、jobs、steps 的核心语法与执行逻辑

本文深入解析 GitHub Actions 工作流的核心三要素：on（触发器）、jobs（任务）和 steps（步骤）。on定义工作流触发条件，支持分支、文件变化等精细控制；jobs包含并行或串行执行的任务，每个任务由多个steps组成，步骤可使用现有action或自定义shell命令。文章还介绍了多个job的依赖关系、Secrets使用及环境变量配置，并通过构建部署网站的实践示例展示完整流程。掌握这些核心概念后，开发者可以更灵活地编排自动化CI/CD流程。

2025-07-28 17:26:53 546

原创【GitHub Workflows 基础（一）】认识 .github/workflows/ 下的多个工作流

本文介绍了GitHub Workflows的基础知识，重点讲解了.github/workflows/目录下多个工作流的管理方式。主要内容包括：工作流是自动化脚本文件，用于定义自动任务；一个项目可以有多个独立工作流文件，会并行执行；文件名不重要，工作流行为由YML内容决定；可以通过needs控制同一工作流内任务顺序，但不能直接控制跨工作流顺序；还提供了工作流示例、目录结构建议和查看运行情况的方法。核心观点是：工作流数量不受限，文件名仅作标识，执行逻辑由YML内容定义。

2025-07-28 17:23:02 630

原创【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境

VSCode工作区配置详解：分析.vscode/settings.json的核心设置项，包括自动格式化(Prettier)、代码质量检查(ESLint)、语言特定配置等功能。重点说明各项配置的实际效果，如保存时自动格式化、智能导入提示、Vue文件优化等。全面介绍这些配置如何提升开发效率、保证代码一致性，并优化团队协作体验。适合开发者了解项目标准化配置的作用机制。

2025-07-27 15:22:38 818

原创【前端】【封装组件】代码编辑器组件Vue版本

Vue轻量级代码编辑器组件摘要：该组件提供简洁优雅的代码编辑功能，支持行号同步显示、双向滚动联动、暗黑模式适配和自定义高度设置。核心实现包括：通过计算属性统计行数并渲染、滚动事件同步机制、响应式数据管理，以及通过defineExpose暴露常用操作方法（获取/设置/清空/复制代码）。采用TailwindCSS实现视觉风格，预留多语言和语法高亮扩展接口，适合作为基础编辑器扩展更复杂功能。

2025-07-27 14:56:49 273

原创【前端】【微项目】【代码编辑器库CodeMirror】支持语法高亮、自动缩进、主题切换、行号显示、括号匹配等

本文介绍了如何利用CodeMirror快速构建功能丰富的在线代码编辑器。CodeMirror是一款轻量高效的网页代码编辑器组件，支持语法高亮、自动缩进等专业功能。文章通过一个Python编辑器实例，详细解析了核心配置、交互增强和UI美化方案，包括使用TailwindCSS实现现代化界面、监听编辑器事件实现状态更新等。还提供了多种拓展方向，如文件操作、云端同步、代码执行等，帮助开发者打造更强大的在线IDE。该方案具有配置灵活、易于定制、体验流畅等特点，适合教学平台、在线IDE等场景。

2025-07-25 16:33:47 1567

原创【前端】【微项目】【简易代码编辑器】打造一个简洁优雅的在线代码编辑器模板（附行号 + 跟随滚动功能）

简洁优雅的在线代码编辑器模板摘要：本文介绍了一个轻量级在线代码编辑器的实现方案，使用原生HTML、TailwindCSS和少量JavaScript，无需引入复杂库即可实现核心功能。主要特性包括：基础功能：支持代码编辑(contentEditable)、自动行号生成、滚动同步技术实现：采用flex布局分离行号和代码区，通过scrollTop控制行号滚动偏移 UI设计：使用TailwindCSS实现黑色背景、浅灰滚动条等美观界面响应式：适配web端和移动端扩展性：预留了语法高亮、快捷键支持等扩展接口

2025-07-25 15:20:30 861

原创【前端】【逻辑思维】函数封装 vs class 封装的系统对比

在复杂前端逻辑封装中，函数式与Class式各具优势。函数式适合简单场景，通过Hooks管理状态但逻辑分散；Class式更适合复杂模块，能集中管理状态、明确划分职责，并支持继承扩展。以ECharts封装为例，Class式能更优雅地处理生命周期、状态共享和功能扩展。实际开发中，简单功能可选函数式，复杂组件（如音视频控制、表单验证）推荐Class式封装，以获得更好的可维护性和扩展性。

2025-07-25 10:41:50 868

原创【Git知识】Git 常用知识集合之基础--分支系统与 Tag 标签机制

📝 Git 核心概念速览 Git 是开发者的版本控制利器，核心包含四层结构： 1️⃣ 工作区（编辑文件） 2️⃣ 暂存区（git add临时存储） 3️⃣ 本地仓库（git commit永久记录） 4️⃣ 远程仓库（git push云端同步） 🔧 基础流程： add → commit → push 支持多远端仓库配置（origin/home/company） 🌿 分支系统：创建/切换分支：checkout -b 合并分支：先切到目标分支再merge 删除分支：本地-d，远端--delete 🏷️

2025-07-24 20:59:43 341

原创【前端】【Vue DevTools】Vue DevTools 进阶：用 Trae / Cursor 替换 VSCode 打开文件（跳转行列无误）

帮助你掌握如何在 Vue DevTools 中使用 AI 编辑器（如 Trae、Cursor）替代 VSCode 打开文件，同时保留跳转到指定行列功能 —— 一步步从底层拦截 `code` 命令入手，无需动 Vue DevTools 配置，让体验丝滑自然。

2025-07-23 16:42:28 1264

原创【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器

摘要：vite-plugin-vue-devtools 是一款增强 Vue 开发调试的 Vite 插件，支持实时查看组件结构并跳转编辑器。安装后通过 vite.config.ts 配置 launchEditor 参数（如 'code' 对应 VSCode），可自定义默认编辑器，包括 WebStorm、Sublime 甚至小众编辑器 Trae（需配置环境变量或完整路径）。插件提供组件预览、快捷键呼出面板等功能，显著提升复杂项目的调试效率。支持主流 IDE 和自定义路径，适配不同开发环境需求。

2025-07-23 15:24:37 875

原创【ExtendScript Toolkit CC】【PR插件开发】获取当前序列的所有剪辑片段名

这个Premiere Pro脚本可以读取当前序列中的所有视频轨道片段名称并输出到控制台。脚本通过遍历活动序列的每个视频轨道，获取每个剪辑片段的名称进行打印显示。使用时需在ExtendScript Toolkit中运行，支持Premiere Pro CC 2015-2023版本，输出内容包括序列名称、每个轨道序号及其包含的剪辑名称。该脚本不兼容UXP插件环境，但可在CEP插件中通过evalScript调用。输出示例清晰展示了序列结构，便于用户快速查看时间线上的剪辑内容。

2025-07-19 21:38:41 247

原创【前端】【Echarts】【热力图】ECharts 热力图配置详解：从分割线到数据标签的全面指南

本文详细介绍了ECharts热力图的核心配置技巧，包括分割线设置、热力棒控制、数据标签显示和单元格样式调整等。从基础配置入手，逐步深入讲解了通过itemStyle设置单元格边框、使用visualMap控制热力棒显示、利用label属性管理数据标签，以及调整单元格形状大小等实用方法。文章还提供了高级交互配置技巧和完整示例代码，帮助开发者快速掌握ECharts热力图的全面定制能力，实现更专业的数据可视化效果。

2025-07-16 17:19:30 362

原创【前端】【Iconify图标库】【vben3】createIconifyIcon 实现图标组件的自动封装

这篇文章介绍了在Vue项目中如何优雅管理图标的最佳实践方案。主要讲解了Iconify平台的优势——它聚合了150+图标库，提供统一SVG图标解决方案。重点推荐使用@iconify/vue渲染器配合createIconifyIcon工厂函数封装图标组件，通过集中管理、语义化命名等方式提升项目可维护性。文章还分析了Iconify支持的丰富图标库资源，并给出了进阶优化建议。该方案让Vue项目的图标使用更高效、整洁，特别适合中大型项目。

2025-07-14 17:30:28 1122

原创【前端】【分析】前端功能库二次封装：组件与 Hook 方式的区别与好处分析

明确组件与 Hook 封装方式的差异，可以让开发人员根据不同的需求选择合适的封装方式。

2025-07-14 17:16:59 854

原创【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南：从基础到优化

弹窗是一种覆盖在主内容之上的浮动容器，具有以下核心特征：- **模态性**：阻止用户与背景内容交互- **聚焦性**：强制用户关注弹窗内容- **临时性**：完成操作后可关闭并消失- **层级性**：位于页面其他元素之上

2025-07-11 23:49:14 417

原创【前端】【Echarts】【zrender】从入门到多路径信号流动动画实战

本文介绍了百度开源的轻量级2D渲染库zrender，它是ECharts的底层引擎，提供丰富的图形绘制和动画支持。文章首先概述zrender的特点和适用场景，然后详细讲解其核心概念、图形类型、样式属性和常用API，包括图形添加/删除、属性修改、事件绑定和动画实现。最后通过一个多路径信号流动动画的实战案例，演示如何配置路径参数、计算运动轨迹并实现带尾迹效果的动画。该案例支持自定义路径、速度、颜色等参数，具有较强的可扩展性。

2025-07-11 17:54:55 295

原创【前端】【Echarts】ECharts 词云图（WordCloud）教学详解

本文介绍了使用ECharts的WordCloud插件创建词云图的详细教程。文章从准备工作开始，讲解了如何引入ECharts核心库和词云插件。在基本配置部分，重点说明了series配置中的type、shape、data和textStyle等重要参数。进阶样式部分分享了旋转角度、字体样式和布局密度的定制技巧。文章还提供了三个实用示例：基础圆形词云、自定义旋转角度和字体样式、以及矩形单色词云。最后给出实用建议，强调词云图适合展示关键词频率和热点分析，并可通过点击事件实现交互。全文通过简洁明了的代码示例和生动的效果

2025-07-10 23:23:24 1595

原创【前端】【Echarts】【Liquidfill 水球图】深入理解 ECharts Liquidfill 水球图：从入门到进阶

本文介绍了ECharts Liquidfill水球图的使用方法，从基础到进阶配置。首先需要引入ECharts核心库和liquidfill插件，然后通过三个示例演示了不同应用场景：基础水球图展示进度、进阶美化配置实现多层波浪效果和富文本标签、动态水位更新模拟实时数据。文章还提供了常用配置选项速览表，并给出使用建议，如结合后端数据、仪表盘集成等。水球图通过直观的水位变化展示数据，配置灵活，适合展示完成率、资源使用率等指标。

2025-07-10 23:13:36 1187

原创【vben3】【loadSvgIcons】将指定目录下的 SVG 图标文件加载并解析为特定的图标结构，然后添加到图标库中，以便在项目中使用

核心功能是将指定目录下的 SVG 图标文件加载并解析为特定的图标结构，然后添加到图标库中，以便在项目中使用😎。想象一下，有一个装满各种精美 SVG 图标的“宝藏仓库”🎁，代码就像是一个勤劳的小管家🧑‍💼，它会进入这个仓库，把里面的 SVG 图标一个一个地拿出来，仔细地查看它们的样子（解析），然后给它们贴上一个“标签”（图标名称），最后把这些贴好标签的图标整齐地放到一个专门的“图标展示柜”（图标库）里。这样，当项目需要使用某个图标的时候，就可以直接从这个展示柜里把对应的图标拿出来用啦👏。

2025-07-08 20:51:01 788

原创【vben3源码解读】【useEcharts】【VueUse】详解useEcharts这个hooks的作用与相关库的使用（VueUse)

初始化：就像为一场演出搭建舞台一样，它会为 ECharts 图表准备好初始的环境和设置，让图表能够顺利“登场”。渲染：把数据转化为直观的图表，就如同画家把颜料变成美丽的画作🎨，让用户能够清晰地看到数据的展示效果。调整大小：当页面大小发生变化时，它能像一个灵活的舞者一样，自动调整图表的大小，保证图表在不同的屏幕尺寸下都能完美呈现。深色模式适配：随着用户在浅色和深色模式之间切换，它能像一个智能的调光师一样，让图表的颜色和样式也随之改变，提供更好的视觉体验🌙。

2025-07-08 15:34:10 720

原创【Vben3全解】【组件库开发】解决组件库开发中css的命名难题,保证代码质量,构建useNamespace函数

本文介绍了一个基于BEM命名规范的TypeScript工具函数，用于解决组件库开发中的命名混乱问题。该工具通过useNamespace函数生成统一的className和CSS变量名，主要功能包括：提供多个BEM结构生成器（b、e、m、be、em、bm、bem），支持块、元素和修饰符的灵活组合包含状态类名生成器（is），如"is-active" 支持生成全局和块级CSS变量（cssVar、cssVarBlock）提供变量名获取方法cssVarName、cssVarBlockName

2025-07-07 22:07:39 1036

原创【前端UI】【ShadCN UI】一个干净、语义化、可拓展、完全可控的“代码级组件模板库”

追求开发自由、灵活定制、现代工程最佳实践，ShadCN UI 是非常有魅力的选择

2025-07-07 17:03:19 1059

原创【Vben3】【Bug解决】Vben3 下载ZIP包开发时打包问题解决方案

Vben3 ZIP包开发构建问题解决方案核心问题：从ZIP包下载Vben3项目后，pnpm build失败，报错Git历史记录缺失。原因分析：下载的ZIP包缺少完整的Git仓库信息项目依赖的Git变更日志插件需要Git历史解决方案：推荐方案：初始化Git仓库并创建初始提交替代方案：禁用Git变更日志插件最佳实践：直接使用Git克隆项目验证方法：检查Git状态后重新执行构建命令。建议开发者优先使用Git克隆方式获取项目代码，避免此类问题。

2025-07-04 16:53:47 307

原创【前端】【数字孪生】基础知识：数字孪生 3D 模型去哪里找？Three.js 辅助组件库有哪些？模型的动画是黑盒吗？怎么控制？

本文全面解析了前端数字孪生开发中Vue与Three.js的最佳实践。推荐使用TroisJS组件库实现Vue三维可视化，介绍Sketchfab等优质3D模型资源网站，重点讲解如何通过AnimationMixer精确控制模型自带动画。文章还深入探讨动画轨道调试等进阶技巧，为开发者提供从组件选择到动画控制的完整解决方案。通过合理运用这些技术，前端工程师也能构建专业的三维数字孪生系统。

2025-07-04 10:00:00 530

原创【前端】【React】【数字孪生】全解react使用threejs，@react-three/fiber，@react-three/drei

@react-three/fiber 是一个用于 React 的 3D 渲染库，它将 React 的声明式编程风格引入到 Three.js 中，开发者可以使用 JSX 语法来创建和组合 3D 组件，而不是像传统的 Three.js 那样使用命令式的代码来操作对象。@react-three/drei 是一个基于 @react-three/fiber 的辅助库，它提供了一系列预构建的组件和工具，帮助开发者更快速地创建 3D 场景。它就像是一个 3D 开发的工具箱，里面有很多实用的工具和组件

2025-07-03 13:57:39 1121 1

原创【前端】【Swiper轮播图】深入学习swiper，封装vue3，react的ts和js版本组件，可以学到swiper高级应用与技巧

【前端】【Swiper轮播图】深入学习swiper，封装vue3，react的ts和js版本组件，可以学到swiper高级应用与技巧

2025-07-03 11:42:32 460

原创【AI工作流】巧用 AI 与 Web 开发：打造专属刷题网站助力考试冲刺

用先进的 AI 技术和 Web 开发知识，构建了一个个性化的英语刷题网站，不仅解决了自己的复习难题，还在实践中深入掌握了新技术的应用。

2025-07-03 10:15:00 1450

原创【前端进阶】【实战】【性能优化】前端开发中的事件监听与DOM操作优化实践

这些优化措施不仅提升了应用的稳定性和性能，也为后续开发和维护提供了良好的基础。在复杂的前端应用开发中，合理管理事件监听器和优化DOM操作是持续需要关注的重点。

2025-07-02 17:33:40 427

原创【数字孪生】【GIS】【实战】高德地图GIS开发实战：从基础到交互进阶

GIS 开发核心能力地图初始化与个性化样式配置（道路、陆地、POI 自定义）。自定义标注（Marker）的创建、居中定位与图标替换。信息窗体（InfoWindow）的内容定制、事件绑定与手动控制。交互开发技能标注点击事件、坐标复制、地图缩放等交互逻辑实现。动态内容更新（多标注对应不同信息窗体内容）。前端性能优化（批量标注管理、事件监听时机控制）。

2025-07-02 17:28:01 873

原创【前端】【Js】this绑定中实际运用场景中的误区，封装实用类的注意事项

📝 JavaScript 事件监听中的 this 绑定机制解析在 JavaScript 类方法作为事件监听器时，直接调用会导致 this 指向 window，而非类实例（默认绑定规则）。为避免这个问题，必须使用 .bind(this) 预先绑定： this._resize = this.resize.bind(this); window.addEventListener("resize", this._resize)

2025-06-09 11:24:44 550