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

package/dist/assets/guide_routing-and-menu.md.BWLWiMg1.js

@@ -0,0 +1,74 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.DaGrNpXH.js";const c=JSON.parse('{"title":"路由与菜单","description":"","frontmatter":{},"headers":[],"relativePath":"guide/routing-and-menu.md","filePath":"guide/routing-and-menu.md","lastUpdated":1794045200000}'),e={name:"guide/routing-and-menu.md"};function l(h,s,p,k,d,E){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>很多后台项目会把路由和菜单塞进一个大配置文件。Vue-Bag-Admin 走插件化路线，路由和菜单分散在各个业务插件里，宿主启动时再收集注册。</p><h2 id="路由配置" tabindex="-1">路由配置 <a class="header-anchor" href="#路由配置" aria-label="Permalink to &quot;路由配置&quot;">​</a></h2><p>路由配置沿用 <a href="https://router.vuejs.org/zh/" target="_blank" rel="noreferrer">Vue Router 4</a> 的写法，只是在 <code>meta</code> 字段里放后台需要的权限、布局、缓存和菜单信息。</p><h3 id="注册路由" tabindex="-1">注册路由 <a class="header-anchor" href="#注册路由" aria-label="Permalink to &quot;注册路由&quot;">​</a></h3><p>在插件入口文件中，通过 <code>routes</code> 导出路由：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;"> 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;">  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/list&#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;ReportList&#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/ReportList.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.list&#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;">}</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;"> plugin</span></span></code></pre></div><h3 id="meta-字段" tabindex="-1">Meta 字段 <a class="header-anchor" href="#meta-字段" aria-label="Permalink to &quot;Meta 字段&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性名</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>页面标题，支持多语言 key。</td></tr><tr><td><code>layout</code></td><td><code>&#39;default&#39; | &#39;blank&#39;</code></td><td>页面布局。<code>default</code> 包含侧边栏和顶栏，<code>blank</code> 为空白布局（如登录页）。</td></tr><tr><td><code>public</code></td><td><code>boolean</code></td><td>设为 <code>true</code> 时，无需登录即可访问（如 <code>/login</code>, <code>/404</code>）。</td></tr><tr><td><code>roles</code></td><td><code>string[]</code></td><td>允许访问该路由的角色列表。</td></tr><tr><td><code>permissions</code></td><td><code>string[]</code></td><td>允许访问该路由的权限标识列表。</td></tr><tr><td><code>hidden</code></td><td><code>boolean</code></td><td>设为 <code>true</code> 时，路由本身不会出现在菜单中。</td></tr><tr><td><code>activeMenu</code></td><td><code>string</code></td><td>指定当前页面应高亮的菜单路径，适用于详情页、编辑页、子页。</td></tr><tr><td><code>noCache</code></td><td><code>boolean</code></td><td>是否禁止当前页进入标签页缓存。</td></tr><tr><td><code>cacheKey</code></td><td><code>string</code></td><td>显式指定 KeepAlive 匹配名。多个路由复用同一个页面组件时，用它来对齐组件名。</td></tr></tbody></table><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;">createHostRouter</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;">  auth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>如果开启了鉴权，所有没有 <code>meta.public: true</code> 的页面都会被视为登录后访问；登录页、404、回调页这类页面需要显式标记为公开页面。</p><h3 id="activemenu-什么时候用" tabindex="-1">activeMenu 什么时候用 <a class="header-anchor" href="#activemenu-什么时候用" aria-label="Permalink to &quot;activeMenu 什么时候用&quot;">​</a></h3><p>后台里经常会遇到这种页面：</p><ul><li>列表页在左侧菜单中可见</li><li>详情页、编辑页不在左侧菜单中显示</li><li>但进入详情页时，左侧仍然要高亮原菜单</li></ul><p>这时就应该使用 <code>meta.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;/product/edit/: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;ProductEdit&#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/ProductEdit.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.product.edit&#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;">    hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</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;/product/list&#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>这样进入 <code>/product/edit/1</code> 时，左侧依然会高亮 <code>/product/list</code>。</p><h3 id="keepalive-与-nocache" tabindex="-1">KeepAlive 与 noCache <a class="header-anchor" href="#keepalive-与-nocache" aria-label="Permalink to &quot;KeepAlive 与 noCache&quot;">​</a></h3><p>标签页缓存默认会把路由对应的页面组件放进 <code>KeepAlive</code>。</p><ul><li>列表页、工作台页这类需要保留筛选条件和滚动位置的页面，保持默认即可</li><li>详情页、编辑页、发货页这类一次性操作页面，建议显式设置 <code>meta.noCache = true</code></li><li>如果多个路由复用同一个 Vue 组件，需要补 <code>meta.cacheKey</code>，它的值应该和组件名一致</li></ul><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;">    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;">    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;">    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;">    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><h2 id="菜单配置" tabindex="-1">菜单配置 <a class="header-anchor" href="#菜单配置" aria-label="Permalink to &quot;菜单配置&quot;">​</a></h2><p>菜单渲染和路由注册分开处理，这样才能支持外链、多级目录，以及不对应具体路由的目录节点。</p><h3 id="注册菜单" tabindex="-1">注册菜单 <a class="header-anchor" href="#注册菜单" aria-label="Permalink to &quot;注册菜单&quot;">​</a></h3><p>在插件的 <code>menus</code> 数组中导出菜单项：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">  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;/dashboard&#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;">      title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;控制台&#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;">      icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;icon-home&#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;">      sort: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 排序权重，越小越靠前</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;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/system&#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;系统设置&#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;icon-setting&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      children: [</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;/system/users&#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;用户管理&#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;">          path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/system/roles&#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;角色管理&#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:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="菜单字段" tabindex="-1">菜单字段 <a class="header-anchor" href="#菜单字段" aria-label="Permalink to &quot;菜单字段&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性名</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>path</code></td><td><code>string</code></td><td>菜单唯一标识，通常对应一个路由路径。</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>菜单标题，建议使用 i18n key。</td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>菜单图标标识。</td></tr><tr><td><code>sort</code></td><td><code>number</code></td><td>菜单排序，越小越靠前。</td></tr><tr><td><code>hidden</code></td><td><code>boolean</code></td><td>是否隐藏该菜单项。</td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>菜单徽标，如“新”或数字。</td></tr><tr><td><code>roles</code></td><td><code>string[]</code></td><td>菜单角色限制。</td></tr><tr><td><code>permissions</code></td><td><code>string[]</code></td><td>菜单权限点限制。</td></tr><tr><td><code>children</code></td><td><code>MenuConfig[]</code></td><td>子菜单。</td></tr></tbody></table><h3 id="菜单渲染机制" tabindex="-1">菜单渲染机制 <a class="header-anchor" href="#菜单渲染机制" aria-label="Permalink to &quot;菜单渲染机制&quot;">​</a></h3><p>系统在 <code>bootstrapPlugins()</code> 阶段遍历所有已启用插件，把它们的 <code>menus</code> 合并成菜单树，再存到 <code>menuStore</code>。</p><h3 id="动态权限过滤" tabindex="-1">动态权限过滤 <a class="header-anchor" href="#动态权限过滤" aria-label="Permalink to &quot;动态权限过滤&quot;">​</a></h3><p>侧边栏组件会根据当前登录用户的角色与权限过滤菜单树。后端用 Java、Go 还是 Node.js 都没关系，只要返回前端需要的角色和权限点即可。</p><h2 id="使用约定" tabindex="-1">使用约定 <a class="header-anchor" href="#使用约定" aria-label="Permalink to &quot;使用约定&quot;">​</a></h2><ul><li>列表页：正常出现在 <code>menus</code> 中</li><li>详情页：使用 <code>hidden: true</code> + <code>activeMenu</code></li><li>嵌套路由：子路由如不单独出现在菜单中，也建议显式配置 <code>activeMenu</code></li><li>外部链接：可以只配 <code>menus</code>，不一定需要对应实际路由</li></ul>`,36)])])}const o=i(e,[["render",l]]);export{c as __pageData,o as default};

