@gx-design-vue/pro-layout-components 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/RightContent/index.js

@@ -1,152 +1,168 @@
-import Icon_default from "../Icon/index.js";
-import { getRightContentProps } from "./props.js";
-import PageLock_default from "../PageLock/index.js";
-import { systemTheme } from "../ThemeEditor/utils/config.js";
-import Search_default from "./Search/index.js";
-import { useStyle } from "./style.js";
-import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, ref } from "vue";
-import { useMediaQuery, useState } from "@gx-design-vue/pro-hooks";
-import { getPrefixCls, getSlot, getSlotsProps, isBoolean, isFunction } from "@gx-design-vue/pro-utils";
-import { Avatar, Dropdown, Menu, MenuItem } from "ant-design-vue";
-import { useProLayoutContext } from "@gx-design-vue/pro-layout";
-import { CompressOutlined, ExpandOutlined, LockOutlined, LogoutOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons-vue";
-import { toggleAnimateTheme, useThemeContext } from "@gx-design-vue/context";
-import { useColorMode, useDebounceFn, useFullscreen } from "@vueuse/core";
-import ResizeObserver from "ant-design-vue/es/vc-resize-observer";
-
+import { defaultLocale } from "./locale.js";
+import GSearchInput from "./Search/index.js";
+import style_default from "./style.js";
+import { defaultThemeOptions } from "./themeOptions.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
+import { CompressOutlined, ExpandOutlined, LockOutlined, LogoutOutlined, SettingOutlined, UserOutlined } from "@antdv-next/icons";
+import { useThemeContext } from "@gx-design-vue/context";
+import { GIcon } from "@gx-design-vue/icon";
+import { useInjectLayoutContext } from "@gx-design-vue/pro-layout";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { useElementSize, useFullscreen } from "@vueuse/core";
+import { Avatar, Dropdown } from "antdv-next";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
 //#region src/RightContent/index.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const GlobalRightContent = /* @__PURE__ */ defineComponent({
-	name: "GlobalRightContent",
-	props: getRightContentProps(),
-	inheritAttrs: false,
-	emits: {
-		click: (type) => type.length > 0,
-		logout: (callback) => typeof callback === "function"
-	},
-	slots: Object,
-	setup(props, { slots }) {
-		const { isFullscreen, toggle } = useFullscreen();
-		const layoutContext = useProLayoutContext();
-		const colSize = useMediaQuery();
-		const { system } = useColorMode();
-		const { setTheme, isDark, theme } = useThemeContext();
-		const prefixCls = getPrefixCls({
-			suffixCls: "global",
-			isPor: true
-		});
-		const { wrapSSR, hashId } = useStyle(prefixCls);
-		const toggleEl = ref();
-		const [lock, openLock] = useState(false);
-		const [rightSize, setRightSize] = useState("auto");
-		const isMobile = computed(() => isBoolean(layoutContext?.isMobile?.value) ? layoutContext?.isMobile?.value : colSize.value === "sm" || colSize.value === "xs");
-		const actions = computed(() => {
-			if (props.actions === false) return {};
-			return {
-				lock: true,
-				theme: true,
-				search: true,
-				themeEditor: true,
-				fullScreen: true,
-				...props.actions
-			};
-		});
-		/** 减少一下渲染的次数 */
-		const setRightSizeDebounceFn = useDebounceFn(async (width) => {
-			setRightSize(width);
-		}, 160);
-		const changeTheme = (value) => {
-			const themeValue = value === "system" ? system.value : value;
-			if (toggleEl.value) toggleAnimateTheme(toggleEl.value, {
-				isDark: themeValue === "dark",
-				setTheme: () => setTheme(value)
-			});
+const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();
+	const layoutContext = useInjectLayoutContext();
+	const { setTheme, isDark, theme } = useThemeContext();
+	const { prefixCls } = useBaseConfig("pro-right-content");
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const isMobile = computed(() => layoutContext?.isMobile.value ?? false);
+	const containerRef = ref();
+	const { width: containerWidth } = useElementSize(containerRef);
+	const minWidth = ref("auto");
+	const themeActionRef = ref();
+	watch(containerWidth, (newWidth) => {
+		minWidth.value = newWidth > 0 ? newWidth : "auto";
+	});
+	const lockOpen = ref(false);
+	const mergedLocale = computed(() => ({
+		...defaultLocale,
+		...props.locale
+	}));
+	const actions = computed(() => {
+		if (props.actions === false) return {};
+		return {
+			lock: true,
+			theme: true,
+			search: true,
+			themeEditor: true,
+			fullScreen: true,
+			...props.actions
 		};
-		function onClick(type) {
-			if (isFunction(props.onClick)) props.onClick?.(type);
-		}
-		return () => {
-			let _slot2;
-			const slotsProps = getSlotsProps({
-				slots,
-				props,
-				keys: [
-					"dropdownRender",
-					"dropdownMenuRender",
-					"dropdownMenuExtraItemRender"
-				],
-				render: true
-			});
-			const actionsRender = getSlot({
-				slots,
-				props,
-				key: "actionsRender"
+	});
+	const themeMenuItems = computed(() => {
+		return (props.themeOptions || defaultThemeOptions).map((item) => ({
+			key: item.value,
+			label: item.label()
+		}));
+	});
+	function handleThemeMenuClick(info) {
+		const value = info.key;
+		setTheme(value);
+	}
+	const userMenuItems = computed(() => {
+		const items = [];
+		if (actions.value.lock && slots.lock) {
+			items.push({
+				key: "lock",
+				icon: () => createVNode(LockOutlined, null, null),
+				label: mergedLocale.value.lockScreen
 			});
-			const FullScreenIcon = isFullscreen.value ? CompressOutlined : ExpandOutlined;
-			return wrapSSR(createVNode("div", {
-				"class": `${prefixCls}-right-content ${hashId.value}`.trim(),
-				"style": {
-					minWidth: rightSize.value,
-					height: "100%"
-				}
-			}, [createVNode("div", { "style": { height: "100%" } }, [createVNode(ResizeObserver, {
-				"key": "resize-observer",
-				"onResize": ({ width }) => {
-					setRightSizeDebounceFn(width);
-				}
-			}, { default: () => [createVNode("div", { "class": `${prefixCls}-header-actions ${hashId.value}`.trim() }, [slots.default?.() ?? createVNode(Fragment, null, [
-				actions.value.search && !isMobile.value && createVNode(Search_default, {
-					"dataSource": props.dataSource,
-					"disabledShortKey": props.shortsKey?.disabled,
-					"emptyProps": props.emptyProps
-				}, null),
-				actions.value.theme && createVNode("div", {
-					"ref": toggleEl,
-					"class": `${prefixCls}-header-actions-item ${prefixCls}-header-actions-theme ${hashId.value}`.trim()
-				}, [createVNode(Dropdown, {
-					"trigger": ["click"],
-					"placement": "bottomRight",
-					"overlay": createVNode(Menu, { "selectedKeys": [theme.value] }, _isSlot(_slot2 = systemTheme.map((item) => {
-						let _slot;
-						return createVNode(Menu.Item, {
-							"key": item.value,
-							"onClick": () => changeTheme(item.value)
-						}, _isSlot(_slot = item.label()) ? _slot : { default: () => [_slot] });
-					})) ? _slot2 : { default: () => [_slot2] })
-				}, { default: () => [createVNode(Icon_default, {
-					"class": `${prefixCls}-header-actions-icon ${hashId.value}`.trim(),
-					"type": isDark.value ? "moon" : "sunny"
-				}, null)] })]),
-				actions.value.themeEditor && !isMobile.value && createVNode("div", { "class": `${prefixCls}-header-actions-item ${hashId.value}`.trim() }, [createVNode(SettingOutlined, { "onClick": () => onClick("themeEditor") }, null)]),
-				actions.value.fullScreen && !isMobile.value && createVNode("div", { "class": `${prefixCls}-header-actions-item ${hashId.value}`.trim() }, [createVNode(FullScreenIcon, { "onClick": () => toggle() }, null)]),
-				actionsRender ? actionsRender?.([`${prefixCls}-header-actions-item`, hashId.value]) : null
-			]), createVNode(Dropdown, mergeProps({ "placement": "bottomRight" }, props.dropdownProps, { "overlay": slotsProps.dropdownMenuRender || createVNode(Menu, null, { default: () => [
-				slotsProps.dropdownMenuExtraItemRender,
-				actions.value.lock && createVNode(Fragment, null, [createVNode(MenuItem, {
-					"key": "lock",
-					"icon": createVNode(LockOutlined, null, null),
-					"onClick": () => openLock(true)
-				}, { default: () => [createTextVNode("锁定屏幕")] }), createVNode(Menu.Divider, null, null)]),
-				createVNode(MenuItem, {
-					"key": "logout",
-					"icon": createVNode(LogoutOutlined, null, null),
-					"onClick": () => props.onLogout?.()
-				}, { default: () => [createTextVNode("退出登录")] })
-			] }) }), { default: () => [slotsProps.dropdownRender || createVNode("div", { "class": `${prefixCls}-header-actions-avatar ${hashId.value}`.trim() }, [createVNode(Avatar, {
-				"size": 28,
-				"icon": createVNode(UserOutlined, null, null),
-				"src": props.avatar
-			}, null), props.name && createVNode("span", { "class": `${prefixCls}-header-actions-name ${hashId.value}`.trim() }, [props.name])])] })])] })]), createVNode(PageLock_default, {
-				"open": lock.value,
-				"name": props.name,
-				"onOpenChange": (val) => openLock(val)
-			}, null)]));
-		};
+			items.push({ type: "divider" });
+		}
+		items.push({
+			key: "logout",
+			icon: () => createVNode(LogoutOutlined, null, null),
+			label: mergedLocale.value.logout
+		});
+		return items;
+	});
+	function handleUserMenuClick(info) {
+		if (info.key === "lock") lockOpen.value = true;
+		else if (info.key === "logout") emit("logout");
+	}
+	function handleActionClick(type) {
+		emit("actionClick", type);
 	}
+	function handleLockOpenChange(val) {
+		lockOpen.value = val;
+	}
+	return () => {
+		const actionClassNames = [`${prefixCls.value}-header-actions-item`, hashId.value];
+		const FullScreenIcon = isFullscreen.value ? CompressOutlined : ExpandOutlined;
+		return createVNode("div", {
+			"ref": containerRef,
+			"class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value),
+			"style": {
+				minWidth: minWidth.value,
+				height: "100%"
+			}
+		}, [createVNode("div", { "style": { height: "100%" } }, [createVNode("div", { "class": classNames(`${prefixCls.value}-header-actions`, hashId.value) }, [slots.default ? slots.default() : createVNode(Fragment, null, [
+			actions.value.search && !isMobile.value && createVNode(GSearchInput, {
+				"dataSource": props.searchConfig?.dataSource,
+				"disabledShortKey": props.searchConfig?.disabledShortKey,
+				"searchHistoryKey": props.searchConfig?.historyKey,
+				"emptyProps": props.searchConfig?.emptyProps,
+				"locale": mergedLocale.value
+			}, null),
+			actions.value.theme && createVNode("div", {
+				"ref": themeActionRef,
+				"class": classNames(`${prefixCls.value}-header-actions-item`, `${prefixCls.value}-header-actions-theme`, hashId.value)
+			}, [createVNode(Dropdown, {
+				"trigger": ["click"],
+				"placement": "bottomRight",
+				"menu": {
+					items: themeMenuItems.value,
+					onClick: handleThemeMenuClick,
+					selectedKeys: [theme.value]
+				}
+			}, { default: () => [createVNode(GIcon, {
+				"class": classNames(`${prefixCls.value}-header-actions-icon`, hashId.value),
+				"type": isDark.value ? "Moon" : "Sunny"
+			}, null)] })]),
+			actions.value.themeEditor && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(SettingOutlined, { "onClick": () => handleActionClick("themeEditor") }, null)]),
+			actions.value.fullScreen && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(FullScreenIcon, { "onClick": () => toggleFullscreen() }, null)]),
+			slots.actionsRender?.(actionClassNames)
+		]), createVNode(Dropdown, mergeProps({ "placement": "bottomRight" }, props.dropdownProps, { "menu": slots.dropdownMenu ? void 0 : {
+			items: userMenuItems.value,
+			onClick: handleUserMenuClick
+		} }), { default: () => [slots.dropdownTrigger ? slots.dropdownTrigger() : createVNode("div", { "class": classNames(`${prefixCls.value}-header-actions-avatar`, hashId.value) }, [createVNode(Avatar, {
+			"size": 28,
+			"icon": createVNode(UserOutlined, null, null)
+		}, null), props.name && createVNode("span", { "class": classNames(`${prefixCls.value}-header-actions-name`, hashId.value) }, [props.name])])] })])]), slots.lock?.({
+			open: lockOpen.value,
+			onOpenChange: handleLockOpenChange
+		})]);
+	};
+}, {
+	props: {
+		actions: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		avatar: {
+			type: String,
+			required: false
+		},
+		dropdownProps: {
+			type: Object,
+			required: false
+		},
+		themeOptions: {
+			type: Array,
+			required: false
+		},
+		searchConfig: {
+			type: Object,
+			required: false
+		},
+		locale: {
+			type: Object,
+			required: false
+		}
+	},
+	emits: ["logout", "actionClick"],
+	name: "RightContent",
+	inheritAttrs: false
 });
