新闻详情

新闻详情

首页 / 资讯中心 / 详情

Codex-X 供应商品牌标识资源(provider-logos)说明:来源、许可与 CSS Mask 渲染机制

发布时间:2026/9/30 0:57:17来源:尧图网络
Codex-X 供应商品牌标识资源(provider-logos)说明:来源、许可与 CSS Mask 渲染机制
桌面应用开发者工具AI 应用【免费下载链接】Codex-XOpenAI Codex 桌面端/CLI 的可视化管理工具具有Provider/API 切换、会话同步、提示词注入、Skills/MCP 管理、TOML 配置可视化的跨平台工具。项目地址https://gitcode.com/GitHub_Trending/co/Codex-X点击查看免费下载本文面向在 Codex-X 桌面端中维护、扩展或审计供应商预设Provider Preset徽标资源的前端与桌面应用开发者系统说明apps/desktop/public/provider-logos/目录下六枚品牌 SVG 的来源、MIT 许可边界、上游版本锁定方式以及它们在预设选择器ProviderPresetPicker中以单色 CSS Mask 随主题与选中态变色的渲染机制与替换/新增品牌的操作要点。背景为什么需要一个专门的品牌标识目录Codex-X 是一个面向 OpenAI Codex 桌面端/CLI 的可视化管理工具支持多家模型供应商的 API 切换。在桌面端的供应商配置页apps/desktop/src/pages/ProvidersPage.tsx中用户通过预设选择器快速切换 OpenAI、DeepSeek、MiniMax、小米 MiMo、Kimi、智谱 GLM、阿里千问等供应商。为了让每个预设卡片拥有一眼可识别的品牌标识项目在静态资源目录apps/desktop/public/provider-logos/下维护了一批第三方 SVG 图标——这正是本 README 文档所描述的对象。该目录只包含六个供应商徽标deepseek、minimax、mimo、kimi、glm、qwenOpenAI 自身的标识位于同级的apps/desktop/public/openai.svg。而 README 的存在是为了精确记录这些第三方资源的来源、版本与许可义务避免品牌标识在无授权或版本漂移的情况下被引入桌面端。资源来源与版权Lobe Icons 的 MIT 资产上游项目与许可README 明确说明目录中六枚 SVG 均来自 Lobe Icons 文件中MIT License Copyright (c) 2023 LobeHub Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.版本锁定固定的上游 commit为了避免上游图标随时间演进导致外观漂移仓库将 Lobe Icons 锁定在固定提交Pinned upstream commit: a94750e3f5f8fc33757b839d85030e742284e43a这一做法让第三方 SVG 的引入具有可审计性任何人核对本目录文件与上游该 commit 下对应文件是否一致即可验证原样引入的声明。六个本地文件与上游路径的映射表README 给出了完整的本地文件 ↔ 上游源文件映射此处已转换为从仓库根目录出发的相对路径本地文件仓库内上游源文件Lobe Icons a94750e3deepseek.svgpackages/static-svg/icons/deepseek.svgminimax.svgpackages/static-svg/icons/minimax.svgmimo.svgpackages/static-svg/icons/xiaomimimo.svgkimi.svgpackages/static-svg/icons/kimi.svgglm.svgpackages/static-svg/icons/zhipu.svgqwen.svgpackages/static-svg/icons/qwen.svg值得注意的细节是本地文件名与上游文件名并不总是一一对应——小米 MiMo 的图标在上游叫xiaomimimo.svg智谱 GLM 的图标在上游叫zhipu.svg。这是 README 特意保留映射表的原因单纯看文件名无法追溯来源必须借助此表按上游 commit 校验内容。渲染机制单色 SVG CSS MaskREADME 中一句看似简短的话实际上描述了这套标识在界面中最重要的技术约束The monochrome SVGs are rendered as CSS masks so their color follows the preset card state.即这些徽标是单色monochromeSVG通过 CSS mask遮罩渲染颜色跟随预设卡片的当前状态选中 / 未选中、明暗主题。其完整实现在apps/desktop/src/components/ProviderPresetPicker.tsx与apps/desktop/src/styles/provider-preset-picker.css中。组件层的 logo 路由在ProviderPresetPicker.tsx的PresetMark组件中logo 路径按品牌名拼接function PresetMark({ brand }: { brand: ProviderPresetBrand }) { const logo brand openai ? /openai.svg : /provider-logos/${brand}.svg; return span className{cx-preset-mark cx-preset-mark--${brand}} aria-hiddentrue {brand custom ? SlidersHorizontal size{19} strokeWidth{1.8} / : brand doubao ? 豆 : span classNamecx-preset-brand-logo style{{ WebkitMaskImage: url(${logo}), maskImage: url(${logo}) }} /} /span; }从这里可以看到三个关键点路径约定OpenAI 使用public/openai.svg其余六个品牌使用public/provider-logos/{brand}.svg——与 README 所列文件名一一对应特例处理custom自定义配置与doubao豆包不使用 SVG 遮罩前者渲染图标后者直接渲染文字豆遮罩方式品牌 SVG 被设置为元素的mask-image同时写了WebkitMaskImage与maskImage配合 CSS 中background: currentColor让徽标以前景色显示。CSS 层的颜色跟随apps/desktop/src/styles/provider-preset-picker.css中每个品牌预设定义了自己的品牌色变量.cx-preset-mark--openai { --cx-preset-brand: #10967a; } .cx-preset-mark--deepseek{ --cx-preset-brand: #4d6bfe; } .cx-preset-mark--minimax { --cx-preset-brand: #e95657; } .cx-preset-mark--mimo { --cx-preset-brand: #ed7014; } .cx-preset-mark--qwen { --cx-preset-brand: #7c4ddd; } .cx-preset-mark--kimi { --cx-preset-brand: #6055e8; } .cx-preset-mark--glm { --cx-preset-brand: #3879e1; } .cx-preset-mark--doubao { --cx-preset-brand: #258b83; }徽标容器本身使用currentColor着色.cx-preset-brand-logo { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url(/openai.svg) center / contain no-repeat; mask: url(/openai.svg) center / contain no-repeat; }注意.cx-preset-brand-logo的mask默认值指向/openai.svg但组件内联的style会按品牌覆盖为对应的 provider-logo 路径——这就是单色 SVG CSS Mask机制的核心SVG 本身的颜色被忽略只有形状alpha 通道被用来裁切currentColor填充。此外样式文件还定义了选中态高亮.cx-preset-radio:checked .cx-preset-card .cx-preset-mark将颜色切换为#fff背景切换为半透明白使选中品牌一目了然暗色主题适配[data-themedark]下为每个品牌重新定义了更明亮的品牌色如 openai 变为#4ccbb0、deepseek 变为#91a3ff保证深色背景下徽标依然清晰。这就是 README 所述color follows the preset card state的完整闭环品牌色随卡片状态选中/未选中与主题明暗动态变化而非使用 SVG 原始多色。品牌标识与预设数据的对应关系apps/desktop/src/providerPresets.ts中的PROVIDER_PRESETS数组是预设数据源每个预设通过brand字段关联到徽标预设 id品牌名对应 SVGofficialOpenAIapps/desktop/public/openai.svgdeepseekDeepSeekapps/desktop/public/provider-logos/deepseek.svgminimaxMiniMaxapps/desktop/public/provider-logos/minimax.svgmimo小米 MiMoapps/desktop/public/provider-logos/mimo.svgkimiKimiapps/desktop/public/provider-logos/kimi.svgglm智谱 GLMapps/desktop/public/provider-logos/glm.svgqwen阿里千问apps/desktop/public/provider-logos/qwen.svgPresetMark组件的品牌路由/provider-logos/${brand}.svg正是以这份预设数据为基础因此在ProvidersPage.tsx中通过ProviderPresetPicker presets{PROVIDER_PRESETS} ... /渲染出的每张预设卡片都能拿到与品牌匹配的徽标。实操指南如何扩展或更换品牌标识基于 README 的声明与组件实现如果需要新增一个使用 Lobe Icons 徽标的品牌预设推荐流程如下仓库为只读以下仅描述查看与理解方式修改请在你自己的分支中进行定位上游资源在 Lobe Icons 仓库固定 commita94750e3f5f8fc33757b839d85030e742284e43a下找到对应品牌的packages/static-svg/icons/*.svg引入文件将 SVG 原样放入apps/desktop/public/provider-logos/并在 README 的映射表中补充本地文件 ↔ 上游源文件一行同时注明未做修改登记品牌色在provider-preset-picker.css中为cx-preset-mark--{brand}添加--cx-preset-brand亮色主题与暗色主题下的对应值关联预设在providerPresets.ts的PROVIDER_PRESETS中为该品牌设置brand字段组件即会自动拼接provider-logos/{brand}.svg路径渲染。同时请遵守 LICENSE 义务MIT 要求保留版权声明本仓库已通过 LICENSE 文件满足任何二次分发都应将此声明一并携带。品牌标识的法律边界README 最后明确指出Brand names and marks identify their respective providers; they do not imply endorsement.品牌名称与标识仅用于指代对应供应商不代表供应商对 Codex-X 的背书或合作关系。这一点对开源项目尤为重要——引入第三方商标用于指名道姓的 UI 场景如预设选择器通常属于描述性使用但仍应在文档中明确说明本项目正是通过该 README 承担了这一职责。小结apps/desktop/public/provider-logos/README.md虽篇幅不长却精准覆盖了第三方品牌资源引入的三个关键工程环节许可与溯源六枚 SVG 均来自 Lobe IconsMIT原样引入、锁定上游 commita94750e3f5f8fc33757b839d85030e742284e43a本地文件名与上游文件名不一致处由映射表兜底渲染机制单色 SVG 经 CSS Mask 渲染颜色随预设卡片状态与明暗主题变化实现于 ProviderPresetPicker.tsx 与 provider-preset-picker.css合规边界商标仅作指代用途不构成背书MIT 版权声明在 LICENSE 中随资源一并分发。对需要审计第三方图标合规性或扩展供应商预设的前端/桌面端开发者而言这份文档与上述源码共同构成了完整、可验证的资源管理依据。赞分享桌面应用开发者工具AI 应用【免费下载链接】Codex-XOpenAI Codex 桌面端/CLI 的可视化管理工具具有Provider/API 切换、会话同步、提示词注入、Skills/MCP 管理、TOML 配置可视化的跨平台工具。项目地址https://gitcode.com/GitHub_Trending/co/Codex-X点击查看免费下载相关推荐如何看懂Codex-X供应商列表状态当前启用标记与复制状态说明如何看懂Codex X供应商列表状态当前启用标记与复制状态说明 Codex X 是 OpenAI Codex 桌面端/CLI 的可视化管理工具核心能力之一就桌面应用开发者工具AI 应用Codex-X本地鉴权机制随机令牌与Host校验完全说明Codex X本地鉴权机制随机令牌与Host校验完全说明 Codex X 是 OpenAI Codex 桌面端/CLI 的可视化管理工具支持 Provide桌面应用开发者工具AI 应用OpenCore Legacy Patcher 完整教程老款 Intel Mac 如何四步装回最新 macOSOpenCore Legacy Patcher 完整教程老款 Intel Mac 如何四步装回最新 macOS OpenCore Legacy Patcher操作系统固件驱动开发创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