package/dist/assets/guide_routing-and-menu.md.BWLWiMg1.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.DaGrNpXH.js";const c=JSON.parse('{"title":"路由与菜单","description":"","frontmatter":{},"headers":[],"relativePath":"guide/routing-and-menu.md","filePath":"guide/routing-and-menu.md","lastUpdated":1794045200000}'),e={name:"guide/routing-and-menu.md"};function l(h,s,p,k,d,E){return a(),n("div",null,[...s[0]||(s[0]=[t("",36)])])}const o=i(e,[["render",l]]);export{c as __pageData,o as default};

package/dist/assets/guide_theme-tokens.md.BZ_Qwz_U.js

@@ -0,0 +1,53 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.DaGrNpXH.js";const g=JSON.parse('{"title":"主题与布局 Token","description":"","frontmatter":{},"headers":[],"relativePath":"guide/theme-tokens.md","filePath":"guide/theme-tokens.md","lastUpdated":1794045200000}'),p={name:"guide/theme-tokens.md"};function l(h,s,e,k,E,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="主题与布局-token" tabindex="-1">主题与布局 Token <a class="header-anchor" href="#主题与布局-token" aria-label="Permalink to &quot;主题与布局 Token&quot;">​</a></h1><p>宿主的外观配置分两层：</p><ul><li><code>useAppConfigStore()</code> 保存用户选择，比如亮暗色、主题色、内容宽度、标签页、页脚和页面动画。</li><li><code>createThemeTokens()</code> 根据这些选择生成语义 token，并通过 CSS 变量落到 <code>document.documentElement</code>。</li></ul><p>这样设置页只是入口，布局、组件和插件真正消费的是稳定的 token 契约。</p><h2 id="常用-api" tabindex="-1">常用 API <a class="header-anchor" href="#常用-api" aria-label="Permalink to &quot;常用 API&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;"> { createThemeTokens, useAppConfigStore, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ThemeTokens } </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:#24292E;--shiki-dark:#E1E4E8;">appConfigStore.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></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;#3b82f6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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>
+<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;"> tokens</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ThemeTokens</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createThemeTokens</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(appConfigStore.theme, appConfigStore.themeColor)</span></span></code></pre></div><p><code>HostApp</code> 会在启动和设置变化时自动应用 token。普通页面一般不需要手动调用 <code>applyThemeTokens()</code>。</p><h2 id="css-变量" tabindex="-1">CSS 变量 <a class="header-anchor" href="#css-变量" aria-label="Permalink to &quot;CSS 变量&quot;">​</a></h2><p>宿主会保留旧的主色变量：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">var(--primary-color)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--primary-color-400)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--primary-color-600)</span></span></code></pre></div><p>新代码优先用这些语义变量：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">var(--bag-color-primary)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-primary-hover)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-primary-pressed)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-primary-soft)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-accent)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-bg)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-surface)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-surface-muted)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-border)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-text)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-color-text-muted)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-layout-header-height)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-layout-sidebar-width)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-layout-sidebar-collapsed-width)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-layout-content-max-width)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-radius-md)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">var(--bag-shadow-card)</span></span></code></pre></div><p>插件页面如果只是需要跟随主题，优先写 CSS 变量或 Tailwind 的 <code>primary-*</code>：</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg-primary-500 hover:bg-primary-600 text-white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--bag-color-surface</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--bag-color-text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--bag-color-border</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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="设置页接入" tabindex="-1">设置页接入 <a class="header-anchor" href="#设置页接入" aria-label="Permalink to &quot;设置页接入&quot;">​</a></h2><p>系统设置页不要直接读写 <code>localStorage</code>，也不要自己维护一份主题色列表。复用宿主 store 就行：</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:#6F42C1;--shiki-dark:#B392F0;"> changeThemeColor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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;">  appConfigStore.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setThemeColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(color)</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:#6F42C1;--shiki-dark:#B392F0;"> openAppearanceCenter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;">  appConfigStore.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">openSettingsDrawer</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><code>bag-theme-color-change</code> 和 <code>bag-open-settings-drawer</code> 事件仍然保留，用来兼容旧页面；新代码优先使用 store。</p><h2 id="自定义设置抽屉" tabindex="-1">自定义设置抽屉 <a class="header-anchor" href="#自定义设置抽屉" aria-label="Permalink to &quot;自定义设置抽屉&quot;">​</a></h2><p><code>HostApp</code> 默认挂载内置外观配置抽屉。只有需要完全自定义时，才传 <code>#settings</code>：</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">HostApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> #</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">settings</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">MySettingsDrawer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">HostApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>传入 <code>#settings</code> 后，宿主会跳过内置抽屉，避免重复渲染两套设置面板。</p>`,22)])])}const o=i(p,[["render",l]]);export{g as __pageData,o as default};

