labull-framework 0.1.1 → 0.1.3

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_0fb37099_lang-BpRKKThg.js

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