# 下落香樟树

> surge、zxkv、web前端、vue、js、JavaScript

## 我的博客

- [我的博客](/blog/index.md): 记录项目开发中封装的 NPM 插件、高频实战案例与工程化实践
- [zxkv-area 省市区数据](/blog/plugin/area.md): 自研 NPM 插件 zxkv-area 的使用说明，提供省市区三级联动数据的查询能力。
- [zxkv-excel-json：XLS 解析](/blog/plugin/excel-json.md): 自研 NPM 插件 zxkv-excel-json 的使用说明，将 XLS 文件内容解析为 JSON 数据。
- [zxkv-xlsx-json：XLSX 解析](/blog/plugin/xlsx-json.md): 自研 NPM 插件 zxkv-xlsx-json 的使用说明，将 XLSX 文件内容解析为 JSON 数据。
- [获取本地文件信息](/blog/upload/local-file-info.md): 上传前读取本地文件的类型、大小与尺寸等信息，并据此完成前端校验与预处理的完整方案。
- [OSS 上传「PUT」](/blog/upload/oss-put.md): 以 PUT 方式直传文件到阿里云 OSS，配置签名与跨域并处理上传进度的完整流程。
- [OSS 上传「FormData」](/blog/upload/oss-formdata.md): 以 FormData 方式上传文件到阿里云 OSS，与 PUT 方式的差异及各自适用场景。
- [iView OSS 直传](/blog/upload/oss-direct-upload.md): 使用 iView Upload 组件对接阿里云 OSS 直传，免去经过服务器中转的上传方式。
- [图片上传「文件流」](/blog/upload/upload-file-stream.md): 以后台辅助存储的方式上传图片文件流，解析返回 Key 并拼接出可访问的图片地址。
- [el-upload 上传封装](/blog/upload/el-upload.md): 基于 el-upload 改造属性与钩子函数，实现同一组件内多处复用文件上传能力的思路。
- [二进制流文件导出](/blog/upload/blob-export.md): 将后端返回的二进制流转换为可下载文件，处理文件名与内容类型的实践。
- [多文件压缩下载](/blog/upload/zip-download.md): 前端将多个文件打包压缩后一次性下载，减少反复请求与交互次数的实现方式。
- [微信网页授权登录](/blog/wechat/oauth-login.md): 基于 vue-cli 项目接入微信网页授权登录，获取用户信息并维持登录状态。
- [微信 H5 支付](/blog/wechat/pay.md): 微信公众号 H5 接入微信支付，并在支付成功、失败、取消时分别跳转对应业务页面。
- [微信 JS-SDK 分享](/blog/wechat/js-sdk-share.md): 接入微信 JS-SDK 自定义分享，配置分享标题、描述、图标与链接的完整步骤。
- [history 模式分享](/blog/wechat/history-share.md): 针对 history 路由模式改造微信自定义分享，解决分享链接指向当前页地址的问题。
- [微信页面关闭事件](/blog/wechat/page-close.md): 在微信浏览器中监听页面关闭事件，并顺带处理刷新、切后台等场景的实践记录。
- [Vue 3 管理后台模板](/blog/vue/admin-template.md): 从零搭建 Vue 3 后台管理系统前端模板，集成路由、状态管理与请求封装等基础能力。
- [Vue 3 路由鉴权](/blog/vue/admin-router-auth.md): 在 Vue 3 后台管理系统中实现路由级权限鉴权，按角色动态生成可访问的路由表。
- [Vue 管理后台随笔](/blog/vue/admin-notes.md): 搭建 Vue 后台管理系统过程中的结构规划与常见问题记录。
- [Vue 表单拖拽排序](/blog/vue/form-drag.md): 实现可拖拽排序的动态表单，拖动调整字段顺序并同步提交数据结构的方案。
- [Vue Router 全局参数](/blog/vue/router-global-params.md): 在 vue-router 中统一拼接全局查询参数，并在路由拦截处集中处理的实践。
- [Vuex 持久化存储](/blog/vue/vuex-persist.md): 将 Vuex 状态持久化到本地存储，解决刷新页面后状态丢失的问题。
- [Vue I18n 语言切换](/blog/vue/i18n.md): 使用 Vue I18n 实现多语言切换，涵盖语言包划分、懒加载与持久化记忆。
- [下拉框大数据量优化](/blog/vue/select-large-data.md): 针对下拉选择框数据量过大导致的卡顿问题，做虚拟滚动与懒加载优化的处理方式。
- [Canvas 签字板](/blog/component/canvas-signature.md): 基于 Canvas 实现手写签字板，支持笔迹绘制、清空与导出图片的完整实现。
- [带图分享二维码](/blog/component/share-qrcode.md): 使用 JavaScript 生成带图片的分享二维码，支持在页面内直接渲染与下载。
- [九宫格抽奖](/blog/component/grid-lottery.md): 九宫格抽奖活动的页面搭建、样式拼接与抽奖算法、中奖判断、动画衔接的完整实现。
- [vue2-editor 编辑器](/blog/component/vue2-editor.md): 基于 vue2-editor 搭建富文本编辑器，处理内容回显、图片上传与样式定制。
- [富文本图片拖拽缩放](/blog/component/image-resize.md): 在富文本编辑器中实现图片拖拽、缩放与对齐操作，并同步更新图片的实际尺寸。
- [Aliplayer 加密播放](/blog/component/aliplayer.md): 使用阿里云 Aliplayer 接入视频点播私有加密播放，处理两个播放器版本的兼容差异。
- [TcPlayer 播放器接入](/blog/component/tcplayer.md): 接入腾讯云 TcPlayer 视频播放器，配置播放地址、封面与常用的播放参数。
- [移动端初始化模板](/blog/mobile/mobile-template.md): 整理可复用的移动端项目初始化模板，统一适配、请求与路由等基础配置。
- [Vant UI rem 适配](/blog/mobile/vant-rem.md): 将 Vant UI 组件库默认的 px 单位转换为 rem，完成移动端适配的处理方式。
- [iOS 橡皮回弹](/blog/mobile/ios-rubber-band.md): 处理 iOS 端页面滚动时的橡皮回弹效果，避免穿透与抖动影响交互体验。
- [H5 与 App 双向通信](/blog/mobile/app-bridge.md): 前端 H5 与 iOS、Android 客户端双向通信的对接方案与参数约定。
- [页面可见性监听](/blog/mobile/page-visibility.md): 通过监听页面可见性状态，在 PC 端页面被隐藏或重新显示时执行相应的业务逻辑。
- [跨窗口与跨域通信](/blog/mobile/cross-window-communication.md): 基于 BroadcastChannel 实现同源多个浏览器窗口间的数据通信与状态同步。
- [移除生产 console.log](/blog/engineering/drop-console.md): 借助第三方插件在构建阶段统一移除生产环境的 console.log，避免敏感日志泄露到线上。
- [提交前自动校验](/blog/engineering/commit-hooks.md): 通过 husky 与 lint-staged 在提交前自动执行 eslint 与 prettier，统一团队代码风格。