package/dist/assets/guide_theme-tokens.md.BZ_Qwz_U.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.DaGrNpXH.js";const g=JSON.parse('{"title":"主题与布局 Token","description":"","frontmatter":{},"headers":[],"relativePath":"guide/theme-tokens.md","filePath":"guide/theme-tokens.md","lastUpdated":1794045200000}'),p={name:"guide/theme-tokens.md"};function l(h,s,e,k,E,r){return a(),n("div",null,[...s[0]||(s[0]=[t("",22)])])}const o=i(p,[["render",l]]);export{g as __pageData,o as default};

package/dist/assets/index.md.RFoPWDBP.js

@@ -0,0 +1 @@
+import{d as m,g as r,o as s,c as e,j as t,a2 as n,k as d,E as l}from"./chunks/framework.DaGrNpXH.js";const u={id:"community",class:"bag-community"},g={class:"bag-community-grid"},p={class:"bag-community-card bag-community-card--wechat"},b={class:"bag-community-surface bag-community-wechat-surface"},h=["src"],y="https://u.wechat.com/MC3P_4dYw_2FOyOWJvE-Ph0?s=2",_=m({__name:"CommunitySection",setup(c){const i=r("/wechat-group-qr.png");return(o,a)=>(s(),e("section",u,[a[3]||(a[3]=t("span",{class:"bag-community-ghost","aria-hidden":"true"},"CONNECT",-1)),a[4]||(a[4]=t("header",{class:"bag-community-heading"},[t("span",{class:"bag-community-eyebrow"},"COMMUNITY & CONTACT"),t("h2",null,"社区与联系"),t("p",null,"不止交流代码，也分享生活、技术和新的合作想法。")],-1)),t("div",g,[t("article",p,[a[1]||(a[1]=n('<span class="bag-community-card-icon bag-community-card-icon--wechat" aria-hidden="true"><svg viewBox="0 0 48 48"><circle cx="24" cy="15" r="6"></circle><circle cx="11" cy="19" r="4"></circle><circle cx="37" cy="19" r="4"></circle><path d="M13 38v-5c0-7 5-11 11-11s11 4 11 11v5"></path><path d="M3 37v-4c0-5 3-8 8-8 2 0 4 1 5 2"></path><path d="M45 37v-4c0-5-3-8-8-8-2 0-4 1-5 2"></path></svg></span><span class="bag-community-doodle bag-community-doodle--wechat" aria-hidden="true"></span><span class="bag-community-star" aria-hidden="true">✦</span>',3)),t("div",b,[a[0]||(a[0]=n('<div class="bag-community-copy"><h3>微信群</h3><span class="bag-community-title-mark" aria-hidden="true"></span><p class="bag-community-name">Vue-Bag-Admin 社区</p><span class="bag-community-dots" aria-hidden="true"></span><strong class="bag-community-join"><span aria-hidden="true">★</span> 扫码加入交流群 </strong></div>',1)),t("a",{class:"bag-community-qr-card",href:y,target:"_blank",rel:"noopener noreferrer",title:"打开微信邀请链接"},[t("img",{class:"bag-community-qr-image",src:d(i),alt:"Vue-Bag-Admin 微信群邀请二维码"},null,8,h)])])]),a[2]||(a[2]=n('<a class="bag-community-card bag-community-link-card bag-community-link-card--station" href="https://www.itnavs.com/" target="_blank" rel="noopener noreferrer"><div class="bag-community-link-surface"><span class="bag-community-card-icon bag-community-card-icon--station" aria-hidden="true"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="15"></circle><path d="m29 17-4 9-8 5 4-9 8-5Z"></path></svg></span><div class="bag-community-link-copy"><h3>知航驿站</h3><span class="bag-community-title-mark" aria-hidden="true"></span><p>记录生活、技术与思考</p><span class="bag-community-dots" aria-hidden="true"></span><strong class="bag-community-action bag-community-action--station"><span aria-hidden="true">→</span> 访问网站 </strong></div><div class="bag-community-station-art" aria-hidden="true"><span class="bag-community-note bag-community-note--life"></span><span class="bag-community-note bag-community-note--tech"></span><span class="bag-community-compass"><i></i></span></div><span class="bag-community-doodle bag-community-doodle--station" aria-hidden="true"></span></div></a><a class="bag-community-card bag-community-link-card bag-community-link-card--contact" href="https://yh.itnavs.com/contact" target="_blank" rel="noopener noreferrer"><div class="bag-community-link-surface"><span class="bag-community-card-icon bag-community-card-icon--contact" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="m8 26 8 8c2 2 5 2 7 0l4-4"></path><path d="m40 26-8 8c-2 2-5 2-7 0L14 23"></path><path d="m20 17 4-4c2-2 5-2 7 0l9 9"></path><path d="m28 17-3 3c-2 2-5 2-7 0l-1-1-9 9"></path></svg></span><div class="bag-community-link-copy"><h3>合作机会</h3><span class="bag-community-title-mark" aria-hidden="true"></span><p>项目合作 / 技术交流</p><span class="bag-community-dots" aria-hidden="true"></span><strong class="bag-community-action bag-community-action--contact"><span aria-hidden="true">→</span> 联系我 </strong></div><div class="bag-community-contact-art" aria-hidden="true"><span class="bag-community-message"><i></i><i></i><i></i></span><span class="bag-community-handshake"><svg viewBox="0 0 64 64"><path d="m7 31 9-11 14 9-8 10c-2 3-6 3-8 1l-7-6c-1-1-1-2 0-3Z"></path><path d="m57 31-9-11-14 9 8 10c2 3 6 3 8 1l7-6c1-1 1-2 0-3Z"></path><path d="m22 30 8-7c2-2 5-2 7 0l8 7-13 13-10-13Z"></path></svg></span></div><span class="bag-community-doodle bag-community-doodle--contact" aria-hidden="true"></span></div></a>',2))])]))}}),k=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Vue-Bag-Admin","text":"插件化中后台框架","tagline":"基于 Vue3 + Vite6 + Naive UI + Tailwind CSS + Pinia + Strapi5 的宿主式后台框架","image":{"src":"/logo.png","alt":"Vue-Bag-Admin Logo"},"actions":[{"theme":"brand","text":"快速开始","link":"/guide/getting-started"},{"theme":"alt","text":"了解架构","link":"/guide/introduction"},{"theme":"alt","text":"在线预览","link":"https://hangjob.github.io/vue-bag-admin/"}]},"features":[{"title":"🧩 宿主与插件分层","details":"`@melt-js/libs-bag-entry` 跑宿主，`@melt-js/comps-bag-*` 放业务。先装主包，缺哪块业务再补插件。"},{"title":"📦 Monorepo 管理","details":"仓库使用 pnpm workspace 组织 `libs-bag-core`、`libs-bag-request`、`libs-bag-ui`、`libs-bag-host`、插件包和脚手架，便于联调和独立发包。"},{"title":"🛡️ 权限与路由","details":"宿主内置动态路由、菜单、标签页和按钮级权限控制，可以直接接常见后台页面。"},{"title":"🎛️ UI 与请求能力","details":"内置 `PmProTable`、`PmProForm`、字典组件，以及 HTTP / fetch / WebSocket 接入。"},{"title":"🚀 脚手架起步","details":"可以通过 `@melt-js/libs-bag-create` 直接生成宿主项目，再按需挂官方插件或业务插件。"},{"title":"🔧 本地联调","details":"可以直接跑 `tpl-vue3-admin-naive-bag`，也可以在外部项目里用 `link:` 验证主包和插件包。"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1794045200000}'),v={name:"index.md"},f=Object.assign(v,{setup(c){return(i,o)=>(s(),e("div",null,[l(_)]))}});export{k as __pageData,f as default};

