labull-framework 0.1.1 → 0.1.2

package/README.md

@@ -36,20 +36,46 @@ app.mount('#app')
 
 ```vue
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useAuth } from 'labull-framework/auth'
-import { MagicBlockHost } from 'labull-framework/magic-block'
+import { openTab } from 'labull-framework/ui'
+import type { SideItem } from 'labull-framework/ui'
 
 const { user, isStaff, logout } = useAuth()
+const notice = ref('')
+
+/** 一级 = 模块（点它滑出二级菜单），二级 = 页面；点一项干什么写在它自己的 onClick 里。 */
+const menu: SideItem[] = [
+  { path: 'sales', title: '销售管理', icon: 'pi pi-shopping-cart', children: [
+    { path: '/orders', title: '订单', icon: 'pi pi-list', onClick: () => openTab('/orders') },
+    { path: '/orders/42', title: '订单 SO-1', icon: 'pi pi-file', onClick: () => openTab('/orders/42?orderId=7') },
+    { title: '设置', icon: 'pi pi-cog', onClick: () => { notice.value = '这一项不开标签' } }, // 不写 onClick 时默认"有 path 就开那个标签"
+  ]},
+]
 </script>
 
 <template>
-  <ProductShell>
-    <template #appbar><b>订单系统</b></template>
-    <MagicBlockHost uuid="6f1c…" />
+  <ProductShell :side="menu" caption="订单系统">
+    <template #appbar><b>{{ user?.name }}</b></template>
+    <RouterView />   <!-- 页面（= 标签内容）由路由给 -->
   </ProductShell>
 </template>
 ```
 
+magic block：**一条路由 = 一个块** —— **块外面不放任何东西**（标题 / 按钮 / 参数展示都写进块自己的
+`index.open.html`），块占满这条标签页：
+
+```ts
+// main.ts：这一条路由就是这个块（没有页面文件）
+{ path: '/orders', component: MagicBlockPage, props: { uuid: '6f1c…' },
+  meta: { title: '订单', icon: 'pi pi-list' } }
+```
+```js
+// 块自己的 index.open.html 里：要什么问宿主
+const tab = await magicBlock.context()                    // { path, params, query }
+await magicBlock.setTabTitle('订单 SO-42', 'pi pi-file')   // 给所属那条标签起名
+```
+
 后端地址走 `VITE_API_BASE`（默认 `http://localhost:3000`）。
 
 ## subpath 对照表（原包 → 现在怎么 import）
@@ -58,8 +84,8 @@ const { user, isStaff, logout } = useAuth()
 |---|---|---|
 | `@labull/theme` | `labull-framework/style.css`（或 `labull-framework/theme`） | `--sp-*` token + 完整主题层 + 结构类 + primeicons |
 | `@labull/auth` | `labull-framework/auth` | `useAuth()` / `apiFetch()` / `ensureAuthenticated()` / `createAuthGate()` / `API_BASE` |
-| `@labull/ui` | `labull-framework/ui` | `ProductShell` / `ProductSide` / `ProductTabs` / `AppSearch` / `UserMenu` / `labull` 插件 |
-| `@labull/magic-block` | `labull-framework/magic-block` | `MagicBlockHost` / `MagicBlockConsole` / 清单校验 / bridge |
+| `@labull/ui` | `labull-framework/ui` | `ProductShell` / `ProductSide` / `ProductTabs` / `TabPage` / `AppSearch` / `UserMenu` / `labull` 插件，以及标签那一套：`openTab` / `activateTab` / `closeTab` / `useTabs` / `useTabContext` |
+| `@labull/magic-block` | `labull-framework/magic-block` | `MagicBlockPage`（一条路由 = 一个块，**唯一入口**） / `MagicBlockConsole` / 清单校验 / bridge |
 
 根入口 `labull-framework` = `auth` + `ui`（最常用的两层）。
 

package/dist/chunk-ProductShell.vue_vue_type_style_index_0_scoped_f78521a6_lang-qtJ-k8Ss.js

