朝阳39的博客

原创 浏览器【详解】requestIdleCallback（浏览器空闲时执行）

requestIdleCallback 是浏览器的一个 API，用于在浏览器空闲时间执行低优先级任务，避免阻塞主线程，提升页面性能和响应速度。当浏览器完成了关键任务（如渲染、布局、用户交互处理）且暂时没有更高优先级的工作时，会处于 “空闲状态”。requestIdleCallback 允许开发者利用这段空闲时间执行非紧急任务（如日志上报、数据预处理、缓存清理等），而不影响页面的流畅性。

原创 浏览器【详解】自定义事件 CustomEvent

eventName：事件名称（字符串，遵循命名规范，如user-loginoptionsdetail：任意类型数据【只读】，作为事件的附加信息（最常用），要想修改，只能重新创建事件bubbles：布尔值，是否冒泡（默认falsecancelable：布尔值，是否可被取消（默认false// 监听 document 上的自定义事件console.log('用户登录了！// 访问自定义数据});// 监听特定元素的事件。

原创 浏览器【详解】内置Observer（共五种，用于前端监控、图片懒加载、无限滚动、响应式布局、生成安全报告等）

监听DOM 元素的变化（如节点增删、属性修改、文本内容变化等）可用于延迟批量处理变化（避免频繁触发回调），提升性能。${

原创 JSSDK【详解】含实战范例

JSSDK（JavaScript Software Development Kit）即用 JS 开发的 SDK（软件开发工具包），运行在浏览器或其他前端环境（如 node），通过封装复杂的 API 调用、身份验证、交互逻辑等，让开发者可以通过简单的接口调用实现丰富的功能。如微信的 JSSDK 提供 wx.shareTimeline() 方法，直接实现分享到朋友圈，无需手动处理签名和权限等复杂逻辑。再如高德地图的 SDK，将底层与地图引擎的交互的复杂逻辑都封装成函数、类或模块，对外提供接口直接调用即可。

原创 Electron 作品【AI聊天】桌面应用 —— 系列教程（含开源地址）

https://gitee.com/sunshine39/electron-vue3-AIchat

原创 Nuxt3 全栈作品【通用信息管理系统】系列教程（目录）【含开源地址】

含默认布局，伸缩菜单，路径动画，全屏切换，带快捷菜单的页签，退出登录等。

原创 Nuxt3 全栈作品【通用信息管理系统】操作日志

如登录成功后，记录日志。

原创 Nuxt3 全栈作品【通用信息管理系统】用户管理（含重置密码）

更多搜索条件（表格上默认最多显示4个搜索条件）

原创 Nuxt3 全栈作品【通用信息管理系统】角色管理（含配置权限 -- 菜单权限 vs 操作权限）

根据 id 查询数据详情。

原创 Nuxt3 全栈作品【通用信息管理系统】权限管理

【代码】Nuxt3 全栈作品【通用信息管理系统】权限管理。

原创 Nuxt3 全栈作品【通用信息管理系统】部门管理（含加载下拉部门树）

与菜单管理类似。

原创 Nuxt3 全栈作品【通用信息管理系统】字典管理（支持拖拽排序，表格中下拉展示字典详情）

用于实现字典列表表单的拖拽排序。

原创 Nuxt3 全栈作品【通用信息管理系统】岗位管理

【代码】Nuxt3 全栈作品【通用信息管理系统】岗位管理。

原创 vue3【组件封装】信息管理 S-comMangeInfo （含多条件搜索、分页表格、自带增删改查、重置密码等）

格式化时间。

原创 Nuxt3 全栈作品【通用信息管理系统】菜单管理

【代码】Nuxt3 全栈作品【通用信息管理系统】菜单管理。

原创 Nuxt3 全栈作品【通用信息管理系统】全局登录状态校验（路由跳转时）

fill:#333;color:#333;color:#333;fill:none;是否是否是否是否路由跳转登录/注册?执行跳转token存在?已登录?跳转到登录页获取当前登录用户信息获取成功?

原创 Nuxt3 全栈作品【通用信息管理系统】首页（含默认布局，伸缩菜单，路径动画，全屏切换，带快捷菜单的页签，退出登录等）

【代码】Nuxt3 全栈作品【通用信息管理系统】首页（含默认布局，伸缩菜单，路径动画，全屏切换，带快捷菜单的页签，退出登录等）

原创 Nuxt3 全栈作品【通用信息管理系统】当前权限

【代码】Nuxt3 全栈作品【通用信息管理系统】当前权限。

原创 Nuxt3 全栈作品【通用信息管理系统】修改密码

/</</

原创 Nuxt3 全栈作品【通用信息管理系统】修改资料

头像组件（支持裁剪，图片上传和删除），详见。

原创 vue3【组件封装】超级表单 S-form.vue

【代码】vue3【组件封装】超级表单 S-form.vue。

原创 vue3【组件封装】消息反馈 S-msgWin.vue （针对父容器对齐，左右居中，可自定义顶部距离）

成功的提示报错的提示。

原创 Nuxt3【接口开发】上传图片，删除已上传的图片

npm i uuid用于生成唯一 id。

原创 vue3【组件封装】头像裁剪 S-avatar.vue

专用于vue3 项目的图片裁剪，详细使用参考。

原创 Nuxt3 全栈作品【通用信息管理系统】菜单

从接口中获取到全量菜单数据后，会自动计算出拥有权限的菜单 menu_list_hasPermission。用于获取全量菜单列表。

原创 Nuxt3 全栈作品【通用信息管理系统】登录页

页面加载时，从 localStorage 中获取本地存储的账号列表。登录成功后，根据是否勾选记住账号，更新本地存储的账号列表。从账号列表下拉选择本地存储的账号后，自动勾选记住账号。用于生成 token。

原创 Nuxt3 全栈作品【通用信息管理系统】注册页

/ 自定义表单校验 -- 两次密码输入是否一致callback(new Error("请再次输入密码"));callback(new Error("两次密码不一样"));:rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' },]"<el-inputclearableplaceholder="请再次输入密码"

原创 echarts【实战】饼状图点击高亮，其他区域变暗

原创 ReactNative【实战】我的小红书【系列教程】（含开源代码地址）

https://gitee.com/sunshine39/my-red-bookhttps://blog.csdn.net/weixin_41192489/article/details/148924457https://blog.csdn.net/weixin_41192489/article/details/148977543https://blog.csdn.net/weixin_41192489/article/details/149097538https://blog.csdn.net/weixi

原创 ReactNative【实战系列教程】我的小红书 8 -- 我（含左侧弹窗菜单，右下角图标等）

点左上角菜单按钮，弹出左侧菜单后。

原创 ReactNative【实战系列教程】我的小红书 7 -- 消息（含弹窗菜单，右上角角标，空白页等）

点击右上角群聊按钮后，弹窗菜单。

原创 ReactNative【实战系列教程】我的小红书 6 -- 购物（含商品搜索、商品分类、商品列表）

点击搜索输入框后。

原创 ReactNative【实战系列教程】我的小红书 5 -- 文章详情（含轮播图 ImageSlider，点亮红心动画 Heart，嵌套评论等）

用于对时间进行格式化。

原创 ReactNative【实战】轮播图（含组件封装 ImageSlider）

点击可全屏预览图片。

原创 ReactNative【实战系列教程】我的小红书 4 -- 首页（含顶栏tab切换，横向滚动频道，频道编辑弹窗，瀑布流布局列表等）

暂用的 mock 数据，解开注释，可访问真实接口。因数据是异步加载，需跟进其加载状态。在页面初始渲染时异步加载数据。数据来自 store。

原创 ReactNative【实战】瀑布流布局列表（含图片自适应、点亮红心动画）

滚动到最底部。

原创 ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航（含图片选择 expo-image-picker 的使用）

需从 “expo-router/ui” 中导入 TabList, Tabs, TabSlot, TabTrigger 实现在 TabTrigger 内自由设计每个 tab 项的元素和样式。更多详情可参考。

原创 ReactNative【实战系列教程】我的小红书 2 -- 快捷登录、手机号密码登录

点击后，直接打开本地浏览器浏览网页。

原创 ReactNative【实战系列教程】我的小红书 1 -- 创建项目，自定义APP名称，图标，启动页，集成 Ant Design Mobile RN，封装 axios，定义接口，添加本地存储，状态管理

app.json"name": "我的小红书",自适应图标 assets/images/adaptive-icon.png网页图标 assets/images/favicon.pngapp 安装图标 assets/images/icon.png全部替换为下图（名称保持不变）若更改图标后，模拟机上未更新，则需清除模拟机上的缓存最终效果如下将 assets/images/splash-icon.png 改为启动页图片（此处仍用 log ，效果如下图）// 防止启动页自动消失。

原创 React Native【实战范例】账号管理（含转换分组列表数据的封装，分组折叠的实现，账号的增删改查，表单校验等）

renderItem 中。