SQL 复杂中位数与平滑移动窗口极致写法:基于 PERCENTILE_DISC 与动态 Frame 边界 2026/9/30 1:40:22

SQL 复杂中位数与平滑移动窗口极致写法:基于 PERCENTILE_DISC 与动态 Frame 边界

SQL 复杂中位数与平滑移动窗口极致写法:基于 PERCENTILE_DISC 与动态 Frame 边界在企业核心薪酬统计、高频接口响应耗时监控(P50 / P90 / P99)、以及消除异常离群点干扰的平滑趋势分析中,中位数(Median / 50th Percent…

阅读更多 →
DeepSeek生成MIDI:从API到多轨编曲的AI作曲工作流 2026/9/30 1:40:16

DeepSeek生成MIDI:从API到多轨编曲的AI作曲工作流

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
政务大模型落地指南:DeepSeek选型、部署与避坑实践 2026/9/30 1:40:16

政务大模型落地指南:DeepSeek选型、部署与避坑实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
C++结构体排序全解析:从sort原理到比较器写法与避坑指南 2026/9/30 1:40:16

C++结构体排序全解析:从sort原理到比较器写法与避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
I2C从设备如何避免总线死锁:时钟延展与恢复实战 2026/9/30 1:40:15

I2C从设备如何避免总线死锁:时钟延展与恢复实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
从零用DEV-C++和Win32 API创建带文本框按钮的窗口程序 2026/9/30 1:40:15

从零用DEV-C++和Win32 API创建带文本框按钮的窗口程序

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