@melt-js/docs-bag 0.0.0-stage → 2026.11.7

package/dist/assets/guide_official-plugins_install-and-toggle.md.Eq2hWjYn.js

@@ -0,0 +1,45 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B3lxS50j.js";const E=JSON.parse('{"title":"安装与启停","description":"","frontmatter":{},"headers":[],"relativePath":"guide/official-plugins/install-and-toggle.md","filePath":"guide/official-plugins/install-and-toggle.md","lastUpdated":1794045200000}'),l={name:"guide/official-plugins/install-and-toggle.md"};function p(e,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="安装与启停" tabindex="-1">安装与启停 <a class="header-anchor" href="#安装与启停" aria-label="Permalink to &quot;安装与启停&quot;">​</a></h1><p>插件需要同时满足“已传入宿主”和“当前处于启用状态”，才会注册路由、菜单和多语言。</p><h2 id="安装并导入" tabindex="-1">安装并导入 <a class="header-anchor" href="#安装并导入" aria-label="Permalink to &quot;安装并导入&quot;">​</a></h2><p>安装一个官方插件：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-shop</span></span></code></pre></div><p>在 <code>src/main.ts</code> 中导入：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> shopPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-shop&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  router,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  i18n,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [shopPlugin]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>只安装 npm 包但不传给 <code>bootstrapPlugins()</code>，插件不会进入宿主运行时。</p><h2 id="启用状态如何决定" tabindex="-1">启用状态如何决定 <a class="header-anchor" href="#启用状态如何决定" aria-label="Permalink to &quot;启用状态如何决定&quot;">​</a></h2><p>运行时会同时检查两层状态：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>最终启用 = plugin.enabled !== false</span></span>
+<span class="line"><span>        且插件 ID 不在禁用列表中</span></span></code></pre></div><p>插件代码可以设置默认状态：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> plugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AdminPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;report-plugin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;报表插件&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1.0.0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  enabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 代码层默认关闭</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><code>enabled: false</code> 是代码层锁定。运行时启停接口不能把它改为启用，需要先修改插件定义。</p><h2 id="查看运行时插件" tabindex="-1">查看运行时插件 <a class="header-anchor" href="#查看运行时插件" aria-label="Permalink to &quot;查看运行时插件&quot;">​</a></h2><p>使用 <code>listRuntimePlugins()</code> 获取本次传给宿主的插件：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { listRuntimePlugins } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> plugins</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> listRuntimePlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>返回项主要包含：</p><table tabindex="0"><thead><tr><th>字段</th><th>说明</th></tr></thead><tbody><tr><td><code>id</code>、<code>name</code>、<code>version</code></td><td>插件基本信息</td></tr><tr><td><code>order</code></td><td>插件注册顺序</td></tr><tr><td><code>enabledByConfig</code></td><td>插件定义是否允许启用</td></tr><tr><td><code>enabled</code></td><td>合并代码配置和禁用列表后的最终状态</td></tr><tr><td><code>dependsOn</code></td><td>插件依赖</td></tr><tr><td><code>routeCount</code></td><td>路由数量，包含嵌套路由</td></tr><tr><td><code>menuCount</code></td><td>菜单数量，包含子菜单</td></tr><tr><td><code>permissionCount</code></td><td>声明的权限点数量</td></tr><tr><td><code>settingCount</code></td><td>声明的配置项数量</td></tr><tr><td><code>contributionCount</code></td><td>声明的扩展点条目数量</td></tr></tbody></table><p><code>listRuntimePlugins()</code> 返回的是当前运行时快照。切换状态后需要重新调用，才能得到新状态。</p><h2 id="切换插件状态" tabindex="-1">切换插件状态 <a class="header-anchor" href="#切换插件状态" aria-label="Permalink to &quot;切换插件状态&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { listRuntimePlugins, setPluginEnabledState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setPluginEnabledState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;plugin-shop&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 将商城插件写入禁用列表</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> plugins</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> listRuntimePlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 重新读取运行时状态</span></span></code></pre></div><p>当前引导流程只在应用启动时注册路由、菜单和语言包。因此切换状态后，需要刷新页面：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setPluginEnabledState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;plugin-shop&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 重新执行 bootstrapPlugins()</span></span></code></pre></div><p>不要把“状态已写入”和“插件已从当前页面卸载”当成同一件事。刷新前，已经注册的路由仍存在。</p><h2 id="默认存储位置" tabindex="-1">默认存储位置 <a class="header-anchor" href="#默认存储位置" aria-label="Permalink to &quot;默认存储位置&quot;">​</a></h2><p>默认禁用列表存放在浏览器 <code>localStorage</code>：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>bag.admin.disabledPlugins</span></span></code></pre></div><p>它适合本地开发和单浏览器配置。如果插件状态需要按用户、租户或环境统一管理，应注入自己的 <code>pluginStateProvider</code>。</p><h2 id="自定义状态提供器" tabindex="-1">自定义状态提供器 <a class="header-anchor" href="#自定义状态提供器" aria-label="Permalink to &quot;自定义状态提供器&quot;">​</a></h2><p>生产环境可以在引导前加载禁用列表，再向 <code>bootstrapPlugins()</code> 注入同步读取接口：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> disabledPluginIds</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loadDisabledPluginIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  router,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  i18n,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  pluginStateProvider: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    getDisabledPluginIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">disabledPluginIds], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 引导阶段同步读取</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    setPluginEnabledState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pluginId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">enabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (enabled) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        disabledPluginIds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">delete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(pluginId)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        disabledPluginIds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(pluginId)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      void</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> saveDisabledPluginIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">disabledPluginIds])</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>当前 <code>PluginStateProvider</code> 是同步接口。远程状态应在 <code>bootstrapPlugins()</code> 之前加载完成；保存失败、重试和回滚策略由业务项目处理。</p><h2 id="依赖安全" tabindex="-1">依赖安全 <a class="header-anchor" href="#依赖安全" aria-label="Permalink to &quot;依赖安全&quot;">​</a></h2><p>假设审计插件依赖报表插件：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> auditPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AdminPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;audit-plugin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;审计插件&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1.0.0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  dependsOn: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;report-plugin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>启用审计插件但禁用报表插件时，下次应用引导会抛出缺少依赖错误。</p><p>底层 <code>setPluginEnabledState()</code> 只负责保存状态，不会自动处理依赖。系统设置插件中的管理页面额外做了两项保护：</p><ul><li>缺少前置依赖时，不允许启用插件。</li><li>仍有启用插件依赖当前插件时，不允许禁用。</li></ul><p>自定义插件管理页也应该执行相同检查。</p><h2 id="卸载-npm-包" tabindex="-1">卸载 npm 包 <a class="header-anchor" href="#卸载-npm-包" aria-label="Permalink to &quot;卸载 npm 包&quot;">​</a></h2><p>不再使用插件时，先从 <code>plugins</code> 数组和 import 中移除，再卸载依赖：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> remove</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-shop</span></span></code></pre></div><p>只卸载包但保留 import，会导致构建阶段找不到模块。</p><h2 id="下一步" tabindex="-1">下一步 <a class="header-anchor" href="#下一步" aria-label="Permalink to &quot;下一步&quot;">​</a></h2><ul><li>查看<a href="./shop.html">商城插件</a>。</li><li>查看<a href="./sys-setting.html">系统设置插件</a>。</li><li>创建自己的<a href="./../plugins/create-plugin.html">第一个插件</a>。</li></ul>`,46)])])}const o=i(l,[["render",p]]);export{E as __pageData,o as default};

