@zerodep-dev/vue-tsx-pro-ui 0.2.0 → 0.3.0

package/dist/charts/single.js

@@ -1,5 +1,6 @@
+import { useDetachedRender } from "../overlay/detached.js";
 import { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
-import { render, useId } from "vue";
+import { useId } from "vue";
 import { effect } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { SingleContainer, Tooltip } from "@unovis/ts";
 //#region src/charts/single.tsx
@@ -21,12 +22,12 @@ function useSingleChart(read) {
 	const id = useId();
 	const instances = createChartInstances();
 	let tooltipElement;
+	const renderDetached = useDetachedRender();
 	let container;
 	let containerElement;
 	const seen = usePlotSeen(() => read().element);
 	effect(() => () => {
 		container?.destroy();
-		if (tooltipElement) render(null, tooltipElement);
 	});
 	effect(() => {
 		const { element, ready, tooltip, build } = read();
@@ -55,7 +56,7 @@ function useSingleChart(read) {
 	});
 	return { tooltip(content) {
 		tooltipElement ??= document.createElement("div");
-		render(content, tooltipElement);
+		renderDetached(content, tooltipElement);
 		return tooltipElement;
 	} };
 }

package/dist/charts/single.js.map

@@ -1 +1 @@
-{"version":3,"file":"single.js","names":[],"sources":["../../src/charts/single.tsx"],"sourcesContent":["/**\n * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，\n * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。\n * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。\n *\n *   const chart = useSingleChart(() => ({\n *     element: plot, ready: !loading && rows.length > 0, tooltip,\n *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),\n *   }));\n */\nimport { SingleContainer, Tooltip, type ComponentCore } from '@unovis/ts';\nimport { render, useId, type VNode } from 'vue';\nimport { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from './frame';\n\n/** 一次绘制要的东西 */\nexport interface SingleChartBuild<D> {\n  /** 配置好的组件 */\n  component: ComponentCore<D>;\n  /** 交给组件的数据 */\n  data: D;\n  /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */\n  triggers?: NonNullable<Tooltip['config']['triggers']>;\n  /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */\n  onRender?: () => void;\n}\n\n/** useSingleChart 每次读取的状态 */\nexport interface SingleChartState<D> {\n  /** 绘图区元素 */\n  element: HTMLElement | null;\n  /** 可以画了：不在加载中、有数据 */\n  ready: boolean;\n  /** 显示提示框 */\n  tooltip: boolean;\n  /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */\n  build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;\n}\n\n/** useSingleChart 的返回值 */\nexport interface SingleChart {\n  /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */\n  tooltip(content: VNode): HTMLElement;\n}\n\n/** 单容器图表的绘制 */\nexport function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart {\n  const id = useId();\n  const instances = createChartInstances();\n  let tooltipElement: HTMLElement | undefined;\n  let container: SingleContainer<D> | undefined;\n  let containerElement: HTMLElement | undefined;\n  const seen = usePlotSeen(() => read().element);\n\n  _effect(() => () => {\n    container?.destroy();\n    if (tooltipElement) render(null, tooltipElement);\n  });\n  _effect(() => {\n    const { element, ready, tooltip, build } = read();\n    if (!element || !ready || !seen()) return;\n    // 绘图区换了元素：旧容器连同组件、提示框一起销毁，实例表清空后重新创建\n    if (container && containerElement !== element) {\n      container.destroy();\n      container = undefined;\n      instances.reset();\n    }\n    const { component, data, triggers, onRender } = build(instances.get);\n    const tooltipBox = instances.get('tooltip', () => new Tooltip());\n    tooltipBox.setConfig({ triggers: triggers ?? {} });\n    const config = {\n      component,\n      tooltip: tooltip ? tooltipBox : undefined,\n      ariaLabel: null,\n      duration: chartDuration(element),\n      onRenderComplete: onRender,\n    };\n    if (container) container.update(config, undefined, data);\n    else {\n      container = new SingleContainer<D>(element, config, data);\n      containerElement = element;\n      uniqueHighlightFilter(element, `${id}-highlight`);\n    }\n  });\n\n  return {\n    tooltip(content) {\n      tooltipElement ??= document.createElement('div');\n      render(content, tooltipElement);\n      return tooltipElement;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,eAAkB,MAA8C;CAC9E,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,qBAAqB;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM,OAAO,kBAAkB,KAAK,CAAC,CAAC,OAAO;CAE7C,mBAAoB;EAClB,WAAW,QAAQ;EACnB,IAAI,gBAAgB,OAAO,MAAM,cAAc;CACjD,CAAC;CACD,aAAc;EACZ,MAAM,EAAE,SAAS,OAAO,SAAS,UAAU,KAAK;EAChD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,GAAG;EAEnC,IAAI,aAAa,qBAAqB,SAAS;GAC7C,UAAU,QAAQ;GAClB,YAAY,KAAA;GACZ,UAAU,MAAM;EAClB;EACA,MAAM,EAAE,WAAW,MAAM,UAAU,aAAa,MAAM,UAAU,GAAG;EACnE,MAAM,aAAa,UAAU,IAAI,iBAAiB,IAAI,QAAQ,CAAC;EAC/D,WAAW,UAAU,EAAE,UAAU,YAAY,CAAC,EAAE,CAAC;EACjD,MAAM,SAAS;GACb;GACA,SAAS,UAAU,aAAa,KAAA;GAChC,WAAW;GACX,UAAU,cAAc,OAAO;GAC/B,kBAAkB;EACpB;EACA,IAAI,WAAW,UAAU,OAAO,QAAQ,KAAA,GAAW,IAAI;OAClD;GACH,YAAY,IAAI,gBAAmB,SAAS,QAAQ,IAAI;GACxD,mBAAmB;GACnB,sBAAsB,SAAS,GAAG,GAAE,WAAY;EAClD;CACF,CAAC;CAED,OAAO,EACL,QAAQ,SAAS;EACf,mBAAmB,SAAS,cAAc,KAAK;EAC/C,OAAO,SAAS,cAAc;EAC9B,OAAO;CACT,EACF;AACF"}
+{"version":3,"file":"single.js","names":[],"sources":["../../src/charts/single.tsx"],"sourcesContent":["/**\n * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，\n * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。\n * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。\n *\n *   const chart = useSingleChart(() => ({\n *     element: plot, ready: !loading && rows.length > 0, tooltip,\n *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),\n *   }));\n */\nimport { SingleContainer, Tooltip, type ComponentCore } from '@unovis/ts';\nimport { useId, type VNode } from 'vue';\nimport { useDetachedRender } from '../overlay/detached';\nimport { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from './frame';\n\n/** 一次绘制要的东西 */\nexport interface SingleChartBuild<D> {\n  /** 配置好的组件 */\n  component: ComponentCore<D>;\n  /** 交给组件的数据 */\n  data: D;\n  /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */\n  triggers?: NonNullable<Tooltip['config']['triggers']>;\n  /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */\n  onRender?: () => void;\n}\n\n/** useSingleChart 每次读取的状态 */\nexport interface SingleChartState<D> {\n  /** 绘图区元素 */\n  element: HTMLElement | null;\n  /** 可以画了：不在加载中、有数据 */\n  ready: boolean;\n  /** 显示提示框 */\n  tooltip: boolean;\n  /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */\n  build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;\n}\n\n/** useSingleChart 的返回值 */\nexport interface SingleChart {\n  /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */\n  tooltip(content: VNode): HTMLElement;\n}\n\n/** 单容器图表的绘制 */\nexport function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart {\n  const id = useId();\n  const instances = createChartInstances();\n  let tooltipElement: HTMLElement | undefined;\n  // 提示框的内容渲染进 Unovis 管的元素：带上调用处的主题与语言，组件卸载时一起卸载\n  const renderDetached = useDetachedRender();\n  let container: SingleContainer<D> | undefined;\n  let containerElement: HTMLElement | undefined;\n  const seen = usePlotSeen(() => read().element);\n\n  _effect(() => () => {\n    container?.destroy();\n  });\n  _effect(() => {\n    const { element, ready, tooltip, build } = read();\n    if (!element || !ready || !seen()) return;\n    // 绘图区换了元素：旧容器连同组件、提示框一起销毁，实例表清空后重新创建\n    if (container && containerElement !== element) {\n      container.destroy();\n      container = undefined;\n      instances.reset();\n    }\n    const { component, data, triggers, onRender } = build(instances.get);\n    const tooltipBox = instances.get('tooltip', () => new Tooltip());\n    tooltipBox.setConfig({ triggers: triggers ?? {} });\n    const config = {\n      component,\n      tooltip: tooltip ? tooltipBox : undefined,\n      ariaLabel: null,\n      duration: chartDuration(element),\n      onRenderComplete: onRender,\n    };\n    if (container) container.update(config, undefined, data);\n    else {\n      container = new SingleContainer<D>(element, config, data);\n      containerElement = element;\n      uniqueHighlightFilter(element, `${id}-highlight`);\n    }\n  });\n\n  return {\n    tooltip(content) {\n      tooltipElement ??= document.createElement('div');\n      renderDetached(content, tooltipElement);\n      return tooltipElement;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,eAAkB,MAA8C;CAC9E,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,qBAAqB;CACvC,IAAI;CAEJ,MAAM,iBAAiB,kBAAkB;CACzC,IAAI;CACJ,IAAI;CACJ,MAAM,OAAO,kBAAkB,KAAK,CAAC,CAAC,OAAO;CAE7C,mBAAoB;EAClB,WAAW,QAAQ;CACrB,CAAC;CACD,aAAc;EACZ,MAAM,EAAE,SAAS,OAAO,SAAS,UAAU,KAAK;EAChD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,GAAG;EAEnC,IAAI,aAAa,qBAAqB,SAAS;GAC7C,UAAU,QAAQ;GAClB,YAAY,KAAA;GACZ,UAAU,MAAM;EAClB;EACA,MAAM,EAAE,WAAW,MAAM,UAAU,aAAa,MAAM,UAAU,GAAG;EACnE,MAAM,aAAa,UAAU,IAAI,iBAAiB,IAAI,QAAQ,CAAC;EAC/D,WAAW,UAAU,EAAE,UAAU,YAAY,CAAC,EAAE,CAAC;EACjD,MAAM,SAAS;GACb;GACA,SAAS,UAAU,aAAa,KAAA;GAChC,WAAW;GACX,UAAU,cAAc,OAAO;GAC/B,kBAAkB;EACpB;EACA,IAAI,WAAW,UAAU,OAAO,QAAQ,KAAA,GAAW,IAAI;OAClD;GACH,YAAY,IAAI,gBAAmB,SAAS,QAAQ,IAAI;GACxD,mBAAmB;GACnB,sBAAsB,SAAS,GAAG,GAAE,WAAY;EAClD;CACF,CAAC;CAED,OAAO,EACL,QAAQ,SAAS;EACf,mBAAmB,SAAS,cAAc,KAAK;EAC/C,eAAe,SAAS,cAAc;EACtC,OAAO;CACT,EACF;AACF"}

package/dist/config/Provider.d.ts

@@ -1,6 +1,6 @@
 import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
-import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import { type Highlighter, type TextMatcher, type UiPermissions, type UiRouter } from './context';
 import { type ComponentDefaults } from './defaults';
 import { type ComponentStyles } from './styles';
 import { type Lang } from './lang/lang';
@@ -23,6 +23,8 @@ export interface ProviderProps {
     styles?: ComponentStyles;
     /** 路由适配；不写时沿用上层配置 */
     router?: UiRouter;
+    /** 权限判断；不写时沿用上层配置 */
+    permissions?: UiPermissions;
     /** 请求客户端；不写时沿用上层配置 */
     http?: HttpClient;
     /** 工作日历；不写时沿用上层配置 */

package/dist/config/Provider.js

@@ -4,8 +4,8 @@ import { mergeStyles } from "./styles.js";
 import { resolveTheme, themeAttrs } from "./theme/theme.js";
 import { usePrefersDark } from "../utils/dom/media-query.js";
 import { defineLang } from "./lang/lang.js";
-import { computed, createVNode, mergeProps } from "vue";
-import { _component, childrenProp, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/config/Provider.tsx
 /** 局部配置；都不写时只是透明的容器，沿用上层配置 */
@@ -31,6 +31,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 	const defaults = readonlyProp(_props, "defaults");
 	const styles = readonlyProp(_props, "styles");
 	const router = readonlyProp(_props, "router");
+	const permissions = readonlyProp(_props, "permissions");
 	const http = readonlyProp(_props, "http");
 	const workCalendar = readonlyProp(_props, "workCalendar");
 	const ripple = readonlyProp(_props, "ripple");
@@ -63,6 +64,9 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 		get router() {
 			return router.value ?? parent.router;
 		},
+		get permissions() {
+			return permissions.value ?? parent.permissions;
+		},
 		get http() {
 			return http.value ?? parent.http;
 		},
@@ -73,7 +77,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 			return ripple.value ?? parent.ripple;
 		}
 	});
-	return () => createVNode("div", mergeProps(theme.value ? themeAttrs(currentTheme.value) : {}, css.attrs(providerStyles.root, theme.value != null && providerStyles.themed), {
+	return () => createVNode("div", mergeJsxProps(theme.value ? themeAttrs(currentTheme.value) : {}, css.attrs(providerStyles.root, theme.value != null && providerStyles.themed), {
 		"lang": currentLang.value.code,
 		"dir": currentLang.value.direction
 	}), [children.value]);
@@ -87,6 +91,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 		"defaults",
 		"styles",
 		"router",
+		"permissions",
 		"http",
 		"workCalendar",
 		"ripple"
@@ -100,7 +105,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 var ConfigScope = /*#__PURE__*/ _component((_props2, _ctx2) => {
 	const children = childrenProp(_props2);
 	const config = useConfig();
-	return () => createVNode("div", mergeProps(themeAttrs(config.theme), css.attrs(providerStyles.root, providerStyles.themed), {
+	return () => createVNode("div", mergeJsxProps(themeAttrs(config.theme), css.attrs(providerStyles.root, providerStyles.themed), {
 		"lang": config.lang.code,
 		"dir": config.lang.direction
 	}), [children.value]);

package/dist/config/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/config/Provider.tsx"],"sourcesContent":["import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  ConfigContext,\n  useConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiRouter,\n} from './context';\nimport { mergeDefaults, type ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeAttrs, type ThemeInput } from './theme/theme';\n\n/** 局部配置；都不写时只是透明的容器，沿用上层配置 */\nexport interface ProviderProps {\n  /** 主题；不写时沿用上层配置 */\n  theme?: ThemeInput;\n  /** 语言；只写要改的字段，其余沿用上层配置 */\n  lang?: Partial<Lang>;\n  /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；不写时沿用上层配置 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值：按组件逐个与上层合并，只写要改的 */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配；不写时沿用上层配置 */\n  router?: UiRouter;\n  /** 请求客户端；不写时沿用上层配置 */\n  http?: HttpClient;\n  /** 工作日历；不写时沿用上层配置 */\n  workCalendar?: WorkCalendar;\n  /** 波纹效果的开关；不写时沿用上层配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Provider 的样式：root、themed */\nexport const providerStyles = css.create({\n  // 不产生盒子，不影响布局；主题变量与文字样式照常由子元素继承\n  root: { display: 'contents' },\n  themed: {\n    color: '_text',\n    fontFamily: '_sans',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n});\n\n/**\n * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。\n * 应用级配置见 createUi。\n */\nexport const Provider = _component(\n  ({\n    theme,\n    lang,\n    highlighter,\n    textMatcher,\n    defaults,\n    styles,\n    router,\n    http,\n    workCalendar,\n    ripple,\n    children,\n  }: ProviderProps) => {\n    const parent = useConfig();\n    const prefersDark = usePrefersDark();\n    const currentTheme = _derived(theme ? resolveTheme(theme, prefersDark.value) : parent.theme);\n    const currentLang = _derived(lang ? defineLang(parent.lang, lang) : parent.lang);\n    const currentDefaults = _derived(mergeDefaults(parent.defaults, defaults));\n    const currentStyles = _derived(mergeStyles(parent.styles, styles));\n    ConfigContext.provide({\n      get theme() {\n        return currentTheme;\n      },\n      get lang() {\n        return currentLang;\n      },\n      get highlighter() {\n        return highlighter ?? parent.highlighter;\n      },\n      get textMatcher() {\n        return textMatcher ?? parent.textMatcher;\n      },\n      get defaults() {\n        return currentDefaults;\n      },\n      get styles() {\n        return currentStyles;\n      },\n      get router() {\n        return router ?? parent.router;\n      },\n      get http() {\n        return http ?? parent.http;\n      },\n      get workCalendar() {\n        return workCalendar ?? parent.workCalendar;\n      },\n      get ripple() {\n        return ripple ?? parent.ripple;\n      },\n    });\n\n    return () => (\n      <div\n        {...(theme ? themeAttrs(currentTheme) : {})}\n        {...css.attrs(providerStyles.root, theme != null && providerStyles.themed)}\n        lang={currentLang.code}\n        dir={currentLang.direction}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** ConfigScope 的 props */\nexport interface ConfigScopeProps {\n  children?: VNodeChild;\n}\n\n/**\n * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：\n * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。\n */\nexport const ConfigScope = _component(({ children }: ConfigScopeProps) => {\n  const config = useConfig();\n  return () => (\n    <div\n      {...themeAttrs(config.theme)}\n      {...css.attrs(providerStyles.root, providerStyles.themed)}\n      lang={config.lang.code}\n      dir={config.lang.direction}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM,EAAE,SAAS,WAAW;CAC5B,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;CACd;AACF,CAAC;;;;;AAMD,IAAa,WAAW,0BACtB,QAAA,SAYqB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAYC,eAAY,MAAA,QAAQ,aAAY,MAAA,OAAQ,YAAY,KAAK,IAAI,OAAO,KAAK;CAC3F,MAAM,cAAWA,eAAY,KAAA,QAAO,WAAW,OAAO,MAAI,KAAA,KAAM,IAAI,OAAO,IAAI;CAC/E,MAAM,kBAAeA,eAAY,cAAc,OAAO,UAAQ,SAAA,KAAU,CAAC;CACzE,MAAM,gBAAaA,eAAY,YAAY,OAAO,QAAM,OAAA,KAAQ,CAAC;CACjE,cAAc,QAAQ;EACpB,IAAI,QAAQ;GACV,OAAA,aAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,YAAA;EACF;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,WAAW;GACb,OAAA,gBAAA;EACF;EACA,IAAI,SAAS;GACX,OAAA,cAAA;EACF;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;EACA,IAAI,OAAO;GACT,OAAO,KAAA,SAAQ,OAAO;EACxB;EACA,IAAI,eAAe;GACjB,OAAO,aAAA,SAAgB,OAAO;EAChC;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;CACF,CAAC;CAED,aAAOC,YAAA,OAAAC,WAEE,MAAA,QAAQ,WAAU,aAAA,KAAa,IAAI,CAAC,GACrC,IAAI,MAAM,eAAe,MAAM,MAAA,SAAS,QAAQ,eAAe,MAAM,GAAC;EAAA,QACpE,YAAA,MAAY;EAAI,OACjB,YAAA,MAAY;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAWA,IAAa,cAAc,0BAAW,SAAA,UAAoC;CAAA,MAAA,WAAAH,aAAA,OAAA;CACxE,MAAM,SAAS,UAAU;CACzB,aAAOE,YAAA,OAAAC,WAEC,WAAW,OAAO,KAAK,GACvB,IAAI,MAAM,eAAe,MAAM,eAAe,MAAM,GAAC;EAAA,QACnD,OAAO,KAAK;EAAI,OACjB,OAAO,KAAK;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC,EAAA,MAAA,cAAA,CAAA"}
+{"version":3,"file":"Provider.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/config/Provider.tsx"],"sourcesContent":["import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  ConfigContext,\n  useConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiPermissions,\n  type UiRouter,\n} from './context';\nimport { mergeDefaults, type ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeAttrs, type ThemeInput } from './theme/theme';\n\n/** 局部配置；都不写时只是透明的容器，沿用上层配置 */\nexport interface ProviderProps {\n  /** 主题；不写时沿用上层配置 */\n  theme?: ThemeInput;\n  /** 语言；只写要改的字段，其余沿用上层配置 */\n  lang?: Partial<Lang>;\n  /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；不写时沿用上层配置 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值：按组件逐个与上层合并，只写要改的 */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配；不写时沿用上层配置 */\n  router?: UiRouter;\n  /** 权限判断；不写时沿用上层配置 */\n  permissions?: UiPermissions;\n  /** 请求客户端；不写时沿用上层配置 */\n  http?: HttpClient;\n  /** 工作日历；不写时沿用上层配置 */\n  workCalendar?: WorkCalendar;\n  /** 波纹效果的开关；不写时沿用上层配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Provider 的样式：root、themed */\nexport const providerStyles = css.create({\n  // 不产生盒子，不影响布局；主题变量与文字样式照常由子元素继承\n  root: { display: 'contents' },\n  themed: {\n    color: '_text',\n    fontFamily: '_sans',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n});\n\n/**\n * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。\n * 应用级配置见 createUi。\n */\nexport const Provider = _component(\n  ({\n    theme,\n    lang,\n    highlighter,\n    textMatcher,\n    defaults,\n    styles,\n    router,\n    permissions,\n    http,\n    workCalendar,\n    ripple,\n    children,\n  }: ProviderProps) => {\n    const parent = useConfig();\n    const prefersDark = usePrefersDark();\n    const currentTheme = _derived(theme ? resolveTheme(theme, prefersDark.value) : parent.theme);\n    const currentLang = _derived(lang ? defineLang(parent.lang, lang) : parent.lang);\n    const currentDefaults = _derived(mergeDefaults(parent.defaults, defaults));\n    const currentStyles = _derived(mergeStyles(parent.styles, styles));\n    ConfigContext.provide({\n      get theme() {\n        return currentTheme;\n      },\n      get lang() {\n        return currentLang;\n      },\n      get highlighter() {\n        return highlighter ?? parent.highlighter;\n      },\n      get textMatcher() {\n        return textMatcher ?? parent.textMatcher;\n      },\n      get defaults() {\n        return currentDefaults;\n      },\n      get styles() {\n        return currentStyles;\n      },\n      get router() {\n        return router ?? parent.router;\n      },\n      get permissions() {\n        return permissions ?? parent.permissions;\n      },\n      get http() {\n        return http ?? parent.http;\n      },\n      get workCalendar() {\n        return workCalendar ?? parent.workCalendar;\n      },\n      get ripple() {\n        return ripple ?? parent.ripple;\n      },\n    });\n\n    return () => (\n      <div\n        {...(theme ? themeAttrs(currentTheme) : {})}\n        {...css.attrs(providerStyles.root, theme != null && providerStyles.themed)}\n        lang={currentLang.code}\n        dir={currentLang.direction}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** ConfigScope 的 props */\nexport interface ConfigScopeProps {\n  children?: VNodeChild;\n}\n\n/**\n * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：\n * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。\n */\nexport const ConfigScope = _component(({ children }: ConfigScopeProps) => {\n  const config = useConfig();\n  return () => (\n    <div\n      {...themeAttrs(config.theme)}\n      {...css.attrs(providerStyles.root, providerStyles.themed)}\n      lang={config.lang.code}\n      dir={config.lang.direction}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA+CA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM,EAAE,SAAS,WAAW;CAC5B,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;CACd;AACF,CAAC;;;;;AAMD,IAAa,WAAW,0BACtB,QAAA,SAaqB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAYC,eAAY,MAAA,QAAQ,aAAY,MAAA,OAAQ,YAAY,KAAK,IAAI,OAAO,KAAK;CAC3F,MAAM,cAAWA,eAAY,KAAA,QAAO,WAAW,OAAO,MAAI,KAAA,KAAM,IAAI,OAAO,IAAI;CAC/E,MAAM,kBAAeA,eAAY,cAAc,OAAO,UAAQ,SAAA,KAAU,CAAC;CACzE,MAAM,gBAAaA,eAAY,YAAY,OAAO,QAAM,OAAA,KAAQ,CAAC;CACjE,cAAc,QAAQ;EACpB,IAAI,QAAQ;GACV,OAAA,aAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,YAAA;EACF;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,WAAW;GACb,OAAA,gBAAA;EACF;EACA,IAAI,SAAS;GACX,OAAA,cAAA;EACF;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,OAAO;GACT,OAAO,KAAA,SAAQ,OAAO;EACxB;EACA,IAAI,eAAe;GACjB,OAAO,aAAA,SAAgB,OAAO;EAChC;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;CACF,CAAC;CAED,aAAOC,YAAA,OAAAC,cAEE,MAAA,QAAQ,WAAU,aAAA,KAAa,IAAI,CAAC,GACrC,IAAI,MAAM,eAAe,MAAM,MAAA,SAAS,QAAQ,eAAe,MAAM,GAAC;EAAA,QACpE,YAAA,MAAY;EAAI,OACjB,YAAA,MAAY;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAWA,IAAa,cAAc,0BAAW,SAAA,UAAoC;CAAA,MAAA,WAAAH,aAAA,OAAA;CACxE,MAAM,SAAS,UAAU;CACzB,aAAOE,YAAA,OAAAC,cAEC,WAAW,OAAO,KAAK,GACvB,IAAI,MAAM,eAAe,MAAM,eAAe,MAAM,GAAC;EAAA,QACnD,OAAO,KAAK;EAAI,OACjB,OAAO,KAAK;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC,EAAA,MAAA,cAAA,CAAA"}

package/dist/config/context.d.ts

@@ -45,6 +45,14 @@ export interface UiRouter {
      */
     replaceQuery?: (patch: QueryPatch) => void;
 }
+/**
+ * 权限判断：用户有没有这个权限点。组件库不知道权限从哪来（后端返回的权限点、角色…），由应用接入：
+ *
+ *   createUi({ permissions: (permission) => access.can(permission) })
+ *
+ * 在渲染时调用，读响应式状态就能跟随变化（登录、退出、换角色后界面随之更新）。用 Can、useCan 控制界面。
+ */
+export type UiPermissions = (permission: string) => boolean;
 /** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */
 export type QueryValues = Readonly<Record<string, string | readonly string[]>>;
 /** 要改的查询参数：undefined 是删掉 */
@@ -65,6 +73,8 @@ export interface UiConfig {
     readonly styles: StyleLayers;
     /** 路由适配；没有时链接就是普通的页面跳转 */
     readonly router?: UiRouter;
+    /** 权限判断；没有时 useCan、Can 一律放行 */
+    readonly permissions?: UiPermissions;
     /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */
     readonly http?: HttpClient;
     /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */
@@ -88,3 +98,11 @@ export declare function useLang(): Lang;
  * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）
  */
 export declare function useTextMatcher(): () => TextMatcher;
+/**
+ * 当前配置下的权限判断（在 setup 里调用）：返回 can(权限点)，给数组时有其中任意一个就算有。
+ * createUi / Provider 没给 permissions 时一律放行（没有权限体系的应用不受影响）。返回的函数在渲染、计算里调用才跟随变化。
+ *
+ *   const can = useCan();
+ *   <Button disabled={!can('cost:project:add')}>新建</Button>
+ */
+export declare function useCan(): (permission: string | readonly string[]) => boolean;

package/dist/config/context.js

@@ -52,7 +52,22 @@ function useTextMatcher() {
 		return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;
 	};
 }
+/**
+* 当前配置下的权限判断（在 setup 里调用）：返回 can(权限点)，给数组时有其中任意一个就算有。
+* createUi / Provider 没给 permissions 时一律放行（没有权限体系的应用不受影响）。返回的函数在渲染、计算里调用才跟随变化。
+*
+*   const can = useCan();
+*   <Button disabled={!can('cost:project:add')}>新建</Button>
+*/
+function useCan() {
+	const config = useConfig();
+	return (permission) => {
+		const has = config.permissions;
+		if (!has) return true;
+		return typeof permission === "string" ? has(permission) : permission.some((item) => has(item));
+	};
+}
 //#endregion
-export { ConfigContext, defaultConfig, useConfig, useLang, useTextMatcher };
+export { ConfigContext, defaultConfig, useCan, useConfig, useLang, useTextMatcher };
 
 //# sourceMappingURL=context.js.map

package/dist/config/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/config/context.ts"],"sourcesContent":["/**\n * 组件库配置（主题与语言）的上下文：应用级由 createUi 提供，局部由 <Provider> 覆盖；\n * 都没有时使用默认值（亮色主题 + 简体中文），组件单独使用也能工作。\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { createMatcher } from '../utils/data/collation';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport type { ComponentDefaults } from './defaults';\nimport type { StyleLayers } from './styles';\nimport type { Lang } from './lang/lang';\nimport { zhCN } from './lang/zh-CN';\nimport { lightTheme } from './theme/light';\nimport type { Theme } from './theme/theme';\n\n/**\n * 代码高亮器：代码 + 语言 → 高亮后的行内 HTML（只含 span 与换行的 br，不含 pre、code），交给 CodeBlock。\n * 组件库不依赖具体实现；Shiki 的实现见子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter。\n * 返回的 HTML 直接写进页面，实现方负责转义代码里的文字。\n */\nexport type Highlighter = (code: string, lang: string) => Promise<string>;\n\n/**\n * 额外的文字匹配：选项过滤、命令面板、树的搜索在内置匹配（忽略大小写与重音的包含）之外再试它，任一命中就算。\n * 拼音匹配见子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher\n */\nexport type TextMatcher = (text: string, query: string) => boolean;\n\n/**\n * 路由适配（参考 React Aria 的 RouterProvider 与 useHref）：组件库不依赖具体的路由库。\n * Link、LinkButton、导航组件渲染的仍是 <a href>；普通左键点击站内链接时改由 navigate 跳转（不刷新页面），\n * 新窗口打开、按着修饰键、外部链接、下载照常交给浏览器。\n *\n *   createUi({ router: { navigate: (href) => router.push(href), isActive: (href) => route.path === href } })\n */\nexport interface UiRouter {\n  /** 站内跳转；收到的是组件上写的原文（/orders），不是 resolve 之后的地址 */\n  navigate: (href: string) => void;\n  /**\n   * 站内链接渲染到 <a href> 上的真实地址：补上路由的 base（/admin/orders）、hash 模式的 #（#/orders），\n   * 新标签页打开、复制链接才对。不写时原样渲染\n   */\n  resolve?: (href: string) => string;\n  /** href 是不是当前页：导航组件据此加 aria-current=\"page\"。在渲染时调用，读路由的响应式状态就能跟随变化 */\n  isActive?: (href: string) => boolean;\n  /**\n   * 站内跳转之前问一下（useLeaveConfirmation 用）：guard 返回 false（或 resolve 成 false）时不跳转；返回注销函数。\n   * 只在路径变了时问，同一页里换 query、锚点不问\n   */\n  beforeLeave?: (guard: () => boolean | Promise<boolean>) => () => void;\n  /** 当前地址的查询参数（useQueryState 用）；读路由的响应式状态，在 watch、渲染里读能跟随变化 */\n  query?: () => QueryValues;\n  /**\n   * 改当前地址的查询参数（replace，不加历史记录）：patch 里的键覆盖，值为 undefined 的删掉，其余不动。\n   * 同一轮里调用几次要合并成一次跳转（各状态分别写入时互不覆盖）\n   */\n  replaceQuery?: (patch: QueryPatch) => void;\n}\n\n/** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */\nexport type QueryValues = Readonly<Record<string, string | readonly string[]>>;\n\n/** 要改的查询参数：undefined 是删掉 */\nexport type QueryPatch = Readonly<Record<string, string | readonly string[] | undefined>>;\n\n/** 提供方用 getter 暴露当前值，读取方在渲染或 computed 里读取即可跟随变化 */\nexport interface UiConfig {\n  /** 当前主题（明暗已按系统设置选定） */\n  readonly theme: Theme;\n  /** 当前语言：地区格式与界面文案 */\n  readonly lang: Lang;\n  /** 代码高亮器；没有时 CodeBlock 显示纯文本 */\n  readonly highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；没有时只按字面匹配 */\n  readonly textMatcher?: TextMatcher;\n  /** 组件默认值（见 defaults.ts） */\n  readonly defaults: ComponentDefaults;\n  /** 组件的主题定制，外层在前（见 styles.ts） */\n  readonly styles: StyleLayers;\n  /** 路由适配；没有时链接就是普通的页面跳转 */\n  readonly router?: UiRouter;\n  /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */\n  readonly http?: HttpClient;\n  /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */\n  readonly workCalendar?: WorkCalendar;\n  /** 可点击组件按下时的波纹效果，默认开启；组件的 ripple prop 可以单独覆盖 */\n  readonly ripple: boolean;\n}\n\n/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */\nexport const ConfigContext = createContext<UiConfig>('Provider');\n\n/** 默认配置：亮色主题 + 简体中文 */\nexport const defaultConfig: UiConfig = {\n  theme: lightTheme,\n  lang: zhCN,\n  defaults: {},\n  styles: {},\n  ripple: true,\n};\n\n/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */\nexport function useConfig(): UiConfig {\n  return ConfigContext.inject(defaultConfig);\n}\n\n/**\n * 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。\n * 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。\n */\nexport function useLang(): Lang {\n  const config = useConfig();\n  // 所有读取都转发到当前语言，展开与 Object.keys 也能拿到完整字段\n  return new Proxy({} as Lang, {\n    get: (_, key) => Reflect.get(config.lang, key),\n    has: (_, key) => Reflect.has(config.lang, key),\n    ownKeys: () => Reflect.ownKeys(config.lang),\n    getOwnPropertyDescriptor: (_, key) => {\n      const descriptor = Reflect.getOwnPropertyDescriptor(config.lang, key);\n      return descriptor && { ...descriptor, configurable: true };\n    },\n  });\n}\n\n/**\n * 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。\n * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）\n */\nexport function useTextMatcher(): () => TextMatcher {\n  const config = useConfig();\n  return () => {\n    const builtin = createMatcher(config.lang.code);\n    const extra = config.textMatcher;\n    return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;\n  };\n}\n"],"mappings":";;;;;;;;;;AA0FA,IAAa,gBAAgB,cAAwB,UAAU;;AAG/D,IAAa,gBAA0B;CACrC,OAAO;CACP,MAAM;CACN,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,QAAQ;AACV;;AAGA,SAAgB,YAAsB;CACpC,OAAO,cAAc,OAAO,aAAa;AAC3C;;;;;AAMA,SAAgB,UAAgB;CAC9B,MAAM,SAAS,UAAU;CAEzB,OAAO,IAAI,MAAM,CAAC,GAAW;EAC3B,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,eAAe,QAAQ,QAAQ,OAAO,IAAI;EAC1C,2BAA2B,GAAG,QAAQ;GACpC,MAAM,aAAa,QAAQ,yBAAyB,OAAO,MAAM,GAAG;GACpE,OAAO,cAAc;IAAE,GAAG;IAAY,cAAc;GAAK;EAC3D;CACF,CAAC;AACH;;;;;AAMA,SAAgB,iBAAoC;CAClD,MAAM,SAAS,UAAU;CACzB,aAAa;EACX,MAAM,UAAU,cAAc,OAAO,KAAK,IAAI;EAC9C,MAAM,QAAQ,OAAO;EACrB,OAAO,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK,KAAK,MAAM,MAAM,KAAK,IAAI;CAC/E;AACF"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/config/context.ts"],"sourcesContent":["/**\n * 组件库配置（主题与语言）的上下文：应用级由 createUi 提供，局部由 <Provider> 覆盖；\n * 都没有时使用默认值（亮色主题 + 简体中文），组件单独使用也能工作。\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { createMatcher } from '../utils/data/collation';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport type { ComponentDefaults } from './defaults';\nimport type { StyleLayers } from './styles';\nimport type { Lang } from './lang/lang';\nimport { zhCN } from './lang/zh-CN';\nimport { lightTheme } from './theme/light';\nimport type { Theme } from './theme/theme';\n\n/**\n * 代码高亮器：代码 + 语言 → 高亮后的行内 HTML（只含 span 与换行的 br，不含 pre、code），交给 CodeBlock。\n * 组件库不依赖具体实现；Shiki 的实现见子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter。\n * 返回的 HTML 直接写进页面，实现方负责转义代码里的文字。\n */\nexport type Highlighter = (code: string, lang: string) => Promise<string>;\n\n/**\n * 额外的文字匹配：选项过滤、命令面板、树的搜索在内置匹配（忽略大小写与重音的包含）之外再试它，任一命中就算。\n * 拼音匹配见子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher\n */\nexport type TextMatcher = (text: string, query: string) => boolean;\n\n/**\n * 路由适配（参考 React Aria 的 RouterProvider 与 useHref）：组件库不依赖具体的路由库。\n * Link、LinkButton、导航组件渲染的仍是 <a href>；普通左键点击站内链接时改由 navigate 跳转（不刷新页面），\n * 新窗口打开、按着修饰键、外部链接、下载照常交给浏览器。\n *\n *   createUi({ router: { navigate: (href) => router.push(href), isActive: (href) => route.path === href } })\n */\nexport interface UiRouter {\n  /** 站内跳转；收到的是组件上写的原文（/orders），不是 resolve 之后的地址 */\n  navigate: (href: string) => void;\n  /**\n   * 站内链接渲染到 <a href> 上的真实地址：补上路由的 base（/admin/orders）、hash 模式的 #（#/orders），\n   * 新标签页打开、复制链接才对。不写时原样渲染\n   */\n  resolve?: (href: string) => string;\n  /** href 是不是当前页：导航组件据此加 aria-current=\"page\"。在渲染时调用，读路由的响应式状态就能跟随变化 */\n  isActive?: (href: string) => boolean;\n  /**\n   * 站内跳转之前问一下（useLeaveConfirmation 用）：guard 返回 false（或 resolve 成 false）时不跳转；返回注销函数。\n   * 只在路径变了时问，同一页里换 query、锚点不问\n   */\n  beforeLeave?: (guard: () => boolean | Promise<boolean>) => () => void;\n  /** 当前地址的查询参数（useQueryState 用）；读路由的响应式状态，在 watch、渲染里读能跟随变化 */\n  query?: () => QueryValues;\n  /**\n   * 改当前地址的查询参数（replace，不加历史记录）：patch 里的键覆盖，值为 undefined 的删掉，其余不动。\n   * 同一轮里调用几次要合并成一次跳转（各状态分别写入时互不覆盖）\n   */\n  replaceQuery?: (patch: QueryPatch) => void;\n}\n\n/**\n * 权限判断：用户有没有这个权限点。组件库不知道权限从哪来（后端返回的权限点、角色…），由应用接入：\n *\n *   createUi({ permissions: (permission) => access.can(permission) })\n *\n * 在渲染时调用，读响应式状态就能跟随变化（登录、退出、换角色后界面随之更新）。用 Can、useCan 控制界面。\n */\nexport type UiPermissions = (permission: string) => boolean;\n\n/** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */\nexport type QueryValues = Readonly<Record<string, string | readonly string[]>>;\n\n/** 要改的查询参数：undefined 是删掉 */\nexport type QueryPatch = Readonly<Record<string, string | readonly string[] | undefined>>;\n\n/** 提供方用 getter 暴露当前值，读取方在渲染或 computed 里读取即可跟随变化 */\nexport interface UiConfig {\n  /** 当前主题（明暗已按系统设置选定） */\n  readonly theme: Theme;\n  /** 当前语言：地区格式与界面文案 */\n  readonly lang: Lang;\n  /** 代码高亮器；没有时 CodeBlock 显示纯文本 */\n  readonly highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；没有时只按字面匹配 */\n  readonly textMatcher?: TextMatcher;\n  /** 组件默认值（见 defaults.ts） */\n  readonly defaults: ComponentDefaults;\n  /** 组件的主题定制，外层在前（见 styles.ts） */\n  readonly styles: StyleLayers;\n  /** 路由适配；没有时链接就是普通的页面跳转 */\n  readonly router?: UiRouter;\n  /** 权限判断；没有时 useCan、Can 一律放行 */\n  readonly permissions?: UiPermissions;\n  /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */\n  readonly http?: HttpClient;\n  /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */\n  readonly workCalendar?: WorkCalendar;\n  /** 可点击组件按下时的波纹效果，默认开启；组件的 ripple prop 可以单独覆盖 */\n  readonly ripple: boolean;\n}\n\n/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */\nexport const ConfigContext = createContext<UiConfig>('Provider');\n\n/** 默认配置：亮色主题 + 简体中文 */\nexport const defaultConfig: UiConfig = {\n  theme: lightTheme,\n  lang: zhCN,\n  defaults: {},\n  styles: {},\n  ripple: true,\n};\n\n/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */\nexport function useConfig(): UiConfig {\n  return ConfigContext.inject(defaultConfig);\n}\n\n/**\n * 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。\n * 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。\n */\nexport function useLang(): Lang {\n  const config = useConfig();\n  // 所有读取都转发到当前语言，展开与 Object.keys 也能拿到完整字段\n  return new Proxy({} as Lang, {\n    get: (_, key) => Reflect.get(config.lang, key),\n    has: (_, key) => Reflect.has(config.lang, key),\n    ownKeys: () => Reflect.ownKeys(config.lang),\n    getOwnPropertyDescriptor: (_, key) => {\n      const descriptor = Reflect.getOwnPropertyDescriptor(config.lang, key);\n      return descriptor && { ...descriptor, configurable: true };\n    },\n  });\n}\n\n/**\n * 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。\n * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）\n */\nexport function useTextMatcher(): () => TextMatcher {\n  const config = useConfig();\n  return () => {\n    const builtin = createMatcher(config.lang.code);\n    const extra = config.textMatcher;\n    return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;\n  };\n}\n\n/**\n * 当前配置下的权限判断（在 setup 里调用）：返回 can(权限点)，给数组时有其中任意一个就算有。\n * createUi / Provider 没给 permissions 时一律放行（没有权限体系的应用不受影响）。返回的函数在渲染、计算里调用才跟随变化。\n *\n *   const can = useCan();\n *   <Button disabled={!can('cost:project:add')}>新建</Button>\n */\nexport function useCan(): (permission: string | readonly string[]) => boolean {\n  const config = useConfig();\n  return (permission) => {\n    const has = config.permissions;\n    if (!has) return true;\n    return typeof permission === 'string' ? has(permission) : permission.some((item) => has(item));\n  };\n}\n"],"mappings":";;;;;;;;;;AAqGA,IAAa,gBAAgB,cAAwB,UAAU;;AAG/D,IAAa,gBAA0B;CACrC,OAAO;CACP,MAAM;CACN,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,QAAQ;AACV;;AAGA,SAAgB,YAAsB;CACpC,OAAO,cAAc,OAAO,aAAa;AAC3C;;;;;AAMA,SAAgB,UAAgB;CAC9B,MAAM,SAAS,UAAU;CAEzB,OAAO,IAAI,MAAM,CAAC,GAAW;EAC3B,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,eAAe,QAAQ,QAAQ,OAAO,IAAI;EAC1C,2BAA2B,GAAG,QAAQ;GACpC,MAAM,aAAa,QAAQ,yBAAyB,OAAO,MAAM,GAAG;GACpE,OAAO,cAAc;IAAE,GAAG;IAAY,cAAc;GAAK;EAC3D;CACF,CAAC;AACH;;;;;AAMA,SAAgB,iBAAoC;CAClD,MAAM,SAAS,UAAU;CACzB,aAAa;EACX,MAAM,UAAU,cAAc,OAAO,KAAK,IAAI;EAC9C,MAAM,QAAQ,OAAO;EACrB,OAAO,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK,KAAK,MAAM,MAAM,KAAK,IAAI;CAC/E;AACF;;;;;;;;AASA,SAAgB,SAA8D;CAC5E,MAAM,SAAS,UAAU;CACzB,QAAQ,eAAe;EACrB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK,OAAO;EACjB,OAAO,OAAO,eAAe,WAAW,IAAI,UAAU,IAAI,WAAW,MAAM,SAAS,IAAI,IAAI,CAAC;CAC/F;AACF"}

package/dist/config/createUi.d.ts

@@ -2,9 +2,9 @@
  * 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。
  * 传入 ref 或 getter 即可在运行时切换主题与语言。
  */
-import { type MaybeRefOrGetter, type Plugin } from 'vue';
+import { type MaybeRefOrGetter, type ObjectPlugin } from 'vue';
 import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
-import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import { type Highlighter, type TextMatcher, type UiPermissions, type UiRouter } from './context';
 import type { ComponentDefaults } from './defaults';
 import { type ComponentStyles } from './styles';
 import { type Lang } from './lang/lang';
@@ -27,6 +27,8 @@ export interface UiOptions {
     styles?: ComponentStyles;
     /** 路由适配：站内链接不刷新页面地跳转、导航组件判断当前页（见 UiRouter） */
     router?: UiRouter;
+    /** 权限判断：`(权限点) => 用户有没有`，Can、useCan 据此控制按钮等界面；不写时一律放行（见 UiPermissions） */
+    permissions?: UiPermissions;
     /** 请求客户端：createHttpClient({ baseURL, onRequest, onResponse })，或包一层 axios、ky（见 HttpClient） */
     http?: HttpClient;
     /** 工作日历：createWorkCalendar({ holidays, workdays }) 带上法定节假日与调休；不写时只按周末算 */
@@ -45,8 +47,23 @@ export declare const documentStyles: Readonly<{
     body: css.CompiledStyles;
     page: css.CompiledStyles;
 }>;
+/** 服务端渲染时 `<html>` 与 `<body>` 要带的属性（createUi 在浏览器里写到页面根元素上的那些） */
+export interface DocumentAttrs {
+    /** `<html>` 的属性：主题的类、变量（style）、data-theme，传了 lang 时还有 lang、dir */
+    html: Record<string, string>;
+    /** `<body>` 的属性：paintDocument 时去掉外边距的类 */
+    body: Record<string, string>;
+}
+/** createUi 的结果：Vue 插件，另外能给出服务端渲染时页面根元素的属性 */
+export interface UiPlugin extends ObjectPlugin {
+    /**
+     * 服务端渲染：`<html>`、`<body>` 要带的属性，首屏就是这套主题与语言，不等客户端接管后再变。
+     * 服务端不知道系统的明暗，跟随系统的主题按亮色给；`themeBootScript` 在页面加载前按用户的选择改过来
+     */
+    documentAttrs(): DocumentAttrs;
+}
 /**
  * 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。
  * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。
  */
-export declare function createUi(options?: UiOptions): Plugin;
+export declare function createUi(options?: UiOptions): UiPlugin;

package/dist/config/createUi.js

@@ -27,60 +27,91 @@ var documentStyles = css.create({
 * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。
 */
 function createUi(options = {}) {
-	return { install(app) {
-		const scope = effectScope();
-		app.onUnmount(() => scope.stop());
-		scope.run(() => {
-			const prefersDark = usePrefersDark();
-			const theme = computed(() => resolveTheme(toValue(options.theme) ?? defaultConfig.theme, prefersDark.value));
-			const lang = computed(() => defineLang(defaultConfig.lang, toValue(options.lang) ?? {}));
-			app.provide(ConfigContext.key, {
-				get theme() {
-					return theme.value;
-				},
-				get lang() {
-					return lang.value;
-				},
-				highlighter: options.highlighter,
-				textMatcher: options.textMatcher,
-				defaults: options.defaults ?? {},
-				styles: mergeStyles({}, options.styles),
-				router: options.router,
-				http: options.http,
-				workCalendar: options.workCalendar,
-				ripple: options.ripple ?? true
-			});
-			if (options.lang && typeof document !== "undefined") {
-				const root = document.documentElement;
-				const previous = {
-					lang: root.lang,
-					dir: root.dir
-				};
-				watchEffect(() => {
-					root.lang = lang.value.code;
-					root.dir = lang.value.direction;
-				});
-				app.onUnmount(() => Object.assign(root, previous));
+	return {
+		documentAttrs() {
+			const html = {};
+			const body = {};
+			if (options.lang) {
+				const lang = defineLang(defaultConfig.lang, toValue(options.lang));
+				html.lang = lang.code;
+				html.dir = lang.direction;
 			}
-			if ((options.theme || options.paintDocument) && typeof document !== "undefined") {
-				const root = document.documentElement;
-				if (options.paintDocument) root.style.removeProperty("background-color");
-				if (options.paintDocument) root.style.removeProperty("color");
-				watchEffect((onCleanup) => onCleanup(applyTheme(root, theme.value, options.paintDocument ?? false)));
-				if (options.paintDocument && document.body) {
-					const body = document.body;
-					const classes = css.attrs(documentStyles.body).class?.split(" ") ?? [];
-					body.classList.add(...classes);
-					app.onUnmount(() => body.classList.remove(...classes));
-				}
+			if (options.theme || options.paintDocument) {
+				const theme = resolveTheme(toValue(options.theme) ?? defaultConfig.theme, false);
+				const { classes, variables } = rootThemeAttrs(theme, options.paintDocument ?? false);
+				if (classes.length) html.class = classes.join(" ");
+				const style = Object.entries(variables).map(([name, value]) => `${name}:${value}`).join(";");
+				if (style) html.style = style;
+				html["data-theme"] = theme.name;
+				if (options.paintDocument) body.class = css.attrs(documentStyles.body).class ?? "";
 			}
-		});
-	} };
+			return {
+				html,
+				body
+			};
+		},
+		install(app) {
+			const scope = effectScope();
+			app.onUnmount(() => scope.stop());
+			scope.run(() => {
+				const prefersDark = usePrefersDark();
+				const theme = computed(() => resolveTheme(toValue(options.theme) ?? defaultConfig.theme, prefersDark.value));
+				const lang = computed(() => defineLang(defaultConfig.lang, toValue(options.lang) ?? {}));
+				app.provide(ConfigContext.key, {
+					get theme() {
+						return theme.value;
+					},
+					get lang() {
+						return lang.value;
+					},
+					highlighter: options.highlighter,
+					textMatcher: options.textMatcher,
+					defaults: options.defaults ?? {},
+					styles: mergeStyles({}, options.styles),
+					router: options.router,
+					permissions: options.permissions,
+					http: options.http,
+					workCalendar: options.workCalendar,
+					ripple: options.ripple ?? true
+				});
+				if (options.lang && typeof document !== "undefined") {
+					const root = document.documentElement;
+					const previous = {
+						lang: root.lang,
+						dir: root.dir
+					};
+					watchEffect(() => {
+						root.lang = lang.value.code;
+						root.dir = lang.value.direction;
+					});
+					app.onUnmount(() => Object.assign(root, previous));
+				}
+				if ((options.theme || options.paintDocument) && typeof document !== "undefined") {
+					const root = document.documentElement;
+					if (options.paintDocument) root.style.removeProperty("background-color");
+					if (options.paintDocument) root.style.removeProperty("color");
+					watchEffect((onCleanup) => onCleanup(applyTheme(root, theme.value, options.paintDocument ?? false)));
+					if (options.paintDocument && document.body) {
+						const body = document.body;
+						const classes = css.attrs(documentStyles.body).class?.split(" ") ?? [];
+						body.classList.add(...classes);
+						app.onUnmount(() => body.classList.remove(...classes));
+					}
+				}
+			});
+		}
+	};
+}
+/** 主题挂到页面根元素上的类与 CSS 变量；paint 时加上整页的底色与字体（浏览器里写到元素上，服务端写进 HTML） */
+function rootThemeAttrs(theme, paint) {
+	return {
+		classes: css.attrs(...theme.styles, paint && documentStyles.page).class?.split(" ").filter(Boolean) ?? [],
+		variables: themeVariables(theme)
+	};
 }
 /** 把主题的 class、CSS 变量与 data-theme 写到元素上，返回撤销函数 */
 function applyTheme(element, theme, paint) {
-	const classes = css.attrs(...theme.styles, paint && documentStyles.page).class?.split(" ").filter(Boolean) ?? [];
-	const variables = themeVariables(theme);
+	const { classes, variables } = rootThemeAttrs(theme, paint);
 	element.classList.add(...classes);
 	for (const [name, value] of Object.entries(variables)) element.style.setProperty(name, value);
 	element.dataset.theme = theme.name;

package/dist/config/createUi.js.map

@@ -1 +1 @@
-{"version":3,"file":"createUi.js","names":[],"sources":["../../src/config/createUi.ts"],"sourcesContent":["/**\n * 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。\n * 传入 ref 或 getter 即可在运行时切换主题与语言。\n */\nimport {\n  computed,\n  effectScope,\n  toValue,\n  watchEffect,\n  type MaybeRefOrGetter,\n  type Plugin,\n} from 'vue';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport {\n  ConfigContext,\n  defaultConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiRouter,\n} from './context';\nimport type { ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeVariables, type Theme, type ThemeInput } from './theme/theme';\n\n/** 应用级配置；theme 与 lang 可以传 ref 或 getter，运行时切换，其余在安装时确定 */\nexport interface UiOptions {\n  /** 主题；不写时用亮色主题，也不改动页面根元素 */\n  theme?: MaybeRefOrGetter<ThemeInput>;\n  /** 只写要改的字段，其余用简体中文的默认值 */\n  lang?: MaybeRefOrGetter<Partial<Lang>>;\n  /** 代码高亮器（CodeBlock 用），如 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter()；不写时显示纯文本 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配，如 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher()：选项过滤、命令面板认拼音；不写时只按字面匹配 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值，如 `{ Button: { variant: 'outline' } }`（见 defaults.ts） */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加样式、新增档位，如 `{ Button: { base: { root: { letterSpacing: '0.02em' } } } }`（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配：站内链接不刷新页面地跳转、导航组件判断当前页（见 UiRouter） */\n  router?: UiRouter;\n  /** 请求客户端：createHttpClient({ baseURL, onRequest, onResponse })，或包一层 axios、ky（见 HttpClient） */\n  http?: HttpClient;\n  /** 工作日历：createWorkCalendar({ holidays, workdays }) 带上法定节假日与调休；不写时只按周末算 */\n  workCalendar?: WorkCalendar;\n  /** 按下时的波纹效果，默认 true；关掉后组件的 ripple prop 仍可单独打开 */\n  ripple?: boolean;\n  /**\n   * 页面根元素也用主题的背景色、文字色与字体，并去掉 body 的默认外边距，默认 false。\n   * 整页都由组件库主题管理的站点（如文档站）打开：页面边缘、回弹滚动露出的地方不再是浏览器的默认色，\n   * AppShell 贴满窗口、四周不留 8px 的白边；配合 themeBootScript 时接手它写的行内颜色\n   */\n  paintDocument?: boolean;\n}\n\n/** paintDocument 时页面根元素的样式 */\nexport const documentStyles = css.create({\n  // 字号不设：根元素的字号是 rem 的基准，留给浏览器（用户的字号设置）\n  page: {\n    backgroundColor: '_background',\n    color: '_text',\n    fontFamily: '_sans',\n    lineHeight: '_normal',\n    // macOS 上用灰度抗锯齿，深色底上的浅色文字不发虚；其他系统忽略\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n  },\n  // 浏览器给 body 的 8px 外边距：整页的外壳（AppShell）要贴满窗口\n  body: { margin: 0 },\n});\n\n/**\n * 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。\n * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。\n */\nexport function createUi(options: UiOptions = {}): Plugin {\n  return {\n    install(app) {\n      const scope = effectScope();\n      app.onUnmount(() => scope.stop());\n      scope.run(() => {\n        const prefersDark = usePrefersDark();\n        const theme = computed(() =>\n          resolveTheme(toValue(options.theme) ?? defaultConfig.theme, prefersDark.value),\n        );\n        const lang = computed(() => defineLang(defaultConfig.lang, toValue(options.lang) ?? {}));\n        app.provide(ConfigContext.key, {\n          get theme() {\n            return theme.value;\n          },\n          get lang() {\n            return lang.value;\n          },\n          highlighter: options.highlighter,\n          textMatcher: options.textMatcher,\n          defaults: options.defaults ?? {},\n          styles: mergeStyles({}, options.styles),\n          router: options.router,\n          http: options.http,\n          workCalendar: options.workCalendar,\n          ripple: options.ripple ?? true,\n        });\n        // 应用级的语言也写在页面根元素上（Provider 写在自己的元素上）：读屏按 lang 选发音，\n        // 从右到左的语言靠 dir 镜像排版与滚动条；没传 lang 时不动，宿主自己管\n        if (options.lang && typeof document !== 'undefined') {\n          const root = document.documentElement;\n          const previous = { lang: root.lang, dir: root.dir };\n          watchEffect(() => {\n            root.lang = lang.value.code;\n            root.dir = lang.value.direction;\n          });\n          app.onUnmount(() => Object.assign(root, previous));\n        }\n        // 应用级没有容器元素，主题变量挂在页面根元素上；变量名带 vtp- 前缀，不会与宿主冲突。\n        // 只开 paintDocument、不传主题时用默认主题（整页也要有底色、字体，body 去掉外边距）\n        if ((options.theme || options.paintDocument) && typeof document !== 'undefined') {\n          const root = document.documentElement;\n          // themeBootScript 在应用加载前写的行内颜色：交给主题的 class\n          if (options.paintDocument) root.style.removeProperty('background-color');\n          if (options.paintDocument) root.style.removeProperty('color');\n          watchEffect((onCleanup) =>\n            onCleanup(applyTheme(root, theme.value, options.paintDocument ?? false)),\n          );\n          if (options.paintDocument && document.body) {\n            const body = document.body;\n            const classes = css.attrs(documentStyles.body).class?.split(' ') ?? [];\n            body.classList.add(...classes);\n            app.onUnmount(() => body.classList.remove(...classes));\n          }\n        }\n      });\n    },\n  };\n}\n\n/** 把主题的 class、CSS 变量与 data-theme 写到元素上，返回撤销函数 */\nfunction applyTheme(element: HTMLElement, theme: Theme, paint: boolean) {\n  const classes =\n    css\n      .attrs(...theme.styles, paint && documentStyles.page)\n      .class?.split(' ')\n      .filter(Boolean) ?? [];\n  const variables = themeVariables(theme);\n  element.classList.add(...classes);\n  for (const [name, value] of Object.entries(variables)) element.style.setProperty(name, value);\n  element.dataset.theme = theme.name;\n  return () => {\n    element.classList.remove(...classes);\n    for (const name of Object.keys(variables)) element.style.removeProperty(name);\n    delete element.dataset.theme;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM;EACJ,iBAAiB;EACjB,OAAO;EACP,YAAY;EACZ,YAAY;EAEZ,qBAAqB;EACrB,qBAAqB;CACvB;CAEA,MAAM,EAAE,QAAQ,EAAE;AACpB,CAAC;;;;;AAMD,SAAgB,SAAS,UAAqB,CAAC,GAAW;CACxD,OAAO,EACL,QAAQ,KAAK;EACX,MAAM,QAAQ,YAAY;EAC1B,IAAI,gBAAgB,MAAM,KAAK,CAAC;EAChC,MAAM,UAAU;GACd,MAAM,cAAc,eAAe;GACnC,MAAM,QAAQ,eACZ,aAAa,QAAQ,QAAQ,KAAK,KAAK,cAAc,OAAO,YAAY,KAAK,CAC/E;GACA,MAAM,OAAO,eAAe,WAAW,cAAc,MAAM,QAAQ,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC;GACvF,IAAI,QAAQ,cAAc,KAAK;IAC7B,IAAI,QAAQ;KACV,OAAO,MAAM;IACf;IACA,IAAI,OAAO;KACT,OAAO,KAAK;IACd;IACA,aAAa,QAAQ;IACrB,aAAa,QAAQ;IACrB,UAAU,QAAQ,YAAY,CAAC;IAC/B,QAAQ,YAAY,CAAC,GAAG,QAAQ,MAAM;IACtC,QAAQ,QAAQ;IAChB,MAAM,QAAQ;IACd,cAAc,QAAQ;IACtB,QAAQ,QAAQ,UAAU;GAC5B,CAAC;GAGD,IAAI,QAAQ,QAAQ,OAAO,aAAa,aAAa;IACnD,MAAM,OAAO,SAAS;IACtB,MAAM,WAAW;KAAE,MAAM,KAAK;KAAM,KAAK,KAAK;IAAI;IAClD,kBAAkB;KAChB,KAAK,OAAO,KAAK,MAAM;KACvB,KAAK,MAAM,KAAK,MAAM;IACxB,CAAC;IACD,IAAI,gBAAgB,OAAO,OAAO,MAAM,QAAQ,CAAC;GACnD;GAGA,KAAK,QAAQ,SAAS,QAAQ,kBAAkB,OAAO,aAAa,aAAa;IAC/E,MAAM,OAAO,SAAS;IAEtB,IAAI,QAAQ,eAAe,KAAK,MAAM,eAAe,kBAAkB;IACvE,IAAI,QAAQ,eAAe,KAAK,MAAM,eAAe,OAAO;IAC5D,aAAa,cACX,UAAU,WAAW,MAAM,MAAM,OAAO,QAAQ,iBAAiB,KAAK,CAAC,CACzE;IACA,IAAI,QAAQ,iBAAiB,SAAS,MAAM;KAC1C,MAAM,OAAO,SAAS;KACtB,MAAM,UAAU,IAAI,MAAM,eAAe,IAAI,CAAC,CAAC,OAAO,MAAM,GAAG,KAAK,CAAA;KACpE,KAAK,UAAU,IAAI,GAAG,OAAO;KAC7B,IAAI,gBAAgB,KAAK,UAAU,OAAO,GAAG,OAAO,CAAC;IACvD;GACF;EACF,CAAC;CACH,EACF;AACF;;AAGA,SAAS,WAAW,SAAsB,OAAc,OAAgB;CACtE,MAAM,UACJ,IACG,MAAM,GAAG,MAAM,QAAQ,SAAS,eAAe,IAAI,CAAC,CACpD,OAAO,MAAM,GAAG,CAAC,CACjB,OAAO,OAAO,KAAK,CAAA;CACxB,MAAM,YAAY,eAAe,KAAK;CACtC,QAAQ,UAAU,IAAI,GAAG,OAAO;CAChC,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,GAAG,QAAQ,MAAM,YAAY,MAAM,KAAK;CAC5F,QAAQ,QAAQ,QAAQ,MAAM;CAC9B,aAAa;EACX,QAAQ,UAAU,OAAO,GAAG,OAAO;EACnC,KAAK,MAAM,QAAQ,OAAO,KAAK,SAAS,GAAG,QAAQ,MAAM,eAAe,IAAI;EAC5E,OAAO,QAAQ,QAAQ;CACzB;AACF"}
+{"version":3,"file":"createUi.js","names":[],"sources":["../../src/config/createUi.ts"],"sourcesContent":["/**\n * 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。\n * 传入 ref 或 getter 即可在运行时切换主题与语言。\n */\nimport {\n  computed,\n  effectScope,\n  toValue,\n  watchEffect,\n  type MaybeRefOrGetter,\n  type ObjectPlugin,\n} from 'vue';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport {\n  ConfigContext,\n  defaultConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiPermissions,\n  type UiRouter,\n} from './context';\nimport type { ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeVariables, type Theme, type ThemeInput } from './theme/theme';\n\n/** 应用级配置；theme 与 lang 可以传 ref 或 getter，运行时切换，其余在安装时确定 */\nexport interface UiOptions {\n  /** 主题；不写时用亮色主题，也不改动页面根元素 */\n  theme?: MaybeRefOrGetter<ThemeInput>;\n  /** 只写要改的字段，其余用简体中文的默认值 */\n  lang?: MaybeRefOrGetter<Partial<Lang>>;\n  /** 代码高亮器（CodeBlock 用），如 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter()；不写时显示纯文本 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配，如 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher()：选项过滤、命令面板认拼音；不写时只按字面匹配 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值，如 `{ Button: { variant: 'outline' } }`（见 defaults.ts） */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加样式、新增档位，如 `{ Button: { base: { root: { letterSpacing: '0.02em' } } } }`（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配：站内链接不刷新页面地跳转、导航组件判断当前页（见 UiRouter） */\n  router?: UiRouter;\n  /** 权限判断：`(权限点) => 用户有没有`，Can、useCan 据此控制按钮等界面；不写时一律放行（见 UiPermissions） */\n  permissions?: UiPermissions;\n  /** 请求客户端：createHttpClient({ baseURL, onRequest, onResponse })，或包一层 axios、ky（见 HttpClient） */\n  http?: HttpClient;\n  /** 工作日历：createWorkCalendar({ holidays, workdays }) 带上法定节假日与调休；不写时只按周末算 */\n  workCalendar?: WorkCalendar;\n  /** 按下时的波纹效果，默认 true；关掉后组件的 ripple prop 仍可单独打开 */\n  ripple?: boolean;\n  /**\n   * 页面根元素也用主题的背景色、文字色与字体，并去掉 body 的默认外边距，默认 false。\n   * 整页都由组件库主题管理的站点（如文档站）打开：页面边缘、回弹滚动露出的地方不再是浏览器的默认色，\n   * AppShell 贴满窗口、四周不留 8px 的白边；配合 themeBootScript 时接手它写的行内颜色\n   */\n  paintDocument?: boolean;\n}\n\n/** paintDocument 时页面根元素的样式 */\nexport const documentStyles = css.create({\n  // 字号不设：根元素的字号是 rem 的基准，留给浏览器（用户的字号设置）\n  page: {\n    backgroundColor: '_background',\n    color: '_text',\n    fontFamily: '_sans',\n    lineHeight: '_normal',\n    // macOS 上用灰度抗锯齿，深色底上的浅色文字不发虚；其他系统忽略\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n  },\n  // 浏览器给 body 的 8px 外边距：整页的外壳（AppShell）要贴满窗口\n  body: { margin: 0 },\n});\n\n/** 服务端渲染时 `<html>` 与 `<body>` 要带的属性（createUi 在浏览器里写到页面根元素上的那些） */\nexport interface DocumentAttrs {\n  /** `<html>` 的属性：主题的类、变量（style）、data-theme，传了 lang 时还有 lang、dir */\n  html: Record<string, string>;\n  /** `<body>` 的属性：paintDocument 时去掉外边距的类 */\n  body: Record<string, string>;\n}\n\n/** createUi 的结果：Vue 插件，另外能给出服务端渲染时页面根元素的属性 */\nexport interface UiPlugin extends ObjectPlugin {\n  /**\n   * 服务端渲染：`<html>`、`<body>` 要带的属性，首屏就是这套主题与语言，不等客户端接管后再变。\n   * 服务端不知道系统的明暗，跟随系统的主题按亮色给；`themeBootScript` 在页面加载前按用户的选择改过来\n   */\n  documentAttrs(): DocumentAttrs;\n}\n\n/**\n * 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。\n * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。\n */\nexport function createUi(options: UiOptions = {}): UiPlugin {\n  return {\n    documentAttrs() {\n      const html: Record<string, string> = {};\n      const body: Record<string, string> = {};\n      if (options.lang) {\n        const lang = defineLang(defaultConfig.lang, toValue(options.lang));\n        html.lang = lang.code;\n        html.dir = lang.direction;\n      }\n      if (options.theme || options.paintDocument) {\n        const theme = resolveTheme(toValue(options.theme) ?? defaultConfig.theme, false);\n        const { classes, variables } = rootThemeAttrs(theme, options.paintDocument ?? false);\n        if (classes.length) html.class = classes.join(' ');\n        const style = Object.entries(variables)\n          .map(([name, value]) => `${name}:${value}`)\n          .join(';');\n        if (style) html.style = style;\n        html['data-theme'] = theme.name;\n        if (options.paintDocument) body.class = css.attrs(documentStyles.body).class ?? '';\n      }\n      return { html, body };\n    },\n    install(app) {\n      const scope = effectScope();\n      app.onUnmount(() => scope.stop());\n      scope.run(() => {\n        const prefersDark = usePrefersDark();\n        const theme = computed(() =>\n          resolveTheme(toValue(options.theme) ?? defaultConfig.theme, prefersDark.value),\n        );\n        const lang = computed(() => defineLang(defaultConfig.lang, toValue(options.lang) ?? {}));\n        app.provide(ConfigContext.key, {\n          get theme() {\n            return theme.value;\n          },\n          get lang() {\n            return lang.value;\n          },\n          highlighter: options.highlighter,\n          textMatcher: options.textMatcher,\n          defaults: options.defaults ?? {},\n          styles: mergeStyles({}, options.styles),\n          router: options.router,\n          permissions: options.permissions,\n          http: options.http,\n          workCalendar: options.workCalendar,\n          ripple: options.ripple ?? true,\n        });\n        // 应用级的语言也写在页面根元素上（Provider 写在自己的元素上）：读屏按 lang 选发音，\n        // 从右到左的语言靠 dir 镜像排版与滚动条；没传 lang 时不动，宿主自己管\n        if (options.lang && typeof document !== 'undefined') {\n          const root = document.documentElement;\n          const previous = { lang: root.lang, dir: root.dir };\n          watchEffect(() => {\n            root.lang = lang.value.code;\n            root.dir = lang.value.direction;\n          });\n          app.onUnmount(() => Object.assign(root, previous));\n        }\n        // 应用级没有容器元素，主题变量挂在页面根元素上；变量名带 vtp- 前缀，不会与宿主冲突。\n        // 只开 paintDocument、不传主题时用默认主题（整页也要有底色、字体，body 去掉外边距）\n        if ((options.theme || options.paintDocument) && typeof document !== 'undefined') {\n          const root = document.documentElement;\n          // themeBootScript 在应用加载前写的行内颜色：交给主题的 class\n          if (options.paintDocument) root.style.removeProperty('background-color');\n          if (options.paintDocument) root.style.removeProperty('color');\n          watchEffect((onCleanup) =>\n            onCleanup(applyTheme(root, theme.value, options.paintDocument ?? false)),\n          );\n          if (options.paintDocument && document.body) {\n            const body = document.body;\n            const classes = css.attrs(documentStyles.body).class?.split(' ') ?? [];\n            body.classList.add(...classes);\n            app.onUnmount(() => body.classList.remove(...classes));\n          }\n        }\n      });\n    },\n  };\n}\n\n/** 主题挂到页面根元素上的类与 CSS 变量；paint 时加上整页的底色与字体（浏览器里写到元素上，服务端写进 HTML） */\nfunction rootThemeAttrs(theme: Theme, paint: boolean) {\n  const classes =\n    css\n      .attrs(...theme.styles, paint && documentStyles.page)\n      .class?.split(' ')\n      .filter(Boolean) ?? [];\n  return { classes, variables: themeVariables(theme) };\n}\n\n/** 把主题的 class、CSS 变量与 data-theme 写到元素上，返回撤销函数 */\nfunction applyTheme(element: HTMLElement, theme: Theme, paint: boolean) {\n  const { classes, variables } = rootThemeAttrs(theme, paint);\n  element.classList.add(...classes);\n  for (const [name, value] of Object.entries(variables)) element.style.setProperty(name, value);\n  element.dataset.theme = theme.name;\n  return () => {\n    element.classList.remove(...classes);\n    for (const name of Object.keys(variables)) element.style.removeProperty(name);\n    delete element.dataset.theme;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA8DA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM;EACJ,iBAAiB;EACjB,OAAO;EACP,YAAY;EACZ,YAAY;EAEZ,qBAAqB;EACrB,qBAAqB;CACvB;CAEA,MAAM,EAAE,QAAQ,EAAE;AACpB,CAAC;;;;;AAuBD,SAAgB,SAAS,UAAqB,CAAC,GAAa;CAC1D,OAAO;EACL,gBAAgB;GACd,MAAM,OAA+B,CAAC;GACtC,MAAM,OAA+B,CAAC;GACtC,IAAI,QAAQ,MAAM;IAChB,MAAM,OAAO,WAAW,cAAc,MAAM,QAAQ,QAAQ,IAAI,CAAC;IACjE,KAAK,OAAO,KAAK;IACjB,KAAK,MAAM,KAAK;GAClB;GACA,IAAI,QAAQ,SAAS,QAAQ,eAAe;IAC1C,MAAM,QAAQ,aAAa,QAAQ,QAAQ,KAAK,KAAK,cAAc,OAAO,KAAK;IAC/E,MAAM,EAAE,SAAS,cAAc,eAAe,OAAO,QAAQ,iBAAiB,KAAK;IACnF,IAAI,QAAQ,QAAQ,KAAK,QAAQ,QAAQ,KAAK,GAAG;IACjD,MAAM,QAAQ,OAAO,QAAQ,SAAS,CAAC,CACpC,KAAK,CAAC,MAAM,WAAW,GAAG,KAAI,GAAI,OAAO,CAAC,CAC1C,KAAK,GAAG;IACX,IAAI,OAAO,KAAK,QAAQ;IACxB,KAAK,gBAAgB,MAAM;IAC3B,IAAI,QAAQ,eAAe,KAAK,QAAQ,IAAI,MAAM,eAAe,IAAI,CAAC,CAAC,SAAS;GAClF;GACA,OAAO;IAAE;IAAM;GAAK;EACtB;EACA,QAAQ,KAAK;GACX,MAAM,QAAQ,YAAY;GAC1B,IAAI,gBAAgB,MAAM,KAAK,CAAC;GAChC,MAAM,UAAU;IACd,MAAM,cAAc,eAAe;IACnC,MAAM,QAAQ,eACZ,aAAa,QAAQ,QAAQ,KAAK,KAAK,cAAc,OAAO,YAAY,KAAK,CAC/E;IACA,MAAM,OAAO,eAAe,WAAW,cAAc,MAAM,QAAQ,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC;IACvF,IAAI,QAAQ,cAAc,KAAK;KAC7B,IAAI,QAAQ;MACV,OAAO,MAAM;KACf;KACA,IAAI,OAAO;MACT,OAAO,KAAK;KACd;KACA,aAAa,QAAQ;KACrB,aAAa,QAAQ;KACrB,UAAU,QAAQ,YAAY,CAAC;KAC/B,QAAQ,YAAY,CAAC,GAAG,QAAQ,MAAM;KACtC,QAAQ,QAAQ;KAChB,aAAa,QAAQ;KACrB,MAAM,QAAQ;KACd,cAAc,QAAQ;KACtB,QAAQ,QAAQ,UAAU;IAC5B,CAAC;IAGD,IAAI,QAAQ,QAAQ,OAAO,aAAa,aAAa;KACnD,MAAM,OAAO,SAAS;KACtB,MAAM,WAAW;MAAE,MAAM,KAAK;MAAM,KAAK,KAAK;KAAI;KAClD,kBAAkB;MAChB,KAAK,OAAO,KAAK,MAAM;MACvB,KAAK,MAAM,KAAK,MAAM;KACxB,CAAC;KACD,IAAI,gBAAgB,OAAO,OAAO,MAAM,QAAQ,CAAC;IACnD;IAGA,KAAK,QAAQ,SAAS,QAAQ,kBAAkB,OAAO,aAAa,aAAa;KAC/E,MAAM,OAAO,SAAS;KAEtB,IAAI,QAAQ,eAAe,KAAK,MAAM,eAAe,kBAAkB;KACvE,IAAI,QAAQ,eAAe,KAAK,MAAM,eAAe,OAAO;KAC5D,aAAa,cACX,UAAU,WAAW,MAAM,MAAM,OAAO,QAAQ,iBAAiB,KAAK,CAAC,CACzE;KACA,IAAI,QAAQ,iBAAiB,SAAS,MAAM;MAC1C,MAAM,OAAO,SAAS;MACtB,MAAM,UAAU,IAAI,MAAM,eAAe,IAAI,CAAC,CAAC,OAAO,MAAM,GAAG,KAAK,CAAA;MACpE,KAAK,UAAU,IAAI,GAAG,OAAO;MAC7B,IAAI,gBAAgB,KAAK,UAAU,OAAO,GAAG,OAAO,CAAC;KACvD;IACF;GACF,CAAC;EACH;CACF;AACF;;AAGA,SAAS,eAAe,OAAc,OAAgB;CAMpD,OAAO;EAAE,SAJP,IACG,MAAM,GAAG,MAAM,QAAQ,SAAS,eAAe,IAAI,CAAC,CACpD,OAAO,MAAM,GAAG,CAAC,CACjB,OAAO,OAAO,KAAK,CAAA;EACN,WAAW,eAAe,KAAK;CAAE;AACrD;;AAGA,SAAS,WAAW,SAAsB,OAAc,OAAgB;CACtE,MAAM,EAAE,SAAS,cAAc,eAAe,OAAO,KAAK;CAC1D,QAAQ,UAAU,IAAI,GAAG,OAAO;CAChC,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,GAAG,QAAQ,MAAM,YAAY,MAAM,KAAK;CAC5F,QAAQ,QAAQ,QAAQ,MAAM;CAC9B,aAAa;EACX,QAAQ,UAAU,OAAO,GAAG,OAAO;EACnC,KAAK,MAAM,QAAQ,OAAO,KAAK,SAAS,GAAG,QAAQ,MAAM,eAAe,IAAI;EAC5E,OAAO,QAAQ,QAAQ;CACzB;AACF"}

package/dist/config/layout/preference.d.ts

@@ -0,0 +1,43 @@
+/** 侧栏的形式 */
+export type LayoutMode = 'docked' | 'overlay';
+/** 抽屉式侧栏从哪一边滑出：start / end 随排版方向（从右到左时互换），top / bottom 是上下 */
+export type LayoutSide = 'start' | 'end' | 'top' | 'bottom';
+/** 可选的侧栏形式，LayoutSwitcher 据此列出选项 */
+export declare const LAYOUT_MODES: readonly LayoutMode[];
+/** 可选的抽屉方向，LayoutSwitcher 据此列出选项 */
+export declare const LAYOUT_SIDES: readonly LayoutSide[];
+/** 默认的抽屉宽度（px）：左右两侧 */
+export declare const DEFAULT_LAYOUT_WIDTH = 256;
+/** 默认的抽屉高度（px）：上下两侧 */
+export declare const DEFAULT_LAYOUT_HEIGHT = 320;
+/** createLayoutPreference 记住的内容 */
+export interface LayoutState {
+    /** 侧栏的形式，默认 docked */
+    mode: LayoutMode;
+    /** 抽屉从哪一边滑出（只在 overlay 时有效），默认 start */
+    side: LayoutSide;
+    /** 抽屉开着 */
+    open: boolean;
+    /** 左右两侧抽屉的宽度（px） */
+    width: number;
+    /** 上下两侧抽屉的高度（px） */
+    height: number;
+    /** docked 侧栏收起成了图标栏 */
+    collapsed: boolean;
+}
+/** createLayoutPreference 的选项 */
+export interface LayoutPreferenceOptions {
+    /** 没记过（或记的值不合法）时各项的值 */
+    defaults?: Partial<LayoutState>;
+    /** 记住选择的 localStorage 键，默认 'vue-tsx-pro-layout'；false 不记 */
+    storageKey?: string | false;
+}
+/** 布局偏好：各项可读可写，写了就存盘、其他标签页跟着变 */
+export interface LayoutPreference extends LayoutState {
+    /** 全部恢复成默认值（并清掉记住的内容） */
+    reset(): void;
+}
+/** 记住选择的默认 localStorage 键 */
+export declare const DEFAULT_LAYOUT_STORAGE_KEY = "vue-tsx-pro-layout";
+/** 创建布局偏好；在应用的生命周期里一直有效（监听其他标签页的改动不撤销） */
+export declare function createLayoutPreference(options?: LayoutPreferenceOptions): LayoutPreference;