-var RightContent_default = GlobalRightContent;
-
 //#endregion
-export { RightContent_default as default };
+export { RightContent as default };

package/dist/RightContent/interface.d.ts

@@ -0,0 +1,84 @@
+import { VNodeChild } from "vue";
+import { ThemeValue } from "@gx-design-vue/context";
+import { LayoutMenuRoute } from "@gx-design-vue/pro-layout";
+
+//#region src/RightContent/interface.d.ts
+interface RightContentEmits {
+  'logout': () => void;
+  'actionClick': (type: string) => void;
+}
+interface RightContentEmitsProps {
+  onLogout?: RightContentEmits['logout'];
+  onActionClick?: RightContentEmits['actionClick'];
+}
+interface RightContentActionsConfig {
+  search?: boolean;
+  theme?: boolean;
+  themeEditor?: boolean;
+  fullScreen?: boolean;
+  lock?: boolean;
+}
+interface RightContentThemeOption {
+  value: ThemeValue;
+  label: () => VNodeChild;
+}
+interface RightContentLocale {
+  searchPlaceholder?: string;
+  searchLabel?: string;
+  searchShortcutLabel?: string;
+  lockScreen?: string;
+  logout?: string;
+  noResult?: (keyword: string) => string;
+  noHistory?: string;
+  searchHistory?: string;
+  selectLabel?: string;
+  navigateLabel?: string;
+  lightTheme?: string;
+  darkTheme?: string;
+  autoTheme?: string;
+}
+interface SearchConfig {
+  /** 禁用键盘快捷键 (Cmd+K / Ctrl+K) */
+  disabledShortKey?: boolean;
+  /** 自定义搜索数据源；为空时使用 layout 菜单上下文 */
+  dataSource?: LayoutMenuRoute[];
+  /** localStorage key，用于持久化搜索历史 */
+  historyKey?: string;
+  /** 空状态 props */
+  emptyProps?: Record<string, unknown>;
+}
+interface RightContentProps extends RightContentEmitsProps {
+  /** 内置动作开关；传 false 关闭全部 */
+  actions?: RightContentActionsConfig | false;
+  /** 用户名 */
+  name?: string;
+  /** 用户头像 URL */
+  avatar?: string;
+  /** 透传给 antdv-next Dropdown 的额外 props */
+  dropdownProps?: Record<string, unknown>;
+  /** 自定义主题选项（覆盖默认的 亮色/深色/自动） */
+  themeOptions?: RightContentThemeOption[];
+  /** 搜索配置 */
+  searchConfig?: SearchConfig;
+  /** 国际化文本 */
+  locale?: RightContentLocale;
+}
+interface RightContentSlots {
+  /** 替换整个 actions 区域 */
+  default?: () => VNodeChild;
+  /** 额外 action 项（在 avatar dropdown 前） */
+  actionsRender?: (classNames: string[]) => VNodeChild;
+  /** 替换 avatar 触发器 */
+  dropdownTrigger?: () => VNodeChild;
+  /** 替换 dropdown 菜单内容 */
+  dropdownMenu?: () => VNodeChild;
+  /** dropdown 菜单顶部额外项 */
+  dropdownMenuExtra?: () => VNodeChild;
+  /** 锁屏内容（解耦 PageLock） */
+  lock?: (props: {
+    open: boolean;
+    onOpenChange: (val: boolean) => void;
+  }) => VNodeChild;
+}
+//#endregion
+export { RightContentActionsConfig, RightContentEmits, RightContentEmitsProps, RightContentLocale, RightContentProps, RightContentSlots, RightContentThemeOption, SearchConfig };