package/dist/assets/guide_official-plugins_install-and-toggle.md.Eq2hWjYn.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B3lxS50j.js";const E=JSON.parse('{"title":"安装与启停","description":"","frontmatter":{},"headers":[],"relativePath":"guide/official-plugins/install-and-toggle.md","filePath":"guide/official-plugins/install-and-toggle.md","lastUpdated":1794045200000}'),l={name:"guide/official-plugins/install-and-toggle.md"};function p(e,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t("",46)])])}const o=i(l,[["render",p]]);export{E as __pageData,o as default};

package/dist/assets/guide_official-plugins_shop.md.yBltEx-o.js

@@ -0,0 +1,49 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B3lxS50j.js";const o=JSON.parse('{"title":"商城插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/official-plugins/shop.md","filePath":"guide/official-plugins/shop.md","lastUpdated":1794045200000}'),p={name:"guide/official-plugins/shop.md"};function l(e,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="商城插件" tabindex="-1">商城插件 <a class="header-anchor" href="#商城插件" aria-label="Permalink to &quot;商城插件&quot;">​</a></h1><p><code>@melt-js/comps-bag-shop</code> 是官方商城参考插件。它覆盖多个业务域，主要用于展示复杂后台插件如何组织路由、菜单、多语言和缓存策略。</p><p>它不是已经接好支付、库存和订单服务的商城成品。</p><h2 id="安装与挂载" tabindex="-1">安装与挂载 <a class="header-anchor" href="#安装与挂载" aria-label="Permalink to &quot;安装与挂载&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-shop</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> shopPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-shop&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  router,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  i18n,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [shopPlugin]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>插件基本信息：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>包名       @melt-js/comps-bag-shop</span></span>
+<span class="line"><span>插件 ID    plugin-shop</span></span>
+<span class="line"><span>版本       1.0.0</span></span>
+<span class="line"><span>默认顺序   10</span></span></code></pre></div><p>所有页面默认要求用户拥有 <code>authenticated</code> 角色。</p><h2 id="业务范围" tabindex="-1">业务范围 <a class="header-anchor" href="#业务范围" aria-label="Permalink to &quot;业务范围&quot;">​</a></h2><table tabindex="0"><thead><tr><th>业务域</th><th>主要页面</th></tr></thead><tbody><tr><td>商品</td><td>商品列表、发布商品、编辑商品</td></tr><tr><td>订单</td><td>订单列表、订单详情、发货、退换货</td></tr><tr><td>用户</td><td>用户列表、用户资料、用户订单</td></tr><tr><td>营销</td><td>营销列表、创建活动</td></tr><tr><td>客服</td><td>客服消息</td></tr><tr><td>财务</td><td>日结账单、月结账单、提现</td></tr><tr><td>店铺</td><td>基础信息、交易、物流、客服配置</td></tr></tbody></table><p>当前插件共提供 22 个路由记录和 14 个菜单节点，包括嵌套路由和多级菜单。</p><h2 id="值得参考的路由设计" tabindex="-1">值得参考的路由设计 <a class="header-anchor" href="#值得参考的路由设计" aria-label="Permalink to &quot;值得参考的路由设计&quot;">​</a></h2><h3 id="详情页保持列表菜单高亮" tabindex="-1">详情页保持列表菜单高亮 <a class="header-anchor" href="#详情页保持列表菜单高亮" aria-label="Permalink to &quot;详情页保持列表菜单高亮&quot;">​</a></h3><p>订单详情没有独立菜单，通过 <code>activeMenu</code> 归属到订单列表：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/order/detail/:id&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;OrderDetail&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/OrderDetail.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;shop.order.detail&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    roles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;authenticated&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    activeMenu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/order/list&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 详情页仍高亮订单列表</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    noCache</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>编辑、发货、用户资料和营销创建页也使用相同方式。</p><h3 id="多个路由复用一个缓存视图" tabindex="-1">多个路由复用一个缓存视图 <a class="header-anchor" href="#多个路由复用一个缓存视图" aria-label="Permalink to &quot;多个路由复用一个缓存视图&quot;">​</a></h3><p>日结与月结共用 <code>Finance.vue</code>，并使用同一个缓存键：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/finance/flow/daily&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FinanceDaily&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Finance.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;shop.finance.daily&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cacheKey</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Finance&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/finance/flow/monthly&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FinanceMonthly&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Finance.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;shop.finance.monthly&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cacheKey</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Finance&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>这种写法适合组件相同、筛选维度不同的页面。</p><h3 id="店铺设置使用嵌套路由" tabindex="-1">店铺设置使用嵌套路由 <a class="header-anchor" href="#店铺设置使用嵌套路由" aria-label="Permalink to &quot;店铺设置使用嵌套路由&quot;">​</a></h3><p><code>/store/settings</code> 作为设置容器，子路由分别承载基础、交易、物流和客服配置：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>/store/settings/base</span></span>
+<span class="line"><span>/store/settings/trade</span></span>
+<span class="line"><span>/store/settings/logistics</span></span>
+<span class="line"><span>/store/settings/service</span></span></code></pre></div><p>父菜单只显示一个“店铺设置”，子页面通过 <code>activeMenu</code> 维持同一高亮状态。</p><h2 id="多级菜单" tabindex="-1">多级菜单 <a class="header-anchor" href="#多级菜单" aria-label="Permalink to &quot;多级菜单&quot;">​</a></h2><p>商城插件展示了一至三级菜单：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>财务结算</span></span>
+<span class="line"><span>└── 资金流水</span></span>
+<span class="line"><span>    ├── 日结账单</span></span>
+<span class="line"><span>    └── 月结账单</span></span></code></pre></div><p>同级菜单由 <code>sort</code> 排序；菜单标题使用 <code>shop.*</code> 国际化 key。</p><p>插件内置：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>zh-CN</span></span>
+<span class="line"><span>en</span></span></code></pre></div><p><code>bootstrapPlugins()</code> 会把语言包合并进宿主 i18n，不需要业务项目重复注册。</p><h2 id="接入真实业务" tabindex="-1">接入真实业务 <a class="header-anchor" href="#接入真实业务" aria-label="Permalink to &quot;接入真实业务&quot;">​</a></h2><p>当前页面主要展示结构和交互。接入生产项目时，建议至少完成：</p><ol><li>将页面中的演示数据替换为业务 API。</li><li>为商品、订单、财务等模块增加细粒度权限。</li><li>在后端再次校验操作权限。</li><li>补充加载失败、空状态、提交失败和重试交互。</li><li>根据自身业务裁剪不需要的路由与菜单。</li></ol><p>例如可以把商品权限拆为：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>shop.product.read</span></span>
+<span class="line"><span>shop.product.create</span></span>
+<span class="line"><span>shop.product.update</span></span>
+<span class="line"><span>shop.product.publish</span></span></code></pre></div><p>然后同时配置到路由、菜单和操作按钮。</p><h2 id="修改方式" tabindex="-1">修改方式 <a class="header-anchor" href="#修改方式" aria-label="Permalink to &quot;修改方式&quot;">​</a></h2><p>包只导出完整的 <code>shopPlugin</code>，没有把内部页面作为独立公共 API 导出。</p><p>如果只需要关闭整个插件，使用运行时启停即可。如果需要大量修改页面、路由或业务域，更合适的方式是：</p><ul><li>参考源码创建自己的本地商城插件。</li><li>Fork 该包并使用自己的包名发布。</li><li>只复制确实需要的页面和路由，不直接修改 <code>node_modules</code>。</li></ul><h2 id="边界" tabindex="-1">边界 <a class="header-anchor" href="#边界" aria-label="Permalink to &quot;边界&quot;">​</a></h2><ul><li>宿主布局、标签栏和权限运行时属于 <code>@melt-js/libs-bag-entry</code>。</li><li>商城插件只负责商城业务页面和配置。</li><li>当前插件没有提供完整商城后端、支付、库存或订单状态机。</li><li>示例中的 <code>authenticated</code> 只是基础登录角色，不等于生产权限设计。</li></ul><h2 id="下一步" tabindex="-1">下一步 <a class="header-anchor" href="#下一步" aria-label="Permalink to &quot;下一步&quot;">​</a></h2><ul><li>阅读<a href="./../plugins/routes-menus-locales.html">路由、菜单与多语言</a>。</li><li>阅读<a href="./../plugins/permissions-and-settings.html">权限与配置项</a>。</li></ul>`,46)])])}const c=i(p,[["render",l]]);export{o as __pageData,c as default};

package/dist/assets/guide_official-plugins_shop.md.yBltEx-o.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B3lxS50j.js";const o=JSON.parse('{"title":"商城插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/official-plugins/shop.md","filePath":"guide/official-plugins/shop.md","lastUpdated":1794045200000}'),p={name:"guide/official-plugins/shop.md"};function l(e,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t("",46)])])}const c=i(p,[["render",l]]);export{o as __pageData,c as default};

package/dist/assets/guide_official-plugins_sys-setting.md.BmkuOqGv.js

@@ -0,0 +1,26 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B3lxS50j.js";const g=JSON.parse('{"title":"系统设置插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/official-plugins/sys-setting.md","filePath":"guide/official-plugins/sys-setting.md","lastUpdated":1794045200000}'),l={name:"guide/official-plugins/sys-setting.md"};function e(p,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="系统设置插件" tabindex="-1">系统设置插件 <a class="header-anchor" href="#系统设置插件" aria-label="Permalink to &quot;系统设置插件&quot;">​</a></h1><p><code>@melt-js/comps-bag-sys</code> 是官方系统设置参考插件。它把常规设置、高级设置和插件管理放在独立业务插件中，避免宿主框架被某个项目的配置流程绑死。</p><h2 id="安装与挂载" tabindex="-1">安装与挂载 <a class="header-anchor" href="#安装与挂载" aria-label="Permalink to &quot;安装与挂载&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-sys</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sysSettingPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-sys&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  router,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  i18n,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [sysSettingPlugin]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>插件基本信息：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>包名       @melt-js/comps-bag-sys</span></span>
+<span class="line"><span>插件 ID    plugin-sys-setting</span></span>
+<span class="line"><span>版本       1.0.0</span></span>
+<span class="line"><span>默认顺序   100</span></span></code></pre></div><h2 id="页面与路由" tabindex="-1">页面与路由 <a class="header-anchor" href="#页面与路由" aria-label="Permalink to &quot;页面与路由&quot;">​</a></h2><table tabindex="0"><thead><tr><th>路由</th><th>页面</th></tr></thead><tbody><tr><td><code>/sys-setting</code></td><td>常规设置</td></tr><tr><td><code>/sys-setting/advanced</code></td><td>高级设置</td></tr><tr><td><code>/sys-setting/plugins</code></td><td>插件管理</td></tr></tbody></table><p>三个页面默认要求 <code>authenticated</code> 角色，菜单统一放在“系统设置”分组下。</p><h2 id="常规设置" tabindex="-1">常规设置 <a class="header-anchor" href="#常规设置" aria-label="Permalink to &quot;常规设置&quot;">​</a></h2><p>常规设置页展示了：</p><ul><li>基础信息、SEO、上传和公告配置界面。</li><li>使用 <code>themePresets</code> 生成主题色选项。</li><li>通过 <code>useAppConfigStore()</code> 修改宿主主题。</li><li>打开宿主内置外观配置抽屉。</li></ul><p>关键 API：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { themePresets, useAppConfigStore } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> appConfigStore</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useAppConfigStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> themeColors</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> themePresets.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">preset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  name: preset.name,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  value: preset.value</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">appConfigStore.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setThemeColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#f97316&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 修改宿主主题色</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">appConfigStore.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">openSettingsDrawer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 打开宿主外观配置抽屉</span></span></code></pre></div><p>基础设置、SEO、上传和公告表单当前是界面示例，没有自动写入后端。生产项目需要自行接入读取、保存、权限和审计接口。</p><h2 id="插件管理" tabindex="-1">插件管理 <a class="header-anchor" href="#插件管理" aria-label="Permalink to &quot;插件管理&quot;">​</a></h2><p>插件管理页读取宿主启动时注册的运行时清单：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { listRuntimePlugins, setPluginEnabledState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> plugins</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> listRuntimePlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取所有传给 bootstrapPlugins() 的插件</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setPluginEnabledState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;plugin-shop&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 保存商城插件禁用状态</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 重新引导后移除对应路由和菜单</span></span></code></pre></div><p>页面会展示：</p><ul><li>插件名称、ID、版本和顺序。</li><li>启用状态与代码层默认状态。</li><li>路由、菜单、权限、设置项和扩展点数量。</li><li>插件依赖和被依赖关系。</li></ul><p>切换前会检查依赖：</p><ul><li>插件缺少前置依赖时不能启用。</li><li>插件仍被其他启用插件依赖时不能禁用。</li><li><code>enabled: false</code> 的插件被视为代码层锁定，不能从页面启用。</li></ul><p>禁用系统设置插件自身时，页面会先跳回 Dashboard；刷新后系统设置路由和菜单不再注册。</p><h2 id="状态持久化" tabindex="-1">状态持久化 <a class="header-anchor" href="#状态持久化" aria-label="Permalink to &quot;状态持久化&quot;">​</a></h2><p>默认启停状态写入当前浏览器的 <code>localStorage</code>。如果需要按租户或用户统一管理，应在宿主引导时传入 <code>pluginStateProvider</code>。</p><p>具体配置见<a href="./install-and-toggle.html">安装与启停</a>。</p><h2 id="为什么它不属于宿主" tabindex="-1">为什么它不属于宿主 <a class="header-anchor" href="#为什么它不属于宿主" aria-label="Permalink to &quot;为什么它不属于宿主&quot;">​</a></h2><p>宿主只提供通用能力：</p><ul><li>外观配置 Store。</li><li>插件运行时清单。</li><li>插件启停 API。</li><li>路由、菜单和权限容器。</li></ul><p>系统设置插件负责具体页面和操作流程。这样不同项目可以替换自己的设置中心，而不需要修改宿主框架。</p><h2 id="生产接入建议" tabindex="-1">生产接入建议 <a class="header-anchor" href="#生产接入建议" aria-label="Permalink to &quot;生产接入建议&quot;">​</a></h2><ul><li>为系统设置路由增加 <code>system.settings.read</code> 等权限。</li><li>为保存、插件启停等操作增加单独权限点。</li><li>将配置表单接入后端，并处理版本冲突和保存失败。</li><li>插件启停属于高影响操作，建议增加确认、审计和回滚能力。</li><li>远程插件状态应在 <code>bootstrapPlugins()</code> 前加载完成。</li></ul><h2 id="下一步" tabindex="-1">下一步 <a class="header-anchor" href="#下一步" aria-label="Permalink to &quot;下一步&quot;">​</a></h2><ul><li>阅读<a href="./install-and-toggle.html">安装与启停</a>。</li><li>阅读<a href="./../plugins/permissions-and-settings.html">权限与配置项</a>。</li><li>阅读<a href="./../plugins/lifecycle-and-dependencies.html">生命周期与依赖</a>。</li></ul>`,35)])])}const c=i(l,[["render",e]]);export{g as __pageData,c as default};

