零JavaScript写插件：desktop-cc-gui Tier-0声明式插件实战教程

零JavaScript写插件desktop-cc-gui Tier-0声明式插件实战教程【免费下载链接】desktop-cc-guiMulti-engine AI coding desktop client (Tauri). Claude Code, Codex, Gemini, OpenCode, DeepSeek Harness and more in one GUI.项目地址: https://gitcode.com/zhukunpenglinyutong/desktop-cc-guidesktop-cc-gui 是一款多引擎 AI 编程桌面客户端Tauri 架构一个界面即可驱动 Claude Code、Codex、Gemini、OpenCode 等多个引擎。它内置了一套三层信任的插件系统其中最友好的就是Tier-0 声明式插件——只用 JSON CSS零 JavaScript就能换肤、加设置项、放状态栏文本。本文带你理解它的原理并一步步写出、安装第一个声明式插件。什么是 Tier-0 声明式插件desktop-cc-gui 把插件分成三个信任层级完整定义见官方规范 docs/plugin-development-guide.zh-CN.md层级形态能力审核成本Tier-0 声明式纯 JSON CSS零 JS主题换肤、状态栏文本、设置表单、命令入口无代码可审从简Tier-1 JS市场单文件 ESM bundle manifest完整 SDK 扩展点 API人工审核可签名获「已验证」徽章Tier-2 JS个人同 Tier-1未签名同 Tier-1不上架本地安装需确认 diff选型建议只做样式、主题、状态栏文字、简单设置项优先做 Tier-0——审核最快、用户信任成本最低AI 也能可靠地帮你生成。Tier-0 的核心思想是你只声明「贡献什么」宿主负责「执行」。manifest 里的每一项contributes都会被宿主的一对一解释器翻译成一个上下文调用源码见 interpreter.tsx 中的applyDeclarativePluginthemes→ctx.theme.setTokens()主题 token 覆盖i18n→ctx.i18n.addBundle()注册语言包configSchema→ 自动渲染设置页表单statusBarItems→ 状态栏文本芯片commands→ 命令面板条目触发后发事件总线消息因为每一项注册都走统一的 Disposer 栈卸载插件时自动逆序清理没有任何残留——这也是它敢「零 JS」的底气。Tier-0 能做什么、不能做什么✅能做扩展点见 manifest.ts 的PluginManifest类型 覆盖主题语义 tokenlight/dark双套实现一键换肤 状态栏放静态文本芯片⚙️ 通过configSchemaJSON Schema让宿主自动生成设置表单 命令面板注册命令执行时向事件总线emit一个 topic 注册 i18n 语言包不能做需要这些就升级 Tier-1写交互逻辑、监听事件并做出响应调用 SDK 的storage、events、bridge等运行时能力发起网络请求network:host授权只对 JS 插件生效3 分钟写出第一个插件完整 manifest 示例一个最小可用的 Tier-0 插件只需要一个manifest.json。下面这个「Midnight 主题 状态栏徽章 设置表单」三合一插件展示了全部核心扩展点{ id: midnight-kit, name: Midnight 主题套件, version: 1.0.0, minAppVersion: 1.1.0, author: you, description: 深蓝午夜主题 状态栏徽章 可配置设置页, tier: declarative, permissions: [theme, i18n], contributes: { themes: [ { name: Midnight, tokens: { dark: { --background-primary-default: #0d1117, --text-primary: #e6edf3 } } } ], statusBarItems: [{ text: Midnight v1 }], commands: [{ key: about, title: 关于 Midnight 主题 }], i18n: [ { lang: zh-CN, ns: midnight, resources: { about: 一个纯声明式主题插件 } } ] }, configSchema: { type: object, properties: { enableGlow: { type: boolean, title: 启用辉光, default: true }, accent: { type: string, title: 强调色, enum: [blue, purple], default: blue } } } }逐行拆解几个关键字段字段说明注意事项id插件全局唯一标识小写字母/数字/连字符上架后永不更改tier信任层级Tier-0 固定填declarativeversion语义化版本必须与 Release tag 完全一致permissions权限声明只声明用到的多余声明会被审核要求删减configSchemaJSON Schema 子集宿主据此自动生成设置页表单权限全集可以在 permissions.json 中查到——这份文件是 TS、Rust、模板三方共用的单一事实源Tier-0 通常只需要theme和i18ntheme甚至对声明式插件是隐含的。逐项解析五个 contributes 扩展点主题 tokens只改语义变量不碰选择器换肤不是写一堆selector { color: xxx }而是覆盖 BoardUI 的语义 CSS 变量。解释器会把它翻译成ctx.theme.setTokens()见 interpreter.tsxthemes: [{ name: Midnight, tokens: { dark: { --background-primary-default: #0d1117 }, light: { --background-primary-default: #f6f8fa } } }]好处有两点深浅色模式自动翻转插件 UI 与宿主视觉永远协调宿主可静态校验禁止远程资源引用。状态栏文本一行 JSON 一个芯片statusBarItems里每个{ text: ... }会变成状态栏右侧的一枚静态文本芯片。适合放版本标记、模式标识这类「只读信息」。注意它是纯文本——想要动态更新的状态栏组件那是 JS 插件registerStatusBarItem的能力。命令面板入口命令即事件commands: [{ key: about, title: 关于 Midnight 主题 }]用户在命令面板⌘K执行后解释器会在事件总线发出plugin:midnight-kit:command:about可通过emits自定义 topic。Tier-0 自己无法响应这个事件但可以配合一个 JS 插件做跨插件协作——声明式出「界面」JS 出「逻辑」这是很实用的分工。configSchema设置表单零代码生成只要声明了configSchema宿主就会自动在设置页渲染一个表单代码见 PluginConfigForm.tsxSchema 类型自动渲染为boolean开关Switchstringenum下拉选择Selectnumber/integer数字输入框其他 string文本输入框用户每次改动会向plugin-config://changed事件广播值同样可供其他插件响应。你一行 React 都不用写就拥有了原生观感的设置页。i18n插件也要双语contributes.i18n注册的langnsresources会在卸载时自动回收。审核要求至少提供en与zh-CN两套资源——Tier-0 把文案直接写在 JSON 里对新手非常友好。本地安装与调试步骤把manifest.json及 i18n/CSS 资源放进一个目录例如~/plugins/midnight-kit/打开 desktop-cc-gui →设置 → 插件 → 从本地目录安装指向该目录宿主加载器 loader.ts 会校验 manifest 与权限未知权限 安装期直接拒绝然后把状态机推进到active立即生效主题 token 覆盖、状态栏芯片、命令面板条目、设置页表单改完 manifest 重新安装即可Tier-0 没有构建步骤发版上架时记得Release tag 必须等于version字段不带v前缀Release 附件名固定为manifest.json、styles.css等详见 docs/plugin-development-guide.zh-CN.md 的硬性要求。进阶什么时候该升级到 Tier-1 JS 插件出现下面任一需求就该写 JS 插件了需要响应事件如监听usage://updated更新动态 UI需要持久化数据ctx.storageKV需要向 composer 插槽、面板 tab、Markdown 渲染管线注入组件需要受控的network:/exec:授权调用外部能力升级路径很平滑Tier-0 里写好的configSchema、themes、i18n在 JS 插件的 manifest 中原样保留静态声明 动态代码共存你只是多写了一个main.js。常见问题FAQQTier-0 能访问文件或网络吗不能。声明式插件没有运行时权限面只覆盖theme/i18n这类 UI 声明这也是它审核从简的前提。Q为什么我的插件没出现先查三件事tier是否为declarative、id是否符合命名规则、permissions是否都在 permissions.json 的已知列表中未知权限会在安装期被拒绝。Q状态栏文本能动态变化吗Tier-0 不行。静态文本走statusBarItems动态内容请注册 JS 命令 事件或升级为 Tier-1 插件。Q卸载会留残留吗不会。解释器对每一项贡献都记录 Disposer卸载时逆序清理主题、语言包、表单、芯片与命令。模块路径速查插件开发权威规范唯一提交标准docs/plugin-development-guide.zh-CN.mdTier-0 解释器manifest → 宿主调用的一对一翻译src/features/plugins/declarative/interpreter.tsx自动设置表单渲染src/features/plugins/declarative/PluginConfigForm.tsx插件 SDK 契约manifest/权限/版本/上下文packages/plugin-sdk/src/权限单一事实源TS/Rust/模板三方共用packages/plugin-sdk/spec/permissions.json插件运行时加载器与状态机src/features/plugins/runtime/loader.ts从零代码的 JSON 出发你现在就能为自己的 desktop-cc-gui 定制主题与设置页了。写完 Tier-0再按需升级为 JS 插件——这就是这套三层信任模型想给你的路径。【免费下载链接】desktop-cc-guiMulti-engine AI coding desktop client (Tauri). Claude Code, Codex, Gemini, OpenCode, DeepSeek Harness and more in one GUI.项目地址: https://gitcode.com/zhukunpenglinyutong/desktop-cc-gui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考