package/dist/RightContent/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/RightContent/locale.d.ts

@@ -0,0 +1,6 @@
+import { RightContentLocale } from "./interface.js";
+
+//#region src/RightContent/locale.d.ts
+declare const defaultLocale: RightContentLocale;
+//#endregion
+export { defaultLocale };

package/dist/RightContent/locale.js

@@ -0,0 +1,18 @@
+//#region src/RightContent/locale.ts
+const defaultLocale = {
+	searchPlaceholder: "搜索导航菜单",
+	searchLabel: "搜索",
+	searchShortcutLabel: "⌘ K",
+	lockScreen: "锁定屏幕",
+	logout: "退出登录",
+	noResult: (keyword) => `未找到搜索结果 "${keyword}"`,
+	noHistory: "没有搜索历史",
+	searchHistory: "搜索历史",
+	selectLabel: "选择",
+	navigateLabel: "导航",
+	lightTheme: "亮色",
+	darkTheme: "深色",
+	autoTheme: "自动"
+};
+//#endregion
+export { defaultLocale };

package/dist/RightContent/style.d.ts

@@ -1,10 +1,7 @@
-import * as vue236 from "vue";
-import * as ant_design_vue_es__util_type22 from "ant-design-vue/es/_util/type";
+import * as _$vue from "vue";
 
 //#region src/RightContent/style.d.ts