package/dist/assets/guide_official-plugins_sys-setting.md.BmkuOqGv.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B3lxS50j.js";const g=JSON.parse('{"title":"系统设置插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/official-plugins/sys-setting.md","filePath":"guide/official-plugins/sys-setting.md","lastUpdated":1794045200000}'),l={name:"guide/official-plugins/sys-setting.md"};function e(p,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t("",35)])])}const c=i(l,[["render",e]]);export{g as __pageData,c as default};

package/dist/assets/guide_package-core.md.-E29SYy8.js

@@ -0,0 +1,45 @@
+import{_ as i,o as a,c as n,a2 as l}from"./chunks/framework.B3lxS50j.js";const g=JSON.parse('{"title":"@melt-js/libs-bag-core","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-core.md","filePath":"guide/package-core.md","lastUpdated":1794045200000}'),h={name:"guide/package-core.md"};function t(e,s,p,k,E,r){return a(),n("div",null,[...s[0]||(s[0]=[l(`<h1 id="melt-js-libs-bag-core" tabindex="-1">@melt-js/libs-bag-core <a class="header-anchor" href="#melt-js-libs-bag-core" aria-label="Permalink to &quot;@melt-js/libs-bag-core&quot;">​</a></h1><p><code>@melt-js/libs-bag-core</code> 是整套体系里最底下那层约定。它不渲染页面，也不启动宿主，只负责把插件、菜单、路由 meta、Schema 和字典这些公共结构先定好。</p><h2 id="它在解决什么" tabindex="-1">它在解决什么 <a class="header-anchor" href="#它在解决什么" aria-label="Permalink to &quot;它在解决什么&quot;">​</a></h2><p>如果没有这一层，每个业务模块都会按自己的习惯定义菜单格式、路由 meta、表单 Schema、字典结构。时间一长，宿主和插件就很难接顺。</p><p><code>@melt-js/libs-bag-core</code> 做的事很朴素，就是先把这些约定定下来。</p><h2 id="这里有什么" tabindex="-1">这里有什么 <a class="header-anchor" href="#这里有什么" aria-label="Permalink to &quot;这里有什么&quot;">​</a></h2><ul><li>插件协议：<code>AdminPlugin</code></li><li>菜单协议：<code>MenuConfig</code></li><li>路由 meta 扩展：<code>AdminRouteMeta</code></li><li>Schema 表单协议：<code>ProFormSchema</code></li><li>字典协议：<code>DictionaryDefinition</code></li><li>轻量插件运行时：插件注册、启停状态、运行时清单</li></ul><h2 id="最小示例" tabindex="-1">最小示例 <a class="header-anchor" href="#最小示例" aria-label="Permalink to &quot;最小示例&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AdminPlugin } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-core&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> reportPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AdminPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;plugin-report&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;报表插件&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1.0.0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  routes: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/report&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ReportPage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/ReportPage.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      meta: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;report.title&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;authenticated&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  menus: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/report&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;report.title&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;chart&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reportPlugin</span></span></code></pre></div><h2 id="字典与-schema" tabindex="-1">字典与 Schema <a class="header-anchor" href="#字典与-schema" aria-label="Permalink to &quot;字典与 Schema&quot;">​</a></h2><p><code>@melt-js/libs-bag-ui</code> 里的表单和标签组件都依赖 <code>@melt-js/libs-bag-core</code> 里的 Schema 与字典协议。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { registerDictionary, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ProFormSchema } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-core&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerDictionary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  code: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;productStatus&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  options: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;上架&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, tagType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;下架&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, tagType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> schemas</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ProFormSchema</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    field: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;status&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;商品状态&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    component: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;select&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    dictCode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;productStatus&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><h2 id="谁会用到它" tabindex="-1">谁会用到它 <a class="header-anchor" href="#谁会用到它" aria-label="Permalink to &quot;谁会用到它&quot;">​</a></h2><ul><li>写宿主层的人：要读取插件协议</li><li>写业务插件的人：要按固定格式输出 routes、menus、locales</li><li>写组件层的人：要复用 Schema 和字典协议</li></ul><h2 id="边界" tabindex="-1">边界 <a class="header-anchor" href="#边界" aria-label="Permalink to &quot;边界&quot;">​</a></h2><ul><li>它不负责 UI 渲染</li><li>它不负责宿主启动</li><li>它不负责业务 API</li><li>它只负责把大家要遵守的结构先定下来</li></ul><h2 id="继续阅读" tabindex="-1">继续阅读 <a class="header-anchor" href="#继续阅读" aria-label="Permalink to &quot;继续阅读&quot;">​</a></h2><ul><li><a href="./pro-form.html">PmProForm</a></li><li><a href="./dictionary-system.html">字典系统</a></li><li><a href="./plugin-development.html">插件化开发</a></li></ul>`,18)])])}const c=i(h,[["render",t]]);export{g as __pageData,c as default};