@@ -0,0 +1,118 @@
+import { reactive as y, computed as l, provide as k, inject as d } from "vue";
+import { useRouter as m } from "vue-router";
+const r = y({ tabs: [], active: "" });
+let c = null;
+function C(t) {
+  c = t;
+}
+function a(t) {
+  return typeof t == "string" && t.trim() ? t.trim() : "";
+}
+function T(t) {
+  const o = t.split("/").filter(Boolean).pop();
+  return { title: o ? decodeURIComponent(o) : "首页", icon: "pi pi-file" };
+}
+function f(t) {
+  return r.tabs.find((o) => o.key === t);
+}
+function b(t, o, n) {
+  const e = f(t);
+  if (e) {
+    const u = a(n?.title);
+    u && (e.title = u);
+    const p = a(n?.icon);
+    return p && (e.icon = p), r.active = e.key, e.key;
+  }
+  const i = T(o), s = {
+    key: t,
+    path: o,
+    title: a(n?.title) || i.title,
+    icon: a(n?.icon) || i.icon
+  };
+  return r.tabs.push(s), r.active = s.key, s.key;
+}
+function h(t, o) {
+  const n = c ? c.resolve(t) : { fullPath: t, path: t.split("?")[0] ?? t, matched: !0 };
+  if (!n.matched)
+    return console.warn(`[labull] 这个应用里没有页面 ${t}：先把它加进路由表，再开标签。`), "";
+  const e = b(n.fullPath, n.path, o);
+  return c && c.current() !== e && c.go(e), e;
+}
+function g(t) {
+  f(t) && (r.active = t, c && c.current() !== t && c.go(t));
+}
+function j(t, o, n) {
+  return b(t, o, n);
+}
+function x(t) {
+  const o = r.tabs.findIndex((i) => i.key === t);
+  if (o < 0) return "";
+  const n = r.tabs.filter((i) => i.key !== t);
+  if (r.tabs = n, r.active !== t) return "";
+  const e = n[o] ?? n[o - 1] ?? n[n.length - 1];
+  return e ? (r.active = e.key, c && c.current() !== e.key && c.go(e.key), e.key) : (r.active = "", "");
+}
+function _(t, o, n) {
+  const e = f(t);
+  if (!e) return;
+  const i = a(o);
+  i && (e.title = i);
+  const s = a(n);
+  s && (e.icon = s);
+}
+function w() {
+  return {
+    tabs: l(() => r.tabs),
+    active: l(() => r.active),
+    openTab: h,
+    activateTab: g,
+    closeTab: x
+  };
+}
+const I = (t, o) => {
+  const n = t.__vccOpts || t;
+  for (const [e, i] of o)
+    n[e] = i;
+  return n;
+}, v = "labull:tab";
+function B(t) {
+  const o = m(), { active: n } = w(), e = () => o.resolve(t.key), i = {
+    key: t.key,
+    path: t.path,
+    get params() {
+      return e().params;
+    },
+    get query() {
+      return e().query;
+    },
+    active: l(() => n.value === t.key),
+    setTitle(s, u) {
+      _(t.key, s, u);
+    }
+  };
+  return k(v, i), i;
+}
+function E() {
+  const t = d(v, null);
+  if (!t) throw new Error("[labull] 这里不在标签页里：页面与 magic block 必须放在外壳的标签内容区（标签页）里。");
+  return t;
+}
+function N(t, o) {
+  if (!o || typeof o.resolve != "function") return !1;
+  const n = o.resolve(t), e = n?.params ?? {}, i = n?.query ?? {};
+  return Object.keys(e).length > 0 || Object.keys(i).length > 0;
+}
+export {
+  v as T,
+  I as _,
+  g as a,
+  N as b,
+  x as c,
+  w as d,
+  j as f,
+  C as i,
+  h as o,
+  B as p,
+  _ as s,
+  E as u
+};