-declare function useStyle(componentCls: string): {
-  wrapSSR: (node: ant_design_vue_es__util_type22.VueNode) => ant_design_vue_es__util_type22.VueNode;
-  hashId: vue236.ComputedRef<string>;
-};
+type ComponentToken = Record<string, any>;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
 //#endregion
-export { useStyle };
+export { ComponentToken, _default as default };

package/dist/RightContent/style.js

@@ -1,73 +1,74 @@
-import { setAlpha, unit, useStyle as useStyle$1 } from "@gx-design-vue/pro-provider";
-
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
 //#region src/RightContent/style.ts
-const genStyle = (token) => {
-	return { [`${token.componentCls}`]: { "&-header-actions": {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
+function withAlpha(color, alpha) {
+	return `color-mix(in srgb, ${color} ${alpha * 100}%, transparent)`;
+}
+const genRightContentStyle = (token) => {
+	return { [token.componentCls]: {
 		height: "100%",
-		gap: token.paddingXS,
-		"&-item": {
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "center",
-			paddingBlock: 0,
-			paddingInline: 2,
-			color: token.layout?.header?.colorTextRightActionsItem,
-			fontSize: 14,
-			cursor: "pointer",
-			borderRadius: token.borderRadius,
-			[`.anticon`]: {
-				color: token.layout?.header?.colorTextRightActionsItem,
-				transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
-				"&:hover": { color: token.layout?.header?.colorTextRightActionsItemHover }
-			},
-			[`&${token.componentCls}-header-actions-theme`]: { [`${token.componentCls}-header-actions-icon`]: {
-				paddingInline: 4,
-				paddingBlock: 4,
-				fontSize: 18
-			} },
-			"> *": {
-				paddingInline: 6,
-				paddingBlock: 6,
-				borderRadius: token.borderRadius,
-				transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
-				"&:hover": {
-					color: token.layout?.header?.colorTextRightActionsItemHover,
-					backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
-				}
-			}
-		},
-		[`&>${token.antCls}-dropdown-trigger`]: {
-			color: token.colorTextTertiary,
-			paddingInline: 8,
-			paddingBlock: 8,
-			cursor: "pointer",
+		"&-header-actions": {
 			display: "flex",
 			alignItems: "center",
-			height: 44,
-			lineHeight: unit(44),
-			borderRadius: token.borderRadius,
-			"&:hover": { backgroundColor: setAlpha(token.colorTextBase, .03) }
-		},
-		"&-avatar": {
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "center",
+			justifyContent: "flex-end",
+			height: "100%",
 			gap: token.paddingXS,
-			paddingInlineStart: token.padding,
-			paddingInlineEnd: token.padding,
-			cursor: "pointer",
-			color: token.layout?.header?.colorTextRightActionsItem
+			"&-item": {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				paddingBlock: 0,
+				paddingInline: 2,
+				color: token.headerColorTextRightActionsItem,
+				fontSize: 14,
+				cursor: "pointer",
+				borderRadius: token.borderRadius,
+				[`.anticon`]: {
+					color: token.headerColorTextRightActionsItem,
+					transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+					"&:hover": { color: token.headerColorTextRightActionsItemHover }
+				},
+				[`&${token.componentCls}-header-actions-theme`]: { [`${token.componentCls}-header-actions-icon`]: {
+					paddingInline: 4,
+					paddingBlock: 4,
+					fontSize: 18
+				} },
+				"> *": {
+					paddingInline: 6,
+					paddingBlock: 6,
+					borderRadius: token.borderRadius,
+					transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+					"&:hover": {
+						color: token.headerColorTextRightActionsItemHover,
+						backgroundColor: token.headerColorBgRightActionsItemHover
+					}
+				}
+			},
+			[`&>${token.antCls}-dropdown-trigger`]: {
+				color: token.colorTextTertiary,
+				paddingInline: 8,
+				paddingBlock: 8,
+				cursor: "pointer",
+				display: "flex",
+				alignItems: "center",
+				height: 44,
+				lineHeight: "44px",
+				borderRadius: token.borderRadius,
+				"&:hover": { backgroundColor: withAlpha(token.colorTextBase, .03) }
+			},
+			"&-avatar": {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: token.paddingXS,
+				paddingInlineStart: token.padding,
+				paddingInlineEnd: token.padding,
+				cursor: "pointer",
+				color: token.headerColorTextRightActionsItem
+			},
+			"&-name": { color: token.headerColorTextRightActionsItem }
 		}
-	} } };
+	} };
 };
-function useStyle(componentCls) {
-	return useStyle$1("RightContent", (token) => {
-		return [genStyle(token)];
-	}, componentCls);
-}
-
+var style_default = proGenStyleHooks("ProRightContent", genRightContentStyle);
 //#endregion
-export { useStyle };
+export { style_default as default };

package/dist/RightContent/themeOptions.d.ts

@@ -0,0 +1,6 @@
+import { RightContentThemeOption } from "./interface.js";
+
+//#region src/RightContent/themeOptions.d.ts
+declare const defaultThemeOptions: RightContentThemeOption[];
+//#endregion
+export { defaultThemeOptions };

package/dist/RightContent/themeOptions.js

@@ -0,0 +1,34 @@
+import { createVNode, h } from "vue";
+import { DesktopOutlined } from "@antdv-next/icons";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/RightContent/themeOptions.tsx
+const iconStyle = { fontSize: "15px" };
+function labelWithIcon(icon, text) {
+	return () => createVNode("div", { "style": {
+		display: "flex",
+		alignItems: "center",
+		gap: "6px"
+	} }, [typeof icon === "function" ? icon() : icon, text]);
+}
+const defaultThemeOptions = [
+	{
+		value: "light",
+		label: labelWithIcon(h(GIcon, {
+			type: "Moon",
+			style: iconStyle
+		}), "亮色")
+	},
+	{
+		value: "dark",
+		label: labelWithIcon(h(GIcon, {
+			type: "Sunny",
+			style: iconStyle
+		}), "深色")
+	},
+	{
+		value: "system",
+		label: labelWithIcon(h(DesktopOutlined, { style: iconStyle }), "自动")
+	}
+];
+//#endregion
+export { defaultThemeOptions };

package/dist/RightContent/utils.d.ts

@@ -0,0 +1,24 @@
+import { LayoutMenuRoute } from "@gx-design-vue/pro-layout";
+
+//#region src/RightContent/utils.d.ts
+/**
+ * 根据指定字段对对象数组进行去重
+ */
+declare function uniqueByField<T>(arr: T[], key: keyof T): T[];
+/**
+ * 获取文本的拼音首字母串（如 "你好世界" → "NHSJ"）
+ */
+declare function getPinyinInitials(text: string): string;
+/**
+ * 判断菜单项名称是否匹配搜索关键词。
+ * 匹配策略：
+ * 1. 标题文本直接包含
+ * 2. 拼音首字母包含（如输入 "nh" 匹配 "你好"）
+ */
+declare function matchSearchItem(title: string, keyword: string): boolean;
+/**
+ * 从菜单数据源中搜索匹配项
+ */
+declare function searchMenuItems(dataSource: LayoutMenuRoute[], keyword: string): LayoutMenuRoute[];
+//#endregion
+export { getPinyinInitials, matchSearchItem, searchMenuItems, uniqueByField };