package/dist/assets/guide_package-core.md.-E29SYy8.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as n,a2 as l}from"./chunks/framework.B3lxS50j.js";const g=JSON.parse('{"title":"@melt-js/libs-bag-core","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-core.md","filePath":"guide/package-core.md","lastUpdated":1794045200000}'),h={name:"guide/package-core.md"};function t(e,s,p,k,E,r){return a(),n("div",null,[...s[0]||(s[0]=[l("",18)])])}const c=i(h,[["render",t]]);export{g as __pageData,c as default};

package/dist/assets/guide_package-ecosystem.md.Di3RcVpF.js

@@ -0,0 +1 @@
+import{_ as l,o as a,c as i,a2 as o}from"./chunks/framework.B3lxS50j.js";const h=JSON.parse('{"title":"包生态总览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-ecosystem.md","filePath":"guide/package-ecosystem.md","lastUpdated":1794045200000}'),c={name:"guide/package-ecosystem.md"};function t(s,e,d,r,m,b){return a(),i("div",null,[...e[0]||(e[0]=[o('<h1 id="包生态总览" tabindex="-1">包生态总览 <a class="header-anchor" href="#包生态总览" aria-label="Permalink to &quot;包生态总览&quot;">​</a></h1><p>如果你是从 npm 入口进来的，不用一开始就把整套仓库结构看完。先记住这件事：</p><ul><li><code>@melt-js/libs-bag-entry</code> 负责宿主运行时</li><li><code>@melt-js/comps-bag-*</code> 负责具体业务能力</li><li><code>@melt-js/libs-bag-create</code> 负责把起步工程搭出来</li></ul><p>先这样记就够了。只有在你准备深入仓库内部实现时，才需要继续往下拆。</p><h2 id="对外怎么理解" tabindex="-1">对外怎么理解 <a class="header-anchor" href="#对外怎么理解" aria-label="Permalink to &quot;对外怎么理解&quot;">​</a></h2><p>现在对外的默认口径是：</p><ul><li><code>@melt-js/libs-bag-entry</code>：业务项目安装的主包</li><li><code>@melt-js/comps-bag-*</code>：按需安装的业务插件包</li><li><code>@melt-js/libs-bag-create</code>：生成宿主项目的脚手架</li></ul><p>使用方不用一开始就关心内部拆了多少层。先装主包，再按业务需要装插件。</p><h2 id="仓库内部怎么拆" tabindex="-1">仓库内部怎么拆 <a class="header-anchor" href="#仓库内部怎么拆" aria-label="Permalink to &quot;仓库内部怎么拆&quot;">​</a></h2><p>仓库内部还是分层的，这些分层主要服务实现和维护：</p><ul><li><code>@melt-js/libs-bag-core</code>：协议层，定义插件、路由 meta、菜单、Schema、字典这些公共约定</li><li><code>@melt-js/libs-bag-request</code>：请求层，处理 HTTP 和 WebSocket 接入</li><li><code>@melt-js/libs-bag-ui</code>：组件层，提供 <code>PmProTable</code>、<code>PmProForm</code>、<code>PmSchemaForm</code>、<code>PmDictTag</code></li><li><code>@melt-js/libs-bag-host</code>：宿主层，负责布局、权限、标签页、插件引导和 i18n 初始化</li><li><code>@melt-js/libs-bag-entry</code>：把前面几层收成业务项目更容易接入的主包</li><li><code>@melt-js/comps-bag-*</code>：业务插件层，把不同业务域拆成独立模块</li><li><code>@melt-js/libs-bag-create</code>：脚手架入口，生成宿主项目的起步工程</li></ul><p>如果你只是在用，不一定要把这些层都记牢。知道它们各自管什么就够了。</p><h2 id="先记住这几个角色" tabindex="-1">先记住这几个角色 <a class="header-anchor" href="#先记住这几个角色" aria-label="Permalink to &quot;先记住这几个角色&quot;">​</a></h2><p>想快速建立印象，可以先按这个版本理解：</p><ul><li><code>core</code> 管协议</li><li><code>request</code> 管请求</li><li><code>ui</code> 提供通用积木</li><li><code>host-vue</code> 把宿主真正跑起来</li><li><code>@melt-js/libs-bag-entry</code> 把前面几层打包成默认入口</li><li><code>plugin-*</code> 往宿主里挂业务</li><li><code>@melt-js/libs-bag-create</code> 帮你把项目先起出来</li></ul><h2 id="阅读顺序" tabindex="-1">阅读顺序 <a class="header-anchor" href="#阅读顺序" aria-label="Permalink to &quot;阅读顺序&quot;">​</a></h2><p>第一次接触这套项目，可以按这个顺序看：</p><ol><li><code>@melt-js/libs-bag-entry</code> / <code>@melt-js/libs-bag-create</code>：先看入口，知道正常使用姿势是什么</li><li><a href="./package-core.html">@melt-js/libs-bag-core</a>：再看插件协议和 Schema 协议到底长什么样</li><li><a href="./package-ui.html">@melt-js/libs-bag-ui</a>：理解这些协议怎么落到组件上</li><li><a href="./package-request.html">@melt-js/libs-bag-request</a>：补上请求层的接入方式</li><li><code>@melt-js/libs-bag-host</code>：再回头看宿主怎样把插件、布局、权限串起来</li><li><a href="./package-plugin-shop.html">@melt-js/comps-bag-shop</a> / <a href="./package-plugin-sys-setting.html">@melt-js/comps-bag-sys</a>：再看官方插件示例，会更容易代入</li></ol><p>这个顺序就是先看怎么用，再看内部为什么这么设计。</p><h2 id="这些包怎么串起来" tabindex="-1">这些包怎么串起来 <a class="header-anchor" href="#这些包怎么串起来" aria-label="Permalink to &quot;这些包怎么串起来&quot;">​</a></h2><p>从实际使用流程看，最常见的一条链路大概是这样：</p><ol><li>先用 <code>@melt-js/libs-bag-create</code> 生成一个宿主项目</li><li>生成后的项目默认安装 <code>@melt-js/libs-bag-entry</code></li><li>宿主项目通过 <code>@melt-js/libs-bag-entry</code> 初始化路由、布局、权限和插件系统</li><li>业务插件通过 <code>@melt-js/libs-bag-core</code> 约定 <code>AdminPlugin</code></li><li>插件页面通过 <code>@melt-js/libs-bag-ui</code> 复用表单、表格和字典组件</li><li>页面请求和实时消息通过 <code>@melt-js/libs-bag-request</code> 接入</li></ol><p>压缩成一句话就是：脚手架起项目，主包起宿主，插件补业务，底层分包分别负责协议、UI 和请求。</p><h2 id="已经补好的分包页" tabindex="-1">已经补好的分包页 <a class="header-anchor" href="#已经补好的分包页" aria-label="Permalink to &quot;已经补好的分包页&quot;">​</a></h2><p>目前已经补齐的分包文档有这些：</p><ul><li><a href="./package-core.html">@melt-js/libs-bag-core</a></li><li><a href="./package-request.html">@melt-js/libs-bag-request</a></li><li><a href="./package-ui.html">@melt-js/libs-bag-ui</a></li><li><a href="./package-plugin-shop.html">@melt-js/comps-bag-shop</a></li><li><a href="./package-plugin-sys-setting.html">@melt-js/comps-bag-sys</a></li></ul><p>如果你准备继续往下看，可以优先从 <code>core</code> 和 <code>ui</code> 开始。</p><p>如果你现在更关心维护者视角的实际操作，可以直接跳这两页：</p><ul><li><a href="./local-debugging.html">本地联调</a></li><li><a href="./package-publishing.html">发包流程</a></li></ul><h2 id="docs-和-readme-怎么分工" tabindex="-1">docs 和 README 怎么分工 <a class="header-anchor" href="#docs-和-readme-怎么分工" aria-label="Permalink to &quot;docs 和 README 怎么分工&quot;">​</a></h2><p>这两类文档现在是互补关系，不是二选一：</p><ul><li>包目录下的 <code>README.md</code>：更适合 npm 用户，重点放在安装、最小示例、公开能力和边界</li><li><code>docs-bag</code>：更适合顺着看，重点是概念串联、学习路径，以及这些包之间到底怎么配合</li></ul><p>第一次上手，先看 <code>docs-bag</code> 更顺。已经知道自己要接哪个包了，再去对应包的 <code>README.md</code> 会更快。</p>',33)])])}const g=l(c,[["render",t]]);export{h as __pageData,g as default};

