@gx-design-vue/pro-layout-components 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/RightContent/Search/Panel.js

@@ -1,6 +1,6 @@
 import { searchMenuItems, uniqueByField } from "../utils.js";
 import { Fragment, createVNode, defineComponent, nextTick, onMounted, ref, unref, watch } from "vue";
-import { CloseOutlined } from "@antdv-next/icons";
+import { GIcon } from "@gx-design-vue/icon";
 import { classNames, getPrefixCls, isString, isUrl } from "@gx-design-vue/pro-utils";
 import { onKeyStroke, useLocalStorage, useThrottleFn } from "@vueuse/core";
 import { Empty } from "antdv-next";
@@ -92,7 +92,10 @@ const GSearchPanel = /* @__PURE__ */ defineComponent((props) => {
 			"data-search-item": index,
 			"onClick": () => handleEnter(),
 			"onMouseenter": () => handleMouseenter(index)
-		}, [createVNode("div", { "class": getClassNames("panel-item-left") }, [item.meta?.title]), searchHistory.value.length > 0 && !props.keyword && createVNode(CloseOutlined, { "onClick": (e) => removeItem(e, item) }, null)]))])]) : renderEmpty.value?.() || createVNode(NoResult, {
+		}, [createVNode("div", { "class": getClassNames("panel-item-left") }, [item.meta?.title]), searchHistory.value.length > 0 && !props.keyword && createVNode(GIcon, {
+			"type": "CloseOutlined",
+			"onClick": (e) => removeItem(e, item)
+		}, null)]))])]) : renderEmpty.value?.() || createVNode(NoResult, {
 			"className": getClassNames("result"),
 			"value": props.keyword,
 			"locale": props.locale

package/dist/RightContent/Search/index.js

@@ -1,7 +1,7 @@
 import GSearchPanel from "./Panel.js";
 import style_default from "./style.js";
 import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, ref } from "vue";
-import { ArrowUpOutlined, EnterOutlined, SearchOutlined } from "@antdv-next/icons";
+import { GIcon } from "@gx-design-vue/icon";
 import { useInjectLayoutContext } from "@gx-design-vue/pro-layout";
 import { classNames, getLevelData, isWindowsOs } from "@gx-design-vue/pro-utils";
 import { useMagicKeys, whenever } from "@vueuse/core";
@@ -10,9 +10,12 @@ import { useBaseConfig } from "antdv-next/config-provider/context";
 import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
 import { GProModal } from "@gx-design-vue/pro-modal";
 //#region src/RightContent/Search/index.tsx
-const ModalFooter = ({ className, hashId, locale }) => createVNode("div", { "class": classNames(`${className}-footer`, hashId) }, [createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [createVNode(EnterOutlined, null, null), locale.selectLabel]), createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [
-	createVNode(ArrowUpOutlined, null, null),
-	createVNode(ArrowUpOutlined, { "rotate": 180 }, null),
+const ModalFooter = ({ className, hashId, locale }) => createVNode("div", { "class": classNames(`${className}-footer`, hashId) }, [createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [createVNode(GIcon, { "type": "EnterOutlined" }, null), locale.selectLabel]), createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [
+	createVNode(GIcon, { "type": "ArrowUpOutlined" }, null),
+	createVNode(GIcon, {
+		"type": "ArrowUpOutlined",
+		"rotate": 180
+	}, null),
 	locale.navigateLabel
 ])]);
 const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
@@ -55,7 +58,7 @@ const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
 				open.value = true;
 			}
 		}, [
-			createVNode(SearchOutlined, null, null),
+			createVNode(GIcon, { "type": "SearchOutlined" }, null),
 			createVNode("span", { "class": classNames(`${prefixCls.value}-word`, hashId.value) }, [props.locale.searchLabel]),
 			createVNode("span", { "class": classNames(`${prefixCls.value}-word-icon`, hashId.value) }, [
 				createTextVNode("⌘"),
@@ -81,10 +84,11 @@ const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
 				"size": "large",
 				"placeholder": props.locale.searchPlaceholder,
 				"value": keyword.value,
+				"prefix": createVNode(GIcon, { "type": "SearchOutlined" }, null),
 				"onUpdate:value": (val) => {
 					keyword.value = val;
 				}
-			}, { prefix: () => createVNode(SearchOutlined, null, null) }),
+			}, null),
 			"open": open.value,
 			"footer": createVNode(ModalFooter, {
 				"className": modalClass,

package/dist/RightContent/index.js

@@ -3,11 +3,10 @@ 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 { classNames, isArray } 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";
@@ -36,10 +35,9 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 	const actions = computed(() => {
 		if (props.actions === false) return {};
 		return {
-			lock: true,
 			theme: true,
 			search: true,
-			themeEditor: true,
+			themeEditor: false,
 			fullScreen: true,
 			...props.actions
 		};
@@ -55,19 +53,23 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 		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 menuSlots = slots?.dropdownMenu?.();
+		const items = props.dropdownProps?.menu?.items || [];
+		if (isArray(menuSlots)) menuSlots.forEach((item, index) => {
+			const key = item.props.key;
+			const icon = item.props.icon;
+			if (key === "menu-item") items.push({
+				key: `menu-${index}`,
+				label: item.children,
+				icon
 			});
-			items.push({ type: "divider" });
-		}
+			else if (key === "menu-divider") items.push({ type: "divider" });
+		});
 		items.push({
 			key: "logout",
-			icon: () => createVNode(LogoutOutlined, null, null),
-			label: mergedLocale.value.logout
+			icon: () => createVNode(GIcon, { "type": "LogoutOutlined" }, null),
+			label: mergedLocale.value.logout,
+			onClick: handleUserMenuClick
 		});
 		return items;
 	});
@@ -78,12 +80,8 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 	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),
@@ -91,7 +89,7 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 				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, [
+		}, [createVNode("div", { "style": { height: "100%" } }, [createVNode("div", { "class": classNames(`${prefixCls.value}-header-actions`) }, [slots.default ? slots.default() : createVNode(Fragment, null, [
 			actions.value.search && !isMobile.value && createVNode(GSearchInput, {
 				"dataSource": props.searchConfig?.dataSource,
 				"disabledShortKey": props.searchConfig?.disabledShortKey,
@@ -111,22 +109,25 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 					selectedKeys: [theme.value]
 				}
 			}, { default: () => [createVNode(GIcon, {
-				"class": classNames(`${prefixCls.value}-header-actions-icon`, hashId.value),
-				"type": isDark.value ? "Moon" : "Sunny"
+				"class": classNames(`${prefixCls.value}-header-actions-icon`),
+				"type": isDark.value ? "Moon" : "Sun"
 			}, 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)]),
+			actions.value.themeEditor && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(GIcon, {
+				"type": "SettingOutlined",
+				"onClick": () => handleActionClick("themeEditor")
+			}, null)]),
+			actions.value.fullScreen && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(GIcon, {
+				"type": isFullscreen.value ? "CompressOutlined" : "ExpandOutlined",
+				"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
-		})]);
+		]), createVNode(Dropdown, mergeProps({ "placement": "bottomRight" }, props.dropdownProps, { "menu": { items: userMenuItems.value } }), {
+			default: () => [slots.dropdownTrigger ? slots.dropdownTrigger() : createVNode("div", { "class": classNames(`${prefixCls.value}-header-actions-avatar`) }, [createVNode(Avatar, {
+				"size": 28,
+				"icon": createVNode(GIcon, { "type": "UserOutlined" }, null)
+			}, null), props.name && createVNode("span", { "class": classNames(`${prefixCls.value}-header-actions-name`) }, [props.name])])],
+			popupRender: slots.popupRender
+		})])])]);
 	};
 }, {
 	props: {

package/dist/RightContent/interface.d.ts

@@ -1,6 +1,7 @@
-import { VNodeChild } from "vue";
 import { ThemeValue } from "@gx-design-vue/context";
 import { LayoutMenuRoute } from "@gx-design-vue/pro-layout";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+import { DropdownProps, DropdownSlots } from "antdv-next";
 
 //#region src/RightContent/interface.d.ts
 interface RightContentEmits {
@@ -16,11 +17,10 @@ interface RightContentActionsConfig {
   theme?: boolean;
   themeEditor?: boolean;
   fullScreen?: boolean;
-  lock?: boolean;
 }
 interface RightContentThemeOption {
   value: ThemeValue;
-  label: () => VNodeChild;
+  label: () => CustomRender;
 }
 interface RightContentLocale {
   searchPlaceholder?: string;
@@ -55,7 +55,7 @@ interface RightContentProps extends RightContentEmitsProps {
   /** 用户头像 URL */
   avatar?: string;
   /** 透传给 antdv-next Dropdown 的额外 props */
-  dropdownProps?: Record<string, unknown>;
+  dropdownProps?: DropdownProps;
   /** 自定义主题选项（覆盖默认的 亮色/深色/自动） */
   themeOptions?: RightContentThemeOption[];
   /** 搜索配置 */
@@ -65,20 +65,13 @@ interface RightContentProps extends RightContentEmitsProps {
 }
 interface RightContentSlots {
   /** 替换整个 actions 区域 */
-  default?: () => VNodeChild;
+  default?: () => CustomRender;
   /** 额外 action 项（在 avatar dropdown 前） */
-  actionsRender?: (classNames: string[]) => VNodeChild;
+  actionsRender?: (classNames: string[]) => CustomRender;
   /** 替换 avatar 触发器 */
-  dropdownTrigger?: () => VNodeChild;
-  /** 替换 dropdown 菜单内容 */
-  dropdownMenu?: () => VNodeChild;
-  /** dropdown 菜单顶部额外项 */
-  dropdownMenuExtra?: () => VNodeChild;
-  /** 锁屏内容（解耦 PageLock） */
-  lock?: (props: {
-    open: boolean;
-    onOpenChange: (val: boolean) => void;
-  }) => VNodeChild;
+  dropdownTrigger?: () => CustomRender;
+  dropdownMenu?: () => CustomRender;
+  popupRender?: DropdownSlots['popupRender'];
 }
 //#endregion
 export { RightContentActionsConfig, RightContentEmits, RightContentEmitsProps, RightContentLocale, RightContentProps, RightContentSlots, RightContentThemeOption, SearchConfig };

package/dist/RightContent/themeOptions.js

@@ -1,5 +1,4 @@
 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" };
@@ -21,13 +20,16 @@ const defaultThemeOptions = [
 	{
 		value: "dark",
 		label: labelWithIcon(h(GIcon, {
-			type: "Sunny",
+			type: "Sun",
 			style: iconStyle
 		}), "深色")
 	},
 	{
 		value: "system",
-		label: labelWithIcon(h(DesktopOutlined, { style: iconStyle }), "自动")
+		label: labelWithIcon(h(GIcon, {
+			type: "DesktopOutlined",
+			style: iconStyle
+		}), "自动")
 	}
 ];
 //#endregion