## 前端笔记

- [前端笔记](/note/index.md): 前端基础知识学习笔记与可复用代码片段
- [rem 适配](/note/css/rem-layout.md): Rem 布局适配的原理与基准值换算，含 Viewport 配置与设计稿转换方案。
- [页面布局技巧](/note/css/page-layout.md): 日常开发中高频的页面布局技巧，涵盖多列、等高与自适应等场景。
- [flex 布局](/note/css/flex.md): Flex 布局的核心属性与常用组合，覆盖居中、等高、换行与空间分配场景。
- [vertical-align 对齐](/note/css/vertical-align.md): vertical-align 的生效条件与基线规则，解决行内与表格单元格的垂直对齐问题。
- [position 定位](/note/css/position.md): 梳理 position 各定位值的包含块与层级关系，以及 sticky 的实际应用。
- [横竖屏检测](/note/css/orientation.md): 检测移动端横竖屏切换并适配对应布局，处理旋转后的视口与样式重置。
- [滚动条美化](/note/css/scrollbar.md): 使用 WebKit 与 Firefox 对应属性美化滚动条样式，并兼顾兼容性。
- [整站置灰](/note/css/grayscale.md): 通过 CSS 滤镜实现网站整站置灰的效果与兼容性处理。
- [浏览器兼容](/note/css/css-compat.md): 梳理常见 CSS 属性的浏览器兼容差异与对应的降级写法。
- [获取 URL 参数](/note/js/url-params.md): 获取地址栏查询参数的几种写法，含空值、中文与重复参数的处理。
- [常用方法](/note/js/common-methods.md): 整理开发中高频使用的 JavaScript 原生方法及易错点。
- [数组遍历](/note/js/array-loop.md): 数组各种循环遍历方法的适用场景与性能对比。
- [字符串方法](/note/js/string-methods.md): 常用字符串操作方法整理，含截取、替换、模板拼接与类型判断场景。
- [数组去重](/note/js/array-unique.md): 按指定字段对数组对象去重的多种写法对比与性能考量。
- [判断运算符](/note/js/operators.md): 梳理 JavaScript 中易混淆的判断运算符差异，明确相等、严格相等与各类判断场景的选用。
- [函数防抖](/note/js/throttle-debounce.md): 防抖函数封装与调用，解决按钮连点导致的事件累加问题。
- [版本号比较](/note/js/version-compare.md): 比较软件版本号大小的实现方式，正确处理多段号与预发布标签。
- [设备环境判断](/note/js/device-detect.md): 判断当前访问的设备类型与所处环境，区分 iOS、Android、微信与 PC。
- [App 通信](/note/js/app-communication.md): 前端与原生 APP 之间通信的对接方式与参数约定。
- [下载或唤起 App](/note/js/app-download.md): 判断 App 是否已安装，未安装则引导下载、已安装则直接唤起的方案。
- [Zepto DOM 操作](/note/js/zepto-dom.md): Zepto.js 中常用 DOM 操作方法与 jQuery 的差异对照。
- [Zepto 事件](/note/js/zepto-event.md): Zepto.js 的事件绑定、事件委托与触摸事件用法整理。
- [禁止右键与按键](/note/js/disable-rightclick.md): 禁用页面右键菜单与指定键盘按键，并处理输入框等场景的例外情况。
- [倒计时](/note/snippet/countdown.md): 实现时、分、秒级别的倒计时，处理补零、跨天与页面切后台后的时间校准。
- [上拉加载与下拉刷新](/note/snippet/pull-refresh.md): 移动端列表的上拉加载更多与下拉刷新交互实现及各自的状态管理。
- [视频列表播放控制](/note/snippet/video-control.md): 控制视频的播放、暂停与进度，处理列表场景下仅允许一个视频发声的需求。
- [JSON 导出 Excel](/note/snippet/json-to-excel.md): 将 JSON 数据导出为 Excel 文件，处理表头映射、样式与大数据量分片。
- [DatePicker 日期范围](/note/snippet/datepicker-range.md): 使用 View UI DatePicker 限制可选日期范围，处理开始与结束日期互相约束的场景。
- [Axios 请求封装](/note/snippet/axios.md): Axios 的常用配置与请求封装示例，涵盖拦截器、错误处理与取消请求。