package/dist/assets/guide_package-ecosystem.md.Di3RcVpF.lean.js

@@ -0,0 +1 @@
+import{_ as l,o as a,c as i,a2 as o}from"./chunks/framework.B3lxS50j.js";const h=JSON.parse('{"title":"包生态总览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-ecosystem.md","filePath":"guide/package-ecosystem.md","lastUpdated":1794045200000}'),c={name:"guide/package-ecosystem.md"};function t(s,e,d,r,m,b){return a(),i("div",null,[...e[0]||(e[0]=[o("",33)])])}const g=l(c,[["render",t]]);export{h as __pageData,g as default};

package/dist/assets/guide_package-plugin-shop.md.D-xXN7Yg.js

@@ -0,0 +1,9 @@
+import{_ as i,o as s,c as l,a2 as e}from"./chunks/framework.B3lxS50j.js";const k=JSON.parse('{"title":"@melt-js/comps-bag-shop","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-plugin-shop.md","filePath":"guide/package-plugin-shop.md","lastUpdated":1794045200000}'),n={name:"guide/package-plugin-shop.md"};function t(h,a,p,o,r,d){return s(),l("div",null,[...a[0]||(a[0]=[e(`<h1 id="melt-js-comps-bag-shop" tabindex="-1">@melt-js/comps-bag-shop <a class="header-anchor" href="#melt-js-comps-bag-shop" aria-label="Permalink to &quot;@melt-js/comps-bag-shop&quot;">​</a></h1><p><code>@melt-js/comps-bag-shop</code> 是官方商城示例插件。它的体量比普通 demo 大一些，适合拿来看路由怎么拆、菜单怎么配、多语言怎么放，详情页和缓存策略怎么处理。</p><h2 id="它带了哪些业务域" tabindex="-1">它带了哪些业务域 <a class="header-anchor" href="#它带了哪些业务域" aria-label="Permalink to &quot;它带了哪些业务域&quot;">​</a></h2><ul><li>商品管理</li><li>订单管理</li><li>用户管理</li><li>优惠营销</li><li>客服消息</li><li>财务结算</li><li>店铺设置</li></ul><h2 id="它主要在演示什么" tabindex="-1">它主要在演示什么 <a class="header-anchor" href="#它主要在演示什么" aria-label="Permalink to &quot;它主要在演示什么&quot;">​</a></h2><ul><li>一个插件可以同时输出 routes、menus、locales</li><li>隐藏详情页可以通过 <code>activeMenu</code> 保持菜单高亮</li><li>编辑页、详情页可以通过 <code>noCache</code> 避免缓存</li><li>财务类多个页面可以通过 <code>cacheKey</code> 复用缓存视图</li><li>同一个插件可以同时维护 <code>zh-CN</code> 和 <code>en</code> 两套文案</li></ul><h2 id="接入方式" tabindex="-1">接入方式 <a class="header-anchor" href="#接入方式" aria-label="Permalink to &quot;接入方式&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { bootstrapPlugins } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> shopPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-shop&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  router,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  i18n,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [shopPlugin]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="一般怎么用它" tabindex="-1">一般怎么用它 <a class="header-anchor" href="#一般怎么用它" aria-label="Permalink to &quot;一般怎么用它&quot;">​</a></h2><ul><li>作为业务插件开发的官方参考</li><li>作为商城类中后台的起步模板</li><li>作为路由和菜单协作方式的样板代码</li></ul><h2 id="边界" tabindex="-1">边界 <a class="header-anchor" href="#边界" aria-label="Permalink to &quot;边界&quot;">​</a></h2><ul><li>它是业务示例插件，不属于宿主框架基础层</li><li>它更适合作为参考实现，别把里面的页面直接当成最终产品形态</li><li>宿主布局、权限体系、标签页缓存机制还是属于 <code>@melt-js/libs-bag-entry</code> 提供的宿主运行时</li></ul><h2 id="继续阅读" tabindex="-1">继续阅读 <a class="header-anchor" href="#继续阅读" aria-label="Permalink to &quot;继续阅读&quot;">​</a></h2><ul><li><a href="./plugin-development.html">插件化开发</a></li><li><a href="./routing-and-menu.html">路由与菜单</a></li></ul>`,14)])])}const u=i(n,[["render",t]]);export{k as __pageData,u as default};