package/dist/assets/index.md.RFoPWDBP.lean.js

@@ -0,0 +1 @@
+import{d as m,g as r,o as s,c as e,j as t,a2 as n,k as d,E as l}from"./chunks/framework.DaGrNpXH.js";const u={id:"community",class:"bag-community"},g={class:"bag-community-grid"},p={class:"bag-community-card bag-community-card--wechat"},b={class:"bag-community-surface bag-community-wechat-surface"},h=["src"],y="https://u.wechat.com/MC3P_4dYw_2FOyOWJvE-Ph0?s=2",_=m({__name:"CommunitySection",setup(c){const i=r("/wechat-group-qr.png");return(o,a)=>(s(),e("section",u,[a[3]||(a[3]=t("span",{class:"bag-community-ghost","aria-hidden":"true"},"CONNECT",-1)),a[4]||(a[4]=t("header",{class:"bag-community-heading"},[t("span",{class:"bag-community-eyebrow"},"COMMUNITY & CONTACT"),t("h2",null,"社区与联系"),t("p",null,"不止交流代码，也分享生活、技术和新的合作想法。")],-1)),t("div",g,[t("article",p,[a[1]||(a[1]=n("",3)),t("div",b,[a[0]||(a[0]=n("",1)),t("a",{class:"bag-community-qr-card",href:y,target:"_blank",rel:"noopener noreferrer",title:"打开微信邀请链接"},[t("img",{class:"bag-community-qr-image",src:d(i),alt:"Vue-Bag-Admin 微信群邀请二维码"},null,8,h)])])]),a[2]||(a[2]=n("",2))])]))}}),k=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Vue-Bag-Admin","text":"插件化中后台框架","tagline":"基于 Vue3 + Vite6 + Naive UI + Tailwind CSS + Pinia + Strapi5 的宿主式后台框架","image":{"src":"/logo.png","alt":"Vue-Bag-Admin Logo"},"actions":[{"theme":"brand","text":"快速开始","link":"/guide/getting-started"},{"theme":"alt","text":"了解架构","link":"/guide/introduction"},{"theme":"alt","text":"在线预览","link":"https://hangjob.github.io/vue-bag-admin/"}]},"features":[{"title":"🧩 宿主与插件分层","details":"`@melt-js/libs-bag-entry` 跑宿主，`@melt-js/comps-bag-*` 放业务。先装主包，缺哪块业务再补插件。"},{"title":"📦 Monorepo 管理","details":"仓库使用 pnpm workspace 组织 `libs-bag-core`、`libs-bag-request`、`libs-bag-ui`、`libs-bag-host`、插件包和脚手架，便于联调和独立发包。"},{"title":"🛡️ 权限与路由","details":"宿主内置动态路由、菜单、标签页和按钮级权限控制，可以直接接常见后台页面。"},{"title":"🎛️ UI 与请求能力","details":"内置 `PmProTable`、`PmProForm`、字典组件，以及 HTTP / fetch / WebSocket 接入。"},{"title":"🚀 脚手架起步","details":"可以通过 `@melt-js/libs-bag-create` 直接生成宿主项目，再按需挂官方插件或业务插件。"},{"title":"🔧 本地联调","details":"可以直接跑 `tpl-vue3-admin-naive-bag`，也可以在外部项目里用 `link:` 验证主包和插件包。"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1794045200000}'),v={name:"index.md"},f=Object.assign(v,{setup(c){return(i,o)=>(s(),e("div",null,[l(_)]))}});export{k as __pageData,f as default};