## 前端文档

- [前端文档](/page/index.md): Web 前端开发常用官方文档与图表库入口汇总
- [UI 组件库文档](/page/ui-docs.md): 常用前端 UI 组件库与框架的官方文档入口，按技术栈分类整理。
- [前端技术文档](/page/tech-docs.md): JavaScript、CSS 等前端核心技术的官方文档与优质教程入口。
- [开发软件工具](/page/dev-software.md): 前端开发常用编辑器与辅助软件的下载入口及简要说明。
- [前端插件工具](/page/plugin-docs.md): 视频播放器、图表等常用前端插件的官方文档与使用入口。
- [数据可视化图表库](/page/datav-docs.md): 主流前端数据可视化图表库的文档入口，标注对勾的为已实际使用过。

## 学习记录

- [学习记录](/record/index.md): 前端学习记录，编辑器与构建工具配置、常用工具与资源收藏
- [Windsurf 配置](/record/editor/windsurf.md): Windsurf 编辑器的简介、下载与插件配置，可直接复用 VSCode 的配置。
- [Cursor 配置](/record/editor/cursor.md): Cursor 编辑器的简介、下载与插件配置，可直接复用 VSCode 的配置。
- [Trae 配置](/record/editor/trae.md): Trae 编辑器的简介、下载与插件配置，可直接复用 VSCode 的配置。
- [Rspack 配置](/record/build/rspack.md): Rspack 项目的基础配置指南，涵盖别名、样式与构建产物的常用设置。
- [Rsbuild 配置](/record/build/rsbuild.md): Rsbuild 项目的创建、依赖安装与常用构建配置说明。
- [Vite 配置](/record/build/vite.md): Vite 项目中 vite.config.js 常用配置项的说明与示例。
- [Vue CLI 配置](/record/build/vue-cli.md): Vue CLI 项目的插件安装与常用配置项说明。
- [Vant UI 项目配置](/record/build/vant-ui.md): 在项目中引入 Vant UI 并完成按需引入、主题定制与单位适配的配置。
- [Code Inspector 代码跳转](/record/tooling/code-inspector.md): Code Inspector 插件的安装与使用，点击页面元素即可定位到源码位置。
- [VSCode 开发插件](/record/tooling/vscode-plugins.md): 前端开发常用的 VSCode 插件推荐与配置建议。
- [VSCode 代码字体](/record/tooling/vscode-font.md): 在 VSCode 中安装并配置 JetBrains Mono 字体，优化中英文代码的显示效果。
- [Taze 依赖更新](/record/tooling/taze.md): Taze 工具的使用指南，批量检测并升级项目依赖版本。
- [清理包管理缓存](/record/tooling/clean-cache.md): 清理 npm、yarn、pnpm 等包管理工具的本地缓存，解决依赖异常与磁盘占用问题。
- [包管理工具换源](/record/tooling/registry-mirror.md): 为 npm、yarn、pnpm 切换国内镜像源，提升依赖安装速度的操作记录。
- [node-sass 安装失败](/record/tooling/node-sass.md): 排查并解决 node-sass 安装失败问题，涉及 Node 版本与编译环境的处理。
- [Bun 包管理配置](/record/tooling/bun.md): Bun 包管理工具的安装、常用命令与项目迁移配置记录。
- [前端资源收藏](/record/links/frontend-collection.md): 开发过程中发现的辅助工具与实用资源收藏，按用途分类整理。
- [Web 在线工具](/record/links/web-tools.md): 前端开发常用在线工具与组件库收藏，标注对勾的为已实际使用验证过的项目。
- [操作系统工具](/record/links/os-tools.md): MacOS 与 Windows 系统的下载、安装与重置等工具资源分享。