package/dist/assets/guide_package-plugin-shop.md.D-xXN7Yg.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as s,c as l,a2 as e}from"./chunks/framework.B3lxS50j.js";const k=JSON.parse('{"title":"@melt-js/comps-bag-shop","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-plugin-shop.md","filePath":"guide/package-plugin-shop.md","lastUpdated":1794045200000}'),n={name:"guide/package-plugin-shop.md"};function t(h,a,p,o,r,d){return s(),l("div",null,[...a[0]||(a[0]=[e("",14)])])}const u=i(n,[["render",t]]);export{k as __pageData,u as default};

package/dist/assets/guide_package-plugin-sys-setting.md.Dx3nxHVF.js

@@ -0,0 +1,9 @@
+import{_ as a,o as i,c as e,a2 as l}from"./chunks/framework.B3lxS50j.js";const g=JSON.parse('{"title":"@melt-js/comps-bag-sys","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-plugin-sys-setting.md","filePath":"guide/package-plugin-sys-setting.md","lastUpdated":1794045200000}'),t={name:"guide/package-plugin-sys-setting.md"};function n(p,s,o,h,d,r){return i(),e("div",null,[...s[0]||(s[0]=[l(`<h1 id="melt-js-comps-bag-sys" tabindex="-1">@melt-js/comps-bag-sys <a class="header-anchor" href="#melt-js-comps-bag-sys" aria-label="Permalink to &quot;@melt-js/comps-bag-sys&quot;">​</a></h1><p><code>@melt-js/comps-bag-sys</code> 是官方系统设置示例插件，放的是常规设置、高级设置、插件管理这类页面。</p><p>这个包不只是给几页示例。更重要的是，它把宿主框架和系统设置业务页的边界划清楚了。</p><h2 id="它带了哪些页面" tabindex="-1">它带了哪些页面 <a class="header-anchor" href="#它带了哪些页面" aria-label="Permalink to &quot;它带了哪些页面&quot;">​</a></h2><ul><li><code>/sys-setting</code>：常规设置</li><li><code>/sys-setting/advanced</code>：高级设置</li><li><code>/sys-setting/plugins</code>：插件管理</li></ul><h2 id="为什么它应该放在插件层" tabindex="-1">为什么它应该放在插件层 <a class="header-anchor" href="#为什么它应该放在插件层" aria-label="Permalink to &quot;为什么它应该放在插件层&quot;">​</a></h2><p>系统设置页看起来很像宿主的一部分，但很多时候它其实还是具体业务配置流程的一部分：</p><ul><li>不同项目的设置中心差异很大</li><li>插件管理、系统配置、运营设置通常都有明显业务属性</li><li>如果直接塞进宿主框架，宿主层会越来越重，也越来越难做通用</li></ul><p>所以这里按下面的方式拆：</p><ul><li><code>@melt-js/libs-bag-entry</code> 提供设置能力的承载壳层</li><li><code>@melt-js/comps-bag-sys</code> 放真正的设置业务页</li></ul><h2 id="接入方式" tabindex="-1">接入方式 <a class="header-anchor" href="#接入方式" aria-label="Permalink to &quot;接入方式&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { bootstrapPlugins } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sysSettingPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-sys&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  router,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  i18n,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [sysSettingPlugin]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="一般怎么用它" tabindex="-1">一般怎么用它 <a class="header-anchor" href="#一般怎么用它" aria-label="Permalink to &quot;一般怎么用它&quot;">​</a></h2><ul><li>作为系统设置模块的官方参考实现</li><li>作为插件管理页的落点</li><li>作为你自己项目里设置中心的起步模板</li></ul><p>其中 <code>/sys-setting/plugins</code> 不扫文件系统。它读取的是宿主启动时通过 <code>bootstrapPlugins({ plugins })</code> 注册到运行时里的插件清单。页面内部复用 <code>listRuntimePlugins()</code> 和 <code>setPluginEnabledState()</code>，所以本地联调时要保证宿主入口、插件页面和 <code>@melt-js/libs-bag-entry</code> 指向同一份源码实例。</p><p>常规设置页里的主题色和外观入口也不要直接读写 <code>localStorage</code>。通过 <code>useAppConfigStore()</code>、<code>themePresets</code> 和宿主内置的主题 token API 跟框架层交互就够了。</p><h2 id="边界" tabindex="-1">边界 <a class="header-anchor" href="#边界" aria-label="Permalink to &quot;边界&quot;">​</a></h2><ul><li>它不是宿主框架本体</li><li>它不应该把系统设置能力和框架层绑死</li><li>框架层负责通用宿主能力，插件层负责具体设置业务</li></ul><h2 id="继续阅读" tabindex="-1">继续阅读 <a class="header-anchor" href="#继续阅读" aria-label="Permalink to &quot;继续阅读&quot;">​</a></h2><ul><li><a href="./plugin-development.html">插件化开发</a></li><li><a href="./permissions.html">权限管理</a></li></ul>`,20)])])}const k=a(t,[["render",n]]);export{g as __pageData,k as default};

