即时通讯桌面应用前端插件系统【免费下载链接】VencordThe cutest Discord modification项目地址https://gitcode.com/GitHub_Trending/ve/Vencord点击查看免费下载导读BetterSettings 是 Vencord 中一个专注改善 Discord 设置页体验的插件它通过三项可独立开关的改动让设置页打开更快、去掉生硬的过渡动画、并把设置齿轮的右键菜单按分类重新组织。本文以 BetterSettings README 为骨架结合 index.tsx 的完整实现逐条拆解三个开关背后的 Patch 机制、CSS 注入与菜单构建逻辑让你既能照着配置也能理解 Vencord 插件如何修改 Discord 内部 UI。一、插件定位与三项核心能力官方 README 用一句话概括了插件职责通过多项可独立开关的改动改善 Discord 的设置Settings体验并明确列出三项改进让打开设置的速度明显变快移除生硬的过渡crossfade动画把设置齿轮的右键菜单按分类整理。这些能力并非绑定死而是由三个独立的布尔开关控制全部默认开启、且都需要重启 Discord 后生效定义位于 index.tsx配置键说明类型默认值需要重启disableFade禁用设置页的 crossfade 过渡动画BOOLEANtrue是organizeMenu将设置齿轮右键菜单按分类整理BOOLEANtrue是eagerLoad消除首次打开设置菜单时的加载延迟BOOLEANtrue是插件元信息作者Devs.Kyuuhachi、标签Appearance / Customisation / Organisation同样在 index.tsx 中定义。下文分别对应 README 的更快打开“移除动画”“菜单分类”三条主线展开。二、更快打开设置eagerLoad的预加载策略Discord 的设置页内容并非一次性打包进主 bundle而是按需惰性加载的首次点击齿轮时客户端才去解析对应的模块 chunk 和目录TOC数据这就是用户感知到的首次打开卡顿。BetterSettings 针对两个惰性加载点做了两处 Patch均由settings.store.eagerLoad门控预加载设置内容 chunkindex.tsx匹配createPromise:()...webpackId:...的模块创建模式把原本延后执行的 promise 构造函数额外触发一次replace: $,_:$1让设置页内容在后台提前解析并刻意跳过CollectiblesShop商城模块避免无关开销。预加载菜单目录TOCindex.tsx匹配handleOpenSettingsContextMenu句柄用_vencordBetterSettingsEagerLoad(async ()$1)()把原本在用户点击后才执行的await调用提前跑一遍使目录数据在菜单真正弹出前就绪。两处都使用predicate: () settings.store.eagerLoad做运行时门控只有开关打开时该替换才被注入关闭后代码保持 Discord 原样互不影响。三、消除生硬过渡动画disableFade的四处联动过渡动画在 Discord 设置 UI 里体现在多个层面README 所说的scuffed transition实际由四个独立 Patch 协同移除全部受disableFade控制外层 Layer 层替换index.tsx匹配this.renderArtisanalHack()所在模块把负责淡入淡出的旧 FadeLayer 类替换为插件自定义的Layer组件replace: var $1$self.Layer;...。侧边栏的轻微淡入index.tsxstandardSidebarView也有一个小的 fade-inPatch 将animated.div替换为普通div并跳过from:{position:absolute}的入场逻辑。模态层的淡入淡出index.tsx针对data-mana-component:layer-modal组件同样把animated.div换成div并将注入的style:替换为空对象style:{}直接抹掉动画样式。进出场延迟归零index.tsx匹配headerId:void 0,headerIdIsManaged:!1模块把初始化延迟常量let $1300改为0连 300ms 的等待窗口一并取消。自定义 Layer 组件接管后仍保持完整性被替换进来的Layer组件定义在 index.tsx它保留SHOWN / HIDDEN两种 mode 与baseLayer标记隐藏时通过aria-hidden和opacity: 0快速隐藏stop-animations类名并在卸载时向ComponentDispatch派发LAYER_POP_START/LAYER_POP_COMPLETE维持 Discord 对图层弹出事件的既有预期——这正是移除动画但不破坏 UI 状态机的关键。四、齿轮右键菜单分类organizeMenu与transformSettingsEntries4.1 Patch 入口最后一项改动针对设置齿轮的右键菜单。Patch 以#{intl::USER_SETTINGS_ACTIONS_MENU_LABEL}为锚点定位菜单渲染代码index.tsx把原始children:[...]的数组替换为children:[$self.transformSettingsEntries($1),即把每个菜单条目交给插件的转换函数重新组织同样以organizeMenu作门控。4.2 transformSettingsEntries 的分组逻辑核心转换函数 transformSettingsEntries 遍历原始菜单条目按 key 分三类处理Vencord 专属入口key 为vencord_plugins/vencord_themes时分别用 vencordToolbox/menu.tsx 导出的buildPluginMenuEntries()/buildThemeMenuEntries()替换子菜单让插件与主题开关直接在齿轮菜单里可操作用户信息等分段key 为user_section或任何以_section结尾且有 label 的条目时包成带 label 的二级Menu.MenuItem并递归调用transformSettingsEntries处理其子项实现按分类层层分组user_section的标题通过getIntlMessage(USER_SETTINGS)获取本地化文案见 discord.tsx内部经runtimeHashMessageKey解析为运行时哈希键其余条目原样透传不破坏 Discord 原有菜单项。4.3 子菜单内容从哪来buildPluginMenuEntriesmenu.tsx会列出所有已启用且非 API的插件isPluginEnabled过滤 p.name.endsWith(API)排除按名称排序并针对每个插件遍历其settings.def自动生成控件布尔项生成MenuCheckboxItem下拉项生成MenuRadioItem滑块项生成MenuSliderItem遇到stickToMarkers/componentProps等菜单不支持的滑块配置会跳过并附Open Settings入口改动restartNeeded的选项时还会弹出 Restart to apply the change 提示。buildThemeMenuEntriesmenu.tsx则提供 QuickCSS 开关/编辑、管理主题入口以及通过VencordNative.themes.getThemesList拉取的已安装主题勾选列表。4.4 配套 CSS解除菜单高度上限菜单分类后子菜单可能变长但 Discord 对底部弹出的上下文菜单子菜单有高度上限逻辑--reference-position-layer-max-height。为此插件在 fullHeightContext.css 中针对#user-settings-cog及aria-activedescendant^user-settings-cog选择器把该变量重置为initial让子菜单可以自由向上/向下生长。该样式仅在start()中organizeMenu开启时通过 enableStyle 注入stop()时由 disableStyle 移除index.tsx。五、配置方式与生效前提安装并启用 BetterSettings 后可在 Vencord 设置 → Plugins 中找到它三个开关disableFade / organizeMenu / eagerLoad的默认值均为开启由于改动都发生在启动时的 Patch 注入阶段任何开关变更都需要重启 Discord 才会生效restartNeeded: true。若只想保留部分体验例如仅需要更快的打开速度可关闭disableFade与organizeMenu只留eagerLoad。六、实现机制背后的 Vencord 基础设施读懂本插件即可顺带掌握 Vencord 修改 Discord 的通用三件套Patch 三元组find模块锚点→match正则/字符串可用\i通配标识符→replace$1...引用捕获组$self在编译期被替换为插件路径配合predicate做运行时开关见 patches.ts 的规范化逻辑含#{intl::...}消息键哈希展开懒加载 CSS 类名findCssClassesLazy(animating,baseLayer,bg,layer,layers)在 webpack.ts 中实现通过代理在首次访问时才去 webpack 缓存里定位压缩后的类名避免启动期开销容错处理插件作者特意说明由于Layer是整个 UI 的最外层不能直接包 ErrorBoundary会误捕获子组件无关错误因此在静态方法Layer中对FocusLock、ComponentDispatch、Classes.layer做 sanity check任一缺失即回退返回原始 children 并记日志index.tsx。七、相关源码索引插件主体与全部 Patchsrc/plugins/betterSettings/index.tsx菜单高度上限修复样式src/plugins/betterSettings/fullHeightContext.css插件/主题子菜单构建src/plugins/vencordToolbox/menu.tsxPatch 规范化\i、$self、intl 哈希src/utils/patches.ts懒加载 CSS 类查找src/webpack/webpack.ts样式注入 APIsrc/api/Styles.ts赞分享即时通讯桌面应用前端插件系统【免费下载链接】VencordThe cutest Discord modification项目地址https://gitcode.com/GitHub_Trending/ve/Vencord点击查看免费下载相关推荐OpenFoodFacts-androidapp架构深度剖析现代Android应用的多变体设计实践OpenFoodFacts androidapp架构深度剖析现代Android应用的多变体设计实践 OpenFoodFacts androidapp是一个基于LiveCodes 与 CodeSandbox 深度对比谁才是 2024 年最佳在线编码平台LiveCodes 与 CodeSandbox 深度对比谁才是 2024 年最佳在线编码平台 在现代前端开发中在线编码平台已成为开发者日常工作的重要工具。推荐一款优雅的页面过渡动画插件Animsition推荐一款优雅的页面过渡动画插件Animsition 在网页设计中平滑的页面过渡效果往往能提升用户体验给访客留下深刻的印象。今天我要向大家推荐一个简单易用前端UI库/组件上一篇opentype.js字体实例管理如何操作变体字体实例下一篇戴森球计划终极蓝图指南3000工厂设计让新手秒变工业大师创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 BetterSettings 插件源码解析：加速设置页打开、消除过渡动画与齿轮菜单分类
即时通讯桌面应用前端插件系统【免费下载链接】VencordThe cutest Discord modification项目地址https://gitcode.com/GitHub_Trending/ve/Vencord点击查看免费下载导读BetterSettings 是 Vencord 中一个专注改善 Discord 设置页体验的插件它通过三项可独立开关的改动让设置页打开更快、去掉生硬的过渡动画、并把设置齿轮的右键菜单按分类重新组织。本文以 BetterSettings README 为骨架结合 index.tsx 的完整实现逐条拆解三个开关背后的 Patch 机制、CSS 注入与菜单构建逻辑让你既能照着配置也能理解 Vencord 插件如何修改 Discord 内部 UI。一、插件定位与三项核心能力官方 README 用一句话概括了插件职责通过多项可独立开关的改动改善 Discord 的设置Settings体验并明确列出三项改进让打开设置的速度明显变快移除生硬的过渡crossfade动画把设置齿轮的右键菜单按分类整理。这些能力并非绑定死而是由三个独立的布尔开关控制全部默认开启、且都需要重启 Discord 后生效定义位于 index.tsx配置键说明类型默认值需要重启disableFade禁用设置页的 crossfade 过渡动画BOOLEANtrue是organizeMenu将设置齿轮右键菜单按分类整理BOOLEANtrue是eagerLoad消除首次打开设置菜单时的加载延迟BOOLEANtrue是插件元信息作者Devs.Kyuuhachi、标签Appearance / Customisation / Organisation同样在 index.tsx 中定义。下文分别对应 README 的更快打开“移除动画”“菜单分类”三条主线展开。二、更快打开设置eagerLoad的预加载策略Discord 的设置页内容并非一次性打包进主 bundle而是按需惰性加载的首次点击齿轮时客户端才去解析对应的模块 chunk 和目录TOC数据这就是用户感知到的首次打开卡顿。BetterSettings 针对两个惰性加载点做了两处 Patch均由settings.store.eagerLoad门控预加载设置内容 chunkindex.tsx匹配createPromise:()...webpackId:...的模块创建模式把原本延后执行的 promise 构造函数额外触发一次replace: $,_:$1让设置页内容在后台提前解析并刻意跳过CollectiblesShop商城模块避免无关开销。预加载菜单目录TOCindex.tsx匹配handleOpenSettingsContextMenu句柄用_vencordBetterSettingsEagerLoad(async ()$1)()把原本在用户点击后才执行的await调用提前跑一遍使目录数据在菜单真正弹出前就绪。两处都使用predicate: () settings.store.eagerLoad做运行时门控只有开关打开时该替换才被注入关闭后代码保持 Discord 原样互不影响。三、消除生硬过渡动画disableFade的四处联动过渡动画在 Discord 设置 UI 里体现在多个层面README 所说的scuffed transition实际由四个独立 Patch 协同移除全部受disableFade控制外层 Layer 层替换index.tsx匹配this.renderArtisanalHack()所在模块把负责淡入淡出的旧 FadeLayer 类替换为插件自定义的Layer组件replace: var $1$self.Layer;...。侧边栏的轻微淡入index.tsxstandardSidebarView也有一个小的 fade-inPatch 将animated.div替换为普通div并跳过from:{position:absolute}的入场逻辑。模态层的淡入淡出index.tsx针对data-mana-component:layer-modal组件同样把animated.div换成div并将注入的style:替换为空对象style:{}直接抹掉动画样式。进出场延迟归零index.tsx匹配headerId:void 0,headerIdIsManaged:!1模块把初始化延迟常量let $1300改为0连 300ms 的等待窗口一并取消。自定义 Layer 组件接管后仍保持完整性被替换进来的Layer组件定义在 index.tsx它保留SHOWN / HIDDEN两种 mode 与baseLayer标记隐藏时通过aria-hidden和opacity: 0快速隐藏stop-animations类名并在卸载时向ComponentDispatch派发LAYER_POP_START/LAYER_POP_COMPLETE维持 Discord 对图层弹出事件的既有预期——这正是移除动画但不破坏 UI 状态机的关键。四、齿轮右键菜单分类organizeMenu与transformSettingsEntries4.1 Patch 入口最后一项改动针对设置齿轮的右键菜单。Patch 以#{intl::USER_SETTINGS_ACTIONS_MENU_LABEL}为锚点定位菜单渲染代码index.tsx把原始children:[...]的数组替换为children:[$self.transformSettingsEntries($1),即把每个菜单条目交给插件的转换函数重新组织同样以organizeMenu作门控。4.2 transformSettingsEntries 的分组逻辑核心转换函数 transformSettingsEntries 遍历原始菜单条目按 key 分三类处理Vencord 专属入口key 为vencord_plugins/vencord_themes时分别用 vencordToolbox/menu.tsx 导出的buildPluginMenuEntries()/buildThemeMenuEntries()替换子菜单让插件与主题开关直接在齿轮菜单里可操作用户信息等分段key 为user_section或任何以_section结尾且有 label 的条目时包成带 label 的二级Menu.MenuItem并递归调用transformSettingsEntries处理其子项实现按分类层层分组user_section的标题通过getIntlMessage(USER_SETTINGS)获取本地化文案见 discord.tsx内部经runtimeHashMessageKey解析为运行时哈希键其余条目原样透传不破坏 Discord 原有菜单项。4.3 子菜单内容从哪来buildPluginMenuEntriesmenu.tsx会列出所有已启用且非 API的插件isPluginEnabled过滤 p.name.endsWith(API)排除按名称排序并针对每个插件遍历其settings.def自动生成控件布尔项生成MenuCheckboxItem下拉项生成MenuRadioItem滑块项生成MenuSliderItem遇到stickToMarkers/componentProps等菜单不支持的滑块配置会跳过并附Open Settings入口改动restartNeeded的选项时还会弹出 Restart to apply the change 提示。buildThemeMenuEntriesmenu.tsx则提供 QuickCSS 开关/编辑、管理主题入口以及通过VencordNative.themes.getThemesList拉取的已安装主题勾选列表。4.4 配套 CSS解除菜单高度上限菜单分类后子菜单可能变长但 Discord 对底部弹出的上下文菜单子菜单有高度上限逻辑--reference-position-layer-max-height。为此插件在 fullHeightContext.css 中针对#user-settings-cog及aria-activedescendant^user-settings-cog选择器把该变量重置为initial让子菜单可以自由向上/向下生长。该样式仅在start()中organizeMenu开启时通过 enableStyle 注入stop()时由 disableStyle 移除index.tsx。五、配置方式与生效前提安装并启用 BetterSettings 后可在 Vencord 设置 → Plugins 中找到它三个开关disableFade / organizeMenu / eagerLoad的默认值均为开启由于改动都发生在启动时的 Patch 注入阶段任何开关变更都需要重启 Discord 才会生效restartNeeded: true。若只想保留部分体验例如仅需要更快的打开速度可关闭disableFade与organizeMenu只留eagerLoad。六、实现机制背后的 Vencord 基础设施读懂本插件即可顺带掌握 Vencord 修改 Discord 的通用三件套Patch 三元组find模块锚点→match正则/字符串可用\i通配标识符→replace$1...引用捕获组$self在编译期被替换为插件路径配合predicate做运行时开关见 patches.ts 的规范化逻辑含#{intl::...}消息键哈希展开懒加载 CSS 类名findCssClassesLazy(animating,baseLayer,bg,layer,layers)在 webpack.ts 中实现通过代理在首次访问时才去 webpack 缓存里定位压缩后的类名避免启动期开销容错处理插件作者特意说明由于Layer是整个 UI 的最外层不能直接包 ErrorBoundary会误捕获子组件无关错误因此在静态方法Layer中对FocusLock、ComponentDispatch、Classes.layer做 sanity check任一缺失即回退返回原始 children 并记日志index.tsx。七、相关源码索引插件主体与全部 Patchsrc/plugins/betterSettings/index.tsx菜单高度上限修复样式src/plugins/betterSettings/fullHeightContext.css插件/主题子菜单构建src/plugins/vencordToolbox/menu.tsxPatch 规范化\i、$self、intl 哈希src/utils/patches.ts懒加载 CSS 类查找src/webpack/webpack.ts样式注入 APIsrc/api/Styles.ts赞分享即时通讯桌面应用前端插件系统【免费下载链接】VencordThe cutest Discord modification项目地址https://gitcode.com/GitHub_Trending/ve/Vencord点击查看免费下载相关推荐OpenFoodFacts-androidapp架构深度剖析现代Android应用的多变体设计实践OpenFoodFacts androidapp架构深度剖析现代Android应用的多变体设计实践 OpenFoodFacts androidapp是一个基于LiveCodes 与 CodeSandbox 深度对比谁才是 2024 年最佳在线编码平台LiveCodes 与 CodeSandbox 深度对比谁才是 2024 年最佳在线编码平台 在现代前端开发中在线编码平台已成为开发者日常工作的重要工具。推荐一款优雅的页面过渡动画插件Animsition推荐一款优雅的页面过渡动画插件Animsition 在网页设计中平滑的页面过渡效果往往能提升用户体验给访客留下深刻的印象。今天我要向大家推荐一个简单易用前端UI库/组件上一篇opentype.js字体实例管理如何操作变体字体实例下一篇戴森球计划终极蓝图指南3000工厂设计让新手秒变工业大师创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考