package/dist/assets/guide_package-plugin-sys-setting.md.Dx3nxHVF.lean.js

@@ -0,0 +1 @@
+import{_ as a,o as i,c as e,a2 as l}from"./chunks/framework.B3lxS50j.js";const g=JSON.parse('{"title":"@melt-js/comps-bag-sys","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-plugin-sys-setting.md","filePath":"guide/package-plugin-sys-setting.md","lastUpdated":1794045200000}'),t={name:"guide/package-plugin-sys-setting.md"};function n(p,s,o,h,d,r){return i(),e("div",null,[...s[0]||(s[0]=[l("",20)])])}const k=a(t,[["render",n]]);export{g as __pageData,k as default};

package/dist/assets/guide_package-publishing.md.B7hzTYDH.js

@@ -0,0 +1,7 @@
+import{_ as a,o as i,c as e,a2 as l}from"./chunks/framework.B3lxS50j.js";const r=JSON.parse('{"title":"发包流程","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-publishing.md","filePath":"guide/package-publishing.md","lastUpdated":1794045200000}'),t={name:"guide/package-publishing.md"};function h(p,s,n,d,k,o){return i(),e("div",null,[...s[0]||(s[0]=[l(`<h1 id="发包流程" tabindex="-1">发包流程 <a class="header-anchor" href="#发包流程" aria-label="Permalink to &quot;发包流程&quot;">​</a></h1><p>这页把发包这件事直接拆成命令。临时想不起该跑什么时，看这里就够了。</p><p>当前仓库对外的发包对象主要有三类：</p><ul><li><code>@melt-js/libs-bag-entry</code>：宿主运行时主包</li><li><code>@melt-js/comps-bag-shop</code>：官方商城示例插件</li><li><code>@melt-js/comps-bag-sys</code>：官方系统设置示例插件</li></ul><h2 id="先确认边界" tabindex="-1">先确认边界 <a class="header-anchor" href="#先确认边界" aria-label="Permalink to &quot;先确认边界&quot;">​</a></h2><p>先把角色分清，不然后面很容易发混：</p><ul><li><code>@melt-js/libs-bag-entry</code> 只负责聚合宿主运行时、请求层、UI 层和协议层</li><li><code>@melt-js/comps-bag-*</code> 保持独立业务插件包，单独版本化、单独发布</li><li>使用方接入时，默认是先装 <code>@melt-js/libs-bag-entry</code>，再按需装插件包</li></ul><p>所以主包和插件包要分开发布，不是一条命令全包。</p><h2 id="发布前检查" tabindex="-1">发布前检查 <a class="header-anchor" href="#发布前检查" aria-label="Permalink to &quot;发布前检查&quot;">​</a></h2><p>正式发之前，先过一遍这几步：</p><ol><li>确认这次准备发的是 <code>patch</code>、<code>minor</code> 还是 <code>major</code></li><li>在根目录执行一次依赖安装</li><li>先跑构建，确认产物能正常生成</li><li>优先跑 <code>dry-run</code>，确认发布内容和文件列表</li><li>再执行正式 <code>publish</code></li></ol><p>根目录安装依赖：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span></code></pre></div><h2 id="主包-melt-js-libs-bag-entry" tabindex="-1">主包：@melt-js/libs-bag-entry <a class="header-anchor" href="#主包-melt-js-libs-bag-entry" aria-label="Permalink to &quot;主包：@melt-js/libs-bag-entry&quot;">​</a></h2><h3 id="只构建" tabindex="-1">只构建 <a class="header-anchor" href="#只构建" aria-label="Permalink to &quot;只构建&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/libs-bag-entry</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><p>这条命令会先把它依赖的内部包构建出来，然后再生成 <code>libs-bag-entry/dist</code>。</p><h3 id="本地打包成-tgz" tabindex="-1">本地打包成 tgz <a class="header-anchor" href="#本地打包成-tgz" aria-label="Permalink to &quot;本地打包成 tgz&quot;">​</a></h3><p>如果你想先看看最终包里到底会带什么，或者想丢一个 tarball 给外部项目试装，直接跑这个：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bag:pack</span></span></code></pre></div><p>执行后会在 <code>libs-bag-entry</code> 下生成类似 <code>melt-js-libs-bag-entry-2026.11.7.tgz</code> 的文件。</p><h3 id="模拟发布" tabindex="-1">模拟发布 <a class="header-anchor" href="#模拟发布" aria-label="Permalink to &quot;模拟发布&quot;">​</a></h3><p>这一步不会真正上传，也不会改版本号，只是先把最终发布内容过一遍：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bag:release:dry-run</span></span></code></pre></div><h3 id="正式发布" tabindex="-1">正式发布 <a class="header-anchor" href="#正式发布" aria-label="Permalink to &quot;正式发布&quot;">​</a></h3><p>默认正式发布脚本会先把 <code>libs-bag-entry/package.json</code> 的版本号自动升一个 <code>patch</code>，再构建并发布。</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bag:release</span></span></code></pre></div><p>如果这次不是补丁版本，也可以直接跑对应脚本：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bag:release:minor</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bag:release:major</span></span></code></pre></div><h2 id="插件包-melt-js-comps-bag-shop" tabindex="-1">插件包：@melt-js/comps-bag-shop <a class="header-anchor" href="#插件包-melt-js-comps-bag-shop" aria-label="Permalink to &quot;插件包：@melt-js/comps-bag-shop&quot;">​</a></h2><h3 id="构建" tabindex="-1">构建 <a class="header-anchor" href="#构建" aria-label="Permalink to &quot;构建&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-shop</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><h3 id="本地打包成-tgz-1" tabindex="-1">本地打包成 tgz <a class="header-anchor" href="#本地打包成-tgz-1" aria-label="Permalink to &quot;本地打包成 tgz&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dir</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> comps-bag-shop</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pack</span></span></code></pre></div><h3 id="模拟发布-1" tabindex="-1">模拟发布 <a class="header-anchor" href="#模拟发布-1" aria-label="Permalink to &quot;模拟发布&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> publish</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./comps-bag-shop</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --access</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dry-run</span></span></code></pre></div><h3 id="正式发布-1" tabindex="-1">正式发布 <a class="header-anchor" href="#正式发布-1" aria-label="Permalink to &quot;正式发布&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> publish</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./comps-bag-shop</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --access</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public</span></span></code></pre></div><h2 id="插件包-melt-js-comps-bag-sys" tabindex="-1">插件包：@melt-js/comps-bag-sys <a class="header-anchor" href="#插件包-melt-js-comps-bag-sys" aria-label="Permalink to &quot;插件包：@melt-js/comps-bag-sys&quot;">​</a></h2><h3 id="构建-1" tabindex="-1">构建 <a class="header-anchor" href="#构建-1" aria-label="Permalink to &quot;构建&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-sys</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><h3 id="本地打包成-tgz-2" tabindex="-1">本地打包成 tgz <a class="header-anchor" href="#本地打包成-tgz-2" aria-label="Permalink to &quot;本地打包成 tgz&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dir</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> comps-bag-sys</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pack</span></span></code></pre></div><h3 id="模拟发布-2" tabindex="-1">模拟发布 <a class="header-anchor" href="#模拟发布-2" aria-label="Permalink to &quot;模拟发布&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> publish</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./comps-bag-sys</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --access</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dry-run</span></span></code></pre></div><h3 id="正式发布-2" tabindex="-1">正式发布 <a class="header-anchor" href="#正式发布-2" aria-label="Permalink to &quot;正式发布&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> publish</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./comps-bag-sys</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --access</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public</span></span></code></pre></div><h2 id="常见发布顺序" tabindex="-1">常见发布顺序 <a class="header-anchor" href="#常见发布顺序" aria-label="Permalink to &quot;常见发布顺序&quot;">​</a></h2><p>如果这次同时动了主包和插件，稳一点的顺序是：</p><ol><li>先发布 <code>@melt-js/libs-bag-entry</code></li><li>再发布依赖它的 <code>@melt-js/comps-bag-*</code></li><li>再用外部项目做一次安装验证</li></ol><p>可以按下面的顺序走一遍：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/libs-bag-entry</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-shop</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/comps-bag-sys</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bag:release:dry-run</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> publish</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./comps-bag-shop</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --access</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dry-run</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> publish</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./comps-bag-sys</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --access</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dry-run</span></span></code></pre></div><p><code>dry-run</code> 看完没问题，再执行正式发布。</p><h2 id="发包后怎么验证" tabindex="-1">发包后怎么验证 <a class="header-anchor" href="#发包后怎么验证" aria-label="Permalink to &quot;发包后怎么验证&quot;">​</a></h2><p>发完以后，最好补一次真实验证。常用就两种：</p><ul><li>用 <code>pack</code> 生成的 <code>.tgz</code> 在一个临时项目里安装验证</li><li>在外部使用方项目里把依赖版本切到刚发出的版本，再跑一次 <code>pnpm install &amp;&amp; pnpm build</code></li></ul><p>如果你平时主要靠 <code>link:</code> 联调，这一步更别省。<code>link:</code> 能跑，不代表真正从 npm 装下来也一定没问题。</p><h2 id="后面可以补的脚本" tabindex="-1">后面可以补的脚本 <a class="header-anchor" href="#后面可以补的脚本" aria-label="Permalink to &quot;后面可以补的脚本&quot;">​</a></h2><p>现在根目录已经有主包的发布脚本了，但两个插件包还是手动 <code>npm publish</code>。</p><p>如果后面你准备频繁发布插件，可以把这些脚本也补到根目录，例如：</p><ul><li><code>pack:plugin-shop</code></li><li><code>pack:plugin-sys-setting</code></li><li><code>release:dry-run:plugin-shop</code></li><li><code>release:dry-run:plugin-sys-setting</code></li><li><code>release:plugin-shop</code></li><li><code>release:plugin-sys-setting</code></li></ul><p>这样后面谁来维护，都不用再反复切目录找命令。</p>`,63)])])}const g=a(t,[["render",h]]);export{r as __pageData,g as default};

package/dist/assets/guide_package-publishing.md.B7hzTYDH.lean.js

@@ -0,0 +1 @@
+import{_ as a,o as i,c as e,a2 as l}from"./chunks/framework.B3lxS50j.js";const r=JSON.parse('{"title":"发包流程","description":"","frontmatter":{},"headers":[],"relativePath":"guide/package-publishing.md","filePath":"guide/package-publishing.md","lastUpdated":1794045200000}'),t={name:"guide/package-publishing.md"};function h(p,s,n,d,k,o){return i(),e("div",null,[...s[0]||(s[0]=[l("",63)])])}const g=a(t,[["render",h]]);export{r as __pageData,g as default};